@cardstack/boxel-cli 0.10.0 → 0.10.1-unstable.0

package/bundled-realms/pretui/components/copy-fit.usage.gts

@@ -0,0 +1,200 @@
+// Pretui — CopyFit usage page.
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { CopyFit } from './copy-fit';
+
+// ── CopyFit ← fitted-card/usage.gts ──────────────────────────────────────
+// Dropped knobs: imageAlt (the media image is decorative — alt='' baked in);
+// imageLoading (no arg); titleTag (title renders as a span, not a heading);
+// layout (container queries only — no forced direction); subtitle,
+// placeholder, background, badgeLeft, badgeRight, badgeRow blocks (no
+// Pretui equivalents).
+class CopyFitUsage extends GlimmerComponent {
+  @tracked title = "Singularity's Echo";
+  @tracked eyebrow = 'Movie Review';
+  @tracked meta = 'Oct 17, 2024';
+  @tracked media =
+    'https://boxel-images.boxel.ai/app-assets/blog-posts/space-movie-thumb.jpeg';
+  @tracked mediaBg = '';
+  @tracked monogram = '';
+  @tracked footerLeft = 'Robert Fields';
+  @tracked footerRight = '4.8 ★';
+  setTitle = (v: string) => (this.title = v);
+  setEyebrow = (v: string) => (this.eyebrow = v);
+  setMeta = (v: string) => (this.meta = v);
+  setMedia = (v: string) => (this.media = v);
+  setMediaBg = (v: string) => (this.mediaBg = v);
+  setMonogram = (v: string) => (this.monogram = v);
+  setFooterLeft = (v: string) => (this.footerLeft = v);
+  setFooterRight = (v: string) => (this.footerRight = v);
+  <template>
+    <FreestyleUsage
+      @name='CopyFit'
+      @description='The copy-fitting layout mechanism. One adaptive design across the badge / strip / tile / card sub-formats, chosen automatically via CSS container queries on the card root — media-forward when media exists, monogram placeholder otherwise. Content is supplied via args; only title is required.'
+    >
+      <:example>
+        {{! FIXED-SIZE FORMAT BOXES — one adaptive design, four sub-formats,
+            container-query driven (the fitted-card usage-preview idea). }}
+        <figure class='format'>
+          <div class='size-badge'>
+            <CopyFit
+              @title={{this.title}}
+              @eyebrow={{this.eyebrow}}
+              @meta={{this.meta}}
+              @media={{this.media}}
+              @mediaBg={{this.mediaBg}}
+              @monogram={{this.monogram}}
+              @footerLeft={{this.footerLeft}}
+              @footerRight={{this.footerRight}}
+            />
+          </div>
+          <figcaption>badge · 130×40</figcaption>
+        </figure>
+        <figure class='format'>
+          <div class='size-strip'>
+            <CopyFit
+              @title={{this.title}}
+              @eyebrow={{this.eyebrow}}
+              @meta={{this.meta}}
+              @media={{this.media}}
+              @mediaBg={{this.mediaBg}}
+              @monogram={{this.monogram}}
+              @footerLeft={{this.footerLeft}}
+              @footerRight={{this.footerRight}}
+            />
+          </div>
+          <figcaption>strip · 230×64</figcaption>
+        </figure>
+        <figure class='format'>
+          <div class='size-tile'>
+            <CopyFit
+              @title={{this.title}}
+              @eyebrow={{this.eyebrow}}
+              @meta={{this.meta}}
+              @media={{this.media}}
+              @mediaBg={{this.mediaBg}}
+              @monogram={{this.monogram}}
+              @footerLeft={{this.footerLeft}}
+              @footerRight={{this.footerRight}}
+            />
+          </div>
+          <figcaption>tile · 180×160</figcaption>
+        </figure>
+        <figure class='format'>
+          <div class='size-card'>
+            <CopyFit
+              @title={{this.title}}
+              @eyebrow={{this.eyebrow}}
+              @meta={{this.meta}}
+              @media={{this.media}}
+              @mediaBg={{this.mediaBg}}
+              @monogram={{this.monogram}}
+              @footerLeft={{this.footerLeft}}
+              @footerRight={{this.footerRight}}
+            />
+          </div>
+          <figcaption>card · 210×260</figcaption>
+        </figure>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='media'
+          @description='Cover image URL. When present the image fills the media column; clear it to show the monogram placeholder instead.'
+          @value={{this.media}}
+          @onInput={{this.setMedia}}
+        />
+        <Args.String
+          @name='title'
+          @description='Primary heading.'
+          @value={{this.title}}
+          @required={{true}}
+          @onInput={{this.setTitle}}
+        />
+        <Args.String
+          @name='eyebrow'
+          @description='Tiny uppercase overline rendered above the title. Styled with muted-foreground color and letter-spacing. Shown at tile and card sizes.'
+          @value={{this.eyebrow}}
+          @onInput={{this.setEyebrow}}
+        />
+        <Args.String
+          @name='meta'
+          @description='Additional content between the header and footer. Use for stats, tags, or secondary metadata. Hidden at badge size.'
+          @value={{this.meta}}
+          @onInput={{this.setMeta}}
+        />
+        <Args.String
+          @name='footerLeft'
+          @description='Left slot of the bottom row — for date, location, price, stats, etc. Anchored to the bottom of the content column; shown at card size only.'
+          @value={{this.footerLeft}}
+          @onInput={{this.setFooterLeft}}
+        />
+        <Args.String
+          @name='footerRight'
+          @description='Right slot of the bottom row; shown at card size only.'
+          @value={{this.footerRight}}
+          @onInput={{this.setFooterRight}}
+        />
+        <Args.String
+          @name='monogram'
+          @description='Letter shown in the media area when no media exists; defaults to the first character of the title.'
+          @value={{this.monogram}}
+          @onInput={{this.setMonogram}}
+        />
+        <Args.String
+          @name='mediaBg'
+          @description='Background color behind the media area when the monogram placeholder shows.'
+          @value={{this.mediaBg}}
+          @onInput={{this.setMediaBg}}
+        />
+        <Args.Yield
+          @name='media'
+          @description='Custom media block, rendered directly inside the media column. Alternative to @media for when you need markup rather than a bare URL.'
+          @hideControls={{true}}
+        />
+        <Args.Base
+          @typeLabel='CSS'
+          @name='--fc-*'
+          @description="The boxel-ui page's ~40 CSS-variable knobs (layout, image column, badges, typography, section visibility) — CSS knob layer not yet ported. Pretui exposes --pretui-fitted-mediabg."
+          @hideControls={{true}}
+        />
+      </:api>
+    </FreestyleUsage>
+    <style scoped>
+      .format {
+        margin: 0;
+        display: grid;
+        gap: 6px;
+        justify-items: center;
+        align-self: end;
+      }
+      .format figcaption {
+        font-family: var(--font-mono);
+        font-size: var(--text-ui-xs, 11px);
+        letter-spacing: var(--track-eyebrow, 0.08em);
+        text-transform: uppercase;
+        color: var(--muted-foreground);
+      }
+      .size-badge {
+        width: 130px;
+        height: 40px;
+      }
+      .size-strip {
+        width: 230px;
+        height: 64px;
+      }
+      .size-tile {
+        width: 180px;
+        height: 160px;
+      }
+      .size-card {
+        width: 210px;
+        height: 260px;
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_COPY_FIT: Record<string, unknown> = {
+  CopyFit: CopyFitUsage,
+};

package/bundled-realms/pretui/components/cta-band.gts

@@ -0,0 +1,285 @@
+// Pretui — CtaBand: a full-width call-to-action band.
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import type { PretuiAppearance, PretuiTone } from '../pretui-primitives';
+import { ariaLevelFor } from '../internal/blocks';
+import type { BlockHeadingLevel } from '../internal/blocks';
+
+// ═════════════════════════════════════════════════════════════════════════
+// B4 · CtaBand
+// ═════════════════════════════════════════════════════════════════════════
+//
+// From catalog-app's storefront-footer: the closing call-to-action band
+// every landing page ends with.
+//
+// LADDER NOTE, stated in the file because it matters more than the code:
+// this is the one of the four that is NOT really a block. It composes no
+// kit component — its whole value is a surface treatment plus slots, which
+// is component work. Its honest tier is Surfaces (structure territory). It
+// ships here because it terminates the storefront family and because a
+// block file is where it was asked for; the recommendation to move it into
+// `structure.gts` is in the report.
+//
+// Built to be exemplary rather than elaborate: the entire visual range is
+// the kit's grid — `@tone` picks the hue and sets `--pretui-tone` /
+// `--pretui-tone-on`, `@appearance` picks the recipe, and the recipes are
+// written once and read those two properties. Thirty-five dresses, zero
+// hand-authored pairs, and the resolved axes are reflected as `data-tone` /
+// `data-appearance` so a consumer styles by attribute rather than by arg.
+//
+// BETTER THAN THE INSPIRATION:
+//   · The only component in the corpus that did not even ATTEMPT a token —
+//     `background: #14141a`, `color: #fff`, `#b7b4ab` raw, so it was a dark
+//     surface that could never follow a theme → there is not one colour
+//     literal outside a `var()` fallback here, and the dark band is
+//     `@tone='neutral' @appearance='accent'`, which a theme re-dresses and
+//     dark mode inverts for free.
+//   · Zero args, all copy hardcoded → everything is an arg.
+//   · Called a footer but rendered a `<section>` with an `<h3>` and no
+//     landmark → it is a `<section>` because a CTA band IS a section, and
+//     it is a named region: the heading is a real heading element with a
+//     caller-chosen level, and `aria-labelledby` points at it. A caller who
+//     wants a `<footer>` landmark wraps it in one, which is the correct
+//     place for that decision.
+//   · The copy said "List it" and there was NO CTA CONTROL in it at all →
+//     `<:actions>` is the point of the component, and the demo shows the
+//     dual-CTA pair.
+
+export interface CtaBandSignature {
+  Args: {
+    /** Small line above the headline. */
+    eyebrow?: string;
+    /** The headline. Required — it names the band. */
+    headline: string;
+    /** One paragraph under the headline. */
+    lead?: string;
+    /** Semantic hue. Default `primary`. */
+    tone?: PretuiTone;
+    /** Visual weight. Default `accent`. */
+    appearance?: PretuiAppearance;
+    /** Text alignment. `center` (default) for a closing band, `start` when
+     * it sits inside a column of left-aligned prose. */
+    align?: 'start' | 'center';
+    /** Heading level in the host page. */
+    headingLevel?: BlockHeadingLevel;
+  };
+  Blocks: {
+    /** The call-to-action controls. */
+    actions: [];
+    /** Fine print under the actions. */
+    default: [];
+  };
+  Element: HTMLElement;
+}
+
+export class CtaBand extends Component<CtaBandSignature> {
+  private headlineId = guidFor(this) + '-headline';
+
+  get tone(): PretuiTone {
+    return this.args.tone ?? 'primary';
+  }
+  get appearance(): PretuiAppearance {
+    return this.args.appearance ?? 'accent';
+  }
+  get align(): 'start' | 'center' {
+    return this.args.align === 'start' ? 'start' : 'center';
+  }
+  get headingAriaLevel() {
+    return ariaLevelFor(this.args.headingLevel);
+  }
+
+  <template>
+    <section
+      class='pretui-cta'
+      data-tone={{this.tone}}
+      data-appearance={{this.appearance}}
+      data-align={{this.align}}
+      aria-labelledby={{this.headlineId}}
+      data-test-pretui-cta-band
+      ...attributes
+    >
+      <div class='pretui-cta-inner'>
+        {{#if @eyebrow}}
+          <p class='pretui-cta-eyebrow'>{{@eyebrow}}</p>
+        {{/if}}
+        <h2
+          id={{this.headlineId}}
+          class='pretui-cta-headline'
+          aria-level={{this.headingAriaLevel}}
+        >{{@headline}}</h2>
+        {{#if @lead}}
+          <p class='pretui-cta-lead'>{{@lead}}</p>
+        {{/if}}
+        {{#if (has-block 'actions')}}
+          <div
+            class='pretui-cta-actions'
+            data-test-pretui-cta-actions
+          >{{yield to='actions'}}</div>
+        {{/if}}
+        {{yield}}
+      </div>
+    </section>
+
+    <style scoped>
+      @layer PretComponent {
+        .pretui-cta {
+          container-type: inline-size;
+          display: block;
+          border-radius: var(--radius-surface, 10px);
+          padding: var(--pretui-cta-pad, var(--space-9, 45px) var(--space-6, 19px));
+          color: var(--pretui-band-ink, var(--foreground));
+        }
+        .pretui-cta-inner {
+          display: grid;
+          gap: var(--space-4, 11px);
+          max-width: var(--pretui-cta-measure, 60ch);
+        }
+        .pretui-cta[data-align='center'] .pretui-cta-inner {
+          justify-items: center;
+          text-align: center;
+          margin-inline: auto;
+        }
+        .pretui-cta[data-align='start'] .pretui-cta-inner {
+          justify-items: start;
+          text-align: start;
+        }
+        .pretui-cta-eyebrow {
+          margin: 0;
+          font-family: var(--font-mono);
+          font-size: var(--text-ui-xs, 11px);
+          font-weight: 500;
+          letter-spacing: var(--track-eyebrow, 0.08em);
+          text-transform: uppercase;
+          color: var(--pretui-band-ink-quiet, var(--muted-foreground));
+        }
+        .pretui-cta-headline {
+          margin: 0;
+          font-family: var(--font-serif);
+          font-size: var(--pretui-cta-headline-size, var(--text-heading, 19px));
+          font-weight: 400;
+          line-height: 1.18;
+          letter-spacing: var(--track-heading, -0.02em);
+          color: var(--pretui-band-ink, var(--foreground));
+          text-wrap: balance;
+        }
+        .pretui-cta-lead {
+          margin: 0;
+          font-size: var(--text-body, 15px);
+          line-height: 1.5;
+          color: var(--pretui-band-ink-quiet, var(--muted-foreground));
+        }
+        .pretui-cta-actions {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: var(--space-3, 8px);
+          margin-top: var(--space-1, 3px);
+        }
+
+        /* ── Axis 1: tone sets two custom properties. Nothing
+           else in this stylesheet knows a hue. ── */
+        .pretui-cta[data-tone='neutral'] {
+          --pretui-tone: var(--foreground);
+          --pretui-tone-on: var(--pretui-on-neutral, var(--background));
+        }
+        .pretui-cta[data-tone='primary'] {
+          --pretui-tone: var(--primary);
+          --pretui-tone-on: var(--primary-foreground);
+        }
+        .pretui-cta[data-tone='info'] {
+          --pretui-tone: var(--pretui-info, var(--boxel-blue));
+          --pretui-tone-on: var(--pretui-on-info, var(--background));
+        }
+        .pretui-cta[data-tone='success'] {
+          --pretui-tone: var(--success, var(--boxel-success));
+          --pretui-tone-on: var(--pretui-on-success, var(--background));
+        }
+        .pretui-cta[data-tone='warning'] {
+          --pretui-tone: var(--warning, var(--boxel-warning));
+          --pretui-tone-on: var(--pretui-on-warning, var(--background));
+        }
+        .pretui-cta[data-tone='danger'] {
+          --pretui-tone: var(--destructive);
+          --pretui-tone-on: var(--destructive-foreground);
+        }
+        .pretui-cta[data-tone='attention'] {
+          --pretui-tone: var(--pretui-attention, var(--boxel-fuschia));
+          --pretui-tone-on: var(--pretui-on-attention, var(--background));
+        }
+
+        /* ── Axis 2: the recipes. Written once, reading the two
+           properties above — Law 2 generalised. `--pretui-band-ink` and
+           `--pretui-band-ink-quiet` are what the type reads, so the eyebrow
+           and lead follow the recipe without a second set of rules. ── */
+        .pretui-cta[data-appearance='accent'] {
+          background: var(--pretui-tone);
+          --pretui-band-ink: var(--pretui-tone-on);
+          --pretui-band-ink-quiet: color-mix(
+            in oklch,
+            var(--pretui-tone-on) 72%,
+            var(--pretui-tone)
+          );
+          box-shadow: 0 0 0 1px
+              color-mix(in oklch, var(--pretui-tone) 70%, var(--border)),
+            var(--pretui-edge-highlight, inset 0 1px 0 rgb(255 255 255 / 0.14));
+        }
+        .pretui-cta[data-appearance='filled'] {
+          background: color-mix(in oklch, var(--pretui-tone) 15%, var(--card));
+          --pretui-band-ink: color-mix(
+            in oklch,
+            var(--pretui-tone) 60%,
+            var(--foreground)
+          );
+          --pretui-band-ink-quiet: color-mix(
+            in oklch,
+            var(--pretui-tone) 30%,
+            var(--muted-foreground)
+          );
+        }
+        .pretui-cta[data-appearance='outlined'] {
+          background: var(--card);
+          --pretui-band-ink: color-mix(
+            in oklch,
+            var(--pretui-tone) 55%,
+            var(--foreground)
+          );
+          --pretui-band-ink-quiet: var(--muted-foreground);
+          box-shadow: 0 0 0 1px
+            color-mix(in oklch, var(--pretui-tone) 45%, var(--border));
+        }
+        .pretui-cta[data-appearance='filled-outlined'] {
+          background: color-mix(in oklch, var(--pretui-tone) 12%, var(--card));
+          --pretui-band-ink: color-mix(
+            in oklch,
+            var(--pretui-tone) 60%,
+            var(--foreground)
+          );
+          --pretui-band-ink-quiet: color-mix(
+            in oklch,
+            var(--pretui-tone) 30%,
+            var(--muted-foreground)
+          );
+          box-shadow: 0 0 0 1px
+            color-mix(in oklch, var(--pretui-tone) 40%, var(--border));
+        }
+        .pretui-cta[data-appearance='plain'] {
+          background: transparent;
+          --pretui-band-ink: var(--foreground);
+          --pretui-band-ink-quiet: var(--muted-foreground);
+        }
+
+        @container (max-width: 34rem) {
+          .pretui-cta {
+            padding: var(
+              --pretui-cta-pad-narrow,
+              var(--space-6, 19px) var(--space-4, 11px)
+            );
+          }
+          .pretui-cta-actions {
+            width: 100%;
+          }
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-realms/pretui/components/cta-band.md

@@ -0,0 +1,50 @@
+## What it is
+
+The closing call-to-action band: an eyebrow, a headline, a lead and the controls that end a page.
+
+## The contract
+
+```
+@eyebrow?  — small line above the headline
+@headline (required) — names the band
+@lead?     — one paragraph under the headline
+@tone?     — semantic hue. Default 'primary'
+@appearance? — visual weight. Default 'accent'
+@align?    — 'center' (default) for a closing band, 'start' when it sits inside
+             a column of left-aligned prose
+@headingLevel? — heading level in the host page
+
+<:default> — the call-to-action controls
+```
+
+**`@headline` is required because it names the band**, and a call to action with no statement is a row of buttons.
+
+**`@align` has two right answers for two placements.** Centred is correct for a full-width closing band; start-aligned is correct when the band sits in a column of prose, where centring would break the reading column.
+
+**`@headingLevel` exists because a block does not know its page** — the same rule **StepsWithMedia** and **HeroSplit** follow.
+
+**The actions are a block**, not data. This is the one place in the marketing set where the caller genuinely needs arbitrary controls.
+
+## Prior art
+
+The closing CTA section on every marketing page.
+
+Where Pretui is better: the heading level as an argument, and tone and appearance resolving through the kit's recipe system so the band matches the theme rather than being a hand-picked color block.
+
+Where it is thinner: no background media, no split arrangement, and no dismissal — this is a section, not a banner.
+
+## Accessibility
+
+- **The headline is a real heading at `@headingLevel`**, so the band participates in the document outline.
+- **`@eyebrow` is context, not a heading**, and does not compete in the outline.
+- **The band's tone is a token pair**, so the ink on it comes from the same recipe — which is what stops a strongly-colored CTA from failing contrast when a theme changes its primary.
+- **`@align='center'` centres the text**, which is harder to read at length — keep the lead short, and use `start` inside prose.
+- **The actions are whatever the caller puts there**, and their names are the caller's responsibility.
+
+## Theming
+
+`@tone` and `@appearance` resolve through the kit's shared recipe system; alignment and heading level are structural.
+
+Because the band is a recipe rather than a color, a theme that expresses `accent` through a border rather than a fill gets a bordered CTA automatically — which is the behavior a hardcoded background would prevent.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.