@softov/scena 0.1.2

package/dist/styles/index.js

@@ -0,0 +1,109 @@
+// Theme registry + class-builder helpers.
+//
+// A theme is a *family* (id + label) with `light` and `dark` variants.
+// Each variant's source is either inline tokens or a CSS file URL.
+//
+// Apps switch via `applyTheme(root, themeId, mode)`, which writes
+//   data-theme="<id>"        (family)
+//   data-theme-mode="<mode>" (variant)
+// onto the root so CSS like
+//   [data-theme="vscode"][data-theme-mode="dark"] { … }
+// can drive family-specific styling. Token-sourced themes additionally
+// write `--…` custom properties directly onto the root.
+const themes = new Map();
+const injectedHrefs = new Set();
+const appliedTokens = new WeakMap();
+export function registerTheme(def) {
+    themes.set(def.id, def);
+}
+export function unregisterTheme(id) {
+    themes.delete(id);
+}
+export function getTheme(id) {
+    return themes.get(id);
+}
+export function listThemes() {
+    return [...themes.values()];
+}
+export function applyTheme(root, themeId, mode) {
+    root.setAttribute('data-theme', themeId);
+    root.setAttribute('data-theme-mode', mode);
+    const prior = appliedTokens.get(root);
+    if (prior) {
+        for (const prop of prior)
+            root.style.removeProperty(prop);
+        appliedTokens.delete(root);
+    }
+    const def = themes.get(themeId);
+    if (!def)
+        return;
+    const source = def.variants[mode];
+    if (!source)
+        return;
+    if (source.kind === 'css') {
+        ensureCssLink(source.href);
+        return;
+    }
+    const written = [];
+    for (const [k, v] of Object.entries(source.tokens)) {
+        const prop = k.startsWith('--') ? k : `--${k}`;
+        root.style.setProperty(prop, v);
+        written.push(prop);
+    }
+    appliedTokens.set(root, written);
+}
+function ensureCssLink(href) {
+    if (typeof document === 'undefined')
+        return;
+    if (injectedHrefs.has(href))
+        return;
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = href;
+    link.setAttribute('data-scena-theme', href);
+    document.head.appendChild(link);
+    injectedHrefs.add(href);
+}
+// Built-in `default` family. The CSS already ships in
+// `./themes/light.css` and `./themes/dark.css` (bundled by the app entry),
+// so the variant sources only need to be present for discovery — the
+// real styling lives in those files keyed on
+// [data-theme="default"][data-theme-mode="…"].
+registerTheme({
+    id: 'default',
+    label: 'Default',
+    variants: {
+        light: { kind: 'tokens', tokens: {} },
+        dark: { kind: 'tokens', tokens: {} },
+    },
+});
+// ── Appearance helper ────────────────────────────────────────────────────
+export const SIZE_NAMES = ['xs', 'sm', 'md', 'lg'];
+export const SIZE_SET = new Set(SIZE_NAMES);
+// Builds a class string from a base class + standard appearance props.
+//   appearance('oo-btn', { variant: 'primary', size: 'sm' })
+//     → 'oo-btn oo-btn--primary oo-btn--sm'
+export function appearance(base, opts = {}) {
+    const classes = [base];
+    if (opts.variant)
+        classes.push(`${base}--${opts.variant}`);
+    if (opts.size)
+        classes.push(`${base}--${opts.size}`);
+    if (opts.density)
+        classes.push(`${base}--${opts.density}`);
+    return classes.join(' ');
+}
+export function resolveVariableSize(name) {
+    if (name.startsWith('--'))
+        return name;
+    if (SIZE_SET.has(name))
+        return `--oo-spacing-${name}`;
+    return `--${name}`;
+}
+export function resolveVariableFontSize(name) {
+    if (name.startsWith('--'))
+        return name;
+    if (SIZE_SET.has(name))
+        return `--oo-font-size-${name}`;
+    return `--${name}`;
+}

