@humanforest/nuxt-layer 0.1.0

package/packages/charts/src/useChartPalette.ts

@@ -0,0 +1,61 @@
+// Chart palette helpers for Unovis. Returns `categories` maps whose colours are
+// var(--dataviz-*) STRINGS, not hexes — CSS resolves them, so dark mode flips charts with zero JS
+// and the engine stays the only place values live. Engine hex imports are allowed in chart pages
+// ONLY for CVD-simulation demos (simulateCvd needs real hexes).
+import type { BulletLegendItemInterface } from '@unovis/ts';
+import { DATAVIZ, DATAVIZ_PAIRS, DATAVIZ_CATEGORICAL, DATAVIZ_SEQUENTIAL, DATAVIZ_DIVERGING } from './engine';
+
+type Categories = Record<string, BulletLegendItemInterface>;
+export interface SeriesDef { key: string; name: string }
+
+// Each accessor is named after the palette it returns, matching the tier names on the docs page.
+// There is deliberately NO generic `categorical()` — the generic name used to return the VIVID set,
+// which meant the one palette that is not colour-blind-safe owned the most authoritative-sounding name.
+const SAFE = Object.keys(DATAVIZ.light); // 1..6 — brand-led CVD-safe, consumed by index
+const VIVID = DATAVIZ_CATEGORICAL.names; // green, amber, red, … (first 6 = the curated 6)
+const PAIRS = Object.keys(DATAVIZ_PAIRS.light); // forest-deep, forest-soft, warm-deep, … (family-grouped)
+
+export const safeVar = (i: number) => `var(--dataviz-categorical-safe-${SAFE[i % SAFE.length]})`;
+export const vividVar = (i: number) => `var(--dataviz-categorical-vivid-${VIVID[i % VIVID.length]})`;
+export const pairsVar = (i: number) => `var(--dataviz-categorical-pairs-${PAIRS[i % PAIRS.length]})`;
+
+/** The three categorical sets, named. Only for callers that choose a set at runtime. */
+export type CategoricalPalette = 'cvdSafe' | 'vivid' | 'pairs';
+const CATEGORICAL_VARS: Record<CategoricalPalette, (i: number) => string> = {
+  cvdSafe: safeVar,
+  vivid: vividVar,
+  pairs: pairsVar,
+};
+export const categoricalVar = (p: CategoricalPalette, i: number) => CATEGORICAL_VARS[p](i);
+export const sequentialVar = (name: keyof typeof DATAVIZ_SEQUENTIAL, i: number) => `var(--dataviz-sequential-${name}-${i})`;
+const kebab = (s: string) => s.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+export const divergingVar = (name: keyof typeof DATAVIZ_DIVERGING, i: number) => `var(--dataviz-diverging-${kebab(name)}-${i})`;
+
+const build = (series: SeriesDef[], color: (i: number) => string): Categories =>
+  Object.fromEntries(series.map((s, i) => [s.key, { name: s.name, color: color(i) }]));
+
+export function useChartPalette() {
+  return {
+    /** The 6-colour brand-led CVD-safe set — what the Unovis adapter already ships on --vis-color0..5.
+     *  The default: colour alone separates the series, so it needs no second channel. */
+    cvdSafe: (series: SeriesDef[]) => build(series, safeVar),
+    /** Vivid categorical (palette order). ≤6 where you can; 7–12 are label-only.
+     *  NOT CVD-safe — the caller MUST add a second channel (legend, direct labels, dash or marker). */
+    vivid: (series: SeriesDef[]) => build(series, vividVar),
+    /** Brand pairs — 3 brand hues × deep/soft, family-grouped. Brand-forward work: decks, marketing.
+     *  NOT CVD-safe — the caller MUST add a second channel (legend, direct labels, dash or marker). */
+    pairs: (series: SeriesDef[]) => build(series, pairsVar),
+    /** One of the three sets, chosen at runtime. For the docs' palette picker — production code
+     *  should name the set it means, so the CVD contract above is visible at the call site. */
+    byName: (p: CategoricalPalette, series: SeriesDef[]) =>
+      build(series, (i) => categoricalVar(p, i)),
+    /** n evenly-spaced stops from a sequential ramp (low → high). */
+    sequential: (name: keyof typeof DATAVIZ_SEQUENTIAL, n: number) => {
+      const len = DATAVIZ_SEQUENTIAL[name].length;
+      return Array.from({ length: n }, (_, i) => sequentialVar(name, Math.round((i * (len - 1)) / Math.max(n - 1, 1))));
+    },
+    /** All 9 stops of a diverging ramp (low → centre → high). */
+    diverging: (name: keyof typeof DATAVIZ_DIVERGING) =>
+      DATAVIZ_DIVERGING[name].map((_, i) => divergingVar(name, i)),
+  };
+}

package/packages/charts/src/useChartRepaintKey.ts

@@ -0,0 +1,22 @@
+import { computed, toValue, type ComputedRef, type MaybeRefOrGetter } from 'vue';
+
+/**
+ * Remount key for Unovis charts whose series colours change identity at runtime.
+ *
+ * The bug it works around: Unovis caches series colours on mount — Bar, Donut and Bubble keep
+ * painting the colours they mounted with even after `categories` hands them new ones (Line
+ * re-reads and repaints without help, which is why the trap is easy to miss). Bind the returned
+ * key as `:key` on the chart component so a flip of any signal remounts it:
+ *
+ * ```ts
+ * const chartKey = useChartRepaintKey(mode, vision, chartSet);
+ * // <VisSingleContainer :key="chartKey" …>
+ * ```
+ *
+ * Signals are passed in as refs or getters — colour mode, CVD simulation, palette choice —
+ * rather than read from an app composable, so the package carries no app internals; the docs
+ * app passes its own colour-mode ref.
+ */
+export function useChartRepaintKey(...signals: MaybeRefOrGetter<unknown>[]): ComputedRef<string> {
+  return computed(() => signals.map((s) => String(toValue(s))).join('-'));
+}

package/packages/charts/src/useThemeVersion.ts

