@openwaggle/extension-sdk 0.0.0-bootstrap.0 → 0.1.0

package/dist/theme-data.js

@@ -0,0 +1,144 @@
+export const OPENWAGGLE_EXTENSION_THEME_CSS_VARIABLES = {
+    color: {
+        background: '--ow-color-background',
+        surface: '--ow-color-surface',
+        surfaceRaised: '--ow-color-surface-raised',
+        surfaceHover: '--ow-color-surface-hover',
+        surfaceActive: '--ow-color-surface-active',
+        border: '--ow-color-border',
+        borderStrong: '--ow-color-border-strong',
+        text: '--ow-color-text',
+        textSubtle: '--ow-color-text-subtle',
+        textMuted: '--ow-color-text-muted',
+        textDim: '--ow-color-text-dim',
+        accent: '--ow-color-accent',
+        accentDim: '--ow-color-accent-dim',
+        success: '--ow-color-success',
+        danger: '--ow-color-danger',
+        warning: '--ow-color-warning',
+        info: '--ow-color-info',
+    },
+    typography: {
+        sansFamily: '--ow-font-family-sans',
+        monoFamily: '--ow-font-family-mono',
+    },
+    spacing: {
+        xs: '--ow-space-xs',
+        sm: '--ow-space-sm',
+        md: '--ow-space-md',
+        lg: '--ow-space-lg',
+        xl: '--ow-space-xl',
+    },
+    radius: {
+        sm: '--ow-radius-sm',
+        md: '--ow-radius-md',
+        lg: '--ow-radius-lg',
+        panel: '--ow-radius-panel',
+    },
+    focus: {
+        ring: '--ow-focus-ring',
+        shadow: '--ow-focus-shadow',
+    },
+    elevation: {
+        card: '--ow-elevation-card',
+        overlay: '--ow-elevation-overlay',
+    },
+};
+export const DEFAULT_EXTENSION_THEME_TOKENS = {
+    color: {
+        background: '#141619',
+        surface: '#1a1d22',
+        surfaceRaised: '#1f232a',
+        surfaceHover: '#262b33',
+        surfaceActive: '#1d1a10',
+        border: '#1e2229',
+        borderStrong: '#2a3240',
+        text: '#e7e9ee',
+        textSubtle: '#c9cdd6',
+        textMuted: '#9098a8',
+        textDim: '#666f7d',
+        accent: '#f5a623',
+        accentDim: '#b87410',
+        success: '#4caf72',
+        danger: '#ef4444',
+        warning: '#f5a623',
+        info: '#61a8ff',
+    },
+    typography: {
+        sansFamily: 'Inter, "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+        monoFamily: '"SF Mono", "JetBrains Mono", "Cascadia Mono", ui-monospace, monospace',
+    },
+    spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '12px',
+        lg: '16px',
+        xl: '24px',
+    },
+    radius: {
+        sm: '6px',
+        md: '9px',
+        lg: '12px',
+        panel: '22px',
+    },
+    focus: {
+        ring: '#9aa3b2',
+        shadow: '0 0 0 1px color-mix(in srgb, #9aa3b2 76%, transparent), 0 0 0 3px color-mix(in srgb, #9aa3b2 15%, transparent)',
+    },
+    elevation: {
+        card: 'inset 0 1px 0 rgba(255, 255, 255, 0.02)',
+        overlay: '0 24px 80px rgba(0, 0, 0, 0.45)',
+    },
+};
+export const SOURCE_EXTENSION_THEME_CSS_VARIABLES = {
+    color: {
+        background: '--color-bg',
+        surface: '--color-bg-secondary',
+        surfaceRaised: '--color-bg-tertiary',
+        surfaceHover: '--color-bg-hover',
+        surfaceActive: '--color-bg-active',
+        border: '--color-border',
+        borderStrong: '--color-border-light',
+        text: '--color-text-primary',
+        textSubtle: '--color-text-secondary',
+        textMuted: '--color-text-tertiary',
+        textDim: '--color-text-muted',
+        accent: '--color-accent',
+        accentDim: '--color-accent-dim',
+        success: '--color-success',
+        danger: '--color-error',
+        warning: '--color-warning',
+        info: '--color-info',
+    },
+    typography: {
+        sansFamily: '--font-sans',
+        monoFamily: '--font-mono',
+    },
+    radius: {
+        panel: '--radius-panel',
+    },
+};
+export const EXTENSION_THEME_COLOR_KEYS = [
+    'background',
+    'surface',
+    'surfaceRaised',
+    'surfaceHover',
+    'surfaceActive',
+    'border',
+    'borderStrong',
+    'text',
+    'textSubtle',
+    'textMuted',
+    'textDim',
+    'accent',
+    'accentDim',
+    'success',
+    'danger',
+    'warning',
+    'info',
+];
+export const EXTENSION_THEME_TYPOGRAPHY_KEYS = ['sansFamily', 'monoFamily'];
+export const EXTENSION_THEME_SPACING_KEYS = ['xs', 'sm', 'md', 'lg', 'xl'];
+export const EXTENSION_THEME_RADIUS_KEYS = ['sm', 'md', 'lg', 'panel'];
+export const EXTENSION_THEME_FOCUS_KEYS = ['ring', 'shadow'];
+export const EXTENSION_THEME_ELEVATION_KEYS = ['card', 'overlay'];

