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

package/bundled-realms/pretui/components/model-viewer.md

@@ -0,0 +1,57 @@
+## What it is
+
+A 3D model — `.glb` or `.gltf` — with orbit controls, an environment, and AR where the device offers it. It is the only component in the kit that loads a rendering engine.
+
+It is not routed by **MediaViewer** unless a host opts in: `installModelAdapter()` registers it, deliberately as a function call rather than a module side effect, because importing a component must not silently change how every other viewer in the process behaves and this one costs 292 KB gzipped.
+
+## The contract
+
+```
+@src (required)  — URL of a .glb or .gltf; passed through untouched
+@alt (required)  — description of the model
+@poster?         — image shown before the model is asked for, and the reserved space while it loads
+@iosSrc?         — iOS Quick Look source, for AR on Safari
+@ar?             — offer the AR button where the device supports it. Default false
+@height?         — stage height in px. Default 320
+@ratio?          — stage aspect ratio, e.g. '4 / 3'; beats @height when both are given
+@step?           — degrees moved by one arrow press. Default 15
+@orbit?          — start facing this way
+@onLoad?         — fires when the model finishes loading
+@onOrbit?        — fires on every camera change from our controls
+```
+
+**The model is not loaded until it is asked for.** The component starts in a poster phase and stays there; loading a 3D scene because a component happened to scroll into view is the spatial version of autoplay. The poster doubles as the reserved space, so the stage never flashes an empty canvas.
+
+**`@alt` is required rather than optional**, which is unusual in this kit and correct here: it is the only thing a screen reader can be told about a 3D object.
+
+**`@ratio` beats `@height`** when both are given, because a ratio survives a responsive width and a fixed height does not.
+
+**The phase is public** — poster, loading, ready, error — so a host can reflect it.
+
+**Failure is a state with a message and a link, not a grey box.** A model that will not load is the normal case offline, behind auth, or on a machine with no WebGL, so the error names itself and the file is still offered as a link.
+
+## Prior art
+
+Built on **`@google/model-viewer`** (Apache-2.0), chosen over React Three Fiber, which cannot run in this environment at all.
+
+Where Pretui is better, and this is the substantial part: **the orbit camera is keyboard-complete, and that is the kit's work rather than the upstream's.** model-viewer's own keyboard support is arrow keys on a focused element with no announced position whatsoever — you can turn the model and never be told that you did, or which way it now faces. Here the stage is a `role='slider'` over the camera's **azimuth**, which is the axis a person actually thinks in, with a full key contract over it. The deferred load and the honest failure state are the other two additions.
+
+Where it is thinner: one model at a time, no scene composition, no annotations or hotspots (model-viewer supports them; this does not expose them), no material or variant switching, and no lighting control beyond the environment it ships with. Elevation and zoom are reachable by keyboard but are not themselves announced as separate sliders — the single slider covers azimuth, and the other two axes ride in its value text.
+
+## Accessibility
+
+- **The stage is a `role='slider'` over the azimuth**, with `aria-valuemin='-180'`, `aria-valuemax='180'`, a live `aria-valuenow`, and `aria-label` taken from `@alt`.
+- **`aria-valuetext` is written in human terms** — "turned 45° right, 20° above, 105% zoom" — rather than emitting a quaternion or a raw degree count. That one string is what makes the control usable without sight, and it carries all three axes even though only one of them is the slider's own value.
+- **The key contract is complete**: ←/→ turn by `@step`, Shift for a coarse step, PageUp/PageDown turn 90°, Home faces front, End faces back, ↑/↓ change elevation, `+`/`−` zoom.
+- **The slider is `aria-disabled` until the model is revealed**, so a reader is not offered a camera for a scene that has not been asked for yet.
+- **The slider's children are presentational** — the overlay is deliberately empty, because `role='slider'` takes presentational children and anything inside it would be hidden from assistive technology anyway.
+- **The failure state is text and a real link**, so an unloadable model is still reachable and still named.
+- **`@alt` being required is the accessibility contract**, and it is enforced by the type rather than by a runtime warning.
+
+## Theming
+
+`--pretui-model-h` (the stage height, from `@height`), `--pretui-model-ratio` (the stage ratio, from `@ratio`), `--pretui-primary-ink` (the AR and link affordances), `--pretui-destructive-ink` (the error state), `--pretui-shadow-hairline`, `--pretui-z-raised` (the overlay's layer).
+
+The environment and lighting come from the engine rather than from tokens, which is the one place in the kit where the theme does not reach: a model lit by the theme would need a lighting model the component does not own. Everything around the stage — the poster, the error state, the AR button — is themed normally, so the frame follows the theme even though the scene inside it does not.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.

package/bundled-realms/pretui/components/model-viewer.usage.gts

@@ -0,0 +1,123 @@
+// Pretui — ModelViewer usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { ModelViewer } from './model-viewer';
+import type { OrbitState } from './model-viewer';
+import { platePoster } from '../media-examples';
+import { Token } from './token';
+
+// ── ModelViewer ──────────────────────────────────────────────────────────
+const SAMPLE_MODEL_SRC =
+  'https://modelviewer.dev/shared-assets/models/Astronaut.glb';
+
+const SAMPLE_MODEL_POSTER = platePoster('Astronaut', '1 / 1');
+
+class ModelViewerUsage extends Component {
+  src = SAMPLE_MODEL_SRC;
+  poster = SAMPLE_MODEL_POSTER;
+
+  @tracked height = 320;
+  @tracked step = 15;
+  @tracked ar = false;
+  @tracked camera = '—';
+
+  setHeight = (v: number | null) => (this.height = v ?? 320);
+  setStep = (v: number | null) => (this.step = v ?? 15);
+  setAr = (v: boolean) => (this.ar = v);
+  noteOrbit = (orbit: OrbitState) =>
+    (this.camera = `${Math.round(orbit.azimuth)}° / ${Math.round(orbit.elevation)}° / ${Math.round(orbit.zoom * 100)}%`);
+
+  get usage(): string {
+    return [
+      '<ModelViewer',
+      '  @src={{this.src}}',
+      "  @alt='Astronaut — glTF sample'",
+      '  @poster={{this.poster}}',
+      '  @onOrbit={{this.noteOrbit}}',
+      '/>',
+    ].join('\n');
+  }
+
+  <template>
+    <FreestyleUsage
+      @name='ModelViewer'
+      @description="<model-viewer> 4.3.1+12 (Apache-2.0, vendored at ./model-viewer — read its NOTICE, not only its README: Apache-2.0 wants a statement of changes and that bundle is a modified distribution). NOTE: this is the one page in the media territory that needs the network — there is no way to synthesise a GLB, so it points at Google's own sample model, and offline it lands on its error channel, which is worth seeing. Nothing loads until you press Load 3D model: a model is megabytes and a render loop, and starting both because a component scrolled into view is the spatial version of autoplay. Once it is up, focus the stage and turn it with the keyboard — ← → orbit, Shift for a coarse step, PageUp/PageDown by a quarter turn, ↑ ↓ elevation, + and − zoom, Home to face front, End to face back — and the announced value is 'turned 45° right, 20° above, 105% zoom' rather than a quaternion."
+      @source={{this.usage}}
+    >
+      <:example>
+        <ModelViewer
+          @src={{this.src}}
+          @alt='Astronaut — the glTF sample model'
+          @poster={{this.poster}}
+          @height={{this.height}}
+          @step={{this.step}}
+          @ar={{this.ar}}
+          @onOrbit={{this.noteOrbit}}
+        />
+        <p class='dm-readout'>
+          <span class='dm-readoutLabel'>@onOrbit</span>
+          <Token @value={{this.camera}} />
+        </p>
+      </:example>
+
+      <:api as |Args|>
+        <Args.String
+          @name='src'
+          @value={{this.src}}
+          @description='URL of a .glb or .gltf. NETWORKED on this page — the only fixture in the media territory that is.'
+          @hideControls={{true}}
+        />
+        <Args.String
+          @name='alt'
+          @value='Astronaut — the glTF sample model'
+          @description='Description of the model. This is the only thing a screen reader can ever be told about a 3D object, so it carries more weight than alt text on a picture.'
+          @hideControls={{true}}
+        />
+        <Args.String
+          @name='poster'
+          @value={{this.poster}}
+          @description='Shown before the model is asked for, and the reserved space while it loads. A generated SVG here, so the resting state works offline even though the model does not.'
+          @hideControls={{true}}
+        />
+        <Args.Number
+          @name='height'
+          @value={{this.height}}
+          @min={{160}}
+          @max={{560}}
+          @defaultValue={{320}}
+          @description='Height of the stage in px. @ratio beats it when both are given.'
+          @onInput={{this.setHeight}}
+        />
+        <Args.Number
+          @name='step'
+          @value={{this.step}}
+          @min={{5}}
+          @max={{45}}
+          @defaultValue={{15}}
+          @description='Degrees moved by one arrow press. Shift is three times this.'
+          @onInput={{this.setStep}}
+        />
+        <Args.Bool
+          @name='ar'
+          @value={{this.ar}}
+          @defaultValue={{false}}
+          @description='Offer the AR button where the device supports it. Bound as true|undefined, never false — a dynamic attribute goes through the PROPERTY, and `ar={{false}}` would set a falsy property and quietly do nothing.'
+          @onInput={{this.setAr}}
+        />
+        <Args.Action
+          @name='onOrbit'
+          @description='({azimuth, elevation, zoom}) on every camera change from these controls.'
+        />
+        <Args.Action
+          @name='onLoad'
+          @description='() when the model has finished loading.'
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}
+
+export const DEMOS_MODEL_VIEWER: Record<string, unknown> = {
+  ModelViewer: ModelViewerUsage,
+};

package/bundled-realms/pretui/components/money-input.gts

@@ -0,0 +1,66 @@
+// Pretui — MoneyInput: an AmountInput with a currency chooser.
+import Component from '@glimmer/component';
+import { AmountInput } from './amount-input';
+import type { AmountInputSignature } from './amount-input';
+import { CURRENCIES } from '../internal/money';
+import type { AmountUnit } from '../internal/money';
+
+export interface MoneyInputSignature {
+  Args: Omit<AmountInputSignature['Args'], 'units' | 'unit' | 'defaultUnit'> & {
+    /** ISO 4217 code, controlled */
+    currency?: string;
+    /** uncontrolled seed; `USD` when the list is the default one */
+    defaultCurrency?: string;
+    /** the offered codes. Defaults to `CURRENCIES`; pass a shorter list when a
+     * product only trades in three. */
+    currencies?: AmountUnit[];
+  };
+  Element: HTMLDivElement;
+}
+
+/**
+ * `AmountInput` curried for money — the wrap-and-curry idiom, not a fork.
+ *
+ * Everything currency-specific already lives in the general control (fraction
+ * digits from the code, symbol placed by the locale, the spelled-out
+ * readout); this supplies the list and renames `unit` to `currency` so the
+ * caller's vocabulary matches their data.
+ */
+export class MoneyInput extends Component<MoneyInputSignature> {
+  get currencies(): AmountUnit[] {
+    return this.args.currencies ?? CURRENCIES;
+  }
+
+  get defaultCurrency(): string | undefined {
+    return this.args.defaultCurrency ?? this.currencies[0]?.value;
+  }
+
+  <template>
+    <AmountInput
+      @value={{@value}}
+      @defaultValue={{@defaultValue}}
+      @unit={{@currency}}
+      @defaultUnit={{this.defaultCurrency}}
+      @units={{this.currencies}}
+      @locale={{@locale}}
+      @precision={{@precision}}
+      @min={{@min}}
+      @max={{@max}}
+      @step={{@step}}
+      @disabled={{@disabled}}
+      @invalid={{@invalid}}
+      @required={{@required}}
+      @controlId={{@controlId}}
+      @label={{@label}}
+      @hint={{@hint}}
+      @unitLabel={{if @unitLabel @unitLabel 'Currency'}}
+      @affix={{@affix}}
+      @unitControl={{@unitControl}}
+      @quiet={{@quiet}}
+      @onChange={{@onChange}}
+      @onUnitChange={{@onUnitChange}}
+      data-test-pretui-money
+      ...attributes
+    />
+  </template>
+}

package/bundled-realms/pretui/components/money-input.md

@@ -0,0 +1,43 @@
+## What it is
+
+A currency amount placed on the locale's own side: `$1,200.00` or `1.200,00 €`, decided by `Intl.formatToParts` rather than by a hardcoded assumption about where symbols go.
+
+It is **AmountInput** with the units fixed to currencies, and the three unit args replaced by currency ones.
+
+## The contract
+
+```
+every AmountInput arg except units, unit and defaultUnit
+@currency?        — ISO 4217 code, controlled
+@defaultCurrency? — uncontrolled seed; USD when the list is the default one
+@currencies?      — the offered codes; defaults to the full CURRENCIES list
+```
+
+**The three unit args are omitted rather than ignored**, so passing one is a compile error rather than a silent no-op.
+
+**Symbol placement comes from the locale, not from the currency.** The same currency sits before the number in one locale and after it in another, and `formatToParts` is the only honest way to know which — a lookup table of "symbol goes left" is wrong for half the world.
+
+**`@currencies` is worth narrowing.** A product that trades in three currencies should pass three; the default is the full list, which is a long select.
+
+**Everything else is AmountInput's**: commit-time clamping, `undefined` rather than 0 for an empty box, the ghost hint that is not a placeholder, and the spelled-out confirmation row.
+
+## Prior art
+
+The kit's own `fields-configuration` amount-with-currency field.
+
+Where Pretui is better: locale-driven placement. Most currency inputs hardcode the symbol to the left because the developer's locale puts it there, which is a defect that only surfaces after launch in another market.
+
+Where it is thinner: no exchange rates or conversion, no minor-unit entry mode (cents-only typing, which some finance UIs want), and no per-currency min/max. Precision comes from the currency's own definition, so a currency with unusual minor units is at the mercy of `Intl`'s data.
+
+## Accessibility
+
+- **Everything AmountInput does**, since this is that component with a narrower unit list.
+- **The confirmation row matters more here than anywhere else in the kit.** Currency separators invert between locales — `1.200,00` and `1,200.00` are the same number written two ways — and a reader needs to see which one was understood.
+- **The currency picker is separately named**, so it is never an unlabelled select beside a number.
+- **The symbol is presentation.** The value a caller receives is a number and a code, not a formatted string, so nothing downstream has to parse a symbol back off.
+
+## Theming
+
+Inherited entirely from **AmountInput** — `--pretui-amount-align`, `--pretui-amount-mark-width`, `--pretui-amount-select-width`, `--pretui-destructive-ink`, `--pretui-shadow-control`.
+
+There are deliberately no money-specific tokens. A currency field and a weight field on the same form should be the same control wearing a different unit, and giving money its own surface would break that.

package/bundled-realms/pretui/components/money-input.usage.gts

@@ -0,0 +1,293 @@
+// Pretui — MoneyInput usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { amountAffixes, currencyUnit, describeAmount } from '../internal/money';
+import { FreestyleUsage } from './freestyle-usage';
+import { MoneyInput } from './money-input';
+import { LOCALES, UNIT_MODES } from '../internal/money-fixtures';
+
+const CODES = ['USD', 'EUR', 'GBP', 'JPY', 'BHD', 'INR', 'KRW'];
+const AFFIX_MODES = ['auto', 'always', 'never'];
+
+/** One row of the ladder — a currency, its symbol, where the symbol goes, and
+ * how the same amount reads. */
+interface LadderRow {
+  code: string;
+  mark: string;
+  side: string;
+  written: string;
+}
+
+function ladderFor(locale: string, amount: number): LadderRow[] {
+  return CODES.map((code) => {
+    let money = currencyUnit(code);
+    let affix = amountAffixes(money, locale);
+    return {
+      code,
+      mark: affix.prefix.length > 0 ? affix.prefix : affix.suffix,
+      side: affix.prefix.length > 0 ? 'before' : 'after',
+      written: describeAmount(amount, money, locale),
+    };
+  });
+}
+
+class MoneyInputUsage extends Component {
+  @tracked locale = 'en-US';
+  @tracked currency = 'USD';
+  @tracked amount: number | undefined = 1234.5;
+  @tracked unitControl: 'auto' | 'select' | 'segmented' | 'static' = 'auto';
+  @tracked affix: 'auto' | 'always' | 'never' = 'auto';
+  @tracked hint = '0.00';
+  @tracked label = 'Price';
+  @tracked quiet = false;
+  @tracked disabled = false;
+  @tracked emitted = 'Nothing emitted yet.';
+
+  localeOptions = LOCALES;
+  unitModeOptions = UNIT_MODES;
+  affixOptions = AFFIX_MODES;
+  currencyOptions = CODES;
+
+  setLocale = (v: string) => (this.locale = v);
+  setCurrency = (v: string) => (this.currency = v);
+  setUnitControl = (v: string) =>
+    (this.unitControl = v as 'auto' | 'select' | 'segmented' | 'static');
+  setAffix = (v: string) => (this.affix = v as 'auto' | 'always' | 'never');
+  setHint = (v: string) => (this.hint = v);
+  setLabel = (v: string) => (this.label = v);
+  setQuiet = (v: boolean) => (this.quiet = v);
+  setDisabled = (v: boolean) => (this.disabled = v);
+
+  take = (value: number | undefined, unit: string | undefined) => {
+    this.amount = value;
+    this.emitted =
+      value === undefined
+        ? 'onChange with undefined — nothing typed, which is not zero.'
+        : 'onChange with ' + value + ' ' + (unit ?? '');
+  };
+
+  takeCurrency = (code: string) => (this.currency = code);
+
+  get ladder(): LadderRow[] {
+    return ladderFor(this.locale, this.amount ?? 1234.5);
+  }
+
+  get usage(): string {
+    return (
+      '<MoneyInput' +
+      " @locale='" +
+      this.locale +
+      "'" +
+      " @currency='" +
+      this.currency +
+      "'" +
+      ' @value={{this.amount}} @onChange={{this.take}} />'
+    );
+  }
+
+  <template>
+    <FreestyleUsage
+      @name='MoneyInput'
+      @description='An amount and the currency it is denominated in, as ONE control. The symbol is placed by the locale, not pinned to the left — en-US writes the dollar sign before the number and de-DE writes the euro sign after it, from the same data. Fraction digits come from the currency, so yen never grows a decimal point. Paste anything: a grouped amount, a foreign-formatted one, an accounting negative in brackets.'
+      @source={{this.usage}}
+    >
+      <:example>
+        <div class='pretui-money-demo'>
+          <MoneyInput
+            @value={{this.amount}}
+            @currency={{this.currency}}
+            @locale={{this.locale}}
+            @label={{this.label}}
+            @hint={{this.hint}}
+            @quiet={{this.quiet}}
+            @disabled={{this.disabled}}
+            @unitControl={{this.unitControl}}
+            @affix={{this.affix}}
+            @onChange={{this.take}}
+            @onUnitChange={{this.takeCurrency}}
+          />
+          <p class='pretui-money-demo-note'>{{this.emitted}}</p>
+
+          <p class='pretui-money-demo-cap'>The same amount, seven currencies,
+            one locale</p>
+          <ul class='pretui-money-ladder'>
+            {{#each this.ladder key='code' as |row|}}
+              <li class='pretui-money-ladder-row'>
+                <span class='pretui-money-ladder-code'>{{row.code}}</span>
+                <span class='pretui-money-ladder-mark'>{{row.mark}}</span>
+                <span class='pretui-money-ladder-side'>{{row.side}}</span>
+                <span class='pretui-money-ladder-written'>{{row.written}}</span>
+              </li>
+            {{/each}}
+          </ul>
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='locale'
+          @value={{this.locale}}
+          @options={{this.localeOptions}}
+          @defaultValue='en-US'
+          @description='BCP-47 tag deciding separators, symbol placement and the spelled-out readout. Move it and every row of the ladder below moves with it.'
+          @onInput={{this.setLocale}}
+        />
+        <Args.String
+          @name='currency'
+          @value={{this.currency}}
+          @options={{this.currencyOptions}}
+          @description='ISO 4217 code, controlled. JPY and KRW carry no minor unit and BHD carries three — switching between them re-rounds the amount rather than carrying a fraction the currency cannot write.'
+          @onInput={{this.setCurrency}}
+        />
+        <Args.String
+          @name='unitControl'
+          @value={{this.unitControl}}
+          @options={{this.unitModeOptions}}
+          @defaultValue='auto'
+          @description='auto segments three or fewer choices and drops to a searchable select above that. static renders the code as a mark with nothing to pick.'
+          @onInput={{this.setUnitControl}}
+        />
+        <Args.String
+          @name='affix'
+          @value={{this.affix}}
+          @options={{this.affixOptions}}
+          @defaultValue='auto'
+          @description='auto draws the symbol only for currencies, where the symbol and the code are different things. never suppresses it; always draws whatever mark the unit carries.'
+          @onInput={{this.setAffix}}
+        />
+        <Args.String
+          @name='label'
+          @value={{this.label}}
+          @defaultValue='Amount'
+          @description='The accessible name. Ignored when a Field wrapper supplied a controlId, because then a real label element already points at the box.'
+          @onInput={{this.setLabel}}
+        />
+        <Args.String
+          @name='hint'
+          @value={{this.hint}}
+          @description='Ghost text drawn behind an empty box. Deliberately not a placeholder attribute — a placeholder doubles as the accessible name, so a field named by its placeholder loses its name the moment you type.'
+          @onInput={{this.setHint}}
+        />
+        <Args.Bool
+          @name='quiet'
+          @value={{this.quiet}}
+          @defaultValue={{false}}
+          @description='Suppress the spelled-out confirmation row. The row is reserved space either way, so turning it off does not change the height.'
+          @onInput={{this.setQuiet}}
+        />
+        <Args.Bool
+          @name='disabled'
+          @value={{this.disabled}}
+          @defaultValue={{false}}
+          @description='Dimmed and inert.'
+          @onInput={{this.setDisabled}}
+        />
+        <Args.Base
+          @name='value / defaultValue'
+          @typeLabel='Number'
+          @description='The amount. Controlled through value, uncontrolled through defaultValue — the hybrid Select uses. An empty box reports undefined, never 0: nothing and zero are different facts.'
+          @hideControls={{true}}
+        />
+        <Args.Base
+          @name='min / max / step / precision'
+          @typeLabel='Number'
+          @description='Range and grain. The range is REPORTED while typing and CLAMPED only on commit, because a reader typing 120 into a box with a minimum of 10 passes through 1 on the way.'
+          @hideControls={{true}}
+        />
+        <Args.Base
+          @name='currencies'
+          @typeLabel='AmountUnit[]'
+          @description='The offered codes; defaults to the shipped working set. Pass a shorter list when a product only trades in three.'
+          @hideControls={{true}}
+        />
+        <Args.Action
+          @name='onChange'
+          @description='Fires on every keystroke with the parsed amount and the current currency, together — so a caller can never half-apply an edit.'
+        />
+        <Args.Action
+          @name='onUnitChange'
+          @description='Fires when the currency changes. The amount is re-reported through onChange in the same turn, rounded to the new minor unit.'
+        />
+      </:api>
+      <:cssVars as |Css|>
+        <Css.Basic
+          @name='pretui-amount-mark-width'
+          @type='length'
+          @defaultValue='1.25ch'
+          @description='Reserved width for the symbol, so swapping USD for EUR moves the glyph and nothing else.'
+        />
+        <Css.Basic
+          @name='pretui-amount-align'
+          @type='keyword'
+          @defaultValue='end'
+          @description='Text alignment inside the box. Amounts align right so a column of them lines up on the decimal.'
+        />
+        <Css.Basic
+          @name='pretui-amount-select-width'
+          @type='length'
+          @defaultValue='7.5rem'
+          @description='Minimum width of the searchable unit picker.'
+        />
+      </:cssVars>
+    </FreestyleUsage>
+    <style scoped>
+      .pretui-money-demo {
+        display: grid;
+        gap: var(--space-3, 8px);
+        max-width: 420px;
+      }
+      .pretui-money-demo-note {
+        margin: 0;
+        font-family: var(--font-mono);
+        font-size: var(--text-ui-sm, 11.5px);
+        color: var(--muted-foreground);
+        min-height: 1.4em;
+      }
+      .pretui-money-demo-cap {
+        margin: var(--space-3, 8px) 0 0;
+        font-size: var(--text-ui-xs, 10.5px);
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--muted-foreground);
+      }
+      .pretui-money-ladder {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: grid;
+        gap: 2px;
+      }
+      .pretui-money-ladder-row {
+        display: grid;
+        grid-template-columns: 3.2rem 1.6rem 3.4rem 1fr;
+        align-items: baseline;
+        gap: var(--space-2, 6px);
+        padding: 3px 0;
+        font-size: var(--text-ui-sm, 11.5px);
+        font-variant-numeric: tabular-nums;
+      }
+      .pretui-money-ladder-code {
+        font-family: var(--font-mono);
+        color: var(--muted-foreground);
+      }
+      .pretui-money-ladder-mark {
+        text-align: center;
+        color: var(--foreground);
+      }
+      .pretui-money-ladder-side {
+        font-size: var(--text-ui-xs, 10.5px);
+        color: var(--muted-foreground);
+      }
+      .pretui-money-ladder-written {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--foreground);
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_MONEY_INPUT: Record<string, unknown> = {
+  MoneyInput: MoneyInputUsage,
+};