@viax.io/uxm 4.38.0 → 4.40.0

package/dist/studio/shell/properties-panel/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/studio/shell/properties-panel/index.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Icon } from '@/ui';\nimport { IconButton } from '@/ui';\nimport { InlineAction } from '@/ui';\nimport { SectionHeader } from '@/ui';\nimport { Tabs } from '@/ui';\n\nimport { CodeEditor } from '../../editors/code-editor';\nimport { SelectInput } from '../../editors/select-input';\nimport { useUxm } from '../../lib/context';\nimport { getComponentDef, registry } from '../../lib/registry';\nimport { WcagPanel } from '../wcag-panel';\n\nimport { DevTab } from './dev-tab';\nimport { PropertyRow, renderEditor } from './property-row';\n\nimport type { ComponentDef } from '../../lib/types';\n\ntype Tab = 'visual' | 'dev' | 'code';\n\nexport function PropertiesPanel({\n  orientation = 'horizontal',\n  onToggleOrientation,\n}: {\n  /**\n   * Accepted for API compatibility with host portals that mount the panel\n   * embedded. No longer switches the surface color — the properties panel\n   * is always white (`bg-card`) so its text keeps full contrast in both the\n   * standalone studio and an embedded portal.\n   */\n  embed?: boolean;\n  orientation?: 'horizontal' | 'vertical';\n  onToggleOrientation?: () => void;\n}) {\n  const [tab, setTab] = useState<Tab>('visual');\n  const {\n    selectedId,\n    getOverrides,\n    setOverride,\n    resetOverride,\n    resetOverrides,\n    getCurrentVariants,\n    setVariant,\n    eventLog,\n    clearEvents,\n  } = useUxm();\n  const def = getComponentDef(selectedId);\n  const overrides = getOverrides(selectedId);\n  const currentVariants = getCurrentVariants();\n\n  // Keys that were just cascaded — shows a brief \"Matched ✓\" state, then hides the link.\n  // A change to the same key (value edit) removes it so the link reappears.\n  const [syncedKeys, setSyncedKeys] = useState<Set<string>>(new Set());\n  const [justMatchedKey, setJustMatchedKey] = useState<string | null>(null);\n  const justMatchedTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Reset sync state when switching components.\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional reset of cascade-sync UI state on component switch\n    setSyncedKeys(new Set());\n    setJustMatchedKey(null);\n    if (justMatchedTimer.current) {\n      clearTimeout(justMatchedTimer.current);\n      justMatchedTimer.current = null;\n    }\n  }, [selectedId]);\n\n  useEffect(() => () => {\n    if (justMatchedTimer.current) clearTimeout(justMatchedTimer.current);\n  }, []);\n\n  const peers = useMemo<ComponentDef[]>(\n    () => def ? registry.filter((c) => c.category === def.category && c.id !== def.id) : [],\n    [def],\n  );\n\n  const peersByKey = useMemo(() => {\n    const map = new Map<string, ComponentDef[]>();\n    if (!def) return map;\n    for (const prop of def.styleProperties) {\n      const matches = peers.filter((p) => p.styleProperties.some((pp) => pp.key === prop.key));\n      if (matches.length) map.set(prop.key, matches);\n    }\n    return map;\n  }, [def, peers]);\n\n  if (!def) return null;\n\n  // Variants live in ephemeral session state; styleProperty edits live in\n  // persisted overrides. `resolve` checks both so panel UI reads the right\n  // thing regardless of which kind of key it's looking at.\n  const resolve = (key: string, fallback: string | number | boolean) => {\n    const isVariantKey = def.layoutVariants.some((v) => v.key === key);\n    if (isVariantKey) return currentVariants[key] ?? fallback;\n    return overrides[key] ?? fallback;\n  };\n\n  const handleChange = (key: string) => (value: string | number | boolean) => {\n    // Branch by key kind. Variants are UI selection — never written to\n    // overrides. Style edits are persisted. Auto-clear an override when\n    // value === default so the \"Reset\" affordance reflects the real\n    // customization state (manually setting a knob back to its default\n    // doesn't leave a stale entry in overrides).\n    const variant = def.layoutVariants.find((v) => v.key === key);\n    if (variant) {\n      setVariant(key, value);\n      return;\n    }\n    const prop = def.styleProperties.find((p) => p.key === key);\n    if (prop !== undefined && value === prop.defaultValue) {\n      resetOverride(selectedId, key);\n    } else {\n      setOverride(selectedId, key, value);\n    }\n    // Any edit diverges this key from its peers — allow re-cascading.\n    setSyncedKeys((prev) => {\n      if (!prev.has(key)) return prev;\n      const next = new Set(prev);\n      next.delete(key);\n      return next;\n    });\n  };\n\n  // Variants now live in ephemeral session state and never reach overrides,\n  // so any key here is a real style edit — no filtering needed.\n  const hasOverrides = Object.keys(overrides).length > 0;\n\n  const SECTION_LABELS: Record<string, string> = {\n    colors: 'Colors',\n    states: 'States',\n    style: 'Style',\n    frame: 'Frame',\n    header: 'Header',\n    weekday: 'Weekday Row',\n    'shared-states': 'Shared States',\n    'day-cell': 'Date Cell',\n    'month-year-cells': 'Month & Year Cells',\n    text: 'Text',\n    uncheckedColors: 'Unchecked',\n    checkedColors: 'Checked',\n    offColors: 'Off',\n    onColors: 'On',\n    unselectedColors: 'Unselected',\n    selectedColors: 'Selected',\n    fieldColors: 'Field Colors',\n    dropAreaColors: 'Drop Area',\n    dropOutline: 'Drop Outline',\n    triggerColors: 'Trigger Colors',\n    popover: 'Popover',\n    option: 'Option',\n    focusState: 'Focus',\n    disabledState: 'Disabled',\n    errorState: 'Error Message',\n    rangeOptions: 'Range Options',\n    dragState: 'Drag Over',\n    fileList: 'File List',\n    fileListProgress: 'File List Progress',\n    fileListStatus: 'File List Status',\n    headerSlot: 'Header Slot',\n    footerSlot: 'Footer Slot',\n  };\n  const allShowWhenKeys = Array.from(\n    new Set(def.styleProperties.flatMap((p) => p.showWhen ? Object.keys(p.showWhen) : [])),\n  );\n  const labelize = (vKey: string) =>\n    def.layoutVariants.find((v) => v.key === vKey)?.label ?? vKey;\n  const sectionScopeKeys = (props: ComponentDef['styleProperties']) =>\n    Array.from(new Set(props.flatMap((p) => p.showWhen ? Object.keys(p.showWhen) : [])));\n  const sectionTitleFor = (slug: string) =>\n    SECTION_LABELS[slug] ?? slug.charAt(0).toUpperCase() + slug.slice(1);\n  const sectionSubtitleFor = (props: ComponentDef['styleProperties']):\n    | { scope: string; current: string | null }\n    | null => {\n    const keys = sectionScopeKeys(props);\n    if (keys.length > 0) {\n      const scope = `Per ${keys.map(labelize).join(' × ')}`;\n      const current = keys.map((vKey) => {\n        const variant = def.layoutVariants.find((v) => v.key === vKey);\n        if (!variant) return null;\n        const v = resolve(vKey, variant.defaultValue) as string;\n        return variant.options.find((o) => o.value === v)?.label ?? v;\n      }).filter(Boolean).join(' / ');\n      return { scope, current: current || null };\n    }\n    if (allShowWhenKeys.length > 0) {\n      const variantNames = allShowWhenKeys\n        .map((k) => labelize(k).toLowerCase() + 's')\n        .join(' / ');\n      return { scope: `Shared across all ${variantNames}`, current: null };\n    }\n    return null;\n  };\n  const sectionBarCategoryFor = (props: ComponentDef['styleProperties']): 'full' | 'partial' | 'shared' => {\n    const keys = sectionScopeKeys(props);\n    if (keys.length === 0) return 'shared';\n    if (keys.length === allShowWhenKeys.length) return 'full';\n    return 'partial';\n  };\n  const BAR_COLOR: Record<'full' | 'partial', string> = {\n    full: 'var(--color-highlight-cool)',\n    partial: 'var(--color-highlight-warm)',\n  };\n\n  // Shared variant-scope filter: an entry with `showWhen` only renders\n  // when the current value of every named variant matches. Used by both\n  // style properties (existing) and event specs (Events tab).\n  const matchesShowWhen = (showWhen?: Record<string, string | string[]>) => {\n    if (!showWhen) return true;\n    for (const [vKey, vVal] of Object.entries(showWhen)) {\n      const current = resolve(\n        vKey,\n        def.layoutVariants.find((v) => v.key === vKey)?.defaultValue ?? '',\n      ) as string;\n      // A string[] means \"match any of\" — the same rule the per-option\n      // matcher below uses. Without it a multi-value clause has to be\n      // spelled as one string, which is compared verbatim and never matches\n      // (that silently hid four editable-cell knobs).\n      const allowed = Array.isArray(vVal) ? vVal : [vVal];\n      if (!allowed.includes(current)) return false;\n    }\n    return true;\n  };\n\n  const visibleStyleProps = def.styleProperties.filter((prop) =>\n    matchesShowWhen(prop.showWhen),\n  );\n  const visibleEvents = (def.events ?? []).filter((ev) =>\n    matchesShowWhen(ev.showWhen),\n  );\n  // Variants themselves can be scoped via `showWhen` — e.g. the State\n  // picker on list-item is irrelevant when `trailing` is meta / none,\n  // so the variant disappears entirely rather than sitting as a no-op.\n  const visibleVariants = def.layoutVariants.filter((v) =>\n    matchesShowWhen(v.showWhen),\n  );\n  const sectionsMap = new Map<string, ComponentDef['styleProperties']>();\n  for (const prop of visibleStyleProps) {\n    const slug = prop.section ?? 'style';\n    if (!sectionsMap.has(slug)) sectionsMap.set(slug, []);\n    sectionsMap.get(slug)!.push(prop);\n  }\n  const sectionGroups = Array.from(sectionsMap.entries());\n\n  const cascadeKey = (key: string, value: string | number | boolean) => {\n    const targets = peersByKey.get(key) ?? [];\n    if (targets.length === 0) return;\n    for (const p of targets) setOverride(p.id, key, value);\n    setSyncedKeys((prev) => new Set(prev).add(key));\n    setJustMatchedKey(key);\n    if (justMatchedTimer.current) clearTimeout(justMatchedTimer.current);\n    justMatchedTimer.current = setTimeout(() => setJustMatchedKey(null), 1400);\n  };\n\n  return (\n    <aside className={`flex flex-col overflow-hidden w-full h-full ${\n      orientation === 'horizontal' ? 'border-l' : 'border-t'\n    } border-border bg-card`}>\n      {/* Header with tabs */}\n      <div className=\"sticky top-0 z-10 border-b border-border px-5 py-3 bg-card\">\n        {/* Panel-level header — uses the same SectionHeader atom as the\n            VARIANT / COLORS / STYLE per-section headers below, so the\n            entire panel's section-title chrome flows through one\n            theming surface (`--uxm-section-header-*`). The orientation\n            toggle and \"Reset all\" go into the trailing slot. The 1px\n            font-size shift from `text-xs` (12px) to SectionHeader's\n            default 11px is intentional — keeps the panel header\n            consistent with section headers. */}\n        <SectionHeader\n          trailing={\n            <div className=\"flex items-center gap-3\">\n              {onToggleOrientation && (\n                <IconButton\n                  onClick={onToggleOrientation}\n                  aria-label={\n                    orientation === 'horizontal'\n                      ? 'Move panel to bottom'\n                      : 'Move panel to right'\n                  }\n                  title={\n                    orientation === 'horizontal'\n                      ? 'Dock to bottom'\n                      : 'Dock to right'\n                  }\n                  // 20×20 footprint matches the previous `h-5 w-5` chrome.\n                  style={{ ['--uxm-icon-button-size' as string]: '20px' }}\n                >\n                  <Icon\n                    glyph={orientation === 'horizontal' ? 'dock-bottom' : 'dock-right'}\n                    size={14}\n                  />\n                </IconButton>\n              )}\n              {hasOverrides && (\n                <InlineAction onClick={() => resetOverrides(selectedId)}>\n                  Reset all\n                </InlineAction>\n              )}\n            </div>\n          }\n        >\n          Properties\n        </SectionHeader>\n\n\n        {/* Tab bar — uses the real <Tabs> atom so editor saves on the\n            Tabs registry (active-bg, padding-x/y, font-size, etc.) flow\n            into the properties pane's own toggle. The previous hand-rolled\n            <button> elements had `className=\"uxm-tabs\"` on the wrapper but\n            no `.uxm-tabs__tab` on the inner buttons, so every inner-element\n            var (which is what most Tabs knobs control) silently no-oped\n            here. `w-full` keeps the strip stretching across the panel —\n            the atom is `display: inline-flex` by default. */}\n        <Tabs\n          className=\"w-full\"\n          value={tab}\n          onChange={(v) => setTab(v as Tab)}\n          options={[\n            {\n              value: 'visual',\n              label: 'Visual',\n              icon: <Icon glyph=\"list\" size={12} />,\n            },\n            {\n              value: 'dev',\n              label: 'Dev',\n              icon: <Icon glyph=\"bolt\" size={12} />,\n            },\n            {\n              value: 'code',\n              label: 'CSS',\n              icon: <Icon glyph=\"code\" size={12} />,\n            },\n          ]}\n        />\n      </div>\n\n      {/* Tab content */}\n      {tab === 'visual' ? (\n        <div className=\"flex-1 overflow-y-auto px-5 py-4\">\n          {/* Bottom-dock (`orientation === \"vertical\"`) gives the pane the\n              full canvas width — far more than the ~320px right-dock. We\n              switch to an auto-fit grid so each section (Variants, Colors,\n              Style, WCAG) becomes its own column, side-by-side, wrapping\n              gracefully on narrow widths. The `mb-6` between sections is\n              dropped in grid mode because grid `gap-y-4` handles spacing\n              instead — leaving both would double-space the wrapped rows. */}\n          <div\n            className={\n              orientation === 'vertical'\n                ? 'grid items-start gap-x-6 gap-y-4 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]'\n                : ''\n            }\n          >\n          {/* Variant selectors — render before Styles so mode/state/type selectors anchor the form. */}\n          {visibleVariants.length > 0 && (\n            <div className={orientation === 'vertical' ? 'min-w-0' : 'mb-6'}>\n              <SectionHeader>\n                {visibleVariants.length === 1 ? 'Variant' : 'Variants'}\n              </SectionHeader>\n              <div className=\"space-y-3\">\n                {visibleVariants.map((variant) => {\n                  const rawValue = resolve(variant.key, variant.defaultValue) as string;\n                  const visibleOptions = variant.options.filter((opt) => {\n                    if (!opt.showWhen) return true;\n                    for (const [vKey, vVal] of Object.entries(opt.showWhen)) {\n                      const current = resolve(\n                        vKey,\n                        def.layoutVariants.find((v) => v.key === vKey)?.defaultValue ?? '',\n                      ) as string;\n                      // A string[] means \"match any of\"; a string is exact.\n                      const allowed = Array.isArray(vVal) ? vVal : [vVal];\n                      if (!allowed.includes(current)) return false;\n                    }\n                    return true;\n                  });\n                  const valid = visibleOptions.some((o) => o.value === rawValue);\n                  const value = valid\n                    ? rawValue\n                    : visibleOptions.some((o) => o.value === variant.defaultValue)\n                      ? variant.defaultValue\n                      : visibleOptions[0]?.value ?? rawValue;\n                  if (!valid && value !== rawValue) {\n                    // Stale variant selection (showWhen filtered out the option).\n                    // Repair to a valid value via the variant channel, not overrides —\n                    // variants are ephemeral session state. Guarded on\n                    // `value !== rawValue` so an empty `visibleOptions` (no\n                    // fallback available) doesn't re-queue this microtask\n                    // forever — `value` would otherwise fall back to\n                    // `rawValue` itself and never settle.\n                    queueMicrotask(() => setVariant(variant.key, value));\n                  }\n                  return (\n                    <div key={variant.key} data-variant-key={variant.key}>\n                      <SelectInput\n                        label={variant.label}\n                        value={value}\n                        onChange={handleChange(variant.key)}\n                        options={visibleOptions}\n                      />\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          )}\n\n          {/* Style Properties — grouped by section */}\n          {sectionGroups.map(([slug, props]) => {\n            const overriddenInSection = props.filter((p) => p.key in overrides);\n            const hasSectionOverrides = overriddenInSection.length > 0;\n            return (\n            <div\n              key={slug}\n              className={`${orientation === 'vertical' ? 'min-w-0' : 'mb-6'} ${sectionBarCategoryFor(props) === 'shared' ? '' : 'border-l-2 pl-3 -ml-3'}`}\n              style={sectionBarCategoryFor(props) === 'shared' ? undefined : { borderColor: BAR_COLOR[sectionBarCategoryFor(props) as 'full' | 'partial'] }}\n            >\n              {(() => {\n                const sub = sectionSubtitleFor(props);\n                const subtitle = sub ? (\n                  <>\n                    <span>{sub.scope}</span>\n                    {sub.current && (\n                      <>\n                        <span style={{ color: 'var(--color-text-subtle)' }}>·</span>\n                        <span style={{ fontWeight: 600, color: 'var(--color-text-strong)' }}>\n                          {sub.current}\n                        </span>\n                      </>\n                    )}\n                  </>\n                ) : null;\n                return (\n                  <SectionHeader\n                    subtitle={subtitle}\n                    trailing={\n                      hasSectionOverrides && sectionGroups.length > 1 ? (\n                        <InlineAction\n                          onClick={() => {\n                            for (const p of overriddenInSection) resetOverride(selectedId, p.key);\n                          }}\n                          title={`Reset ${overriddenInSection.length} field${overriddenInSection.length === 1 ? '' : 's'} in this section to default`}\n                          icon={<Icon glyph=\"refresh\" strokeWidth={2.25} aria-hidden />}\n                        >\n                          Reset section\n                        </InlineAction>\n                      ) : undefined\n                    }\n                  >\n                    {sectionTitleFor(slug)}\n                  </SectionHeader>\n                );\n              })()}\n              <div className=\"space-y-3\">\n                {props.map((prop) => {\n                  const value = resolve(prop.key, prop.defaultValue);\n                  const onChange = handleChange(prop.key);\n                  const editor = renderEditor(prop.control, {\n                    label: prop.label,\n                    value,\n                    onChange,\n                    prop,\n                  });\n                  const peerCount = peersByKey.get(prop.key)?.length ?? 0;\n                  const isOverridden = prop.key in overrides;\n                  const isSynced = syncedKeys.has(prop.key);\n                  const isJustMatched = justMatchedKey === prop.key;\n                  return (\n                    <PropertyRow\n                      key={prop.key}\n                      cascadeCount={isOverridden ? peerCount : 0}\n                      onCascade={() => cascadeKey(prop.key, value)}\n                      category={def.category}\n                      propLabel={prop.label}\n                      synced={isSynced}\n                      justMatched={isJustMatched}\n                      isOverridden={isOverridden}\n                      onReset={() => resetOverride(selectedId, prop.key)}\n                    >\n                      {editor}\n                    </PropertyRow>\n                  );\n                })}\n              </div>\n            </div>\n            );\n          })}\n\n          {/* WCAG spans two grid columns when bottom-docked — its colour-pair\n              rows have enough horizontal content that a single 220px column\n              squashes them. `col-span-2` is a no-op outside the grid since\n              there's no grid context to span over. */}\n          <div className={orientation === 'vertical' ? 'min-w-0 col-span-2' : ''}>\n            <WcagPanel def={def} />\n          </div>\n          </div>\n        </div>\n      ) : tab === 'dev' ? (\n        <DevTab\n          def={def}\n          api={def.api}\n          events={visibleEvents}\n          eventLog={eventLog}\n          onClearLog={clearEvents}\n          orientation={orientation}\n          currentVariants={currentVariants}\n          overrides={overrides}\n        />\n      ) : (\n        <div className=\"flex-1 overflow-hidden p-3\">\n          <CodeEditor />\n        </div>\n      )}\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8QY;AA9QZ,mBAAqD;AAErD,gBAAqB;AACrB,IAAAA,aAA2B;AAC3B,IAAAA,aAA6B;AAC7B,IAAAA,aAA8B;AAC9B,IAAAA,aAAqB;AAErB,yBAA2B;AAC3B,0BAA4B;AAC5B,qBAAuB;AACvB,sBAA0C;AAC1C,wBAA0B;AAE1B,qBAAuB;AACvB,0BAA0C;AAMnC,SAAS,gBAAgB;AAAA,EAC9B,cAAc;AAAA,EACd;AACF,GAUG;AACD,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAc,QAAQ;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,uBAAO;AACX,QAAM,UAAM,iCAAgB,UAAU;AACtC,QAAM,YAAY,aAAa,UAAU;AACzC,QAAM,kBAAkB,mBAAmB;AAI3C,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAsB,oBAAI,IAAI,CAAC;AACnE,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAwB,IAAI;AACxE,QAAM,uBAAmB,qBAA6C,IAAI;AAG1E,8BAAU,MAAM;AAEd,kBAAc,oBAAI,IAAI,CAAC;AACvB,sBAAkB,IAAI;AACtB,QAAI,iBAAiB,SAAS;AAC5B,mBAAa,iBAAiB,OAAO;AACrC,uBAAiB,UAAU;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,8BAAU,MAAM,MAAM;AACpB,QAAI,iBAAiB,QAAS,cAAa,iBAAiB,OAAO;AAAA,EACrE,GAAG,CAAC,CAAC;AAEL,QAAM,YAAQ;AAAA,IACZ,MAAM,MAAM,yBAAS,OAAO,CAAC,MAAM,EAAE,aAAa,IAAI,YAAY,EAAE,OAAO,IAAI,EAAE,IAAI,CAAC;AAAA,IACtF,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,UAAM,MAAM,oBAAI,IAA4B;AAC5C,QAAI,CAAC,IAAK,QAAO;AACjB,eAAW,QAAQ,IAAI,iBAAiB;AACtC,YAAM,UAAU,MAAM,OAAO,CAAC,MAAM,EAAE,gBAAgB,KAAK,CAAC,OAAO,GAAG,QAAQ,KAAK,GAAG,CAAC;AACvF,UAAI,QAAQ,OAAQ,KAAI,IAAI,KAAK,KAAK,OAAO;AAAA,IAC/C;AACA,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,MAAI,CAAC,IAAK,QAAO;AAKjB,QAAM,UAAU,CAAC,KAAa,aAAwC;AACpE,UAAM,eAAe,IAAI,eAAe,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG;AACjE,QAAI,aAAc,QAAO,gBAAgB,GAAG,KAAK;AACjD,WAAO,UAAU,GAAG,KAAK;AAAA,EAC3B;AAEA,QAAM,eAAe,CAAC,QAAgB,CAAC,UAAqC;AAM1E,UAAM,UAAU,IAAI,eAAe,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG;AAC5D,QAAI,SAAS;AACX,iBAAW,KAAK,KAAK;AACrB;AAAA,IACF;AACA,UAAM,OAAO,IAAI,gBAAgB,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG;AAC1D,QAAI,SAAS,UAAa,UAAU,KAAK,cAAc;AACrD,oBAAc,YAAY,GAAG;AAAA,IAC/B,OAAO;AACL,kBAAY,YAAY,KAAK,KAAK;AAAA,IACpC;AAEA,kBAAc,CAAC,SAAS;AACtB,UAAI,CAAC,KAAK,IAAI,GAAG,EAAG,QAAO;AAC3B,YAAM,OAAO,IAAI,IAAI,IAAI;AACzB,WAAK,OAAO,GAAG;AACf,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAIA,QAAM,eAAe,OAAO,KAAK,SAAS,EAAE,SAAS;AAErD,QAAM,iBAAyC;AAAA,IAC7C,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,eAAe;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AACA,QAAM,kBAAkB,MAAM;AAAA,IAC5B,IAAI,IAAI,IAAI,gBAAgB,QAAQ,CAAC,MAAM,EAAE,WAAW,OAAO,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC;AAAA,EACvF;AACA,QAAM,WAAW,CAAC,SAChB,IAAI,eAAe,KAAK,CAAC,MAAM,EAAE,QAAQ,IAAI,GAAG,SAAS;AAC3D,QAAM,mBAAmB,CAAC,UACxB,MAAM,KAAK,IAAI,IAAI,MAAM,QAAQ,CAAC,MAAM,EAAE,WAAW,OAAO,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC,CAAC;AACrF,QAAM,kBAAkB,CAAC,SACvB,eAAe,IAAI,KAAK,KAAK,OAAO,CAAC,EAAE,YAAY,IAAI,KAAK,MAAM,CAAC;AACrE,QAAM,qBAAqB,CAAC,UAEhB;AACV,UAAM,OAAO,iBAAiB,KAAK;AACnC,QAAI,KAAK,SAAS,GAAG;AACnB,YAAM,QAAQ,OAAO,KAAK,IAAI,QAAQ,EAAE,KAAK,QAAK,CAAC;AACnD,YAAM,UAAU,KAAK,IAAI,CAAC,SAAS;AACjC,cAAM,UAAU,IAAI,eAAe,KAAK,CAACC,OAAMA,GAAE,QAAQ,IAAI;AAC7D,YAAI,CAAC,QAAS,QAAO;AACrB,cAAM,IAAI,QAAQ,MAAM,QAAQ,YAAY;AAC5C,eAAO,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC,GAAG,SAAS;AAAA,MAC9D,CAAC,EAAE,OAAO,OAAO,EAAE,KAAK,KAAK;AAC7B,aAAO,EAAE,OAAO,SAAS,WAAW,KAAK;AAAA,IAC3C;AACA,QAAI,gBAAgB,SAAS,GAAG;AAC9B,YAAM,eAAe,gBAClB,IAAI,CAAC,MAAM,SAAS,CAAC,EAAE,YAAY,IAAI,GAAG,EAC1C,KAAK,KAAK;AACb,aAAO,EAAE,OAAO,qBAAqB,YAAY,IAAI,SAAS,KAAK;AAAA,IACrE;AACA,WAAO;AAAA,EACT;AACA,QAAM,wBAAwB,CAAC,UAA0E;AACvG,UAAM,OAAO,iBAAiB,KAAK;AACnC,QAAI,KAAK,WAAW,EAAG,QAAO;AAC9B,QAAI,KAAK,WAAW,gBAAgB,OAAQ,QAAO;AACnD,WAAO;AAAA,EACT;AACA,QAAM,YAAgD;AAAA,IACpD,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAKA,QAAM,kBAAkB,CAAC,aAAiD;AACxE,QAAI,CAAC,SAAU,QAAO;AACtB,eAAW,CAAC,MAAM,IAAI,KAAK,OAAO,QAAQ,QAAQ,GAAG;AACnD,YAAM,UAAU;AAAA,QACd;AAAA,QACA,IAAI,eAAe,KAAK,CAAC,MAAM,EAAE,QAAQ,IAAI,GAAG,gBAAgB;AAAA,MAClE;AAKA,YAAM,UAAU,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AAClD,UAAI,CAAC,QAAQ,SAAS,OAAO,EAAG,QAAO;AAAA,IACzC;AACA,WAAO;AAAA,EACT;AAEA,QAAM,oBAAoB,IAAI,gBAAgB;AAAA,IAAO,CAAC,SACpD,gBAAgB,KAAK,QAAQ;AAAA,EAC/B;AACA,QAAM,iBAAiB,IAAI,UAAU,CAAC,GAAG;AAAA,IAAO,CAAC,OAC/C,gBAAgB,GAAG,QAAQ;AAAA,EAC7B;AAIA,QAAM,kBAAkB,IAAI,eAAe;AAAA,IAAO,CAAC,MACjD,gBAAgB,EAAE,QAAQ;AAAA,EAC5B;AACA,QAAM,cAAc,oBAAI,IAA6C;AACrE,aAAW,QAAQ,mBAAmB;AACpC,UAAM,OAAO,KAAK,WAAW;AAC7B,QAAI,CAAC,YAAY,IAAI,IAAI,EAAG,aAAY,IAAI,MAAM,CAAC,CAAC;AACpD,gBAAY,IAAI,IAAI,EAAG,KAAK,IAAI;AAAA,EAClC;AACA,QAAM,gBAAgB,MAAM,KAAK,YAAY,QAAQ,CAAC;AAEtD,QAAM,aAAa,CAAC,KAAa,UAAqC;AACpE,UAAM,UAAU,WAAW,IAAI,GAAG,KAAK,CAAC;AACxC,QAAI,QAAQ,WAAW,EAAG;AAC1B,eAAW,KAAK,QAAS,aAAY,EAAE,IAAI,KAAK,KAAK;AACrD,kBAAc,CAAC,SAAS,IAAI,IAAI,IAAI,EAAE,IAAI,GAAG,CAAC;AAC9C,sBAAkB,GAAG;AACrB,QAAI,iBAAiB,QAAS,cAAa,iBAAiB,OAAO;AACnE,qBAAiB,UAAU,WAAW,MAAM,kBAAkB,IAAI,GAAG,IAAI;AAAA,EAC3E;AAEA,SACE,6CAAC,WAAM,WAAW,+CAChB,gBAAgB,eAAe,aAAa,UAC9C,0BAEE;AAAA,iDAAC,SAAI,WAAU,8DASb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,UACE,6CAAC,SAAI,WAAU,2BACZ;AAAA,mCACC;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS;AAAA,gBACT,cACE,gBAAgB,eACZ,yBACA;AAAA,gBAEN,OACE,gBAAgB,eACZ,mBACA;AAAA,gBAGN,OAAO,EAAE,CAAC,wBAAkC,GAAG,OAAO;AAAA,gBAEtD;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO,gBAAgB,eAAe,gBAAgB;AAAA,oBACtD,MAAM;AAAA;AAAA,gBACR;AAAA;AAAA,YACF;AAAA,YAED,gBACC,4CAAC,2BAAa,SAAS,MAAM,eAAe,UAAU,GAAG,uBAEzD;AAAA,aAEJ;AAAA,UAEH;AAAA;AAAA,MAED;AAAA,MAWA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,OAAO,CAAQ;AAAA,UAChC,SAAS;AAAA,YACP;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM,4CAAC,kBAAK,OAAM,QAAO,MAAM,IAAI;AAAA,YACrC;AAAA,YACA;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM,4CAAC,kBAAK,OAAM,QAAO,MAAM,IAAI;AAAA,YACrC;AAAA,YACA;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM,4CAAC,kBAAK,OAAM,QAAO,MAAM,IAAI;AAAA,YACrC;AAAA,UACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,IAGC,QAAQ,WACP,4CAAC,SAAI,WAAU,oCAQb;AAAA,MAAC;AAAA;AAAA,QACC,WACE,gBAAgB,aACZ,gGACA;AAAA,QAIP;AAAA,0BAAgB,SAAS,KACxB,6CAAC,SAAI,WAAW,gBAAgB,aAAa,YAAY,QACvD;AAAA,wDAAC,4BACE,0BAAgB,WAAW,IAAI,YAAY,YAC9C;AAAA,YACA,4CAAC,SAAI,WAAU,aACZ,0BAAgB,IAAI,CAAC,YAAY;AAChC,oBAAM,WAAW,QAAQ,QAAQ,KAAK,QAAQ,YAAY;AAC1D,oBAAM,iBAAiB,QAAQ,QAAQ,OAAO,CAAC,QAAQ;AACrD,oBAAI,CAAC,IAAI,SAAU,QAAO;AAC1B,2BAAW,CAAC,MAAM,IAAI,KAAK,OAAO,QAAQ,IAAI,QAAQ,GAAG;AACvD,wBAAM,UAAU;AAAA,oBACd;AAAA,oBACA,IAAI,eAAe,KAAK,CAAC,MAAM,EAAE,QAAQ,IAAI,GAAG,gBAAgB;AAAA,kBAClE;AAEA,wBAAM,UAAU,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AAClD,sBAAI,CAAC,QAAQ,SAAS,OAAO,EAAG,QAAO;AAAA,gBACzC;AACA,uBAAO;AAAA,cACT,CAAC;AACD,oBAAM,QAAQ,eAAe,KAAK,CAAC,MAAM,EAAE,UAAU,QAAQ;AAC7D,oBAAM,QAAQ,QACV,WACA,eAAe,KAAK,CAAC,MAAM,EAAE,UAAU,QAAQ,YAAY,IACzD,QAAQ,eACR,eAAe,CAAC,GAAG,SAAS;AAClC,kBAAI,CAAC,SAAS,UAAU,UAAU;AAQhC,+BAAe,MAAM,WAAW,QAAQ,KAAK,KAAK,CAAC;AAAA,cACrD;AACA,qBACE,4CAAC,SAAsB,oBAAkB,QAAQ,KAC/C;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO,QAAQ;AAAA,kBACf;AAAA,kBACA,UAAU,aAAa,QAAQ,GAAG;AAAA,kBAClC,SAAS;AAAA;AAAA,cACX,KANQ,QAAQ,GAOlB;AAAA,YAEJ,CAAC,GACH;AAAA,aACF;AAAA,UAID,cAAc,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM;AACpC,kBAAM,sBAAsB,MAAM,OAAO,CAAC,MAAM,EAAE,OAAO,SAAS;AAClE,kBAAM,sBAAsB,oBAAoB,SAAS;AACzD,mBACA;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAW,GAAG,gBAAgB,aAAa,YAAY,MAAM,IAAI,sBAAsB,KAAK,MAAM,WAAW,KAAK,uBAAuB;AAAA,gBACzI,OAAO,sBAAsB,KAAK,MAAM,WAAW,SAAY,EAAE,aAAa,UAAU,sBAAsB,KAAK,CAAuB,EAAE;AAAA,gBAE1I;AAAA,yBAAM;AACN,0BAAM,MAAM,mBAAmB,KAAK;AACpC,0BAAM,WAAW,MACf,4EACE;AAAA,kEAAC,UAAM,cAAI,OAAM;AAAA,sBAChB,IAAI,WACH,4EACE;AAAA,oEAAC,UAAK,OAAO,EAAE,OAAO,2BAA2B,GAAG,kBAAC;AAAA,wBACrD,4CAAC,UAAK,OAAO,EAAE,YAAY,KAAK,OAAO,2BAA2B,GAC/D,cAAI,SACP;AAAA,yBACF;AAAA,uBAEJ,IACE;AACJ,2BACE;AAAA,sBAAC;AAAA;AAAA,wBACC;AAAA,wBACA,UACE,uBAAuB,cAAc,SAAS,IAC5C;AAAA,0BAAC;AAAA;AAAA,4BACC,SAAS,MAAM;AACb,yCAAW,KAAK,oBAAqB,eAAc,YAAY,EAAE,GAAG;AAAA,4BACtE;AAAA,4BACA,OAAO,SAAS,oBAAoB,MAAM,SAAS,oBAAoB,WAAW,IAAI,KAAK,GAAG;AAAA,4BAC9F,MAAM,4CAAC,kBAAK,OAAM,WAAU,aAAa,MAAM,eAAW,MAAC;AAAA,4BAC5D;AAAA;AAAA,wBAED,IACE;AAAA,wBAGL,0BAAgB,IAAI;AAAA;AAAA,oBACvB;AAAA,kBAEJ,GAAG;AAAA,kBACH,4CAAC,SAAI,WAAU,aACZ,gBAAM,IAAI,CAAC,SAAS;AACnB,0BAAM,QAAQ,QAAQ,KAAK,KAAK,KAAK,YAAY;AACjD,0BAAM,WAAW,aAAa,KAAK,GAAG;AACtC,0BAAM,aAAS,kCAAa,KAAK,SAAS;AAAA,sBACxC,OAAO,KAAK;AAAA,sBACZ;AAAA,sBACA;AAAA,sBACA;AAAA,oBACF,CAAC;AACD,0BAAM,YAAY,WAAW,IAAI,KAAK,GAAG,GAAG,UAAU;AACtD,0BAAM,eAAe,KAAK,OAAO;AACjC,0BAAM,WAAW,WAAW,IAAI,KAAK,GAAG;AACxC,0BAAM,gBAAgB,mBAAmB,KAAK;AAC9C,2BACE;AAAA,sBAAC;AAAA;AAAA,wBAEC,cAAc,eAAe,YAAY;AAAA,wBACzC,WAAW,MAAM,WAAW,KAAK,KAAK,KAAK;AAAA,wBAC3C,UAAU,IAAI;AAAA,wBACd,WAAW,KAAK;AAAA,wBAChB,QAAQ;AAAA,wBACR,aAAa;AAAA,wBACb;AAAA,wBACA,SAAS,MAAM,cAAc,YAAY,KAAK,GAAG;AAAA,wBAEhD;AAAA;AAAA,sBAVI,KAAK;AAAA,oBAWZ;AAAA,kBAEJ,CAAC,GACH;AAAA;AAAA;AAAA,cAtEK;AAAA,YAuEP;AAAA,UAEF,CAAC;AAAA,UAMD,4CAAC,SAAI,WAAW,gBAAgB,aAAa,uBAAuB,IAClE,sDAAC,+BAAU,KAAU,GACvB;AAAA;AAAA;AAAA,IACA,GACF,IACE,QAAQ,QACV;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK,IAAI;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IAEA,4CAAC,SAAI,WAAU,8BACb,sDAAC,iCAAW,GACd;AAAA,KAEJ;AAEJ;","names":["import_ui","v"]}

package/dist/studio/shell/{properties-panel.d.ts → properties-panel/index.d.ts}

@@ -8,5 +8,5 @@ export declare function PropertiesPanel({ orientation, onToggleOrientation, }: {
     embed?: boolean;
     orientation?: 'horizontal' | 'vertical';
     onToggleOrientation?: () => void;
-}): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=properties-panel.d.ts.map
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/studio/shell/properties-panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/studio/shell/properties-panel/index.tsx"],"names":[],"mappings":"AAqBA,wBAAgB,eAAe,CAAC,EAC9B,WAA0B,EAC1B,mBAAmB,GACpB,EAAE;IACD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC,sCAieA"}

package/dist/studio/shell/properties-panel/index.js

@@ -0,0 +1,374 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "../../../ui/index.js";
+import { IconButton } from "../../../ui/index.js";
+import { InlineAction } from "../../../ui/index.js";
+import { SectionHeader } from "../../../ui/index.js";
+import { Tabs } from "../../../ui/index.js";
+import { CodeEditor } from "../../editors/code-editor.js";
+import { SelectInput } from "../../editors/select-input.js";
+import { useUxm } from "../../lib/context.js";
+import { getComponentDef, registry } from "../../lib/registry/index.js";
+import { WcagPanel } from "../wcag-panel.js";
+import { DevTab } from "./dev-tab.js";
+import { PropertyRow, renderEditor } from "./property-row.js";
+function PropertiesPanel({
+  orientation = "horizontal",
+  onToggleOrientation
+}) {
+  const [tab, setTab] = useState("visual");
+  const {
+    selectedId,
+    getOverrides,
+    setOverride,
+    resetOverride,
+    resetOverrides,
+    getCurrentVariants,
+    setVariant,
+    eventLog,
+    clearEvents
+  } = useUxm();
+  const def = getComponentDef(selectedId);
+  const overrides = getOverrides(selectedId);
+  const currentVariants = getCurrentVariants();
+  const [syncedKeys, setSyncedKeys] = useState(/* @__PURE__ */ new Set());
+  const [justMatchedKey, setJustMatchedKey] = useState(null);
+  const justMatchedTimer = useRef(null);
+  useEffect(() => {
+    setSyncedKeys(/* @__PURE__ */ new Set());
+    setJustMatchedKey(null);
+    if (justMatchedTimer.current) {
+      clearTimeout(justMatchedTimer.current);
+      justMatchedTimer.current = null;
+    }
+  }, [selectedId]);
+  useEffect(() => () => {
+    if (justMatchedTimer.current) clearTimeout(justMatchedTimer.current);
+  }, []);
+  const peers = useMemo(
+    () => def ? registry.filter((c) => c.category === def.category && c.id !== def.id) : [],
+    [def]
+  );
+  const peersByKey = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (!def) return map;
+    for (const prop of def.styleProperties) {
+      const matches = peers.filter((p) => p.styleProperties.some((pp) => pp.key === prop.key));
+      if (matches.length) map.set(prop.key, matches);
+    }
+    return map;
+  }, [def, peers]);
+  if (!def) return null;
+  const resolve = (key, fallback) => {
+    const isVariantKey = def.layoutVariants.some((v) => v.key === key);
+    if (isVariantKey) return currentVariants[key] ?? fallback;
+    return overrides[key] ?? fallback;
+  };
+  const handleChange = (key) => (value) => {
+    const variant = def.layoutVariants.find((v) => v.key === key);
+    if (variant) {
+      setVariant(key, value);
+      return;
+    }
+    const prop = def.styleProperties.find((p) => p.key === key);
+    if (prop !== void 0 && value === prop.defaultValue) {
+      resetOverride(selectedId, key);
+    } else {
+      setOverride(selectedId, key, value);
+    }
+    setSyncedKeys((prev) => {
+      if (!prev.has(key)) return prev;
+      const next = new Set(prev);
+      next.delete(key);
+      return next;
+    });
+  };
+  const hasOverrides = Object.keys(overrides).length > 0;
+  const SECTION_LABELS = {
+    colors: "Colors",
+    states: "States",
+    style: "Style",
+    frame: "Frame",
+    header: "Header",
+    weekday: "Weekday Row",
+    "shared-states": "Shared States",
+    "day-cell": "Date Cell",
+    "month-year-cells": "Month & Year Cells",
+    text: "Text",
+    uncheckedColors: "Unchecked",
+    checkedColors: "Checked",
+    offColors: "Off",
+    onColors: "On",
+    unselectedColors: "Unselected",
+    selectedColors: "Selected",
+    fieldColors: "Field Colors",
+    dropAreaColors: "Drop Area",
+    dropOutline: "Drop Outline",
+    triggerColors: "Trigger Colors",
+    popover: "Popover",
+    option: "Option",
+    focusState: "Focus",
+    disabledState: "Disabled",
+    errorState: "Error Message",
+    rangeOptions: "Range Options",
+    dragState: "Drag Over",
+    fileList: "File List",
+    fileListProgress: "File List Progress",
+    fileListStatus: "File List Status",
+    headerSlot: "Header Slot",
+    footerSlot: "Footer Slot"
+  };
+  const allShowWhenKeys = Array.from(
+    new Set(def.styleProperties.flatMap((p) => p.showWhen ? Object.keys(p.showWhen) : []))
+  );
+  const labelize = (vKey) => def.layoutVariants.find((v) => v.key === vKey)?.label ?? vKey;
+  const sectionScopeKeys = (props) => Array.from(new Set(props.flatMap((p) => p.showWhen ? Object.keys(p.showWhen) : [])));
+  const sectionTitleFor = (slug) => SECTION_LABELS[slug] ?? slug.charAt(0).toUpperCase() + slug.slice(1);
+  const sectionSubtitleFor = (props) => {
+    const keys = sectionScopeKeys(props);
+    if (keys.length > 0) {
+      const scope = `Per ${keys.map(labelize).join(" \xD7 ")}`;
+      const current = keys.map((vKey) => {
+        const variant = def.layoutVariants.find((v2) => v2.key === vKey);
+        if (!variant) return null;
+        const v = resolve(vKey, variant.defaultValue);
+        return variant.options.find((o) => o.value === v)?.label ?? v;
+      }).filter(Boolean).join(" / ");
+      return { scope, current: current || null };
+    }
+    if (allShowWhenKeys.length > 0) {
+      const variantNames = allShowWhenKeys.map((k) => labelize(k).toLowerCase() + "s").join(" / ");
+      return { scope: `Shared across all ${variantNames}`, current: null };
+    }
+    return null;
+  };
+  const sectionBarCategoryFor = (props) => {
+    const keys = sectionScopeKeys(props);
+    if (keys.length === 0) return "shared";
+    if (keys.length === allShowWhenKeys.length) return "full";
+    return "partial";
+  };
+  const BAR_COLOR = {
+    full: "var(--color-highlight-cool)",
+    partial: "var(--color-highlight-warm)"
+  };
+  const matchesShowWhen = (showWhen) => {
+    if (!showWhen) return true;
+    for (const [vKey, vVal] of Object.entries(showWhen)) {
+      const current = resolve(
+        vKey,
+        def.layoutVariants.find((v) => v.key === vKey)?.defaultValue ?? ""
+      );
+      const allowed = Array.isArray(vVal) ? vVal : [vVal];
+      if (!allowed.includes(current)) return false;
+    }
+    return true;
+  };
+  const visibleStyleProps = def.styleProperties.filter(
+    (prop) => matchesShowWhen(prop.showWhen)
+  );
+  const visibleEvents = (def.events ?? []).filter(
+    (ev) => matchesShowWhen(ev.showWhen)
+  );
+  const visibleVariants = def.layoutVariants.filter(
+    (v) => matchesShowWhen(v.showWhen)
+  );
+  const sectionsMap = /* @__PURE__ */ new Map();
+  for (const prop of visibleStyleProps) {
+    const slug = prop.section ?? "style";
+    if (!sectionsMap.has(slug)) sectionsMap.set(slug, []);
+    sectionsMap.get(slug).push(prop);
+  }
+  const sectionGroups = Array.from(sectionsMap.entries());
+  const cascadeKey = (key, value) => {
+    const targets = peersByKey.get(key) ?? [];
+    if (targets.length === 0) return;
+    for (const p of targets) setOverride(p.id, key, value);
+    setSyncedKeys((prev) => new Set(prev).add(key));
+    setJustMatchedKey(key);
+    if (justMatchedTimer.current) clearTimeout(justMatchedTimer.current);
+    justMatchedTimer.current = setTimeout(() => setJustMatchedKey(null), 1400);
+  };
+  return /* @__PURE__ */ jsxs("aside", { className: `flex flex-col overflow-hidden w-full h-full ${orientation === "horizontal" ? "border-l" : "border-t"} border-border bg-card`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 border-b border-border px-5 py-3 bg-card", children: [
+      /* @__PURE__ */ jsx(
+        SectionHeader,
+        {
+          trailing: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            onToggleOrientation && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: onToggleOrientation,
+                "aria-label": orientation === "horizontal" ? "Move panel to bottom" : "Move panel to right",
+                title: orientation === "horizontal" ? "Dock to bottom" : "Dock to right",
+                style: { ["--uxm-icon-button-size"]: "20px" },
+                children: /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    glyph: orientation === "horizontal" ? "dock-bottom" : "dock-right",
+                    size: 14
+                  }
+                )
+              }
+            ),
+            hasOverrides && /* @__PURE__ */ jsx(InlineAction, { onClick: () => resetOverrides(selectedId), children: "Reset all" })
+          ] }),
+          children: "Properties"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          className: "w-full",
+          value: tab,
+          onChange: (v) => setTab(v),
+          options: [
+            {
+              value: "visual",
+              label: "Visual",
+              icon: /* @__PURE__ */ jsx(Icon, { glyph: "list", size: 12 })
+            },
+            {
+              value: "dev",
+              label: "Dev",
+              icon: /* @__PURE__ */ jsx(Icon, { glyph: "bolt", size: 12 })
+            },
+            {
+              value: "code",
+              label: "CSS",
+              icon: /* @__PURE__ */ jsx(Icon, { glyph: "code", size: 12 })
+            }
+          ]
+        }
+      )
+    ] }),
+    tab === "visual" ? /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: orientation === "vertical" ? "grid items-start gap-x-6 gap-y-4 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]" : "",
+        children: [
+          visibleVariants.length > 0 && /* @__PURE__ */ jsxs("div", { className: orientation === "vertical" ? "min-w-0" : "mb-6", children: [
+            /* @__PURE__ */ jsx(SectionHeader, { children: visibleVariants.length === 1 ? "Variant" : "Variants" }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-3", children: visibleVariants.map((variant) => {
+              const rawValue = resolve(variant.key, variant.defaultValue);
+              const visibleOptions = variant.options.filter((opt) => {
+                if (!opt.showWhen) return true;
+                for (const [vKey, vVal] of Object.entries(opt.showWhen)) {
+                  const current = resolve(
+                    vKey,
+                    def.layoutVariants.find((v) => v.key === vKey)?.defaultValue ?? ""
+                  );
+                  const allowed = Array.isArray(vVal) ? vVal : [vVal];
+                  if (!allowed.includes(current)) return false;
+                }
+                return true;
+              });
+              const valid = visibleOptions.some((o) => o.value === rawValue);
+              const value = valid ? rawValue : visibleOptions.some((o) => o.value === variant.defaultValue) ? variant.defaultValue : visibleOptions[0]?.value ?? rawValue;
+              if (!valid && value !== rawValue) {
+                queueMicrotask(() => setVariant(variant.key, value));
+              }
+              return /* @__PURE__ */ jsx("div", { "data-variant-key": variant.key, children: /* @__PURE__ */ jsx(
+                SelectInput,
+                {
+                  label: variant.label,
+                  value,
+                  onChange: handleChange(variant.key),
+                  options: visibleOptions
+                }
+              ) }, variant.key);
+            }) })
+          ] }),
+          sectionGroups.map(([slug, props]) => {
+            const overriddenInSection = props.filter((p) => p.key in overrides);
+            const hasSectionOverrides = overriddenInSection.length > 0;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `${orientation === "vertical" ? "min-w-0" : "mb-6"} ${sectionBarCategoryFor(props) === "shared" ? "" : "border-l-2 pl-3 -ml-3"}`,
+                style: sectionBarCategoryFor(props) === "shared" ? void 0 : { borderColor: BAR_COLOR[sectionBarCategoryFor(props)] },
+                children: [
+                  (() => {
+                    const sub = sectionSubtitleFor(props);
+                    const subtitle = sub ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { children: sub.scope }),
+                      sub.current && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("span", { style: { color: "var(--color-text-subtle)" }, children: "\xB7" }),
+                        /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--color-text-strong)" }, children: sub.current })
+                      ] })
+                    ] }) : null;
+                    return /* @__PURE__ */ jsx(
+                      SectionHeader,
+                      {
+                        subtitle,
+                        trailing: hasSectionOverrides && sectionGroups.length > 1 ? /* @__PURE__ */ jsx(
+                          InlineAction,
+                          {
+                            onClick: () => {
+                              for (const p of overriddenInSection) resetOverride(selectedId, p.key);
+                            },
+                            title: `Reset ${overriddenInSection.length} field${overriddenInSection.length === 1 ? "" : "s"} in this section to default`,
+                            icon: /* @__PURE__ */ jsx(Icon, { glyph: "refresh", strokeWidth: 2.25, "aria-hidden": true }),
+                            children: "Reset section"
+                          }
+                        ) : void 0,
+                        children: sectionTitleFor(slug)
+                      }
+                    );
+                  })(),
+                  /* @__PURE__ */ jsx("div", { className: "space-y-3", children: props.map((prop) => {
+                    const value = resolve(prop.key, prop.defaultValue);
+                    const onChange = handleChange(prop.key);
+                    const editor = renderEditor(prop.control, {
+                      label: prop.label,
+                      value,
+                      onChange,
+                      prop
+                    });
+                    const peerCount = peersByKey.get(prop.key)?.length ?? 0;
+                    const isOverridden = prop.key in overrides;
+                    const isSynced = syncedKeys.has(prop.key);
+                    const isJustMatched = justMatchedKey === prop.key;
+                    return /* @__PURE__ */ jsx(
+                      PropertyRow,
+                      {
+                        cascadeCount: isOverridden ? peerCount : 0,
+                        onCascade: () => cascadeKey(prop.key, value),
+                        category: def.category,
+                        propLabel: prop.label,
+                        synced: isSynced,
+                        justMatched: isJustMatched,
+                        isOverridden,
+                        onReset: () => resetOverride(selectedId, prop.key),
+                        children: editor
+                      },
+                      prop.key
+                    );
+                  }) })
+                ]
+              },
+              slug
+            );
+          }),
+          /* @__PURE__ */ jsx("div", { className: orientation === "vertical" ? "min-w-0 col-span-2" : "", children: /* @__PURE__ */ jsx(WcagPanel, { def }) })
+        ]
+      }
+    ) }) : tab === "dev" ? /* @__PURE__ */ jsx(
+      DevTab,
+      {
+        def,
+        api: def.api,
+        events: visibleEvents,
+        eventLog,
+        onClearLog: clearEvents,
+        orientation,
+        currentVariants,
+        overrides
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden p-3", children: /* @__PURE__ */ jsx(CodeEditor, {}) })
+  ] });
+}
+export {
+  PropertiesPanel
+};
+//# sourceMappingURL=index.js.map

