@danielng23/dsh-studio-client-ui-edex 0.1.0

package/lib/index.js

@@ -0,0 +1,77 @@
+import { settingsNamespace } from "@deepseek-ai/dsh-settings";
+import z from "@deepseek-ai/schemastery";
+//#region src/settings.ts
+/**
+* eDEX theme-color setting: the single durable accent that drives both the
+* shell frame's palette (`--edex-*`) and the terminal token override layer
+* over the original UI (`--dsw-alias-*`). One color in, a full CRT family
+* out — primary, dim midtone, dark border, and a faint tinted panel tone —
+* while the semantic accents (amber warn, red error, cyan info) stay fixed.
+* Shared by the Host loader entry (schema registration) and the browser half
+* (scope binding, token overrides, and the settings row).
+*/
+/** Settings namespace owned by the eDEX shell plugin. */
+const EDEX_SETTINGS_NAMESPACE = "ui-edex";
+/** Field carrying the selected theme color. */
+const THEME_COLOR_FIELD = "themeColor";
+/** The default theme color — the LateNight console's amber/gold VU accent. */
+const DEFAULT_THEME_COLOR = "#f0bb2b";
+/** Durable theme-color schema; also the wire envelope the browser scope validates against. */
+const EdexSettingsSchema = z.object({ [THEME_COLOR_FIELD]: z.string().default(DEFAULT_THEME_COLOR) });
+Object.freeze([
+	{
+		id: "analyzed",
+		labelKey: "edex.preset.analyzed",
+		color: "#f0bb2b"
+	},
+	{
+		id: "terminal",
+		labelKey: "edex.preset.terminal",
+		color: "#46f282"
+	},
+	{
+		id: "amber",
+		labelKey: "edex.preset.amber",
+		color: "#e6c85c"
+	},
+	{
+		id: "cyan",
+		labelKey: "edex.preset.cyan",
+		color: "#5ad1e0"
+	},
+	{
+		id: "violet",
+		labelKey: "edex.preset.violet",
+		color: "#c792ea"
+	}
+]);
+Object.freeze({
+	amber: "#f0bb2b",
+	red: "#d00000",
+	cyan: "#00c8ff",
+	led: "#159a43",
+	blue: "#1767d8"
+});
+Object.freeze({
+	canvas: "#0e0e0e",
+	card: "#1b1b1c",
+	inset: "#101010",
+	border: "#3c3c3c",
+	divider: "#2a2a2a",
+	titleStrip: "#242424"
+});
+//#endregion
+//#region src/index.ts
+/**
+* Register the durable theme-color section when the settings service is
+* composed. The browser half binds a scope to this namespace, so the user's
+* Theme Color choice persists in the user-settings document.
+* @param ctx - Host context that may acquire the settings service.
+*/
+function apply(ctx) {
+	ctx.inject(["settings"], (settingsCtx) => {
+		settingsCtx.settings.register(settingsNamespace(EDEX_SETTINGS_NAMESPACE), EdexSettingsSchema);
+	});
+}
+//#endregion
+export { apply };

package/lib/types/client/bottom-panel/BottomPanel.d.ts