package/dist/styles/scrollbar.css

@@ -0,0 +1,45 @@
+:root {
+  --oo-scrollbar-width: 15px;
+  --oo-scrollbar-track-color: rgb(var(--oo-rgb-surface) / 0.25);
+  /* --oo-scrollbar-track-color: transparent; */
+  --oo-scrollbar-border-color: transparent;
+  /* --oo-scrollbar-border-color: rgb(var(--oo-rgb-surface)); */
+  --oo-scrollbar-border-width: 3px;
+  --oo-scrollbar-thumb-radius: 15px;
+  --oo-scrollbar-thumb-color: rgb(var(--oo-rgb-border) / 0.35);
+  /* --oo-scrollbar-thumb-color: none; */
+  --oo-scrollbar-thumb-hover: rgb(var(--oo-rgb-border) / 0.5);
+  /* --oo-scrollbar-thumb-hover: rgb(var(--oo-rgb-accent)); */
+}
+
+/* ----------------------------------------
+/* Chrome, Edge, Safari */
+::-webkit-scrollbar {
+  width: var(--oo-scrollbar-width, 15px);
+  height: var(--oo-scrollbar-width, 15px);
+}
+
+::-webkit-scrollbar-track {
+  background: var(--oo-scrollbar-track-color);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--oo-scrollbar-thumb-color);
+  /* border-radius: var(--oo-scrollbar-thumb-radius, 9999px); */
+  border-width: var(--oo-scrollbar-border-width, 0px);
+  border-style: solid;
+  border-color: var(--oo-scrollbar-border-color, var(--oo-scrollbar-track-color));
+  /* border: 3px solid transparent; */
+  background-clip: content-box;
+  transition: background-color 160ms ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--oo-scrollbar-thumb-hover);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: medium;
+  scrollbar-color: var(--oo-scrollbar-thumb-color) var(--oo-scrollbar-track-color);
+}

package/dist/styles/surface.css