@@ -0,0 +1,17 @@
+// Frame-owned repaint signal: bumps when the documentElement's class or data-theme attribute
+// changes (i.e. on a colour-mode flip). Unovis Bar/Donut/Bubble cache resolved colours on mount,
+// so a var(--dataviz-*) colour does NOT repaint them when dark mode lands — remounting on this
+// signal is the workaround, owned by the frame instead of every call site.
+import { onScopeDispose, ref, type Ref } from 'vue';
+
+export function useThemeVersion(): Ref<number> {
+  const version = ref(0);
+  if (typeof window === 'undefined' || typeof MutationObserver === 'undefined') return version;
+  const observer = new MutationObserver(() => { version.value++; });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class', 'data-theme'],
+  });
+  onScopeDispose(() => observer.disconnect());
+  return version;
+}

package/packages/frames/src/FBrowserFrame.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+// Desktop browser chrome — the web counterpart to DeviceFrame. A neutral macOS-style window
+// (traffic lights + address pill) wrapping a live app screen rendered at the chosen logical width.
+// The screen is a `@container`, so the slotted shell reflows against the frame width (not the
+// viewport) — switching the Viewport control genuinely resizes the layout. Flip `dark` to theme the
+// screen subtree (adds `.dark` over `bg-default text-default`, exactly like DeviceFrame's screen).
+// ★ The SCREEN carries a real display aspect — 16:10 or 16:9, the two shapes a desktop actually comes in
+// — and the height is derived from it rather than typed in. A hand-picked height drifts into ratios no
+// monitor has, which makes a specimen's reflow decisions untestable against anything real.
+const props = withDefaults(
+  defineProps<{
+    width: number;
+    aspect?: '16/10' | '16/9';
+    /** Overrides the aspect. Only for a screen that is deliberately not a whole display. */
+    height?: number;
+    dark?: boolean;
+    url?: string;
+  }>(),
+  { aspect: '16/10', dark: false, url: 'console.forest.bike/fleet' },
+);
+
+const screenH = computed(() => props.height ?? Math.round(props.width * (props.aspect === '16/9' ? 9 / 16 : 10 / 16)));
+</script>
+
+<template>
+  <div
+    class="shrink-0 overflow-hidden rounded-xl border border-default bg-default"
+    :style="{ width: width + 'px', filter: 'drop-shadow(0 25px 45px rgba(0,0,0,.28))' }"
+  >
+    <!-- title bar -->
+    <div class="flex items-center gap-3 border-b border-default bg-elevated/60 px-4 py-2.5">
+      <div class="flex items-center gap-1.5">
+        <span class="size-3 rounded-full bg-[#ff5f57]"></span>
+        <span class="size-3 rounded-full bg-[#febc2e]"></span>
+        <span class="size-3 rounded-full bg-[#28c840]"></span>
+      </div>
+      <div class="mx-auto flex w-full max-w-xs items-center justify-center gap-1.5 rounded-md border border-default bg-default px-3 py-1 text-xs text-muted">
+        <UIcon name="i-lucide-lock" class="size-3 text-dimmed" />
+        {{ url }}
+      </div>
+      <UIcon name="i-lucide-plus" class="size-4 shrink-0 text-dimmed" />
+    </div>
+
+    <!-- live screen — its own theming context + container -->
+    <div
+      :class="['@container relative overflow-hidden bg-default text-default', { dark }]"
+      :style="{ height: screenH + 'px' }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/packages/frames/src/FDeviceFrame.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+// Photoreal device shell: an unmodified Wikimedia SVG render is the hardware; the live HTML screen is
+// overlaid at the SVG's measured screen insets and clipped to the SVG's own screen path. We draw the
+// cutout (island/notch/punch-hole) + an OS-authentic status bar on top.
+//
+// Status bar matches the platform: iOS uses the system font (SF Pro via system-ui) with hand-drawn
+// SF-style glyphs (cellular bars, wifi cone, capsule battery); Android uses Roboto with Material
+// Symbols glyphs. Sizes follow each platform's status bar. Rendered at true 1× logical points.
+import { computed, useId } from 'vue';
+import { findDevice, type DeviceModel } from './devices';
+import { artUrl } from './art';
+
+const clipId = `screenclip-${useId()}`;
+
+const props = withDefaults(
+  defineProps<{
+    model: string | DeviceModel;
+    dark?: boolean;
+    statusBar?: boolean;
+    time?: string;
+    /** Overlay the safe-area insets (top/bottom) for inspection. */
+    showSafe?: boolean;
+    /** Slot content runs edge-to-edge under the status bar (maps, camera). Pad with `safe.top`. */
+    fullBleed?: boolean;
+    /** A real phone is a COARSE pointer. Opt in to stamp `[data-force-coarse]` on the screen so the
+     *  preset's `coarse:` touch bumps fire for the content inside — the truthful render for a
+     *  web-cut surface (standard/marketing) viewed on a device. The mobile cut stays put on its own
+     *  (its `cut-fixed` opts the bump out — it already baked its size), and components with no
+     *  `coarse:` bump are unaffected. Default off so existing frames don't shift. */
+    touch?: boolean;
+  }>(),
+  { dark: false, statusBar: true, time: '9:41', showSafe: false, fullBleed: false, touch: false },
+);
+
+const device = computed<DeviceModel>(() =>
+  typeof props.model === 'string' ? findDevice(props.model) : props.model,
+);
+const art = computed(() => device.value.art!);
+const artSrc = computed(() => artUrl(device.value));
+const os = computed<'ios' | 'android'>(() => (device.value.brand === 'Apple' ? 'ios' : 'android'));
+
+const dims = computed(() => {
+  const a = art.value;
+  const w = device.value.screen.w / (1 - (a.inset.left + a.inset.right) / 100);
+  return { w, h: w * a.aspect };
+});
+
+const screenStyle = computed(() => {
+  const a = art.value;
+  return {
+    top: a.inset.top + '%',
+    left: a.inset.left + '%',
+    right: a.inset.right + '%',
+    bottom: a.inset.bottom + '%',
+    ...(a.clip
+      ? { clipPath: `url(#${clipId})` }
+      : { borderRadius: (device.value.screen.w * (a.radiusPct ?? 0)) / 100 + 'px' }),
+  };
+});
+
+const screenW = computed(() => device.value.screen.w);
+const statusBarH = computed(() => device.value.safe.top);
+const cutout = computed(() => device.value.cutout);
+const island = computed(() => ({ w: Math.round(screenW.value * 0.3), h: 36, top: 10 }));
+const notch = computed(() => ({ w: Math.round(screenW.value * 0.42), h: 30 }));
+const compact = computed(() => cutout.value === 'home' || cutout.value === 'none');
+
+// Safe-area bridge. A mock phone has no notch for the browser to report, so `env(safe-area-inset-*)`
+// resolves to 0 in here and chrome would tuck under the island. The frame publishes the device's
+// measured insets as the vars FCanvasHud reads first; on a real device nothing sets them and the
+// `env()` fallback takes over. Top is only owed when the content runs full-bleed — otherwise the
+// wrapper is already offset below the status bar and charging for it twice would double the gap.
+const safeVars = computed(() => ({
+  '--forest-safe-top': (props.fullBleed ? device.value.safe.top : 0) + 'px',
+  '--forest-safe-bottom': device.value.safe.bottom + 'px',
+}));
+
+// Status-bar metrics, computed per device so the clock/icons sit at the cutout's vertical centre and
+// clear the rounded-corner curve (no per-device hand-tuning, no clipped glyphs).
+const sb = computed(() => {
+  const d = device.value;
+  const ios = os.value === 'ios';
+  // vertical centre of the row = centre of the cutout (island/punch-hole) or middle of a short bar
+  const centerY =
+    cutout.value === 'island' ? island.value.top + island.value.h / 2
+    : cutout.value === 'punch-hole' ? 19
+    : statusBarH.value * 0.5;
+  // screen corner radius (px) → how far the corner curves in at centerY
+  const cornerR = d.art.radiusPct ? (d.screen.w * d.art.radiusPct) / 100 : d.screen.w * (ios ? 0.13 : 0.12);
+  const cornerInset = centerY >= cornerR ? 0 : cornerR - Math.sqrt(cornerR * cornerR - (cornerR - centerY) ** 2);
+  const basePad = ios ? (compact.value ? 16 : 22) : 14;
+  const padX = Math.max(basePad, Math.ceil(cornerInset) + 8);
+  return ios
+    ? { padX, barH: centerY * 2, clockPx: 15, clockFont: '-apple-system, "SF Pro Text", system-ui, sans-serif', clockWeight: 600, iconGap: 5 }
+    : { padX, barH: centerY * 2, clockPx: 14, clockFont: 'Roboto, system-ui, sans-serif', clockWeight: 500, iconGap: 6 };
+});
+
+</script>
+
+<template>
+  <div
+    class="device relative shrink-0"
+    :style="{ width: dims.w + 'px', height: dims.h + 'px', filter: 'drop-shadow(0 25px 45px rgba(0,0,0,.28))' }"
+  >
+    <img :src="artSrc" alt="" class="pointer-events-none absolute inset-0 h-full w-full select-none" draggable="false" />
+
+    <svg v-if="art.clip" class="absolute size-0" aria-hidden="true">
+      <defs>
+        <clipPath :id="clipId" clipPathUnits="objectBoundingBox"><path :d="art.clip" /></clipPath>
+      </defs>
+    </svg>
+
+    <!-- LIVE SCREEN -->
+    <div :class="['screen absolute overflow-hidden bg-default text-default', { dark }]" :style="screenStyle">
+      <!-- cutout -->
+      <div
+        v-if="cutout === 'island'"
+        class="absolute z-30 -translate-x-1/2 rounded-full bg-black"
+        :style="{ left: '50%', top: island.top + 'px', width: island.w + 'px', height: island.h + 'px' }"
+      ></div>
+      <div
+        v-else-if="cutout === 'notch' && !art.clip"
+        class="absolute left-1/2 top-0 z-30 -translate-x-1/2 bg-black"
+        :style="{ width: notch.w + 'px', height: notch.h + 'px', borderRadius: '0 0 18px 18px' }"
+      ></div>
+      <div
+        v-else-if="cutout === 'punch-hole'"
+        class="absolute left-1/2 top-3 z-30 size-3.5 -translate-x-1/2 rounded-full bg-black"
+      ></div>
+
+      <!-- OS-authentic status bar -->
+      <div
+        v-if="statusBar"
+        class="absolute inset-x-0 top-0 z-20 flex items-center justify-between text-highlighted"
+        :style="{ height: sb.barH + 'px', paddingInline: sb.padX + 'px' }"
+      >
+        <span
+          class="tabular-nums"
+          :style="{ fontFamily: sb.clockFont, fontSize: sb.clockPx + 'px', fontWeight: sb.clockWeight, letterSpacing: os === 'ios' ? '.01em' : '0' }"
+        >{{ time }}</span>
+
+        <!-- iOS glyphs: cellular bars · wifi cone · capsule battery -->
+        <div v-if="os === 'ios'" class="flex items-center" :style="{ gap: sb.iconGap + 'px' }">
+          <svg viewBox="0 0 18 12" height="11" fill="currentColor" aria-hidden="true">
+            <rect x="0" y="8" width="3" height="4" rx="1" /><rect x="5" y="5.5" width="3" height="6.5" rx="1" />
+            <rect x="10" y="3" width="3" height="9" rx="1" /><rect x="15" y="0" width="3" height="12" rx="1" />
+          </svg>
+          <svg viewBox="0 0 18 13" height="12" fill="currentColor" aria-hidden="true">
+            <path d="M9 2.4c2.9 0 5.6 1.05 7.7 2.9a.6.6 0 0 1 .03.87L9.5 13.5a.7.7 0 0 1-1 0L1.27 6.17a.6.6 0 0 1 .03-.87C3.4 3.45 6.1 2.4 9 2.4Z" />
+          </svg>
+          <svg viewBox="0 0 28 13" height="12" aria-hidden="true">
+            <rect x=".5" y=".5" width="23" height="12" rx="3.6" fill="none" stroke="currentColor" stroke-opacity=".4" />
+            <rect x="2" y="2" width="18" height="9" rx="2.2" fill="currentColor" />
+            <path d="M25.3 4.3c1.1.25 1.1 4.15 0 4.4Z" fill="currentColor" fill-opacity=".4" />
+          </svg>
+        </div>
+
+        <!-- Android glyphs: Material Symbols (cellular · wifi · battery) -->
+        <div v-else class="flex items-center" :style="{ gap: sb.iconGap + 'px' }">
+          <svg viewBox="0 -960 960 960" height="15" fill="currentColor" aria-hidden="true">
+            <path d="M260-160q-25 0-42.5-17.5T200-220v-120q0-25 17.5-42.5T260-400q25 0 42.5 17.5T320-340v120q0 25-17.5 42.5T260-160Zm240 0q-25 0-42.5-17.5T440-220v-320q0-25 17.5-42.5T500-600q25 0 42.5 17.5T560-540v320q0 25-17.5 42.5T500-160Zm240 0q-25 0-42.5-17.5T680-220v-520q0-25 17.5-42.5T740-800q25 0 42.5 17.5T800-740v520q0 25-17.5 42.5T740-160Z" />
+          </svg>
+          <svg viewBox="0 -960 960 960" height="15" fill="currentColor" aria-hidden="true">
+            <path d="M174-540q67-48 145-74t161-26q83 0 161 26t145 74l58-58q-79-60-172-91t-192-31q-99 0-192 31t-172 91l58 58Zm249 363L61-539q-12-12-18-27t-6-30q0-17 7-32.5T65-656q82-71 195-107.5T480-800q107 0 220 36.5T895-656q14 12 21 27.5t7 32.5q0 15-6 30t-18 27L537-177q-12 12-27 18t-30 6q-15 0-30-6t-27-18Z" />
+          </svg>
+          <svg viewBox="0 -960 960 960" height="15" fill="currentColor" aria-hidden="true">
+            <path d="M320-80q-17 0-28.5-11.5T280-120v-640q0-17 11.5-28.5T320-800h80v-40q0-17 11.5-28.5T440-880h80q17 0 28.5 11.5T560-840v40h80q17 0 28.5 11.5T680-760v640q0 17-11.5 28.5T640-80H320Z" />
+          </svg>
+        </div>
+      </div>
+
+      <!-- screen content — starts below the status bar unless fullBleed (maps, camera), in which
+           case it runs edge-to-edge and the status bar/cutout (z-20/z-30) draw over it -->
+      <div
+        class="absolute inset-x-0 bottom-0 overflow-hidden"
+        :style="{ top: fullBleed ? '0px' : statusBarH + 'px', ...safeVars }"
+        :data-force-coarse="touch ? '' : undefined"
+      >
+        <slot :device="device" :safe="device.safe" />
+      </div>
+
+      <!-- home indicator -->
+      <div
+        v-if="!compact"
+        class="absolute bottom-2 left-1/2 z-20 h-1 -translate-x-1/2 rounded-full bg-highlighted/40"
+        :style="{ width: screenW * 0.36 + 'px' }"
+      ></div>
+
+      <!-- safe-area overlay (toggle) -->
+      <template v-if="showSafe">
+        <div
+          class="pointer-events-none absolute inset-x-0 top-0 z-40 flex items-start justify-center"
+          :style="{ height: device.safe.top + 'px', background: 'rgba(56,189,248,.28)', borderBottom: '1px dashed rgba(2,132,199,.9)' }"
+        >
+          <span class="mt-0.5 rounded bg-sky-600 px-1 text-[9px] font-semibold text-white">{{ device.safe.top }}pt</span>
+        </div>
+        <div
+          v-if="device.safe.bottom > 0"
+          class="pointer-events-none absolute inset-x-0 bottom-0 z-40 flex items-end justify-center"
+          :style="{ height: device.safe.bottom + 'px', background: 'rgba(56,189,248,.28)', borderTop: '1px dashed rgba(2,132,199,.9)' }"
+        >
+          <span class="mb-0.5 rounded bg-sky-600 px-1 text-[9px] font-semibold text-white">{{ device.safe.bottom }}pt</span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* A touch glyph over the live screen, so a mouse reading a phone mock reads as a finger, not a
+   pointer: a solid grey contact dot inside a translucent halo, the shape a fingertip makes. Forced
+   onto descendants too — otherwise every button's own `cursor: pointer` wins back.
+   The SVG is baked static (no tokens, no `currentColor`), so the two modes are two encoded copies —
+   dark grey on a light screen, light grey on a dark one. Fine pointers only.
+   32px is the ceiling, not a taste call: Chrome refuses a cursor bitmap larger than 32×32 on
+   Windows and silently falls back to the arrow. */
+@media (hover: hover) and (pointer: fine) {
+  .screen,
+  .screen :deep(*) {
+    cursor:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%2352525B' fill-opacity='.28'/%3E%3Ccircle cx='16' cy='16' r='9.5' fill='%2352525B'/%3E%3C/svg%3E")
+        16 16,
+      pointer;
+  }
+
+  /* Two ways a screen ends up dark: the frame's own `dark` prop, or the whole docs app being in
+     dark mode (`html.dark`) — the screen inherits that through `bg-default` without ever carrying
+     the class itself. Both need the light-grey glyph.
+     Plain descendant selectors, NOT `:global(.dark) .screen` — Vue compiles that down to bare
+     `.dark`, which is on `<html>`, and `cursor` inherits to the whole page. Scoping only stamps the
+     last compound, so an unscoped ancestor matches on its own. */
+  .screen.dark,
+  .screen.dark :deep(*),
+  .dark .screen,
+  .dark .screen :deep(*) {
+    cursor:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23D4D4D8' fill-opacity='.28'/%3E%3Ccircle cx='16' cy='16' r='9.5' fill='%23D4D4D8'/%3E%3C/svg%3E")
+        16 16,
+      pointer;
+  }
+}
+</style>

