@try-works/dsh-recursive-mode 0.1.12 → 0.1.13

package/lib/client/board.d.ts

@@ -10,4 +10,5 @@ export interface BoardProps {
 }
 export declare function Board({ snapshot, onOpenInspector, onClose }: BoardProps): import("react").DetailedReactHTMLElement<{
     className: string;
+    'data-theme': import("./theme.ts").BoardTheme;
 }, HTMLElement> | null;

package/lib/client/derive.d.ts

@@ -71,6 +71,17 @@ export declare function cardFacts(card: RecursiveRunCard): RecursiveCardFacts;
  * worktree root is part of the id so two runs with the same runId in
  * different worktrees never collide — never "latest unfinished".
  */
+/** Solid status-pill kinds (run 16 / Paper StatusPill). */
+export type PillKind = 'locked' | 'in-progress' | 'paused' | 'blocked' | 'tampered' | 'advisory' | 'neutral';
+/** Human pill label per kind (neutral renders an empty dash). */
+export declare const PILL_LABELS: Record<PillKind, string>;
+/**
+ * Solid-pill kind for a whole run card. Priority: tamper > fully-locked >
+ * run-state blocked > run-state paused > still in-progress.
+ */
+export declare function cardPill(card: RecursiveRunCard): PillKind;
+/** Solid-pill kind for a phase row status string (LOCKED / DRAFT / '—'). */
+export declare function phaseStatusPill(status: string): PillKind;
 export declare function nodeKeyOf(runId: string, worktreeRoot: string): string;
 /** One expanded inspector phase row (§11.5). */
 export interface RecursivePhaseInspectorRow {

package/lib/client/inspector.d.ts

@@ -1,4 +1,5 @@
 import type { LiveProjectionValue } from './contract.ts';
+import type { BoardTheme } from './theme.ts';
 export interface InspectorProps {
     runId: string;
     worktreeRoot: string;
@@ -8,4 +9,5 @@ export interface InspectorProps {
 }
 export declare function Inspector({ runId, worktreeRoot, snapshot, onBackToToolDetails, onClose }: InspectorProps): import("react").DetailedReactHTMLElement<{
     className: string;
+    'data-theme': BoardTheme;
 }, HTMLElement>;

package/lib/client/styles.d.ts

@@ -1,11 +1,13 @@
 /**
- * One-shot board/inspector stylesheet injection (run 15). The client bundle is a
- * plain CJS closure with NO CSS pipeline (tsdown has no CSS handling), so we
- * inject a single <style data-dsh-recursive> element into document.head and
- * style via class names + the shell's --dsw-* theme tokens. That unlocks hover,
- * grid layout, and light/dark/skin theme following — impossible with inline
- * styles. Idempotent: guarded by document.querySelector, so every registration
- * reuses the one element; the returned disposer removes it.
+ * One-shot board/inspector stylesheet injection (run 15 + run 16 / Paper).
+ * The client bundle is a plain CJS closure with NO CSS pipeline (tsdown), so we
+ * inject a single <style data-dsh-recursive> element into document.head.
+ *
+ * Run 16 (Paper): the design is ported 1:1 — DEFAULT LIGHT theme, dark via a
+ * data-theme attribute on the .rec-board / .rec-inspector root. Raw --rm3-*
+ * tokens live on the scoped roots; semantic --board-* aliases remap under
+ * [data-theme='dark']. EVERY component rule consumes ONLY --board-* aliases
+ * (never --rm3-* directly). Idempotent injection; disposer removes the element.
  */
 /**
  * Inject the board/inspector stylesheet once. Idempotent: if a <style

package/lib/client/theme.d.ts

@@ -0,0 +1,20 @@
+export declare const BOARD_THEME_STORAGE_KEY = "dsh-recursive-theme";
+export type BoardTheme = 'light' | 'dark';
+export interface BoardThemeState {
+    theme: BoardTheme;
+    toggle: () => void;
+}
+/**
+ * Hoisted at the TOP of Board and Inspector (never after an early return — run
+ * 0.1.10 invariant). Defaults light, reads a persisted dark on init, and writes
+ * the chosen theme back to localStorage.
+ */
+export declare function useBoardTheme(): BoardThemeState;
+/** The shared header toggle button (moon in light, sun in dark). */
+export declare function ThemeToggle({ theme, toggle }: BoardThemeState): import("react").DetailedReactHTMLElement<{
+    type: string;
+    className: string;
+    onClick: () => void;
+    title: string;
+    'aria-label': string;
+}, HTMLElement>;