npm - @adia-ai/web-modules - Versions diffs - 0.4.0 → 0.4.2 - Mend

@adia-ai/web-modules 0.4.0 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/CHANGELOG.md +30 -0
package/README.md +29 -15
package/editor/editor-shell/css/editor-shell.bespoke.css +7 -0
package/editor/editor-shell/css/editor-shell.layout.css +15 -4
package/editor/editor-sidebar/editor-sidebar.js +14 -2
package/index.js +2 -0
package/package.json +10 -3
package/shell/admin-shell/css/admin-shell.main.css +35 -0
package/simple/index.js +2 -0
package/simple/simple-content/simple-content.a2ui.json +67 -0
package/simple/simple-content/simple-content.css +29 -0
package/simple/simple-content/simple-content.examples.html +13 -0
package/simple/simple-content/simple-content.html +42 -0
package/simple/simple-content/simple-content.yaml +54 -0
package/simple/simple-hero/simple-hero.a2ui.json +76 -0
package/simple/simple-hero/simple-hero.css +45 -0
package/simple/simple-hero/simple-hero.examples.html +33 -0
package/simple/simple-hero/simple-hero.html +42 -0
package/simple/simple-hero/simple-hero.yaml +57 -0
package/simple/simple-shell/simple-shell.a2ui.json +87 -0
package/simple/simple-shell/simple-shell.css +40 -0
package/simple/simple-shell/simple-shell.examples.html +42 -0
package/simple/simple-shell/simple-shell.html +42 -0
package/simple/simple-shell/simple-shell.js +47 -0
package/simple/simple-shell/simple-shell.test.js +83 -0
package/simple/simple-shell/simple-shell.yaml +78 -0
package/theme/index.js +1 -0
package/theme/theme-panel/theme-panel.a2ui.json +173 -0
package/theme/theme-panel/theme-panel.css +50 -0
package/theme/theme-panel/theme-panel.examples.html +104 -0
package/theme/theme-panel/theme-panel.html +73 -0
package/theme/theme-panel/theme-panel.js +533 -0
package/theme/theme-panel/theme-panel.test.js +274 -0
package/theme/theme-panel/theme-panel.yaml +213 -0

package/theme/theme-panel/theme-panel.js ADDED Viewed