package/packages/frames/src/FFitFrame.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+// Lays its slot out at a fixed LOGICAL width and scales the result down to fit the space available.
+//
+// Why a specimen wants this: a shell only reflows honestly at a real width, and its measures are absolute
+// — `railTop: 17rem` is 20% of 1360px and 65% of a 420px diagram box. Laying out at the real width and
+// shrinking the picture keeps every proportion true; shrinking the width instead changes the design.
+//
+// ★ SCALED WITH `transform`, NEVER WITH `zoom`. Both shrink the frame; only one keeps a Mapbox canvas
+// correct. Mapbox sizes its canvas from the container's LAYOUT box (clientWidth) and writes that back as
+// the canvas's CSS size. `zoom` changes the layout box, so the factor lands twice: MEASURED at zoom 0.72,
+// an 862px container held a 621px canvas — dead strips down two edges, and `map.resize()` cannot fix it
+// because it recomputes the same wrong value. A `transform` leaves the layout box alone, so Mapbox writes
+// the logical size and the transform scales the result once.
+//
+// The cost of a transform is that the element still OCCUPIES its unscaled box, which is what the rest of
+// this component is for.
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    /** Logical width the slot lays out at, whatever the space available. */
+    width: number;
+    /** Largest scale to draw at, so a wide page does not render the specimen at 1:1. */
+    maxScale?: number;
+  }>(),
+  { maxScale: 1 },
+);
+
+// The wrapper's own padding, added back to the height it reserves. Weighted downwards because a frame's
+// shadow is cast downwards, so that is the side that needs the room.
+const PAD_TOP = 8;
+const PAD_BOTTOM = 24;
+
+const inner = ref<HTMLElement | null>(null);
+const wrapper = ref<HTMLElement | null>(null);
+const naturalH = ref(0);
+const availW = ref(0);
+
+// Watched rather than read in onMounted: the refs are not guaranteed to be populated by the time this
+// component's mounted hook runs, and a missed attach leaves the wrapper unsized with no visible error.
+// No loop between the two: the slot's unscaled height is fixed by its own content, and the wrapper's
+// width is its block width — neither depends on the scale derived from them.
+const innerRO = new ResizeObserver(([e]) => { naturalH.value = e.contentRect.height; });
+const wrapRO = new ResizeObserver(([e]) => { availW.value = e.contentRect.width; });
+watch(inner, (el) => { innerRO.disconnect(); if (el) innerRO.observe(el); }, { immediate: true, flush: 'post' });
+watch(wrapper, (el) => { wrapRO.disconnect(); if (el) wrapRO.observe(el); }, { immediate: true, flush: 'post' });
+onBeforeUnmount(() => { innerRO.disconnect(); wrapRO.disconnect(); });
+
+// ★ SCALE TO FIT, capped. A fixed factor overflows its container the moment the page is narrower than
+// width × scale — the slot's layout width never changes, so nothing else absorbs it.
+const fit = computed(() => (availW.value ? Math.min(props.maxScale, availW.value / props.width) : props.maxScale));
+
+// Height the scaled frame actually takes on the page. 0 until measured, so nothing jumps.
+const reservedH = computed(() =>
+  naturalH.value ? Math.round(naturalH.value * fit.value) + PAD_TOP + PAD_BOTTOM : 0,
+);
+</script>
+
+<template>
+  <!-- The wrapper reserves the SCALED height and the shadow's room in its own padding. It does NOT clip:
+       the height already stops the unscaled leftover box from pushing the page around, and that leftover
+       box paints nothing. Any `overflow` value here costs the shadow — `hidden` cuts it off square, and
+       `hidden`/`clip` on one axis forces the other to `auto`, which adds a scrollbar. -->
+  <div
+    ref="wrapper"
+    class="flex justify-center pt-2 pb-6"
+    :style="reservedH ? { height: `${reservedH}px` } : undefined"
+  >
+    <!-- `self-start` is load-bearing: without it the flex default stretches this to the wrapper's
+         reserved height, which the wrapper derives from THIS element's height — a loop that collapses
+         both to nothing. `shrink-0` only guards the main axis.
+         `pointer-events-none` because this box keeps its UNSCALED height, so part of it hangs past the
+         frame over whatever follows. Transparent, but it would still swallow clicks and text selection
+         there. The slot opts back in. -->
+    <div
+      ref="inner"
+      class="pointer-events-none shrink-0 self-start [&>*]:pointer-events-auto"
+      :style="{ transform: `scale(${fit})`, transformOrigin: 'top center' }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/packages/frames/src/art/iphone-11.svg