package/dist/theme-types.d.ts

@@ -0,0 +1,61 @@
+export type OpenWaggleExtensionColorScheme = 'dark';
+export interface OpenWaggleExtensionThemeTokens {
+    readonly color: {
+        readonly background: string;
+        readonly surface: string;
+        readonly surfaceRaised: string;
+        readonly surfaceHover: string;
+        readonly surfaceActive: string;
+        readonly border: string;
+        readonly borderStrong: string;
+        readonly text: string;
+        readonly textSubtle: string;
+        readonly textMuted: string;
+        readonly textDim: string;
+        readonly accent: string;
+        readonly accentDim: string;
+        readonly success: string;
+        readonly danger: string;
+        readonly warning: string;
+        readonly info: string;
+    };
+    readonly typography: {
+        readonly sansFamily: string;
+        readonly monoFamily: string;
+    };
+    readonly spacing: {
+        readonly xs: string;
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+    };
+    readonly radius: {
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly panel: string;
+    };
+    readonly focus: {
+        readonly ring: string;
+        readonly shadow: string;
+    };
+    readonly elevation: {
+        readonly card: string;
+        readonly overlay: string;
+    };
+}
+export type OpenWaggleExtensionThemeCssVariables = OpenWaggleExtensionThemeTokens;
+export interface OpenWaggleExtensionTheme {
+    readonly colorScheme: OpenWaggleExtensionColorScheme;
+    readonly tokens: OpenWaggleExtensionThemeTokens;
+    readonly cssVariables: OpenWaggleExtensionThemeCssVariables;
+}
+export interface OpenWaggleExtensionThemeCssVariableEntry {
+    readonly name: string;
+    readonly value: string;
+}
+export type ExtensionThemeCssVariableResolver = (cssVariable: string, fallback: string) => string;
+export interface CreateOpenWaggleExtensionThemeOptions {
+    readonly resolveCssVariable?: ExtensionThemeCssVariableResolver;
+}

package/dist/theme-types.js

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

package/dist/theme.d.ts

@@ -0,0 +1,6 @@
+import type { CreateOpenWaggleExtensionThemeOptions, OpenWaggleExtensionTheme, OpenWaggleExtensionThemeCssVariableEntry } from './theme-types.js';
+export { OPENWAGGLE_EXTENSION_THEME_CSS_VARIABLES } from './theme-data.js';
+export type { CreateOpenWaggleExtensionThemeOptions, ExtensionThemeCssVariableResolver, OpenWaggleExtensionColorScheme, OpenWaggleExtensionTheme, OpenWaggleExtensionThemeCssVariableEntry, OpenWaggleExtensionThemeCssVariables, OpenWaggleExtensionThemeTokens, } from './theme-types.js';
+export declare function createOpenWaggleExtensionTheme(options?: CreateOpenWaggleExtensionThemeOptions): OpenWaggleExtensionTheme;
+export declare function extensionThemeCssVariableEntries(theme: OpenWaggleExtensionTheme): readonly OpenWaggleExtensionThemeCssVariableEntry[];
+export declare function isOpenWaggleExtensionTheme(value: unknown): value is OpenWaggleExtensionTheme;

