Merge branch 'main' into cs-7851-display-ai-assistant-panel-in-code-mode

cardstack · Jan 22, 2025 · bde6e35 · bde6e35
2 parents c9e01a2 + 673efbc
commit bde6e35
Show file tree

Hide file tree

Showing 96 changed files with 4,538 additions and 2,735 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -252,7 +252,8 @@ jobs:
             "loader-test.ts",
             "module-syntax-test.ts",
             "queue-test.ts",
-            "realm-server-test.ts",
+            "realm-endpoints-test.ts",
+            "server-endpoints-test.ts",
             "virtual-network-test.ts",
           ]
     steps:

diff --git a/README.md b/README.md
@@ -84,8 +84,8 @@ Instead of running `pnpm start:base`, you can alternatively use `pnpm start:all`
 | :4205 | `/test` realm for matrix client tests (playwright controlled) | 🚫                  | 🚫                   |
 | :4210 | Development Worker Manager (spins up 1 worker by default)     | ✅                  | 🚫                   |
 | :4211 | Test Worker Manager (spins up 1 worker by default)            | ✅                  | 🚫                   |
-| :4212 | Test Worker Manager for matrix client tests (playwright controlled - 1 worker) | ✅ | 🚫                   |
-| :4213 | Test Worker Manager for matrix client tests - base realm server (playwright controlled - 1 worker) | ✅ | 🚫                   |
+| :4212 | Worker Manager for matrix client tests (playwright controlled - 1 worker) | ✅      | 🚫                   |
+| :4213 | Worker Manager for matrix client tests - base realm server (playwright controlled - 1 worker) | ✅ | 🚫    |
 | :5001 | Mail user interface for viewing emails sent to local SMTP     | ✅                  | 🚫                   |
 | :5435 | Postgres DB                                                   | ✅                  | 🚫                   |
 | :8008 | Matrix synapse server                                         | ✅                  | 🚫                   |
@@ -223,7 +223,7 @@ There is a ember-freestyle component explorer available to assist with developme
 
 1. `cd packages/boxel-ui/test-app`
 2. `pnpm start`
-3. Visit http://localhost:4210/ in your browser
+3. Visit http://localhost:4220/ in your browser
 
 ## Boxel Motion Demo App
 
@@ -290,7 +290,7 @@ To run the `packages/realm-server/` workspace tests start:
 ### Boxel UI
 
 1. `cd packages/boxel-ui/test-app`