@@ -0,0 +1,179 @@
+/*
+ * Surface occupation.
+ *
+ * `docked` is the default and intentionally has no rules — the shell sizes a
+ * docked surface itself via the `style` prop (width/height + flex), exactly as
+ * it did before presentation existed. Only the out-of-flow presentations need
+ * styling here.
+ *
+ * Every overlaid presentation positions against the nearest positioned
+ * ancestor, so the shell region that hosts them must set `position: relative`.
+ * Widths come from custom properties so a shell can override per surface
+ * without rewriting the rule.
+ */
+
+.oo-surface {
+  --oo-surface-float-width: 17rem;
+  --oo-surface-sheet-height: 55%;
+  --oo-surface-bar-size: 2.75rem;
+  --oo-surface-overlay-shadow: 0 0 28px rgb(0 0 0 / 0.32);
+}
+
+/* ── floating: lifted over `main`, consumes no width ─────────────────── */
+.oo-surface[data-presentation='floating'] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 30;
+  width: min(var(--oo-surface-float-width), 86%);
+  box-shadow: var(--oo-surface-overlay-shadow);
+  background: var(--oo-color-surface, var(--oo-color-canvas));
+}
+
+.oo-surface--sidebar-left[data-presentation='floating'] {
+  left: 0;
+}
+
+.oo-surface--sidebar-right[data-presentation='floating'] {
+  right: 0;
+}
+
+/* ── sheet: floating from the bottom edge ────────────────────────────── */
+.oo-surface[data-presentation='sheet'] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 30;
+  height: var(--oo-surface-sheet-height);
+  box-shadow: var(--oo-surface-overlay-shadow);
+  background: var(--oo-color-surface, var(--oo-color-canvas));
+}
+
+/* ── bar: pinned to the bottom edge, rotated to horizontal ───────────── */
+.oo-surface[data-presentation='bar'] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: auto;
+  z-index: 40;
+  width: auto;
+  height: var(--oo-surface-bar-size);
+  flex: none;
+  background: var(--oo-color-surface, var(--oo-color-canvas));
+}
+
+/* The scrim a shell renders behind any overlaid surface. Sits below the
+ * surface (z-index 30) and above everything else. */
+.oo-surface-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  background: var(--oo-color-scrim, rgb(0 0 0 / 0.38));
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oo-surface {
+    transition: none;
+  }
+}
+
+/*
+ * ── Edge resize ──────────────────────────────────────────────────────────
+ *
+ * The alternative to a ShellSplitter element placed between two surfaces. The
+ * grip is a pseudo-element on the surface itself, so it takes no part in flex
+ * and cannot end up on the wrong side of a conditionally-rendered neighbour.
+ *
+ * The hit zone is 10px and the visible line is 1px. That gap is the point: a
+ * 1px target is unhittable and a 10px line is a gutter, so the two are
+ * separated - the gradient paints one pixel of the band and leaves the rest
+ * transparent.
+ *
+ * Only present on a docked surface. Floating, sheet and bar have no dock
+ * boundary to drag, and `useSurfaceResize` stops emitting `data-resize` for
+ * them, so the rule and the behaviour disappear together.
+ */
+.oo-surface[data-resize] {
+  position: relative;
+}
+
+.oo-surface[data-resize]::after {
+  content: '';
+  position: absolute;
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oo-surface[data-resize]::after {
+    transition: none;
+  }
+}
+
+.oo-surface[data-resize='right']::after {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 10px;
+  cursor: ew-resize;
+  background: linear-gradient(
+    to right,
+    transparent 9px,
+    var(--oo-color-accent) 9px
+  );
+}
+
+.oo-surface[data-resize='left']::after {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 10px;
+  cursor: ew-resize;
+  background: linear-gradient(
+    to right,
+    var(--oo-color-accent) 1px,
+    transparent 1px
+  );
+}
+
+.oo-surface[data-resize='top']::after {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 10px;
+  cursor: ns-resize;
+  background: linear-gradient(
+    to bottom,
+    var(--oo-color-accent) 1px,
+    transparent 1px
+  );
+}
+
+.oo-surface[data-resize='bottom']::after {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 10px;
+  cursor: ns-resize;
+  background: linear-gradient(
+    to bottom,
+    transparent 9px,
+    var(--oo-color-accent) 9px
+  );
+}
+
+/* Hovering the band, then dragging it. Two steps rather than one, so the line
+   confirms the grip before the pointer goes down. */
+.oo-surface[data-resize][data-resize-state='hot']::after {
+  opacity: 0.55;
+}
+
+.oo-surface[data-resize][data-resize-state='active']::after {
+  opacity: 1;
+}

package/dist/styles/theme.css

@@ -0,0 +1,3 @@
+@import './themes/tokens.css';
+@import './themes/light.css';
+@import './themes/dark.css';

package/dist/styles/themes/dark.css

@@ -0,0 +1,30 @@
+[data-theme-mode="dark"] {
+  color-scheme: dark;
+
+  --oo-rgb-canvas: 2 6 23;
+  --oo-rgb-panel: 15 23 42;
+  --oo-rgb-surface: 2 6 23;
+  --oo-rgb-raised: 24 32 48;
+
+  --oo-rgb-titlebar: 2 6 23;
+  --oo-rgb-activitybar: 15 23 42;
+  --oo-rgb-sidebar: 15 23 42;
+  --oo-rgb-statusbar: 15 23 42;
+
+  /* --oo-rgb-text: 226 232 240; */
+  --oo-rgb-text: 203 213 224;
+  /* --oo-rgb-muted: 148 163 184; */
+  --oo-rgb-muted: 116 131 154;
+  --oo-rgb-subtle: 100 116 139;
+
+  --oo-rgb-hover: 30 41 59;
+  --oo-rgb-active: 51 65 85;
+  --oo-rgb-selected: 20 83 76;
+
+  --oo-rgb-line: 116 131 154;
+  /* --oo-rgb-border: 148 163 184; */
+  --oo-rgb-border: 98 113 134;
+
+  --oo-line-alpha: 0.18;
+  --oo-border-alpha: 0.22;
+}