package/dist/theme.js

@@ -0,0 +1,128 @@
+import { isRecord } from './internal-validation.js';
+import { DEFAULT_EXTENSION_THEME_TOKENS, EXTENSION_THEME_COLOR_KEYS, EXTENSION_THEME_ELEVATION_KEYS, EXTENSION_THEME_FOCUS_KEYS, EXTENSION_THEME_RADIUS_KEYS, EXTENSION_THEME_SPACING_KEYS, EXTENSION_THEME_TYPOGRAPHY_KEYS, OPENWAGGLE_EXTENSION_THEME_CSS_VARIABLES, SOURCE_EXTENSION_THEME_CSS_VARIABLES, } from './theme-data.js';
+export { OPENWAGGLE_EXTENSION_THEME_CSS_VARIABLES } from './theme-data.js';
+const EMPTY_LENGTH = 0;
+function resolvedCssValue(resolver, cssVariable, fallback) {
+    if (resolver === undefined || cssVariable === undefined) {
+        return fallback;
+    }
+    const resolved = resolver(cssVariable, fallback).trim();
+    return resolved.length > EMPTY_LENGTH ? resolved : fallback;
+}
+function colorTokens(resolve) {
+    const source = SOURCE_EXTENSION_THEME_CSS_VARIABLES.color;
+    const fallback = DEFAULT_EXTENSION_THEME_TOKENS.color;
+    return {
+        background: resolvedCssValue(resolve, source.background, fallback.background),
+        surface: resolvedCssValue(resolve, source.surface, fallback.surface),
+        surfaceRaised: resolvedCssValue(resolve, source.surfaceRaised, fallback.surfaceRaised),
+        surfaceHover: resolvedCssValue(resolve, source.surfaceHover, fallback.surfaceHover),
+        surfaceActive: resolvedCssValue(resolve, source.surfaceActive, fallback.surfaceActive),
+        border: resolvedCssValue(resolve, source.border, fallback.border),
+        borderStrong: resolvedCssValue(resolve, source.borderStrong, fallback.borderStrong),
+        text: resolvedCssValue(resolve, source.text, fallback.text),
+        textSubtle: resolvedCssValue(resolve, source.textSubtle, fallback.textSubtle),
+        textMuted: resolvedCssValue(resolve, source.textMuted, fallback.textMuted),
+        textDim: resolvedCssValue(resolve, source.textDim, fallback.textDim),
+        accent: resolvedCssValue(resolve, source.accent, fallback.accent),
+        accentDim: resolvedCssValue(resolve, source.accentDim, fallback.accentDim),
+        success: resolvedCssValue(resolve, source.success, fallback.success),
+        danger: resolvedCssValue(resolve, source.danger, fallback.danger),
+        warning: resolvedCssValue(resolve, source.warning, fallback.warning),
+        info: resolvedCssValue(resolve, source.info, fallback.info),
+    };
+}
+function typographyTokens(resolve) {
+    const source = SOURCE_EXTENSION_THEME_CSS_VARIABLES.typography;
+    const fallback = DEFAULT_EXTENSION_THEME_TOKENS.typography;
+    return {
+        sansFamily: resolvedCssValue(resolve, source.sansFamily, fallback.sansFamily),
+        monoFamily: resolvedCssValue(resolve, source.monoFamily, fallback.monoFamily),
+    };
+}
+function radiusTokens(resolve) {
+    const fallback = DEFAULT_EXTENSION_THEME_TOKENS.radius;
+    return {
+        sm: fallback.sm,
+        md: fallback.md,
+        lg: fallback.lg,
+        panel: resolvedCssValue(resolve, SOURCE_EXTENSION_THEME_CSS_VARIABLES.radius.panel, fallback.panel),
+    };
+}
+function hasStringKeys(value, keys) {
+    if (!isRecord(value)) {
+        return false;
+    }
+    for (const key of keys) {
+        if (typeof value[key] !== 'string') {
+            return false;
+        }
+    }
+    return true;
+}
+function hasThemeTokenGroups(value) {
+    return (isRecord(value) &&
+        hasStringKeys(value.color, EXTENSION_THEME_COLOR_KEYS) &&
+        hasStringKeys(value.typography, EXTENSION_THEME_TYPOGRAPHY_KEYS) &&
+        hasStringKeys(value.spacing, EXTENSION_THEME_SPACING_KEYS) &&
+        hasStringKeys(value.radius, EXTENSION_THEME_RADIUS_KEYS) &&
+        hasStringKeys(value.focus, EXTENSION_THEME_FOCUS_KEYS) &&
+        hasStringKeys(value.elevation, EXTENSION_THEME_ELEVATION_KEYS));
+}
+export function createOpenWaggleExtensionTheme(options = {}) {
+    const resolve = options.resolveCssVariable;
+    return {
+        colorScheme: 'dark',
+        tokens: {
+            color: colorTokens(resolve),
+            typography: typographyTokens(resolve),
+            spacing: DEFAULT_EXTENSION_THEME_TOKENS.spacing,
+            radius: radiusTokens(resolve),
+            focus: DEFAULT_EXTENSION_THEME_TOKENS.focus,
+            elevation: DEFAULT_EXTENSION_THEME_TOKENS.elevation,
+        },
+        cssVariables: OPENWAGGLE_EXTENSION_THEME_CSS_VARIABLES,
+    };
+}
+export function extensionThemeCssVariableEntries(theme) {
+    return [
+        { name: theme.cssVariables.color.background, value: theme.tokens.color.background },
+        { name: theme.cssVariables.color.surface, value: theme.tokens.color.surface },
+        { name: theme.cssVariables.color.surfaceRaised, value: theme.tokens.color.surfaceRaised },
+        { name: theme.cssVariables.color.surfaceHover, value: theme.tokens.color.surfaceHover },
+        { name: theme.cssVariables.color.surfaceActive, value: theme.tokens.color.surfaceActive },
+        { name: theme.cssVariables.color.border, value: theme.tokens.color.border },
+        { name: theme.cssVariables.color.borderStrong, value: theme.tokens.color.borderStrong },
+        { name: theme.cssVariables.color.text, value: theme.tokens.color.text },
+        { name: theme.cssVariables.color.textSubtle, value: theme.tokens.color.textSubtle },
+        { name: theme.cssVariables.color.textMuted, value: theme.tokens.color.textMuted },
+        { name: theme.cssVariables.color.textDim, value: theme.tokens.color.textDim },
+        { name: theme.cssVariables.color.accent, value: theme.tokens.color.accent },
+        { name: theme.cssVariables.color.accentDim, value: theme.tokens.color.accentDim },
+        { name: theme.cssVariables.color.success, value: theme.tokens.color.success },
+        { name: theme.cssVariables.color.danger, value: theme.tokens.color.danger },
+        { name: theme.cssVariables.color.warning, value: theme.tokens.color.warning },
+        { name: theme.cssVariables.color.info, value: theme.tokens.color.info },
+        { name: theme.cssVariables.typography.sansFamily, value: theme.tokens.typography.sansFamily },
+        { name: theme.cssVariables.typography.monoFamily, value: theme.tokens.typography.monoFamily },
+        { name: theme.cssVariables.spacing.xs, value: theme.tokens.spacing.xs },
+        { name: theme.cssVariables.spacing.sm, value: theme.tokens.spacing.sm },
+        { name: theme.cssVariables.spacing.md, value: theme.tokens.spacing.md },
+        { name: theme.cssVariables.spacing.lg, value: theme.tokens.spacing.lg },
+        { name: theme.cssVariables.spacing.xl, value: theme.tokens.spacing.xl },
+        { name: theme.cssVariables.radius.sm, value: theme.tokens.radius.sm },
+        { name: theme.cssVariables.radius.md, value: theme.tokens.radius.md },
+        { name: theme.cssVariables.radius.lg, value: theme.tokens.radius.lg },
+        { name: theme.cssVariables.radius.panel, value: theme.tokens.radius.panel },
+        { name: theme.cssVariables.focus.ring, value: theme.tokens.focus.ring },
+        { name: theme.cssVariables.focus.shadow, value: theme.tokens.focus.shadow },
+        { name: theme.cssVariables.elevation.card, value: theme.tokens.elevation.card },
+        { name: theme.cssVariables.elevation.overlay, value: theme.tokens.elevation.overlay },
+    ];
+}
+export function isOpenWaggleExtensionTheme(value) {
+    return (isRecord(value) &&
+        value.colorScheme === 'dark' &&
+        hasThemeTokenGroups(value.tokens) &&
+        hasThemeTokenGroups(value.cssVariables));
+}

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+export type * from './contribution-types.js';
+export type * from './core-types.js';
+export type * from './openwaggle-types.js';
+export type * from './registry-types.js';
+export type * from './runtime-types.js';
+export type * from './storage-types.js';

