sh3-core 0.3.1 → 0.4.1

package/dist/Shell.svelte

@@ -101,7 +101,7 @@
     height: 100%;
     width: 100%;
     position: relative;
-    background: var(--shell-bg);
+    background: var(--shell-grad-bg, var(--shell-bg));
     color: var(--shell-fg);
   }
 
@@ -110,7 +110,7 @@
     align-items: center;
     gap: var(--shell-pad-md);
     padding: 0 var(--shell-pad-md);
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     border-bottom: 1px solid var(--shell-border);
     user-select: none;
   }
@@ -123,7 +123,7 @@
   .shell-content {
     position: relative;
     overflow: hidden;
-    background: var(--shell-bg);
+    background: var(--shell-grad-bg, var(--shell-bg));
     min-width: 0;
     min-height: 0;
   }
@@ -132,7 +132,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 0 var(--shell-pad-md);
-    background: var(--shell-bg-sunken);
+    background: var(--shell-grad-bg-sunken, var(--shell-bg-sunken));
     border-top: 1px solid var(--shell-border);
     color: var(--shell-fg-muted);
     font-size: 11px;

package/dist/api.d.ts

@@ -21,3 +21,4 @@ export declare const capabilities: {
     readonly hotInstall: boolean;
 };
 export type { ServerShard, ServerShardContext } from './server-shard/types';
+export { setTokenOverrides, clearTokenOverrides, getTokenOverrides, } from './theme';

package/dist/api.js

@@ -43,3 +43,5 @@ export const capabilities = {
     /** Whether this target supports hot-installing packages via dynamic import from blob URL. */
     hotInstall: typeof Blob !== 'undefined' && typeof URL.createObjectURL === 'function',
 };
+// Theme token override API (shell-level theming support).
+export { setTokenOverrides, clearTokenOverrides, getTokenOverrides, } from './theme';

package/dist/createShell.js

@@ -10,6 +10,7 @@ import { mount } from 'svelte';
 import { Shell } from './index';
 import { registerShard, registerApp, bootstrap, __setBackend, setLocalOwner, } from './host';
 import { resolvePlatform } from './platform/index';
