@viax.io/uxm 4.36.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/shell/properties-panel.tsx"],"sourcesContent":["import { Fragment, useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react';\n\nimport { Card } from '@/ui';\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 { ColorPicker } from '../editors/color-picker';\nimport { NumberInput } from '../editors/number-input';\nimport { SelectInput } from '../editors/select-input';\nimport { SliderInput } from '../editors/slider-input';\nimport { TextInput } from '../editors/text-input';\nimport { ToggleInput } from '../editors/toggle-input';\nimport { useUxm } from '../lib/context';\nimport { usePreviewShell } from '../lib/preview-shell';\nimport { getComponentDef, registry } from '../lib/registry';\n\nimport { previewMap } from './canvas';\nimport { WcagPanel } from './wcag-panel';\n\nimport type { LoggedEvent } from '../lib/context';\nimport type { ComponentDef, PreviewProps, StyleOverrides } 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\n/**\n * Events tab — Storybook-style API + activity panel. Two sections:\n *\n *   1. EMITS — the static event spec from the registry. Reads like\n *      a method-signature table: each row is one event name, its\n *      payload, and a short description of when it fires.\n *   2. LIVE LOG — runtime capture from the canvas. Updated whenever\n *      the user interacts with the rendered atom. Capped at 200\n *      entries (see EVENT_LOG_LIMIT). Latest at top.\n *\n * The capture itself lives in canvas.tsx — we just render what's in\n * the context-managed `eventLog` here. That separation keeps the\n * Properties pane independent of the rendered atom's DOM tree.\n */\nfunction DevTab({\n  def,\n  api,\n  events,\n  eventLog,\n  onClearLog,\n  orientation,\n  currentVariants,\n  overrides,\n}: {\n  def: ComponentDef;\n  api: ComponentDef['api'];\n  events: ComponentDef['events'];\n  eventLog: LoggedEvent[];\n  onClearLog: () => void;\n  orientation: 'horizontal' | 'vertical';\n  currentVariants: Record<string, string | number | boolean>;\n  overrides: StyleOverrides;\n}) {\n  // Resolved styles for the variant matrix — overrides win over\n  // defaults, same logic the canvas applies. Reused by every cell so\n  // they all reflect the user's current theming, just with different\n  // variant values locked in.\n  const resolvedStyles: Record<string, string | number | boolean> = {};\n  for (const prop of def.styleProperties) {\n    resolvedStyles[prop.key] = overrides[prop.key] ?? prop.defaultValue;\n  }\n  return (\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. Match the Visual tab's auto-fit grid so\n          API / Emits / Live Log sit side-by-side instead of stacking.\n          Same `mb-6` ↔ `min-w-0` swap as the Visual tab: grid `gap-y-4`\n          handles spacing in grid mode, so the section's own bottom\n          margin would double-space 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      {/* API section — renders when the registry entry carries an\n          `api` slot. Built first because it's the developer's \"how do\n          I use this?\" entry point; Emits + Live Log are the runtime\n          observation layer below. */}\n      {api && (\n        <div className={orientation === 'vertical' ? 'min-w-0' : 'mb-6'}>\n          <ApiSection api={api} currentVariants={currentVariants} />\n        </div>\n      )}\n\n      {/* Variant Matrix — renders only when the atom has variants\n          (atoms without any layoutVariants would just show a single\n          duplicate of the canvas preview, which is noise). */}\n      {def.layoutVariants.length > 0 && (\n        <div className={orientation === 'vertical' ? 'min-w-0' : 'mb-6'}>\n          <VariantMatrix def={def} styles={resolvedStyles} currentVariants={currentVariants} />\n        </div>\n      )}\n\n      <div className={orientation === 'vertical' ? 'min-w-0' : 'mb-6'}>\n        <SectionHeader>Emits</SectionHeader>\n        {events && events.length > 0 ? (\n          <div className=\"space-y-2 text-[12px]\">\n            {events.map((ev) => (\n              // Card atom (uxm-card surface) instead of a hand-rolled div\n              // so the spec rows pick up the design system's bg/border/\n              // radius tokens and flow through Card's registry knobs.\n              // Padding + radius are tightened inline to keep the dense\n              // panel-row feel — Card's 24px default is meant for full\n              // page cards, not list rows.\n              <Card\n                key={ev.name}\n                style={{ padding: '8px 12px', borderRadius: 6 }}\n              >\n                <div className=\"flex items-baseline gap-2\">\n                  <code className=\"text-[12px] font-semibold text-accent-bold\">\n                    {ev.name}\n                  </code>\n                  {ev.payload && (\n                    <code className=\"text-[11px] text-text-muted\">\n                      ({ev.payload})\n                    </code>\n                  )}\n                </div>\n                <p className=\"mt-1 text-[11px] text-text-muted leading-relaxed\">\n                  {ev.description}\n                </p>\n              </Card>\n            ))}\n          </div>\n        ) : (\n          <p className=\"text-[12px] text-text-muted leading-relaxed\">\n            No event spec yet for this component. Interact with the canvas\n            to see the live activity log below.\n          </p>\n        )}\n      </div>\n\n      <div className={orientation === 'vertical' ? 'min-w-0' : ''}>\n        <SectionHeader\n          trailing={\n            eventLog.length > 0 ? (\n              <InlineAction\n                onClick={onClearLog}\n                icon={<Icon glyph=\"refresh\" strokeWidth={2.25} aria-hidden />}\n              >\n                Clear\n              </InlineAction>\n            ) : undefined\n          }\n        >\n          Live Log\n        </SectionHeader>\n        {eventLog.length === 0 ? (\n          <p className=\"text-[12px] text-text-muted leading-relaxed\">\n            Interact with the preview to see events appear here.\n          </p>\n        ) : (\n          // Dark-theme log surface — same hardcoded palette the CSS\n          // editor uses (#1e1e1e bg / #2a2a2a border / #d4d4d8 text).\n          // Intentionally bypasses design tokens for the same reason\n          // the code editor does: a developer-output surface should\n          // read as a developer-output surface regardless of the\n          // product's light/dark theme.\n          //\n          // Row layout: header row (time + name + target) plus an\n          // optional payload row indented to align under the event name\n          // (58px time column + 8px gap = 66px). `tabular-nums` keeps\n          // the timestamp column steady as digits change; `break-all`\n          // lets long payloads wrap rather than overflow. Single\n          // consumer for now — if a second log surface lands, extract\n          // `LogRow` then.\n          <div\n            style={{\n              backgroundColor: '#1e1e1e',\n              border: '1px solid #2a2a2a',\n              borderRadius: 8,\n              padding: '6px 10px',\n            }}\n          >\n            <ol className=\"font-mono text-[11px]\" style={{ color: '#d4d4d8' }}>\n              {eventLog.map((entry, i) => (\n                <li\n                  key={entry.id}\n                  className=\"py-1.5\"\n                  style={{\n                    // Thin divider in the dark palette — only between\n                    // entries, not above the first one.\n                    borderTop: i === 0 ? undefined : '1px solid #2a2a2a',\n                  }}\n                >\n                  <div className=\"flex items-baseline gap-2\">\n                    <span\n                      className=\"tabular-nums text-[10px] w-[58px] shrink-0\"\n                      style={{ color: '#71717a' }}\n                    >\n                      {new Date(entry.ts).toLocaleTimeString(undefined, {\n                        hour12: false,\n                        hour: '2-digit',\n                        minute: '2-digit',\n                        second: '2-digit',\n                      })}\n                    </span>\n                    <span className=\"font-semibold\" style={{ color: '#a5e8c2' }}>\n                      {entry.name}\n                    </span>\n                    <span\n                      className=\"ml-auto text-[10px] shrink-0\"\n                      style={{ color: '#71717a' }}\n                    >\n                      &lt;{entry.target}&gt;\n                    </span>\n                  </div>\n                  {entry.payload && entry.payload !== '{}' && (\n                    <div\n                      className=\"pl-[66px] mt-0.5 break-all\"\n                      style={{ color: '#d4d4d8' }}\n                    >\n                      {entry.payload}\n                    </div>\n                  )}\n                </li>\n              ))}\n            </ol>\n          </div>\n        )}\n      </div>\n      </div>\n    </div>\n  );\n}\n\nfunction renderEditor(\n  control: ComponentDef['styleProperties'][number]['control'],\n  args: {\n    label: string;\n    value: string | number | boolean;\n    onChange: (v: string | number | boolean) => void;\n    prop: ComponentDef['styleProperties'][number];\n  },\n): ReactNode {\n  const { label, value, onChange, prop } = args;\n  switch (control) {\n    case 'color':\n      return <ColorPicker label={label} value={value as string} onChange={onChange} />;\n    case 'number':\n      return (\n        <NumberInput\n          label={label}\n          value={value as number}\n          onChange={onChange}\n          min={prop.min}\n          max={prop.max}\n          step={prop.step}\n          unit={prop.unit}\n        />\n      );\n    case 'slider':\n      return (\n        <SliderInput\n          label={label}\n          value={value as number}\n          onChange={onChange}\n          min={prop.min ?? 0}\n          max={prop.max ?? 100}\n          step={prop.step ?? 1}\n          unit={prop.unit}\n        />\n      );\n    case 'select':\n      return (\n        <SelectInput\n          label={label}\n          value={value as string}\n          onChange={onChange}\n          options={(prop.options ?? []).map((o) => ({ value: o, label: o }))}\n        />\n      );\n    case 'toggle':\n      return <ToggleInput label={label} value={value as boolean} onChange={onChange} />;\n    case 'text':\n      return <TextInput label={label} value={value as string} onChange={onChange} />;\n  }\n}\n\nfunction PropertyRow({\n  cascadeCount,\n  onCascade,\n  category,\n  propLabel,\n  synced,\n  justMatched,\n  isOverridden,\n  onReset,\n  children,\n}: {\n  cascadeCount: number;\n  onCascade: () => void;\n  category: string;\n  propLabel: string;\n  synced: boolean;\n  justMatched: boolean;\n  isOverridden: boolean;\n  onReset: () => void;\n  children: ReactNode;\n}) {\n  // 16×16 footprint matches the previous `h-4 w-4` chrome — IconButton's\n  // default is 32×32, so we override via the size var. Absolute\n  // positioning lives inline since this is a panel-specific placement\n  // (centred to the field row), not part of the atom's API.\n  const resetIconStyle: CSSProperties = {\n    ['--uxm-icon-button-size' as string]: '16px',\n    color: 'var(--color-text-subtle)',\n    position: 'absolute',\n    right: 0,\n    top: '50%',\n    transform: 'translateY(-50%)',\n  };\n  const resetButton = isOverridden ? (\n    <IconButton\n      onClick={onReset}\n      title={`Reset ${propLabel} to default`}\n      aria-label={`Reset ${propLabel} to default`}\n      style={resetIconStyle}\n    >\n      <Icon glyph=\"refresh\" size={12} strokeWidth={2.25} aria-hidden />\n    </IconButton>\n  ) : null;\n\n  if (cascadeCount === 0) {\n    return (\n      <div className=\"relative pr-5\">\n        {children}\n        {resetButton}\n      </div>\n    );\n  }\n\n  // Show post-cascade confirmation briefly; once that fades, hide the link until the value diverges again.\n  const hideLink = synced && !justMatched;\n\n  return (\n    <div className=\"pl-3 -ml-3 border-l-2 border-accent-bold/30\">\n      <div className=\"relative pr-5\">\n        {children}\n        {resetButton}\n      </div>\n      {!hideLink && (\n        justMatched ? (\n          // The success-state confirmation is intentionally left as a plain\n          // span — it's a one-off transient state (\"just matched\"), not a\n          // tappable action, so it doesn't fit InlineAction's button shape.\n          <span className=\"mt-1.5 inline-flex items-center gap-1 text-[10px] font-medium text-accent-bold\">\n            <Icon glyph=\"check\" size={10} strokeWidth={3} />\n            Matched in {cascadeCount} other {category}\n          </span>\n        ) : (\n          <div className=\"mt-1.5\">\n            <InlineAction\n              onClick={onCascade}\n              title={`Apply \"${propLabel}\" to ${cascadeCount} other ${category}`}\n              icon={<Icon glyph=\"arrow-down\" strokeWidth={2.5} />}\n            >\n              Match in {cascadeCount} other {category}\n            </InlineAction>\n          </div>\n        )\n      )}\n    </div>\n  );\n}\n\n/**\n * Dev tab — API section. Shows the developer-facing component API:\n *\n *   1. **Import** — copy-button block with the exact `import { ... }` line.\n *   2. **Props** — table of props with type / required / default / desc.\n *   3. **Usage** — JSX snippet seeded from the current variant selection\n *      (so what's shown matches what's previewed).\n *\n * Authored alongside the atom in the registry (`api` slot on\n * `ComponentDef`). A future build-time extractor could populate the\n * same slot from TypeScript interface declarations — the consumer\n * shape stays the same.\n *\n * Uses the same dark surface as the CSS editor for the code blocks\n * (#1e1e1e / #2a2a2a / #d4d4d8). Reads as \"developer output\" rather\n * than \"themable card content\" — matches what the user expects from\n * Storybook's Docs addon.\n */\nfunction ApiSection({\n  api,\n  currentVariants,\n}: {\n  api: NonNullable<ComponentDef['api']>;\n  currentVariants: Record<string, string | number | boolean>;\n}) {\n  const importLine = formatImport(api);\n  const usageSnippet = formatUsage(api, currentVariants);\n  return (\n    <div>\n      <SectionHeader>API</SectionHeader>\n      <CodeBlock label=\"Import\" code={importLine} />\n      {api.props.length > 0 && (\n        <div className=\"mt-4\">\n          <div className=\"mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-text-subtle\">\n            Props\n          </div>\n          <div className=\"space-y-2\">\n            {api.props.map((p) => (\n              // Card atom for each prop row — same treatment as the\n              // Emits cards so the two sections read as one family.\n              <Card key={p.name} style={{ padding: '8px 12px', borderRadius: 6 }}>\n                <div className=\"flex items-baseline gap-2 flex-wrap\">\n                  <code className=\"text-[12px] font-semibold text-accent-bold\">\n                    {p.name}\n                  </code>\n                  {p.required && (\n                    <span className=\"text-[9px] font-semibold uppercase tracking-wider text-warm\">\n                      required\n                    </span>\n                  )}\n                  <code className=\"text-[11px] text-text-muted break-all\">\n                    {p.type}\n                  </code>\n                </div>\n                {p.defaultValue !== undefined && (\n                  <div className=\"mt-0.5 text-[11px]\">\n                    <span className=\"text-text-subtle\">default: </span>\n                    <code className=\"text-text\">{p.defaultValue}</code>\n                  </div>\n                )}\n                {p.description && (\n                  <p className=\"mt-1 text-[11px] text-text-muted leading-relaxed\">\n                    {p.description}\n                  </p>\n                )}\n              </Card>\n            ))}\n          </div>\n        </div>\n      )}\n      <div className=\"mt-4\">\n        <CodeBlock label=\"Usage\" code={usageSnippet} />\n      </div>\n    </div>\n  );\n}\n\n/**\n * Compact dark-surface code-block for the API section — used for both\n * the import line and the usage snippet. Same hardcoded VS Code-ish\n * palette as the Live Log: a developer-output surface should read\n * the same regardless of the product's light/dark theme.\n */\nfunction CodeBlock({ label, code }: { label: string; code: string }) {\n  return (\n    <div>\n      <div className=\"mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-text-subtle\">\n        {label}\n      </div>\n      <pre\n        className=\"font-mono text-[11px] whitespace-pre-wrap break-all\"\n        style={{\n          backgroundColor: '#1e1e1e',\n          border: '1px solid #2a2a2a',\n          borderRadius: 8,\n          padding: '8px 10px',\n          color: '#d4d4d8',\n          margin: 0,\n        }}\n      >\n        {code}\n      </pre>\n    </div>\n  );\n}\n\n/** Build the `import { X } from \"path\"` line from the api slot. */\nfunction formatImport(api: NonNullable<ComponentDef['api']>): string {\n  const names = Array.isArray(api.importNames)\n    ? api.importNames.join(', ')\n    : api.importNames;\n  return `import { ${names} } from \"${api.importPath}\";`;\n}\n\n/**\n * Build a JSX usage snippet from the api slot + the user's current\n * variant selection in the editor. Variants flow in as props, which\n * matches how the atoms actually consume them (Chip's `mode`, Slider's\n * `mode`, button family's nothing — variants are visual previews).\n *\n * Variants whose value equals the canonical default (\"default\" state,\n * etc.) are omitted to keep the snippet readable. The user can always\n * see them in the Props table.\n */\nfunction formatUsage(\n  api: NonNullable<ComponentDef['api']>,\n  variants: Record<string, string | number | boolean>,\n): string {\n  const name = Array.isArray(api.importNames) ? api.importNames[0] : api.importNames;\n  const variantProps = Object.entries(variants)\n    // Skip the boilerplate-y \"state\" variant — it's a visual preview\n    // selector in the editor, not a real prop on most atoms.\n    .filter(([k, v]) => k !== 'state' && v !== 'default')\n    .map(([k, v]) => (typeof v === 'string' ? `${k}=\"${v}\"` : `${k}={${v}}`));\n  const attrs = variantProps.length > 0 ? ' ' + variantProps.join(' ') : '';\n  return `<${name}${attrs}>\\n  …\\n</${name}>`;\n}\n\n/**\n * Dev tab — Variant Matrix section. Renders every variant × variant\n * combination of the current component as a thumbnail grid. Each cell\n * is the real Preview component (same `previewMap` the canvas uses)\n * with variants locked to that cell's combination; styles flow from\n * the user's current overrides so saved theming carries through.\n *\n * Layout strategy:\n *   - 1 variant   → single column of N thumbnails\n *   - 2 variants  → 2D grid (variant 1 as columns, variant 2 as rows)\n *   - 3+ variants → first two as the matrix axes; remaining variants\n *                   stay at their default value (3-D grids don't read\n *                   well in a panel; if a particular axis matters,\n *                   the user can pick it in the Visual tab and re-\n *                   visit the matrix)\n *\n * Each cell:\n *   - `pointer-events: none` so the thumbnail doesn't capture clicks\n *     (matches the MobileGallery's read-only convention)\n *   - `overflow: hidden` so wide atoms (SideFlexpane, AppSidebar) clip\n *     rather than overflow the matrix\n *   - thin caption beneath labeling the variant value\n */\nfunction VariantMatrix({\n  def,\n  styles,\n  currentVariants,\n}: {\n  def: ComponentDef;\n  styles: Record<string, string | number | boolean>;\n  currentVariants: Record<string, string | number | boolean>;\n}) {\n  const Preview = previewMap[def.id];\n  const shell = usePreviewShell();\n  if (!Preview) {\n    return null;\n  }\n\n  // Filter variants suitable for matrix expansion. Two ineligibility\n  // rules — both about cells that \"don't make sense\":\n  //\n  //   1. Large-enum variants (`glyph` with 56 icons): content\n  //      selections, not visual variants. A 56×5 grid is pure noise.\n  //      Heuristic cap: 8 options.\n  //\n  //   2. Gating variants: a variant V is a \"gate\" if some OTHER variant\n  //      references it from a `showWhen` clause. Example: list-item's\n  //      `state` has `showWhen: { mode: \"interactive\" }`, so `mode` is\n  //      a gate. Expanding both as axes produces rows like (static,\n  //      hover) / (static, focus) / etc., where every cell collapses\n  //      to the same static rendering — wasted space. We instead lock\n  //      the gate to the value the dependent needs (here: \"interactive\")\n  //      and only expand the dependent.\n  const MATRIX_AXIS_OPTION_CAP = 8;\n\n  // Collect the gate map: gateKey → required value (from the FIRST\n  // dependent's showWhen). Most components have a single dependent per\n  // gate, so \"first wins\" is fine in practice; if conflicts ever come\n  // up, the registry author can pick the variant order they want.\n  const gateLocks: Record<string, string> = {};\n  for (const v of def.layoutVariants) {\n    const showWhen = (v as { showWhen?: Record<string, string> }).showWhen;\n    if (!showWhen) continue;\n    for (const [gateKey, gateVal] of Object.entries(showWhen)) {\n      if (!(gateKey in gateLocks)) gateLocks[gateKey] = gateVal;\n    }\n  }\n\n  const expandable = def.layoutVariants.filter(\n    (v) =>\n      v.options.length <= MATRIX_AXIS_OPTION_CAP &&\n      !(v.key in gateLocks),\n  );\n\n  // If nothing's expandable, the matrix has nothing meaningful to\n  // compare — hide the section. The Visual tab still covers variant\n  // selection via the picker.\n  if (expandable.length === 0) {\n    return null;\n  }\n\n  const [axisX, axisY] = expandable;\n  // Base variants — three priority layers:\n  //   1. Gate locks (from another variant's showWhen) win first, so\n  //      the matrix shows the dependent variant in the context where\n  //      it actually applies.\n  //   2. User's current selection from the editor (so e.g. the icon-\n  //      button matrix reflects the user's picked glyph).\n  //   3. Variant defaults as a final fallback.\n  const baseVariants: Record<string, string> = {};\n  for (const v of def.layoutVariants) {\n    baseVariants[v.key] =\n      gateLocks[v.key]\n      ?? (currentVariants[v.key] as string | undefined)\n      ?? v.defaultValue;\n  }\n\n  const xs = axisX.options;\n  const ys = axisY ? axisY.options : null;\n\n  const renderCell = (cellVariants: Record<string, string>, caption: string) => (\n    <div\n      key={caption}\n      className=\"rounded border border-border bg-card overflow-hidden\"\n    >\n      <div\n        className=\"flex items-center justify-center p-3\"\n        style={{\n          // Read-only thumbnail. Clip wide atoms so they don't blow up\n          // the cell width; centred so small atoms stay readable.\n          //\n          // Sizing: minHeight gives small atoms (icon buttons, chips) a\n          // consistent visual weight; maxHeight caps tall atoms (Card,\n          // LifecycleNodeCard) so a single oversized atom can't make\n          // every row in a 2D grid 200px tall. Scale 0.6 is the sweet\n          // spot for the atoms we ship today — wide ones (SideFlexpane,\n          // AppSidebar) still clip, but everything fits the cell width\n          // budget at typical panel sizes.\n          pointerEvents: 'none',\n          minHeight: 80,\n          maxHeight: 140,\n          overflow: 'hidden',\n        }}\n      >\n        <div\n          className=\"uxm-matrix-cell-preview\"\n          style={{ transform: 'scale(0.6)', transformOrigin: 'center' }}\n        >\n          <Preview\n            styles={styles as PreviewProps['styles']}\n            variants={cellVariants}\n            componentId={def.id}\n            shell={shell}\n          />\n        </div>\n      </div>\n      <div className=\"border-t border-border/60 px-2 py-1 text-[10px] font-medium text-text-muted truncate text-center\">\n        {caption}\n      </div>\n    </div>\n  );\n\n  return (\n    <div>\n      <SectionHeader>Variant Matrix</SectionHeader>\n      {/* Horizontal-scroll wrapper. Cells have a 120px minimum so they\n          stay readable; if the panel is too narrow to show every column\n          at that width, the matrix scrolls instead of crushing cells\n          into illegibility. -mx-5 + px-5 lets the scroll surface bleed\n          to the panel edges so a thumb shadow at the right edge hints\n          at \"more content\". */}\n      <div className=\"-mx-5 overflow-x-auto px-5\">\n        {ys ? (\n          // 2D grid: ys as rows, xs as columns. Each row has a leading\n          // row-label cell so the user can read both axes without\n          // hovering captions. `minmax(120px, 1fr)` gives cells a\n          // legible floor — narrower than that and atoms (esp. Card,\n          // StatCard, button-with-icon) lose meaningful detail even at\n          // 0.6 scale.\n          <div\n            className=\"grid gap-1.5\"\n            style={{\n              gridTemplateColumns: `auto repeat(${xs.length}, minmax(120px, 1fr))`,\n              minWidth: 'min-content',\n            }}\n          >\n            {/* corner cell + column headers */}\n            <div />\n            {xs.map((x) => (\n              <div\n                key={`xh-${x.value}`}\n                className=\"text-[10px] font-semibold uppercase tracking-wider text-text-subtle text-center truncate\"\n              >\n                {x.label}\n              </div>\n            ))}\n            {ys.map((y) => (\n              <Fragment key={`row-${y.value}`}>\n                <div className=\"self-center pr-1 text-[10px] font-semibold uppercase tracking-wider text-text-subtle text-right truncate\">\n                  {y.label}\n                </div>\n                {xs.map((x) => {\n                  const cellV: Record<string, string> = {\n                    ...baseVariants,\n                    [axisX.key]: x.value,\n                    [axisY.key]: y.value,\n                  };\n                  return renderCell(cellV, `${x.label} / ${y.label}`);\n                })}\n              </Fragment>\n            ))}\n          </div>\n        ) : (\n          // 1D row of thumbnails. `auto-fit` lets it reflow to multiple\n          // rows on narrow panes — when the parent is wide enough we\n          // get one row; when it isn't, cells wrap rather than scroll.\n          <div\n            className=\"grid gap-1.5\"\n            style={{\n              gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',\n            }}\n          >\n            {xs.map((x) => {\n              const cellV: Record<string, string> = {\n                ...baseVariants,\n                [axisX.key]: x.value,\n              };\n              return renderCell(cellV, x.label);\n            })}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_ui","v"]}

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

@@ -0,0 +1,12 @@
+export declare function PropertiesPanel({ orientation, onToggleOrientation, }: {
+    /**
+     * Accepted for API compatibility with host portals that mount the panel
+     * embedded. No longer switches the surface color — the properties panel
+     * is always white (`bg-card`) so its text keeps full contrast in both the
+     * standalone studio and an embedded portal.
+     */
+    embed?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    onToggleOrientation?: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=properties-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"properties-panel.d.ts","sourceRoot":"","sources":["../../../src/studio/shell/properties-panel.tsx"],"names":[],"mappings":"AA4BA,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,kDAieA"}