@viax.io/uxm 4.38.0 → 4.40.0

package/dist/studio/persistence/generate-css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/studio/persistence/generate-css.ts"],"sourcesContent":["import type { AllOverrides } from './types';\nimport type { BrandConfig } from '../lib/types';\n\n/**\n * Pure CSS generator for UXM Studio overrides.\n *\n * Single source of truth (R5): the modo Hono `/api/uxm/save` route imports\n * `generateOverridesCss` from here instead of keeping its own copy. No Node\n * APIs — runs in browser (client export) and server alike.\n *\n * Emits a stylesheet from per-component style overrides plus brand config\n * (font, logo/icon URLs, brand token blocks). All attacker-controlled brand\n * values are sanitised before interpolation because the output is served to\n * every browser session.\n */\n\nconst BRAND_FONT_WEIGHTS = 'wght@400;500;600;700';\n\nexport function fontFileUrl(fontFamily: string): string {\n  const encoded = fontFamily.trim().replace(/\\s+/g, '+');\n  return `https://fonts.googleapis.com/css2?family=${encoded}:${BRAND_FONT_WEIGHTS}&display=swap`;\n}\n\nconst REAL_CSS_PROPS = new Set([\n  'background', 'backgroundColor',\n  'color',\n  'border', 'borderColor', 'borderRadius', 'borderWidth', 'borderStyle',\n  'padding', 'paddingX', 'paddingY', 'margin',\n  'gap', 'rowGap', 'columnGap',\n  'width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight',\n  'fontSize', 'fontWeight', 'fontFamily', 'lineHeight',\n  'opacity',\n  'cursor', 'display', 'position', 'overflow', 'direction',\n]);\n\n// Per-component selector overrides for the emitted rule. Defaults to\n// `.uxm-{id}`. Override when the atom renders the styled element via a PORTAL\n// (Listbox / Popover panel mounts to document.body): CSS custom properties\n// cascade DOWN from the declaring element, so vars on the in-page wrapper\n// never reach a portaled descendant. Emit on BOTH wrapper and panel selector.\nconst PER_COMPONENT_SELECTOR: Record<string, string> = {\n  listbox: '.uxm-listbox, .uxm-listbox__panel',\n  // Menu mirrors Listbox: the `.uxm-menu` wrapper lives in-page around the\n  // trigger, but the `.uxm-menu__panel` portals to document.body, so vars on\n  // the wrapper never reach it. Emit on both so the panel carries them.\n  menu: '.uxm-menu, .uxm-menu__panel',\n  // PhoneInput no longer needs a panel-scoped selector: its country picker\n  // now delegates to the shared `Listbox`, whose portaled panel already gets\n  // its vars via the `listbox` entry above. All `--uxm-phone-input-*` knobs\n  // target the in-page field, so the default `.uxm-phone-input` selector is\n  // correct.\n};\n\n// One knob → one variable. A multi-target (string[]) form was briefly added so\n// Card's Row Gap could write both the Stack and Cluster gap vars; that was the\n// only use, and it was the wrong shape (see the `card` entry below), so the\n// mapping stays single-target on purpose — a knob that themes a SIBLING atom's\n// var cannot win against that atom's own knob.\nconst PER_COMPONENT_MAPPING: Record<string, Record<string, string>> = {\n  'input-with-icon': {\n    backgroundColor: '--uxm-input-with-icon-bg',\n    borderColor: '--uxm-input-with-icon-border-color',\n    borderRadius: '--uxm-input-with-icon-radius',\n    paddingX: '--uxm-input-with-icon-padding-x',\n    paddingY: '--uxm-input-with-icon-padding-y',\n    fontSize: '--uxm-input-with-icon-font-size',\n    color: '--uxm-input-with-icon-color',\n  },\n  'input-text': {\n    backgroundColor: '--uxm-input-text-bg',\n    borderColor: '--uxm-input-text-border-color',\n    color: '--uxm-input-text-color',\n    borderRadius: '--uxm-input-text-border-radius',\n    paddingX: '--uxm-input-text-padding-x',\n    paddingY: '--uxm-input-text-padding-y',\n    fontSize: '--uxm-input-text-font-size',\n  },\n  'number-input': {\n    backgroundColor: '--uxm-number-input-bg',\n    borderColor: '--uxm-number-input-border-color',\n    color: '--uxm-number-input-color',\n    borderRadius: '--uxm-number-input-border-radius',\n    paddingX: '--uxm-number-input-padding-x',\n    paddingY: '--uxm-number-input-padding-y',\n    fontSize: '--uxm-number-input-font-size',\n  },\n  // Every key below collides with REAL_CSS_PROPS. The atom passes its class to\n  // `Listbox`, so the emitted rule lands on that in-page ROOT while the styled\n  // element is the `__trigger` child, which declares its own `color`,\n  // `border-color`, `font-size` and `gap` from `--uxm-language-switcher-*` and\n  // therefore beats anything inherited — every one of these would be a silent\n  // no-op. Padding is worse: `padding-inline` on the root pads OUTSIDE the\n  // button while the trigger keeps its default 10px/7px.\n  'language-switcher': {\n    color: '--uxm-language-switcher-color',\n    borderColor: '--uxm-language-switcher-border-color',\n    fontSize: '--uxm-language-switcher-font-size',\n    gap: '--uxm-language-switcher-gap',\n    paddingX: '--uxm-language-switcher-padding-x',\n    paddingY: '--uxm-language-switcher-padding-y',\n  },\n  // Without this entry `fontSize` falls through REAL_CSS_PROPS and emits a\n  // literal `font-size` on `.uxm-color-input`, which the atom's own children\n  // (`__value-field`, `__format`) always beat — so the knob did nothing at all.\n  'color-input': {\n    fontSize: '--uxm-color-input-font-size',\n  },\n  // Every key here collides with REAL_CSS_PROPS, where the generic fallback\n  // emits a REAL property on `.uxm-code-editor` instead of a var. That root is\n  // pure chrome — the text lives in `__input` / `__gutter-lines`, which declare\n  // their own `color` / `font-size` / `line-height` and always beat inherited\n  // values, so Text / Font Size / Line Height would be silent no-ops. Padding is\n  // worse than a no-op: `padding-inline` on the root pads OUTSIDE the code while\n  // `--uxm-code-editor-padding-x` stays unset, so the gutter's absolutely\n  // positioned `left` keeps its 14px default and the numbers leave their column.\n  // Same defect as the `color-input` entry above.\n  'code-editor': {\n    backgroundColor: '--uxm-code-editor-bg',\n    borderColor: '--uxm-code-editor-border-color',\n    color: '--uxm-code-editor-color',\n    borderRadius: '--uxm-code-editor-border-radius',\n    paddingX: '--uxm-code-editor-padding-x',\n    paddingY: '--uxm-code-editor-padding-y',\n    fontSize: '--uxm-code-editor-font-size',\n    lineHeight: '--uxm-code-editor-line-height',\n    minHeight: '--uxm-code-editor-min-height',\n  },\n  'currency-input': {\n    backgroundColor: '--uxm-currency-input-background-color',\n    borderColor: '--uxm-currency-input-border-color',\n    borderRadius: '--uxm-currency-input-border-radius',\n    paddingX: '--uxm-currency-input-padding-x',\n    paddingY: '--uxm-currency-input-padding-y',\n    fontSize: '--uxm-currency-input-font-size',\n    color: '--uxm-currency-input-color',\n  },\n  textarea: {\n    backgroundColor: '--uxm-textarea-bg',\n    borderColor: '--uxm-textarea-border-color',\n    color: '--uxm-textarea-color',\n    minHeight: '--uxm-textarea-min-height',\n    borderRadius: '--uxm-textarea-border-radius',\n    paddingX: '--uxm-textarea-padding-x',\n    paddingY: '--uxm-textarea-padding-y',\n    fontSize: '--uxm-textarea-font-size',\n  },\n  'file-upload': {\n    backgroundColor: '--uxm-file-upload-bg',\n    borderColor: '--uxm-file-upload-border-color',\n    color: '--uxm-file-upload-color',\n    borderRadius: '--uxm-file-upload-border-radius',\n    borderStyle: '--uxm-file-upload-border-style',\n    borderWidth: '--uxm-file-upload-border-width',\n    paddingX: '--uxm-file-upload-padding-x',\n    paddingY: '--uxm-file-upload-padding-y',\n    minHeight: '--uxm-file-upload-min-height',\n    gap: '--uxm-file-upload-gap',\n    rowGap: '--uxm-file-upload-row-gap',\n  },\n  'select-dropdown': {\n    backgroundColor: '--uxm-select-dropdown-bg',\n    borderColor: '--uxm-select-dropdown-border-color',\n    color: '--uxm-select-dropdown-color',\n    borderRadius: '--uxm-select-dropdown-border-radius',\n    paddingX: '--uxm-select-dropdown-padding-x',\n    paddingY: '--uxm-select-dropdown-padding-y',\n    fontSize: '--uxm-select-dropdown-font-size',\n  },\n  'date-input': {\n    backgroundColor: '--uxm-date-input-background-color',\n    borderColor: '--uxm-date-input-border-color',\n    borderRadius: '--uxm-date-input-border-radius',\n    paddingX: '--uxm-date-input-padding-x',\n    paddingY: '--uxm-date-input-padding-y',\n    fontSize: '--uxm-date-input-font-size',\n    color: '--uxm-date-input-color',\n  },\n  'password-input': {\n    backgroundColor: '--uxm-password-input-background-color',\n    borderColor: '--uxm-password-input-border-color',\n    borderRadius: '--uxm-password-input-border-radius',\n    paddingX: '--uxm-password-input-padding-x',\n    paddingY: '--uxm-password-input-padding-y',\n    fontSize: '--uxm-password-input-font-size',\n    color: '--uxm-password-input-color',\n  },\n  'time-input': {\n    backgroundColor: '--uxm-time-input-background-color',\n    borderColor: '--uxm-time-input-border-color',\n    borderRadius: '--uxm-time-input-border-radius',\n    paddingX: '--uxm-time-input-padding-x',\n    paddingY: '--uxm-time-input-padding-y',\n    fontSize: '--uxm-time-input-font-size',\n    color: '--uxm-time-input-color',\n  },\n  'phone-input': {\n    backgroundColor: '--uxm-phone-input-background-color',\n    borderColor: '--uxm-phone-input-border-color',\n    borderRadius: '--uxm-phone-input-border-radius',\n    paddingX: '--uxm-phone-input-padding-x',\n    paddingY: '--uxm-phone-input-padding-y',\n    fontSize: '--uxm-phone-input-font-size',\n    color: '--uxm-phone-input-color',\n  },\n  calendar: {\n    backgroundColor: '--uxm-calendar-background-color',\n    borderColor: '--uxm-calendar-border-color',\n    borderRadius: '--uxm-calendar-border-radius',\n    padding: '--uxm-calendar-padding',\n  },\n  tabs: {\n    gap: '--uxm-tabs-gap',\n    paddingX: '--uxm-tabs-padding-x',\n    paddingY: '--uxm-tabs-padding-y',\n    fontSize: '--uxm-tabs-font-size',\n    fontWeight: '--uxm-tabs-font-weight',\n  },\n  'tabs-underline': {\n    gap: '--uxm-tabs-underline-gap',\n    paddingX: '--uxm-tabs-underline-padding-x',\n    paddingY: '--uxm-tabs-underline-padding-y',\n    fontSize: '--uxm-tabs-underline-font-size',\n    fontWeight: '--uxm-tabs-underline-font-weight',\n  },\n  'filter-tabs': {\n    gap: '--uxm-filter-tabs-gap',\n    paddingX: '--uxm-filter-tabs-padding-x',\n    paddingY: '--uxm-filter-tabs-padding-y',\n    fontSize: '--uxm-filter-tabs-font-size',\n    fontWeight: '--uxm-filter-tabs-font-weight',\n  },\n  'view-switcher': {\n    gap: '--uxm-view-switcher-gap',\n  },\n  'button-group': {\n    borderColor: '--uxm-button-group-border-color',\n    borderRadius: '--uxm-button-group-border-radius',\n    paddingX: '--uxm-button-group-padding-x',\n    paddingY: '--uxm-button-group-padding-y',\n    fontSize: '--uxm-button-group-font-size',\n  },\n  checkbox: {\n    borderRadius: '--uxm-checkbox-border-radius',\n    gap: '--uxm-checkbox-gap',\n  },\n  card: {\n    backgroundColor: '--uxm-card-bg',\n    borderColor: '--uxm-card-border-color',\n    borderRadius: '--uxm-card-radius',\n    padding: '--uxm-card-padding',\n    // `gap` (\"Header Gap\") collides with REAL_CSS_PROPS — the generic fallback\n    // would emit a literal `gap` property that `.uxm-card` never activates (the\n    // card is only a flex column via the `--gap` modifier). Route it to the var\n    // the modifier actually reads.\n    //\n    // There is deliberately NO Card knob for the CONTENT's row gap. It looks\n    // like it belongs here, but the row gap is owned by the nested Stack /\n    // Cluster, which already have their own Gap knobs — and those emit\n    // `--uxm-stack-gap` DIRECTLY on `.uxm-stack`, where a directly-set custom\n    // property always beats one inherited from `.uxm-card`. A Card-side knob\n    // would therefore lose the moment anyone themed Stack, while also leaking\n    // to every Stack/Cluster at any depth inside any card (custom properties\n    // inherit). One owner per visual property; Card owns only its own gap.\n    gap: '--uxm-card-gap',\n  },\n  'toggle-switch': {\n    width: '--uxm-toggle-switch-width',\n    height: '--uxm-toggle-switch-height',\n  },\n  'radio-group': {\n    gap: '--uxm-radio-group-gap',\n  },\n  loader: {\n    color: '--uxm-loader-color',\n    gap: '--uxm-loader-gap',\n  },\n  'data-table': {\n    borderColor: '--uxm-data-table-border-color',\n    fontSize: '--uxm-data-table-font-size',\n    borderRadius: '--uxm-data-table-border-radius',\n  },\n  'app-sidebar': {\n    borderColor: '--uxm-app-sidebar-border-color',\n    backgroundColor: '--uxm-app-sidebar-background-color',\n  },\n  // Every key here collides with REAL_CSS_PROPS, where the generic fallback\n  // emits the LITERAL css property on the root selector instead of the var.\n  //\n  // For `fontSize` / `fontWeight` that is a silent no-op rather than a mere\n  // detour: the atom reads those vars on `.uxm-sidebar-nav-trigger__value`, and\n  // a `font-size` landing on the root is beaten by the child's own declaration.\n  // The live workbench hides it — that path projects custom properties through\n  // the preview's `buildVars`, so the knob only dies once a brand is SAVED.\n  //\n  // The rest (padding, gap, radius) do sit on the root and would survive the\n  // literal route on source order alone, but they are mapped too: the sibling\n  // `sidebar-nav-item` maps all six, and leaving half of them to cascade luck\n  // invites exactly the question of which half.\n  'sidebar-nav-trigger': {\n    paddingX: '--uxm-sidebar-nav-trigger-padding-x',\n    paddingY: '--uxm-sidebar-nav-trigger-padding-y',\n    fontSize: '--uxm-sidebar-nav-trigger-font-size',\n    fontWeight: '--uxm-sidebar-nav-trigger-font-weight',\n    gap: '--uxm-sidebar-nav-trigger-gap',\n    borderRadius: '--uxm-sidebar-nav-trigger-border-radius',\n  },\n  'sidebar-nav-item': {\n    paddingX: '--uxm-sidebar-nav-item-padding-x',\n    paddingY: '--uxm-sidebar-nav-item-padding-y',\n    fontSize: '--uxm-sidebar-nav-item-font-size',\n    fontWeight: '--uxm-sidebar-nav-item-font-weight',\n    gap: '--uxm-sidebar-nav-item-gap',\n    borderRadius: '--uxm-sidebar-nav-item-border-radius',\n  },\n  'explorer-list-item': {\n    paddingX: '--uxm-explorer-list-item-padding-x',\n    paddingY: '--uxm-explorer-list-item-padding-y',\n    fontSize: '--uxm-explorer-list-item-font-size',\n    fontWeight: '--uxm-explorer-list-item-font-weight',\n    gap: '--uxm-explorer-list-item-gap',\n    borderRadius: '--uxm-explorer-list-item-border-radius',\n  },\n  'app-top-bar': {\n    borderColor: '--uxm-app-top-bar-border-color',\n    backgroundColor: '--uxm-app-top-bar-background-color',\n    height: '--uxm-app-top-bar-height',\n    paddingX: '--uxm-app-top-bar-padding-x',\n    gap: '--uxm-app-top-bar-gap',\n  },\n  'explorer-section': {\n    paddingX: '--uxm-explorer-section-padding-x',\n    paddingY: '--uxm-explorer-section-padding-y',\n    borderRadius: '--uxm-explorer-section-border-radius',\n    gap: '--uxm-explorer-section-gap',\n    fontSize: '--uxm-explorer-section-font-size',\n    fontWeight: '--uxm-explorer-section-font-weight',\n  },\n  'number-field': {\n    backgroundColor: '--uxm-number-field-input-bg',\n    borderColor: '--uxm-number-field-input-border',\n    color: '--uxm-number-field-input-color',\n    borderRadius: '--uxm-number-field-input-radius',\n    paddingX: '--uxm-number-field-input-padding-x',\n    paddingY: '--uxm-number-field-input-padding-y',\n    fontSize: '--uxm-number-field-font-size',\n    gap: '--uxm-number-field-gap',\n  },\n  'icon-button': {\n    color: '--uxm-icon-button-color',\n    backgroundColor: '--uxm-icon-button-bg',\n    hoverBackgroundColor: '--uxm-icon-button-hover-bg',\n    activeBackgroundColor: '--uxm-icon-button-active-bg',\n    borderRadius: '--uxm-icon-button-radius',\n  },\n  'button-primary': {\n    backgroundColor: '--uxm-button-primary-background-color',\n    color: '--uxm-button-primary-color',\n    borderRadius: '--uxm-button-primary-border-radius',\n    fontSize: '--uxm-button-primary-font-size',\n    fontWeight: '--uxm-button-primary-font-weight',\n    paddingX: '--uxm-button-primary-padding-x',\n    paddingY: '--uxm-button-primary-padding-y',\n  },\n  'button-secondary': {\n    backgroundColor: '--uxm-button-secondary-background-color',\n    color: '--uxm-button-secondary-color',\n    borderColor: '--uxm-button-secondary-border-color',\n    borderRadius: '--uxm-button-secondary-border-radius',\n    fontSize: '--uxm-button-secondary-font-size',\n    fontWeight: '--uxm-button-secondary-font-weight',\n    paddingX: '--uxm-button-secondary-padding-x',\n    paddingY: '--uxm-button-secondary-padding-y',\n  },\n  'button-tertiary': {\n    backgroundColor: '--uxm-button-tertiary-background-color',\n    color: '--uxm-button-tertiary-color',\n    borderColor: '--uxm-button-tertiary-border-color',\n    borderRadius: '--uxm-button-tertiary-border-radius',\n    fontSize: '--uxm-button-tertiary-font-size',\n    fontWeight: '--uxm-button-tertiary-font-weight',\n    paddingX: '--uxm-button-tertiary-padding-x',\n    paddingY: '--uxm-button-tertiary-padding-y',\n  },\n  'button-ghost': {\n    backgroundColor: '--uxm-button-ghost-background-color',\n    color: '--uxm-button-ghost-color',\n    borderRadius: '--uxm-button-ghost-border-radius',\n    fontSize: '--uxm-button-ghost-font-size',\n    fontWeight: '--uxm-button-ghost-font-weight',\n    paddingX: '--uxm-button-ghost-padding-x',\n    paddingY: '--uxm-button-ghost-padding-y',\n  },\n  'button-danger': {\n    backgroundColor: '--uxm-button-danger-background-color',\n    color: '--uxm-button-danger-color',\n    borderColor: '--uxm-button-danger-border-color',\n    borderRadius: '--uxm-button-danger-border-radius',\n    fontSize: '--uxm-button-danger-font-size',\n    fontWeight: '--uxm-button-danger-font-weight',\n    paddingX: '--uxm-button-danger-padding-x',\n    paddingY: '--uxm-button-danger-padding-y',\n  },\n  'button-with-icon': {\n    backgroundColor: '--uxm-button-with-icon-background-color',\n    color: '--uxm-button-with-icon-color',\n    borderColor: '--uxm-button-with-icon-border-color',\n    borderRadius: '--uxm-button-with-icon-border-radius',\n    fontSize: '--uxm-button-with-icon-font-size',\n    fontWeight: '--uxm-button-with-icon-font-weight',\n    paddingX: '--uxm-button-with-icon-padding-x',\n    paddingY: '--uxm-button-with-icon-padding-y',\n  },\n  'button-icon': {\n    backgroundColor: '--uxm-button-icon-background-color',\n    color: '--uxm-button-icon-color',\n    borderRadius: '--uxm-button-icon-border-radius',\n  },\n  'back-link': {\n    color: '--uxm-back-link-color',\n    fontSize: '--uxm-back-link-font-size',\n    fontWeight: '--uxm-back-link-font-weight',\n    gap: '--uxm-back-link-gap',\n  },\n  breadcrumb: {\n    fontSize: '--uxm-breadcrumb-font-size',\n    gap: '--uxm-breadcrumb-gap',\n  },\n  disclosure: {\n    paddingX: '--uxm-disclosure-padding-x',\n    paddingY: '--uxm-disclosure-padding-y',\n    fontSize: '--uxm-disclosure-font-size',\n    gap: '--uxm-disclosure-gap',\n    borderRadius: '--uxm-disclosure-border-radius',\n  },\n  'side-flexpane': {\n    paddingX: '--uxm-side-flexpane-padding-x',\n    paddingY: '--uxm-side-flexpane-padding-y',\n    backgroundColor: '--uxm-side-flexpane-background-color',\n    borderColor: '--uxm-side-flexpane-border-color',\n    borderRadius: '--uxm-side-flexpane-border-radius',\n    width: '--uxm-side-flexpane-width',\n  },\n  'list-item': {\n    paddingX: '--uxm-list-item-padding-x',\n    paddingY: '--uxm-list-item-padding-y',\n    fontSize: '--uxm-list-item-font-size',\n    gap: '--uxm-list-item-gap',\n    borderRadius: '--uxm-list-item-border-radius',\n    borderColor: '--uxm-list-item-border-color',\n  },\n  'pill-select': {\n    backgroundColor: '--uxm-pill-select-bg',\n    borderColor: '--uxm-pill-select-border-color',\n    paddingX: '--uxm-pill-select-padding-x',\n    paddingY: '--uxm-pill-select-padding-y',\n  },\n  modal: {\n    backgroundColor: '--uxm-modal-background-color',\n    borderColor: '--uxm-modal-border-color',\n    borderRadius: '--uxm-modal-border-radius',\n    paddingX: '--uxm-modal-padding-x',\n    paddingY: '--uxm-modal-padding-y',\n  },\n  toast: {\n    backgroundColor: '--uxm-toast-background-color',\n    color: '--uxm-toast-color',\n    borderColor: '--uxm-toast-border-color',\n    borderRadius: '--uxm-toast-border-radius',\n    paddingX: '--uxm-toast-padding-x',\n    paddingY: '--uxm-toast-padding-y',\n    fontSize: '--uxm-toast-font-size',\n  },\n  avatar: {\n    backgroundColor: '--uxm-avatar-background-color',\n    borderColor: '--uxm-avatar-border-color',\n    borderRadius: '--uxm-avatar-border-radius',\n    borderWidth: '--uxm-avatar-border-width',\n    color: '--uxm-avatar-color',\n    fontSize: '--uxm-avatar-font-size',\n    fontWeight: '--uxm-avatar-font-weight',\n  },\n  banner: {\n    borderRadius: '--uxm-banner-border-radius',\n    paddingX: '--uxm-banner-padding-x',\n    paddingY: '--uxm-banner-padding-y',\n    fontSize: '--uxm-banner-font-size',\n  },\n  'bulk-action-bar': {\n    backgroundColor: '--uxm-bulk-action-bar-background-color',\n    color: '--uxm-bulk-action-bar-color',\n    borderColor: '--uxm-bulk-action-bar-border-color',\n    borderRadius: '--uxm-bulk-action-bar-border-radius',\n    paddingX: '--uxm-bulk-action-bar-padding-x',\n    paddingY: '--uxm-bulk-action-bar-padding-y',\n    gap: '--uxm-bulk-action-bar-gap',\n    fontSize: '--uxm-bulk-action-bar-font-size',\n  },\n  cluster: {\n    gap: '--uxm-cluster-gap',\n  },\n  'config-component-row': {\n    padding: '--uxm-config-component-row-padding',\n    borderRadius: '--uxm-config-component-row-radius',\n  },\n  'config-segment-item': {\n    paddingX: '--uxm-config-segment-item-padding-x',\n    paddingY: '--uxm-config-segment-item-padding-y',\n    borderRadius: '--uxm-config-segment-item-radius',\n  },\n  'detail-section': {\n    backgroundColor: '--uxm-detail-section-bg',\n    borderColor: '--uxm-detail-section-border-color',\n    borderRadius: '--uxm-detail-section-radius',\n    padding: '--uxm-detail-section-padding',\n  },\n  divider: {\n    color: '--uxm-divider-color',\n    gap: '--uxm-divider-gap',\n  },\n  'editable-cell': {\n    // Dimensions are per-size keys (smallPaddingX, mediumMaxWidth, …) that\n    // resolve via the generic `--uxm-editable-cell-{kebab(key)}` fallback in\n    // toCSS; only the value colour needs an explicit entry (`color` is in\n    // REAL_CSS_PROPS, so the fallback would emit a real CSS property that\n    // outranks the component layer).\n    color: '--uxm-editable-cell-color',\n    // RETIRED knobs, kept mapped on purpose. The per-size split replaced these\n    // four, but `generateOverridesCss` emits whatever keys are PERSISTED — not\n    // what the registry currently declares — so a config saved before the split\n    // still carries them. Without an entry here they'd fall through to\n    // REAL_CSS_PROPS / the paddingX-paddingY special case in toCSS and emit\n    // REAL `min-height` / `padding-inline` / `padding-block` declarations on\n    // `.uxm-editable-cell`, which land in a sheet loaded after the library CSS\n    // and would hard-override BOTH size presets (killing `medium`) and\n    // resurrect the min-height the size work deliberately removed. Mapped to\n    // their old, now-unread custom properties they are true no-ops instead.\n    // Safe to delete once persisted overrides are pruned against the registry.\n    minHeight: '--uxm-editable-cell-min-height',\n    paddingX: '--uxm-editable-cell-padding-x',\n    paddingY: '--uxm-editable-cell-padding-y',\n    // `maxWidth` joined them when the cap went per-size: it is in\n    // REAL_CSS_PROPS, so without this it would emit a real `max-width` that\n    // pins BOTH presets (and would silently re-cap `medium`, whose whole point\n    // is filling its container).\n    maxWidth: '--uxm-editable-cell-max-width',\n  },\n  'empty-state': {\n    padding: '--uxm-empty-state-padding',\n  },\n  'form-field': {\n    gap: '--uxm-form-field-gap',\n    // Per-tint label colours — the component reads `--uxm-form-field-label-\n    // tint-*` (see form-field.scss tone classes); the generic kebab fallback\n    // would emit `--uxm-form-field-tint-strong-color` etc., which nothing\n    // reads, so the saved colour would silently not apply.\n    tintStrongColor: '--uxm-form-field-label-tint-strong',\n    tintDefaultColor: '--uxm-form-field-label-tint-default',\n    tintMutedColor: '--uxm-form-field-label-tint-muted',\n    // MIGRATION — `labelColor` was the single label-colour knob the tints\n    // replaced. It is gone from the registry, but `generateOverridesCss` emits\n    // whatever is PERSISTED, and its generic fallback lands on\n    // `--uxm-form-field-label-color` — the very var the tint classes assign,\n    // at equal specificity from a later sheet. Left alone it would beat ALL\n    // THREE tints and silently disable them, with no knob left in the panel to\n    // notice or clear it. Routed to the STRONG tint instead: strong was the\n    // old (only) label colour and is still the default tone, so a pre-split\n    // theme keeps the exact look it saved. A newly-saved `tintStrongColor`\n    // still wins — overrides are appended, so it emits after this one.\n    labelColor: '--uxm-form-field-label-tint-strong',\n  },\n  'icon-tile': {\n    borderRadius: '--uxm-icon-tile-radius',\n    iconBg: '--uxm-icon-tile-bg',\n    iconColor: '--uxm-icon-tile-color',\n  },\n  icon: {\n    color: '--uxm-icon-color',\n  },\n  'inline-action': {\n    color: '--uxm-inline-action-color',\n    fontSize: '--uxm-inline-action-font-size',\n    fontWeight: '--uxm-inline-action-font-weight',\n    gap: '--uxm-inline-action-gap',\n  },\n  'inline-filter': {\n    gap: '--uxm-inline-filter-gap',\n  },\n  'lifecycle-edge-label': {\n    paddingX: '--uxm-lifecycle-edge-label-padding-x',\n    paddingY: '--uxm-lifecycle-edge-label-padding-y',\n    borderRadius: '--uxm-lifecycle-edge-label-radius',\n    borderWidth: '--uxm-lifecycle-edge-label-border-width',\n    fontSize: '--uxm-lifecycle-edge-label-font-size',\n    fontWeight: '--uxm-lifecycle-edge-label-font-weight',\n  },\n  // Same rule as lifecycle-group-box below — only the REAL_CSS_PROPS collisions\n  // need an entry. `color` is the one that matters: a real `color` declaration\n  // on `.uxm-lifecycle-drop-slot` from a later sheet would paint the text but\n  // leave the dashes on the token, splitting a pair the atom deliberately drives\n  // from one variable. The shape-scoped knobs (`cardRadius`, `pillFontSize`, …)\n  // and `bg` need nothing: the generic `--uxm-{id}-{kebab}` rule already lands\n  // on the names the stylesheet reads.\n  'lifecycle-drop-slot': {\n    borderColor: '--uxm-lifecycle-drop-slot-border-color',\n    borderStyle: '--uxm-lifecycle-drop-slot-border-style',\n    borderWidth: '--uxm-lifecycle-drop-slot-border-width',\n    color: '--uxm-lifecycle-drop-slot-color',\n  },\n  // Only the knobs whose keys collide with REAL_CSS_PROPS need an entry: left\n  // to the generic path they'd emit a real `background-color` / `border-width` /\n  // `padding` on `.uxm-lifecycle-group-box` from a later sheet, hard-overriding\n  // the rule's own `var(--uxm-… , token)` chain — and `padding` is read BY THE\n  // CONSUMER off the custom property to inset the group's members, so a real\n  // declaration would leave that value unreadable.\n  //\n  // `blur` and the three `target*` knobs are absent on purpose: the generic\n  // `--uxm-{id}-{kebab}` rule already lands on the names the stylesheet reads.\n  'lifecycle-group-box': {\n    backgroundColor: '--uxm-lifecycle-group-box-bg',\n    borderColor: '--uxm-lifecycle-group-box-border-color',\n    borderWidth: '--uxm-lifecycle-group-box-border-width',\n    borderRadius: '--uxm-lifecycle-group-box-radius',\n    padding: '--uxm-lifecycle-group-box-padding',\n  },\n  'lifecycle-minimap': {\n    backgroundColor: '--uxm-lifecycle-minimap-bg',\n    borderColor: '--uxm-lifecycle-minimap-border-color',\n    borderRadius: '--uxm-lifecycle-minimap-radius',\n    width: '--uxm-lifecycle-minimap-width',\n    height: '--uxm-lifecycle-minimap-height',\n  },\n  'lifecycle-node-card': {\n    backgroundColor: '--uxm-lifecycle-node-card-bg',\n    borderColor: '--uxm-lifecycle-node-card-border-color',\n    borderRadius: '--uxm-lifecycle-node-card-radius',\n    paddingX: '--uxm-lifecycle-node-card-padding-x',\n    paddingY: '--uxm-lifecycle-node-card-padding-y',\n    width: '--uxm-lifecycle-node-card-width',\n    minHeight: '--uxm-lifecycle-node-card-min-height',\n  },\n  'lifecycle-terminal': {\n    backgroundColor: '--uxm-lifecycle-terminal-bg',\n    borderColor: '--uxm-lifecycle-terminal-border-color',\n    color: '--uxm-lifecycle-terminal-color',\n    borderRadius: '--uxm-lifecycle-terminal-radius',\n    width: '--uxm-lifecycle-terminal-width',\n    height: '--uxm-lifecycle-terminal-height',\n    fontSize: '--uxm-lifecycle-terminal-font-size',\n    fontWeight: '--uxm-lifecycle-terminal-font-weight',\n  },\n  'lifecycle-zoom-control': {\n    backgroundColor: '--uxm-lifecycle-zoom-bg',\n    borderColor: '--uxm-lifecycle-zoom-border-color',\n    borderRadius: '--uxm-lifecycle-zoom-radius',\n    fontSize: '--uxm-lifecycle-zoom-font-size',\n    color: '--uxm-lifecycle-zoom-color',\n    buttonSize: '--uxm-lifecycle-zoom-button-size',\n    iconColor: '--uxm-lifecycle-zoom-icon-color',\n  },\n  link: {\n    fontSize: '--uxm-link-font-size',\n    fontWeight: '--uxm-link-font-weight',\n  },\n  'meta-row': {\n    fontSize: '--uxm-meta-row-font-size',\n    color: '--uxm-meta-row-color',\n    gap: '--uxm-meta-row-gap',\n  },\n  'number-stepper': {\n    backgroundColor: '--uxm-number-stepper-input-bg',\n    borderColor: '--uxm-number-stepper-input-border',\n    color: '--uxm-number-stepper-input-color',\n    borderRadius: '--uxm-number-stepper-input-radius',\n    paddingX: '--uxm-number-stepper-input-padding-x',\n    paddingY: '--uxm-number-stepper-input-padding-y',\n    fontSize: '--uxm-number-stepper-font-size',\n    gap: '--uxm-number-stepper-gap',\n  },\n  'page-header': {\n    gap: '--uxm-page-header-gap',\n    paddingX: '--uxm-page-header-padding-x',\n    paddingY: '--uxm-page-header-padding-y',\n  },\n  'page-shell': {\n    backgroundColor: '--uxm-page-shell-bg',\n  },\n  'property-field': {\n    gap: '--uxm-property-field-gap',\n  },\n  'property-grid': {\n    rowGap: '--uxm-property-grid-row-gap',\n    columnGap: '--uxm-property-grid-column-gap',\n  },\n  'responsive-grid': {\n    gap: '--uxm-responsive-grid-gap',\n  },\n  'section-header': {\n    gap: '--uxm-section-header-gap',\n  },\n  stack: {\n    gap: '--uxm-stack-gap',\n  },\n  'stat-card': {\n    backgroundColor: '--uxm-stat-card-background-color',\n    borderColor: '--uxm-stat-card-border-color',\n    borderRadius: '--uxm-stat-card-border-radius',\n    padding: '--uxm-stat-card-padding',\n  },\n  tag: {\n    borderRadius: '--uxm-tag-border-radius',\n    fontWeight: '--uxm-tag-font-weight',\n  },\n  thumbnail: {\n    borderRadius: '--uxm-thumbnail-border-radius',\n    backgroundColor: '--uxm-thumbnail-background-color',\n    borderColor: '--uxm-thumbnail-border-color',\n    borderWidth: '--uxm-thumbnail-border-width',\n  },\n  'timeline-entry': {\n    gap: '--uxm-timeline-entry-gap',\n  },\n  'segment-row': {\n    paddingX: '--uxm-segment-row-padding-x',\n    paddingY: '--uxm-segment-row-padding-y',\n    gap: '--uxm-segment-row-gap',\n    dragColor: '--uxm-segment-row-drag-color',\n    dragHoverColor: '--uxm-segment-row-drag-hover-color',\n    chevronColor: '--uxm-segment-row-chevron-color',\n    chevronSize: '--uxm-segment-row-chevron-size',\n    accentColor: '--uxm-segment-row-accent-color',\n    accentWidth: '--uxm-segment-row-accent-width',\n    accentRadius: '--uxm-segment-row-accent-radius',\n    titleColor: '--uxm-segment-row-title-color',\n    titleSize: '--uxm-segment-row-title-size',\n    titleWeight: '--uxm-segment-row-title-weight',\n    countBg: '--uxm-segment-row-count-bg',\n    countColor: '--uxm-segment-row-count-color',\n    countSize: '--uxm-segment-row-count-size',\n    countPaddingX: '--uxm-segment-row-count-padding-x',\n    countPaddingY: '--uxm-segment-row-count-padding-y',\n    countRadius: '--uxm-segment-row-count-radius',\n    rowHoverBg: '--uxm-segment-row-row-hover-bg',\n    rowHoverRadius: '--uxm-segment-row-row-hover-radius',\n  },\n  'segment-card': {\n    borderColor: '--uxm-segment-card-border-color',\n    borderWidth: '--uxm-segment-card-border-width',\n    borderRadius: '--uxm-segment-card-border-radius',\n    backgroundColor: '--uxm-segment-card-background',\n    paddingX: '--uxm-segment-card-padding-x',\n    paddingY: '--uxm-segment-card-padding-y',\n    childrenInsetX: '--uxm-segment-card-children-inset-x',\n    childrenInsetY: '--uxm-segment-card-children-inset-y',\n    childrenGap: '--uxm-segment-card-children-gap',\n    dividerColor: '--uxm-segment-card-divider-color',\n    dividerWidth: '--uxm-segment-card-divider-width',\n  },\n  'component-row': {\n    paddingX: '--uxm-component-row-padding-x',\n    paddingY: '--uxm-component-row-padding-y',\n    gap: '--uxm-component-row-gap',\n    backgroundColor: '--uxm-component-row-background',\n    dragColor: '--uxm-component-row-drag-color',\n    dragHoverColor: '--uxm-component-row-drag-hover-color',\n    iconBadgeSize: '--uxm-component-row-icon-badge-size',\n    iconBadgeRadius: '--uxm-component-row-icon-badge-radius',\n    iconBadgePadding: '--uxm-component-row-icon-badge-padding',\n    nameColor: '--uxm-component-row-name-color',\n    nameSize: '--uxm-component-row-name-size',\n    nameWeight: '--uxm-component-row-name-weight',\n    typeLabelColor: '--uxm-component-row-type-label-color',\n    typeLabelSize: '--uxm-component-row-type-label-size',\n    typeLabelWeight: '--uxm-component-row-type-label-weight',\n    chevronColor: '--uxm-component-row-chevron-color',\n    chevronSize: '--uxm-component-row-chevron-size',\n    rowHoverBg: '--uxm-component-row-row-hover-bg',\n    rowHoverRadius: '--uxm-component-row-row-hover-radius',\n  },\n  'option-list': {\n    indent: '--uxm-option-list-indent',\n    backgroundColor: '--uxm-option-list-background',\n    borderColor: '--uxm-option-list-border-color',\n    borderWidth: '--uxm-option-list-border-width',\n    borderRadius: '--uxm-option-list-border-radius',\n    paddingX: '--uxm-option-list-padding-x',\n    paddingY: '--uxm-option-list-padding-y',\n    gap: '--uxm-option-list-gap',\n    rowPaddingX: '--uxm-option-list-row-padding-x',\n    rowPaddingY: '--uxm-option-list-row-padding-y',\n    dragColor: '--uxm-option-list-drag-color',\n    dragHoverColor: '--uxm-option-list-drag-hover-color',\n    bulletSize: '--uxm-option-list-bullet-size',\n    bulletGap: '--uxm-option-list-bullet-gap',\n    nameColor: '--uxm-option-list-name-color',\n    nameSize: '--uxm-option-list-name-size',\n    nameWeight: '--uxm-option-list-name-weight',\n    rowHoverBg: '--uxm-option-list-row-hover-bg',\n    rowHoverRadius: '--uxm-option-list-row-hover-radius',\n  },\n  tooltip: {\n    backgroundColor: '--uxm-tooltip-background-color',\n    color: '--uxm-tooltip-color',\n    borderRadius: '--uxm-tooltip-border-radius',\n    paddingX: '--uxm-tooltip-padding-x',\n    paddingY: '--uxm-tooltip-padding-y',\n    fontSize: '--uxm-tooltip-font-size',\n  },\n  'content-tooltip': {\n    backgroundColor: '--uxm-content-tooltip-background-color',\n    borderColor: '--uxm-content-tooltip-border-color',\n    borderRadius: '--uxm-content-tooltip-border-radius',\n    padding: '--uxm-content-tooltip-padding',\n    maxWidth: '--uxm-content-tooltip-max-width',\n  },\n  'type-overview-card': {\n    backgroundColor: '--uxm-typeoverview-bg',\n    borderColor: '--uxm-typeoverview-border-color',\n    borderRadius: '--uxm-typeoverview-radius',\n    padding: '--uxm-typeoverview-padding',\n    accentColor: '--uxm-typeoverview-accent-color',\n    accentWidth: '--uxm-typeoverview-accent-width',\n    iconBg: '--uxm-typeoverview-icon-bg',\n    iconColor: '--uxm-typeoverview-icon-color',\n    iconBoxSize: '--uxm-typeoverview-icon-tile-size',\n    iconRadius: '--uxm-typeoverview-icon-tile-radius',\n    labelSize: '--uxm-typeoverview-label-size',\n    labelColor: '--uxm-typeoverview-label-color',\n    valueSize: '--uxm-typeoverview-value-size',\n    valueColor: '--uxm-typeoverview-value-color',\n  },\n  // Without an entry here every knob would fall through to the generic\n  // `--uxm-{id}-{kebab}` rule and double the segment — `connectorIdleColor`\n  // under id `lifecycle-connector` becomes\n  // `--uxm-lifecycle-connector-connector-idle-color`. The stylesheet reads the\n  // canonical single-`connector` names (and still accepts the doubled ones as\n  // a fallback alias), so map the knobs explicitly.\n  //\n  // `connectorArrowSize` sizes an SVG polygon rather than setting any CSS\n  // property, so no rule can consume it — `useThemedArrowSize` in\n  // lifecycle-connector.tsx reads `--uxm-lifecycle-connector-arrow-size` back\n  // off the element instead. It is published here for that reason, not for\n  // naming tidiness: drop this line and a saved Arrow Size stops applying.\n  'lifecycle-connector': {\n    connectorIdleColor: '--uxm-lifecycle-connector-idle-color',\n    connectorActiveColor: '--uxm-lifecycle-connector-active-color',\n    connectorIdleStrokeWidth: '--uxm-lifecycle-connector-idle-stroke-width',\n    connectorActiveStrokeWidth: '--uxm-lifecycle-connector-active-stroke-width',\n    connectorDashedColor: '--uxm-lifecycle-connector-dashed-color',\n    connectorDashedStrokeWidth: '--uxm-lifecycle-connector-dashed-stroke-width',\n    connectorDashPattern: '--uxm-lifecycle-connector-dash-pattern',\n    connectorArrowSize: '--uxm-lifecycle-connector-arrow-size',\n  },\n};\n\nfunction toCSS(key: string, componentId: string): string {\n  const componentMapping = PER_COMPONENT_MAPPING[componentId];\n  if (componentMapping?.[key]) return componentMapping[key];\n\n  const mapping: Record<string, string> = {\n    paddingX: 'padding-inline',\n    paddingY: 'padding-block',\n  };\n  if (mapping[key]) return mapping[key];\n\n  const kebab = key.replace(/([A-Z])/g, '-$1').toLowerCase();\n  if (REAL_CSS_PROPS.has(key)) return kebab;\n  return `--uxm-${componentId}-${kebab}`;\n}\n\nfunction formatValue(value: string | number | boolean, key: string): string {\n  if (typeof value === 'boolean') return value ? '1' : '0';\n  if (typeof value === 'number') {\n    // `lineHeight` is a ratio, not a length — without it here a knob saved as\n    // 1.5 emits `line-height: 1.5px`, which collapses every line box.\n    const unitless = ['fontWeight', 'titleWeight', 'nameWeight', 'typeLabelWeight', 'lineHeight', 'shadow', 'disabledOpacity'];\n    // `opacity` is always unitless — match every *Opacity knob (e.g. the\n    // per-element `itemDisabledOpacity` / `optionDisabledOpacity` variants)\n    // so a saved value never gets a spurious `px` suffix.\n    if (unitless.includes(key) || key.endsWith('Opacity')) return String(value);\n    return `${value}px`;\n  }\n  // String style-override values are user/attacker-controlled and persisted\n  // to a stylesheet served to every browser session — sanitise the same way\n  // as brand token values so one can't break out of the declaration (e.g.\n  // `red; } body{display:none}/*`). An unsafe value is dropped to '' rather\n  // than throwing, so a single bad override can't blank the whole rule.\n  return safeTokenValue(value) ?? '';\n}\n\n// CSS sanitizers — applied to every brand value before interpolation. The\n// output is persisted and served to all browser sessions, so attacker-\n// controlled values must not break out of the declaration they belong to.\nfunction safeUrl(v: unknown): string | undefined {\n  if (typeof v !== 'string') return undefined;\n  const trimmed = v.trim();\n  if (!/^(https?:\\/\\/|\\/)/.test(trimmed)) return undefined;\n  if (/[\")\\n\\r]/.test(trimmed)) return undefined;\n  return trimmed;\n}\nexport function safeFontFamily(v: unknown): string | undefined {\n  if (typeof v !== 'string') return undefined;\n  const trimmed = v.trim();\n  return /^[A-Za-z0-9 _-]+$/.test(trimmed) ? trimmed : undefined;\n}\n// Heading weight is a closed set (the editor offers exactly these three), so a\n// strict whitelist is both the sanitizer and the contract. Numbers are accepted\n// defensively — a persisted config may carry the JSON number rather than the\n// string the <select> yields.\nexport function safeFontWeight(v: unknown): string | undefined {\n  const s = typeof v === 'number' ? String(v) : typeof v === 'string' ? v.trim() : undefined;\n  return s !== undefined && /^(500|600|700)$/.test(s) ? s : undefined;\n}\n// Scales multiply a length inside calc(), which makes a bad value far worse\n// than a dropped declaration: `abc` or `1.2px` (length × length) is invalid at\n// computed-value time, so `font-size` resolves to `unset` and INHERITS — one\n// poisoned value on :root collapses the whole app to the parent's size. A\n// plain-number whitelist plus a sane range is the only safe gate; note\n// `safeTokenValue` is NOT sufficient (it passes `abc`, `-1` and unbalanced\n// parens). Range mirrors the editor's slider bounds.\nexport function safeTypeScale(v: unknown): string | undefined {\n  const s = typeof v === 'number' ? String(v) : typeof v === 'string' ? v.trim() : undefined;\n  if (s === undefined || !/^(?:0|[1-9]\\d?)(?:\\.\\d{1,3})?$/.test(s)) return undefined;\n  const n = Number(s);\n  return n >= 0.5 && n <= 2 ? s : undefined;\n}\n// Line height is a unitless ratio; same invalid-at-computed-value-time risk as\n// the scales, but it only affects the declarations that read it.\nexport function safeLineHeight(v: unknown): string | undefined {\n  const s = typeof v === 'number' ? String(v) : typeof v === 'string' ? v.trim() : undefined;\n  if (s === undefined || !/^[1-9](?:\\.\\d{1,2})?$/.test(s)) return undefined;\n  const n = Number(s);\n  return n >= 1 && n <= 2.5 ? s : undefined;\n}\nexport function safeTokenKey(v: string): boolean {\n  return /^--[A-Za-z0-9-]+$/.test(v);\n}\nexport function safeTokenValue(v: unknown): string | undefined {\n  if (typeof v !== 'string') return undefined;\n  return /[{};\\n\\r]/.test(v) ? undefined : v;\n}\n\n// The three heading roles, in one place. Both the publish path below and the\n// live mirror (`brand-font-styles.tsx`) derive their emitted var names from\n// `role` by interpolation, so a rename here reaches both — keeping these in two\n// hand-maintained lists is how `--type-${role}-font` silently drifts away from\n// the names the stylesheets actually read.\nexport const TYPE_ROLES = [\n  { role: 'display', family: 'displayFontFamily', weight: 'displayFontWeight', scale: 'displayScale' },\n  { role: 'page-title', family: 'pageTitleFontFamily', weight: 'pageTitleFontWeight', scale: 'pageTitleScale' },\n  { role: 'section-title', family: 'sectionTitleFontFamily', weight: 'sectionTitleFontWeight', scale: 'sectionTitleScale' },\n] as const satisfies ReadonlyArray<{\n  role: string;\n  family: keyof BrandConfig;\n  weight: keyof BrandConfig;\n  scale: keyof BrandConfig;\n}>;\n\n/** Sanitised per-role typography, shared by the generator and the live mirror. */\nexport function resolveTypeRoles(brand: BrandConfig) {\n  return TYPE_ROLES.map((r) => ({\n    role: r.role,\n    family: safeFontFamily(brand[r.family]),\n    weight: safeFontWeight(brand[r.weight]),\n    scale: safeTypeScale(brand[r.scale]),\n  }));\n}\n\n/** Generate the overrides stylesheet from style overrides + brand config. */\nexport function generateOverridesCss(allOverrides: AllOverrides, brand: BrandConfig): string {\n  const lines: string[] = ['/* Auto-generated by UXM — do not edit manually */', ''];\n\n  const fontFamily = safeFontFamily(brand.fontFamily);\n  const headingFontFamily = safeFontFamily(brand.headingFontFamily);\n  const headingFontWeight = safeFontWeight(brand.headingFontWeight);\n  // Per-role refinements, layered under the umbrella heading vars above.\n  const roles = resolveTypeRoles(brand);\n  const typeScale = safeTypeScale(brand.typeScale);\n  const bodyLineHeight = safeLineHeight(brand.bodyLineHeight);\n  const logoUrl = safeUrl(brand.logoUrl);\n  const iconUrl = safeUrl(brand.iconUrl);\n  const logoUrlDark = safeUrl(brand.logoUrlDark);\n  const iconUrlDark = safeUrl(brand.iconUrlDark);\n\n  if (fontFamily) {\n    lines.push(`@import url(\"${fontFileUrl(fontFamily)}\");`);\n    lines.push('');\n  }\n  // Second font file only when the heading face is actually a different family\n  // — picking the same one for both is a no-op, not a reason to fetch twice.\n  if (headingFontFamily && headingFontFamily !== fontFamily) {\n    lines.push(`@import url(\"${fontFileUrl(headingFontFamily)}\");`);\n    lines.push('');\n  }\n  // A role may pick a face neither the body nor the umbrella uses — fetch each\n  // distinct one exactly once (@import must stay above the rules below).\n  const imported = new Set([fontFamily, headingFontFamily].filter(Boolean));\n  for (const { family } of roles) {\n    if (family && !imported.has(family)) {\n      imported.add(family);\n      lines.push(`@import url(\"${fontFileUrl(family)}\");`);\n      lines.push('');\n    }\n  }\n\n  const brandRules: string[] = [];\n  if (fontFamily) {\n    brandRules.push(`  --brand-font: \"${fontFamily}\", var(--font-inter), system-ui, sans-serif;`);\n  }\n  // Heading vars are consumed by the components' own two-layer fallbacks (see\n  // e.g. page-header.scss), so there is no `body` rule and no `!important`:\n  // an unset var simply lets each component's own default paint.\n  if (headingFontFamily) {\n    brandRules.push(`  --brand-heading-font: \"${headingFontFamily}\", var(--font-inter), system-ui, sans-serif;`);\n  }\n  if (headingFontWeight) {\n    brandRules.push(`  --brand-heading-weight: ${headingFontWeight};`);\n  }\n  // Role vars sit between the component var and the umbrella in each atom's\n  // chain, so an unset role simply falls through to the umbrella.\n  for (const { role, family, weight, scale } of roles) {\n    if (family) {\n      brandRules.push(`  --type-${role}-font: \"${family}\", var(--font-inter), system-ui, sans-serif;`);\n    }\n    if (weight) brandRules.push(`  --type-${role}-weight: ${weight};`);\n    if (scale) brandRules.push(`  --type-${role}-scale: ${scale};`);\n  }\n  if (typeScale) brandRules.push(`  --type-scale: ${typeScale};`);\n  if (bodyLineHeight) brandRules.push(`  --type-body-line-height: ${bodyLineHeight};`);\n  if (logoUrl) brandRules.push(`  --brand-logo-url: url(\"${logoUrl}\");`);\n  if (iconUrl) brandRules.push(`  --brand-icon-url: url(\"${iconUrl}\");`);\n\n  if (brandRules.length > 0) {\n    lines.push(':root {');\n    lines.push(...brandRules);\n    lines.push('}');\n    lines.push('');\n    if (fontFamily) {\n      lines.push('body { font-family: var(--brand-font) !important; }');\n      lines.push('');\n    }\n    // Emitted ONLY when set. The library ships no element-level rules at all,\n    // so an unconditional `body { line-height }` would reflow the host's own\n    // content — same reasoning as the font-family rule above.\n    if (bodyLineHeight) {\n      // Explicit fallback: if the var is later cancelled (the studio mirror\n      // re-declares it as `initial` on revert) a bare `var()` would be invalid\n      // at computed-value time and `line-height` — being inherited — would\n      // resolve to the parent's value, silently replacing whatever the host\n      // had set on `body`. `normal` makes the wind-down state deliberate.\n      lines.push(`body { line-height: var(--type-body-line-height, normal); }`);\n      lines.push('');\n    }\n  }\n\n  const darkBrandRules: string[] = [];\n  if (logoUrlDark) darkBrandRules.push(`  --brand-logo-url: url(\"${logoUrlDark}\");`);\n  if (iconUrlDark) darkBrandRules.push(`  --brand-icon-url: url(\"${iconUrlDark}\");`);\n  if (darkBrandRules.length > 0) {\n    lines.push('[data-theme=\"dark\"] {');\n    lines.push(...darkBrandRules);\n    lines.push('}');\n    lines.push('');\n  }\n\n  const emitTokens = (selector: string, overrides: Record<string, string> | undefined) => {\n    if (!overrides) return;\n    const safeEntries = Object.entries(overrides).flatMap(([k, v]) => {\n      if (!safeTokenKey(k)) return [];\n      const safeValue = safeTokenValue(v);\n      return safeValue === undefined ? [] : [[k, safeValue] as const];\n    });\n    if (safeEntries.length === 0) return;\n    lines.push(`${selector} {`);\n    for (const [cssVar, value] of safeEntries) {\n      lines.push(`  ${cssVar}: ${value};`);\n    }\n    lines.push('}');\n    lines.push('');\n  };\n  // Scope customized light-mode color tokens to non-dark. `:root` and\n  // `[data-theme=\"dark\"]` carry equal specificity, so an unconditional\n  // `:root` block would win over this stylesheet's own dark block for any\n  // token NOT also customized for dark (equal specificity, later source\n  // order) — pinning that token to its light value in dark mode too. Scoping\n  // lets an unset dark token fall through the cascade to tokens/index.css's\n  // own `[data-theme=\"dark\"]` default instead.\n  emitTokens(':root:not([data-theme=\"dark\"])', brand.tokens?.light);\n  emitTokens('[data-theme=\"dark\"]', brand.tokens?.dark);\n\n  const componentIds = Object.keys(allOverrides).sort();\n\n  for (const id of componentIds) {\n    const overrides = allOverrides[id];\n    const entries = Object.entries(overrides);\n    if (entries.length === 0) continue;\n\n    const selector = PER_COMPONENT_SELECTOR[id] ?? `.uxm-${id}`;\n    lines.push(`${selector} {`);\n    for (const [key, value] of entries) {\n      const cssProp = toCSS(key, id);\n      const cssValue = formatValue(value, key);\n      lines.push(`  ${cssProp}: ${cssValue};`);\n    }\n    lines.push('}');\n    lines.push('');\n  }\n\n  return lines.join('\\n');\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/studio/persistence/generate-css.ts"],"sourcesContent":["import { safeFontFamily, safeFontWeight, safeLineHeight, safeTokenKey, safeTokenValue, safeTypeScale, safeUrl } from './css-sanitizers';\nimport { PER_COMPONENT_MAPPING, PER_COMPONENT_SELECTOR } from './generate-css-mapping';\n\nimport type { AllOverrides } from './types';\nimport type { BrandConfig } from '../lib/types';\n\n/**\n * Pure CSS generator for UXM Studio overrides.\n *\n * Single source of truth (R5): the modo Hono `/api/uxm/save` route imports\n * `generateOverridesCss` from here instead of keeping its own copy. No Node\n * APIs — runs in browser (client export) and server alike.\n *\n * Emits a stylesheet from per-component style overrides plus brand config\n * (font, logo/icon URLs, brand token blocks). All attacker-controlled brand\n * values are sanitised before interpolation because the output is served to\n * every browser session.\n */\n\nconst BRAND_FONT_WEIGHTS = 'wght@400;500;600;700';\n\nexport function fontFileUrl(fontFamily: string): string {\n  const encoded = fontFamily.trim().replace(/\\s+/g, '+');\n  return `https://fonts.googleapis.com/css2?family=${encoded}:${BRAND_FONT_WEIGHTS}&display=swap`;\n}\n\nconst REAL_CSS_PROPS = new Set([\n  'background', 'backgroundColor',\n  'color',\n  'border', 'borderColor', 'borderRadius', 'borderWidth', 'borderStyle',\n  'padding', 'paddingX', 'paddingY', 'margin',\n  'gap', 'rowGap', 'columnGap',\n  'width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight',\n  'fontSize', 'fontWeight', 'fontFamily', 'lineHeight',\n  'opacity',\n  'cursor', 'display', 'position', 'overflow', 'direction',\n]);\n\nfunction toCSS(key: string, componentId: string): string {\n  const componentMapping = PER_COMPONENT_MAPPING[componentId];\n  if (componentMapping?.[key]) return componentMapping[key];\n\n  const mapping: Record<string, string> = {\n    paddingX: 'padding-inline',\n    paddingY: 'padding-block',\n  };\n  if (mapping[key]) return mapping[key];\n\n  const kebab = key.replace(/([A-Z])/g, '-$1').toLowerCase();\n  if (REAL_CSS_PROPS.has(key)) return kebab;\n  return `--uxm-${componentId}-${kebab}`;\n}\n\nfunction formatValue(value: string | number | boolean, key: string): string {\n  if (typeof value === 'boolean') return value ? '1' : '0';\n  if (typeof value === 'number') {\n    // `lineHeight` is a ratio, not a length — without it here a knob saved as\n    // 1.5 emits `line-height: 1.5px`, which collapses every line box.\n    const unitless = ['fontWeight', 'titleWeight', 'nameWeight', 'typeLabelWeight', 'lineHeight', 'shadow', 'disabledOpacity'];\n    // `opacity` is always unitless — match every *Opacity knob (e.g. the\n    // per-element `itemDisabledOpacity` / `optionDisabledOpacity` variants)\n    // so a saved value never gets a spurious `px` suffix.\n    if (unitless.includes(key) || key.endsWith('Opacity')) return String(value);\n    return `${value}px`;\n  }\n  // String style-override values are user/attacker-controlled and persisted\n  // to a stylesheet served to every browser session — sanitise the same way\n  // as brand token values so one can't break out of the declaration (e.g.\n  // `red; } body{display:none}/*`). An unsafe value is dropped to '' rather\n  // than throwing, so a single bad override can't blank the whole rule.\n  return safeTokenValue(value) ?? '';\n}\n\n// The sanitizers moved to ./css-sanitizers.ts; they stay part of this module's\n// public surface (`@viax.io/uxm/studio/generate-css`, brand-*-styles.tsx).\nexport { safeFontFamily, safeFontWeight, safeLineHeight, safeTokenKey, safeTokenValue, safeTypeScale } from './css-sanitizers';\n\n// The three heading roles, in one place. Both the publish path below and the\n// live mirror (`brand-font-styles.tsx`) derive their emitted var names from\n// `role` by interpolation, so a rename here reaches both — keeping these in two\n// hand-maintained lists is how `--type-${role}-font` silently drifts away from\n// the names the stylesheets actually read.\nexport const TYPE_ROLES = [\n  { role: 'display', family: 'displayFontFamily', weight: 'displayFontWeight', scale: 'displayScale' },\n  { role: 'page-title', family: 'pageTitleFontFamily', weight: 'pageTitleFontWeight', scale: 'pageTitleScale' },\n  { role: 'section-title', family: 'sectionTitleFontFamily', weight: 'sectionTitleFontWeight', scale: 'sectionTitleScale' },\n] as const satisfies ReadonlyArray<{\n  role: string;\n  family: keyof BrandConfig;\n  weight: keyof BrandConfig;\n  scale: keyof BrandConfig;\n}>;\n\n/** Sanitised per-role typography, shared by the generator and the live mirror. */\nexport function resolveTypeRoles(brand: BrandConfig) {\n  return TYPE_ROLES.map((r) => ({\n    role: r.role,\n    family: safeFontFamily(brand[r.family]),\n    weight: safeFontWeight(brand[r.weight]),\n    scale: safeTypeScale(brand[r.scale]),\n  }));\n}\n\n/** Generate the overrides stylesheet from style overrides + brand config. */\nexport function generateOverridesCss(allOverrides: AllOverrides, brand: BrandConfig): string {\n  const lines: string[] = ['/* Auto-generated by UXM — do not edit manually */', ''];\n\n  const fontFamily = safeFontFamily(brand.fontFamily);\n  const headingFontFamily = safeFontFamily(brand.headingFontFamily);\n  const headingFontWeight = safeFontWeight(brand.headingFontWeight);\n  // Per-role refinements, layered under the umbrella heading vars above.\n  const roles = resolveTypeRoles(brand);\n  const typeScale = safeTypeScale(brand.typeScale);\n  const bodyLineHeight = safeLineHeight(brand.bodyLineHeight);\n  const logoUrl = safeUrl(brand.logoUrl);\n  const iconUrl = safeUrl(brand.iconUrl);\n  const logoUrlDark = safeUrl(brand.logoUrlDark);\n  const iconUrlDark = safeUrl(brand.iconUrlDark);\n\n  if (fontFamily) {\n    lines.push(`@import url(\"${fontFileUrl(fontFamily)}\");`);\n    lines.push('');\n  }\n  // Second font file only when the heading face is actually a different family\n  // — picking the same one for both is a no-op, not a reason to fetch twice.\n  if (headingFontFamily && headingFontFamily !== fontFamily) {\n    lines.push(`@import url(\"${fontFileUrl(headingFontFamily)}\");`);\n    lines.push('');\n  }\n  // A role may pick a face neither the body nor the umbrella uses — fetch each\n  // distinct one exactly once (@import must stay above the rules below).\n  const imported = new Set([fontFamily, headingFontFamily].filter(Boolean));\n  for (const { family } of roles) {\n    if (family && !imported.has(family)) {\n      imported.add(family);\n      lines.push(`@import url(\"${fontFileUrl(family)}\");`);\n      lines.push('');\n    }\n  }\n\n  const brandRules: string[] = [];\n  if (fontFamily) {\n    brandRules.push(`  --brand-font: \"${fontFamily}\", var(--font-inter), system-ui, sans-serif;`);\n  }\n  // Heading vars are consumed by the components' own two-layer fallbacks (see\n  // e.g. page-header.scss), so there is no `body` rule and no `!important`:\n  // an unset var simply lets each component's own default paint.\n  if (headingFontFamily) {\n    brandRules.push(`  --brand-heading-font: \"${headingFontFamily}\", var(--font-inter), system-ui, sans-serif;`);\n  }\n  if (headingFontWeight) {\n    brandRules.push(`  --brand-heading-weight: ${headingFontWeight};`);\n  }\n  // Role vars sit between the component var and the umbrella in each atom's\n  // chain, so an unset role simply falls through to the umbrella.\n  for (const { role, family, weight, scale } of roles) {\n    if (family) {\n      brandRules.push(`  --type-${role}-font: \"${family}\", var(--font-inter), system-ui, sans-serif;`);\n    }\n    if (weight) brandRules.push(`  --type-${role}-weight: ${weight};`);\n    if (scale) brandRules.push(`  --type-${role}-scale: ${scale};`);\n  }\n  if (typeScale) brandRules.push(`  --type-scale: ${typeScale};`);\n  if (bodyLineHeight) brandRules.push(`  --type-body-line-height: ${bodyLineHeight};`);\n  if (logoUrl) brandRules.push(`  --brand-logo-url: url(\"${logoUrl}\");`);\n  if (iconUrl) brandRules.push(`  --brand-icon-url: url(\"${iconUrl}\");`);\n\n  if (brandRules.length > 0) {\n    lines.push(':root {');\n    lines.push(...brandRules);\n    lines.push('}');\n    lines.push('');\n    if (fontFamily) {\n      lines.push('body { font-family: var(--brand-font) !important; }');\n      lines.push('');\n    }\n    // Emitted ONLY when set. The library ships no element-level rules at all,\n    // so an unconditional `body { line-height }` would reflow the host's own\n    // content — same reasoning as the font-family rule above.\n    if (bodyLineHeight) {\n      // Explicit fallback: if the var is later cancelled (the studio mirror\n      // re-declares it as `initial` on revert) a bare `var()` would be invalid\n      // at computed-value time and `line-height` — being inherited — would\n      // resolve to the parent's value, silently replacing whatever the host\n      // had set on `body`. `normal` makes the wind-down state deliberate.\n      lines.push(`body { line-height: var(--type-body-line-height, normal); }`);\n      lines.push('');\n    }\n  }\n\n  const darkBrandRules: string[] = [];\n  if (logoUrlDark) darkBrandRules.push(`  --brand-logo-url: url(\"${logoUrlDark}\");`);\n  if (iconUrlDark) darkBrandRules.push(`  --brand-icon-url: url(\"${iconUrlDark}\");`);\n  if (darkBrandRules.length > 0) {\n    lines.push('[data-theme=\"dark\"] {');\n    lines.push(...darkBrandRules);\n    lines.push('}');\n    lines.push('');\n  }\n\n  const emitTokens = (selector: string, overrides: Record<string, string> | undefined) => {\n    if (!overrides) return;\n    const safeEntries = Object.entries(overrides).flatMap(([k, v]) => {\n      if (!safeTokenKey(k)) return [];\n      const safeValue = safeTokenValue(v);\n      return safeValue === undefined ? [] : [[k, safeValue] as const];\n    });\n    if (safeEntries.length === 0) return;\n    lines.push(`${selector} {`);\n    for (const [cssVar, value] of safeEntries) {\n      lines.push(`  ${cssVar}: ${value};`);\n    }\n    lines.push('}');\n    lines.push('');\n  };\n  // Scope customized light-mode color tokens to non-dark. `:root` and\n  // `[data-theme=\"dark\"]` carry equal specificity, so an unconditional\n  // `:root` block would win over this stylesheet's own dark block for any\n  // token NOT also customized for dark (equal specificity, later source\n  // order) — pinning that token to its light value in dark mode too. Scoping\n  // lets an unset dark token fall through the cascade to tokens/index.css's\n  // own `[data-theme=\"dark\"]` default instead.\n  emitTokens(':root:not([data-theme=\"dark\"])', brand.tokens?.light);\n  emitTokens('[data-theme=\"dark\"]', brand.tokens?.dark);\n\n  const componentIds = Object.keys(allOverrides).sort();\n\n  for (const id of componentIds) {\n    const overrides = allOverrides[id];\n    const entries = Object.entries(overrides);\n    if (entries.length === 0) continue;\n\n    const selector = PER_COMPONENT_SELECTOR[id] ?? `.uxm-${id}`;\n    lines.push(`${selector} {`);\n    for (const [key, value] of entries) {\n      const cssProp = toCSS(key, id);\n      const cssValue = formatValue(value, key);\n      lines.push(`  ${cssProp}: ${cssValue};`);\n    }\n    lines.push('}');\n    lines.push('');\n  }\n\n  return lines.join('\\n');\n}\n"],"mappings":"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","names":["safeFontFamily","safeFontWeight","safeLineHeight","safeTokenKey","safeTokenValue","safeTypeScale"]}

