cardstack · backspace · Jul 28, 2026 · Jul 22, 2026 · Jul 27, 2026 · Jul 27, 2026
diff --git a/.github/workflows/ci-lint.yaml b/.github/workflows/ci-lint.yaml
@@ -52,6 +52,17 @@ jobs:
         if: ${{ !cancelled() }}
         run: pnpm run lint
         working-directory: packages/boxel-ui/addon
+      - name: Lint Host
+        # Runs BEFORE Build Boxel UI so host type-checks against the Boxel UI
+        # source, exactly as local development does (declarations/ is never
+        # built locally). This also guards against declaration-emit
+        # regressions: an unresolvable import inside a .d.ts is silently
+        # suppressed under skipLibCheck and degrades every Boxel UI symbol to
+        # `any`, turning the host type check into a no-op (see boxel-ui's
+        # bin/fix-declaration-extensions.mjs).
+        if: ${{ !cancelled() }}
+        run: pnpm run lint
+        working-directory: packages/host
       - name: Build Boxel UI
         # To faciliate linting of projects that depend on Boxel UI
         if: ${{ !cancelled() }}
@@ -61,10 +72,6 @@ jobs:
         if: ${{ !cancelled() }}
         run: pnpm run lint
         working-directory: packages/boxel-ui/test-app
-      - name: Lint Host
-        if: ${{ !cancelled() }}
-        run: pnpm run lint
-        working-directory: packages/host
       - name: Lint Matrix
         if: ${{ !cancelled() }}
         run: pnpm run lint

diff --git a/packages/base/amount-with-currency.gts b/packages/base/amount-with-currency.gts
@@ -1,5 +1,7 @@
-import NumberField from './number';
+import NumberField, { deserializeForUI, serializeForUI } from './number';
 import { FieldDef, field, contains, Component } from './card-api';
+import { NumberSerializer } from '@cardstack/runtime-common';
+import { TextInputValidator } from './text-input-validator';
 import CurrencyField from './currency';
 import { action } from '@ember/object';
 import { BoxelInputGroup } from '@cardstack/boxel-ui/components';
@@ -28,13 +30,23 @@ class Edit extends Component<typeof AmountWithCurrency> {
   }
 
   @action