@@ -0,0 +1,533 @@
+/**
+ * <theme-panel persist parametric presets scheme-toggle>
+ *
+ * Module-tier appearance-preferences control surface. Owns the three knobs
+ * of the AdiaUI theming contract: [data-theme] named themes, --a-density /
+ * --a-radius-k parametric overrides, and color-scheme light/dark switching,
+ * plus optional localStorage persistence.
+ *
+ * Replaces the ~30-line inline panel + ~90-line wiring previously duplicated
+ * in site/ and playgrounds/admin-shell/.
+ *
+ * Author-supplied attributes (read once at connect):
+ *   [themes="slug1 slug2 …"]      space-separated theme list; default = 8 named
+ *   [parametric]                  renders density + radius sliders
+ *   [presets]                     renders compact / reset / spacious preset row
+ *   [scheme-toggle]               renders an integrated light/dark segmented-ui
+ *   [persist]                     writes selections to localStorage
+ *   [storage-prefix="adia-theme-"] LS key namespace
+ *   [target=":root"]              CSS selector for theme target (default <html>)
+ *   [scheme="auto"|"light"|"dark"] initial color-scheme
+ *
+ * Reflected state (read-only externally; use .apply() to mutate):
+ *   [active-theme]   currently selected theme slug; empty for default
+ *   [active-scheme]  resolved scheme (auto collapsed to light|dark)
+ *   [active-density] mirrors current --a-density on target
+ *   [active-radius]  mirrors current --a-radius-k on target
+ *
+ * Events:
+ *   theme-change — bubbles. detail: { theme, scheme, density, radius, source }
+ *                  source is one of: 'theme'|'slider'|'preset'|'scheme'|'reset'|'programmatic'
+ *
+ * Public methods:
+ *   .apply({theme?, scheme?, density?, radius?}) — programmatic write
+ *   .reset() — clear all state + emit reset event
+ *
+ * The element is light-DOM and stamps its internals imperatively in
+ * connected(). External CSS / JS reacts via reflected attributes, e.g.
+ *   theme-panel[active-scheme="dark"] button-ui { … }
+ */
+import { UIElement } from '../../../web-components/core/element.js';
+const DEFAULT_THEMES = ['default', 'ocean', 'forest', 'sunset', 'lavender', 'rose', 'slate', 'midnight'];
+const PRESETS = {
+  compact:  { density: 0.85, radius: 0.75 },
+  default:  { density: 1,    radius: 1,    clearTheme: true },
+  spacious: { density: 1.15, radius: 1.25 },
+};
+const titleCase = (s) => s.length ? s[0].toUpperCase() + s.slice(1) : s;
+class ThemePanel extends UIElement {
+  static properties = {
+    themes:        { type: String,  default: DEFAULT_THEMES.join(' '), reflect: true },
+    parametric:    { type: Boolean, default: false, reflect: true },
+    presets:       { type: Boolean, default: false, reflect: true },
+    schemeToggle:  { type: Boolean, default: false, reflect: true, attribute: 'scheme-toggle' },
+    persist:       { type: Boolean, default: false, reflect: true },
+    storagePrefix: { type: String,  default: 'adia-theme-', reflect: true, attribute: 'storage-prefix' },
+    target:        { type: String,  default: ':root', reflect: true },
+    scheme:        { type: String,  default: 'auto',  reflect: true },
+    activeTheme:   { type: String,  default: '', reflect: true, attribute: 'active-theme' },
+    activeScheme:  { type: String,  default: '', reflect: true, attribute: 'active-scheme' },
+    activeDensity: { type: String,  default: '', reflect: true, attribute: 'active-density' },
+    activeRadius:  { type: String,  default: '', reflect: true, attribute: 'active-radius' },
+  };
+  static template = () => null;
+  #mql = null;
+  #mqlHandler = null;
+  #cleanups = [];
+  #densityEl = null;
+  #radiusEl = null;
+  #schemeEl = null;
+  #stamped = false;
+  connected() {
+    if (this.#stamped) return;
+    this.#stamp();
+    this.#stamped = true;
+    this.#initState();
+    this.#wirePrefersColorScheme();
+  }
+  disconnected() {
+    for (const cleanup of this.#cleanups) cleanup();
+    this.#cleanups = [];
+    this.#detachPcm();
+  }
+  // ── Public API ──────────────────────────────────────────────────────
+  /**
+   * Programmatic write. Same code path as user input — emits theme-change
+   * with source: 'programmatic'.
+   */
+  apply(partial = {}) {
+    this.#apply(partial, 'programmatic');
+  }
+  /**
+   * Clear all state on target — remove [data-theme], inline parametric
+   * overrides, color-scheme, and (if [persist]) localStorage keys.
+   * Emits theme-change with source: 'reset'.
+   */
+  reset() {
+    const target = this.#resolveTarget();
+    target.removeAttribute('data-theme');
+    target.style.removeProperty('--a-density');
+    target.style.removeProperty('--a-radius-k');
+    target.style.removeProperty('color-scheme');
+    if (this.persist) {
+      for (const k of ['theme', 'scheme', 'density', 'radius']) {
+        try { localStorage.removeItem(`${this.storagePrefix}${k}`); } catch {}
+      }
+    }
+    this.activeTheme = '';
+    this.activeDensity = '';
+    this.activeRadius = '';
+    // Resolved scheme falls back to prefers-color-scheme
+    const resolved = this.#resolvePrefersScheme();
+    this.activeScheme = resolved;
+    if (this.#schemeEl) this.#schemeEl.value = resolved;
+    if (this.#densityEl) this.#densityEl.value = 1;
+    if (this.#radiusEl) this.#radiusEl.value = 1;
+    this.#emit('reset');
+  }
+  // ── Internal — DOM stamping ─────────────────────────────────────────
+  #stamp() {
+    const frag = document.createDocumentFragment();
+    // Optional scheme toggle (always at top per spec § 7.1)
+    if (this.schemeToggle) {
+      const scheme = document.createElement('div');
+      scheme.setAttribute('part', 'scheme');
+      const seg = document.createElement('segmented-ui');
+      seg.id = `${this.#uid}-scheme`;
+      const segLight = document.createElement('segment-ui');
+      segLight.setAttribute('value', 'light');
+      segLight.setAttribute('text', 'Light');
+      const segDark = document.createElement('segment-ui');
+      segDark.setAttribute('value', 'dark');
+      segDark.setAttribute('text', 'Dark');
+      seg.append(segLight, segDark);
+      scheme.appendChild(seg);
+      frag.appendChild(scheme);
+      this.#schemeEl = seg;
+    }
+    // Theme button row
+    const themeLabel = document.createElement('text-ui');
+    themeLabel.setAttribute('variant', 'label');
+    themeLabel.textContent = 'Theme';
+    frag.appendChild(themeLabel);
+    const themesRow = document.createElement('div');
+    themesRow.setAttribute('part', 'themes');
+    const themeSlugs = (this.themes || '').trim().split(/\s+/).filter(Boolean);
+    for (const slug of themeSlugs) {
+      const btn = document.createElement('button-ui');
+      btn.setAttribute('data-theme-slug', slug);
+      btn.setAttribute('text', titleCase(slug));
+      btn.setAttribute('variant', 'outline');
+      btn.setAttribute('size', 'sm');
+      themesRow.appendChild(btn);
+    }
+    frag.appendChild(themesRow);
+    // Optional parametric block
+    if (this.parametric) {
+      frag.appendChild(document.createElement('divider-ui'));
+      const paramLabel = document.createElement('text-ui');
+      paramLabel.setAttribute('variant', 'label');
+      paramLabel.textContent = 'Parametric';
+      frag.appendChild(paramLabel);
+      const densityField = document.createElement('field-ui');
+      densityField.setAttribute('label', 'Density');
+      const density = document.createElement('slider-ui');
+      density.setAttribute('part', 'density');
+      density.setAttribute('value', '1');
+      density.setAttribute('min', '0.5');
+      density.setAttribute('max', '1.5');
+      density.setAttribute('step', '0.05');
+      density.setAttribute('suffix', '×');
+      densityField.appendChild(density);
+      frag.appendChild(densityField);
+      this.#densityEl = density;
+      const radiusField = document.createElement('field-ui');
+      radiusField.setAttribute('label', 'Radius');
+      const radius = document.createElement('slider-ui');
+      radius.setAttribute('part', 'radius');
+      radius.setAttribute('value', '1');
+      radius.setAttribute('min', '0');
+      radius.setAttribute('max', '2');
+      radius.setAttribute('step', '0.1');
+      radius.setAttribute('suffix', '×');
+      radiusField.appendChild(radius);
+      frag.appendChild(radiusField);
+      this.#radiusEl = radius;
+    }
+    // Optional presets row
+    if (this.presets) {
+      frag.appendChild(document.createElement('divider-ui'));
+      const presetsRow = document.createElement('div');
+      presetsRow.setAttribute('part', 'presets');
+      for (const name of ['compact', 'default', 'spacious']) {
+        const btn = document.createElement('button-ui');
+        btn.setAttribute('data-preset', name);
+        btn.setAttribute('text', name === 'default' ? 'Reset' : titleCase(name));
+        btn.setAttribute('variant', 'outline');
+        btn.setAttribute('size', 'sm');
+        presetsRow.appendChild(btn);
+      }
+      frag.appendChild(presetsRow);
+    }
+    this.appendChild(frag);
+    this.#wireListeners();
+  }
+  #wireListeners() {
+    // Theme buttons — fire 'press' (button-ui), fallback to 'click' for tests
+    for (const btn of this.querySelectorAll('[part="themes"] button-ui')) {
+      const slug = btn.getAttribute('data-theme-slug');
+      const handler = () => this.#onThemeClick(slug);
+      btn.addEventListener('press', handler);
+      btn.addEventListener('click', handler);
+      this.#cleanups.push(() => {
+        btn.removeEventListener('press', handler);
+        btn.removeEventListener('click', handler);
+      });
+    }
+    // Parametric sliders — fire 'input'
+    if (this.#densityEl) {
+      const handler = () => this.#apply({ density: parseFloat(this.#densityEl.value) }, 'slider');
+      this.#densityEl.addEventListener('input', handler);
+      this.#cleanups.push(() => this.#densityEl.removeEventListener('input', handler));
+    }
+    if (this.#radiusEl) {
+      const handler = () => this.#apply({ radius: parseFloat(this.#radiusEl.value) }, 'slider');
+      this.#radiusEl.addEventListener('input', handler);
+      this.#cleanups.push(() => this.#radiusEl.removeEventListener('input', handler));
+    }
+    // Preset buttons
+    for (const btn of this.querySelectorAll('[part="presets"] button-ui')) {
+      const name = btn.getAttribute('data-preset');
+      const handler = () => this.#onPresetClick(name);
+      btn.addEventListener('press', handler);
+      btn.addEventListener('click', handler);
+      this.#cleanups.push(() => {
+        btn.removeEventListener('press', handler);
+        btn.removeEventListener('click', handler);
+      });
+    }
+    // Scheme toggle
+    if (this.#schemeEl) {
+      const handler = (e) => {
+        const v = e.detail?.value ?? this.#schemeEl.value;
+        if (v === 'light' || v === 'dark') this.#apply({ scheme: v }, 'scheme');
+      };
+      this.#schemeEl.addEventListener('change', handler);
+      this.#cleanups.push(() => this.#schemeEl.removeEventListener('change', handler));
+    }
+  }
+  // ── Internal — handlers ─────────────────────────────────────────────
+  #onThemeClick(slug) {
+    const target = this.#resolveTarget();
+    // Theme click clears parametric overrides so the theme's computed
+    // values surface (per spec § 7.3, OD-003 lean A — docs-shell behavior).
+    target.style.removeProperty('--a-density');
+    target.style.removeProperty('--a-radius-k');
+    if (this.persist) {
+      try {
+        localStorage.removeItem(`${this.storagePrefix}density`);
+        localStorage.removeItem(`${this.storagePrefix}radius`);
+      } catch {}
+    }
+    // Apply the theme (which may write [data-theme] on target)
+    this.#apply({ theme: slug }, 'theme');
+    // Then re-read computed values into sliders on next frame, so the
+    // theme's [data-theme] block has taken effect.
+    const sync = () => {
+      const cs = getComputedStyle(target);
+      const density = parseFloat(cs.getPropertyValue('--a-density')) || 1;
+      const radius = parseFloat(cs.getPropertyValue('--a-radius-k')) || 1;
+      if (this.#densityEl) this.#densityEl.value = density;
+      if (this.#radiusEl) this.#radiusEl.value = radius;
+      this.activeDensity = String(density);
+      this.activeRadius = String(radius);
+    };
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(sync);
+    } else {
+      sync();
+    }
+  }
+  #onPresetClick(name) {
+    const preset = PRESETS[name];
+    if (!preset) return;
+    if (preset.clearTheme) {
+      // "Reset" preset — clears [data-theme] too
+      const target = this.#resolveTarget();
+      target.removeAttribute('data-theme');
+      this.activeTheme = '';
+      if (this.persist) {
+        try { localStorage.removeItem(`${this.storagePrefix}theme`); } catch {}
+      }
+    }
+    this.#apply({ density: preset.density, radius: preset.radius }, 'preset');
+    if (this.#densityEl) this.#densityEl.value = preset.density;
+    if (this.#radiusEl) this.#radiusEl.value = preset.radius;
+  }
+  // ── Internal — mutation (single path) ──────────────────────────────
+  #apply(partial, source) {
+    const target = this.#resolveTarget();
+    if (partial.theme !== undefined) {
+      if (partial.theme === '' || partial.theme === 'default') {
+        target.removeAttribute('data-theme');
+        this.activeTheme = '';
+      } else {
+        target.setAttribute('data-theme', partial.theme);
+        this.activeTheme = partial.theme;
+      }
+      if (this.persist) {
+        try {
+          if (this.activeTheme) localStorage.setItem(`${this.storagePrefix}theme`, this.activeTheme);
+          else localStorage.removeItem(`${this.storagePrefix}theme`);
+        } catch {}
+      }
+    }
+    if (partial.density !== undefined) {
+      target.style.setProperty('--a-density', partial.density);
+      this.activeDensity = String(partial.density);
+      if (this.persist) {
+        try { localStorage.setItem(`${this.storagePrefix}density`, String(partial.density)); } catch {}
+      }
+    }
+    if (partial.radius !== undefined) {
+      target.style.setProperty('--a-radius-k', partial.radius);
+      this.activeRadius = String(partial.radius);
+      if (this.persist) {
+        try { localStorage.setItem(`${this.storagePrefix}radius`, String(partial.radius)); } catch {}
+      }
+    }
+    if (partial.scheme !== undefined) {
+      const s = partial.scheme;
+      if (s === 'auto') {
+        target.style.removeProperty('color-scheme');
+        this.activeScheme = this.#resolvePrefersScheme();
+        if (this.persist) {
+          try { localStorage.removeItem(`${this.storagePrefix}scheme`); } catch {}
+        }
+        this.#attachPcm();
+      } else if (s === 'light' || s === 'dark') {
+        target.style.setProperty('color-scheme', s);
+        this.activeScheme = s;
+        if (this.persist) {
+          try { localStorage.setItem(`${this.storagePrefix}scheme`, s); } catch {}
+        }
+        // User chose explicitly — PCM listener becomes a no-op
+        this.#detachPcm();
+      }
+      if (this.#schemeEl) this.#schemeEl.value = this.activeScheme;
+    }
+    this.#emit(source);
+  }
+  #emit(source) {
+    this.dispatchEvent(new CustomEvent('theme-change', {
+      bubbles: true,
+      detail: {
+        theme: this.activeTheme,
+        scheme: this.activeScheme,
+        density: this.activeDensity ? parseFloat(this.activeDensity) : 1,
+        radius: this.activeRadius ? parseFloat(this.activeRadius) : 1,
+        source,
+      },
+    }));
+  }
+  // ── Internal — initial state + persistence ─────────────────────────
+  #initState() {
+    const target = this.#resolveTarget();
+    let theme, scheme, density, radius;
+    if (this.persist) {
+      try {
+        theme = localStorage.getItem(`${this.storagePrefix}theme`) || '';
+        scheme = localStorage.getItem(`${this.storagePrefix}scheme`) || '';
+        const d = localStorage.getItem(`${this.storagePrefix}density`);
+        const r = localStorage.getItem(`${this.storagePrefix}radius`);
+        density = d != null ? parseFloat(d) : undefined;
+        radius = r != null ? parseFloat(r) : undefined;
+      } catch {}
+    }
+    // Apply theme
+    if (theme) {
+      target.setAttribute('data-theme', theme);
+      this.activeTheme = theme;
+    } else {
+      this.activeTheme = target.getAttribute('data-theme') || '';
+    }
+    // Apply scheme
+    if (scheme === 'light' || scheme === 'dark') {
+      target.style.setProperty('color-scheme', scheme);
+      this.activeScheme = scheme;
+      if (this.#schemeEl) this.#schemeEl.value = scheme;
+    } else {
+      // No persisted scheme: use [scheme] attribute (default 'auto')
+      const attr = this.scheme || 'auto';
+      if (attr === 'light' || attr === 'dark') {
+        target.style.setProperty('color-scheme', attr);
+        this.activeScheme = attr;
+      } else {
+        this.activeScheme = this.#resolvePrefersScheme();
+      }
+      if (this.#schemeEl) this.#schemeEl.value = this.activeScheme;
+    }
+    // Apply parametric values
+    if (density != null && !Number.isNaN(density)) {
+      target.style.setProperty('--a-density', density);
+      this.activeDensity = String(density);
+      if (this.#densityEl) this.#densityEl.value = density;
+    } else if (this.#densityEl) {
+      // Read computed from target
+      const cs = getComputedStyle(target);
+      const d = parseFloat(cs.getPropertyValue('--a-density')) || 1;
+      this.#densityEl.value = d;
+      this.activeDensity = String(d);
+    }
+    if (radius != null && !Number.isNaN(radius)) {
+      target.style.setProperty('--a-radius-k', radius);
+      this.activeRadius = String(radius);
+      if (this.#radiusEl) this.#radiusEl.value = radius;
+    } else if (this.#radiusEl) {
+      const cs = getComputedStyle(target);
+      const r = parseFloat(cs.getPropertyValue('--a-radius-k')) || 1;
+      this.#radiusEl.value = r;
+      this.activeRadius = String(r);
+    }
+  }
+  // ── Internal — prefers-color-scheme ─────────────────────────────────
+  #resolvePrefersScheme() {
+    try {
+      if (typeof matchMedia === 'function' &&
+          matchMedia('(prefers-color-scheme: dark)').matches) return 'dark';
+    } catch {}
+    return 'light';
+  }
+  #wirePrefersColorScheme() {
+    // Attach PCM listener only when scheme=auto AND no user override persisted
+    if (this.scheme !== 'auto') return;
+    if (this.persist) {
+      try {
+        const persisted = localStorage.getItem(`${this.storagePrefix}scheme`);
+        if (persisted === 'light' || persisted === 'dark') return;
+      } catch {}
+    }
+    this.#attachPcm();
+  }
+  #attachPcm() {
+    if (this.#mql || typeof matchMedia !== 'function') return;
+    try {
+      this.#mql = matchMedia('(prefers-color-scheme: dark)');
+      this.#mqlHandler = () => {
+        const resolved = this.#mql.matches ? 'dark' : 'light';
+        this.activeScheme = resolved;
+        if (this.#schemeEl) this.#schemeEl.value = resolved;
+        this.#emit('scheme');
+      };
+      this.#mql.addEventListener('change', this.#mqlHandler);
+    } catch {}
+  }
+  #detachPcm() {
+    if (this.#mql && this.#mqlHandler) {
+      try { this.#mql.removeEventListener('change', this.#mqlHandler); } catch {}
+    }
+    this.#mql = null;
+    this.#mqlHandler = null;
+  }
+  // ── Internal — target resolution ────────────────────────────────────
+  #resolveTarget() {
+    const sel = this.target || ':root';
+    if (sel === ':root') return document.documentElement;
+    try {
+      return document.querySelector(sel) ?? document.documentElement;
+    } catch {
+      return document.documentElement;
+    }
+  }
+  // ── Internal — uid for nested element ids ───────────────────────────
+  get #uid() {
+    return this.id || 'theme-panel';
+  }
+}
+customElements.define('theme-panel', ThemePanel);
+export { ThemePanel };