package/dist/studio/shell/canvas.d.ts

@@ -7,6 +7,6 @@ export declare function Canvas({ embed, headerActions, }: {
     /** Optional host-provided actions rendered at the end of the top-bar
         cluster, right after the Preview & Publish button (e.g. a user avatar). */
     headerActions?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=canvas.d.ts.map

package/dist/studio/shell/canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/studio/shell/canvas.tsx"],"names":[],"mappings":"AAoHA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;AAiC1D,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CA6GvD,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,KAAa,EACb,aAAa,GACd,EAAE;IACD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;kFAC8E;IAC9E,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,kDAkNA"}
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/studio/shell/canvas.tsx"],"names":[],"mappings":"AAoHA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;AAiC1D,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CA6GvD,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,KAAa,EACb,aAAa,GACd,EAAE;IACD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;kFAC8E;IAC9E,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,sCAkNA"}

package/dist/studio/shell/preview-modal.d.ts

@@ -1,4 +1,4 @@
 export declare function PreviewModal({ onClose }: {
     onClose: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 //# sourceMappingURL=preview-modal.d.ts.map

package/dist/studio/shell/preview-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-modal.d.ts","sourceRoot":"","sources":["../../../src/studio/shell/preview-modal.tsx"],"names":[],"mappings":"AA4kBA,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,2CAqQhE"}
+{"version":3,"file":"preview-modal.d.ts","sourceRoot":"","sources":["../../../src/studio/shell/preview-modal.tsx"],"names":[],"mappings":"AA4kBA,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,+BAqQhE"}

package/dist/studio/shell/properties-panel/dev-tab.cjs

@@ -0,0 +1,244 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var dev_tab_exports = {};
+__export(dev_tab_exports, {
+  DevTab: () => DevTab
+});
+module.exports = __toCommonJS(dev_tab_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../../ui/index.cjs");
+var import_ui2 = require("../../../ui/index.cjs");
+var import_ui3 = require("../../../ui/index.cjs");
+var import_ui4 = require("../../../ui/index.cjs");
+var import_variant_matrix = require("./variant-matrix.cjs");
+function DevTab({
+  def,
+  api,
+  events,
+  eventLog,
+  onClearLog,
+  orientation,
+  currentVariants,
+  overrides
+}) {
+  const resolvedStyles = {};
+  for (const prop of def.styleProperties) {
+    resolvedStyles[prop.key] = overrides[prop.key] ?? prop.defaultValue;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: orientation === "vertical" ? "grid items-start gap-x-6 gap-y-4 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]" : "",
+      children: [
+        api && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: orientation === "vertical" ? "min-w-0" : "mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ApiSection, { api, currentVariants }) }),
+        def.layoutVariants.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: orientation === "vertical" ? "min-w-0" : "mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_variant_matrix.VariantMatrix, { def, styles: resolvedStyles, currentVariants }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: orientation === "vertical" ? "min-w-0" : "mb-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui4.SectionHeader, { children: "Emits" }),
+          events && events.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-2 text-[12px]", children: events.map((ev) => (
+            // Card atom (uxm-card surface) instead of a hand-rolled div
+            // so the spec rows pick up the design system's bg/border/
+            // radius tokens and flow through Card's registry knobs.
+            // Padding + radius are tightened inline to keep the dense
+            // panel-row feel — Card's 24px default is meant for full
+            // page cards, not list rows.
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_ui.Card,
+              {
+                style: { padding: "8px 12px", borderRadius: 6 },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-baseline gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-[12px] font-semibold text-accent-bold", children: ev.name }),
+                    ev.payload && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("code", { className: "text-[11px] text-text-muted", children: [
+                      "(",
+                      ev.payload,
+                      ")"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1 text-[11px] text-text-muted leading-relaxed", children: ev.description })
+                ]
+              },
+              ev.name
+            )
+          )) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[12px] text-text-muted leading-relaxed", children: "No event spec yet for this component. Interact with the canvas to see the live activity log below." })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: orientation === "vertical" ? "min-w-0" : "", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ui4.SectionHeader,
+            {
+              trailing: eventLog.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_ui3.InlineAction,
+                {
+                  onClick: onClearLog,
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "refresh", strokeWidth: 2.25, "aria-hidden": true }),
+                  children: "Clear"
+                }
+              ) : void 0,
+              children: "Live Log"
+            }
+          ),
+          eventLog.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[12px] text-text-muted leading-relaxed", children: "Interact with the preview to see events appear here." }) : (
+            // Dark-theme log surface — same hardcoded palette the CSS
+            // editor uses (#1e1e1e bg / #2a2a2a border / #d4d4d8 text).
+            // Intentionally bypasses design tokens for the same reason
+            // the code editor does: a developer-output surface should
+            // read as a developer-output surface regardless of the
+            // product's light/dark theme.
+            //
+            // Row layout: header row (time + name + target) plus an
+            // optional payload row indented to align under the event name
+            // (58px time column + 8px gap = 66px). `tabular-nums` keeps
+            // the timestamp column steady as digits change; `break-all`
+            // lets long payloads wrap rather than overflow. Single
+            // consumer for now — if a second log surface lands, extract
+            // `LogRow` then.
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                style: {
+                  backgroundColor: "#1e1e1e",
+                  border: "1px solid #2a2a2a",
+                  borderRadius: 8,
+                  padding: "6px 10px"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "font-mono text-[11px]", style: { color: "#d4d4d8" }, children: eventLog.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "li",
+                  {
+                    className: "py-1.5",
+                    style: {
+                      // Thin divider in the dark palette — only between
+                      // entries, not above the first one.
+                      borderTop: i === 0 ? void 0 : "1px solid #2a2a2a"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-baseline gap-2", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "span",
+                          {
+                            className: "tabular-nums text-[10px] w-[58px] shrink-0",
+                            style: { color: "#71717a" },
+                            children: new Date(entry.ts).toLocaleTimeString(void 0, {
+                              hour12: false,
+                              hour: "2-digit",
+                              minute: "2-digit",
+                              second: "2-digit"
+                            })
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold", style: { color: "#a5e8c2" }, children: entry.name }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          "span",
+                          {
+                            className: "ml-auto text-[10px] shrink-0",
+                            style: { color: "#71717a" },
+                            children: [
+                              "<",
+                              entry.target,
+                              ">"
+                            ]
+                          }
+                        )
+                      ] }),
+                      entry.payload && entry.payload !== "{}" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "div",
+                        {
+                          className: "pl-[66px] mt-0.5 break-all",
+                          style: { color: "#d4d4d8" },
+                          children: entry.payload
+                        }
+                      )
+                    ]
+                  },
+                  entry.id
+                )) })
+              }
+            )
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+function ApiSection({
+  api,
+  currentVariants
+}) {
+  const importLine = formatImport(api);
+  const usageSnippet = formatUsage(api, currentVariants);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui4.SectionHeader, { children: "API" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeBlock, { label: "Import", code: importLine }),
+    api.props.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-text-subtle", children: "Props" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-2", children: api.props.map((p) => (
+        // Card atom for each prop row — same treatment as the
+        // Emits cards so the two sections read as one family.
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Card, { style: { padding: "8px 12px", borderRadius: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-baseline gap-2 flex-wrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-[12px] font-semibold text-accent-bold", children: p.name }),
+            p.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-warm", children: "required" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-[11px] text-text-muted break-all", children: p.type })
+          ] }),
+          p.defaultValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-0.5 text-[11px]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-text-subtle", children: "default: " }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-text", children: p.defaultValue })
+          ] }),
+          p.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1 text-[11px] text-text-muted leading-relaxed", children: p.description })
+        ] }, p.name)
+      )) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeBlock, { label: "Usage", code: usageSnippet }) })
+  ] });
+}
+function CodeBlock({ label, code }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-text-subtle", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "pre",
+      {
+        className: "font-mono text-[11px] whitespace-pre-wrap break-all",
+        style: {
+          backgroundColor: "#1e1e1e",
+          border: "1px solid #2a2a2a",
+          borderRadius: 8,
+          padding: "8px 10px",
+          color: "#d4d4d8",
+          margin: 0
+        },
+        children: code
+      }
+    )
+  ] });
+}
+function formatImport(api) {
+  const names = Array.isArray(api.importNames) ? api.importNames.join(", ") : api.importNames;
+  return `import { ${names} } from "${api.importPath}";`;
+}
+function formatUsage(api, variants) {
+  const name = Array.isArray(api.importNames) ? api.importNames[0] : api.importNames;
+  const variantProps = Object.entries(variants).filter(([k, v]) => k !== "state" && v !== "default").map(([k, v]) => typeof v === "string" ? `${k}="${v}"` : `${k}={${v}}`);
+  const attrs = variantProps.length > 0 ? " " + variantProps.join(" ") : "";
+  return `<${name}${attrs}>
+  \u2026
+</${name}>`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DevTab
+});
+//# sourceMappingURL=dev-tab.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/studio/shell/properties-panel/dev-tab.tsx"],"sourcesContent":["import { Card } from '@/ui';\nimport { Icon } from '@/ui';\nimport { InlineAction } from '@/ui';\nimport { SectionHeader } from '@/ui';\n\nimport { VariantMatrix } from './variant-matrix';\n\nimport type { LoggedEvent } from '../../lib/context';\nimport type { ComponentDef, StyleOverrides } from '../../lib/types';\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 */\nexport function 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\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"],"mappings":"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","names":["import_ui"]}

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

