@mohou/panel 1.0.20

package/src/theme/menu.tsx

@@ -0,0 +1,286 @@
+import { useEffect, useState, type ReactNode } from 'react'
+
+import { galleryHue } from '../chrome/hue.ts'
+import { panelText, type PanelLabelMode, type PanelLocale } from '../labels.ts'
+import type { PanelPolicy, PanelSettingsClient } from '../settings/client.ts'
+import type { PaletteChip, ThemeClient, ThemePin } from './client.ts'
+
+/**
+ * Theme menu in the toolbar. Global scope writes host appearance.
+ * App scope writes that app's pin. The pressed row is the current choice.
+ * Appearance (light/dark/system) is always host-global; only palette can be per-app.
+ * @param props - theme client, settings client, the open app, and chrome locale
+ */
+export function ThemeMenu(props: {
+  readonly theme?: ThemeClient
+  readonly settings?: PanelSettingsClient
+  readonly locale: PanelLocale
+  readonly mode: PanelLabelMode
+  readonly appId?: string
+  readonly appTitle?: string
+  readonly hostPolicy?: PanelPolicy
+  readonly onHostPolicy?: (policy: PanelPolicy) => void
+}): ReactNode {
+  const [palettes, setPalettes] = useState<readonly PaletteChip[]>([])
+  const [failed, setFailed] = useState('')
+  const [scope, setScope] = useState<'global' | 'app'>('global')
+  const [appearance, setAppearance] = useState<'system' | 'light' | 'dark'>('system')
+  const [paletteId, setPaletteId] = useState('')
+  const [pin, setPin] = useState<ThemePin>({ kind: 'default' })
+  const [appFile, setAppFile] = useState(false)
+  const [appTheme, setAppTheme] = useState<{ name?: string; nameZh?: string; swatch?: string; style?: string } | null>(null)
+  const label = (key: string) => panelText(props.locale, key, props.mode)
+  const appScope = props.appId !== undefined && scope === 'app'
+  useEffect(() => {
+    if (props.theme === undefined) return
+    void props.theme.listPalettes().then(
+      listed => setPalettes(listed.palettes),
+      (error: unknown) => setFailed(error instanceof Error && error.message.length > 0 ? error.message : label('theme-save-failed')),
+    )
+  }, [props.theme])
+  useEffect(() => {
+    if (props.settings === undefined) return
+    void props.settings.readPolicy().then((policy) => {
+      if (policy.theme === 'light' || policy.theme === 'dark' || policy.theme === 'system') setAppearance(policy.theme)
+      setPaletteId(policy.palette)
+    }).catch(() => undefined)
+  }, [props.settings])
+  useEffect(() => {
+    if (props.hostPolicy === undefined) return
+    if (props.hostPolicy.theme === 'light' || props.hostPolicy.theme === 'dark' || props.hostPolicy.theme === 'system') {
+      setAppearance(props.hostPolicy.theme)
+    }
+    setPaletteId(props.hostPolicy.palette)
+  }, [props.hostPolicy])
+  useEffect(() => {
+    if (props.theme === undefined || props.appId === undefined) return
+    const appId = props.appId
+    if (props.theme.readPin !== undefined) {
+      void props.theme.readPin(appId).then(setPin).catch(() => setPin({ kind: 'default' }))
+    }
+    if (props.theme.appFile !== undefined) {
+      void props.theme.appFile(appId).then(setAppFile).catch(() => setAppFile(false))
+    }
+    if (props.theme.readAppTheme !== undefined) {
+      void props.theme.readAppTheme(appId).then(setAppTheme).catch(() => setAppTheme(null))
+    }
+  }, [props.theme, props.appId])
+  return (
+    <>
+      {props.appId === undefined ? null : (
+        <>
+          <p className="mb-2 text-[10px] tracking-widest text-muted-foreground uppercase">{label('theme')}</p>
+          <div className="mb-3 flex gap-1 rounded-lg bg-muted p-1">
+            <Seg label={label('scope-global')} on={scope === 'global'} onClick={() => setScope('global')} />
+            <Seg label={props.appTitle ?? label('scope-app')} on={scope === 'app'} onClick={() => setScope('app')} />
+          </div>
+        </>
+      )}
+      {appScope ? null : (
+        <>
+          <p className="mb-2 text-[10px] tracking-widest text-muted-foreground uppercase">{label('appearance')}</p>
+          <div className="mb-3 flex gap-1 rounded-lg bg-muted p-1">
+            {(['system', 'light', 'dark'] as const).map(theme => (
+              <Seg
+                key={theme}
+                label={label(themeKey(theme))}
+                on={appearance === theme}
+                onClick={() => { void writeTheme(props.settings, theme, setAppearance, setFailed, label, props.onHostPolicy) }}
+              />
+            ))}
+          </div>
+        </>
+      )}
+      <p className="mb-2 text-[10px] tracking-widest text-muted-foreground uppercase">{label('palette')}</p>
+      {appScope ? <p className="mb-2 text-[11px] leading-4 text-muted-foreground">{label('theme-app-hint')}</p> : null}
+      <div className="flex max-h-64 flex-col gap-1 overflow-auto">
+        {appScope ? (
+          <Swatch
+            label={label('follow-global')}
+            swatch="linear-gradient(135deg,#888,#ddd)"
+            on={pin.kind === 'follow-host' || pin.kind === 'default'}
+            onClick={() => { void writePin(props.theme, props.appId, { kind: 'follow-host' }, setPin, setFailed, label, palettes.find(item => item.id === paletteId)?.style) }}
+          />
+        ) : null}
+        {palettes.map(palette => (
+          <Swatch
+            key={palette.id}
+            label={paletteLabel(props.locale, palette)}
+            swatch={palette.swatch ?? `hsl(${galleryHue(palette.id)} 55% 48%)`}
+            badge={label(palette.origin === 'custom' ? 'chip-custom' : 'chip-system')}
+            on={paletteOn(appScope, pin, paletteId, palette.id)}
+            onClick={() => { void choosePalette(props, appScope, palette, setPaletteId, setPin, setFailed, label) }}
+          />
+        ))}
+        {appScope && (appFile || appTheme !== null) ? (
+          <Swatch
+            label={appTheme?.name !== undefined && appTheme.name.length > 0 ? paletteLabel(props.locale, { id: 'app', name: appTheme.name, ...appTheme.nameZh === undefined ? {} : { nameZh: appTheme.nameZh } }) : label('app-file')}
+            swatch={appTheme?.swatch ?? 'linear-gradient(135deg,var(--primary),var(--muted))'}
+            badge={label('chip-app')}
+            on={pin.kind === 'app-file'}
+            onClick={() => { void writePin(props.theme, props.appId, { kind: 'app-file' }, setPin, setFailed, label, appTheme?.style) }}
+          />
+        ) : null}
+      </div>
+      {failed.length > 0 ? <p className="mt-2 text-xs text-destructive">{failed}</p> : null}
+    </>
+  )
+}
+
+function Seg(props: { readonly label: string; readonly on: boolean; readonly onClick: () => void }): ReactNode {
+  return (
+    <button type="button" className="h-7 flex-1 truncate rounded-md px-2 text-xs transition-colors duration-150 hover:bg-card data-[on=1]:bg-card data-[on=1]:font-semibold data-[on=1]:shadow-sm" data-on={props.on ? '1' : '0'} aria-pressed={props.on} onClick={props.onClick}>
+      {props.label}
+    </button>
+  )
+}
+
+function Swatch(props: {
+  readonly label: string
+  readonly swatch: string
+  readonly badge?: string
+  readonly on: boolean
+  readonly onClick: () => void
+}): ReactNode {
+  return (
+    <button type="button" className="flex w-full items-center gap-2.5 rounded-xl px-2.5 py-2.5 text-left text-sm transition-colors duration-150 hover:bg-muted data-[on=1]:bg-muted data-[on=1]:font-semibold" data-on={props.on ? '1' : '0'} aria-pressed={props.on} onClick={props.onClick}>
+      <i className="size-3.5 shrink-0 rounded-full border" style={{ background: props.swatch }} />
+      <span className="min-w-0 flex-1 truncate">{props.label}</span>
+      {props.badge === undefined ? null : <span className="shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{props.badge}</span>}
+    </button>
+  )
+}
+
+function paletteOn(appScope: boolean, pin: ThemePin, paletteId: string, id: string): boolean {
+  if (appScope) return pin.kind === 'palette' && pin.id === id
+  return paletteId === id
+}
+
+function paletteLabel(locale: PanelLocale, palette: PaletteChip): string {
+  if (locale === 'zh-CN' && palette.nameZh !== undefined && palette.nameZh.length > 0) return palette.nameZh
+  return palette.name
+}
+
+function themeKey(theme: 'system' | 'light' | 'dark'): 'theme-system' | 'theme-light' | 'theme-dark' {
+  if (theme === 'light') return 'theme-light'
+  if (theme === 'dark') return 'theme-dark'
+  return 'theme-system'
+}
+
+async function choosePalette(
+  props: {
+    readonly theme?: ThemeClient
+    readonly settings?: PanelSettingsClient
+    readonly appId?: string
+    readonly onHostPolicy?: (policy: PanelPolicy) => void
+  },
+  appScope: boolean,
+  palette: PaletteChip,
+  setPaletteId: (id: string) => void,
+  setPin: (pin: ThemePin) => void,
+  setFailed: (message: string) => void,
+  label: (key: string) => string,
+): Promise<void> {
+  if (appScope) {
+    await writePin(props.theme, props.appId, { kind: 'palette', id: palette.id }, setPin, setFailed, label, palette.style)
+    return
+  }
+  await writePalette(props.settings, palette.id, setPaletteId, setFailed, label, palette.style, props.onHostPolicy)
+}
+
+async function writeTheme(
+  settings: PanelSettingsClient | undefined,
+  theme: 'system' | 'light' | 'dark',
+  setAppearance: (theme: 'system' | 'light' | 'dark') => void,
+  setFailed: (message: string) => void,
+  label: (key: string) => string,
+  onHostPolicy?: (policy: PanelPolicy) => void,
+): Promise<void> {
+  if (settings === undefined) return
+  try {
+    const current = await settings.readPolicy()
+    const written = await settings.writePolicy({ ...current, theme })
+    applyDocumentMode(theme)
+    setAppearance(theme)
+    onHostPolicy?.(written.policy)
+    setFailed('')
+  } catch (error) {
+    setFailed(error instanceof Error && error.message.length > 0 ? error.message : label('theme-save-failed'))
+  }
+}
+
+async function writePalette(
+  settings: PanelSettingsClient | undefined,
+  palette: string,
+  setPaletteId: (id: string) => void,
+  setFailed: (message: string) => void,
+  label: (key: string) => string,
+  style?: string,
+  onHostPolicy?: (policy: PanelPolicy) => void,
+): Promise<void> {
+  if (settings === undefined) return
+  try {
+    const current = await settings.readPolicy()
+    const written = await settings.writePolicy({ ...current, palette })
+    setPaletteId(palette)
+    onHostPolicy?.(written.policy)
+    setFailed('')
+    if (style !== undefined) paintStyle(style)
+  } catch (error) {
+    setFailed(error instanceof Error && error.message.length > 0 ? error.message : label('theme-save-failed'))
+  }
+}
+
+async function writePin(
+  theme: ThemeClient | undefined,
+  appId: string | undefined,
+  pin: ThemePin,
+  setPin: (pin: ThemePin) => void,
+  setFailed: (message: string) => void,
+  label: (key: string) => string,
+  style?: string,
+): Promise<void> {
+  if (theme === undefined || appId === undefined) return
+  try {
+    setPin(await theme.setPin(appId, pin))
+    setFailed('')
+    if (style !== undefined) paintStyle(style, appId)
+  } catch (error) {
+    setFailed(error instanceof Error && error.message.length > 0 ? error.message : label('theme-save-failed'))
+  }
+}
+
+function paintStyle(style: string, appId?: string): void {
+  if (typeof document === 'undefined') return
+  if (appId === undefined) {
+    const node = document.getElementById('mma-theme')
+    if (node) node.textContent = style
+  }
+  const frames = appId === undefined
+    ? [...document.querySelectorAll('iframe')]
+    : [document.querySelector(`iframe[title="${CSS.escape(appId)}"]`)]
+  for (const frame of frames) {
+    if (frame instanceof HTMLIFrameElement) frame.contentWindow?.postMessage({ type: 'theme', style, variables: {} }, window.location.origin)
+  }
+}
+
+/** Host-wide palette CSS preview (panel + all app iframes). */
+export function paintHostStyle(style: string): void {
+  paintStyle(style)
+}
+
+/** Paint `data-mode` on the panel document. `system` follows the OS. */
+export function applyDocumentMode(theme: 'system' | 'light' | 'dark'): void {
+  if (typeof document === 'undefined') return
+  const mode = theme === 'system' ? systemDocumentMode() : theme
+  document.documentElement.dataset.mode = mode
+  for (const frame of document.querySelectorAll('iframe')) {
+    if (!(frame instanceof HTMLIFrameElement)) continue
+    frame.contentWindow?.postMessage({ type: 'theme', mode, variables: {} }, window.location.origin)
+  }
+}
+
+function systemDocumentMode(): 'light' | 'dark' {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return 'light'
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}

package/src/theme/state.ts

@@ -0,0 +1,113 @@
+import type { PaletteChip, IgnoredPalette, ThemeClient, ThemePin } from './client.ts'
+
+export interface ThemeState {
+  readonly palettes: readonly PaletteChip[]
+  readonly ignored: readonly IgnoredPalette[]
+  readonly pin: ThemePin
+  readonly failed: boolean
+  readonly appFile: boolean
+  readonly error?: string
+}
+
+export type ThemeAction =
+  | { readonly type: 'loaded'; readonly palettes: readonly PaletteChip[]; readonly ignored: readonly IgnoredPalette[] }
+  | { readonly type: 'failed'; readonly message?: string }
+  | { readonly type: 'saved'; readonly pin: ThemePin }
+  | { readonly type: 'save-failed'; readonly message?: string }
+  | { readonly type: 'app-file'; readonly parsed: boolean }
+  | { readonly type: 'pin'; readonly pin: ThemePin }
+
+/** Picker before the palette list loads. */
+export function themeState(): ThemeState {
+  return { palettes: [], ignored: [], pin: { kind: 'default' }, failed: false, appFile: false }
+}
+
+/**
+ * Theme picker transition. A failed save leaves the previous pin.
+ * @param state - current picker
+ * @param action - one client result
+ */
+export function reduceTheme(state: ThemeState, action: ThemeAction): ThemeState {
+  switch (action.type) {
+    case 'loaded':
+      return { ...omitError(state), palettes: action.palettes, ignored: action.ignored, failed: false }
+    case 'failed':
+      return { ...omitError(state), failed: true, ...action.message ? { error: action.message } : {} }
+    case 'saved':
+      return { ...omitError(state), pin: action.pin, failed: false }
+    case 'save-failed':
+      return { ...omitError(state), failed: true, ...action.message ? { error: action.message } : {} }
+    case 'app-file':
+      return { ...state, appFile: action.parsed }
+    case 'pin':
+      return { ...omitError(state), pin: action.pin, failed: false }
+    default:
+      return action satisfies never
+  }
+}
+
+/** Refetch palettes when the picker opens. */
+export async function loadPalettes(
+  client: ThemeClient,
+  dispatch: (action: ThemeAction) => void,
+): Promise<void> {
+  try {
+    const listed = await client.listPalettes()
+    dispatch({ type: 'loaded', palettes: listed.palettes, ignored: listed.ignored })
+  } catch (error) {
+    dispatch({ type: 'failed', ...thrown(error) })
+  }
+}
+
+/** Read the stored pin when the picker opens. A missing method leaves the default. */
+export async function loadPin(
+  client: ThemeClient,
+  appId: string,
+  dispatch: (action: ThemeAction) => void,
+): Promise<void> {
+  if (client.readPin === undefined) return
+  try {
+    dispatch({ type: 'pin', pin: await client.readPin(appId) })
+  } catch (error) {
+    dispatch({ type: 'failed', ...thrown(error) })
+  }
+}
+
+/** Ask whether this app's `theme.css` parsed. A missing method leaves the row hidden. */
+export async function loadAppFile(
+  client: ThemeClient,
+  appId: string,
+  dispatch: (action: ThemeAction) => void,
+): Promise<void> {
+  if (client.appFile === undefined) return
+  try {
+    dispatch({ type: 'app-file', parsed: await client.appFile(appId) })
+  } catch {
+    dispatch({ type: 'app-file', parsed: false })
+  }
+}
+
+/** Save a pin. Failure does not change the previous pin. */
+export async function savePin(
+  client: ThemeClient,
+  appId: string,
+  pin: ThemePin,
+  dispatch: (action: ThemeAction) => void,
+): Promise<void> {
+  try {
+    dispatch({ type: 'saved', pin: await client.setPin(appId, pin) })
+  } catch (error) {
+    dispatch({ type: 'save-failed', ...thrown(error) })
+  }
+}
+
+function thrown(error: unknown): { message: string } | Record<string, never> {
+  const message = error instanceof Error ? error.message : ''
+  return message.length > 0 ? { message } : {}
+}
+
+function omitError(state: ThemeState): Omit<ThemeState, 'error'> {
+  const { error: gone, ...rest } = state
+  void gone
+  return rest
+}

package/src/theme/view.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useReducer, type ReactNode } from 'react'
+
+import { panelText, type PanelLabelMode, type PanelLocale } from '../labels.ts'
+import type { ThemeClient, ThemePin } from './client.ts'
+import { loadAppFile, loadPalettes, loadPin, reduceTheme, savePin, themeState } from './state.ts'
+
+/**
+ * Theme picker. Hidden when Host exposes no theme client. No route string lives here.
+ * The app-file row appears only in app scope when `theme.css` parsed.
+ * @param props - client, scope, and chrome locale
+ */
+export function PanelTheme(props: {
+  readonly client?: ThemeClient
+  readonly appId?: string
+  readonly appFile?: boolean
+  readonly locale: PanelLocale
+  readonly mode: PanelLabelMode
+}): ReactNode {
+  const [state, dispatch] = useReducer(reduceTheme, undefined, themeState)
+  useEffect(() => {
+    if (props.client === undefined) return
+    void loadPalettes(props.client, dispatch)
+    if (props.appId === undefined) return
+    void loadPin(props.client, props.appId, dispatch)
+    if (props.client.appFile === undefined) return
+    void loadAppFile(props.client, props.appId, dispatch)
+  }, [props.client, props.appId])
+  if (props.client === undefined) return null
+  const label = (key: string) => panelText(props.locale, key, props.mode)
+  const client = props.client
+  const appId = props.appId
+  const choose = (pin: ThemePin) => {
+    if (appId === undefined) return
+    void savePin(client, appId, pin, dispatch)
+  }
+  return (
+    <section className="flex max-h-80 w-72 flex-col gap-1 overflow-auto rounded-xl border bg-card p-2 text-card-foreground shadow-lg">
+      {state.failed ? <p className="px-2 py-1 text-xs text-destructive">{state.error !== undefined && state.error.length > 0 ? state.error : label('theme-save-failed')}</p> : null}
+      <PinButton label={label('clear-pin')} pressed={pressed(state.pin, { kind: 'default' }, appId)} onClick={() => choose({ kind: 'default' })} />
+      <PinButton label={label('follow-host')} pressed={pressed(state.pin, { kind: 'follow-host' }, appId)} onClick={() => choose({ kind: 'follow-host' })} />
+      {(state.appFile || props.appFile === true) && appId !== undefined ? (
+        <PinButton label={label('app-file')} pressed={pressed(state.pin, { kind: 'app-file' }, appId)} onClick={() => choose({ kind: 'app-file' })} />
+      ) : null}
+      <ul className="flex flex-col gap-1">
+        {state.palettes.map(palette => (
+          <li key={palette.id}>
+            <PinButton
+              label={palette.name}
+              pressed={pressed(state.pin, { kind: 'palette', id: palette.id }, appId)}
+              onClick={() => choose({ kind: 'palette', id: palette.id })}
+            />
+          </li>
+        ))}
+      </ul>
+      {state.ignored.map(item => <p key={item.file} className="px-2 text-[11px] text-muted-foreground">{item.reason}</p>)}
+    </section>
+  )
+}
+
+function PinButton(props: { readonly label: string; readonly pressed: boolean; readonly onClick: () => void }): ReactNode {
+  return (
+    <button type="button" className="flex h-9 w-full items-center rounded-lg px-2 text-left text-sm hover:bg-muted data-[on=1]:bg-muted" data-on={props.pressed ? '1' : '0'} aria-pressed={props.pressed} onClick={props.onClick}>
+      <span>{props.label}</span>
+    </button>
+  )
+}
+
+function pressed(current: ThemePin, next: ThemePin, appId: string | undefined): boolean {
+  if (appId === undefined) return false
+  if (current.kind !== next.kind) return false
+  if (current.kind === 'palette' && next.kind === 'palette') return current.id === next.id
+  return true
+}