package/dist/styles/themes/light.css

@@ -0,0 +1 @@
+/* [data-theme='default'][data-theme-mode='light'] {} */

package/dist/styles/themes/tokens.css

@@ -0,0 +1,222 @@
+:root {
+  color-scheme: light;
+
+  /* ----------------------------------------
+   * Palette: raw RGB channels only
+   * ---------------------------------------- */
+  --oo-rgb-white: 255 255 255;
+  --oo-rgb-black: 17 24 39;
+
+  --oo-rgb-slate: 100 116 139;
+  --oo-rgb-gray: 107 114 128;
+  --oo-rgb-zinc: 113 113 122;
+  --oo-rgb-neutral: 115 115 115;
+  --oo-rgb-stone: 120 113 108;
+
+  --oo-rgb-red: 239 68 68;
+  --oo-rgb-orange: 249 115 22;
+  --oo-rgb-amber: 245 158 11;
+  --oo-rgb-yellow: 234 179 8;
+  --oo-rgb-lime: 132 204 22;
+  --oo-rgb-green: 34 197 94;
+  --oo-rgb-emerald: 16 185 129;
+  --oo-rgb-teal: 20 184 166;
+  --oo-rgb-cyan: 6 182 212;
+  --oo-rgb-sky: 14 165 233;
+  --oo-rgb-blue: 59 130 246;
+  --oo-rgb-indigo: 99 102 241;
+  --oo-rgb-violet: 139 92 246;
+  --oo-rgb-purple: 168 85 247;
+  --oo-rgb-fuchsia: 217 70 239;
+  --oo-rgb-pink: 236 72 153;
+  --oo-rgb-rose: 244 63 94;
+
+  --oo-color-white: rgb(var(--oo-rgb-white));
+  --oo-color-black: rgb(var(--oo-rgb-black));
+  --oo-color-slate: rgb(var(--oo-rgb-slate));
+  --oo-color-gray: rgb(var(--oo-rgb-gray));
+  --oo-color-zinc: rgb(var(--oo-rgb-zinc));
+  --oo-color-neutral: rgb(var(--oo-rgb-neutral));
+  --oo-color-stone: rgb(var(--oo-rgb-stone));
+  --oo-color-red: rgb(var(--oo-rgb-red));
+  --oo-color-orange: rgb(var(--oo-rgb-orange));
+  --oo-color-amber: rgb(var(--oo-rgb-amber));
+  --oo-color-yellow: rgb(var(--oo-rgb-yellow));
+  --oo-color-lime: rgb(var(--oo-rgb-lime));
+  --oo-color-green: rgb(var(--oo-rgb-green));
+  --oo-color-emerald: rgb(var(--oo-rgb-emerald));
+  --oo-color-teal: rgb(var(--oo-rgb-teal));
+  --oo-color-cyan: rgb(var(--oo-rgb-cyan));
+  --oo-color-sky: rgb(var(--oo-rgb-sky));
+  --oo-color-blue: rgb(var(--oo-rgb-blue));
+  --oo-color-indigo: rgb(var(--oo-rgb-indigo));
+  --oo-color-violet: rgb(var(--oo-rgb-violet));
+  --oo-color-purple: rgb(var(--oo-rgb-purple));
+  --oo-color-fuchsia: rgb(var(--oo-rgb-fuchsia));
+  --oo-color-pink: rgb(var(--oo-rgb-pink));
+  --oo-color-rose: rgb(var(--oo-rgb-rose));
+
+  /* ----------------------------------------
+   * Base shell colors
+   * ---------------------------------------- */
+  --oo-rgb-canvas: 255 255 255;
+  --oo-rgb-panel: 248 248 248;
+  --oo-rgb-surface: 255 255 255;
+  --oo-rgb-raised: 255 255 255;
+
+  --oo-rgb-titlebar: var(--oo-rgb-panel);
+  --oo-rgb-activitybar: var(--oo-rgb-panel);
+  --oo-rgb-sidebar: var(--oo-rgb-panel);
+  --oo-rgb-statusbar: var(--oo-rgb-panel);
+
+  /* ----------------------------------------
+   * Text
+   * ---------------------------------------- */
+  --oo-rgb-text: 45 53 92;
+  --oo-rgb-muted: 152 152 172;
+  --oo-rgb-subtle: 170 170 188;
+  --oo-rgb-inverse: 255 255 255;
+
+  /* ----------------------------------------
+   * Interaction states
+   * ---------------------------------------- */
+  --oo-rgb-hover: 240 240 240;
+  --oo-rgb-active: 232 232 232;
+  --oo-rgb-selected: 230 250 246;
+
+  /* ----------------------------------------
+   * Borders / separators
+   * ---------------------------------------- */
+  --oo-rgb-line: 185 185 255;
+  --oo-rgb-border: 185 185 255;
+
+  --oo-line-alpha: 0.25;
+  --oo-border-alpha: 0.25;
+
+  /* ----------------------------------------
+   * Intent / brand
+   * ---------------------------------------- */
+  --oo-rgb-accent: 78 201 176;
+  --oo-rgb-primary: var(--oo-rgb-accent);
+  --oo-rgb-danger: 204 0 0;
+  --oo-rgb-success: 0 170 0;
+  --oo-rgb-warning: 204 136 0;
+  --oo-rgb-info: var(--oo-blue);
+
+  /* ----------------------------------------
+   * Resolved semantic colors
+   * ---------------------------------------- */
+  --oo-color-canvas: rgb(var(--oo-rgb-canvas));
+  --oo-color-panel: rgb(var(--oo-rgb-panel));
+  --oo-color-surface: rgb(var(--oo-rgb-surface));
+  --oo-color-raised: rgb(var(--oo-rgb-raised));
+
+  --oo-color-titlebar: rgb(var(--oo-rgb-titlebar));
+  --oo-color-activitybar: rgb(var(--oo-rgb-activitybar));
+  --oo-color-sidebar: rgb(var(--oo-rgb-sidebar));
+  --oo-color-statusbar: rgb(var(--oo-rgb-statusbar));
+
+  --oo-color-text: rgb(var(--oo-rgb-text));
+  --oo-color-muted: rgb(var(--oo-rgb-muted));
+  --oo-color-subtle: rgb(var(--oo-rgb-subtle));
+  --oo-color-inverse: rgb(var(--oo-rgb-inverse));
+
+  --oo-color-hover: rgb(var(--oo-rgb-hover));
+  --oo-color-active: rgb(var(--oo-rgb-active));
+  --oo-color-selected: rgb(var(--oo-rgb-selected));
+
+  --oo-color-line: rgb(var(--oo-rgb-line) / var(--oo-line-alpha));
+  --oo-color-border: rgb(var(--oo-rgb-border) / var(--oo-border-alpha));
+
+  --oo-color-accent: rgb(var(--oo-rgb-accent));
+  --oo-color-primary: rgb(var(--oo-rgb-primary));
+  --oo-color-danger: rgb(var(--oo-rgb-danger));
+  --oo-color-success: rgb(var(--oo-rgb-success));
+  --oo-color-warning: rgb(var(--oo-rgb-warning));
+  --oo-color-info: rgb(var(--oo-rgb-info));
+
+  /* ----------------------------------------
+   * Component aliases
+   * ---------------------------------------- */
+  --oo-app-bg: var(--oo-color-canvas);
+  --oo-app-fg: var(--oo-color-text);
+
+  --oo-titlebar-bg: var(--oo-color-titlebar);
+  --oo-titlebar-fg: var(--oo-color-muted);
+
+  --oo-activitybar-bg: var(--oo-color-activitybar);
+  --oo-activitybar-fg: var(--oo-color-muted);
+  --oo-activitybar-fg-hover: var(--oo-color-accent);
+  --oo-activitybar-bg-hover: var(--oo-color-hover);
+  --oo-activitybar-fg-active: var(--oo-color-accent);
+  --oo-activitybar-bg-active: var(--oo-color-active);
+
+  --oo-sidebar-left-bg: var(--oo-color-sidebar);
+  --oo-sidebar-left-fg: var(--oo-color-text);
+  --oo-sidebar-right-bg: var(--oo-color-sidebar);
+  --oo-sidebar-right-fg: var(--oo-color-text);
+
+  --oo-card-bg: var(--oo-color-surface);
+  --oo-card-fg: var(--oo-color-text);
+  --oo-card-border: var(--oo-color-border);
+
+  --oo-popup-bg: var(--oo-color-raised);
+  --oo-popup-fg: var(--oo-color-text);
+  --oo-popup-border: var(--oo-color-border);
+
+  --oo-input-bg: var(--oo-color-surface);
+  --oo-input-fg: var(--oo-color-text);
+  --oo-input-border: var(--oo-color-border);
+  --oo-input-placeholder: var(--oo-color-muted);
+
+  /* ----------------------------------------
+   * Spacing
+   * ---------------------------------------- */
+  --oo-spacing-xs: 3px;
+  --oo-spacing-sm: 6px;
+  --oo-spacing-md: 14px;
+  --oo-spacing-lg: 22px;
+  --oo-spacing-xl: 30px;
+
+  --oo-row-gap: var(--oo-spacing-md);
+  --oo-column-gap: var(--oo-spacing-md);
+  --oo-list-gap: var(--oo-spacing-sm);
+  --oo-list-padding: 0;
+
+  /* ----------------------------------------
+   * Radius
+   * ---------------------------------------- */
+  --oo-radius-xs: 3px;
+  --oo-radius-sm: 4px;
+  --oo-radius-md: 6px;
+  --oo-radius-lg: 12px;
+  --oo-radius-xl: 18px;
+  --oo-radius-full: 999px;
+
+  /* ----------------------------------------
+   * Typography
+   * ---------------------------------------- */
+  --oo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --oo-font-mono: 'SF Mono', Monaco, Consolas, monospace;
+
+  --oo-font-size-xs: 11px;
+  --oo-font-size-sm: 13px;
+  --oo-font-size-md: 14px;
+  --oo-font-size-lg: 16px;
+  --oo-font-size-xl: 20px;
+
+  --oo-line-height: 1.5;
+
+  /* ----------------------------------------
+   * Elevation
+   * ---------------------------------------- */
+  --oo-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08);
+  --oo-shadow-md: 0 4px 8px rgb(0 0 0 / 0.12);
+  --oo-shadow-lg: 0 12px 24px rgb(0 0 0 / 0.16);
+
+  /* ----------------------------------------
+   * Z layers
+   * ---------------------------------------- */
+  --oo-z-overlay: 1000;
+  --oo-z-popup: 9999;
+}