@@ -0,0 +1,124 @@
+<svg width="360" height="722" version="1.1" viewBox="0 0 95.25 191.02918" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<linearGradient id="linearGradient941">
+<stop stop-color="#dedede" stop-opacity=".27450982" offset="0"/>
+<stop stop-color="#dedede" offset=".05"/>
+<stop stop-color="#dddedf" offset=".94999999"/>
+<stop stop-color="#dedede" stop-opacity=".27450982" offset="1"/>
+</linearGradient>
+<pattern id="pattern3129" patternTransform="matrix(.26458334 0 0 .26458334 -76.445683 -5.7812651)" xlink:href="#pattern2874-7"/>
+<linearGradient id="linearGradient5697" x1="-13.205618" x2="-13.205618" y1="26.258963" y2="47.30072" gradientTransform="translate(13.877701,13.831199)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient941"/>
+<clipPath id="clipPath5738-4">
+<path d="m0.45113544 39.688016c-0.24986192 0-0.4511331183 0.200755-0.4511331183 0.450619v20.944606c0 0.249864 0.2012711983 0.451135 0.4511331183 0.451135h3.47420686c0.2498645 0 0.4511357-0.201271 0.4511357-0.451135v-20.944606c0-0.249864-0.2012712-0.450619-0.4511357-0.450619z" color="#000000"/>
+</clipPath>
+<linearGradient id="linearGradient5475" x1="-13.205618" x2="-13.205618" y1="26.258963" y2="32.87096" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient941"/>
+<clipPath id="clipPath5401-9">
+<rect x="-13.8777" y="25.856594" width="4.3765388" height="7.4167299" ry=".45101735" color="#000000"/>
+</clipPath>
+<filter id="filter5465" x="-.32505909" y="-.025913246" width="1.6501182" height="1.0518265" color-interpolation-filters="sRGB">
+<feGaussianBlur stdDeviation="0.07139097"/>
+</filter>
+<linearGradient id="linearGradient5475-9" x1="-13.205618" x2="-13.205618" y1="26.258963" y2="39.268726" gradientTransform="translate(13.877701,13.831199)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient941"/>
+<clipPath id="clipPath5589-3">
+<path d="m0.45113526 39.688017c-0.2498636 0-0.45113526 0.200756-0.45113526 0.45062v12.912612c0 0.249864 0.20127166 0.451136 0.45113526 0.451136h3.47420684c0.2498635 0 0.4511352-0.201272 0.4511352-0.451136v-12.912612c0-0.249864-0.2012717-0.45062-0.4511352-0.45062z" color="#000000"/>
+</clipPath>
+<filter id="filter5465-7" x="-.32505909" y="-.025913246" width="1.6501182" height="1.0518265" color-interpolation-filters="sRGB">
+<feGaussianBlur stdDeviation="0.07139097"/>
+</filter>
+<clipPath id="clipPath5589-7-8">
+<path d="m0.45113526 39.688017c-0.2498636 0-0.45113526 0.200756-0.45113526 0.45062v12.912612c0 0.249864 0.20127166 0.451136 0.45113526 0.451136h3.47420684c0.2498635 0 0.4511352-0.201272 0.4511352-0.451136v-12.912612c0-0.249864-0.2012717-0.45062-0.4511352-0.45062z" color="#000000"/>
+</clipPath>
+<filter id="filter5465-7-8" x="-.32505909" y="-.025913246" width="1.6501182" height="1.0518265" color-interpolation-filters="sRGB">
+<feGaussianBlur stdDeviation="0.07139097"/>
+</filter>
+<linearGradient id="linearGradient5226" x1="340.65216" x2="349.57422" y1="361.12305" y2="361.12305" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient5220"/>
+<linearGradient id="linearGradient5220">
+<stop stop-color="#404040" offset="0"/>
+<stop stop-color="#838383" offset=".59999961"/>
+<stop stop-color="#a7a7a7" offset="1"/>
+</linearGradient>
+<linearGradient id="linearGradient5226-6" x1="340.65216" x2="349.57422" y1="361.12305" y2="361.12305" gradientTransform="matrix(-.26458334 0 0 .26458334 95.47647 7.5449331e-7)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient5220"/>
+<pattern id="pattern2874-7" width="1.171848" height="1.1718804" patternTransform="matrix(.26458334 0 0 .26458334 -76.445686 -5.7812643)" patternUnits="userSpaceOnUse">
+<g transform="matrix(3.7795274,0,0,3.7795274,288.92857,-26.720982)">
+<rect x="-76.445686" y="7.0699267" width=".15502979" height=".15502979" fill="#212121"/>
+<rect x="-76.290665" y="7.224957" width=".15502979" height=".15502979" fill="#212121"/>
+<rect x="-76.290665" y="7.0699267" width=".15502979" height=".15502979" fill="#060606"/>
+<rect x="-76.445686" y="7.224957" width=".15502979" height=".15502979" fill="#060606"/>
+</g>
+</pattern>
+<filter id="filter5343" x="-.19227619" y="-.082464501" width="1.3845524" height="1.164929" color-interpolation-filters="sRGB">
+<feGaussianBlur stdDeviation="0.030983682"/>
+</filter>
+<filter id="filter5347" x="-.10877967" y="-.082313925" width="1.2175593" height="1.1646278" color-interpolation-filters="sRGB">
+<feGaussianBlur stdDeviation="0.030983682"/>
+</filter>
+<linearGradient id="linearGradient5832" x1="8.3152552" x2="86.934753" y1="8.4801025" y2="8.4801025" gradientTransform="translate(.06681739 -2.6058787)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient5830"/>
+<linearGradient id="linearGradient5830">
+<stop stop-color="#4f4f4f" stop-opacity=".13084112" offset="0"/>
+<stop stop-color="#4f4f4f" offset=".07"/>
+<stop stop-color="#4f4f4f" stop-opacity=".95327103" offset=".93699998"/>
+<stop stop-color="#4f4f4f" stop-opacity="0" offset="1"/>
+</linearGradient>
+<linearGradient id="linearGradient5832-3" x1="8.3152552" x2="86.934753" y1="8.4801025" y2="8.4801025" gradientTransform="matrix(.99999998 0 0 -.99999998 .0668174 193.56681)" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient5830"/>
+<linearGradient id="linearGradient2973" x1="-41.981419" x2="137.23141" y1="95.480484" y2="95.480484" gradientTransform="rotate(90,47.625001,95.48048)" gradientUnits="userSpaceOnUse">
+<stop stop-color="#303030" offset="0"/>
+<stop stop-color="#171717" offset="1"/>
+</linearGradient>
+<mask id="mask1062-8" maskUnits="userSpaceOnUse">
+<path d="m42.746746 7.2620904c-0.399166 0-0.72037 0.3212029-0.72037 0.7203695 0 0.3991665 0.321204 0.7203694 0.72037 0.7203694h9.921876c0.399166 0 0.72037-0.3212029 0.72037-0.7203694 0-0.3991666-0.321204-0.7203695-0.72037-0.7203695z" color="#000000" fill="none" stroke="#fff" stroke-linecap="round" stroke-width=".05291667"/>
+</mask>
+<filter id="filter1214" x="-.09973029" y="-2.5665836" width="1.1994606" height="6.1331673" color-interpolation-filters="sRGB">
+<feGaussianBlur stdDeviation="0.49125426"/>
+</filter>
+<filter id="filter960" x="-.31917548" y="-.0079953911" width="1.638351" height="1.0159908" color-interpolation-filters="sRGB">
+<feGaussianBlur stdDeviation="0.070098782"/>
+</filter>
+</defs>
+<g>
+<path d="m94.798868 44.206385c0.249863 0 0.451135 0.200755 0.451135 0.45062v20.944605c0 0.249865-0.201272 0.451136-0.451135 0.451136h-3.474207c-0.249863 0-0.451135-0.201271-0.451135-0.451136v-20.944605c0-0.249865 0.201272-0.45062 0.451135-0.45062z" color="#000000" fill="#b4b4b4"/>
+<path transform="matrix(-1,0,0,1,95.250003,4.5183682)" d="m0.547026 40.090161c-0.222752 0-0.402042 0.17929-0.402042 0.402042v20.237673c0 0.222752 0.17929 0.402042 0.402042 0.402042h0.125057v-21.041757z" clip-path="url(#clipPath5738-4)" color="#000000" fill="url(#linearGradient5697)" filter="url(#filter960)"/>
+<g>
+<rect x="-5.539465e-10" y="25.856596" width="4.3765388" height="7.4167299" ry=".45101735" color="#000000" fill="#b4b4b4"/>
+<path transform="translate(13.877701)" d="m-13.330675 26.258962c-0.222752 0-0.402042 0.17929-0.402042 0.402042v5.807914c0 0.222752 0.17929 0.402042 0.402042 0.402042h0.125057v-6.611998z" clip-path="url(#clipPath5401-9)" color="#000000" fill="url(#linearGradient5475)" filter="url(#filter5465)"/>
+<path d="m0.45113526 39.688017c-0.2498636 0-0.45113526 0.200755-0.45113526 0.45062v12.912611c0 0.249865 0.20127166 0.451136 0.45113526 0.451136h3.47420674c0.2498635 0 0.4511353-0.201271 0.4511353-0.451136v-12.912611c0-0.249865-0.2012718-0.45062-0.4511353-0.45062z" color="#000000" fill="#b4b4b4"/>
+</g>
+<g>
+<g>
+<path d="m0.547026 40.090161c-0.222752 0-0.402042 0.17929-0.402042 0.402042v12.205679c0 0.222752 0.17929 0.402042 0.402042 0.402042h0.125057v-13.009763z" clip-path="url(#clipPath5589-3)" color="#000000" fill="url(#linearGradient5475-9)" filter="url(#filter5465-7)"/>
+<path d="m0.45113526 57.060536c-0.2498636 0-0.45113526 0.200755-0.45113526 0.45062v12.912611c0 0.249865 0.20127166 0.451136 0.45113526 0.451136h3.47420674c0.2498635 0 0.4511353-0.201271 0.4511353-0.451136v-12.912611c0-0.249865-0.2012718-0.45062-0.4511353-0.45062z" color="#000000" fill="#b4b4b4"/>
+<path transform="translate(0,17.372519)" d="m0.547026 40.090161c-0.222752 0-0.402042 0.17929-0.402042 0.402042v12.205679c0 0.222752 0.17929 0.402042 0.402042 0.402042h0.125057v-13.009763z" clip-path="url(#clipPath5589-7-8)" color="#000000" fill="url(#linearGradient5475-9)" filter="url(#filter5465-7-8)"/>
+<path d="m14.483352 0.19895344c-7.7365204 0-13.96452034 6.22800506-13.96452034 13.96452256v162.633474c0 7.73652 6.22799994 13.96504 13.96452034 13.96504h28.3006l0.57826-0.81958h2.052579 4.42041 2.052072l0.578778 0.81958h28.300591c7.73652 0 13.964529-6.22852 13.964529-13.96504v-162.633474c0-7.7365175-6.228009-13.96452256-13.964529-13.96452256z" color="#000000" fill="#c6c6c6"/>
+</g>
+<rect x="1.4644364" y="1.0885143" width="92.644859" height="188.66818" ry="13.323661" fill-opacity=".95794391"/>
+<path transform="scale(.26458334)" d="m56.734375 2.265625c-29.67855 0-53.5722656 23.893695-53.5722656 53.572266v14.171875h4.1660156v-15.785157c0-26.582161 21.40025-47.9804684 47.982422-47.9804684h249.378903c26.58218 0 47.98243 21.3983074 47.98243 47.9804684v15.785157h4.16601v-14.171875c0-29.678571-23.89368-53.572266-53.57227-53.572266zm-53.5722656 72.667969v572.124996h4.1660156v-572.124996zm349.5097706 0v572.124996h4.16601v-572.124996zm-349.5097706 577.050786v14.29687c0 29.67855 23.8937156 53.57227 53.5722656 53.57227h246.531245c29.67859 0 53.57227-23.89372 53.57227-53.57227v-14.29687h-4.16601v16.47656c0 26.58217-21.40025 47.98242-47.98243 47.98242h-249.378903c-26.582172 0-47.982422-21.40025-47.982422-47.98242v-16.47656z" color="#000000" fill="#dedede"/>
+<path transform="scale(.26458334)" d="m284.4707 2.265625v3.9785156h4.92383v-3.9785156zm-281.3085906 67.744141v4.923828h4.1660156v-4.923828zm349.5097706 0v4.923828h4.16601v-4.923828zm-349.5097706 577.048824v4.92579h4.1660156v-4.92579zm349.5097706 0v4.92579h4.16601v-4.92579zm-282.066411 69.38477v3.41016h4.923828v-3.41016z" color="#000000" fill="#c3c3c3"/>
+</g>
+<g transform="translate(-.11323174)">
+<path transform="scale(.26458334)" d="m325.58008 15.363281c-1.17457-0.116312-0.62011 1.054663 2.01562 3.496094 8.69619 8.055118 14.09571 19.714101 14.09571 32.691406v309.572269 309.57226c0 12.97731-5.39952 24.63629-14.09571 32.69141-2.63573 2.44142-3.19019 3.6125-2.01562 3.49609 0.70474-0.0698 2.03219-0.60282 3.9043-1.60156 12.70949-6.7804 20.08984-21.40851 20.08984-36.94531v-307.21289-307.212894c0-15.536781-7.38036-30.164944-20.08984-36.945312-1.87211-0.998744-3.19956-1.531776-3.9043-1.601563z" color="#000000" fill="url(#linearGradient5226)"/>
+<path d="m9.3334021 4.0648688c0.310772-0.03077 0.164071 0.279046-0.533299 0.925008-2.300868 2.13125-3.729491 5.2160232-3.729491 8.6496012v81.907666 81.907656c0 3.43358 1.428623 6.51836 3.729491 8.64961 0.69737 0.64596 0.844071 0.9558 0.533299 0.925-0.186462-0.0185-0.537684-0.15949-1.033013-0.42374-3.362719-1.79398-5.315437-5.66434-5.315437-9.77512v-81.283406-81.283414c0-4.110774 1.952721-7.9811422 5.315437-9.7751142 0.495329-0.264251 0.846551-0.405283 1.033013-0.423747z" color="#000000" fill="url(#linearGradient5226-6)"/>
+</g>
+<g>
+<rect x="42.02623" y="7.2618642" width="11.36291" height="1.4410343" ry=".72051716" color="#000000" fill="url(#pattern3129)"/>
+<circle cx="57.914883" cy="7.8897233" r="1.3446997" color="#000000" fill="#161616"/>
+<circle cx="57.914883" cy="7.8897233" r="1.0774301" color="#000000" fill="#0a0d13"/>
+<circle cx="57.914883" cy="7.8897233" r=".82091707" color="#000000" fill="#091427"/>
+</g>
+<path d="m57.349775 7.3405077c-0.09735 0.010246-0.235679 0.1588277-0.245928 0.4508659-0.01024 0.292038 0.117842 0.4508656 0.189571 0.4508656 0.07173 0 0.368889-0.4252483 0.05635-0.9017315z" fill="#235a91" fill-opacity=".55607473" fill-rule="evenodd" filter="url(#filter5343)"/>
+<path d="m58.048878 7.2382402c-0.153553 0.0472469-0.183083 0.2952938-0.177178 0.4370348 0.0059 0.1417412 0.206706 0.5138116 0.448847 0.4311293 0.242142-0.0826823 0.283483-0.3897882 0.183084-0.5964939-0.100401-0.2067057-0.283483-0.3543525-0.454753-0.2716702z" fill="#235a91" fill-opacity=".55607473" fill-rule="evenodd" filter="url(#filter5347)"/>
+<g>
+<path d="m14.624068 2.5772674c-2.29857 0-4.436824 0.6574018-6.2419957 1.7921386v1.5048178c1.7203777-1.1284623 3.7800397-1.7854209 6.0001507-1.7854209h26.411827 13.795537 26.411825c2.220111 0 4.279774 0.6569586 6.000153 1.7854209v-1.5048178c-1.805173-1.1347368-3.943427-1.7921386-6.241998-1.7921386h-26.16998-13.795537z" color="#000000" fill="url(#linearGradient5832)"/>
+<path d="m14.624068 188.38368c-2.29857 0-4.436824-0.65742-6.2419957-1.79215v-1.50481c1.7203777 1.12845 3.7800397 1.78541 6.0001507 1.78541h26.411827 13.795539 26.411823c2.220111 0 4.279774-0.65696 6.000153-1.78541v1.50481c-1.805173 1.13473-3.943427 1.79215-6.241998 1.79215h-26.169978-13.795539z" color="#000000" fill="url(#linearGradient5832-3)"/>
+<path d="m14.758273 5.8740621c-4.70114 0-8.4857901 3.7846491-8.4857901 8.4857869v162.241251c0 4.70114 3.7846501 8.4858 8.4857901 8.4858h65.733457c4.701138 0 8.485788-3.78466 8.485788-8.4858v-162.241251c0-4.7011378-3.78465-8.4857869-8.485788-8.4857869h-8.300784a1.4175986 1.4175986 0 0 0-1.417487 1.4174841v0.6526739c0 2.5541609-2.055892 4.6105709-4.610052 4.6105709h-37.076805c-2.554169 0-4.610059-2.05641-4.610059-4.6105709v-0.6526739a1.4175986 1.4175986 0 0 0-1.41748-1.4174841z" color="#000000" fill="url(#linearGradient2973)"/>
+</g>
+<g fill="#fff" fill-opacity=".06542059">
+<circle cx="29.091516" cy="7.8897238" r=".89769351"/>
+<circle cx="65.011909" cy="7.8897238" r="1.6063988"/>
+<circle cx="36.640068" cy="7.8897238" r="1.3229167"/>
+</g>
+<path d="m42.746746 7.2620885c-0.399166 0-0.72037 0.3212029-0.72037 0.7203695 0 0.3991665 0.321204 0.7203694 0.72037 0.7203694h9.921876c0.399166 0 0.72037-0.3212029 0.72037-0.7203694 0-0.3991666-0.321204-0.7203695-0.72037-0.7203695z" color="#000000" fill="none" stroke="#292929" stroke-linecap="round" stroke-width=".05291667"/>
+<g fill="#fff" filter="url(#filter1214)" mask="url(#mask1062-8)">
+<path d="m42.25606 7.9824588a0.22968481 0.22968481 0 0 1-0.229685 0.2296847 0.22968481 0.22968481 0 0 1-0.229685-0.2296847 0.22968481 0.22968481 0 0 1 0.229685-0.2296848 0.22968481 0.22968481 0 0 1 0.229685 0.2296848z"/>
+<path d="m53.618677 7.9824588a0.22968481 0.22968481 0 0 1-0.229685 0.2296847 0.22968481 0.22968481 0 0 1-0.229685-0.2296847 0.22968481 0.22968481 0 0 1 0.229685-0.2296848 0.22968481 0.22968481 0 0 1 0.229685 0.2296848z"/>
+</g>
+</g>
+</svg>