@oddkin/workbench 0.0.0-stage → 1.0.0-beta.0

package/dist/panels/styles.js

@@ -0,0 +1,316 @@
+/**
+ * Styles for panel content (catalog, component and foundation details). Every rule is scoped to
+ * `.wb-content`, so the same sheet works inside a panel's shadow root and in the shell's light DOM.
+ * Values come from Oddkin tokens, inherited from the host document.
+ */
+import { css } from '@oddkin/core/styles';
+export const panelHostStyles = css `
+  :host {
+    display: block;
+    color: var(--odd-color-text-primary);
+    font-family: var(--odd-font-family-sans);
+    font-size: var(--odd-font-size-md);
+    line-height: var(--odd-line-height-normal);
+  }
+`;
+export const contentStyles = css `
+  .wb-content {
+    container: wb-content / inline-size;
+    min-inline-size: 0;
+  }
+  .wb-content :focus-visible {
+    outline: var(--odd-focus-width) solid var(--odd-color-focus-ring);
+    outline-offset: var(--odd-focus-offset);
+  }
+  .wb-content a {
+    color: var(--odd-color-link);
+  }
+  .wb-content code,
+  .wb-content pre {
+    font-family: var(--odd-font-family-mono);
+    font-size: 0.9em;
+  }
+  .wb-content input,
+  .wb-content select,
+  .wb-content textarea,
+  .wb-content button {
+    font: inherit;
+    color: inherit;
+  }
+  .wb-content input:not([type='checkbox']),
+  .wb-content select,
+  .wb-content textarea {
+    max-inline-size: 100%;
+    padding: var(--odd-space-2xs) var(--odd-space-xs);
+    background: var(--odd-color-surface-default);
+    border: var(--odd-border-width-default) solid var(--odd-color-border-strong);
+    border-radius: var(--odd-radius-sm);
+  }
+  .wb-content button {
+    padding: var(--odd-space-2xs) var(--odd-space-sm);
+    background: var(--odd-color-surface-default);
+    border: var(--odd-border-width-default) solid var(--odd-color-border-strong);
+    border-radius: var(--odd-radius-sm);
+    cursor: pointer;
+  }
+  .wb-content > section + section {
+    margin-block-start: var(--odd-space-2xl);
+  }
+  .wb-content h2 {
+    margin: 0 0 var(--odd-space-sm);
+    font-size: var(--odd-font-size-xl);
+    font-weight: var(--odd-font-weight-semibold);
+  }
+  .wb-content h3 {
+    margin: var(--odd-space-lg) 0 var(--odd-space-xs);
+    font-size: var(--odd-font-size-lg);
+    font-weight: var(--odd-font-weight-semibold);
+  }
+  .wb-content .wb-muted,
+  .wb-content .wb-meta {
+    color: var(--odd-color-text-secondary);
+  }
+  .wb-content .wb-meta {
+    font-size: var(--odd-font-size-sm);
+  }
+  .wb-content .wb-not-documented {
+    color: var(--odd-color-text-secondary);
+    font-style: italic;
+  }
+  /* Coverage markers (data-coverage) wrap an item without adding layout. */
+  .wb-content [data-coverage] {
+    display: contents;
+  }
+  .wb-content .wb-visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* Tables: stacked rows on narrow containers. */
+  .wb-content .wb-table-wrap {
+    overflow-x: auto;
+  }
+  .wb-content table {
+    inline-size: 100%;
+    border-collapse: collapse;
+    font-size: var(--odd-font-size-sm);
+  }
+  .wb-content caption {
+    padding-block-end: var(--odd-space-xs);
+    color: var(--odd-color-text-secondary);
+    text-align: start;
+  }
+  .wb-content th,
+  .wb-content td {
+    padding: var(--odd-space-xs);
+    border-block-end: var(--odd-border-width-default) solid var(--odd-color-border-default);
+    text-align: start;
+    vertical-align: top;
+  }
+  .wb-content th {
+    font-weight: var(--odd-font-weight-semibold);
+  }
+  .wb-content td small {
+    display: block;
+    color: var(--odd-color-text-secondary);
+  }
+  @container wb-content (width < 40rem) {
+    .wb-content .wb-stack thead {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+    }
+    .wb-content .wb-stack tr {
+      display: grid;
+      gap: var(--odd-space-2xs);
+      padding-block: var(--odd-space-sm);
+      border-block-end: var(--odd-border-width-default) solid var(--odd-color-border-default);
+    }
+    .wb-content .wb-stack td {
+      display: grid;
+      grid-template-columns: 7rem minmax(0, 1fr);
+      gap: var(--odd-space-xs);
+      padding: 0;
+      border: 0;
+    }
+    .wb-content .wb-stack td::before {
+      content: attr(data-label);
+      color: var(--odd-color-text-secondary);
+      font-weight: var(--odd-font-weight-semibold);
+    }
+  }
+
+  /* Interactive example */
+  .wb-content .wb-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: end;
+    gap: var(--odd-space-sm) var(--odd-space-md);
+    margin-block-end: var(--odd-space-sm);
+  }
+  .wb-content .wb-toolbar label {
+    display: grid;
+    gap: var(--odd-space-2xs);
+    color: var(--odd-color-text-secondary);
+    font-size: var(--odd-font-size-sm);
+  }
+  .wb-content .wb-previews {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--odd-space-md);
+  }
+  .wb-content .wb-previews.wb-pair {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+  }
+  .wb-content .wb-preview {
+    min-inline-size: 0;
+    border: var(--odd-border-width-default) solid var(--odd-color-border-default);
+    border-radius: var(--odd-radius-md);
+    background: var(--odd-color-surface-default);
+  }
+  .wb-content .wb-preview > p {
+    margin: 0;
+    padding: var(--odd-space-2xs) var(--odd-space-xs);
+    color: var(--odd-color-text-secondary);
+    font-size: var(--odd-font-size-xs);
+  }
+  .wb-content .wb-preview iframe {
+    display: block;
+    inline-size: 100%;
+    block-size: 14rem;
+    border: 0;
+  }
+  .wb-content .wb-status:empty {
+    display: none;
+  }
+  .wb-content [role='alert'] {
+    color: var(--odd-color-danger-foreground, var(--odd-color-text-primary));
+  }
+  .wb-content .wb-code {
+    overflow-x: auto;
+    margin: var(--odd-space-xs) 0 0;
+    padding: var(--odd-space-sm);
+    background: var(--odd-color-surface-sunken);
+    border-radius: var(--odd-radius-sm);
+    white-space: pre;
+  }
+  .wb-content .wb-log {
+    max-block-size: 14rem;
+    overflow: auto;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--odd-font-size-sm);
+  }
+  .wb-content .wb-log li {
+    padding-block: var(--odd-space-2xs);
+    border-block-end: var(--odd-border-width-default) solid var(--odd-color-border-default);
+  }
+  .wb-content .wb-cell-controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--odd-space-2xs) var(--odd-space-xs);
+  }
+  .wb-content .wb-error {
+    color: var(--odd-color-danger-foreground, var(--odd-color-text-primary));
+  }
+
+  /* Theme Studio */
+  .wb-content fieldset.wb-group {
+    border: var(--odd-border-width-default) solid var(--odd-color-border-default);
+    border-radius: var(--odd-radius-sm);
+    padding: var(--odd-space-md);
+  }
+  .wb-content .wb-field {
+    display: grid;
+    gap: var(--odd-space-2xs);
+    margin-block: var(--odd-space-sm);
+  }
+  .wb-content .wb-json textarea {
+    inline-size: 100%;
+    box-sizing: border-box;
+  }
+  .wb-content .wb-swatch {
+    display: inline-block;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    border: var(--odd-border-width-default) solid var(--odd-color-border-strong);
+    border-radius: var(--odd-radius-sm);
+  }
+  .wb-content .wb-list {
+    margin: 0;
+    padding-inline-start: var(--odd-space-lg);
+  }
+  .wb-content .wb-bar {
+    display: block;
+    block-size: 0.75rem;
+    min-inline-size: 1px;
+    max-inline-size: 100%;
+    background: var(--odd-color-action-default);
+    border-radius: var(--odd-radius-sm);
+  }
+
+  /* Catalog */
+  .wb-content .wb-catalog-filters {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: end;
+    gap: var(--odd-space-md);
+    margin-block-end: var(--odd-space-lg);
+  }
+  .wb-content .wb-catalog-filters label {
+    display: grid;
+    gap: var(--odd-space-2xs);
+    color: var(--odd-color-text-secondary);
+    font-size: var(--odd-font-size-sm);
+  }
+  .wb-content .wb-catalog-filters p {
+    margin: 0;
+  }
+  .wb-content .wb-group + .wb-group {
+    margin-block-start: var(--odd-space-2xl);
+  }
+  .wb-content .wb-cards {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--odd-space-md);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .wb-content .wb-card {
+    block-size: 100%;
+  }
+  .wb-content .wb-card h2,
+  .wb-content .wb-card h3 {
+    margin: 0;
+    font-size: var(--odd-font-size-lg);
+    font-weight: var(--odd-font-weight-semibold);
+  }
+  .wb-content .wb-card p {
+    margin: var(--odd-space-xs) 0 0;
+  }
+  @container wb-content (width >= 32rem) {
+    .wb-content .wb-cards {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  @container wb-content (width >= 52rem) {
+    .wb-content .wb-cards {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  @media (forced-colors: active) {
+    .wb-content .wb-bar {
+      background: CanvasText;
+    }
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/panels/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/panels/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;CAQjC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2S/B,CAAC"}

package/dist/panels/theme-model.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Theme Studio's editor model (workbench.md §6.3), DOM-free: the form fields a draft offers, in
+ * groups that follow the design file's variable collections (theme inputs, then role overrides
+ * with one column per mode), and immutable edits by configuration path. The form and the JSON
+ * editor change the same draft; nothing here generates tokens.
+ */
+export type ConfigPath = readonly string[];
+type Json = null | boolean | number | string | Json[] | {
+    [key: string]: Json;
+};
+/** How a value enters the theme (workbench.md §6.3). */
+export type ValueOrigin = 'foundation input' | 'explicit override';
+export interface ThemeField {
+    readonly path: ConfigPath;
+    readonly label: string;
+    readonly kind: 'color' | 'length' | 'number' | 'integer' | 'text';
+    readonly origin: ValueOrigin;
+    readonly value: string | number | undefined;
+}
+export interface OverrideRow {
+    readonly token: string;
+    /** One cell per mode; a single value applies to every mode. */
+    readonly cells: readonly ThemeField[];
+}
+export interface ThemeFieldGroup {
+    readonly id: string;
+    readonly title: string;
+    readonly note?: string;
+    readonly fields: readonly ThemeField[];
+    readonly rows?: readonly OverrideRow[];
+    readonly modes?: readonly string[];
+}
+export declare function getPath(value: unknown, path: ConfigPath): unknown;
+/** A copy of `value` with `path` set; `undefined` removes the key. Untouched branches are shared. */
+export declare function setPath(value: unknown, path: ConfigPath, next: unknown): unknown;
+export declare const pathText: (path: ConfigPath) => string;
+/** The form over a draft: only fields that apply to it (e.g. the chosen spacing strategy). */
+export declare function themeFields(config: unknown): ThemeFieldGroup[];
+/** A form entry as the configuration value it writes; empty clears the key. */
+export declare function fieldValue(field: ThemeField, input: string): string | number | undefined;
+export interface DraftParse {
+    readonly ok: boolean;
+    readonly value?: Json;
+    readonly message?: string;
+}
+/** The JSON editor's text as a draft; a syntax error never replaces the current draft. */
+export declare function parseDraft(text: string): DraftParse;
+export {};
+//# sourceMappingURL=theme-model.d.ts.map

package/dist/panels/theme-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-model.d.ts","sourceRoot":"","sources":["../../src/panels/theme-model.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,UAAU,GAAG,SAAS,MAAM,EAAE,CAAC;AAC3C,KAAK,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAEhF,wDAAwD;AACxD,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG,mBAAmB,CAAC;AAEnE,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IAClE,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC7C;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,+DAA+D;IAC/D,QAAQ,CAAC,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;CACvC;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IACvC,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;IACvC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACpC;AAKD,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,GAAG,OAAO,CAOjE;AAED,qGAAqG;AACrG,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAShF;AAED,eAAO,MAAM,QAAQ,SAAU,UAAU,WAAyB,CAAC;AA+BnE,8FAA8F;AAC9F,wBAAgB,WAAW,CAAC,MAAM,EAAE,OAAO,GAAG,eAAe,EAAE,CAqE9D;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAQxF;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;IACtB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,0FAA0F;AAC1F,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,CASnD"}

package/dist/panels/theme-model.js

@@ -0,0 +1,146 @@
+/**
+ * Theme Studio's editor model (workbench.md §6.3), DOM-free: the form fields a draft offers, in
+ * groups that follow the design file's variable collections (theme inputs, then role overrides
+ * with one column per mode), and immutable edits by configuration path. The form and the JSON
+ * editor change the same draft; nothing here generates tokens.
+ */
+const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+export function getPath(value, path) {
+    let current = value;
+    for (const key of path) {
+        if (!isRecord(current))
+            return undefined;
+        current = current[key];
+    }
+    return current;
+}
+/** A copy of `value` with `path` set; `undefined` removes the key. Untouched branches are shared. */
+export function setPath(value, path, next) {
+    const [key, ...rest] = path;
+    if (key === undefined)
+        return next;
+    const record = isRecord(value) ? value : {};
+    const child = rest.length ? setPath(record[key], rest, next) : next;
+    const copy = { ...record };
+    if (child === undefined)
+        delete copy[key];
+    else
+        copy[key] = child;
+    return copy;
+}
+export const pathText = (path) => `/${path.join('/')}`;
+const scalar = (value) => typeof value === 'string' || typeof value === 'number' ? value : undefined;
+const BRAND = [
+    ['brand', 'primary', 'Brand primary'],
+    ['brand', 'neutral', 'Neutral'],
+    ['status', 'danger', 'Danger'],
+    ['status', 'success', 'Success'],
+    ['status', 'warning', 'Warning'],
+    ['status', 'info', 'Info'],
+];
+const SPACING = {
+    multiples: [
+        ['unit', 'Unit', 'length'],
+        ['snap', 'Snap to', 'length'],
+    ],
+    ratio: [
+        ['base', 'Base', 'length'],
+        ['ratio', 'Ratio', 'number'],
+        ['stepsBelow', 'Steps below', 'integer'],
+        ['stepsAbove', 'Steps above', 'integer'],
+        ['snap', 'Snap to', 'length'],
+    ],
+    explicit: [['snap', 'Snap to', 'length']],
+};
+/** The form over a draft: only fields that apply to it (e.g. the chosen spacing strategy). */
+export function themeFields(config) {
+    const groups = [
+        {
+            id: 'inputs',
+            title: 'Theme inputs',
+            note: 'Foundation inputs: ramps and roles are generated from them.',
+            fields: BRAND.map(([group, key, label]) => ({
+                path: [group, key],
+                label,
+                kind: 'color',
+                origin: 'foundation input',
+                value: scalar(getPath(config, [group, key])),
+            })),
+        },
+    ];
+    const spacing = getPath(config, ['spacing']);
+    const strategy = isRecord(spacing) ? spacing['strategy'] : undefined;
+    groups.push({
+        id: 'spacing',
+        title: 'Spacing',
+        note: typeof strategy === 'string' && SPACING[strategy]
+            ? `Strategy: ${strategy}. Change the strategy or its steps in the JSON editor.`
+            : 'No spacing strategy configured: the generator default applies. Add `spacing` in the JSON editor.',
+        fields: (typeof strategy === 'string' ? (SPACING[strategy] ?? []) : []).map(([key, label, kind]) => ({
+            path: ['spacing', key],
+            label,
+            kind,
+            origin: 'foundation input',
+            value: scalar(getPath(config, ['spacing', key])),
+        })),
+    });
+    const overrides = getPath(config, ['overrides']);
+    const entries = isRecord(overrides) ? Object.entries(overrides) : [];
+    const modes = [
+        ...new Set(entries.flatMap(([, value]) => (isRecord(value) ? Object.keys(value) : []))),
+    ];
+    groups.push({
+        id: 'overrides',
+        title: 'Role overrides',
+        note: entries.length
+            ? 'Explicit overrides win over generated values. Values are colours, lengths, or {aliases}.'
+            : 'No explicit overrides: every role is generated.',
+        fields: [],
+        modes,
+        rows: entries.map(([token, value]) => ({
+            token,
+            cells: isRecord(value)
+                ? modes.map((mode) => ({
+                    path: ['overrides', token, mode],
+                    label: `${token} (${mode})`,
+                    kind: 'text',
+                    origin: 'explicit override',
+                    value: scalar(value[mode]),
+                }))
+                : [
+                    {
+                        path: ['overrides', token],
+                        label: token,
+                        kind: 'text',
+                        origin: 'explicit override',
+                        value: scalar(value),
+                    },
+                ],
+        })),
+    });
+    return groups;
+}
+/** A form entry as the configuration value it writes; empty clears the key. */
+export function fieldValue(field, input) {
+    const text = input.trim();
+    if (text === '')
+        return undefined;
+    if (field.kind === 'number' || field.kind === 'integer') {
+        const number = Number(text);
+        return Number.isFinite(number) ? number : text;
+    }
+    return text;
+}
+/** The JSON editor's text as a draft; a syntax error never replaces the current draft. */
+export function parseDraft(text) {
+    try {
+        const value = JSON.parse(text);
+        return isRecord(value)
+            ? { ok: true, value }
+            : { ok: false, message: 'A theme configuration is a JSON object.' };
+    }
+    catch (error) {
+        return { ok: false, message: error instanceof Error ? error.message : String(error) };
+    }
+}
+//# sourceMappingURL=theme-model.js.map

package/dist/panels/theme-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-model.js","sourceRoot":"","sources":["../../src/panels/theme-model.ts"],"names":[],"mappings":"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"}

package/dist/panels/theme-studio.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Theme Studio content (workbench.md §6, workbench-pages.md §8): one draft of the library's theme
+ * configuration, edited through a form and a JSON editor; generated in a Worker by the library's
+ * own generator; applied to light and dark specimen frames as a preview-owned stylesheet, so the
+ * real components update in place (no remount). An invalid draft keeps the last valid theme and
+ * lists the generator's diagnostics with their configuration paths.
+ */
+import { OddkinElement } from '@oddkin/core/element';
+import { type Scope } from '@oddkin/core/scope';
+import type { StyleInput } from '@oddkin/core/styles';
+import type { ThemeStudioPageData } from '../data/types.js';
+import { type IsolatedPreview } from '../preview/frame.js';
+import { type ThemeGeneration } from '../preview/theme-generation.js';
+declare const ThemeStudioElement_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly page: import("@oddkin/core/element").PropDefinition<ThemeStudioPageData | undefined>;
+    readonly frameUrl: import("@oddkin/core/element").PropDefinition<string>;
+}>;
+export declare class ThemeStudioElement extends ThemeStudioElement_base {
+    #private;
+    static styles: StyleInput;
+    constructor();
+    /** The current draft (for tests and embedding); read-only snapshot. */
+    get draft(): unknown;
+    /** Light and dark specimen frames, in that order. */
+    get previews(): readonly IsolatedPreview[];
+    /** Generation counters: requests sent, superseded, and results applied. */
+    get generation(): ThemeGeneration['stats'] | undefined;
+    protected connected(scope: Scope): void;
+    protected render(): import("@oddkin/core/template").TemplateResult;
+}
+export {};
+//# sourceMappingURL=theme-studio.d.ts.map

package/dist/panels/theme-studio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-studio.d.ts","sourceRoot":"","sources":["../../src/panels/theme-studio.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,aAAa,EAAQ,MAAM,sBAAsB,CAAC;AAG3D,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAyB,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,gCAAgC,CAAC;;;;;AAcxC,qBAAa,kBAAmB,SAAQ,uBAMtC;;IACA,OAAgB,MAAM,EAAE,UAAU,CAAoC;IAiBtE,cAGC;IAED,uEAAuE;IACvE,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,qDAAqD;IACrD,IAAI,QAAQ,IAAI,SAAS,eAAe,EAAE,CAEzC;IAED,2EAA2E;IAC3E,IAAI,UAAU,IAAI,eAAe,CAAC,OAAO,CAAC,GAAG,SAAS,CAErD;IAED,UAAmB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAc/C;IAgID,UAAmB,MAAM,mDAoLxB;CACF"}