-2. `pnpm test` (or `pnpm start` and visit http://localhost:4210/tests to run tests in the browser)
+2. `pnpm test` (or `pnpm start` and visit http://localhost:4220/tests to run tests in the browser)
 
 ### Boxel Motion
 

diff --git a/docs/realm.md b/docs/realm.md
@@ -16,7 +16,7 @@ The capabilites of the realm are:
 
 The entry point that serves these requests `handle` function in `realm.ts` file. Depending on the `Accept` header (the recognized ones are `application/vnd.card+json`, `application/vnd.card+source`, `application/vnd.api+json`, `text/event-stream`, `text/html`) and the HTTP verb (`GET`, `PATCH`, `POST`, `DELETE` ), it will perform one of the actions listed in the above list. The routing that depends on the MIME type and HTTP method is defined in `router.ts`. There's a special case of requesting the realm root (`/`) with `GET` and `application/vnd.card+json`. This looks for a card instance at `index.json` to return.
 
-The different types of requests, together with its params, are documented in `realm-server-test.ts`.
+The different types of requests, together with its params, are documented in `realm-endpoints-test.ts`.
 
 ## Transpiling code
 

diff --git a/packages/boxel-ui/addon/raw-icons/icon-trash.svg b/packages/boxel-ui/addon/raw-icons/icon-trash.svg
diff --git a/packages/boxel-ui/addon/src/components/color-palette/index.gts b/packages/boxel-ui/addon/src/components/color-palette/index.gts
@@ -4,12 +4,14 @@ import { on } from '@ember/modifier';
 import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 
+import IconTrash from '../../icons/icon-trash.gts';
 import ColorPicker from '../color-picker/index.gts';
+import IconButton from '../icon-button/index.gts';
 
 interface Signature {
   Args: {
-    color: string;
-    onChange: (color: string) => void;
+    color: string | null;
+    onChange: (color: string | null) => void;
   };
   Element: HTMLDivElement;
 }
@@ -40,16 +42,31 @@ export default class ColorPalette extends Component<Signature> {
 
   <template>
     <div class='color-palette-container' ...attributes>
-      <div class='color-palette'>
-        {{#each this.colors as |color|}}
-          <button
-            type='button'
-            class='swatch {{if (eq color @color) "selected"}}'
-            style={{htmlSafe (concat '--swatch-color: ' color)}}
-            {{on 'click' (fn @onChange color)}}
-            title={{color}}
-          />
-        {{/each}}
+      <div class='palette-group'>
+        <div class='color-palette'>
+          {{#each this.colors as |color|}}
+            <button
+              type='button'
+              class='swatch {{if (eq color @color) "selected"}}'
+              style={{htmlSafe (concat '--swatch-color: ' color)}}
+              {{on 'click' (fn @onChange color)}}
+              title={{color}}
+            />
+          {{/each}}
+        </div>
+        {{#if @color}}
+          <div>
+            <code class='selected-color'>{{@color}}</code>
+            <IconButton
+              @icon={{IconTrash}}
+              @width='16px'
+              @height='16px'
+              class='remove'
+              {{on 'click' (fn @onChange null)}}
+              aria-label='Unset color'
+            />
+          </div>
+        {{/if}}
       </div>
 
       <label class='color-picker-container'>
@@ -65,12 +82,25 @@ export default class ColorPalette extends Component<Signature> {
       }
 
       .color-palette-container {
+        --boxel-icon-button-width: var(--boxel-icon-sm);
+        --boxel-icon-button-height: var(--boxel-icon-sm);
         display: flex;
         gap: var(--boxel-sp);
         align-items: flex-start;
         flex-direction: column;
       }
 
+      .palette-group {
+        display: flex;
+        gap: var(--boxel-sp) var(--boxel-sp-lg);
+        align-items: center;
+        flex-wrap: wrap;
+      }
+
+      .selected-color {
+        text-transform: uppercase;
+      }
+
       .color-picker-container {
         --swatch-size: 1.8rem;
         border: 1px solid var(--boxel-border-color);
@@ -100,7 +130,7 @@ export default class ColorPalette extends Component<Signature> {
       .swatch {
         width: var(--swatch-size);
         height: var(--swatch-size);
-        border: 1px solid transparent;
+        border: 2px solid transparent;
         border-radius: 50%;
         padding: 2px;
         cursor: pointer;
@@ -143,6 +173,16 @@ export default class ColorPalette extends Component<Signature> {
         border: 1px solid transparent;
         border-radius: 50%;
       }
+
+      .remove {
+        vertical-align: text-bottom;
+        margin-left: var(--boxel-sp-xxxs);
+      }
+      .remove:focus,
+      .remove:hover {
+        --icon-color: var(--boxel-red);
+        outline: 0;
+      }
     </style>
   </template>
 }
diff --git a/packages/boxel-ui/addon/src/components/color-palette/usage.gts b/packages/boxel-ui/addon/src/components/color-palette/usage.gts
@@ -6,9 +6,9 @@ import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
 import ColorPalette from './index.gts';
 
 export default class ColorPaletteUsage extends Component {
-  @tracked color = '#000000';
+  @tracked color: string | null = null;
 
-  private handleColorChange = (newColor: string) => {
+  private handleColorChange = (newColor: string | null) => {
     this.color = newColor;
   };
 
@@ -31,7 +31,6 @@ export default class ColorPaletteUsage extends Component {
           @description='Currently selected color in hex format.'
           @value={{this.color}}
           @onInput={{fn (mut this.color)}}
-          @defaultValue='#000000'
         />
         <Args.Action
           @name='onChange'

diff --git a/packages/boxel-ui/addon/src/components/color-picker/index.gts b/packages/boxel-ui/addon/src/components/color-picker/index.gts
@@ -3,9 +3,9 @@ import Component from '@glimmer/component';
 
 interface Signature {
   Args: {
-    color: string;
+    color: string | null;
     disabled?: boolean;
-    onChange: (color: string) => void;
+    onChange: (color: string | null) => void;
     showHexString?: boolean;
   };
   Element: HTMLDivElement;
@@ -21,14 +21,14 @@ export default class ColorPicker extends Component<Signature> {
     <div class='color-picker' ...attributes>
       <input
         type='color'
-        value={{@color}}
+        value={{if @color @color '#ffffff'}}
         class='input'
         disabled={{@disabled}}
         aria-label='Choose color'
         {{on 'input' this.handleColorChange}}
       />
       {{#if @showHexString}}
-        <span class='hex-value'>{{@color}}</span>
+        <code class='hex-value'>{{@color}}</code>
       {{/if}}
     </div>
 
@@ -44,10 +44,8 @@ export default class ColorPicker extends Component<Signature> {
         width: var(--swatch-size);
         height: var(--swatch-size);
         padding: 0;
-        border: none;
         cursor: pointer;
-        background: transparent;
-        border: 1px solid var(--boxel-200);
+        border: var(--boxel-border);
         border-radius: 50%;
       }
 
@@ -65,8 +63,6 @@ export default class ColorPicker extends Component<Signature> {
       }
 
       .hex-value {
-        font: var(--boxel-font);
-        color: var(--boxel-dark);
         text-transform: uppercase;
       }
     </style>

diff --git a/packages/boxel-ui/addon/src/components/color-picker/usage.gts b/packages/boxel-ui/addon/src/components/color-picker/usage.gts
@@ -6,11 +6,11 @@ import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
 import ColorPicker from './index.gts';
 
 export default class ColorPickerUsage extends Component {
-  @tracked color = '#ff0000';
+  @tracked color: string | null = null;
   @tracked disabled = false;
   @tracked showHexString = true;
 
-  private onChange = (newColor: string) => {
+  private onChange = (newColor: string | null) => {
     this.color = newColor;
   };
 
@@ -35,7 +35,6 @@ export default class ColorPickerUsage extends Component {
           @description='Hex color value.'
           @value={{this.color}}
           @onInput={{fn (mut this.color)}}
-          @defaultValue='#ff0000'
         />
         <Args.Action
           @name='onChange'

diff --git a/packages/boxel-ui/addon/src/components/icon-button/index.gts b/packages/boxel-ui/addon/src/components/icon-button/index.gts
@@ -58,6 +58,7 @@ class IconButton extends Component<Signature> {
         padding: 0;
         background: var(--boxel-icon-button-background, none);
         border: 1px solid transparent;
+        color: var(--boxel-icon-button-color, currentColor);
         z-index: 0;
         overflow: hidden;
       }

diff --git a/packages/boxel-ui/addon/src/helpers/color-tools.ts b/packages/boxel-ui/addon/src/helpers/color-tools.ts
@@ -3,6 +3,7 @@ type RGB = { r: number; g: number; b: number };
 
 // contrast ratio should be at least 4.5 for regular sized text based on WCAG guidelines
 export const targetContrast = 4.5;
+export const targetContrastAAA = 7;
 
 export function rgbToHex({ r, g, b }: RGB): string {
   return (

diff --git a/packages/boxel-ui/addon/src/helpers/contrast-color.ts b/packages/boxel-ui/addon/src/helpers/contrast-color.ts
@@ -3,6 +3,7 @@ import {
   calculateLuminance,
   hexToRgb,
   targetContrast,
+  targetContrastAAA,
 } from './color-tools.ts';
 
 /*
@@ -16,6 +17,7 @@ export function getContrastColor(
   value: string | undefined,
   darkColor = 'var(--boxel-dark, #000000)',
   lightColor = 'var(--boxel-light, #ffffff)',
+  opts?: { isSmallText: true },
 ) {
   if (!value) {
     return;
@@ -25,5 +27,6 @@ export function getContrastColor(
     return;
   }
   let ratio = calculateContrast(calculateLuminance(rgb), 0); // luminocity of black is 0
-  return ratio >= targetContrast ? darkColor : lightColor;
+  let contrastLevel = opts?.isSmallText ? targetContrastAAA : targetContrast;
+  return ratio >= contrastLevel ? darkColor : lightColor;
 }
diff --git a/packages/boxel-ui/addon/src/icons/icon-trash.gts b/packages/boxel-ui/addon/src/icons/icon-trash.gts
@@ -10,7 +10,7 @@ const IconComponent: TemplateOnlyComponent<Signature> = <template>
     ...attributes
   ><g
       fill='none'
-      stroke='var(--icon-color, #000)'
+      stroke='var(--icon-color, currentColor)'
       stroke-linecap='round'
       stroke-linejoin='round'
       stroke-width='var(--icon-stroke-width, 1px)'

diff --git a/packages/boxel-ui/test-app/.ember-cli.js b/packages/boxel-ui/test-app/.ember-cli.js
@@ -14,7 +14,7 @@ module.exports = {
 
     Setting `disableAnalytics` to true will prevent any data from being sent.
   */
-  port: 4210,
+  port: 4220,
   testPort: 7356,
   disableAnalytics: false,
 };
diff --git a/packages/experiments-realm/Account/bf437dc3-1f96-45e5-a057-3487c6a5c2f7.json b/packages/experiments-realm/Account/bf437dc3-1f96-45e5-a057-3487c6a5c2f7.json
@@ -46,7 +46,7 @@
       },
       "primaryContact": {
         "links": {
-          "self": "../Customer/dddaeabf-1e95-480c-b158-0873e31fc66c"
+          "self": "../Lead/4e70a791-dd4e-4b39-99a1-bb8070392437"
         }
       },
       "contacts": {

diff --git a/packages/experiments-realm/BlogCategory/5c529dbb-bc16-41ee-9c31-a2b28e07b79d.json b/packages/experiments-realm/BlogCategory/5c529dbb-bc16-41ee-9c31-a2b28e07b79d.json
@@ -5,8 +5,7 @@
       "longName": "Movie Review",
       "shortName": "Movies",
       "slug": "movies",
-      "backgroundColor": "#fff500",
-      "textColor": null,
+      "pillColor": "#fff500",
       "description": null,
       "title": "Movie Review",
       "thumbnailURL": null
@@ -25,4 +24,4 @@
       }
     }
   }
-}
+}
diff --git a/packages/experiments-realm/BlogCategory/a4ee8a18-182b-47ff-b557-ef2e529c97ec.json b/packages/experiments-realm/BlogCategory/a4ee8a18-182b-47ff-b557-ef2e529c97ec.json
@@ -5,8 +5,7 @@
       "longName": "TV Series",
       "shortName": "TV",
       "slug": "tv-series",
-      "backgroundColor": "#fff500",
-      "textColor": null,
+      "pillColor": "#fff500",
       "description": null,
       "title": "TV Series",
       "thumbnailURL": null
@@ -25,4 +24,4 @@
       }
     }
   }
-}
+}
diff --git a/packages/experiments-realm/BlogCategory/crypto.json b/packages/experiments-realm/BlogCategory/crypto.json
@@ -5,12 +5,7 @@
       "longName": "Cryptocurrencies",
       "shortName": "Crypto",
       "slug": "crypto",
-      "backgroundColor": {
-        "hexValue": "#FA2200"
-      },
-      "textColor": {
-        "hexValue": "#ffffff"
-      },
+      "pillColor": "#FA2200",
       "description": "News about cryptocurrencies, price predictions, charts and everything about Satoshi Nakamoto",
       "title": "Cryptocurrency",
       "thumbnailURL": null
@@ -29,4 +24,4 @@
       }
     }
   }
-}
+}
diff --git a/packages/experiments-realm/BlogCategory/home-decor.json b/packages/experiments-realm/BlogCategory/home-decor.json
@@ -5,12 +5,7 @@
       "longName": "Home decoration & interior design",
       "shortName": "Home Decor",
       "slug": "home",
-      "backgroundColor": {
-        "hexValue": "#FCF8A6"
-      },
-      "textColor": {
-        "hexValue": "#FA2200"
-      },
+      "pillColor": "#FCF8A6",
       "description": "Articles about the aesthetic side of home building and renovation",
       "title": "Home decoration & interior design",
       "thumbnailURL": null