package/dist/types/binding-resolver.d.ts

@@ -0,0 +1,30 @@
+import type { Disposable } from './disposable.js';
+import type { BindingPath, PropValue } from './component-graph.js';
+import type { ScopeName } from './reactive-store.js';
+export type CompiledBinding = {
+    kind: 'literal';
+    value: unknown;
+} | {
+    kind: 'path';
+    scope: ScopeName;
+    segments: string[];
+    wildcard: boolean;
+    raw: BindingPath;
+} | {
+    kind: 'functionCall';
+    call: string;
+    argBindings: Record<string, CompiledBinding>;
+    callableFrom?: 'clientOnly';
+    returnType?: string;
+} | {
+    kind: 'event';
+    name: string;
+    contextBindings?: Record<string, CompiledBinding>;
+    wantResponse?: boolean;
+    responsePath?: BindingPath;
+};
+export interface BindingResolver {
+    compile(prop: PropValue): CompiledBinding;
+    watch(binding: CompiledBinding, fn: (value: unknown) => void): Disposable;
+    resolve(binding: CompiledBinding): unknown;
+}

package/dist/types/binding-resolver.js

@@ -0,0 +1 @@
+export {};

package/dist/types/colors.d.ts

@@ -0,0 +1,7 @@
+export declare const NAMED_COLORS: readonly ["shell", "muted", "amber", "blue", "red", "green", "yellow", "purple", "orange", "pink", "teal", "cyan", "white", "black", "gray", "indigo", "violet", "fuchsia", "rose", "lime", "emerald", "sky", "slate", "zinc", "neutral", "stone", "success", "danger", "warning"];
+export declare const SETTED_COLORS: Set<"shell" | "muted" | "amber" | "blue" | "red" | "green" | "yellow" | "purple" | "orange" | "pink" | "teal" | "cyan" | "white" | "black" | "gray" | "indigo" | "violet" | "fuchsia" | "rose" | "lime" | "emerald" | "sky" | "slate" | "zinc" | "neutral" | "stone" | "success" | "danger" | "warning">;
+export type ScenaColor = (typeof NAMED_COLORS)[number];
+export type ResourceColor = ScenaColor | (string & {});
+export declare function resolveColorVar(c: ResourceColor): string;
+export declare function resolveColorRgb(c?: ResourceColor): string | undefined;
+export declare function resolveColorAlpha(c?: string, alpha?: number): string;