-  setAmount(val: number) {
+  setAmount(val: number | null | undefined) {
     let newModel = new AmountWithCurrency();
-    newModel.amount = val;
+    if (val != null) {
+      newModel.amount = val;
+    }
     newModel.currency.code = newModel.currency.code || 'USD';
     this.args.set(newModel);
   }
 
+  textInputValidator: TextInputValidator<number> = new TextInputValidator(
+    () => this.args.model.amount ?? null,
+    (val) => this.setAmount(val),
+    deserializeForUI,
+    serializeForUI,
+    NumberSerializer.validate,
+  );
+
   @action
   setCurrency(val: CurrencyField) {
     let newModel = new AmountWithCurrency();
@@ -47,9 +59,10 @@ class Edit extends Component<typeof AmountWithCurrency> {
     <BoxelInputGroup
       @id={{this.id}}
       @placeholder='0.00'
-      @value={{@model.amount}}
-      @invalid={{false}}
-      @onInput={{this.setAmount}}
+      @value={{this.textInputValidator.asString}}
+      @state={{if this.textInputValidator.isInvalid 'invalid' 'none'}}
+      @errorMessage={{this.textInputValidator.errorMessage}}
+      @onInput={{this.textInputValidator.onInput}}
       @autocomplete='off'
       @inputmode='decimal'
       class='input-selectable-currency-amount'

diff --git a/packages/base/color-field/components/swatches-picker.gts b/packages/base/color-field/components/swatches-picker.gts
@@ -5,6 +5,10 @@ import { ColorPalette } from '@cardstack/boxel-ui/components';
 import type { ColorFieldSignature } from '../util/color-field-signature';
 
 export default class SwatchesPicker extends Component<ColorFieldSignature> {
+  private handleChange = (value: string | null) => {
+    this.args.set?.(value);
+  };
+
   get paletteColors() {
     const options = (
       this.args.configuration as ColorFieldConfiguration & {
@@ -17,7 +21,7 @@ export default class SwatchesPicker extends Component<ColorFieldSignature> {
   <template>
     <ColorPalette
       @color={{@model}}
-      @onChange={{@set}}
+      @onChange={{this.handleChange}}
       @disabled={{not @canEdit}}
       @paletteColors={{this.paletteColors}}
     />

diff --git a/packages/base/contains-many-component.gts b/packages/base/contains-many-component.gts
@@ -144,7 +144,7 @@ class ContainsManyEditor extends GlimmerComponent<ContainsManyEditorSignature> {
             {{on 'click' this.add}}
             data-test-add-new
           >
-            <IconPlus class='icon' width='12px' height='12px' alt='plus' />
+            <IconPlus class='icon' width='12px' height='12px' role='presentation' />
             Add
             {{getPlural @field.card.displayName}}
           </Button>

diff --git a/packages/base/email.gts b/packages/base/email.gts
@@ -15,10 +15,10 @@ import MailIcon from '@cardstack/boxel-icons/mail';
 
 class Edit extends Component<typeof EmailField> {
   @action private handleChange(
-    value: string,
-    validation: EmailFormatValidationError,
+    value: string | null,
+    validation: EmailFormatValidationError | null,
   ) {
-    if (validation === null && this.args.model !== value) {
+    if (validation === null && value !== null && this.args.model !== value) {
       this.args.set(value);
     }
   }

diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
@@ -284,13 +284,13 @@ export function getBoxComponent(
     return isThemeCard(cardDef) ? cardDef.id : cardDef?.cardTheme?.id;
   }
 
-  function getCssImports(card?: CardDef) {
+  function getCssImports(card?: CardDef): string[] | undefined {
     // for cards like Theme card and its descendants, directly use the `cssImports` field;
     // for all other cards, get imports via the Theme card linked from cardInfo
     if (card && 'cssImports' in card) {
       let field = getField(card, 'cssImports');
       if (field?.card?.name === 'CssImportField') {
-        return card.cssImports;
+        return card.cssImports as string[] | undefined;
       }
     }
     return card?.cardTheme?.cssImports;

diff --git a/packages/base/links-to-many-component.gts b/packages/base/links-to-many-component.gts
@@ -337,7 +337,7 @@ class LinksToManyStandardEditor extends GlimmerComponent<LinksToManyStandardEdit
           {{on 'click' @add}}
           data-test-add-new={{@field.name}}
         >
-          <IconPlus class='icon' width='12px' height='12px' alt='plus' />
+          <IconPlus class='icon' width='12px' height='12px' role='presentation' />
           Add
           {{getPlural @field.card.displayName}}
         </Button>
@@ -513,7 +513,7 @@ class LinksToManyCompactEditor extends GlimmerComponent<LinksToManyCompactEditor
         {{on 'click' @add}}
         data-test-add-new={{@field.name}}
       >
-        <IconPlus class='icon' width='12px' height='12px' alt='plus' />
+        <IconPlus class='icon' width='12px' height='12px' role='presentation' />
         Add
         {{@field.card.displayName}}
       </Button>

diff --git a/packages/base/process-card.gts b/packages/base/process-card.gts
@@ -27,7 +27,10 @@ class ProcessTemplate extends Component<typeof ProcessCard> {
         </span>
         <h3 class='process-card__name'><@fields.cardTitle /></h3>
       </header>
-      <ProgressBar @value={{@model.percentComplete}} @max={{100}} />
+      <ProgressBar
+        @value={{if @model.percentComplete @model.percentComplete 0}}
+        @max={{100}}
+      />
       <footer class='process-card__footer'>
         <span class='process-card__count'>{{@model.progressLabel}}</span>
         <span

diff --git a/packages/base/realm.gts b/packages/base/realm.gts
@@ -20,8 +20,8 @@ type RealmMeta = {
   realmIdentifier: string;
   canWrite: boolean;
   info: {
-    name?: string;
-    iconURL?: string;
+    name: string;
+    iconURL: string | null;
   };
 };
 

diff --git a/packages/base/skill-reference.gts b/packages/base/skill-reference.gts
@@ -3,7 +3,7 @@ import { on } from '@ember/modifier';
 import ExternalLink from '@cardstack/boxel-icons/external-link';
 
 import { Button, Pill } from '@cardstack/boxel-ui/components';
-import { cn, eq } from '@cardstack/boxel-ui/helpers';
+import { eq } from '@cardstack/boxel-ui/helpers';
 
 import { FieldDef, field, contains, linksTo, Component } from './card-api';
 import enumField from './enum';
@@ -86,10 +86,10 @@ export class SkillReference extends FieldDef {
             </h4>
             <Pill
               class='skill-ref-mode boxel-ellipsize'
-              @variant={{cn
-                primary=(eq @model.inclusionMode 'full')
-                accent=(eq @model.inclusionMode 'essential')
-                muted=(eq @model.inclusionMode 'link-only')
+              @variant={{if
+                (eq @model.inclusionMode 'full')
+                'primary'
+                (if (eq @model.inclusionMode 'essential') 'accent' 'muted')
               }}
             >
               {{if

diff --git a/packages/base/spec.gts b/packages/base/spec.gts
@@ -564,7 +564,9 @@ export class SpecModuleSection extends GlimmerComponent<SpecModuleSectionSignatu
       <div class='code-ref-container'>
         <FieldContainer @label='URL' @vertical={{true}} @labelFontSize='small'>
           <div class='code-ref-row'>
-            <RealmIcon class='realm-icon' @realmInfo={{this.realmInfo}} />
+            {{#if this.realmInfo}}
+              <RealmIcon class='realm-icon' @realmInfo={{this.realmInfo}} />
+            {{/if}}
             <span class='code-ref-value' data-test-module-href>
               {{this.moduleHref}}
             </span>

diff --git a/packages/boxel-ui/addon/bin/fix-declaration-extensions.mjs b/packages/boxel-ui/addon/bin/fix-declaration-extensions.mjs
@@ -0,0 +1,47 @@
+// Rewrites relative `.gts` import specifiers in the emitted declaration
+// files to `.js`, which consumers' module resolution maps to the sibling
+// `.d.ts` files. ember-tsc emits declaration imports with their authored
+// `.gts` extensions, which don't resolve from within declarations/ — and an
+// unresolvable import inside a `.d.ts` is silently suppressed under
+// skipLibCheck, degrading every symbol imported from this package to `any`.
+import { readdir, readFile, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const declarationsDir = fileURLToPath(
+  new URL('../declarations', import.meta.url),
+);
+
+async function* dtsFiles(dir) {
+  for (const entry of await readdir(dir, { withFileTypes: true })) {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      yield* dtsFiles(path);
+    } else if (entry.name.endsWith('.d.ts')) {
+      yield path;
+    }
+  }
+}
+
+const relativeGtsSpecifier = /(['"])(\.\.?\/[^'"]+)\.gts(\1)/g;
+const anyGtsSpecifier = /['"][^'"]+\.gts['"]/;
+
+let rewrittenFileCount = 0;
+for await (const path of dtsFiles(declarationsDir)) {
+  const source = await readFile(path, 'utf8');
+  const updated = source.replace(relativeGtsSpecifier, '$1$2.js$3');
+  if (updated !== source) {
+    await writeFile(path, updated);
+    rewrittenFileCount++;
+  }
+  const leftover = updated.match(anyGtsSpecifier);
+  if (leftover) {
+    throw new Error(
+      `fix-declaration-extensions: unrewritable .gts specifier ${leftover[0]} remains in ${path}`,
+    );
+  }
+}
+
+console.log(
+  `fix-declaration-extensions: rewrote .gts specifiers in ${rewrittenFileCount} declaration files`,
+);
diff --git a/packages/boxel-ui/addon/package.json b/packages/boxel-ui/addon/package.json
@@ -14,7 +14,7 @@
   },
   "scripts": {
     "build": "concurrently \"pnpm:build:*\" --names \"build:\"",
-    "build:types": "ember-tsc --declaration --emitDeclarationOnly --noEmit false",
+    "build:types": "ember-tsc --declaration --emitDeclarationOnly --noEmit false && node bin/fix-declaration-extensions.mjs",
     "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\"",
     "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\"",
     "lint:hbs": "ember-template-lint .",

diff --git a/packages/boxel-ui/addon/src/components/alert/index.gts b/packages/boxel-ui/addon/src/components/alert/index.gts
@@ -9,7 +9,7 @@ import Button, { type BoxelButtonKind } from '../button/index.gts';
 
 interface MessagesSignature {
   Args: {
-    messages: string[];
+    messages: (string | undefined)[];
     type?: 'error' | 'warning';
   };
   Element: HTMLDivElement;

diff --git a/packages/boxel-ui/addon/src/components/basic-fitted/index.gts b/packages/boxel-ui/addon/src/components/basic-fitted/index.gts
@@ -8,7 +8,7 @@ interface Signature {
     description?: string;
     iconComponent?: Icon;
     isEmpty?: boolean;
-    primary: string;
+    primary?: string;
     secondary?: string;
     thumbnailURL?: string;
   };

diff --git a/packages/boxel-ui/addon/src/components/button/index.gts b/packages/boxel-ui/addon/src/components/button/index.gts
@@ -55,7 +55,7 @@ interface Signature {
     as?: string;
     class?: string;
     disabled?: boolean;
-    href?: string;
+    href?: string | null;
     kind?: BoxelButtonKind;
     loading?: boolean;
     models?: any;

diff --git a/packages/boxel-ui/addon/src/components/circle-spinner/index.gts b/packages/boxel-ui/addon/src/components/circle-spinner/index.gts
@@ -3,7 +3,7 @@ import Component from '@glimmer/component';
 import IconCircle from '../../icons/icon-circle.gts';
 
 interface Signature {
-  Element: SVGElement;
+  Element: SVGSVGElement;
 }
 
 // eslint-disable-next-line ember/no-empty-glimmer-component-classes

diff --git a/packages/boxel-ui/addon/src/components/copy-button/index.gts b/packages/boxel-ui/addon/src/components/copy-button/index.gts
@@ -19,7 +19,7 @@ interface Signature {
     offset?: number;
     placement?: MiddlewareState['placement'];
     size?: BoxelButtonSize;
-    textToCopy: string;
+    textToCopy: string | null | undefined;
     tooltipText?: string;
     variant?: BoxelButtonKind;
     width?: string;
@@ -31,6 +31,9 @@ export default class CopyButton extends Component<Signature> {
   @tracked private recentlyCopied = false;
 
   @action private async copyToClipboard() {
+    if (this.args.textToCopy == null) {
+      return;
+    }
     try {
       await navigator.clipboard.writeText(this.args.textToCopy);
       this.recentlyCopied = true;

diff --git a/packages/boxel-ui/addon/src/components/drag-and-drop/index.gts b/packages/boxel-ui/addon/src/components/drag-and-drop/index.gts
@@ -41,11 +41,11 @@ export class DndColumn {
 export interface DndKanbanBoardSignature<DndColumn> {
   Args: DndKanbanBoardArgs<DndColumn>;
   Blocks: {
-    card: [card?: DndItem, column?: DndColumn];
+    card: [card: DndItem, column: DndColumn];
     // We yield the card and column back to the consumer so they can decide how to render it or use additional information
     // This rendering by the block will typically occur at the card of the kanaban
     // but with more sophistication you can use it somewhere else
-    header: [column?: DndColumn];
+    header: [column: DndColumn];
   };
 }
 

diff --git a/packages/boxel-ui/addon/src/components/dropdown/index.gts b/packages/boxel-ui/addon/src/components/dropdown/index.gts
@@ -51,9 +51,10 @@ interface Signature {
         Args: {
           Positional: unknown[];
         };
-        // note: should only be used with Button, but HTMLAnchorElement is included so that the
-        // trigger bindings can be applied to BoxelButton without glint error
-        Element: HTMLButtonElement | HTMLAnchorElement;
+        // note: the trigger should be an interactive element (Button or a
+        // component like Pill that renders one), but that isn't expressible
+        // here, so any element is accepted
+        Element: HTMLElement;
       }>,
     ];
   };

diff --git a/packages/boxel-ui/addon/src/components/email-input/index.gts b/packages/boxel-ui/addon/src/components/email-input/index.gts
@@ -22,7 +22,7 @@ interface Signature {
     required?: boolean;
     value: string | null;
   };
-  Element: HTMLElement;
+  Element: HTMLInputElement;
 }
 
 const DEFAULT_FALLBACK_MESSAGE = 'Enter a valid email address';

diff --git a/packages/boxel-ui/addon/src/components/field-container/index.gts b/packages/boxel-ui/addon/src/components/field-container/index.gts
@@ -15,7 +15,7 @@ export interface Signature {
     iconHeight?: string;
     iconWidth?: string;
     inline?: boolean;
-    label: string;
+    label?: string;
     labelFontSize?: BoxelLabelFontSize;
     tag?: keyof HTMLElementTagNameMap;
     vertical?: boolean;
@@ -52,13 +52,15 @@ const FieldContainer: TemplateOnlyComponent<Signature> = <template>
             role='presentation'
           />
         {{/if}}
-        <Label
-          class='label'
-          @size={{@labelFontSize}}
-          data-test-boxel-field-label
-        >
-          {{@label}}
-        </Label>
+        {{#if @label}}
+          <Label
+            class='label'
+            @size={{@labelFontSize}}
+            data-test-boxel-field-label
+          >
+            {{@label}}
+          </Label>
+        {{/if}}
         {{yield to='label'}}
       </div>
       <div class='content'>