package/dist/studio/shell/properties-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/studio/shell/properties-panel/index.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Icon } from '@/ui';\nimport { IconButton } from '@/ui';\nimport { InlineAction } from '@/ui';\nimport { SectionHeader } from '@/ui';\nimport { Tabs } from '@/ui';\n\nimport { CodeEditor } from '../../editors/code-editor';\nimport { SelectInput } from '../../editors/select-input';\nimport { useUxm } from '../../lib/context';\nimport { getComponentDef, registry } from '../../lib/registry';\nimport { WcagPanel } from '../wcag-panel';\n\nimport { DevTab } from './dev-tab';\nimport { PropertyRow, renderEditor } from './property-row';\n\nimport type { ComponentDef } from '../../lib/types';\n\ntype Tab = 'visual' | 'dev' | 'code';\n\nexport function PropertiesPanel({\n  orientation = 'horizontal',\n  onToggleOrientation,\n}: {\n  /**\n   * Accepted for API compatibility with host portals that mount the panel\n   * embedded. No longer switches the surface color — the properties panel\n   * is always white (`bg-card`) so its text keeps full contrast in both the\n   * standalone studio and an embedded portal.\n   */\n  embed?: boolean;\n  orientation?: 'horizontal' | 'vertical';\n  onToggleOrientation?: () => void;\n}) {\n  const [tab, setTab] = useState<Tab>('visual');\n  const {\n    selectedId,\n    getOverrides,\n    setOverride,\n    resetOverride,\n    resetOverrides,\n    getCurrentVariants,\n    setVariant,\n    eventLog,\n    clearEvents,\n  } = useUxm();\n  const def = getComponentDef(selectedId);\n  const overrides = getOverrides(selectedId);\n  const currentVariants = getCurrentVariants();\n\n  // Keys that were just cascaded — shows a brief \"Matched ✓\" state, then hides the link.\n  // A change to the same key (value edit) removes it so the link reappears.\n  const [syncedKeys, setSyncedKeys] = useState<Set<string>>(new Set());\n  const [justMatchedKey, setJustMatchedKey] = useState<string | null>(null);\n  const justMatchedTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Reset sync state when switching components.\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional reset of cascade-sync UI state on component switch\n    setSyncedKeys(new Set());\n    setJustMatchedKey(null);\n    if (justMatchedTimer.current) {\n      clearTimeout(justMatchedTimer.current);\n      justMatchedTimer.current = null;\n    }\n  }, [selectedId]);\n\n  useEffect(() => () => {\n    if (justMatchedTimer.current) clearTimeout(justMatchedTimer.current);\n  }, []);\n\n  const peers = useMemo<ComponentDef[]>(\n    () => def ? registry.filter((c) => c.category === def.category && c.id !== def.id) : [],\n    [def],\n  );\n\n  const peersByKey = useMemo(() => {\n    const map = new Map<string, ComponentDef[]>();\n    if (!def) return map;\n    for (const prop of def.styleProperties) {\n      const matches = peers.filter((p) => p.styleProperties.some((pp) => pp.key === prop.key));\n      if (matches.length) map.set(prop.key, matches);\n    }\n    return map;\n  }, [def, peers]);\n\n  if (!def) return null;\n\n  // Variants live in ephemeral session state; styleProperty edits live in\n  // persisted overrides. `resolve` checks both so panel UI reads the right\n  // thing regardless of which kind of key it's looking at.\n  const resolve = (key: string, fallback: string | number | boolean) => {\n    const isVariantKey = def.layoutVariants.some((v) => v.key === key);\n    if (isVariantKey) return currentVariants[key] ?? fallback;\n    return overrides[key] ?? fallback;\n  };\n\n  const handleChange = (key: string) => (value: string | number | boolean) => {\n    // Branch by key kind. Variants are UI selection — never written to\n    // overrides. Style edits are persisted. Auto-clear an override when\n    // value === default so the \"Reset\" affordance reflects the real\n    // customization state (manually setting a knob back to its default\n    // doesn't leave a stale entry in overrides).\n    const variant = def.layoutVariants.find((v) => v.key === key);\n    if (variant) {\n      setVariant(key, value);\n      return;\n    }\n    const prop = def.styleProperties.find((p) => p.key === key);\n    if (prop !== undefined && value === prop.defaultValue) {\n      resetOverride(selectedId, key);\n    } else {\n      setOverride(selectedId, key, value);\n    }\n    // Any edit diverges this key from its peers — allow re-cascading.\n    setSyncedKeys((prev) => {\n      if (!prev.has(key)) return prev;\n      const next = new Set(prev);\n      next.delete(key);\n      return next;\n    });\n  };\n\n  // Variants now live in ephemeral session state and never reach overrides,\n  // so any key here is a real style edit — no filtering needed.\n  const hasOverrides = Object.keys(overrides).length > 0;\n\n  const SECTION_LABELS: Record<string, string> = {\n    colors: 'Colors',\n    states: 'States',\n    style: 'Style',\n    frame: 'Frame',\n    header: 'Header',\n    weekday: 'Weekday Row',\n    'shared-states': 'Shared States',\n    'day-cell': 'Date Cell',\n    'month-year-cells': 'Month & Year Cells',\n    text: 'Text',\n    uncheckedColors: 'Unchecked',\n    checkedColors: 'Checked',\n    offColors: 'Off',\n    onColors: 'On',\n    unselectedColors: 'Unselected',\n    selectedColors: 'Selected',\n    fieldColors: 'Field Colors',\n    dropAreaColors: 'Drop Area',\n    dropOutline: 'Drop Outline',\n    triggerColors: 'Trigger Colors',\n    popover: 'Popover',\n    option: 'Option',\n    focusState: 'Focus',\n    disabledState: 'Disabled',\n    errorState: 'Error Message',\n    rangeOptions: 'Range Options',\n    dragState: 'Drag Over',\n    fileList: 'File List',\n    fileListProgress: 'File List Progress',\n    fileListStatus: 'File List Status',\n    headerSlot: 'Header Slot',\n    footerSlot: 'Footer Slot',\n  };\n  const allShowWhenKeys = Array.from(\n    new Set(def.styleProperties.flatMap((p) => p.showWhen ? Object.keys(p.showWhen) : [])),\n  );\n  const labelize = (vKey: string) =>\n    def.layoutVariants.find((v) => v.key === vKey)?.label ?? vKey;\n  const sectionScopeKeys = (props: ComponentDef['styleProperties']) =>\n    Array.from(new Set(props.flatMap((p) => p.showWhen ? Object.keys(p.showWhen) : [])));\n  const sectionTitleFor = (slug: string) =>\n    SECTION_LABELS[slug] ?? slug.charAt(0).toUpperCase() + slug.slice(1);\n  const sectionSubtitleFor = (props: ComponentDef['styleProperties']):\n    | { scope: string; current: string | null }\n    | null => {\n    const keys = sectionScopeKeys(props);\n    if (keys.length > 0) {\n      const scope = `Per ${keys.map(labelize).join(' × ')}`;\n      const current = keys.map((vKey) => {\n        const variant = def.layoutVariants.find((v) => v.key === vKey);\n        if (!variant) return null;\n        const v = resolve(vKey, variant.defaultValue) as string;\n        return variant.options.find((o) => o.value === v)?.label ?? v;\n      }).filter(Boolean).join(' / ');\n      return { scope, current: current || null };\n    }\n    if (allShowWhenKeys.length > 0) {\n      const variantNames = allShowWhenKeys\n        .map((k) => labelize(k).toLowerCase() + 's')\n        .join(' / ');\n      return { scope: `Shared across all ${variantNames}`, current: null };\n    }\n    return null;\n  };\n  const sectionBarCategoryFor = (props: ComponentDef['styleProperties']): 'full' | 'partial' | 'shared' => {\n    const keys = sectionScopeKeys(props);\n    if (keys.length === 0) return 'shared';\n    if (keys.length === allShowWhenKeys.length) return 'full';\n    return 'partial';\n  };\n  const BAR_COLOR: Record<'full' | 'partial', string> = {\n    full: 'var(--color-highlight-cool)',\n    partial: 'var(--color-highlight-warm)',\n  };\n\n  // Shared variant-scope filter: an entry with `showWhen` only renders\n  // when the current value of every named variant matches. Used by both\n  // style properties (existing) and event specs (Events tab).\n  const matchesShowWhen = (showWhen?: Record<string, string | string[]>) => {\n    if (!showWhen) return true;\n    for (const [vKey, vVal] of Object.entries(showWhen)) {\n      const current = resolve(\n        vKey,\n        def.layoutVariants.find((v) => v.key === vKey)?.defaultValue ?? '',\n      ) as string;\n      // A string[] means \"match any of\" — the same rule the per-option\n      // matcher below uses. Without it a multi-value clause has to be\n      // spelled as one string, which is compared verbatim and never matches\n      // (that silently hid four editable-cell knobs).\n      const allowed = Array.isArray(vVal) ? vVal : [vVal];\n      if (!allowed.includes(current)) return false;\n    }\n    return true;\n  };\n\n  const visibleStyleProps = def.styleProperties.filter((prop) =>\n    matchesShowWhen(prop.showWhen),\n  );\n  const visibleEvents = (def.events ?? []).filter((ev) =>\n    matchesShowWhen(ev.showWhen),\n  );\n  // Variants themselves can be scoped via `showWhen` — e.g. the State\n  // picker on list-item is irrelevant when `trailing` is meta / none,\n  // so the variant disappears entirely rather than sitting as a no-op.\n  const visibleVariants = def.layoutVariants.filter((v) =>\n    matchesShowWhen(v.showWhen),\n  );\n  const sectionsMap = new Map<string, ComponentDef['styleProperties']>();\n  for (const prop of visibleStyleProps) {\n    const slug = prop.section ?? 'style';\n    if (!sectionsMap.has(slug)) sectionsMap.set(slug, []);\n    sectionsMap.get(slug)!.push(prop);\n  }\n  const sectionGroups = Array.from(sectionsMap.entries());\n\n  const cascadeKey = (key: string, value: string | number | boolean) => {\n    const targets = peersByKey.get(key) ?? [];\n    if (targets.length === 0) return;\n    for (const p of targets) setOverride(p.id, key, value);\n    setSyncedKeys((prev) => new Set(prev).add(key));\n    setJustMatchedKey(key);\n    if (justMatchedTimer.current) clearTimeout(justMatchedTimer.current);\n    justMatchedTimer.current = setTimeout(() => setJustMatchedKey(null), 1400);\n  };\n\n  return (\n    <aside className={`flex flex-col overflow-hidden w-full h-full ${\n      orientation === 'horizontal' ? 'border-l' : 'border-t'\n    } border-border bg-card`}>\n      {/* Header with tabs */}\n      <div className=\"sticky top-0 z-10 border-b border-border px-5 py-3 bg-card\">\n        {/* Panel-level header — uses the same SectionHeader atom as the\n            VARIANT / COLORS / STYLE per-section headers below, so the\n            entire panel's section-title chrome flows through one\n            theming surface (`--uxm-section-header-*`). The orientation\n            toggle and \"Reset all\" go into the trailing slot. The 1px\n            font-size shift from `text-xs` (12px) to SectionHeader's\n            default 11px is intentional — keeps the panel header\n            consistent with section headers. */}\n        <SectionHeader\n          trailing={\n            <div className=\"flex items-center gap-3\">\n              {onToggleOrientation && (\n                <IconButton\n                  onClick={onToggleOrientation}\n                  aria-label={\n                    orientation === 'horizontal'\n                      ? 'Move panel to bottom'\n                      : 'Move panel to right'\n                  }\n                  title={\n                    orientation === 'horizontal'\n                      ? 'Dock to bottom'\n                      : 'Dock to right'\n                  }\n                  // 20×20 footprint matches the previous `h-5 w-5` chrome.\n                  style={{ ['--uxm-icon-button-size' as string]: '20px' }}\n                >\n                  <Icon\n                    glyph={orientation === 'horizontal' ? 'dock-bottom' : 'dock-right'}\n                    size={14}\n                  />\n                </IconButton>\n              )}\n              {hasOverrides && (\n                <InlineAction onClick={() => resetOverrides(selectedId)}>\n                  Reset all\n                </InlineAction>\n              )}\n            </div>\n          }\n        >\n          Properties\n        </SectionHeader>\n\n\n        {/* Tab bar — uses the real <Tabs> atom so editor saves on the\n            Tabs registry (active-bg, padding-x/y, font-size, etc.) flow\n            into the properties pane's own toggle. The previous hand-rolled\n            <button> elements had `className=\"uxm-tabs\"` on the wrapper but\n            no `.uxm-tabs__tab` on the inner buttons, so every inner-element\n            var (which is what most Tabs knobs control) silently no-oped\n            here. `w-full` keeps the strip stretching across the panel —\n            the atom is `display: inline-flex` by default. */}\n        <Tabs\n          className=\"w-full\"\n          value={tab}\n          onChange={(v) => setTab(v as Tab)}\n          options={[\n            {\n              value: 'visual',\n              label: 'Visual',\n              icon: <Icon glyph=\"list\" size={12} />,\n            },\n            {\n              value: 'dev',\n              label: 'Dev',\n              icon: <Icon glyph=\"bolt\" size={12} />,\n            },\n            {\n              value: 'code',\n              label: 'CSS',\n              icon: <Icon glyph=\"code\" size={12} />,\n            },\n          ]}\n        />\n      </div>\n\n      {/* Tab content */}\n      {tab === 'visual' ? (\n        <div className=\"flex-1 overflow-y-auto px-5 py-4\">\n          {/* Bottom-dock (`orientation === \"vertical\"`) gives the pane the\n              full canvas width — far more than the ~320px right-dock. We\n              switch to an auto-fit grid so each section (Variants, Colors,\n              Style, WCAG) becomes its own column, side-by-side, wrapping\n              gracefully on narrow widths. The `mb-6` between sections is\n              dropped in grid mode because grid `gap-y-4` handles spacing\n              instead — leaving both would double-space the wrapped rows. */}\n          <div\n            className={\n              orientation === 'vertical'\n                ? 'grid items-start gap-x-6 gap-y-4 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]'\n                : ''\n            }\n          >\n          {/* Variant selectors — render before Styles so mode/state/type selectors anchor the form. */}\n          {visibleVariants.length > 0 && (\n            <div className={orientation === 'vertical' ? 'min-w-0' : 'mb-6'}>\n              <SectionHeader>\n                {visibleVariants.length === 1 ? 'Variant' : 'Variants'}\n              </SectionHeader>\n              <div className=\"space-y-3\">\n                {visibleVariants.map((variant) => {\n                  const rawValue = resolve(variant.key, variant.defaultValue) as string;\n                  const visibleOptions = variant.options.filter((opt) => {\n                    if (!opt.showWhen) return true;\n                    for (const [vKey, vVal] of Object.entries(opt.showWhen)) {\n                      const current = resolve(\n                        vKey,\n                        def.layoutVariants.find((v) => v.key === vKey)?.defaultValue ?? '',\n                      ) as string;\n                      // A string[] means \"match any of\"; a string is exact.\n                      const allowed = Array.isArray(vVal) ? vVal : [vVal];\n                      if (!allowed.includes(current)) return false;\n                    }\n                    return true;\n                  });\n                  const valid = visibleOptions.some((o) => o.value === rawValue);\n                  const value = valid\n                    ? rawValue\n                    : visibleOptions.some((o) => o.value === variant.defaultValue)\n                      ? variant.defaultValue\n                      : visibleOptions[0]?.value ?? rawValue;\n                  if (!valid && value !== rawValue) {\n                    // Stale variant selection (showWhen filtered out the option).\n                    // Repair to a valid value via the variant channel, not overrides —\n                    // variants are ephemeral session state. Guarded on\n                    // `value !== rawValue` so an empty `visibleOptions` (no\n                    // fallback available) doesn't re-queue this microtask\n                    // forever — `value` would otherwise fall back to\n                    // `rawValue` itself and never settle.\n                    queueMicrotask(() => setVariant(variant.key, value));\n                  }\n                  return (\n                    <div key={variant.key} data-variant-key={variant.key}>\n                      <SelectInput\n                        label={variant.label}\n                        value={value}\n                        onChange={handleChange(variant.key)}\n                        options={visibleOptions}\n                      />\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          )}\n\n          {/* Style Properties — grouped by section */}\n          {sectionGroups.map(([slug, props]) => {\n            const overriddenInSection = props.filter((p) => p.key in overrides);\n            const hasSectionOverrides = overriddenInSection.length > 0;\n            return (\n            <div\n              key={slug}\n              className={`${orientation === 'vertical' ? 'min-w-0' : 'mb-6'} ${sectionBarCategoryFor(props) === 'shared' ? '' : 'border-l-2 pl-3 -ml-3'}`}\n              style={sectionBarCategoryFor(props) === 'shared' ? undefined : { borderColor: BAR_COLOR[sectionBarCategoryFor(props) as 'full' | 'partial'] }}\n            >\n              {(() => {\n                const sub = sectionSubtitleFor(props);\n                const subtitle = sub ? (\n                  <>\n                    <span>{sub.scope}</span>\n                    {sub.current && (\n                      <>\n                        <span style={{ color: 'var(--color-text-subtle)' }}>·</span>\n                        <span style={{ fontWeight: 600, color: 'var(--color-text-strong)' }}>\n                          {sub.current}\n                        </span>\n                      </>\n                    )}\n                  </>\n                ) : null;\n                return (\n                  <SectionHeader\n                    subtitle={subtitle}\n                    trailing={\n                      hasSectionOverrides && sectionGroups.length > 1 ? (\n                        <InlineAction\n                          onClick={() => {\n                            for (const p of overriddenInSection) resetOverride(selectedId, p.key);\n                          }}\n                          title={`Reset ${overriddenInSection.length} field${overriddenInSection.length === 1 ? '' : 's'} in this section to default`}\n                          icon={<Icon glyph=\"refresh\" strokeWidth={2.25} aria-hidden />}\n                        >\n                          Reset section\n                        </InlineAction>\n                      ) : undefined\n                    }\n                  >\n                    {sectionTitleFor(slug)}\n                  </SectionHeader>\n                );\n              })()}\n              <div className=\"space-y-3\">\n                {props.map((prop) => {\n                  const value = resolve(prop.key, prop.defaultValue);\n                  const onChange = handleChange(prop.key);\n                  const editor = renderEditor(prop.control, {\n                    label: prop.label,\n                    value,\n                    onChange,\n                    prop,\n                  });\n                  const peerCount = peersByKey.get(prop.key)?.length ?? 0;\n                  const isOverridden = prop.key in overrides;\n                  const isSynced = syncedKeys.has(prop.key);\n                  const isJustMatched = justMatchedKey === prop.key;\n                  return (\n                    <PropertyRow\n                      key={prop.key}\n                      cascadeCount={isOverridden ? peerCount : 0}\n                      onCascade={() => cascadeKey(prop.key, value)}\n                      category={def.category}\n                      propLabel={prop.label}\n                      synced={isSynced}\n                      justMatched={isJustMatched}\n                      isOverridden={isOverridden}\n                      onReset={() => resetOverride(selectedId, prop.key)}\n                    >\n                      {editor}\n                    </PropertyRow>\n                  );\n                })}\n              </div>\n            </div>\n            );\n          })}\n\n          {/* WCAG spans two grid columns when bottom-docked — its colour-pair\n              rows have enough horizontal content that a single 220px column\n              squashes them. `col-span-2` is a no-op outside the grid since\n              there's no grid context to span over. */}\n          <div className={orientation === 'vertical' ? 'min-w-0 col-span-2' : ''}>\n            <WcagPanel def={def} />\n          </div>\n          </div>\n        </div>\n      ) : tab === 'dev' ? (\n        <DevTab\n          def={def}\n          api={def.api}\n          events={visibleEvents}\n          eventLog={eventLog}\n          onClearLog={clearEvents}\n          orientation={orientation}\n          currentVariants={currentVariants}\n          overrides={overrides}\n        />\n      ) : (\n        <div className=\"flex-1 overflow-hidden p-3\">\n          <CodeEditor />\n        </div>\n      )}\n    </aside>\n  );\n}\n"],"mappings":"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","names":["v"]}