package/dist/types.js

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

package/dist/ui-constants.d.ts

@@ -0,0 +1,24 @@
+export declare const OPENWAGGLE_EXTENSION_UI_CLASS_NAMES: {
+    readonly root: "ow-extension-root";
+    readonly panel: "ow-extension-panel";
+    readonly stack: "ow-extension-stack";
+    readonly row: "ow-extension-row";
+    readonly heading: "ow-extension-heading";
+    readonly text: "ow-extension-text";
+    readonly muted: "ow-extension-muted";
+    readonly divider: "ow-extension-divider";
+    readonly button: "ow-extension-button";
+    readonly input: "ow-extension-input";
+    readonly textarea: "ow-extension-textarea";
+    readonly select: "ow-extension-select";
+    readonly checkbox: "ow-extension-checkbox";
+    readonly badge: "ow-extension-badge";
+    readonly field: "ow-extension-field";
+    readonly alert: "ow-extension-alert";
+};
+export declare const OPENWAGGLE_EXTENSION_UI_ATTRIBUTES: {
+    readonly tone: "data-ow-tone";
+    readonly variant: "data-ow-variant";
+};
+export type OpenWaggleExtensionUiTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+export type OpenWaggleExtensionUiButtonVariant = 'primary' | 'secondary' | 'ghost';