@@ -0,0 +1,10 @@
+import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots';
+import type { FilesState } from '../shared/types.ts';
+/** The bottom-left content (rendered inside the eDEX shell's bottom-left cell). */
+export declare function BottomPanel({ useFiles, refresh, navigate, selectFile, }: {
+    useFiles: SnapshotSelectorHook<FilesState>;
+    refresh: () => void;
+    navigate: (name: string) => void;
+    selectFile: (name: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=BottomPanel.d.ts.map

package/lib/types/client/bottom-panel/EditorPane.d.ts

@@ -0,0 +1,12 @@
+import type { EditorStatus } from '../shared/types.ts';
+export declare function EditorPane({ path, content, readOnly, editor, onMarkDirty, onSave, onDiscard, onCancelDiscard, }: {
+    path: string;
+    content: string;
+    readOnly: boolean;
+    editor: EditorStatus;
+    onMarkDirty: () => void;
+    onSave: (content: string) => void;
+    onDiscard: () => void;
+    onCancelDiscard: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=EditorPane.d.ts.map

package/lib/types/client/bottom-panel/PreviewPane.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Bottom-right preview pane: renders the file selected in the bottom-left
+ * browser — text files open a vim-capable CodeMirror editor (see EditorPane),
+ * images and videos render from their data: payloads, and a message shows for
+ * everything else. Empty until a file is selected.
+ */
+import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots';
+import type { FilesState } from '../shared/types.ts';
+/** The bottom-right content (rendered inside the eDEX shell's bottom-right cell). */
+export declare function PreviewPane({ useFiles, markDirty, saveEditor, confirmDiscard, cancelDiscard, }: {
+    useFiles: SnapshotSelectorHook<FilesState>;
+    /** Mark the open buffer dirty (called by the editor on doc changes). */
+    markDirty: () => void;
+    /** Persist the editor buffer through the host `writeFile` Remote. */
+    saveEditor: (content: string) => void;
+    /** Discard the dirty buffer and continue the paused navigation. */
+    confirmDiscard: () => void;
+    /** Keep the dirty buffer and cancel the paused navigation. */
+    cancelDiscard: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PreviewPane.d.ts.map

package/lib/types/client/bottom-panel/TerminalPanel.d.ts

@@ -0,0 +1,10 @@
+import type { CommandResult } from '@danielng23/dsh-studio-host-system-metrics/types';
+export interface TerminalPanelProps {
+    /** Run one shell command on the host (`systemMetrics.runCommand`). */
+    runCommand: (command: string) => Promise<CommandResult>;
+    /** The initial directory (the host process cwd); '/ 'when unknown. */
+    initialCwd?: string | undefined;
+}
+/** The bottom-right content (rendered inside the eDEX shell's bottom-right cell). */
+export declare function TerminalPanel({ runCommand, initialCwd }: TerminalPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=TerminalPanel.d.ts.map

package/lib/types/client/frame/EdexShell.d.ts

@@ -0,0 +1,47 @@
+import type { InjectFace } from '@deepseek-ai/dsh-client-ui-slots';
+import type { SessionListState, WorkspaceListState } from '@deepseek-ai/dsh-client-runtime/client';
+import type { CommandResult } from '@danielng23/dsh-studio-host-system-metrics/types';
+import type { FilesState, NetworkSnapshot, ObservableSource, PanelSnapshot } from '../shared/types.ts';
+import '../theme/TerminalComposer.module.css';
+import '../theme/TerminalSidebar.module.css';
+import '../theme/ConversationScrollbar.module.css';
+import '../theme/TerminalToolRows.module.css';
+/** The frame region the original UI is squeezed into (grid-column track of the viewport). */
+export declare const CENTER_LEFT = "17vw";
+export declare const CENTER_RIGHT = "21.25vw";
+export declare const CENTER_BOTTOM = "36vh";
+/** The shell entry's inject face: panel actions plus the four hook seats. */
+export interface EdexShellInjected {
+    /** Fetch storage + the current directory listing. */
+    refreshFiles: () => void;
+    /** Navigate into a directory (or '..' up). */
+    navigateFiles: (name: string) => void;
+    /** Select a file in the current directory (highlights the list row). */
+    selectFile: (name: string) => void;
+    /** Mark the open editor buffer dirty (called by the editor on doc changes). */
+    markDirty: () => void;
+    /** Persist the editor buffer through the host `writeFile` Remote. */
+    saveEditor: (content: string) => void;
+    /** Discard the dirty buffer and continue the paused navigation. */
+    confirmDiscard: () => void;
+    /** Keep the dirty buffer and cancel the paused navigation. */
+    cancelDiscard: () => void;
+    /** Run one shell command on the host for the bottom-right terminal. */
+    runCommand: (command: string) => Promise<CommandResult>;
+    hooks: {
+        panel: ObservableSource<PanelSnapshot>;
+        network: ObservableSource<NetworkSnapshot>;
+        files: ObservableSource<FilesState>;
+        /** Workspace list snapshot — feeds the terminal path prompt at the input's left edge. */
+        workspaces: ObservableSource<WorkspaceListState>;
+        /** Session list snapshot — the prompt follows the ACTIVE conversation's workspace. */
+        sessions: ObservableSource<SessionListState>;
+        /** Current theme color (the user's Settings → General → Theme Color pick). */
+        themeColor: ObservableSource<string>;
+    };
+}
+/** Full composed props of the shell entry (hooks arrive as `use*` selector hooks). */
+export type EdexShellProps = InjectFace<EdexShellInjected>;
+/** The full eDEX frame: left/right bars + bottom cells around the original UI. */
+export declare function EdexShell({ usePanel, useNetwork, useFiles, useWorkspaces, useSessions, useThemeColor, refreshFiles, navigateFiles, selectFile, markDirty, saveEditor, confirmDiscard, cancelDiscard, runCommand, }: EdexShellProps): import("react").JSX.Element;
+//# sourceMappingURL=EdexShell.d.ts.map

package/lib/types/client/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * eDEX shell plugin, browser half: mounts the `systemMetrics` Host Remote
+ * contribution, runs one shared overview poller (left system panel + right
+ * network panel), and registers the shell frame into the root `shell.overlay`
+ * list slot. The user's Theme Color setting (Settings → General → Theme
+ * Color) drives one palette shared by the shell frame (`--edex-*` inline on
+ * the shell root) and a token override layer over the original UI
+ * (`--dsw-alias-*` on body) — icons included. Purely additive — the default
+ * surface stays composed, and the frame only reshapes it visually (restored
+ * on unload).
+ */
+import type { Context } from '@deepseek-ai/cordis';
+/** Required services: the slot registry, the theme service, the sessions and workspaces runtimes, the locale and settings transport, and the Remote carrier (namespace mounted in apply). */
+export declare const inject: string[];
+/**
+ * Client plugin body: mount the systemMetrics contribution, start the shared
+ * poller, apply the theme-color override layer, and register the shell frame
+ * and the Theme Color settings row.
+ * @param ctx - client root context.
+ * @returns disposer that unmounts the Remote namespace on unload.
+ */
+export declare function apply(ctx: Context): Promise<() => Promise<void>>;
+//# sourceMappingURL=index.d.ts.map

package/lib/types/client/left-bar/LeftBar.d.ts

@@ -0,0 +1,7 @@
+import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots';
+import type { PanelSnapshot } from '../shared/types.ts';
+/** The left column content (rendered inside the eDEX shell's left bar). */
+export declare function LeftBar({ usePanel }: {
+    usePanel: SnapshotSelectorHook<PanelSnapshot>;
+}): import("react").JSX.Element;
+//# sourceMappingURL=LeftBar.d.ts.map

package/lib/types/client/right-bar/RightBar.d.ts

@@ -0,0 +1,8 @@
+import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots';
+import type { NetworkSnapshot } from '../shared/types.ts';
+/** The right column content (rendered inside the eDEX shell's right bar). */
+export declare function RightBar({ useNetwork, color }: {
+    useNetwork: SnapshotSelectorHook<NetworkSnapshot>;
+    color: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=RightBar.d.ts.map

package/lib/types/client/settings/ThemeColorRow.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Theme Color settings row, registered into the General section item slot: the
+ * label plus a swatch row of presets and a native color input for a custom
+ * accent. Selecting a swatch (or picking a color) writes the themeColor field
+ * through the eDEX settings scope; the current value rides the inject face's
+ * observable hook, so the row stays in step with every change — including
+ * ones made in the Host document while the dialog is open.
+ */
+import type { InjectFace, PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+import type { ObservableSource } from '../shared/types.ts';
+/** The row's inject face: the write plus the current-color hook source. */
+export interface ThemeColorRowInjected {
+    /** Persist one theme color (scope.set('themeColor', color)). */
+    setColor: (color: string) => void;
+    /** Bare observable "current theme color" source bound to useColor. */
+    hooks: {
+        color: ObservableSource<string>;
+    };
+}
+/** Full composed props of the row. */
+export type ThemeColorRowProps = PropsLocale<'settings.edex'> & InjectFace<ThemeColorRowInjected>;
+/** The Theme Color row: label + presets + custom picker. */
+export declare function ThemeColorRow({ useColor, setColor, t }: ThemeColorRowProps): import("react").JSX.Element;
+//# sourceMappingURL=ThemeColorRow.d.ts.map

package/lib/types/client/settings/locales.d.ts

@@ -0,0 +1,32 @@
+/** `settings.edex` namespace dictionaries (the Theme Color row's copy). */
+/** Dictionary namespace owned by the eDEX shell plugin. */
+export declare const NS = "settings.edex";
+/** Simplified Chinese dictionary (the key-set source of truth). */
+export declare const zh: {
+    'edex.themeColor': string;
+    'edex.custom': string;
+    'edex.preset.terminal': string;
+    'edex.preset.amber': string;
+    'edex.preset.cyan': string;
+    'edex.preset.violet': string;
+    'edex.preset.blue': string;
+};
+/** The settings.edex namespace key union. */
+export type EdexThemeKey = keyof typeof zh;
+/** English dictionary, checked complete against the zh key set. */
+export declare const en: {
+    'edex.themeColor': string;
+    'edex.custom': string;
+    'edex.preset.terminal': string;
+    'edex.preset.amber': string;
+    'edex.preset.cyan': string;
+    'edex.preset.violet': string;
+    'edex.preset.blue': string;
+};
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+    interface LocaleNamespaceMap {
+        /** The eDEX Theme Color settings row's copy. */
+        'settings.edex': EdexThemeKey;
+    }
+}
+//# sourceMappingURL=locales.d.ts.map

package/lib/types/client/shared/files.d.ts

@@ -0,0 +1,28 @@
+import type { FilesState, ObservableSource, SystemMetricsRemote } from './types.ts';
+/** Lists directories, tracks the storage indicator, and owns editor saves. */
+export declare class FilesController {
+    private readonly remote;
+    private readonly source;
+    private currentPath;
+    private pending;
+    constructor(remote: SystemMetricsRemote);
+    /** Bare observable files state source bound to the `useFiles` hook. */
+    get files(): ObservableSource<FilesState>;
+    /** Fetch storage + list the current (or first) directory. */
+    refresh(): Promise<void>;
+    /** List one directory and remember it as current. A dirty editor pauses the navigation. */
+    list(path: string): Promise<void>;
+    /** Navigate into a directory entry (or up for '..'). */
+    navigate(name: string): void;
+    /** Select a file in the current directory and load its preview (or the editor for text). */
+    selectFile(name: string): Promise<void>;
+    /** Mark the open buffer dirty (called by the editor on every doc change). */
+    markDirty(): void;
+    /** Persist the editor buffer through the `writeFile` Remote. */
+    saveEditor(content: string): Promise<void>;
+    /** Discard the dirty buffer and run the paused navigation. */
+    confirmDiscard(): void;
+    /** Keep the dirty buffer and drop the paused navigation. */
+    cancelDiscard(): void;
+}
+//# sourceMappingURL=files.d.ts.map

package/lib/types/client/shared/monitor.d.ts

@@ -0,0 +1,29 @@
+import type { NetworkSnapshot, ObservableSource, PanelSnapshot, SystemMetricsRemote } from './types.ts';
+/** Poll cadence for the system overview. */
+export declare const POLL_INTERVAL_MS = 2000;
+/**
+ * Polls the overview Remote and derives the panel + network snapshots.
+ */
+export declare class EdexPoller {
+    private readonly remote;
+    private readonly intervalMs;
+    private readonly panelSource;
+    private readonly networkSource;
+    private timer;
+    private previousCores;
+    private history;
+    private previousTraffic;
+    private upHistory;
+    private downHistory;
+    constructor(remote: SystemMetricsRemote, intervalMs?: number);
+    /** Bare observable panel snapshot source bound to the `usePanel` hook. */
+    get panel(): ObservableSource<PanelSnapshot>;
+    /** Bare observable network snapshot source bound to the `useNetwork` hook. */
+    get network(): ObservableSource<NetworkSnapshot>;
+    /** Start polling; the first overview is fetched immediately. */
+    start(): void;
+    /** Stop polling; the last snapshots stay readable. */
+    stop(): void;
+    private poll;
+}
+//# sourceMappingURL=monitor.d.ts.map

package/lib/types/client/shared/tiles.d.ts

@@ -0,0 +1,17 @@
+/** One hexasphere tile as the encom globe's particle builder consumes it. */
+export interface GlobeTile {
+    lat: number;
+    lon: number;
+    b: readonly {
+        x: number;
+        y: number;
+        z: number;
+    }[];
+}
+/**
+ * Build the globe's hex-tile grid. Per-tile edge shrink varies slightly so
+ * the surface keeps the organic encom look instead of a uniform mesh.
+ * @returns tiles for the Globe `tiles` option.
+ */
+export declare function generateGlobeTiles(): GlobeTile[];
+//# sourceMappingURL=tiles.d.ts.map

package/lib/types/client/shared/types.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Shared client vocabulary for the eDEX shell: observable sources, the
+ * derived panel/network snapshots, the filesystem browser state, and the
+ * narrowed Remote face this plugin calls. All data originates from the
+ * `systemMetrics` Host Remote (host/system-metrics); the client only derives
+ * deltas and history.
+ */
+import type { RemoteResult } from '@deepseek-ai/dsh-typert-protocol';
+import type { CommandResult, DirectoryListing, FilePreview, HardwareInfo, NetworkInfo, ProcessSample, StorageInfo, SystemOverview, WriteResult } from '@danielng23/dsh-studio-host-system-metrics/types';
+export type { FilePreview };
+/** Bare observable snapshot source (getSnapshot + subscribe), the slot hooks seat. */
+export interface ObservableSource<T> {
+    getSnapshot(): T;
+    subscribe(listener: () => void): () => void;
+}
+/** The generated systemMetrics Remote face narrowed to what this plugin calls. */
+export interface SystemMetricsRemote {
+    overview: () => Promise<RemoteResult<SystemOverview>>;
+    listDirectory: (path: string) => Promise<RemoteResult<DirectoryListing>>;
+    readFile: (path: string) => Promise<RemoteResult<FilePreview>>;
+    writeFile: (path: string, content: string) => Promise<RemoteResult<WriteResult>>;
+    runCommand: (command: string) => Promise<RemoteResult<CommandResult>>;
+}
+/** Left-bar system telemetry snapshot (host overview + client-derived deltas/history). */
+export interface PanelSnapshot {
+    readonly ok: boolean;
+    readonly timestamp: number;
+    readonly platform: string;
+    readonly uptimeSeconds: number;
+    readonly loadavg: readonly [number, number, number];
+    readonly memoryUsedGiB: number;
+    readonly memoryTotalGiB: number;
+    readonly swapUsedGiB: number;
+    readonly swapTotalGiB: number;
+    /** Current per-core busy percentage (0..100), one per logical core. */
+    readonly cpuBusy: readonly number[];
+    /** Per-core sparkline history (0..100), one array per logical core. */
+    readonly cpuHistory: readonly (readonly number[])[];
+    /** Min/max of the current per-core busy percentages. */
+    readonly cpuMin: number;
+    readonly cpuMax: number;
+    readonly thermalLevel: number | null;
+    readonly powerState: string | null;
+    readonly hardware: HardwareInfo;
+    readonly tasks: number;
+    /** Top processes by CPU, descending (capped at ten). */
+    readonly processes: readonly ProcessSample[];
+}
+/** Right-bar network snapshot (interface status + derived traffic history). */
+export interface NetworkSnapshot {
+    readonly ok: boolean;
+    readonly network: NetworkInfo;
+    /** Recent up/down throughput samples in MB/s (oldest first). */
+    readonly upHistory: readonly number[];
+    readonly downHistory: readonly number[];
+    readonly upMbs: number;
+    readonly downMbs: number;
+}
+/** Bottom-left filesystem browser state. */
+export interface FilesState {
+    readonly path: string;
+    readonly entries: readonly {
+        readonly name: string;
+        readonly isDirectory: boolean;
+    }[];
+    readonly storage: StorageInfo;
+    readonly error: string | null;
+    readonly phase: 'loading' | 'ready';
+    /** Currently selected file name (for the bottom-right preview), or null. */
+    readonly selected: string | null;
+    /** Preview payload of the selected file, or null while none is selected. */
+    readonly preview: FilePreview | null;
+    /** Bottom-right editor status (buffer content lives in the editor itself). */
+    readonly editor: EditorStatus;
+}
+/**
+ * Bottom-right editor status surfaced to the shell. The buffer CONTENT lives
+ * in the CodeMirror view (never re-rendered through React); this slice only
+ * carries the save-related state the shell needs for the status bar and the
+ * navigation discard guard.
+ */
+export interface EditorStatus {
+    /** Open file path, or null when no editor is open. */
+    readonly path: string | null;
+    /** Whether the buffer has unsaved changes. */
+    readonly dirty: boolean;
+    /** Truncated (or otherwise read-only) files cannot be saved. */
+    readonly readOnly: boolean;
+    /** True while a save request is in flight. */
+    readonly saving: boolean;
+    /** Last save error (cleared on success); null while clean. */
+    readonly error: string | null;
+    /** Last successful save (wall-clock ms + bytes written); null until one happens. */
+    readonly savedAt: {
+        readonly at: number;
+        readonly sizeBytes: number;
+    } | null;
+    /** True while the shell asks to discard the dirty buffer before navigating. */
+    readonly pendingDiscard: boolean;
+}
+/** Empty editor status (no editor open). */
+export declare const EMPTY_EDITOR: EditorStatus;
+/** Empty snapshot values rendered before the first successful overview. */
+export declare const EMPTY_PANEL: PanelSnapshot;
+/** Empty snapshot values rendered before the first successful overview. */
+export declare const EMPTY_NETWORK: NetworkSnapshot;
+/** Empty snapshot values rendered before the first successful overview. */
+export declare const EMPTY_FILES: FilesState;
+//# sourceMappingURL=types.d.ts.map

package/lib/types/index.d.ts

@@ -0,0 +1,10 @@
+/** Host loader entry for the eDEX shell plugin. */
+import type { Context } from '@deepseek-ai/cordis';
+/**
+ * Register the durable theme-color section when the settings service is
+ * composed. The browser half binds a scope to this namespace, so the user's
+ * Theme Color choice persists in the user-settings document.
+ * @param ctx - Host context that may acquire the settings service.
+ */
+export declare function apply(ctx: Context): void;
+//# sourceMappingURL=index.d.ts.map

package/lib/types/settings.d.ts

@@ -0,0 +1,75 @@
+/**
+ * eDEX theme-color setting: the single durable accent that drives both the
+ * shell frame's palette (`--edex-*`) and the terminal token override layer
+ * over the original UI (`--dsw-alias-*`). One color in, a full CRT family
+ * out — primary, dim midtone, dark border, and a faint tinted panel tone —
+ * while the semantic accents (amber warn, red error, cyan info) stay fixed.
+ * Shared by the Host loader entry (schema registration) and the browser half
+ * (scope binding, token overrides, and the settings row).
+ */
+import z from '@deepseek-ai/schemastery';
+import type { ThemeTokenOverrides } from '@deepseek-ai/dsh-client-ui-theme/client';
+/** Settings namespace owned by the eDEX shell plugin. */
+export declare const EDEX_SETTINGS_NAMESPACE = "ui-edex";
+/** Field carrying the selected theme color. */
+export declare const THEME_COLOR_FIELD = "themeColor";
+/** The default theme color — the classic terminal green. */
+export declare const DEFAULT_THEME_COLOR = "#46f282";
+/** Durable theme-color section shared by the Host schema and the browser scope. */
+export interface EdexSettings {
+    /** The accent color driving the whole eDEX palette. */
+    themeColor: string;
+}
+/** Durable theme-color schema; also the wire envelope the browser scope validates against. */
+export declare const EdexSettingsSchema: z<EdexSettings>;
+/** One selectable preset swatch. */
+export interface ThemeColorPreset {
+    /** Stable preset id (the swatch key). */
+    id: string;
+    /** Locale key for the swatch's accessible name. */
+    labelKey: string;
+    /** The accent color this preset applies. */
+    color: string;
+}
+/** Preset swatches offered in the Theme Color settings row. */
+export declare const THEME_COLOR_PRESETS: readonly ThemeColorPreset[];
+/** The semantic accents that stay fixed across theme colors. */
+export declare const FIXED_ACCENTS: Readonly<{
+    amber: "#e6c85c";
+    red: "#e65a5a";
+    cyan: "#5ad1e0";
+}>;
+/** The full eDEX palette derived from one accent color. */
+export interface EdexPalette {
+    /** The primary accent (text, icons, fills). */
+    primary: string;
+    /** Muted midtone (secondary text, icon tints). */
+    dim: string;
+    /** Dark border tone. */
+    border: string;
+    /** Faint tinted panel background. */
+    panel2: string;
+}
+/** Normalize an #rgb/#rrggbb hex to lowercase #rrggbb, or null when invalid. */
+export declare function normalizeHex(value: string): string | null;
+/** Derive the full CRT family from one accent color. */
+export declare function paletteFor(color: string): EdexPalette;
+/** The eDEX shell frame's CSS variables for one palette (amber/red/cyan stay in the stylesheet). */
+export declare function shellVarsFor(palette: EdexPalette): Record<string, string>;
+/**
+ * The full `--edex-*` variable set for the ORIGINAL UI (the composer, sidebar,
+ * and conversation scrollbar live outside the shell frame, so the theme CSS
+ * resolves these from `body` — set there by the browser half, with the static
+ * accents joining the dynamic palette). The shell frame defines its own copy
+ * on `.shell` and overrides it inline, so the two never fight.
+ */
+export declare function bodyVarsFor(palette: EdexPalette): Record<string, string>;
+/**
+ * The token override layer that recolors the whole original UI — every label
+ * token that feeds icon glyphs included — from one palette. `label-tertiary`
+ * and `label-caption` are the specific tokens behind the small icons beside
+ * tool names (Bash / Read / Think / …) and their separators, so overriding
+ * them is what makes those glyphs theme-colored like every other icon.
+ */
+export declare function tokenOverridesFor(palette: EdexPalette): ThemeTokenOverrides;
+//# sourceMappingURL=settings.d.ts.map

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@danielng23/dsh-studio-client-ui-edex",
+  "description": "Studio console shell frame over the web client: VU meter left bar, deck waveform right bar, filesystem browser bottom-left, original UI centered (LateNight amber/gold theme)",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ph4310822/dsh-edex-studio-ui.git",
+    "directory": "packages/ui-edex"
+  },
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-api-remotes"
+      ],
+      "platform": "web"
+    }
+  },
+  "files": [
+    "lib/index.js",
+    "lib/client.js",
+    "lib/types/**/*.d.ts"
+  ],
+  "scripts": {
+    "bundle": "tsdown",
+    "watch": "tsdown --watch"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-markdown": "^6.3.1",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/legacy-modes": "^6.5.3",
+    "@replit/codemirror-vim": "^6.4.0",
+    "codemirror": "^6.0.2",
+    "react": "^18.2.0"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/dsh-api-remotes": "*",
+    "@deepseek-ai/dsh-client-locale": "*",
+    "@deepseek-ai/dsh-client-runtime": "*",
+    "@deepseek-ai/dsh-client-ui-layout": "*",
+    "@deepseek-ai/dsh-client-ui-settings": "*",
+    "@deepseek-ai/dsh-client-ui-slots": "*",
+    "@deepseek-ai/dsh-client-ui-theme": "*",
+    "@deepseek-ai/dsh-invariants": "*",
+    "@deepseek-ai/dsh-settings": "*",
+    "@deepseek-ai/dsh-typert-protocol": "*",
+    "@deepseek-ai/schemastery": "*",
+    "@deepseek-ai/cordis": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@danielng23/dsh-studio-host-system-metrics": "*"
+  },
+  "devDependencies": {
+    "@deepseek-ai/dsh-api-remotes": "*",
+    "@deepseek-ai/dsh-client-locale": "*",
+    "@deepseek-ai/dsh-client-runtime": "*",
+    "@deepseek-ai/dsh-client-ui-layout": "*",
+    "@deepseek-ai/dsh-client-ui-settings": "*",
+    "@deepseek-ai/dsh-client-ui-slots": "*",
+    "@deepseek-ai/dsh-client-ui-theme": "*",
+    "@deepseek-ai/dsh-invariants": "*",
+    "@deepseek-ai/dsh-typert-protocol": "*",
+    "@deepseek-ai/cordis": "*",
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@danielng23/dsh-studio-host-system-metrics": "*"
+  }
+}