@adea-ai/ui 0.28.0 → 0.30.0

package/src/components/theme-provider.tsx

@@ -9,108 +9,192 @@ import {
   type ParentProps,
 } from 'solid-js'
 
-export type Theme = 'light' | 'dark' | 'system'
-export type ResolvedTheme = 'light' | 'dark'
+import {
+  appearanceThemeScript,
+  applyAppearanceToDocument,
+  DARK_QUERY,
+  defaultAppearancePreferences,
+  type AppearanceMode,
+  type AppearancePreferencesV2,
+  type ResolvedAppearance,
+  readAppearancePreferences,
+  REDUCED_TRANSPARENCY_QUERY,
+  resolveAppearanceState,
+  writeAppearancePreferences,
+} from './appearance'
+
+export type Theme = AppearanceMode
+export type ResolvedTheme = ResolvedAppearance
+
+export type { AppearanceMode, AppearancePreferencesV2, ResolvedAppearance } from './appearance'
 
 type ThemeContextValue = {
+  /** The persisted v2 appearance preferences. */
+  preferences: Accessor<AppearancePreferencesV2>
+  /** Mode after combining the user choice with the OS report. */
+  resolvedMode: Accessor<ResolvedAppearance>
+  /** The active theme variant id (`documentElement.dataset.theme`). */
+  variantId: Accessor<string>
+  /** Surface after reduced-transparency and capability resolution. */
+  effectiveSurface: Accessor<'opaque' | 'frosted' | 'translucent'>
+  /** True while the OS or the user forces opaque surfaces. */
+  reduceTransparencyActive: Accessor<boolean>
+  /** Persist a field update immediately (Zeron's `SavePolicy::Immediate`). */
+  update: (patch: Partial<AppearancePreferencesV2>) => void
+  /** Apply a draft against the visible app without persisting it. */
+  preview: (preferences: AppearancePreferencesV2 | undefined) => void
+
+  /** Legacy single-mode seam (settings toggle and existing consumers). */
   theme: Accessor<Theme>
   resolvedTheme: Accessor<ResolvedTheme>
   setTheme: (theme: Theme) => void
 }
 
-const STORAGE_KEY = 'theme'
-const DARK_QUERY = '(prefers-color-scheme: dark)'
-
 const ThemeContext = createContext<ThemeContextValue>()
 
-function readStoredTheme(): Theme {
-  if (typeof window === 'undefined') return 'system'
-  try {
-    const stored = window.localStorage.getItem(STORAGE_KEY)
-    return stored === 'light' || stored === 'dark' || stored === 'system' ? stored : 'system'
-  } catch {
-    return 'system'
-  }
-}
-
 function systemPrefersDark(): boolean {
   return typeof window !== 'undefined' && window.matchMedia(DARK_QUERY).matches
 }
 