package/dist/ui-constants.js

@@ -0,0 +1,22 @@
+export const OPENWAGGLE_EXTENSION_UI_CLASS_NAMES = {
+    root: 'ow-extension-root',
+    panel: 'ow-extension-panel',
+    stack: 'ow-extension-stack',
+    row: 'ow-extension-row',
+    heading: 'ow-extension-heading',
+    text: 'ow-extension-text',
+    muted: 'ow-extension-muted',
+    divider: 'ow-extension-divider',
+    button: 'ow-extension-button',
+    input: 'ow-extension-input',
+    textarea: 'ow-extension-textarea',
+    select: 'ow-extension-select',
+    checkbox: 'ow-extension-checkbox',
+    badge: 'ow-extension-badge',
+    field: 'ow-extension-field',
+    alert: 'ow-extension-alert',
+};
+export const OPENWAGGLE_EXTENSION_UI_ATTRIBUTES = {
+    tone: 'data-ow-tone',
+    variant: 'data-ow-variant',
+};

package/dist/ui-stylesheet.d.ts

@@ -0,0 +1,8 @@
+import type { OpenWaggleExtensionTheme } from './theme-types.js';
+export interface CreateOpenWaggleExtensionUiStylesheetOptions {
+    readonly theme?: OpenWaggleExtensionTheme;
+    readonly scopeSelector?: string;
+    readonly includeThemeVariables?: boolean;
+}
+export declare function extensionThemeCssVariableDeclarations(theme?: OpenWaggleExtensionTheme): string;
+export declare function createOpenWaggleExtensionUiStylesheet(options?: CreateOpenWaggleExtensionUiStylesheetOptions): string;

package/dist/ui-stylesheet.js

