@ompchamber/ui 1.0.0 → 2.0.1

package/package.json

@@ -1,19 +1,18 @@
 {
   "name": "@ompchamber/ui",
-  "version": "1.0.0",
+  "version": "2.0.1",
   "type": "module",
   "description": "Preact hooks and components for OMPChamber panel plugins.",
   "exports": {
     ".": "./src/index.tsx",
-    "./components": "./src/components.tsx",
-    "./styles.css": "./src/styles.css"
+    "./components": "./src/components.tsx"
   },
   "files": [
     "src"
   ],
   "dependencies": {
     "preact": "^10.29.8",
-    "@ompchamber/plugin-sdk": "1.0.0"
+    "@ompchamber/plugin-sdk": "2.0.0"
   },
   "license": "UNLICENSED",
   "repository": {

package/src/components.tsx

@@ -6,17 +6,19 @@
 /**
  * The panel UI kit.
  *
- * Components a panel draws with, styled by the CSS variables the host's palette
- * drives. They exist so panels look like the chamber and like each other without
- * each one re-deriving the same markup — a second copy of a labelled field is
- * the first place two panels drift apart.
+ * These are ordinary host components, not a sandboxed mini-app's widgets: a
+ * plugin renders inside the chamber's own tree, so the kit uses the chamber's
+ * theme variables and Tailwind utilities directly and looks native in every
+ * palette with no CSS bridge.
  *
- * Class names are prefixed `oc-` and the stylesheet ships from the same package
- * (`@ompchamber/ui/styles.css`), so a plugin imports one thing and gets both.
- * Colours come from `var(--oc-*)`, which the host does NOT set: the frame has an
- * opaque origin, so the palette arrives as `data-theme` on `<html>` and the
- * stylesheet maps it. That is why this package carries CSS rather than reading
- * the app's.
+ * The kit exists so a plugin does not re-invent the same six shapes — a titled
+ * panel, a label/value row, a text field, a button, an empty state, a note —
+ * and so those shapes stay consistent across plugins the way they are within
+ * the chamber itself.
+ *
+ * Every component takes its colours from the theme variables (`bg-paper`,
+ * `text-ink`, `border-ink/10`), never a literal, which is what keeps a plugin
+ * legible in the light and dark palettes without knowing they exist.
  */
 
 import type { ComponentChildren } from 'preact';
@@ -29,11 +31,11 @@ interface PanelProps {
 /** A panel's outer chrome: a title bar over a scrolling body. */
 export function Panel({ title, children }: PanelProps) {
   return (
-    <div class="oc-panel">
-      <header class="oc-panel-header">
-        <h1 class="oc-panel-title">{title}</h1>
-      </header>
-      <div class="oc-panel-body">{children}</div>
+    <div class="flex flex-col h-full w-full bg-paper text-ink">
+      <div class="flex-shrink-0 border-b border-ink/10 px-3 py-2">
+        <span class="text-xs font-semibold text-ink">{title}</span>
+      </div>
+      <div class="flex-1 min-h-0 overflow-auto p-3">{children}</div>
     </div>
   );
 }
@@ -41,60 +43,55 @@ export function Panel({ title, children }: PanelProps) {
 interface FieldProps {
   label: string;
   value: string;
-  /** Shown under the value, for a path or an id that would otherwise wrap badly. */
   hint?: string;
 }
 
 /** One labelled fact. The label is a micro-header, the value is machine text. */
 export function Field({ label, value, hint }: FieldProps) {
   return (
-    <div class="oc-field">
-      <span class="oc-label">{label}</span>
-      <span class="oc-value" title={value}>
-        {value}
-      </span>
-      {hint ? <span class="oc-hint">{hint}</span> : null}
+    <div class="flex flex-col gap-0.5">
+      <span class="text-[10px] uppercase font-mono text-ink/40">{label}</span>
+      <span class="text-xs font-mono text-ink break-all">{value}</span>
+      {hint ? <span class="text-[11px] text-ink/50">{hint}</span> : null}
     </div>
   );
 }
 
 /** A stack of `Field`s. */
 export function FieldList({ children }: { children: ComponentChildren }) {
-  return <div class="oc-fields">{children}</div>;
+  return <div class="flex flex-col gap-3">{children}</div>;
 }
 
 interface TextAreaFieldProps {
-  id?: string;
+  id: string;
   label: string;
+  value: string;
   placeholder?: string;
-  /** `null` while the stored value has not been read yet. */
-  value: string | null;
   hint?: string;
-  onInput: (next: string) => void;
+  onInput: (value: string) => void;
 }
 
 /**
  * A labelled textarea.
  *
- * Disabled while `value` is null — that is "the read has not answered yet", and
- * an editable box there would let the user type into a field whose contents are
- * about to be replaced by the stored value.
+ * Controlled through `onInput` rather than owning its own state, so the caller
+ * decides what a keystroke means — the session-persisting hook debounces the
+ * write, while a purely local field can keep the value in the caller.
  */
-export function TextAreaField({ id, label, placeholder, value, hint, onInput }: TextAreaFieldProps) {
+export function TextAreaField({ id, label, value, placeholder, hint, onInput }: TextAreaFieldProps) {
   return (
-    <div class="oc-textarea-field">
-      <label class="oc-label" for={id}>
+    <div class="flex flex-col gap-1">
+      <label for={id} class="text-[10px] uppercase font-mono text-ink/40">
         {label}
       </label>
       <textarea
         id={id}
-        class="oc-textarea"
+        value={value}
         placeholder={placeholder}
-        value={value ?? ''}
-        disabled={value === null}
-        onInput={(event) => onInput(event.currentTarget.value)}
+        onInput={(event) => onInput((event.currentTarget as HTMLTextAreaElement).value)}
+        class="w-full min-h-20 resize-y bg-canvas border border-ink/15 rounded px-2.5 py-1.5 text-xs font-mono text-ink placeholder-ink/35 focus:outline-none focus:border-ink/40"
       />
-      {hint ? <span class="oc-hint">{hint}</span> : null}
+      {hint ? <span class="text-[11px] text-ink/50">{hint}</span> : null}
     </div>
   );
 }
@@ -103,13 +100,23 @@ interface ButtonProps {
   children: ComponentChildren;
   onClick: () => void;
   disabled?: boolean;
+  /** The one action a panel wants the user to take. */
   variant?: 'default' | 'primary';
 }
 
-/** A button. `primary` is the one action a panel wants the user to take. */
+/** A button. */
 export function Button({ children, onClick, disabled, variant = 'default' }: ButtonProps) {
+  const tone =
+    variant === 'primary'
+      ? 'bg-ink text-canvas border-ink hover:opacity-90'
+      : 'border-ink/15 hover:bg-ink/5 text-ink';
   return (
-    <button type="button" class={`oc-button oc-button-${variant}`} disabled={disabled} onClick={onClick}>
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      class={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded border transition-colors disabled:opacity-40 disabled:cursor-default ${tone}`}
+    >
       {children}
     </button>
   );
@@ -117,10 +124,15 @@ export function Button({ children, onClick, disabled, variant = 'default' }: But
 
 /** Centred placeholder for a panel with nothing to show. */
 export function Empty({ children }: { children: ComponentChildren }) {
-  return <p class="oc-empty">{children}</p>;
+  return (
+    <div class="h-full flex items-center justify-center px-6 text-center">
+      <p class="text-xs text-ink/45 font-mono">{children}</p>
+    </div>
+  );
 }
 
 /** A message. `error` is the only chroma a panel should use. */
 export function Note({ children, tone = 'default' }: { children: ComponentChildren; tone?: 'default' | 'error' }) {
-  return <p class={`oc-note oc-note-${tone}`}>{children}</p>;
+  const colour = tone === 'error' ? 'text-error' : 'text-ink/60';
+  return <p class={`text-[11px] ${colour}`}>{children}</p>;
 }

package/src/index.tsx

@@ -4,54 +4,100 @@
  */
 
 /**
- * The Preact integration for a panel plugin: one provider, four hooks.
+ * The UI kit a plugin renders with, and the host services it reads through.
  *
- * A plugin used to hand-roll this — a context, a `ready` await, a theme handler,
- * a debounced session write — which meant every plugin re-derived the same two
- * behaviours that are easy to get wrong:
+ * Everything here runs IN THE HOST'S TREE — same Preact instance, same
+ * document, same theme — so the kit is plain Preact components, not a
+ * message-passing client. What it still must not do is reach into the host's
+ * own source: this is a published package, so the host INJECTS its services
+ * once at boot via `configureUiKit`, and the hooks read them.
  *
- * - **The provider owns BOTH bridge subscriptions.** Registering `onTheme` from
- *   a component only fires if that component mounts; a panel whose components
- *   never called `useTheme()` silently stopped following the palette.
- * - **The context arrives late.** `workspacePath` and `sessionId` are resolved
- *   asynchronously by the chamber, so they are usually empty when `ready`
- *   settles. A component that captured `info` once would show "none" over a real
- *   workspace.
+ * Two rules the hooks exist to enforce, because a plugin gets them wrong:
  *
- * Both are handled here so a plugin cannot get them wrong.
+ * - **Context arrives late.** The active session and workspace are resolved
+ *   asynchronously, so a component that captured them once would show "none"
+ *   over a real workspace. Every hook subscribes and re-renders.
+ * - **Session state is not component state.** The component is unmounted when
+ *   its panel is hidden, so a value kept in `useState` alone would be lost on
+ *   every tab switch. `useSessionValue` reads the chamber's store.
  */
 
-import { createContext } from 'preact';
-import { useContext, useEffect, useState } from 'preact/hooks';
-import type { ComponentChildren } from 'preact';
-import { acquirePanel, type ChamberPanelApi, type PanelInfo } from '@ompchamber/plugin-sdk';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 
-interface PanelContextValue {
-  api: ChamberPanelApi;
-  info: PanelInfo;
+/** What the host seeds every plugin component with. */
+export interface PanelContext {
+  sessionId: string | null;
+  workspacePath: string | null;
+  theme: string;
 }
 
-const PanelContext = createContext<PanelContextValue | null>(null);
+/**
+ * The host's own services, injected once.
+ *
+ * Deliberately narrow: each field is something a plugin genuinely cannot do
+ * itself (read the chamber's per-session store, know the live palette, resolve
+ * the active workspace). Anything a plugin could read from the DOM it should.
+ */
+export interface UiKitServices {
+  /** The current panel context. */
+  context(): PanelContext;
+  /** Subscribe to context changes (a new session, a palette switch). */
+  subscribe(listener: (context: PanelContext) => void): () => void;
+  /** Read one per-session value. */
+  getSessionValue(sessionId: string | null, key: string): string | null;
+  /** Write one per-session value. */
+  setSessionValue(sessionId: string | null, key: string, value: string): void;
+  /**
+   * Subscribe to writes of ONE per-session value, from any component.
+   *
+   * Optional so a host built before this seam still runs a newer kit — the
+   * hook degrades to read-on-mount, which is what every host did.
+   *
+   * It exists because `getSessionValue` alone makes two readers of one key
+   * disagree: a component reads the store once and then holds its own copy, so
+   * a field that WRITES a value and a readout that DISPLAYS it are two private
+   * copies of the same fact, and the readout keeps the value it read at mount
+   * forever. That is not a stale pixel — it is the plugin's own UI contradicting
+   * itself, which is exactly what the bundled example does (a note field and a
+   * character count of that note).
+   */
+  subscribeSessionValue?(sessionId: string | null, key: string, listener: () => void): () => void;
+  /** Read a text file inside the active workspace. Rejects with the reason. */
+  readWorkspaceFile(workspacePath: string | null, relativePath: string): Promise<string>;
+}
+
+let services: UiKitServices | null = null;
 
-function usePanelContext(): PanelContextValue {
-  const value = useContext(PanelContext);
-  if (!value) throw new Error('Panel hooks must be used inside <PanelProvider>');
-  return value;
+/** Called ONCE by the host at boot. A plugin must never call this. */
+export function configureUiKit(next: UiKitServices): void {
+  services = next;
+}
+
+function requireServices(): UiKitServices {
+  if (!services) {
+    throw new Error(
+      'The OMPChamber UI kit has no host services — this component must be rendered by the OMPChamber app.',
+    );
+  }
+  return services;
 }
 
 /**
- * The live panel info.
+ * The live panel context, re-rendering on every change.
  *
- * Read through a hook rather than off the context directly so a component
- * re-renders when the workspace arrives.
+ * `useState` is seeded from the service and updated by its subscription, which
+ * is what makes a workspace that arrives after the first paint show up.
  */
-export function usePanelInfo(): PanelInfo {
-  return usePanelContext().info;
-}
+export function usePanelInfo(): PanelContext {
+  const [context, setContext] = useState<PanelContext>(() => requireServices().context());
 
-/** The bridge itself, for `api.call(...)`. */
-export function usePanelApi(): ChamberPanelApi {
-  return usePanelContext().api;
+  useEffect(() => {
+    const api = requireServices();
+    setContext(api.context());
+    return api.subscribe(setContext);
+  }, []);
+
+  return context;
 }
 
 /** The live palette id. */
@@ -70,42 +116,57 @@ export interface SessionValue {
 /**
  * Per-session state, as a `useState` that persists.
  *
- * The value lives in the session store, not in the frame: the frame is destroyed
- * whenever the panel is hidden, so local state would be lost on every tab
- * switch. Reads once on mount, writes debounced — `input` fires per keystroke,
- * and each one would otherwise be a postMessage round trip.
+ * The write is debounced: `onInput` fires per keystroke, and each one would
+ * otherwise be a store write and a request.
  */
 export function useSessionValue(key: string, delayMs = 400): SessionValue {
-  const api = usePanelApi();
+  const { sessionId } = usePanelInfo();
   const [value, setValue] = useState<string | null>(null);
   const [status, setStatus] = useState<SessionValue['status']>('loading');
   const [error, setError] = useState<string | null>(null);
+  // Distinguishes "this component's own edit" from "someone else wrote the
+  // slot". Only the former may set `saving`, or an unrelated write would mark a
+  // field dirty and write it straight back.
+  const editing = useRef(false);
+
+  const read = useCallback((): string => {
+    try {
+      const stored = requireServices().getSessionValue(sessionId, key) ?? '';
+      setError(null);
+      return stored;
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+      setStatus('error');
+      return '';
+    }
+  }, [sessionId, key]);
 
   useEffect(() => {
-    let cancelled = false;
+    editing.current = false;
     setStatus('loading');
-    api.call<string | null>('sessionState.get', { key }).then(
-      (stored) => {
-        if (cancelled) return;
-        setValue(stored ?? '');
-        setStatus('idle');
-      },
-      (cause: unknown) => {
-        if (cancelled) return;
-        setError(cause instanceof Error ? cause.message : String(cause));
-        setStatus('error');
-      },
-    );
-    return () => {
-      cancelled = true;
-    };
-  }, [api, key]);
+    setValue(read());
+    setStatus((current) => (current === 'error' ? current : 'idle'));
+  }, [read]);
+
+  // Follow writes from anywhere else — the header readout showing a note's
+  // length, a second view of the same value. Skipped while THIS component is
+  // mid-edit, because its own state is the newer truth until the debounce
+  // lands.
+  useEffect(() => {
+    const api = requireServices();
+    if (!api.subscribeSessionValue) return;
+    return api.subscribeSessionValue(sessionId, key, () => {
+      if (editing.current) return;
+      setValue(read());
+    });
+  }, [sessionId, key, read]);
 
   useEffect(() => {
     if (value === null || status !== 'saving') return;
-    const timer = setTimeout(async () => {
+    const timer = setTimeout(() => {
       try {
-        await api.call('sessionState.set', { key, value });
+        requireServices().setSessionValue(sessionId, key, value);
+        editing.current = false;
         setStatus('saved');
       } catch (cause) {
         setError(cause instanceof Error ? cause.message : String(cause));
@@ -113,69 +174,52 @@ export function useSessionValue(key: string, delayMs = 400): SessionValue {
       }
     }, delayMs);
     return () => clearTimeout(timer);
-  }, [api, key, value, status, delayMs]);
-
-  return {
-    value,
-    status,
-    error,
-    update: (next: string) => {
-      setValue(next);
-      setStatus('saving');
-    },
-  };
+  }, [sessionId, key, value, status, delayMs]);
+
+  const update = useCallback((next: string) => {
+    editing.current = true;
+    setValue(next);
+    setStatus('saving');
+  }, []);
+
+  return { value, status, error, update };
 }
 
-/**
- * Mount a panel, rendering `children` once the host has answered.
- *
- * Renders nothing until `ready` resolves: the panel has no data to draw before
- * then, and a half-drawn first frame is worse than none.
- */
-export function PanelProvider({ children }: { children: ComponentChildren }) {
-  const [value, setValue] = useState<PanelContextValue | null>(null);
+export interface WorkspaceFile {
+  content: string | null;
+  loading: boolean;
+  error: string | null;
+}
+
+/** Read one text file inside the active workspace. */
+export function useWorkspaceFile(relativePath: string): WorkspaceFile {
+  const { workspacePath } = usePanelInfo();
+  const [content, setContent] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     let cancelled = false;
-    let api: ChamberPanelApi;
-    try {
-      api = acquirePanel();
-    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : String(cause));
-      return;
-    }
-
-    /** Apply a palette id to the document, which is what `:root[data-theme]` keys off. */
-    const applyTheme = (theme: string) => document.documentElement.setAttribute('data-theme', theme);
-
-    api.ready.then(
-      (info) => {
-        if (cancelled) return;
-        applyTheme(info.theme);
-        api.onTheme = (theme) => {
-          applyTheme(theme);
-          setValue((current) => (current ? { ...current, info: { ...current.info, theme } } : current));
-        };
-        api.onContext = (next) => {
-          if (next.theme) applyTheme(next.theme);
-          setValue((current) => (current ? { ...current, info: { ...current.info, ...next } } : current));
-        };
-        setValue({ api, info });
-      },
-      (cause: unknown) => {
-        if (!cancelled) setError(cause instanceof Error ? cause.message : String(cause));
-      },
-    );
-
+    setLoading(true);
+    setError(null);
+    requireServices()
+      .readWorkspaceFile(workspacePath, relativePath)
+      .then(
+        (text) => {
+          if (cancelled) return;
+          setContent(text);
+          setLoading(false);
+        },
+        (cause: unknown) => {
+          if (cancelled) return;
+          setError(cause instanceof Error ? cause.message : String(cause));
+          setLoading(false);
+        },
+      );
     return () => {
       cancelled = true;
-      api.onTheme = undefined;
-      api.onContext = undefined;
     };
-  }, []);
+  }, [workspacePath, relativePath]);
 
-  if (error) return <p class="oc-note oc-note-error">Could not attach to the chamber: {error}</p>;
-  if (!value) return null;
-  return <PanelContext.Provider value={value}>{children}</PanelContext.Provider>;
+  return { content, loading, error };
 }

package/src/session-value.test.tsx

@@ -0,0 +1,162 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * `useSessionValue` and the components that read the same slot.
+ *
+ * The defect this pins: the hook read the store ONCE per mount and then held a
+ * private copy, so two components reading one key never saw each other's
+ * writes. A field that WRITES a value and a readout that DISPLAYS it therefore
+ * disagreed permanently — the readout kept whatever it read at mount while the
+ * field showed what the user had typed. That is the bundled example plugin's
+ * own shape (a note field and a character count of that note), so the plugin
+ * contradicted itself on screen.
+ *
+ * Two rules the fix must keep:
+ *
+ * - a write by ANOTHER component re-reads the slot and re-renders;
+ * - a write by THIS component does NOT: its own state is the newer truth until
+ *   the debounce lands, and re-reading would fight the user's keystrokes.
+ *
+ * Rendered with `h()` (no JSX) against happy-dom, with a fake services seam —
+ * the kit is a published package and must not reach into the host's source.
+ */
+
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { configureUiKit, useSessionValue, type PanelContext, type UiKitServices } from '@ompchamber/ui';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+const CONTEXT: PanelContext = { sessionId: 's1', workspacePath: '/ws', theme: 'paper' };
+
+/** The store behind the fake seam: one slot per session+key, as the host has. */
+function makeServices() {
+  const store = new Map<string, string>();
+  const listeners = new Map<string, Set<() => void>>();
+  const slotKey = (key: string) => `${CONTEXT.sessionId}:${key}`;
+
+  const services: UiKitServices = {
+    context: () => CONTEXT,
+    subscribe: () => () => {},
+    getSessionValue: (_sessionId, key) => store.get(slotKey(key)) ?? null,
+    setSessionValue: (_sessionId, key, value) => {
+      store.set(slotKey(key), value);
+      for (const listener of [...(listeners.get(slotKey(key)) ?? [])]) listener();
+    },
+    subscribeSessionValue: (_sessionId, key, listener) => {
+      const bucket = listeners.get(slotKey(key)) ?? new Set();
+      bucket.add(listener);
+      listeners.set(slotKey(key), bucket);
+      return () => bucket.delete(listener);
+    },
+    readWorkspaceFile: async () => '',
+  };
+
+  /** What a DIFFERENT component's write looks like, reaching every reader. */
+  const externalWrite = (key: string, value: string) => services.setSessionValue(CONTEXT.sessionId, key, value);
+
+  return { services, store, externalWrite };
+}
+
+let container: HTMLElement;
+
+beforeEach(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (!(key in nativeGlobals)) nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+  container = document.createElement('div') as unknown as HTMLElement;
+  document.body.appendChild(container as never);
+});
+
+afterEach(() => {
+  render(null, container);
+  container.remove();
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (key in nativeGlobals) target[key] = nativeGlobals[key];
+    else delete target[key];
+  }
+});
+
+describe('useSessionValue', () => {
+  test('a readout follows a write made by ANOTHER component', async () => {
+    const { services, externalWrite } = makeServices();
+    configureUiKit(services);
+
+    /** Reads the slot without ever writing it — the readout's shape. */
+    function Readout() {
+      const { value } = useSessionValue('note', 10);
+      return h('span', { id: 'readout' }, String((value ?? '').length));
+    }
+
+    await act(async () => {
+      render(h(Readout, {}), container);
+    });
+    expect(container.textContent).toBe('0');
+
+    // The field component writes; the readout must catch up.
+    await act(async () => {
+      externalWrite('note', 'hello');
+    });
+    expect(container.textContent).toBe('5');
+  });
+
+  test('a component mid-edit keeps its own text until the debounce lands', async () => {
+    const { services } = makeServices();
+    configureUiKit(services);
+
+    function Field() {
+      const { value, update } = useSessionValue('note', 10_000);
+      return h('input', { id: 'field', value: value ?? '', onInput: (event: Event) => update((event.target as HTMLInputElement).value) });
+    }
+
+    await act(async () => {
+      render(h(Field, {}), container);
+    });
+
+    const field = container.querySelector('#field') as HTMLInputElement;
+    await act(async () => {
+      field.value = 'typed';
+      field.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+
+    // A long debounce: the store still holds nothing, and the field must NOT
+    // re-read it — that would erase the keystroke on screen.
+    expect(field.value).toBe('typed');
+  });
+
+  test('a write from another component does not mark this field dirty', async () => {
+    const { services, externalWrite, store } = makeServices();
+    configureUiKit(services);
+
+    /** A field that would write its value back if an outside write set `saving`. */
+    function Field() {
+      const { value, update } = useSessionValue('note', 10);
+      return h('input', { id: 'field', value: value ?? '', onInput: (event: Event) => update((event.target as HTMLInputElement).value) });
+    }
+
+    await act(async () => {
+      render(h(Field, {}), container);
+    });
+
+    await act(async () => {
+      externalWrite('note', 'from elsewhere');
+    });
+
+    // The field shows the outside value and has not overwritten it.
+    expect((container.querySelector('#field') as HTMLInputElement).value).toBe('from elsewhere');
+    const settled = Promise.withResolvers<void>();
+    setTimeout(() => settled.resolve(), 40);
+    await settled.promise;
+    expect(store.get(`${CONTEXT.sessionId}:note`)).toBe('from elsewhere');
+  });
+});

package/src/styles.css

@@ -1,187 +0,0 @@
-/**
- * The UI kit's stylesheet.
- *
- * The frame has an opaque origin, so it cannot reach the chamber's stylesheet —
- * the palette arrives as `data-theme` on `<html>` (set by `PanelProvider`) and
- * this file maps it. That is the whole reason a kit ships CSS: without it, every
- * panel would invent its own colours and drift from the app.
- *
- * The palette ids are the two the chamber ships most often. A plugin may add a
- * block for a theme it wants to support; an unknown id leaves the defaults,
- * which is a readable fallback rather than a broken one.
- */
-
-:root {
-  --oc-bg: #faf8f3;
-  --oc-paper: #ffffff;
-  --oc-ink: #141310;
-  --oc-muted: rgba(20, 19, 16, 0.55);
-  --oc-faint: rgba(20, 19, 16, 0.38);
-  --oc-line: rgba(20, 19, 16, 0.14);
-  --oc-error: #b3261e;
-}
-
-:root[data-theme='one-dark-pro-soft'] {
-  --oc-bg: #21252b;
-  --oc-paper: #282c34;
-  --oc-ink: #d7dae0;
-  --oc-muted: rgba(215, 218, 224, 0.6);
-  --oc-faint: rgba(215, 218, 224, 0.42);
-  --oc-line: rgba(215, 218, 224, 0.16);
-  --oc-error: #e06c75;
-}
-
-html,
-body {
-  margin: 0;
-  height: 100%;
-}
-
-body {
-  background: var(--oc-bg);
-  color: var(--oc-ink);
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 13px;
-}
-
-/* Panel chrome ------------------------------------------------------------ */
-
-.oc-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.oc-panel-header {
-  padding: 12px 14px;
-  border-bottom: 1px solid var(--oc-line);
-  flex-shrink: 0;
-}
-
-.oc-panel-title {
-  margin: 0;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.oc-panel-body {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 12px 14px 14px;
-  overflow: auto;
-}
-
-/* Fields ------------------------------------------------------------------ */
-
-.oc-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.oc-field {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.oc-label {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--oc-muted);
-  font-family: ui-monospace, monospace;
-}
-
-.oc-value {
-  font-family: ui-monospace, monospace;
-  font-size: 12px;
-  word-break: break-all;
-}
-
-.oc-hint {
-  font-size: 11px;
-  color: var(--oc-muted);
-}
-
-/* Text field -------------------------------------------------------------- */
-
-.oc-textarea-field {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.oc-textarea {
-  flex: 1;
-  min-height: 80px;
-  resize: none;
-  border: 1px solid var(--oc-line);
-  border-radius: 6px;
-  padding: 8px;
-  font: 12px/1.6 ui-monospace, monospace;
-  background: transparent;
-  color: inherit;
-  outline: none;
-}
-
-.oc-textarea:focus {
-  border-color: var(--oc-ink);
-}
-
-.oc-textarea:disabled {
-  opacity: 0.5;
-}
-
-/* Button ------------------------------------------------------------------ */
-
-.oc-button {
-  font: inherit;
-  font-size: 12px;
-  padding: 5px 10px;
-  border-radius: 6px;
-  border: 1px solid var(--oc-line);
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-}
-
-.oc-button:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--oc-ink) 6%, transparent);
-}
-
-.oc-button:disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-
-.oc-button-primary {
-  background: var(--oc-ink);
-  color: var(--oc-bg);
-  border-color: var(--oc-ink);
-}
-
-/* Messages ---------------------------------------------------------------- */
-
-.oc-empty {
-  margin: 0;
-  padding: 24px 8px;
-  text-align: center;
-  font-size: 12px;
-  color: var(--oc-faint);
-}
-
-.oc-note {
-  margin: 0;
-  font-size: 11px;
-  color: var(--oc-muted);
-}
-
-.oc-note-error {
-  color: var(--oc-error);
-}

package/src/styles.d.css.ts

@@ -1,16 +0,0 @@
-/**
- * Type declaration for `@ompchamber/ui/styles.css`.
- *
- * TypeScript will not accept a side-effect import of a `.css` file without a
- * declaration beside it, and the error (`TS2882: Cannot find module or type
- * declarations for side-effect import`) is the first thing a plugin author would
- * hit. This is the shape TypeScript looks for — `styles.css` resolves to
- * `styles.d.css.ts` — and it requires `allowArbitraryExtensions: true` in the
- * consumer's tsconfig, which the plugin tsconfig in the docs sets.
- *
- * It is exported rather than ambient so the file is a module, which is what
- * `allowArbitraryExtensions` expects; the stylesheet itself is the payload, and
- * nothing is imported from here at runtime.
- */
-
-export {};