@viax.io/uxm 4.36.0

package/dist/previews/composite/brand-settings-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/previews/composite/brand-settings-preview.tsx"],"sourcesContent":["import { useId, useRef, useState, type CSSProperties } from 'react';\n\nimport { hexToHsl, retintHue } from '@/lib/contrast';\nimport type { BrandConfig } from '@/lib/types';\nimport type { PreviewProps, PreviewShellContext } from '@/previews/types';\nimport { themeTokens, type ThemeToken } from '@/tokens';\nimport {\n  Badge, ButtonGroup, ButtonPrimary, ButtonSecondary, ButtonTertiary, Card, Cluster,\n  ColorInputPopover, Dialog, Disclosure, FormField, Icon, IconButton, InlineAction, Modal,\n  ResponsiveGrid, SectionHeader, Select, Stack, Tabs, TextInput,\n} from '@/ui';\n\nexport const FONT_OPTIONS: { label: string; value: string; stack: string }[] = [\n  { label: 'Inter (default)', value: 'Inter', stack: \"'Inter', var(--font-inter), system-ui, sans-serif\" },\n  { label: 'Geist', value: 'Geist', stack: \"'Geist', system-ui, sans-serif\" },\n  { label: 'Manrope', value: 'Manrope', stack: \"'Manrope', system-ui, sans-serif\" },\n  { label: 'Space Grotesk', value: 'Space Grotesk', stack: \"'Space Grotesk', system-ui, sans-serif\" },\n  { label: 'Plus Jakarta Sans', value: 'Plus Jakarta Sans', stack: \"'Plus Jakarta Sans', system-ui, sans-serif\" },\n  { label: 'DM Sans', value: 'DM Sans', stack: \"'DM Sans', system-ui, sans-serif\" },\n  { label: 'Figtree', value: 'Figtree', stack: \"'Figtree', system-ui, sans-serif\" },\n  { label: 'Roboto', value: 'Roboto', stack: \"'Roboto', system-ui, sans-serif\" },\n  { label: 'IBM Plex Sans', value: 'IBM Plex Sans', stack: \"'IBM Plex Sans', system-ui, sans-serif\" },\n  { label: 'JetBrains Mono', value: 'JetBrains Mono', stack: \"'JetBrains Mono', ui-monospace, monospace\" },\n];\n\n/** Shared by the base-size knob and each role's size knob.\n * Sub-100% values do NOT shrink AA-floor-reasoned small text: surfaces with a\n * documented minimum (Menu's 11px subtitle / 12px hint) floor themselves via\n * `max()` in their own SCSS, so \"compact\" compacts everything else. */\nconst SCALE_OPTIONS = [\n  { value: '', label: 'Default (100%)' },\n  { value: '0.875', label: '87.5% — compact' },\n  { value: '1.125', label: '112.5% — large' },\n  { value: '1.25', label: '125% — larger' },\n  { value: '1.5', label: '150% — largest' },\n];\n\n/** Closed sets small enough to show as segments — every option visible, one\n *  click instead of open-then-pick. Labels stay short so the track fits. */\nconst WEIGHT_OPTIONS = [\n  { value: '', label: 'Default' },\n  { value: '500', label: '500' },\n  { value: '600', label: '600' },\n  { value: '700', label: '700' },\n];\nconst LINE_HEIGHT_OPTIONS = [\n  { value: '', label: 'Default' },\n  { value: '1.4', label: 'Tight' },\n  { value: '1.5', label: 'Normal' },\n  { value: '1.7', label: 'Relaxed' },\n  { value: '2', label: 'Loose' },\n];\n\ntype TypeTab = 'body' | 'headings';\n\n/** Dot marking a tab whose group holds a non-default value — a setting made on\n *  the hidden tab would otherwise leave no trace on this screen. Rides in\n *  `TabsOption.icon`, which Tabs renders as its own sibling span: a wrapper\n *  here would put a block box inside the label span, and `<button>`/`<span>`\n *  both take phrasing content only. */\nconst dirtyDot = (dirty: boolean) =>\n  (dirty ? <Badge mode=\"dot\" type=\"accent\" aria-hidden /> : undefined);\n\n/**\n * The three heading roles, in visual order. `basePx` / `baseWeight` are the\n * representative surface's own values, used only to render the specimen at a\n * believable size — the atoms keep their individual literals.\n */\nconst ROLES = [\n  { key: 'display', label: 'Display', short: 'Display', sample: '$48.2K', basePx: 28, baseWeight: 700,\n    familyKey: 'displayFontFamily', weightKey: 'displayFontWeight', scaleKey: 'displayScale' },\n  { key: 'pageTitle', label: 'Page titles', short: 'Page title', sample: 'Quarterly performance review', basePx: 22, baseWeight: 600,\n    familyKey: 'pageTitleFontFamily', weightKey: 'pageTitleFontWeight', scaleKey: 'pageTitleScale' },\n  { key: 'sectionTitle', label: 'Section titles', short: 'Section title', sample: 'Revenue motions', basePx: 16, baseWeight: 600,\n    familyKey: 'sectionTitleFontFamily', weightKey: 'sectionTitleFontWeight', scaleKey: 'sectionTitleScale' },\n] as const;\n\ntype UploadKind = 'logo' | 'icon' | 'favicon';\ntype IdentityTab = 'light' | 'dark';\n\nconst ACCEPT_MAP: Record<UploadKind, string> = {\n  logo: 'image/svg+xml,image/png,image/webp,image/jpeg',\n  icon: 'image/svg+xml,image/png,image/webp',\n  favicon: 'image/png,image/x-icon,image/vnd.microsoft.icon,image/svg+xml',\n};\n\nconst BRAND_FIELD = (k: UploadKind, tab: IdentityTab) =>\n  `${k}Url${tab === 'dark' ? 'Dark' : ''}` as const;\nconst REMOTE_KIND = (k: UploadKind, tab: IdentityTab) =>\n  `${k}${tab === 'dark' ? 'Dark' : ''}`;\n\n/**\n * The three brand assets, in render order. `box` sets only the frame's WIDTH —\n * the height stretches to the row, so a frame always matches the field beside\n * it even when the Base text size knob grows it. Width stays explicit because\n * `aspect-ratio` cannot derive it from a stretched height (flex resolves main\n * size from content first), so the square marks are square at the default\n * scale and grow a little taller than wide beyond it.\n * These keep the local `Preview` frame rather than the square `Thumbnail`\n * atom (see `Preview` below for why).\n */\nconst ASSETS = [\n  { kind: 'logo' as const, title: 'Logo', defaultSrc: '/viax-logo.svg',\n    box: { width: 110 }, imgStyle: { maxWidth: '90%', maxHeight: '70%' },\n    hint: 'Shown in the expanded sidebar. Upload a file or paste a URL.' },\n  { kind: 'icon' as const, title: 'Sidebar Icon', defaultSrc: '/viax-icon.svg',\n    box: { width: 44 }, imgStyle: { maxWidth: '70%', maxHeight: '70%' },\n    hint: 'Shown in the collapsed sidebar.' },\n  { kind: 'favicon' as const, title: 'Favicon', defaultSrc: undefined,\n    box: { width: 44 }, imgStyle: { maxWidth: '60%', maxHeight: '60%' },\n    hint: 'Browser tab icon. Accepts .ico, .png, .svg.' },\n];\n\ntype Asset = (typeof ASSETS)[number];\n\n/**\n * One asset row: preview frame, URL field, upload button. Three near-identical\n * blocks before this — the only differences are in ASSETS above.\n *\n * FormField's direct child is the `Cluster`, not the field, so its usual\n * `cloneElement` wiring can't reach the control — the id and the hint are\n * associated by hand below. The Cluster carries its OWN id so FormField skips\n * the injection (`childId ? {} : { id: controlId }`) and the field keeps sole\n * ownership of `fieldId`; two elements sharing it made `<label for>` resolve to\n * the Cluster and stopped the label focusing the field.\n */\nfunction AssetRow({\n  asset, tab, value, fallbackSrc, hint, uploading, onUrlChange, onPick,\n}: {\n  asset: Asset;\n  tab: IdentityTab;\n  value: string;\n  fallbackSrc?: string;\n  hint: string;\n  uploading: boolean;\n  onUrlChange: (v: string) => void;\n  onPick: (file: File) => void;\n}) {\n  const fileRef = useRef<HTMLInputElement>(null);\n  // Explicit id so the label and hint can be wired by hand: the control sits\n  // inside a Cluster (preview + field + button share one row), and FormField's\n  // cloneElement only reaches its DIRECT child. `fieldId` belongs to the input\n  // alone — the Cluster takes `-row` so FormField does not inject a duplicate.\n  const fieldId = useId();\n  const src = value || fallbackSrc;\n  return (\n    <FormField label={asset.title} hint={hint} htmlFor={fieldId}>\n      <Cluster id={`${fieldId}-row`} gap={12} align=\"center\">\n        <Preview box={asset.box} dim={tab === 'dark'}>\n          {src && (\n            <PreviewImg key={src} src={src} alt={`${asset.title} preview`} style={asset.imgStyle} />\n          )}\n        </Preview>\n        {/* Stack, not `style` on TextInput: a clearable TextInput wraps itself\n            in a `display:block` div, and TextInput forwards `style` to the\n            inner <input> — so the flex has to go on something that IS the flex\n            item. Stack stretches its child, which the input fills at 100%. */}\n        <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>\n          <TextInput\n            id={fieldId}\n            aria-describedby={`${fieldId}-hint`}\n            value={value}\n            placeholder={fallbackSrc}\n            onChange={(e) => onUrlChange(e.target.value)}\n          />\n        </Stack>\n        {/* Not a UI control — the visible affordance is the button beside it. */}\n        <input\n          ref={fileRef}\n          type=\"file\"\n          accept={ACCEPT_MAP[asset.kind]}\n          hidden\n          onChange={(e) => e.target.files?.[0] && onPick(e.target.files[0])}\n        />\n        <ButtonSecondary onClick={() => fileRef.current?.click()} disabled={uploading}>\n          {uploading ? 'Uploading…' : 'Upload'}\n        </ButtonSecondary>\n      </Cluster>\n    </FormField>\n  );\n}\n\n/** The colour-format contract shared by the Identity brand-colour row and the\n *  expert token list — one definition so the two can never disagree about what\n *  a valid hex is. (`parseColor` also accepts 4/8-digit alpha forms; widen HERE\n *  if the editors ever should.) */\nconst isValidHex = (v: string) => /^#[0-9A-Fa-f]{6}$/.test(v) || /^#[0-9A-Fa-f]{3}$/.test(v);\n\n/**\n * Identity-level brand colour — the one token promoted out of the expert list\n * (curated by the `identity` flag on the catalog, not a list here). Follows the\n * asset-row grammar: frame-sized swatch, field, action button on the right.\n *\n * Explicit commit: a popover pick or typed hex STAGES a draft, and only Apply\n * re-tints the accent ramp — in BOTH themes, without the expert list's confirm\n * modal, because here the button already is the confirmation. Undo is \"Reset\n * palette\", which clears every accent-group override in both themes.\n * The base is defined against LIGHT; dark derives via the hue re-tint.\n */\nfunction BrandColorRow({ shell }: { shell: PreviewShellContext }) {\n  const { brand, setBrand } = shell;\n  // Any `identity`-flagged token renders; only the accent one carries the ramp\n  // retint. Silently requiring `group === 'accent'` here would make the catalog\n  // flag a no-op with no signal for every other group.\n  const token = themeTokens.find((t) => t.identity);\n  const fansOut = token?.group === 'accent';\n  const fieldId = useId();\n  const [draft, setDraft] = useState<string | null>(null);\n  if (!token) return null;\n\n  const effective = (brand.tokens?.light?.[token.cssVar] ?? token.hex).toUpperCase();\n  // The draft stays RAW: uppercasing the controlled value on each keystroke\n  // makes React reset the caret to the end whenever `a` becomes `A` (measured),\n  // garbling mid-string edits. The CSS `textTransform` handles display and\n  // `apply` uppercases once at commit — same split TokenRow uses.\n  const shown = draft ?? effective;\n  const validHex = isValidHex(shown);\n  const staged = validHex && shown.toUpperCase() !== effective;\n  const overridden = (['light', 'dark'] as const).some((t) =>\n    Object.keys(brand.tokens?.[t] ?? {}).some(\n      (k) => themeTokens.find((tk) => tk.cssVar === k)?.group === token.group,\n    ),\n  );\n\n  const apply = () => {\n    if (!staged) return;\n    const hex = shown.toUpperCase();\n    setBrand({\n      tokens: fansOut\n        ? retintAccentTokens(brand.tokens, token.cssVar, hex, 'light')\n        : { ...brand.tokens, light: { ...brand.tokens?.light, [token.cssVar]: hex } },\n    });\n    setDraft(null);\n  };\n\n  const reset = () => {\n    const next = { ...brand.tokens };\n    for (const t of ['light', 'dark'] as const) {\n      const map = { ...(brand.tokens?.[t] ?? {}) };\n      for (const tk of themeTokens) if (tk.group === token.group) delete map[tk.cssVar];\n      next[t] = Object.keys(map).length ? map : undefined;\n    }\n    setBrand({ tokens: next });\n    setDraft(null);\n  };\n\n  return (\n    <FormField\n      label=\"Brand color\"\n      hint={fansOut\n        ? 'Apply rebuilds the whole accent palette for light and dark — including any shades fine-tuned in Color below.'\n        : `Applies to ${token.name}. Fine-tune related tokens in Color below.`}\n      htmlFor={fieldId}\n    >\n      <Cluster id={`${fieldId}-row`} gap={12} align=\"center\">\n        {/* Sized to sit in the same visual column as the asset frames. Shows\n            the DRAFT, so a pick is visible before it is applied. */}\n        <ColorInputPopover\n          value={validHex ? shown.toUpperCase() : effective}\n          onChange={(c) => setDraft(c.toUpperCase())}\n          outputFormat=\"hex\"\n          alpha={false}\n          // ColorInputPopover appends the current value to this itself.\n          triggerLabel=\"Pick brand color\"\n          title=\"Pick a color\"\n          style={{\n            '--uxm-color-input-trigger-size': '44px',\n            '--uxm-color-input-border-radius': '6px',\n          } as CSSProperties}\n        />\n        {/* Stack, not `style` on TextInput — same reason as AssetRow: a\n            clearable TextInput forwards `style` to the inner <input>, so the\n            flex must live on the element that IS the flex item. */}\n        <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>\n          <TextInput\n            id={fieldId}\n            aria-describedby={`${fieldId}-hint`}\n            value={shown}\n            onChange={(e) => setDraft(e.target.value)}\n            onKeyDown={(e) => { if (e.key === 'Enter') apply(); }}\n            spellCheck={false}\n            clearable={false}\n            style={{\n              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',\n              textTransform: 'uppercase',\n            }}\n          />\n        </Stack>\n        <ButtonSecondary onClick={apply} disabled={!staged}>\n          Apply\n        </ButtonSecondary>\n        {overridden && (\n          <InlineAction onClick={reset} icon={<Icon glyph=\"refresh\" size={11} />}>\n            {fansOut ? 'Reset palette' : `Reset ${token.name.toLowerCase()}`}\n          </InlineAction>\n        )}\n      </Cluster>\n    </FormField>\n  );\n}\n\n/**\n * Set the accent BASE to `baseHex` in `editedTheme` and re-tint every other\n * accent token — in BOTH themes — from its designed default to the new hue.\n * Rebuilding from defaults (not current values) keeps the result a clean\n * light→dark ramp regardless of prior overrides. Pure: returns the next\n * `tokens` value, callers `setBrand` it. Shared by the Identity brand-colour\n * knob (staged behind its Apply button) and the expert token list (behind its\n * confirm modal).\n */\nfunction retintAccentTokens(\n  tokens: BrandConfig['tokens'],\n  baseVar: string,\n  baseHex: string,\n  editedTheme: 'light' | 'dark',\n): BrandConfig['tokens'] {\n  const hsl = hexToHsl(baseHex);\n  if (!hsl) return tokens;\n  const next = { ...tokens };\n  for (const t of ['light', 'dark'] as const) {\n    const map = { ...(tokens?.[t] ?? {}) };\n    for (const tk of themeTokens) {\n      if (tk.group !== 'accent') continue;\n      if (t === editedTheme && tk.cssVar === baseVar) {\n        map[tk.cssVar] = baseHex.toUpperCase();\n        continue;\n      }\n      const base = t === 'dark' ? tk.darkHex : tk.hex;\n      map[tk.cssVar] = retintHue(base, hsl.h).toUpperCase();\n    }\n    next[t] = Object.keys(map).length ? map : undefined;\n  }\n  return next;\n}\n\nexport function BrandSettingsPreview({ shell }: PreviewProps) {\n  const [uploading, setUploading] = useState<UploadKind | null>(null);\n  const [levelsOpen, setLevelsOpen] = useState(false);\n  const [typeTab, setTypeTab] = useState<TypeTab>('body');\n  const [error, setError] = useState<string | null>(null);\n  const [identityTab, setIdentityTab] = useState<IdentityTab>('light');\n\n  // The brand-settings preview is shell-only: it reads and writes the host\n  // app's brand state. Without `shell`, there's no state to bind to —\n  // render an inert hint instead of crashing.\n  if (!shell) {\n    return (\n      <div style={{ padding: 16, fontSize: 13, color: 'var(--color-text-muted)' }}>\n        Brand Settings preview requires a host shell context (brand + setBrand).\n      </div>\n    );\n  }\n\n  const { brand, setBrand } = shell;\n\n  const upload = async (file: File, kind: UploadKind, tab: IdentityTab) => {\n    if (!shell.uploadAsset) {\n      setError('Upload is unavailable in this host.');\n      return;\n    }\n    setUploading(kind);\n    setError(null);\n    try {\n      const data = await shell.uploadAsset(file, REMOTE_KIND(kind, tab));\n      if (!data?.url) throw new Error('Upload failed');\n      setBrand({ [BRAND_FIELD(kind, tab)]: data.url });\n    } catch (e) {\n      setError(e instanceof Error ? e.message : 'Upload failed');\n    } finally {\n      setUploading(null);\n    }\n  };\n\n  const inheritsHint = (kind: UploadKind, value: string, base: string) => {\n    if (identityTab === 'dark' && !value) {\n      return `${base} Inherits the Light ${kind} when empty.`;\n    }\n    return base;\n  };\n  const fontFamily = brand.fontFamily ?? '';\n  const headingFontFamily = brand.headingFontFamily ?? '';\n  const headingFontWeight = brand.headingFontWeight ?? '';\n  // Specimen helpers mirroring the real cascade: an unset role falls through to\n  // the heading umbrella, which falls through to the body face; sizes multiply\n  // the role factor and the base scale exactly as the atoms' calc() does.\n  const specimenStack = (roleFamily: string | undefined) =>\n    FONT_OPTIONS.find((f) => f.value === (roleFamily || headingFontFamily || fontFamily))?.stack\n      ?? 'inherit';\n  const specimenSize = (basePx: number, roleScale?: string, baseScale?: string) =>\n    Math.round(basePx * Number(roleScale || 1) * Number(baseScale || 1) * 10) / 10;\n\n  // Which tab carries a non-default value, for the dot on the tab label.\n  const bodyDirty = Boolean(brand.fontFamily || brand.typeScale || brand.bodyLineHeight);\n  const headingsDirty = Boolean(\n    brand.headingFontFamily || brand.headingFontWeight\n    || ROLES.some((r) => brand[r.familyKey] || brand[r.weightKey] || brand[r.scaleKey]),\n  );\n\n  return (\n    <Stack gap={16} style={{ width: '100%', maxWidth: 640 }}>\n      <Group\n        title=\"Identity\"\n        description=\"Logos, marks and the brand color shown throughout Modo. Dark assets fall back to the light ones when empty.\"\n      >\n        <Cluster justify=\"between\" align=\"center\" gap={8}>\n          <span style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>\n            Editing <strong style={{ color: 'var(--color-text)' }}>{identityTab}</strong> assets\n          </span>\n          <LightDarkTabs value={identityTab} onChange={setIdentityTab} />\n        </Cluster>\n\n        {ASSETS.map((a) => (\n          <AssetRow\n            key={a.kind}\n            asset={a}\n            tab={identityTab}\n            value={(brand[BRAND_FIELD(a.kind, identityTab)] as string | undefined) ?? ''}\n            fallbackSrc={\n              identityTab === 'dark'\n                ? ((brand[`${a.kind}Url`] as string | undefined) || a.defaultSrc)\n                : a.defaultSrc\n            }\n            hint={inheritsHint(a.kind, (brand[BRAND_FIELD(a.kind, identityTab)] as string | undefined) ?? '', a.hint)}\n            uploading={uploading === a.kind}\n            onUrlChange={(v) => setBrand({ [BRAND_FIELD(a.kind, identityTab)]: v || undefined })}\n            onPick={(file) => upload(file, a.kind, identityTab)}\n          />\n        ))}\n\n        <BrandColorRow shell={shell} />\n\n        {error && (\n          <p style={{ fontSize: 12, color: 'var(--color-danger-text)', margin: 0 }}>{error}</p>\n        )}\n      </Group>\n\n      <Group\n        title=\"Typography\"\n        description=\"Typefaces applied across Modo. Headings are optional — they inherit the body face unless you set one. Changes apply live and persist on Publish.\"\n      >\n        <Stack gap={12}>\n          {/* Body and Headings are independent decisions, so they get their own\n              tabs rather than one long column. The dot marks a tab whose group\n              differs from default — otherwise a setting made on the hidden tab\n              is invisible from here. */}\n          <Tabs\n            value={typeTab}\n            onChange={(v) => setTypeTab(v as TypeTab)}\n            options={[\n              { value: 'body', label: 'Body', icon: dirtyDot(bodyDirty) },\n              { value: 'headings', label: 'Headings', icon: dirtyDot(headingsDirty) },\n            ]}\n          />\n\n          {typeTab === 'body' ? (\n            <Stack gap={10}>\n              <FormField label=\"Typeface\" labelPosition=\"side\">\n                <Select\n                  value={fontFamily}\n                  onChange={(e) => setBrand({ fontFamily: e.target.value || undefined })}\n                  aria-label=\"Body typeface\"\n                  style={{ width: '100%' }}\n                >\n                  <option value=\"\" disabled>Inter (default)</option>\n                  {FONT_OPTIONS.slice(1).map((f) => (\n                    <option key={f.value} value={f.value}>{f.label}</option>\n                  ))}\n                </Select>\n              </FormField>\n\n              <FormField\n                label=\"Text size\"\n                labelPosition=\"side\"\n                hint=\"Scales every text size in the library, headings included.\"\n              >\n                <Select\n                  value={brand.typeScale ?? ''}\n                  onChange={(e) => setBrand({ typeScale: e.target.value || undefined })}\n                  aria-label=\"Base text size\"\n                  style={{ width: '100%' }}\n                >\n                  {SCALE_OPTIONS.map((s) => (\n                    <option key={s.value} value={s.value} disabled={s.value === ''}>{s.label}</option>\n                  ))}\n                </Select>\n              </FormField>\n\n              {/* A closed set of five reads better as segments than as a popup:\n                  every option is visible and costs one click, not two. */}\n              <FormField\n                label=\"Line height\"\n                labelPosition=\"side\"\n                hint=\"Applies to multi-line body copy, not compact chrome.\"\n              >\n                {/* `alignSelf` rather than a wrapper: FormField's control column\n                    is a flex COLUMN whose default stretch would blow this\n                    inline-flex track out to full width — but a wrapper would\n                    also take FormField's injected `aria-describedby` instead of\n                    the control, leaving the hint unannounced. */}\n                <ButtonGroup\n                  style={{ alignSelf: 'start' }}\n                  value={brand.bodyLineHeight ?? ''}\n                  onChange={(v) => setBrand({ bodyLineHeight: v || undefined })}\n                  aria-label=\"Body line height\"\n                  options={LINE_HEIGHT_OPTIONS}\n                />\n              </FormField>\n            </Stack>\n          ) : (\n            <Stack gap={10}>\n              <FormField label=\"Typeface\" labelPosition=\"side\">\n                <Select\n                  value={headingFontFamily}\n                  onChange={(e) => setBrand({ headingFontFamily: e.target.value || undefined })}\n                  aria-label=\"Heading typeface\"\n                  style={{ width: '100%' }}\n                >\n                  <option value=\"\" disabled>Same as body</option>\n                  {/* All ten, including Inter — heading-Inter over a different\n                      body face is a real choice, so it isn't labelled\n                      \"(default)\" the way the body Select's first option is. */}\n                  {FONT_OPTIONS.map((f) => (\n                    <option key={f.value} value={f.value}>\n                      {f.value === 'Inter' ? 'Inter' : f.label}\n                    </option>\n                  ))}\n                </Select>\n              </FormField>\n\n              <FormField\n                label=\"Weight\"\n                labelPosition=\"side\"\n                hint=\"Default keeps each component's own weight.\"\n              >\n                <ButtonGroup\n                  style={{ alignSelf: 'start' }}\n                  value={headingFontWeight}\n                  onChange={(v) => setBrand({ headingFontWeight: v || undefined })}\n                  aria-label=\"Heading weight\"\n                  options={WEIGHT_OPTIONS}\n                />\n              </FormField>\n\n              <Disclosure\n                id=\"uxm-typography-levels\"\n                open={levelsOpen}\n                onOpenChange={setLevelsOpen}\n                label=\"Fine-tune levels\"\n              />\n              {levelsOpen && (\n                <Stack id=\"uxm-typography-levels-panel\" gap={10}>\n                  <p style={{ margin: 0, fontSize: 'calc(12px * var(--type-scale, 1))', color: 'var(--color-text-muted)', lineHeight: 'var(--type-body-line-height, 1.5)' }}>\n                    Each level inherits the settings above until you change it here.\n                    Display covers metric values and error codes.\n                  </p>\n                  {/* Selects (not segments) in here: three controls share one\n                      row, so the compact form is the one that fits. */}\n                  {ROLES.map((r) => (\n                    <FormField key={r.key} label={r.label} labelPosition=\"side\">\n                      {/* Grid, not Cluster: `Select` forwards `style` to its inner\n                          combobox, not to the `.uxm-listbox` wrapper a flex row\n                          would lay out — so flex sizing never reaches the flex\n                          child and the controls stack. Grid sizes the wrappers.\n                          The grid is FormField's single child, so the injected id\n                          lands here, not on a focusable control — role=\"group\" +\n                          aria-label make that a real labelled group instead of a\n                          dangling association (each Select keeps its own name;\n                          this FormField deliberately has no `hint`, which would\n                          be unannounced on a composite — see FormField's README). */}\n                      <ResponsiveGrid min=\"112px\" gap={6} role=\"group\" aria-label={r.label}>\n                        <Select\n                          value={(brand[r.familyKey] as string | undefined) ?? ''}\n                          onChange={(e) => setBrand({ [r.familyKey]: e.target.value || undefined })}\n                          aria-label={`${r.short} typeface`}\n                          style={{ width: '100%' }}\n                        >\n                          <option value=\"\" disabled>Inherit typeface</option>\n                          {FONT_OPTIONS.map((f) => (\n                            <option key={f.value} value={f.value}>\n                              {f.value === 'Inter' ? 'Inter' : f.label}\n                            </option>\n                          ))}\n                        </Select>\n                        <Select\n                          value={(brand[r.weightKey] as string | undefined) ?? ''}\n                          onChange={(e) => setBrand({ [r.weightKey]: e.target.value || undefined })}\n                          aria-label={`${r.short} weight`}\n                          style={{ width: '100%' }}\n                        >\n                          <option value=\"\" disabled>Weight</option>\n                          <option value=\"500\">500</option>\n                          <option value=\"600\">600</option>\n                          <option value=\"700\">700</option>\n                        </Select>\n                        <Select\n                          value={(brand[r.scaleKey] as string | undefined) ?? ''}\n                          onChange={(e) => setBrand({ [r.scaleKey]: e.target.value || undefined })}\n                          aria-label={`${r.short} size`}\n                          style={{ width: '100%' }}\n                        >\n                          {SCALE_OPTIONS.map((s) => (\n                            <option key={s.value} value={s.value} disabled={s.value === ''}>\n                              {s.value === '' ? 'Size' : s.label.replace(/ —.*$/, '')}\n                            </option>\n                          ))}\n                        </Select>\n                      </ResponsiveGrid>\n                    </FormField>\n                  ))}\n                </Stack>\n              )}\n            </Stack>\n          )}\n\n          {/* Specimen mirrors the real cascade: each line resolves its own role\n              first, then the heading umbrella, then the body face. */}\n          {/* Surface, not the default card white: the specimen is a sample of\n              the app's own body text, so it should sit on the app's surface. */}\n          <Card padding={16} style={{ '--uxm-card-bg': 'var(--color-surface)' } as CSSProperties}>\n            <Stack gap={0}>\n              {ROLES.map((r) => (\n                <p\n                  key={r.key}\n                  style={{\n                    margin: r.key === 'display' ? 0 : '10px 0 0',\n                    fontFamily: specimenStack(brand[r.familyKey] as string | undefined),\n                    fontSize: specimenSize(r.basePx, brand[r.scaleKey] as string | undefined, brand.typeScale),\n                    fontWeight: Number(\n                      (brand[r.weightKey] as string | undefined) || headingFontWeight || r.baseWeight,\n                    ),\n                  }}\n                >\n                  {r.sample}\n                </p>\n              ))}\n              <p\n                style={{\n                  margin: '12px 0 0',\n                  fontFamily: FONT_OPTIONS.find((f) => f.value === fontFamily)?.stack ?? 'inherit',\n                  fontSize: specimenSize(14, undefined, brand.typeScale),\n                  lineHeight: brand.bodyLineHeight ? Number(brand.bodyLineHeight) : 1.5,\n                }}\n              >\n                Body copy sets the baseline everything else is measured against. The quick brown\n                fox jumps over the lazy dog.\n              </p>\n            </Stack>\n          </Card>\n        </Stack>\n      </Group>\n\n      <Group\n        title=\"Color\"\n        description=\"Palette overrides that cascade across Modo. Changes apply live and persist on Publish.\"\n      >\n        <ThemeTokensEditor shell={shell} />\n      </Group>\n    </Stack>\n  );\n}\n\nfunction Group({\n  title, description, children,\n}: {\n  title: string; description?: string; children: React.ReactNode;\n}) {\n  return (\n    <Card\n      padding={20}\n      style={{\n        // The panel's own card is a touch rounder than the atom's 4px default.\n        '--uxm-card-radius': '10px',\n        // SectionHeader's subtitle defaults to 10px muted — right for the terse\n        // metadata it was built for (\"Active value: 600\"), too small for the\n        // full sentences these groups carry. Tuned through the atom's own vars\n        // rather than by hand-rolling the header again.\n        '--uxm-section-header-subtitle-size': '13px',\n        '--uxm-section-header-subtitle-color': 'var(--color-text)',\n        // These are the panel's top-level section headings, not incidental\n        // labels in a dense properties list — the atom's `--color-text-subtle`\n        // default reads as too faint at that job.\n        '--uxm-section-header-title-color': 'var(--color-text-muted)',\n      } as CSSProperties}\n    >\n      <Stack gap={20}>\n        {/* level=3: these sit under the shell's \"Brand Settings\" <h2>, and the\n            atom's default <h4> would skip a level — leaving a screen-reader\n            user unable to tell how the sections nest. */}\n        <SectionHeader level={3} subtitle={description}>{title}</SectionHeader>\n        {children}\n      </Stack>\n    </Card>\n  );\n}\n\nconst GROUP_LABELS: Record<ThemeToken['group'], string> = {\n  surfaces: 'Surfaces',\n  text: 'Text',\n  borders: 'Borders',\n  accent: 'Accent',\n  highlights: 'Highlights',\n  categories: 'Categories',\n  semantic: 'Semantic',\n};\n\nconst GROUP_ORDER: ThemeToken['group'][] = [\n  'surfaces', 'text', 'borders', 'accent', 'highlights', 'categories', 'semantic',\n];\n\nfunction groupTokens(): { group: ThemeToken['group']; label: string; tokens: ThemeToken[] }[] {\n  const by: Record<string, ThemeToken[]> = {};\n  for (const t of themeTokens) (by[t.group] ??= []).push(t);\n  return GROUP_ORDER\n    .filter((g) => by[g])\n    .map((g) => ({ group: g, label: GROUP_LABELS[g], tokens: by[g] }));\n}\n\nfunction ThemeTokensEditor({ shell }: { shell: PreviewShellContext }) {\n  const { theme, setTheme, brand, setBrand } = shell;\n  const grouped = groupTokens();\n  const overrides = brand.tokens?.[theme] ?? {};\n  // When non-null, the recalc modal is open; holds the just-changed accent token\n  // (its cssVar + new hex) to use as the base for re-tinting the rest of the group.\n  const [pendingAccent, setPendingAccent] = useState<{ cssVar: string; hex: string } | null>(null);\n\n  const setOverride = (cssVar: string, hex: string | undefined) => {\n    const next = { ...(brand.tokens?.[theme] ?? {}) };\n    if (hex === undefined) delete next[cssVar];\n    else next[cssVar] = hex;\n    setBrand({\n      tokens: {\n        ...brand.tokens,\n        [theme]: Object.keys(next).length ? next : undefined,\n      },\n    });\n  };\n\n  // Re-tint the accent ramp to the base's hue across BOTH themes, so the brand\n  // hue stays consistent in light and dark. Each derived shade is rebuilt from\n  // its DEFAULT colour (its designed saturation + lightness step) re-tinted to\n  // the base hue — NOT from its current value. This keeps the result a clean\n  // light→dark ramp every time, regardless of any prior overrides, so changing\n  // one accent always recomputes the others into a proper palette. The shade the\n  // user just edited (in the active theme) is left untouched; everything else in\n  // the group, in both themes, is recomputed in one batched update.\n  const recalcAccents = (baseVar: string, baseHex: string) => {\n    setPendingAccent(null);\n    setBrand({ tokens: retintAccentTokens(brand.tokens, baseVar, baseHex, theme) });\n  };\n\n  const resetAll = () => {\n    setBrand({\n      tokens: {\n        ...brand.tokens,\n        [theme]: undefined,\n      },\n    });\n  };\n\n  const hasOverrides = Object.keys(overrides).length > 0;\n\n  return (\n    <section>\n      {/* The reset sits beside the sentence naming its scope, not beside the\n          theme switcher. It clears only the theme being edited (`[theme]:\n          undefined`), so pairing it with the Light/Dark control implied it\n          acted on the switch — and put a destructive action inside what reads\n          as one segmented group. The label says which theme for the same\n          reason: \"Reset all\" suggested it cleared both. */}\n      <Cluster justify=\"between\" align=\"center\" gap={8} style={{ marginBottom: 14 }}>\n        <Cluster gap={10} align=\"center\">\n          <span style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>\n            Editing <strong style={{ color: 'var(--color-text)' }}>{theme}</strong> values\n          </span>\n          <InlineAction\n            onClick={resetAll}\n            disabled={!hasOverrides}\n            icon={<Icon glyph=\"refresh\" size={11} />}\n          >\n            Reset {theme} values\n          </InlineAction>\n        </Cluster>\n        <LightDarkTabs value={theme} onChange={setTheme} />\n      </Cluster>\n\n      <Stack gap={14}>\n        {grouped.map((g) => (\n          <div key={g.group}>\n            <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: 0.6, textTransform: 'uppercase', color: 'var(--color-text-muted)', marginBottom: 6 }}>\n              {g.label}\n            </div>\n            <Stack gap={4}>\n              {g.tokens.map((t) => (\n                <TokenRow\n                  key={t.cssVar}\n                  token={t}\n                  theme={theme}\n                  override={overrides[t.cssVar]}\n                  onChange={(hex) => setOverride(t.cssVar, hex)}\n                  onCommitColor={\n                    // Accent tokens prompt (via modal) to re-tint the ramp to the\n                    // new hue — but only once the pick is COMMITTED (popover close\n                    // or hex entry), never mid-drag while onChange streams.\n                    t.group === 'accent'\n                      ? (hex) => setPendingAccent({ cssVar: t.cssVar, hex })\n                      : undefined\n                  }\n                />\n              ))}\n            </Stack>\n          </div>\n        ))}\n      </Stack>\n\n      <Dialog\n        open={pendingAccent !== null}\n        onOpenChange={(open) => { if (!open) setPendingAccent(null); }}\n      >\n        <Modal size=\"sm\" onClose={() => setPendingAccent(null)}>\n          <Modal.Header>Recalculate accent palette?</Modal.Header>\n          <Modal.Body>\n            <p style={{ margin: 0, fontSize: 13, color: 'var(--color-text)', lineHeight: 1.5 }}>\n              You changed{' '}\n              <strong>\n                {themeTokens.find((t) => t.cssVar === pendingAccent?.cssVar)?.name ?? 'an accent color'}\n              </strong>\n. Re-tint the rest of the accent ramp — in both light and dark — to its hue?\n              Each shade keeps its own lightness and saturation; only the hue follows\n              the color you just set.\n            </p>\n          </Modal.Body>\n          <Modal.Footer>\n            <ButtonTertiary onClick={() => setPendingAccent(null)}>Keep as is</ButtonTertiary>\n            <ButtonPrimary onClick={() => { if (pendingAccent) recalcAccents(pendingAccent.cssVar, pendingAccent.hex); }}>\n              Recalculate\n            </ButtonPrimary>\n          </Modal.Footer>\n        </Modal>\n      </Dialog>\n    </section>\n  );\n}\n\nfunction TokenRow({\n  token, theme, override, onChange, onCommitColor,\n}: {\n  token: ThemeToken;\n  theme: 'light' | 'dark';\n  override: string | undefined;\n  /** Live update — streams during a drag in the picker. */\n  onChange: (hex: string | undefined) => void;\n  /** Fires once the pick is committed (popover close or hex entry), not mid-drag. */\n  onCommitColor?: (hex: string) => void;\n}) {\n  const defaultHex = theme === 'dark' ? token.darkHex : token.hex;\n  const effective = (override ?? defaultHex).toUpperCase();\n  const isOverridden = override !== undefined;\n  const [draft, setDraft] = useState<string | null>(null);\n  const shown = draft ?? effective;\n  // Whether the color changed during the current popover session — so opening\n  // and closing an accent swatch without editing doesn't trigger the recalc\n  // prompt. `latestHex` holds the freshest picked value so a commit-then-close\n  // in the same tick (Enter in the picker field) prompts with the right color.\n  const changedWhileOpen = useRef(false);\n  const latestHex = useRef(effective);\n\n  const commit = (raw: string) => {\n    const v = raw.trim();\n    if (isValidHex(v)) {\n      const hex = v.toUpperCase();\n      onChange(hex);\n      onCommitColor?.(hex);\n    }\n    setDraft(null);\n  };\n\n  return (\n    <div\n      style={{\n        display: 'grid',\n        gridTemplateColumns: '20px 1fr auto auto 18px',\n        alignItems: 'center',\n        gap: 8,\n        padding: '4px 6px',\n        borderRadius: 4,\n        fontSize: 12,\n      }}\n    >\n      <ColorInputPopover\n        value={effective}\n        onChange={(c) => {\n          const hex = c.toUpperCase();\n          changedWhileOpen.current = true;\n          latestHex.current = hex;\n          onChange(hex);\n        }}\n        onOpenChange={(open) => {\n          if (open) changedWhileOpen.current = false;\n          else if (changedWhileOpen.current) {\n            changedWhileOpen.current = false;\n            onCommitColor?.(latestHex.current);\n          }\n        }}\n        outputFormat=\"hex\"\n        alpha={false}\n        triggerLabel={`Pick colour for ${token.name}`}\n        title=\"Pick a color\"\n        style={{\n          '--uxm-color-input-trigger-size': '20px',\n          '--uxm-color-input-border-radius': '4px',\n        } as React.CSSProperties}\n      />\n      <span style={{ color: 'var(--color-text)', fontWeight: isOverridden ? 600 : 400, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n        {token.name}\n        <span style={{ marginLeft: 6, color: 'var(--color-text-muted)', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: 11 }}>\n          {token.cssVar}\n        </span>\n      </span>\n      {/* Sits BEFORE the field, not after: it is `visibility: hidden` when the\n          token is at its default, and hidden still reserves its column — after\n          the field that put 72px of dead space between the value and the reset.\n          It cannot simply collapse: every row is its own grid, so an overridden\n          row would size the column differently and the reset icons would go\n          ragged down the list. Reading default-then-current is natural anyway. */}\n      <span\n        style={{\n          fontSize: 10,\n          color: 'var(--color-text-muted)',\n          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',\n          minWidth: 56,\n          textAlign: 'right',\n          visibility: isOverridden ? 'visible' : 'hidden',\n        }}\n        title={`Default: ${defaultHex}`}\n      >\n        {defaultHex.toUpperCase()}\n      </span>\n      {/* Sized down through the atom's own vars rather than restyled: this row\n          repeats 31 times, so the default 14px/10px field would add ~400px to\n          the list. `clearable={false}` because a ✕ inside an 84px hex field is\n          noise — resetting is the ↺ at the end of the row. */}\n      <TextInput\n        value={shown}\n        onChange={(e) => setDraft(e.target.value)}\n        onBlur={(e) => commit(e.target.value)}\n        onKeyDown={(e) => { if (e.key === 'Enter') (e.target as HTMLInputElement).blur(); }}\n        spellCheck={false}\n        clearable={false}\n        aria-label={`${token.name} hex value`}\n        style={{\n          width: 84,\n          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',\n          textTransform: 'uppercase',\n          '--uxm-input-text-font-size': '11px',\n          '--uxm-input-text-padding-x': '6px',\n          '--uxm-input-text-padding-y': '3px',\n          '--uxm-input-text-border-radius': '4px',\n          '--uxm-input-text-bg': 'var(--color-surface)',\n        } as CSSProperties}\n      />\n      <IconButton\n        onClick={() => onChange(undefined)}\n        disabled={!isOverridden}\n        title=\"Reset to default\"\n        aria-label={`Reset ${token.name}`}\n        style={{\n          '--uxm-icon-button-size': '18px',\n          '--uxm-icon-button-radius': '4px',\n          opacity: isOverridden ? 1 : 0.25,\n        } as CSSProperties}\n      >\n        <Icon glyph=\"refresh\" size={12} />\n      </IconButton>\n    </div>\n  );\n}\n\nfunction Preview({ box, children, dim }: { box: CSSProperties; children?: React.ReactNode; dim?: boolean }) {\n  return (\n    <div style={{\n      // Stretch, not a fixed height: the frame matches whatever the field\n      // beside it measures, at any type scale.\n      alignSelf: 'stretch',\n      ...box,\n      display: 'flex', alignItems: 'center', justifyContent: 'center',\n      border: `1px solid var(--color-preview-border-${dim ? 'dark' : 'light'})`,\n      borderRadius: 6,\n      backgroundColor: `var(--color-preview-bg-${dim ? 'dark' : 'light'})`,\n      flexShrink: 0,\n      overflow: 'hidden',\n    }}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Image that hides itself when its source fails to load — but tracks the\n * failure in React state rather than imperatively setting `display:none`\n * (which never resets, so a transiently-404ing src stayed hidden forever even\n * after a valid one arrived). Callers pass `key={src}` so a new source\n * remounts it clean, letting a valid URL recover after a bad one.\n */\nfunction PreviewImg({ src, alt, style }: { src: string; alt: string; style?: React.CSSProperties }) {\n  const [errored, setErrored] = useState(false);\n  if (errored) return null;\n  return <img src={src} alt={alt} style={style} onError={() => setErrored(true)} />;\n}\n\nfunction LightDarkTabs({ value, onChange }: { value: 'light' | 'dark'; onChange: (v: 'light' | 'dark') => void }) {\n  return (\n    <Tabs\n      value={value}\n      onChange={(v) => onChange(v as 'light' | 'dark')}\n      options={[\n        { value: 'light', label: 'Light' },\n        { value: 'dark', label: 'Dark' },\n      ]}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/previews/composite/brand-settings-preview.d.ts

@@ -0,0 +1,8 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare const FONT_OPTIONS: {
+    label: string;
+    value: string;
+    stack: string;
+}[];
+export declare function BrandSettingsPreview({ shell }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=brand-settings-preview.d.ts.map

package/dist/previews/composite/brand-settings-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-settings-preview.d.ts","sourceRoot":"","sources":["../../../src/previews/composite/brand-settings-preview.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAuB,MAAM,kBAAkB,CAAC;AAQ1E,eAAO,MAAM,YAAY,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAWzE,CAAC;AAwTF,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,2CAoU3D"}