package/src/ui/dialog.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+
+/**
+ * One modal. The scrim fades in and the card scales in.
+ * Callers pass content only. They do not repeat the motion classes.
+ * @param props - close handler, width, and the card body
+ */
+export function Dialog(props: {
+  readonly children: ReactNode
+  readonly onClose: () => void
+  readonly width?: 'sm' | 'md' | 'wide'
+}): ReactNode {
+  const width = props.width === 'sm'
+    ? 'max-w-sm'
+    : props.width === 'md'
+      ? 'max-w-2xl'
+      : props.width === 'wide' ? 'max-w-4xl' : 'max-w-xl'
+  return (
+    <div className="fixed inset-0 z-30 flex animate-in items-center justify-center bg-foreground/35 p-4 duration-150 fade-in-0" onClick={props.onClose}>
+      <div className={`max-h-[85vh] w-full overflow-auto rounded-2xl border bg-card p-5 shadow-lg animate-in duration-150 fade-in-0 zoom-in-95 ${width}`} onClick={event => event.stopPropagation()}>
+        {props.children}
+      </div>
+    </div>
+  )
+}

package/src/ui/tooltip.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react'
+
+/**
+ * Fast hover/focus hint. Native `title` is slow and easy to miss on icon chrome.
+ * @param props - hint text, the control, and optional alignment
+ */
+export function Tooltip(props: {
+  readonly text: string
+  readonly children: ReactNode
+  readonly align?: 'center' | 'end'
+  readonly className?: string
+}): ReactNode {
+  return (
+    <span className={props.className === undefined ? 'mma-tip' : `mma-tip ${props.className}`} data-align={props.align ?? 'center'}>
+      {props.children}
+      <span className="mma-tip-label" role="tooltip">{props.text}</span>
+    </span>
+  )
+}