dsh-theme-gallery 0.1.2

package/lib/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Type surface of the theme pack's host half.
+ */
+import type { Context } from '@deepseek-ai/cordis'
+
+/** Display name used in loader diagnostics. */
+export declare const name: string
+
+/**
+ * Host plugin body: intentionally empty — the pack contributes browser-side
+ * themes only.
+ * @param ctx - host context.
+ */
+export declare function apply(ctx: Context): void

package/lib/index.js

@@ -0,0 +1,178 @@
+/**
+ * Host half of the theme pack.
+ *
+ * This half registers the `theme-gallery` settings namespace — **a reserved
+ * extension point that nothing reads today.** It is kept, and kept honest:
+ *
+ * - The desktop profile composes its settings provider as `path: ':memory:'`, so
+ *   a hand-written `$DSH_HOME/settings.yaml` is archived as `settings.yaml.imported`
+ *   and never consulted. A person who follows an older revision of this README and
+ *   writes themes into that file will see nothing happen.
+ * - The browser half no longer reads this section either: themes are registered
+ *   with `ctx.theme.register`, and the bundled `lib/themes/*.json` list is the
+ *   only source. Selection is persisted by the theme service itself.
+ *
+ * What remains is the landing place for a **file-backed** settings provider: the
+ * schema below is what such a provider would validate, so the shape is pinned and
+ * tested even though no runner consumes it yet.
+ *
+ * Registered with no schema `default`, deliberately: a fresh settings document then
+ * stays free of the section rather than being pre-populated with the bundled list.
+ *
+ * The bundled files are validated at build time (`npm run check`), not here — the
+ * browser half is the side that turns them into real themes, and it ships them
+ * inlined.
+ */
+import z from '@deepseek-ai/schemastery'
+
+/** Settings namespace owning the theme definitions. */
+export const THEME_GALLERY_NAMESPACE = 'theme-gallery'
+
+/** Color schemes accepted as a theme's base palette. */
+export const COLOR_SCHEMES = ['light', 'dark']
+
+/**
+ * One token override: both schemes are mandatory because the same definition is
+ * reused when the user flips the color scheme, and a single value would then go
+ * illegible. The theme service throws a TypeError on a bare string.
+ *
+ * `required()` is explicit: schemastery treats object members as optional by
+ * default, so an omitted `dark` would otherwise sail through the settings
+ * boundary and only fail later, in the browser, as a registration error.
+ */
+export const TokenModesSchema = z.object({
+  light: z.string().required().description('Value applied while the light base palette is active.'),
+  dark: z.string().required().description('Value applied while the dark base palette is active.'),
+})
+
+/**
+ * The reading state: what a theme looks like once a conversation has messages.
+ *
+ * The whole point of a skin is that it covers the screen — which is also what
+ * makes a long conversation tiring to read. So a theme may declare how it
+ * recedes: the card the transcript sits on, and how strongly it reads over the
+ * theme fill. `bg` is lightened toward white while light, so a gradient or
+ * tinted fill still shows around the card instead of being painted over.
+ */
+export const ReadingSchema = z.object({
+  colorScheme: z.union([...COLOR_SCHEMES]).required()
+    .description('Color scheme the transcript card is rendered in.'),
+  bg: z.string().required()
+    .description('Card base color; lightened toward white at `alpha`.'),
+  alpha: z.number().required().min(0).max(1)
+    .description('How opaque the card is over the theme fill. Higher reads better; lower keeps the skin visible.'),
+  blur: z.number().required().min(0).max(40)
+    .description('Backdrop blur in px behind the card.'),
+  maxWidth: z.number().required().min(320).max(1600)
+    .description('Transcript column width in px while reading.'),
+})
+
+/**
+ * Sidebar scenery a theme may ask for.
+ *
+ * The value is a data key rather than an asset path: the browser half renders each
+ * kind from inline SVG ported from the source admin system, so only the scenes it
+ * actually carries are addressable. A theme without this field draws nothing —
+ * the scenery belongs to the skin, not to the app.
+ */
+export const AmbientSchema = z.object({
+  kind: z.union(['shan', 'dream']).required()
+    .description('Which ported scene to draw: "shan" is 山青婷彩, "dream" is 梦海游鱼.'),
+  petals: z.number().min(0).max(20)
+    .description('"shan" only: how many falling petals to seed.'),
+  bubbles: z.number().min(0).max(24)
+    .description('"dream" only: how many pale outlined bubbles to seed.'),
+  // The motes and the fish are SEPARATE effects from the bubbles, drawn at the same time, so
+  // each gets its own count rather than sharing one.
+  motes: z.number().min(0).max(24)
+    .description('"dream" only: how many light-blue glowing motes to seed.'),
+  fish: z.number().min(0).max(6)
+    .description('"dream" only: how many cartoon fish to swim across the water.'),
+})
+
+/**
+ * One selectable theme.
+ *
+ * Every member is explicitly required — schemastery's default is optional, and a
+ * theme missing `label` or `tokens` must be refused at the settings boundary, not
+ * discovered later as a blank button or a crash in the browser.
+ *
+ * `label`, `description`, `reading`, `accent` and `ambient` are extensions beyond
+ * the official `ThemeDefinition` (which carries only id/colorScheme/tokens): the
+ * official Appearance row localizes its three hard-coded cubes and never reads a
+ * theme name, so a third-party picker has to carry its own. The theme service
+ * validates only `tokens`, so the extra fields are inert at runtime.
+ */
+export const ThemeDefinitionSchema = z.object({
+  id: z.string()
+    .required()
+    .pattern(/^[a-z0-9][a-z0-9-]*$/)
+    .description('Stable theme id, also the string passed to ctx.theme.setTheme. "system" is reserved.'),
+  label: z.string().required().description('Name shown on the theme button in Settings.'),
+  description: z.string().required().description('One-line description shown as the button tooltip.'),
+  colorScheme: z.union([...COLOR_SCHEMES]).required().description('Base palette the overrides sit on top of.'),
+  tokens: z.dict(TokenModesSchema)
+    .required()
+    .description('Alias-token overrides keyed by --dsw-alias-* variable name.'),
+  reading: ReadingSchema
+    .description('Optional reading-state treatment; a theme without one never lightens.'),
+  accent: z.string()
+    .pattern(/^#[0-9a-fA-F]{6}$/)
+    .description('Marker colour for the active workspace / conversation states. Composed with an alpha suffix, so a 6-digit hex literal is required.'),
+  ambient: AmbientSchema
+    .description('Optional sidebar scenery; a theme without one draws nothing.'),
+})
+
+/**
+ * Durable theme-gallery section: the user's own themes, absent until they add one.
+ * A user theme reusing a bundled id replaces that bundled theme.
+ */
+export const ThemeGallerySchema = z.object({
+  themes: z.array(ThemeDefinitionSchema)
+    .description('Themes to register on top of the bundled defaults.'),
+})
+
+/** Display name used in loader diagnostics. */
+export const name = 'theme-gallery'
+
+/**
+ * The host half is deliberately INERT.
+ *
+ * ── WHY THERE IS NO `apply` THAT RESERVES A SETTINGS SECTION ─────────────────
+ *
+ * This module used to do:
+ *
+ *     ctx.inject(['settings'], (settingsCtx) => {
+ *       settingsCtx.settings.register(THEME_GALLERY_NAMESPACE, ThemeGallerySchema)
+ *     })
+ *
+ * That single call twice stopped the desktop application from starting, and both times it
+ * reported as `dsh-theme-gallery: pending (waiting for service: settingsScope)` in the crash
+ * log — a boot hang with no exception, which reads like a model or network fault.
+ *
+ * `settingsScope` is a service the CLIENT half provides: the official
+ * `@deepseek-ai/dsh-client-ui-theme` lists it in its own `inject` and calls
+ * `ctx.settingsScope.bind({ namespace: 'ui-theme' })`. A host-side module cannot reach it by
+ * name, so the deferred callback never ran and its fiber never settled — and the shell waits
+ * for every fiber before it leaves "Loading plugins...".
+ *
+ * The section was also pointless: nothing has ever read it. Themes are registered through
+ * `ctx.theme.register` in the browser half, and selection is persisted by the theme service
+ * itself under its own namespace. So this half now contributes nothing to the running app,
+ * and the schemas below are exported only as the validated contract for the bundled
+ * `lib/themes/*.json` files (see `npm run check`).
+ *
+ * ── DO NOT ADD A SERVICE WAIT HERE ───────────────────────────────────────────
+ *
+ * Anything added to this module must be SYNCHRONOUS and must not wait on a service. If a
+ * host-side service is genuinely needed later, it has to be declared in the package's own
+ * composition so it is provided before this row activates — never requested from inside a
+ * deferred callback that can leave the fiber pending. See tests/check-boot-safety.mjs, which
+ * fails if this half starts depending on `settings`, `settingsScope`, `configForms` or
+ * `remote`.
+ *
+ * @param ctx - host context; unused, and deliberately so.
+ */
+export function apply(ctx) {
+  void ctx
+}

package/lib/themes/meng-hai-you-yu.json

@@ -0,0 +1,292 @@
+[
+  {
+    "id": "meng-hai-you-yu",
+    "label": "梦海游鱼",
+    "description": "梦幻海洋，游鱼作伴 —— 复刻自电商新零售系统管理后台的默认主题",
+    "colorScheme": "light",
+    "tokens": {
+      "--dsw-alias-bg-base": {
+        "light": "linear-gradient(to bottom,#F7FBFF 0%,#EDF5FD 55%,#E2EEFA 100%)",
+        "dark": "linear-gradient(to bottom,#F7FBFF 0%,#EDF5FD 55%,#E2EEFA 100%)"
+      },
+      "--dsw-alias-bg-layer-1": {
+        "light": "#FBFDFF",
+        "dark": "#FBFDFF"
+      },
+      "--dsw-alias-bg-layer-2": {
+        "light": "#FFFFFF",
+        "dark": "#FFFFFF"
+      },
+      "--dsw-alias-bg-layer-3": {
+        "light": "#FFFFFF",
+        "dark": "#FFFFFF"
+      },
+      "--dsw-alias-bg-overlay": {
+        "light": "#E1EFFB",
+        "dark": "#E1EFFB"
+      },
+      "--dsw-alias-bg-skeleton": {
+        "light": "#177CB014",
+        "dark": "#177CB014"
+      },
+      "--dsw-alias-bg-module-platform": {
+        "light": "#E0EFFB",
+        "dark": "#E0EFFB"
+      },
+      "--dsw-alias-bg-multi-select": {
+        "light": "#E0EFFB",
+        "dark": "#E0EFFB"
+      },
+      "--dsw-alias-border-l1": {
+        "light": "#177CB00F",
+        "dark": "#177CB00F"
+      },
+      "--dsw-alias-border-l2": {
+        "light": "#177CB021",
+        "dark": "#177CB021"
+      },
+      "--dsw-alias-border-l3": {
+        "light": "#177CB02E",
+        "dark": "#177CB02E"
+      },
+      "--dsw-alias-border-l4": {
+        "light": "#177CB03D",
+        "dark": "#177CB03D"
+      },
+      "--dsw-alias-brand-primary": {
+        "light": "#177CB0",
+        "dark": "#177CB0"
+      },
+      "--dsw-alias-brand-primary-invert": {
+        "light": "#FFFFFF",
+        "dark": "#FFFFFF"
+      },
+      "--dsw-alias-brand-text": {
+        "light": "#177CB0",
+        "dark": "#177CB0"
+      },
+      "--dsw-alias-label-primary": {
+        "light": "#16384F",
+        "dark": "#16384F"
+      },
+      "--dsw-alias-label-primary-bluish": {
+        "light": "#16384F",
+        "dark": "#16384F"
+      },
+      "--dsw-alias-label-secondary": {
+        "light": "#2E4A63",
+        "dark": "#2E4A63"
+      },
+      "--dsw-alias-label-tertiary": {
+        "light": "#5A7B96",
+        "dark": "#5A7B96"
+      },
+      "--dsw-alias-label-caption": {
+        "light": "#5A7B96",
+        "dark": "#5A7B96"
+      },
+      "--dsw-alias-label-dimmed": {
+        "light": "#8FAAC0",
+        "dark": "#8FAAC0"
+      },
+      "--dsw-alias-label-primary-dimmed": {
+        "light": "#2E4A63",
+        "dark": "#2E4A63"
+      },
+      "--dsw-alias-label-primary-foreground": {
+        "light": "#FFFFFF",
+        "dark": "#FFFFFF"
+      },
+      "--dsw-alias-label-primary-inverted": {
+        "light": "#FFFFFF",
+        "dark": "#FFFFFF"
+      },
+      "--dsw-alias-link": {
+        "light": "#B8860B",
+        "dark": "#B8860B"
+      },
+      "--dsw-alias-interactive-bg-hover": {
+        "light": "#2B74B512",
+        "dark": "#2B74B512"
+      },
+      "--dsw-alias-interactive-bg-active": {
+        "light": "#2B74B529",
+        "dark": "#2B74B529"
+      },
+      "--dsw-alias-interactive-bg-hover-solid": {
+        "light": "#E0EFFB",
+        "dark": "#E0EFFB"
+      },
+      "--dsw-alias-interactive-bg-hover-accent": {
+        "light": "#06527929",
+        "dark": "#06527929"
+      },
+      "--dsw-alias-button-primary-fill": {
+        "light": "#177CB0",
+        "dark": "#177CB0"
+      },
+      "--dsw-alias-button-primary-hover": {
+        "light": "#2B74B5",
+        "dark": "#2B74B5"
+      },
+      "--dsw-alias-button-primary-dimmed": {
+        "light": "#177CB047",
+        "dark": "#177CB047"
+      },
+      "--dsw-alias-button-ghost-active-fill": {
+        "light": "#2B74B524",
+        "dark": "#2B74B524"
+      },
+      "--dsw-alias-button-ghost-active-border": {
+        "light": "#2B74B5",
+        "dark": "#2B74B5"
+      },
+      "--dsw-alias-button-ghost-active-hover": {
+        "light": "#2B74B53D",
+        "dark": "#2B74B53D"
+      },
+      "--dsw-alias-button-info-fill": {
+        "light": "#4C8DAE",
+        "dark": "#4C8DAE"
+      },
+      "--dsw-alias-button-info-hover": {
+        "light": "#177CB0",
+        "dark": "#177CB0"
+      },
+      "--dsw-alias-button-elevated-fill": {
+        "light": "#FFFFFF",
+        "dark": "#FFFFFF"
+      },
+      "--dsw-alias-button-floating-fill": {
+        "light": "#FFFFFF",
+        "dark": "#FFFFFF"
+      },
+      "--dsw-alias-button-floating-hover": {
+        "light": "#F5FAFF",
+        "dark": "#F5FAFF"
+      },
+      "--dsw-alias-button-contrast-fill": {
+        "light": "#16384F",
+        "dark": "#16384F"
+      },
+      "--dsw-alias-markdown-code-block": {
+        "light": "#EAF5FF",
+        "dark": "#EAF5FF"
+      },
+      "--dsw-alias-markdown-code-block-banner": {
+        "light": "#D6E9F8",
+        "dark": "#D6E9F8"
+      },
+      "--dsw-alias-markdown-inline-code": {
+        "light": "#E0EFFB",
+        "dark": "#E0EFFB"
+      },
+      "--dsw-alias-markdown-citation": {
+        "light": "#E0EFFB",
+        "dark": "#E0EFFB"
+      },
+      "--dsw-alias-markdown-tag": {
+        "light": "#E0EFFB",
+        "dark": "#E0EFFB"
+      },
+      "--dsw-alias-markdown-placeholder": {
+        "light": "#D6E9F8",
+        "dark": "#D6E9F8"
+      },
+      "--dsw-alias-markdown-code-segment-selected": {
+        "light": "#2B74B524",
+        "dark": "#2B74B524"
+      },
+      "--dsw-alias-markdown-code-segment-unselected": {
+        "light": "#EAF5FF",
+        "dark": "#EAF5FF"
+      },
+      "--dsw-alias-scrollbar-bg-l1": {
+        "light": "#2B74B529",
+        "dark": "#2B74B529"
+      },
+      "--dsw-alias-scrollbar-bg-l2": {
+        "light": "#2B74B538",
+        "dark": "#2B74B538"
+      },
+      "--dsw-alias-scrollbar-hover-l1": {
+        "light": "#2B74B552",
+        "dark": "#2B74B552"
+      },
+      "--dsw-alias-scrollbar-hover-l2": {
+        "light": "#2B74B566",
+        "dark": "#2B74B566"
+      },
+      "--dsw-alias-tooltip-bg": {
+        "light": "#065279",
+        "dark": "#065279"
+      },
+      "--dsw-alias-toast-bg": {
+        "light": "#FFFFFF",
+        "dark": "#FFFFFF"
+      },
+      "--dsw-alias-state-error-primary": {
+        "light": "#C0566A",
+        "dark": "#C0566A"
+      },
+      "--dsw-alias-state-error-secondary": {
+        "light": "#DB5A6B",
+        "dark": "#DB5A6B"
+      },
+      "--dsw-alias-state-success-primary": {
+        "light": "#21A675",
+        "dark": "#21A675"
+      },
+      "--dsw-alias-state-success-secondary": {
+        "light": "#177CB0",
+        "dark": "#177CB0"
+      },
+      "--dsw-alias-state-success-tertiary": {
+        "light": "#9CC3E4",
+        "dark": "#9CC3E4"
+      },
+      "--dsw-alias-state-warn-primary": {
+        "light": "#CA6924",
+        "dark": "#CA6924"
+      },
+      "--dsw-alias-state-warn-secondary": {
+        "light": "#E09A4E",
+        "dark": "#E09A4E"
+      },
+      "--dsw-alias-state-warn-tertiary": {
+        "light": "#F3E3CB",
+        "dark": "#F3E3CB"
+      },
+      "--dsw-alias-state-warn-label": {
+        "light": "#8A4A12",
+        "dark": "#8A4A12"
+      },
+      "--dsw-alias-state-business-primary": {
+        "light": "#177CB0",
+        "dark": "#177CB0"
+      },
+      "--dsw-alias-state-business-tertiary": {
+        "light": "#4C8DAE",
+        "dark": "#4C8DAE"
+      },
+      "--dsw-specific-sidebar-fill": {
+        "light": "linear-gradient(to bottom,#EAF5FF 0%,#DDF0FF 26%,#CDE9FB 52%,#C7E7FA 62%,#CDEEFC 70%,#C4E7FA 80%,#B9DCF3 90%,#B0D9F0 100%)",
+        "dark": "linear-gradient(to bottom,#EAF5FF 0%,#DDF0FF 26%,#CDE9FB 52%,#C7E7FA 62%,#CDEEFC 70%,#C4E7FA 80%,#B9DCF3 90%,#B0D9F0 100%)"
+      }
+    },
+    "reading": {
+      "colorScheme": "light",
+      "bg": "#FFFFFF",
+      "alpha": 0.62,
+      "blur": 3,
+      "maxWidth": 640
+    },
+    "accent": "#FFD166",
+    "ambient": {
+      "kind": "dream",
+      "bubbles": 9,
+      "motes": 5,
+      "fish": 3
+    }
+  }
+]