@@ -0,0 +1,223 @@
+import { createOpenWaggleExtensionTheme, extensionThemeCssVariableEntries } from './theme.js';
+import { OPENWAGGLE_EXTENSION_UI_ATTRIBUTES, OPENWAGGLE_EXTENSION_UI_CLASS_NAMES, } from './ui-constants.js';
+const DEFAULT_UI_SCOPE_SELECTOR = `.${OPENWAGGLE_EXTENSION_UI_CLASS_NAMES.root}`;
+export function extensionThemeCssVariableDeclarations(theme = createOpenWaggleExtensionTheme()) {
+    const declarations = [];
+    for (const entry of extensionThemeCssVariableEntries(theme)) {
+        declarations.push(`  ${entry.name}: ${entry.value};`);
+    }
+    return declarations.join('\n');
+}
+function themeVariableRule(theme, selector) {
+    return `${selector} {
+${extensionThemeCssVariableDeclarations(theme)}
+}`;
+}
+function baseUiRules(selector) {
+    const classes = OPENWAGGLE_EXTENSION_UI_CLASS_NAMES;
+    return `${selector} {
+  color: var(--ow-color-text);
+  font-family: var(--ow-font-family-sans);
+  font-size: 13px;
+  line-height: 1.45;
+  box-sizing: border-box;
+}
+
+${selector} *,
+${selector} *::before,
+${selector} *::after {
+  box-sizing: inherit;
+}
+
+${selector} .${classes.panel} {
+  background: var(--ow-color-surface);
+  border: 1px solid var(--ow-color-border);
+  border-radius: var(--ow-radius-panel);
+  box-shadow: var(--ow-elevation-card);
+  padding: var(--ow-space-lg);
+}
+
+${selector} .${classes.stack} {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ow-space-md);
+}
+
+${selector} .${classes.row} {
+  align-items: center;
+  display: flex;
+  gap: var(--ow-space-sm);
+}
+
+${selector} .${classes.heading} {
+  color: var(--ow-color-text);
+  font-size: 14px;
+  font-weight: 650;
+  line-height: 1.25;
+  margin: 0;
+}
+
+${selector} .${classes.text} {
+  color: var(--ow-color-text-subtle);
+  margin: 0;
+}
+
+${selector} .${classes.muted} {
+  color: var(--ow-color-text-muted);
+}
+
+${selector} .${classes.divider} {
+  background: var(--ow-color-border);
+  border: 0;
+  height: 1px;
+  margin: var(--ow-space-xs) 0;
+}`;
+}
+function controlUiRules(selector) {
+    const classes = OPENWAGGLE_EXTENSION_UI_CLASS_NAMES;
+    const attributes = OPENWAGGLE_EXTENSION_UI_ATTRIBUTES;
+    return `${selector} .${classes.button} {
+  align-items: center;
+  background: var(--ow-color-surface-raised);
+  border: 1px solid var(--ow-color-border-strong);
+  border-radius: var(--ow-radius-md);
+  color: var(--ow-color-text);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-weight: 600;
+  gap: var(--ow-space-sm);
+  justify-content: center;
+  min-height: 32px;
+  padding: 0 var(--ow-space-md);
+}
+
+${selector} .${classes.button}:focus-visible,
+${selector} .${classes.input}:focus-visible,
+${selector} .${classes.textarea}:focus-visible,
+${selector} .${classes.select}:focus-visible,
+${selector} .${classes.checkbox}:focus-visible {
+  box-shadow: var(--ow-focus-shadow);
+  outline: 1px solid var(--ow-focus-ring);
+}
+
+${selector} .${classes.button}[${attributes.variant}="primary"] {
+  background: var(--ow-color-accent);
+  border-color: var(--ow-color-accent);
+  color: var(--ow-color-background);
+}
+
+${selector} .${classes.button}[${attributes.variant}="ghost"] {
+  background: transparent;
+  border-color: transparent;
+}
+
+${selector} .${classes.input},
+${selector} .${classes.textarea},
+${selector} .${classes.select} {
+  background: var(--ow-color-surface-raised);
+  border: 1px solid var(--ow-color-border-strong);
+  border-radius: var(--ow-radius-md);
+  color: var(--ow-color-text);
+  font: inherit;
+  min-height: 32px;
+  padding: 0 var(--ow-space-md);
+}
+
+${selector} .${classes.textarea} {
+  min-height: 88px;
+  padding-bottom: var(--ow-space-sm);
+  padding-top: var(--ow-space-sm);
+  resize: vertical;
+}
+
+${selector} .${classes.input}::placeholder,
+${selector} .${classes.textarea}::placeholder {
+  color: var(--ow-color-text-dim);
+}
+
+${selector} .${classes.checkbox} {
+  accent-color: var(--ow-color-accent);
+  min-height: 16px;
+  min-width: 16px;
+}`;
+}
+function badgeUiRules(selector) {
+    const classes = OPENWAGGLE_EXTENSION_UI_CLASS_NAMES;
+    const attributes = OPENWAGGLE_EXTENSION_UI_ATTRIBUTES;
+    return `${selector} .${classes.badge},
+${selector} .${classes.alert} {
+  align-items: center;
+  background: var(--ow-color-surface-raised);
+  border: 1px solid var(--ow-color-border);
+  border-radius: var(--ow-radius-sm);
+  color: var(--ow-color-text-muted);
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 600;
+  gap: var(--ow-space-xs);
+  line-height: 1;
+  padding: var(--ow-space-xs) var(--ow-space-sm);
+}
+
+${selector} .${classes.alert} {
+  align-items: flex-start;
+  border-radius: var(--ow-radius-md);
+  line-height: 1.4;
+  padding: var(--ow-space-md);
+}
+
+${selector} .${classes.badge}[${attributes.tone}="accent"],
+${selector} .${classes.alert}[${attributes.tone}="accent"] {
+  border-color: var(--ow-color-accent-dim);
+  color: var(--ow-color-accent);
+}
+
+${selector} .${classes.badge}[${attributes.tone}="success"],
+${selector} .${classes.alert}[${attributes.tone}="success"] {
+  color: var(--ow-color-success);
+}
+
+${selector} .${classes.badge}[${attributes.tone}="warning"],
+${selector} .${classes.alert}[${attributes.tone}="warning"] {
+  color: var(--ow-color-warning);
+}
+
+${selector} .${classes.badge}[${attributes.tone}="danger"],
+${selector} .${classes.alert}[${attributes.tone}="danger"] {
+  color: var(--ow-color-danger);
+}
+
+${selector} .${classes.badge}[${attributes.tone}="info"],
+${selector} .${classes.alert}[${attributes.tone}="info"] {
+  color: var(--ow-color-info);
+}`;
+}
+function formUiRules(selector) {
+    const classes = OPENWAGGLE_EXTENSION_UI_CLASS_NAMES;
+    return `${selector} .${classes.field} {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ow-space-xs);
+}`;
+}
+function extensionUiRules(selector) {
+    return `${baseUiRules(selector)}
+
+${controlUiRules(selector)}
+
+${badgeUiRules(selector)}
+
+${formUiRules(selector)}`;
+}
+export function createOpenWaggleExtensionUiStylesheet(options = {}) {
+    const theme = options.theme ?? createOpenWaggleExtensionTheme();
+    const selector = options.scopeSelector ?? DEFAULT_UI_SCOPE_SELECTOR;
+    const rules = extensionUiRules(selector);
+    if (options.includeThemeVariables === false) {
+        return rules;
+    }
+    return `${themeVariableRule(theme, selector)}
+
+${rules}`;
+}

