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

package/bundled-realms/pretui/components/calendar.usage.gts

@@ -0,0 +1,161 @@
+// Pretui — Calendar usage page.
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { Calendar } from './calendar';
+import { FreestyleUsage } from './freestyle-usage';
+import { Token } from './token';
+
+const CAL_MODE_OPTIONS = ['single', 'range'];
+
+// ── Calendar — THE Pretui date surface: the one month-grid implementation
+//    both DatePicker and DateRangePicker open in their popovers, exported so
+//    cards can also mount it inline. Knob set is native (fresh build). ─────
+class CalendarUsage extends GlimmerComponent {
+  @tracked mode = 'single';
+  @tracked value = '2026-08-12';
+  @tracked start: string | null = '2026-08-03';
+  @tracked end: string | null = '2026-08-14';
+  @tracked months = 1;
+  @tracked minDate = '';
+  @tracked maxDate = '';
+  @tracked disabled = false;
+  setMode = (v: string) => (this.mode = v);
+  setMonths = (v: number) => (this.months = v);
+  setMinDate = (v: string) => (this.minDate = v);
+  setMaxDate = (v: string) => (this.maxDate = v);
+  toggleDisabled = (v: boolean) => (this.disabled = v);
+  onValue = (iso: string) => (this.value = iso);
+  onRange = (r: { start: string | null; end: string | null }) => {
+    this.start = r.start;
+    this.end = r.end;
+  };
+  get modeVal() {
+    return this.mode as 'single' | 'range';
+  }
+  get isRange() {
+    return this.mode === 'range';
+  }
+  get rangeObj() {
+    return { start: this.start, end: this.end };
+  }
+  get selectionString() {
+    return this.isRange
+      ? `${this.start ?? '—'} → ${this.end ?? '—'}`
+      : this.value;
+  }
+  get minDateVal() {
+    return this.minDate || undefined;
+  }
+  get maxDateVal() {
+    return this.maxDate || undefined;
+  }
+  get usage() {
+    return this.isRange
+      ? `<Calendar @mode='range' @range={{this.range}} @months={{2}} @onRangeChange={{this.onRange}} />`
+      : `<Calendar @value='${this.value}' @onValueChange={{this.onValue}} />`;
+  }
+  <template>
+    <FreestyleUsage
+      @name='Calendar'
+      @description='The one Pretui month-grid calendar — the shared date surface DatePicker and DateRangePicker open in their popovers, exported for inline use. Pure date math over ISO yyyy-mm-dd strings; arrow keys rove the day buttons. @mode="single" selects one day; @mode="range" selects start then end (swapped if reversed) and paints the prospective span from hover or keyboard focus. @months lays panels side by side; a narrow container collapses them to the first month. Day state reflects as data-selected / data-range-start / data-range-end / data-in-range / data-today.'
+      @source={{this.usage}}
+    >
+      <:example>
+        <div class='cal-col'>
+          <Token @value={{this.selectionString}} />
+          {{#if this.isRange}}
+            <Calendar
+              @mode='range'
+              @range={{this.rangeObj}}
+              @months={{this.months}}
+              @minDate={{this.minDateVal}}
+              @maxDate={{this.maxDateVal}}
+              @disabled={{this.disabled}}
+              @onRangeChange={{this.onRange}}
+            />
+          {{else}}
+            <Calendar
+              @value={{this.value}}
+              @months={{this.months}}
+              @minDate={{this.minDateVal}}
+              @maxDate={{this.maxDateVal}}
+              @disabled={{this.disabled}}
+              @onValueChange={{this.onValue}}
+            />
+          {{/if}}
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='mode'
+          @description="Selection semantics: 'single' (one ISO day via @value/@onValueChange) or 'range' (start/end via @range/@onRangeChange)."
+          @options={{CAL_MODE_OPTIONS}}
+          @defaultValue='single'
+          @value={{this.mode}}
+          @onInput={{this.setMode}}
+        />
+        <Args.String
+          @name='value'
+          @description='Single mode: selected day as ISO yyyy-mm-dd (controlled — wins over internal state; seed @defaultValue for uncontrolled use).'
+          @value={{this.value}}
+          @hideControls={{true}}
+        />
+        <Args.Object
+          @name='range'
+          @description='Range mode: the selected span as ISO strings ({ start, end }; end is null between the first and second click). Controlled — seed @defaultRange for uncontrolled use.'
+          @value={{this.rangeObj}}
+        />
+        <Args.Number
+          @name='months'
+          @description='Month panels laid side by side (default 1). Under a narrow container the calendar collapses to the first panel; side-by-side panels hide their outside days.'
+          @defaultValue={{1}}
+          @value={{this.months}}
+          @onInput={{this.setMonths}}
+        />
+        <Args.String
+          @name='minDate'
+          @description='Earliest selectable day (ISO yyyy-mm-dd); earlier days render disabled and keyboard roving stops there.'
+          @value={{this.minDate}}
+          @onInput={{this.setMinDate}}
+        />
+        <Args.String
+          @name='maxDate'
+          @description='Latest selectable day (ISO yyyy-mm-dd); later days render disabled.'
+          @value={{this.maxDate}}
+          @onInput={{this.setMaxDate}}
+        />
+        <Args.Bool
+          @name='disabled'
+          @description='Disables every day button (the grid stays visible).'
+          @defaultValue={{false}}
+          @value={{this.disabled}}
+          @onInput={{this.toggleDisabled}}
+        />
+        <Args.Action
+          @name='onValueChange'
+          @description='Single mode: called with the ISO yyyy-mm-dd string when a day is picked.'
+        />
+        <Args.Action
+          @name='onRangeChange'
+          @description='Range mode: called on both clicks with { start, end } ISO strings — end is null after the first click, set (and ordered) after the second.'
+        />
+      </:api>
+    </FreestyleUsage>
+    <style scoped>
+      .cal-col {
+        /* items stretch (no justify-items: start): the Calendar root is an
+           inline-size container and takes its width from this column */
+        display: grid;
+        gap: var(--space-3, 8px);
+        width: 100%;
+      }
+      .cal-col > :deep(.pretui-token) {
+        justify-self: start;
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_CALENDAR: Record<string, unknown> = {
+  Calendar: CalendarUsage,
+};

package/bundled-realms/pretui/components/callout.gts

@@ -0,0 +1,2 @@
+// Pretui — Callout: The Tremor / Web Awesome name for Alert.
+export { Alert as Callout } from './alert';

package/bundled-realms/pretui/components/callout.md

@@ -0,0 +1,40 @@
+## What it is
+
+**Callout** is **Alert** under the name Tremor and Web Awesome (`wa-callout`) use. The export is the same class. Import it when a port already says Callout; the **Alert** writeup carries the depth, and the page-level outcome scene is **Result**, the transient one **Toast**.
+
+## The contract
+
+```
+@tone?      — info · success · warning · danger, plus the React spellings
+              (destructive / error → danger, positive → success, notice → warning)
+@title?
+@variant?   — shadcn's one-enum spelling: default | destructive
+@toneLabel? — the hidden tone word a screen reader hears first
+              (default Info / Success / Warning / Error)
+<:default>  — the message, as prose
+<:action>   — an optional control beside it
+```
+
+Identical to Alert. Tones outside the four fall back to `info` rather than emitting a dead `data-tone`.
+
+## Prior art
+
+**Tremor `Callout`** takes `color` from its full palette and an `icon` prop; **Web Awesome `wa-callout`** has `variant` (brand / neutral / success / warning / danger), `appearance` (accent / filled / outlined / plain) and `size`, with an icon slot. Alert has four tones, one appearance, and an icon fixed per tone — no icon slot and no size. What Alert does that neither does: the `alert` / `status` politeness split by tone, so an info banner never interrupts. shadcn's `Alert` hardcodes `role="alert"` on every tone; Alert does not.
+
+## Accessibility
+
+Governing pattern: APG **Alert**. `role="alert"` for `danger`, `role="status"` otherwise, both with implicit `aria-atomic`. The tone glyph is `aria-hidden`, and since the role only singles out `danger`, a visually hidden tone word is read in its place, so a warning is announced as "Warning: Credit is running low". `@toneLabel` replaces the word. The live region mounts together with its content, so a banner that appears complete is announced less reliably than one written into an existing region — render it from first paint and toggle the content when the announcement matters. No dismiss control, so nothing to make keyboard-reachable.
+
+## Theming
+
+`--info`, `--success`, `--warning`, `--destructive` (the four tone hues); `--foreground` (text); `--info-foreground`, `--success-foreground`, `--warning-foreground`, `--destructive-foreground` (the icon's ink on its disc); `--card` (the mix base), `--border` (mixed into the hairline), and the `--boxel-sp-*`, `--boxel-border-radius` and `--boxel-font-size-xs` tokens for geometry and type. The 20% tint strength is the component's own `--pretui-alert-mix`. In dark mode, a theme must define the four hues at a luminance that survives a 20% mix against a dark `--card`.
+
+## React ecosystem
+
+| Tremor / Web Awesome / shadcn | Pretui Callout          |
+| ----------------------------- | ----------------------- |
+| `color` / `variant` / `tone`  | `@tone`                 |
+| `title`                       | `@title`                |
+| children                      | `<:default>`            |
+| `icon` / icon slot            | fixed per tone; no slot |
+| `appearance` / `size`         | not supported           |

package/bundled-realms/pretui/components/callout.usage.gts

@@ -0,0 +1,48 @@
+// Pretui — Callout usage page.
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { FreestyleUsage } from './freestyle-usage';
+import { Button } from './button';
+import { Callout } from './callout';
+
+const CalloutUsage: TemplateOnlyComponent = <template>
+  <FreestyleUsage
+    @name='Callout'
+    @description='Alert under the Tremor and Web Awesome name: an inline, tone-mapped banner with a title, prose and an optional action. Import it when a port already says Callout; the component and its writeup are Alert.'
+    @source="<Callout @tone='warning' @title='Credit is running low'>…</Callout>"
+  >
+    <:example>
+      <div class='callout-col'>
+        <Callout @tone='warning' @title='Credit is running low'>
+          <:default>Upgrade the plan or buy additional credit before the next
+            run.</:default>
+          <:action>
+            <Button @tone='neutral' @appearance='outlined' @size='xs'>
+              Upgrade
+            </Button>
+          </:action>
+        </Callout>
+        <Callout @tone='success'>
+          <:default>Lot 4417 published. It is visible to the desk now.</:default>
+        </Callout>
+      </div>
+    </:example>
+    <:api as |Args|>
+      <Args.String @name='tone' @defaultValue='info' @description='info · success · warning · danger, plus the React spellings (destructive, error, positive, notice).' />
+      <Args.String @name='title' @description='Bold headline above the prose.' />
+      <Args.String @name='variant' @description="shadcn's one-enum spelling: default | destructive." />
+      <Args.Yield @name='default' @description='The message, as prose.' />
+      <Args.Yield @name='action' @description='An optional control beside the message.' />
+    </:api>
+  </FreestyleUsage>
+  <style scoped>
+    .callout-col {
+      width: min(100%, 420px);
+      display: grid;
+      gap: var(--space-3, 8px);
+    }
+  </style>
+</template>;
+
+export const DEMOS_CALLOUT: Record<string, unknown> = {
+  Callout: CalloutUsage,
+};