package/dist/types/colors.js

@@ -0,0 +1,59 @@
+// Named color palette
+// Tokens themselves live in styles/theme.css as raw RGB triplets
+// Callers can wrap with `rgb(var(--oo-color-X))` and
+// get alpha control via `rgb(var(...) / 0.6)`.
+export const NAMED_COLORS = [
+    'shell',
+    'muted',
+    'amber',
+    'blue',
+    'red',
+    'green',
+    'yellow',
+    'purple',
+    'orange',
+    'pink',
+    'teal',
+    'cyan',
+    'white',
+    'black',
+    'gray',
+    'indigo',
+    'violet',
+    'fuchsia',
+    'rose',
+    'lime',
+    'emerald',
+    'sky',
+    'slate',
+    'zinc',
+    'neutral',
+    'stone',
+    'success',
+    'danger',
+    'warning',
+];
+export const SETTED_COLORS = new Set(NAMED_COLORS);
+export function resolveColorVar(c) {
+    if (SETTED_COLORS.has(c))
+        return `var(--oo-rgb-${c})`;
+    return c;
+}
+export function resolveColorRgb(c) {
+    if (!c)
+        return undefined;
+    if (SETTED_COLORS.has(c))
+        return `rgb(var(--oo-rgb-${c}))`;
+    return c.startsWith('var(') || c.includes('rgb') || c.startsWith('#') ? c : `rgb(${c})`;
+}
+export function resolveColorAlpha(c, alpha) {
+    if (!c)
+        return alpha ? `rgba(128, 128, 128, ${alpha})` : 'rgb(128 128 128)';
+    if (SETTED_COLORS.has(c))
+        return alpha ? `rgb(var(--oo-rgb-${c}) / ${alpha})` : `rgb(var(--oo-rgb-${c}))`;
+    return c.startsWith('var(') || c.includes('rgb') || c.startsWith('#')
+        ? c
+        : alpha
+            ? `rgb(${c} / ${alpha})`
+            : `rgb(${c})`;
+}