package/dist/ui.d.ts

@@ -0,0 +1,6 @@
+export type { OpenWaggleExtensionUiButtonVariant, OpenWaggleExtensionUiTone, } from './ui-constants.js';
+export { OPENWAGGLE_EXTENSION_UI_ATTRIBUTES, OPENWAGGLE_EXTENSION_UI_CLASS_NAMES, } from './ui-constants.js';
+export type OpenWaggleExtensionClassNamePart = string | false | null | undefined;
+export declare function openWaggleExtensionClassName(...parts: readonly OpenWaggleExtensionClassNamePart[]): string;
+export type { CreateOpenWaggleExtensionUiStylesheetOptions } from './ui-stylesheet.js';
+export { createOpenWaggleExtensionUiStylesheet, extensionThemeCssVariableDeclarations, } from './ui-stylesheet.js';

package/dist/ui.js

@@ -0,0 +1,16 @@
+export { OPENWAGGLE_EXTENSION_UI_ATTRIBUTES, OPENWAGGLE_EXTENSION_UI_CLASS_NAMES, } from './ui-constants.js';
+const EMPTY_LENGTH = 0;
+export function openWaggleExtensionClassName(...parts) {
+    const classNames = [];
+    for (const part of parts) {
+        if (typeof part !== 'string') {
+            continue;
+        }
+        const className = part.trim();
+        if (className.length > EMPTY_LENGTH) {
+            classNames.push(className);
+        }
+    }
+    return classNames.join(' ');
+}
+export { createOpenWaggleExtensionUiStylesheet, extensionThemeCssVariableDeclarations, } from './ui-stylesheet.js';