-/**
- * Applies the resolved theme to the document and suppresses transitions for the
- * frame that carries the change, so a theme switch cannot animate page-wide.
- */
-function applyTheme(theme: ResolvedTheme, disableTransitionOnChange: boolean): void {
-  if (typeof document === 'undefined') return
-
-  const root = document.documentElement
-  let restoreTransitions: (() => void) | undefined
-
-  if (disableTransitionOnChange) {
-    const style = document.createElement('style')
-    style.appendChild(document.createTextNode('*{transition:none !important}'))
-    document.head.appendChild(style)
-    void style.offsetHeight
-    restoreTransitions = () => style.remove()
-  }
-
-  root.classList.toggle('dark', theme === 'dark')
-  root.style.colorScheme = theme
-
-  if (restoreTransitions) {
-    requestAnimationFrame(() => requestAnimationFrame(() => restoreTransitions?.()))
-  }
+function systemReducesTransparency(): boolean {
+  return typeof window !== 'undefined' && window.matchMedia(REDUCED_TRANSPARENCY_QUERY).matches
 }
 
 type ThemeProviderProps = ParentProps<{
   defaultTheme?: Theme
   disableTransitionOnChange?: boolean
+  /**
+   * Whether the host window can render OS translucency. The web lane keeps
+   * the default `false` and renders tokenized frosted surfaces instead of
+   * pretending to OS vibrancy.
+   */
+  nativeTranslucency?: boolean
 }>
 
 /**
- * The shared Solid theme provider. It owns the same contract the previous
- * provider exposed to the token layer: a `dark` class on the document element
- * plus a `color-scheme` style, persisted in `localStorage` and defaulting to
- * the system preference.
+ * The shared Solid appearance provider. It owns the versioned appearance
+ * preference (mode, independent light/dark themes, accent, surface) on top of
+ * the contract the previous provider exposed to the token layer: a `dark`
+ * class on the document element plus a `color-scheme` style, persisted in
+ * `localStorage` and defaulting to the system preference. The legacy single
+ * `theme` key migrates on read and is never deleted.
  */
 export function ThemeProvider(props: ThemeProviderProps) {
-  const [theme, setThemeSignal] = createSignal<Theme>(props.defaultTheme ?? readStoredTheme())
+  const storage = typeof window === 'undefined' ? undefined : window.localStorage
+  const stored = readAppearancePreferences(storage)
+  // A legacy or default record keeps the historical `defaultTheme` escape
+  // hatch meaningful for embedders.
+  const initial =
+    stored === defaultAppearancePreferences && props.defaultTheme
+      ? { ...stored, mode: props.defaultTheme }
+      : stored
+  const [preferences, setPreferences] = createSignal<AppearancePreferencesV2>(initial)
   const [prefersDark, setPrefersDark] = createSignal(systemPrefersDark())
+  const [osReducedTransparency, setOsReducedTransparency] = createSignal(
+    systemReducesTransparency()
+  )
+  const nativeTranslucency = () => props.nativeTranslucency ?? false
 
-  const resolvedTheme = (): ResolvedTheme => {
-    const current = theme()
-    if (current === 'system') return prefersDark() ? 'dark' : 'light'
-    return current
+  if (typeof window !== 'undefined') {
+    const darkMedia = window.matchMedia(DARK_QUERY)
+    const onDarkChange = (event: MediaQueryListEvent) => setPrefersDark(event.matches)
+    darkMedia.addEventListener('change', onDarkChange)
+    onCleanup(() => darkMedia.removeEventListener('change', onDarkChange))
+
+    const transparencyMedia = window.matchMedia(REDUCED_TRANSPARENCY_QUERY)
+    const onTransparencyChange = (event: MediaQueryListEvent) =>
+      setOsReducedTransparency(event.matches)
+    transparencyMedia.addEventListener('change', onTransparencyChange)
+    onCleanup(() => transparencyMedia.removeEventListener('change', onTransparencyChange))
   }
 
-  if (typeof window !== 'undefined') {
-    const media = window.matchMedia(DARK_QUERY)
-    const onChange = (event: MediaQueryListEvent) => setPrefersDark(event.matches)
-    media.addEventListener('change', onChange)
-    onCleanup(() => media.removeEventListener('change', onChange))
+  const resolvedState = () =>
+    resolveAppearanceState(preferences(), {
+      systemAppearance: prefersDark() ? 'dark' : 'light',
+      osReducedTransparency: osReducedTransparency(),
+      nativeTranslucency: nativeTranslucency(),
+    })
+
+  const persist = (next: AppearancePreferencesV2) => {
+    setPreferences(next)
+    writeAppearancePreferences(storage, next)
   }
 
   createEffect(() => {
-    applyTheme(resolvedTheme(), props.disableTransitionOnChange ?? true)
+    applyResolved(resolvedState(), props.disableTransitionOnChange ?? true)
   })
 
-  const setTheme = (next: Theme) => {
-    setThemeSignal(next)
-    try {
-      window.localStorage.setItem(STORAGE_KEY, next)
-    } catch {
-      // A blocked storage API must not break the in-memory theme.
+  const update = (patch: Partial<AppearancePreferencesV2>) => {
+    persist({ ...preferences(), ...patch })
+  }
+
+  const preview = (draft: AppearancePreferencesV2 | undefined) => {
+    if (!draft) {
+      applyResolved(resolvedState(), props.disableTransitionOnChange ?? true)
+      return
     }
+    applyResolved(
+      resolveAppearanceState(draft, {
+        systemAppearance: prefersDark() ? 'dark' : 'light',
+        osReducedTransparency: osReducedTransparency(),
+        nativeTranslucency: nativeTranslucency(),
+      }),
+      props.disableTransitionOnChange ?? true
+    )
   }
 
+  // Legacy seam: the single `theme` value is the v2 mode.
+  const theme = (): Theme => preferences().mode
+  const resolvedTheme = (): ResolvedTheme => resolvedState().resolvedMode
+  const setTheme = (next: Theme) => update({ mode: next })
+
   return (
-    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
+    <ThemeContext.Provider
+      value={{
+        preferences,
+        resolvedMode: resolvedTheme,
+        variantId: () => resolvedState().variant.id,
+        effectiveSurface: () => resolvedState().effectiveSurface,
+        reduceTransparencyActive: () => resolvedState().reduceTransparencyActive,
+        update,
+        preview,
+        theme,
+        resolvedTheme,
+        setTheme,
+      }}
+    >
       {props.children}
     </ThemeContext.Provider>
   )
 }
 
+/**
+ * Applies the resolved theme to the document and suppresses transitions for the
+ * frame that carries the change, so a theme switch cannot animate page-wide.
+ */
+function applyResolved(
+  state: ReturnType<typeof resolveAppearanceState>,
+  disableTransitionOnChange: boolean
+): void {
+  if (typeof document === 'undefined') return
+
+  let restoreTransitions: (() => void) | undefined
+
+  if (disableTransitionOnChange) {
+    const style = document.createElement('style')
+    style.appendChild(document.createTextNode('*{transition:none !important}'))
+    document.head.appendChild(style)
+    void style.offsetHeight
+    restoreTransitions = () => style.remove()
+  }
+
+  applyAppearanceToDocument(document, state)
+
+  if (restoreTransitions) {
+    requestAnimationFrame(() => requestAnimationFrame(() => restoreTransitions?.()))
+  }
+}
+
 export function useTheme(): ThemeContextValue {
   const context = useContext(ThemeContext)
   if (!context) {
@@ -120,11 +204,11 @@ export function useTheme(): ThemeContextValue {
 }
 
 /**
- * Pre-paint theme restore for server-rendered documents. Rendered in the
- * document head, it applies the stored or system theme before first paint so
- * hydration never shows the wrong palette.
+ * Pre-paint appearance restore for server-rendered documents. Rendered in the
+ * document head, it resolves the stored (or legacy) preference against the OS
+ * and applies the palette before first paint so hydration never shows the
+ * wrong theme.
  */
 export function ThemeScript(): JSX.Element {
-  const script = `(function(){try{var t=localStorage.getItem('${STORAGE_KEY}')||'system';var d=t==='dark'||(t==='system'&&window.matchMedia('${DARK_QUERY}').matches);var r=document.documentElement;r.classList.toggle('dark',d);r.style.colorScheme=d?'dark':'light'}catch(e){}})();`
-  return <script innerHTML={script} />
+  return <script innerHTML={appearanceThemeScript()} />
 }

package/src/components/theme-swatch.tsx

@@ -0,0 +1,49 @@
+import { For } from 'solid-js'
+
+import type { ThemeVariant } from './appearance'
+
+/*
+ * Preview swatches for the appearance pickers: small role-colored dots so a
+ * palette can be previewed without applying it. Colors arrive as runtime
+ * token data from the theme manifest, so painting them must inline them —
+ * this component is the one sanctioned bridge between token data and the DOM
+ * (token data may never become a component color literal).
+ */
+
+/** The three-dot preview for a theme variant (background, primary, card). */
+export function ThemeSwatch(props: { class?: string; variant: ThemeVariant }) {
+  const swatches = () => [
+    { role: 'Background', color: props.variant.colors.background },
+    { role: 'Primary', color: props.variant.colors.primary },
+    { role: 'Card', color: props.variant.colors.card },
+  ]
+  return (
+    // Decorative next to the variant name; the dots duplicate information the
+    // adjacent text already gives assistive technology.
+    <span class={props.class} aria-hidden="true">
+      <For each={swatches()}>
+        {(swatch) => (
+          <span
+            class="theme-swatch__dot"
+            title={swatch.role}
+            // oxlint-disable-next-line no-inline-styles -- dynamic token data, see file docstring
+            style={{ 'background-color': swatch.color }}
+          />
+        )}
+      </For>
+    </span>
+  )
+}
+
+/** Single-color swatch (accent presets and custom accents). */
+export function ColorSwatch(props: { class?: string; color: string; label: string }) {
+  return (
+    <span class={props.class} role="img" aria-label={props.label}>
+      <span
+        class="theme-swatch__dot"
+        // oxlint-disable-next-line no-inline-styles -- dynamic token data, see file docstring
+        style={{ 'background-color': props.color }}
+      />
+    </span>
+  )
+}

package/src/index.tsx

@@ -4,6 +4,7 @@ export { Toggle } from './components/ui/toggle'
 export { ToggleGroup, ToggleGroupItem } from './components/ui/toggle-group'
 export { RadioGroup, RadioGroupItem } from './components/ui/radio-group'
 export { ThemeToggle } from './components/theme-toggle'
+export { ColorSwatch, ThemeSwatch } from './components/theme-swatch'
 export {
   ThemeProvider,
   ThemeScript,

package/src/styles/conventional-workspace.css

@@ -2063,11 +2063,17 @@
   padding: 0;
 }
 .plugins-browser {
-  display: grid;
-  grid-template: auto auto minmax(0, 1fr) / minmax(0, 1fr);
+  display: flex;
+  flex-direction: column;
   gap: 0;
   min-height: 0;
 }
+.plugins-browser__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
 .plugins-browser__tabs {
   align-self: end;
   margin: 0.5rem 1.25rem 0;
@@ -2113,9 +2119,64 @@
 }
 .plugins-browser__list {
   min-height: 0;
+  flex: 1;
   overflow: auto;
   padding: 0.8rem 1.25rem 1.25rem;
 }
+.plugins-navigation {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.9rem;
+  min-height: 0;
+  overflow: auto;
+  padding: 0.9rem 1.25rem 1.25rem;
+}
+.plugins-navigation__hint {
+  margin: 0;
+  color: var(--cw-muted);
+  font-size: 0.8rem;
+}
+.plugins-navigation__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.plugins-navigation__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.55rem 0.7rem;
+  border: 1px solid var(--cw-border);
+  border-radius: 0.6rem;
+}
+.plugins-navigation__label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--cw-text);
+  font-size: 0.85rem;
+}
+.plugins-navigation__name {
+  color: var(--cw-text);
+}
+.plugins-navigation__controls {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+.plugins-navigation__visibility {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-left: 0.5rem;
+  color: var(--cw-muted);
+  font-size: 0.78rem;
+}
 .plugins-browser[data-filter-open='true'] .plugins-browser__list {
   pointer-events: none;
 }

package/src/styles/theme.css

@@ -72,6 +72,62 @@
   --z-dialog: 120;
   --z-menu: 140;
   --z-tooltip: 160;
+  /* Surface glass. The appearance provider resolves the effective surface
+     (opaque/frosted/translucent) and reduced-transparency policy; these
+     declarations are the opaque defaults plus the frost amounts the resolved
+     values modulate. */
+  --surface-alpha: 1;
+  --surface-frost: 0.92;
+  --surface-translucent: 0.8;
+  /* Terminal roles for the default light variant (xterm ANSI, cursor,
+     selection). Non-default variants apply their manifest values inline; the
+     terminal consumes the custom properties so a theme switch updates a live
+     session without remounting. */
+  --terminal-background: #ffffff;
+  --terminal-foreground: #1b1f24;
+  --terminal-cursor: #24292f;
+  --terminal-selection: #b6c7ff;
+  --terminal-ansi-black: #1b1f24;
+  --terminal-ansi-red: #b91c1c;
+  --terminal-ansi-green: #116a2e;
+  --terminal-ansi-yellow: #8a5a1b;
+  --terminal-ansi-blue: #0b57d0;
+  --terminal-ansi-magenta: #a0186f;
+  --terminal-ansi-cyan: #0e7490;
+  --terminal-ansi-white: #57606a;
+  --terminal-ansi-bright-black: #57606a;
+  --terminal-ansi-bright-red: #c94d4d;
+  --terminal-ansi-bright-green: #1f9d4f;
+  --terminal-ansi-bright-yellow: #a9752c;
+  --terminal-ansi-bright-blue: #3b82f6;
+  --terminal-ansi-bright-magenta: #c04a92;
+  --terminal-ansi-bright-cyan: #0891b2;
+  --terminal-ansi-bright-white: #24292f;
+  /* Editor roles (CodeMirror syntax/diff/search) for the default light
+     variant. */
+  --editor-keyword: #0b57d0;
+  --editor-string: #116a2e;
+  --editor-number: #8a5a1b;
+  --editor-comment: #57606a;
+  --editor-function: #a0186f;
+  --editor-variable: #1b1f24;
+  --editor-type: #0e7490;
+  --editor-tag: #b91c1c;
+  --editor-attribute: #8a5a1b;
+  --editor-operator: #1b1f24;
+  --editor-heading: #1b1f24;
+  --editor-link: #0b57d0;
+  --editor-diff-add: #116a2e;
+  --editor-diff-delete: #b91c1c;
+  --editor-diff-hunk: #57606a;
+  --editor-search-match: #8a5a1b;
+  /* Chart series roles. */
+  --chart-1: #0b57d0;
+  --chart-2: #116a2e;
+  --chart-3: #8a5a1b;
+  --chart-4: #a0186f;
+  --chart-5: #0e7490;
+  --chart-6: #57606a;
 }
 
 .dark {
@@ -94,6 +150,72 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
+  /* Terminal/editor/chart roles for the default dark variant. */
+  --terminal-background: #0d1117;
+  --terminal-foreground: #e6edf3;
+  --terminal-cursor: #e6edf3;
+  --terminal-selection: #264f78;
+  --terminal-ansi-black: #2f3742;
+  --terminal-ansi-red: #ff8183;
+  --terminal-ansi-green: #56d364;
+  --terminal-ansi-yellow: #e3b341;
+  --terminal-ansi-blue: #6ca4f8;
+  --terminal-ansi-magenta: #db61a2;
+  --terminal-ansi-cyan: #39c5cf;
+  --terminal-ansi-white: #d5dde5;
+  --terminal-ansi-bright-black: #57606a;
+  --terminal-ansi-bright-red: #ff9494;
+  --terminal-ansi-bright-green: #79dd8a;
+  --terminal-ansi-bright-yellow: #f0c264;
+  --terminal-ansi-bright-blue: #8db9ff;
+  --terminal-ansi-bright-magenta: #e87cb4;
+  --terminal-ansi-bright-cyan: #66d3dc;
+  --terminal-ansi-bright-white: #eef2f6;
+  --editor-keyword: #6ca4f8;
+  --editor-string: #56d364;
+  --editor-number: #e3b341;
+  --editor-comment: #8b949e;
+  --editor-function: #db61a2;
+  --editor-variable: #e6edf3;
+  --editor-type: #39c5cf;
+  --editor-tag: #ff8183;
+  --editor-attribute: #e3b341;
+  --editor-operator: #e6edf3;
+  --editor-heading: #e6edf3;
+  --editor-link: #6ca4f8;
+  --editor-diff-add: #56d364;
+  --editor-diff-delete: #ff8183;
+  --editor-diff-hunk: #8b949e;
+  --editor-search-match: #e3b341;
+  --chart-1: #6ca4f8;
+  --chart-2: #56d364;
+  --chart-3: #e3b341;
+  --chart-4: #db61a2;
+  --chart-5: #39c5cf;
+  --chart-6: #8b949e;
+}
+
+/* Surface glass amounts. The provider resolves the effective surface and the
+   reduced-transparency policy; this media query is the OS-level backstop so a
+   frost amount can never outlive a system Reduce Transparency setting. */
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --surface-alpha: 1;
+  }
+}
+
+/* Appearance picker swatches (see components/theme-swatch.tsx). The dot
+   color itself is runtime token data applied by the component. */
+.theme-swatch {
+  display: inline-flex;
+  gap: 0.25rem;
+}
+.theme-swatch__dot {
+  display: inline-block;
+  width: 0.875rem;
+  height: 0.875rem;
+  border-radius: calc(infinity * 1px);
+  border: 1px solid var(--border);
 }
 
 @layer base {