+import { hydrateTokenOverrides } from './theme';
 export async function createShell(config) {
     var _a, _b;
     // 1. Platform detection — must run before bootstrap so state zones
@@ -23,6 +24,9 @@ export async function createShell(config) {
     if (platform.localOwner) {
         setLocalOwner();
     }
+    // 1c. Apply persisted theme token overrides before any component mounts,
+    //     so the first frame renders with the user's chosen theme.
+    hydrateTokenOverrides();
     // 1b. Load server-discovered packages (fetched by frontend from /api/packages).
     if ((_a = config === null || config === void 0 ? void 0 : config.discoveredPackages) === null || _a === void 0 ? void 0 : _a.length) {
         const { loadBundleModule } = await import('./registry/loader');

package/dist/diagnostic/DiagnosticPanel.svelte

@@ -78,7 +78,7 @@
     inset: 0;
     padding: 12px 16px;
     overflow: auto;
-    background: var(--shell-bg);
+    background: var(--shell-grad-bg, var(--shell-bg));
     color: var(--shell-fg);
     font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
     font-size: 12px;

package/dist/diagnostic/DiagnosticRoutes.svelte

@@ -52,7 +52,7 @@
     inset: 0;
     padding: 12px 16px;
     overflow: auto;
-    background: var(--shell-bg);
+    background: var(--shell-grad-bg, var(--shell-bg));
     color: var(--shell-fg);
     font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
     font-size: 12px;

package/dist/layout/DragPreview.svelte

@@ -46,7 +46,7 @@
     align-items: center;
     gap: var(--shell-pad-sm);
     padding: var(--shell-pad-sm) var(--shell-pad-md);
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     color: var(--shell-fg);
     border: 1px solid var(--shell-accent);
     border-radius: 3px;

package/dist/layout/LayoutRenderer.svelte

@@ -186,10 +186,12 @@
       />
       {#snippet tabBody(i: number)}
         {@const entry = tabs.tabs[i]}
-        <div class="tab-slot-wrapper">
-          <SlotContainer node={{ type: 'slot', slotId: entry.slotId, viewId: entry.viewId }} label={entry.label} />
-          <SlotDropZone path={path} />
-        </div>
+        {#if entry}
+          <div class="tab-slot-wrapper">
+            <SlotContainer node={{ type: 'slot', slotId: entry.slotId, viewId: entry.viewId }} label={entry.label} />
+            <SlotDropZone path={path} />
+          </div>
+        {/if}
       {/snippet}
     {:else if tabs?.persistent}
       <div class="empty-tabs-placeholder">

package/dist/overlays/ModalFrame.svelte

@@ -73,7 +73,7 @@
     pointer-events: auto;
   }
   .modal-box {
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     color: var(--shell-fg);
     border: 1px solid var(--shell-border-strong);
     border-radius: 4px;

package/dist/overlays/PopupFrame.svelte

@@ -73,7 +73,7 @@
 <style>
   .popup-frame {
     position: absolute;
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     color: var(--shell-fg);
     border: 1px solid var(--shell-border-strong);
     border-radius: 3px;

package/dist/overlays/ToastItem.svelte

@@ -44,7 +44,7 @@
     align-items: center;
     gap: var(--shell-pad-md);
     padding: var(--shell-pad-sm) var(--shell-pad-md);
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     color: var(--shell-fg);
     border: 1px solid var(--shell-border-strong);
     border-left-width: 3px;

package/dist/primitives/ResizableSplitter.svelte

@@ -269,7 +269,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     border: none;
     color: var(--shell-fg-muted);
     cursor: pointer;

package/dist/primitives/TabbedPanel.svelte

@@ -206,7 +206,7 @@
     height: 100%;
     min-width: 0;
     min-height: 0;
-    background: var(--shell-bg);
+    background: var(--shell-grad-bg, var(--shell-bg));
   }
 
   .tab-strip {
@@ -214,7 +214,7 @@
     flex: 0 0 auto;
     display: flex;
     gap: 1px;
-    background: var(--shell-bg-sunken);
+    background: var(--shell-grad-bg-sunken, var(--shell-bg-sunken));
     border-bottom: 1px solid var(--shell-border);
     padding: 0 var(--shell-pad-sm);
     user-select: none;
@@ -243,11 +243,11 @@
   }
   .tab:hover {
     color: var(--shell-fg);
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
   }
   .tab.active {
     color: var(--shell-fg);
-    background: var(--shell-bg);
+    background: var(--shell-grad-bg, var(--shell-bg));
     border-top-color: var(--shell-accent);
   }
   .tab-icon { font-size: 11px; }

package/dist/shell-shard/ShellHome.svelte

@@ -136,7 +136,7 @@
     justify-content: flex-start;
     padding: 48px 24px;
     overflow: auto;
-    background: var(--shell-bg);
+    background: var(--shell-grad-bg, var(--shell-bg));
     color: var(--shell-fg);
     font-family: system-ui, sans-serif;
   }
@@ -196,7 +196,7 @@
     gap: 4px 16px;
     align-items: center;
     padding: 14px 18px;
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     border: 1px solid var(--shell-border);
     border-radius: 6px;
   }
@@ -250,7 +250,7 @@
   .shell-home-key-input {
     flex: 1;
     padding: 8px 12px;
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     color: var(--shell-fg);
     border: 1px solid var(--shell-border);
     border-radius: 4px;

package/dist/theme.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Apply CSS token overrides to :root and persist to User zone.
+ *
+ * Keys are token names without the `--` prefix (e.g. `'shell-accent'`).
+ * Values are any valid CSS value string.
+ *
+ * Calling this replaces ALL previous overrides — tokens not present in
+ * the new map are removed from :root.
+ */
+export declare function setTokenOverrides(overrides: Record<string, string>): void;
+/**
+ * Remove all token overrides from :root and clear persisted state.
+ * The shell reverts to the default tokens defined in tokens.css.
+ */
+export declare function clearTokenOverrides(): void;
+/**
+ * Read the currently persisted token overrides.
+ * Returns an empty object if no overrides are stored.
+ */
+export declare function getTokenOverrides(): Record<string, string>;
+/**
+ * Apply persisted token overrides to :root. Called once during shell boot
+ * before any component mounts, so the themed colors are visible from the
+ * first frame.
+ *
+ * This is framework-internal — not part of the shard-facing API.
+ */
+export declare function hydrateTokenOverrides(): void;

package/dist/theme.js

@@ -0,0 +1,92 @@
+/*
+ * Token override API — allows external packages (like sh3-style) to
+ * dynamically change shell CSS tokens and persist the selection to
+ * the User zone.
+ *
+ * The shell reads persisted overrides at boot (see createShell.ts) so
+ * themes survive page reloads. This module provides the write path.
+ */
+const STORAGE_KEY = 'sh3:user:__shell__:theme';
+/** Keys currently set on :root by setTokenOverrides, tracked for clearTokenOverrides. */
+let appliedKeys = [];
+/**
+ * Apply CSS token overrides to :root and persist to User zone.
+ *
+ * Keys are token names without the `--` prefix (e.g. `'shell-accent'`).
+ * Values are any valid CSS value string.
+ *
+ * Calling this replaces ALL previous overrides — tokens not present in
+ * the new map are removed from :root.
+ */
+export function setTokenOverrides(overrides) {
+    // Remove previously applied keys that are not in the new set
+    const newKeys = Object.keys(overrides);
+    for (const key of appliedKeys) {
+        if (!newKeys.includes(key)) {
+            document.documentElement.style.removeProperty(`--${key}`);
+        }
+    }
+    // Apply new overrides
+    for (const [key, value] of Object.entries(overrides)) {
+        document.documentElement.style.setProperty(`--${key}`, value);
+    }
+    appliedKeys = newKeys;
+    // Persist
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(overrides));
+    }
+    catch (_a) {
+        // Storage full or unavailable — theme applies for this session only
+    }
+}
+/**
+ * Remove all token overrides from :root and clear persisted state.
+ * The shell reverts to the default tokens defined in tokens.css.
+ */
+export function clearTokenOverrides() {
+    for (const key of appliedKeys) {
+        document.documentElement.style.removeProperty(`--${key}`);
+    }
+    appliedKeys = [];
+    try {
+        localStorage.removeItem(STORAGE_KEY);
+    }
+    catch (_a) {
+        // Ignore
+    }
+}
+/**
+ * Read the currently persisted token overrides.
+ * Returns an empty object if no overrides are stored.
+ */
+export function getTokenOverrides() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw)
+            return {};
+        const parsed = JSON.parse(raw);
+        if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) {
+            return parsed;
+        }
+        return {};
+    }
+    catch (_a) {
+        return {};
+    }
+}
+/**
+ * Apply persisted token overrides to :root. Called once during shell boot
+ * before any component mounts, so the themed colors are visible from the
+ * first frame.
+ *
+ * This is framework-internal — not part of the shard-facing API.
+ */
+export function hydrateTokenOverrides() {
+    const overrides = getTokenOverrides();
+    if (Object.keys(overrides).length === 0)
+        return;
+    for (const [key, value] of Object.entries(overrides)) {
+        document.documentElement.style.setProperty(`--${key}`, value);
+    }
+    appliedKeys = Object.keys(overrides);
+}

package/dist/tokens.css

@@ -11,6 +11,15 @@
   --shell-bg:            #1a1b1e;
   --shell-bg-elevated:   #22232a;
   --shell-bg-sunken:     #141518;
+
+  /*
+   * Gradient layer — undefined by default. When set (e.g. by sh3-style),
+   * surfaces use the gradient instead of the flat color via the fallback
+   * pattern: background: var(--shell-grad-bg, var(--shell-bg)).
+   * Do NOT declare these here — they must remain undefined for the
+   * CSS fallback to work.
+   */
+
   --shell-border:        #2e3038;
   --shell-border-strong: #3c3f4a;
 
@@ -66,7 +75,7 @@ body {
   padding: 0;
   height: 100%;
   overflow: hidden; /* SH3 is a shell, not a scrollable document */
-  background: var(--shell-bg);
+  background: var(--shell-grad-bg, var(--shell-bg));
   color: var(--shell-fg);
   font-family: var(--shell-font-ui);
   font-size: var(--shell-font-size);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh3-core",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "type": "module",
   "files": [
     "dist"