@@ -0,0 +1,27 @@
+import type { LoggedEvent } from '../../lib/context.js';
+import type { ComponentDef, StyleOverrides } from '../../lib/types.js';
+/**
+ * Events tab — Storybook-style API + activity panel. Two sections:
+ *
+ *   1. EMITS — the static event spec from the registry. Reads like
+ *      a method-signature table: each row is one event name, its
+ *      payload, and a short description of when it fires.
+ *   2. LIVE LOG — runtime capture from the canvas. Updated whenever
+ *      the user interacts with the rendered atom. Capped at 200
+ *      entries (see EVENT_LOG_LIMIT). Latest at top.
+ *
+ * The capture itself lives in canvas.tsx — we just render what's in
+ * the context-managed `eventLog` here. That separation keeps the
+ * Properties pane independent of the rendered atom's DOM tree.
+ */
+export declare function DevTab({ def, api, events, eventLog, onClearLog, orientation, currentVariants, overrides, }: {
+    def: ComponentDef;
+    api: ComponentDef['api'];
+    events: ComponentDef['events'];
+    eventLog: LoggedEvent[];
+    onClearLog: () => void;
+    orientation: 'horizontal' | 'vertical';
+    currentVariants: Record<string, string | number | boolean>;
+    overrides: StyleOverrides;
+}): import("react").JSX.Element;
+//# sourceMappingURL=dev-tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dev-tab.d.ts","sourceRoot":"","sources":["../../../../src/studio/shell/properties-panel/dev-tab.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEpE;;;;;;;;;;;;;GAaG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,GAAG,EACH,MAAM,EACN,QAAQ,EACR,UAAU,EACV,WAAW,EACX,eAAe,EACf,SAAS,GACV,EAAE;IACD,GAAG,EAAE,YAAY,CAAC;IAClB,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;IACzB,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC/B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAC3D,SAAS,EAAE,cAAc,CAAC;CAC3B,+BA8KA"}