dsh-theme-studio 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog
+
+## 0.1.0
+
+- Initial release.
+- 6 pre-built theme presets (Ocean, Forest, Sunset, Monochrome, Nord, Dracula).
+- Custom accent color picker.
+- Density, border radius, and font family controls.
+- Custom CSS variable override textarea.
+- Live preview area.
+- Preferences persisted in localStorage.

package/README.md

@@ -0,0 +1,40 @@
+# dsh-theme-studio
+
+A [dsh](https://github.com/deepseek-ai/deepseek-harness) plugin that lets you customize the UI theme: pick pre-built color presets, set a custom accent color, adjust density, border radius, and font family, or write custom CSS variable overrides.
+
+## Features
+
+- **6 pre-built presets**: Ocean, Forest, Sunset, Monochrome, Nord, Dracula
+- **Custom accent color** picker with hex input
+- **Density** control: Compact / Comfortable / Spacious
+- **Border radius** control: Sharp / Rounded / Soft
+- **Font family** selection: System / Monospace / Serif
+- **Custom CSS** textarea for advanced `--property: value;` overrides
+- **Live preview** with badges, cards, and buttons
+- **Instant apply** — changes take effect immediately via CSS custom properties
+- **Persistent** — preferences saved in `localStorage`, no server round-trips
+
+## Install
+
+```bash
+dsh plugin add dsh-theme-studio
+```
+
+Or from source:
+
+```bash
+git clone https://github.com/hj01857655/dsh-theme-studio.git
+cd dsh-theme-studio
+npm install && npm run build
+dsh plugin add link:.
+```
+
+## How it works
+
+The plugin registers a `settings.section` slot (order 47) that renders a Theme Studio page in the dsh Settings panel. All theme state is client-side: preferences persist in `localStorage` and are applied by setting CSS custom properties on `document.documentElement.style`.
+
+The overrides target dsh's `--dsw-alias-*` semantic token layer, so they cascade through every component that reads the design tokens — no component patching required.
+
+## License
+
+MIT

package/cordis.patch.yml

@@ -0,0 +1,9 @@
+bundle:
+  - id: theme-studio
+    target: web
+    patch:
+      settings.section:
+        - id: theme-studio
+          order: 47
+          label: Theme Studio
+          locale: theme-studio

package/lib/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Host half of dsh-theme-studio.
+ *
+ * A purely client-side plugin — the host half exists only to satisfy the Cordis
+ * bundle contract (every plugin needs a host entry point with a cordis.patch.yml).
+ * No routes, no storage, no services: all theme state lives in the browser's
+ * localStorage and is applied via CSS custom properties on document.documentElement.
+ *
+ * @module index
+ */
+import type { Context } from '@deepseek-ai/cordis';
+export declare function apply(_ctx: Context): void;

package/lib/index.js

@@ -0,0 +1,14 @@
+/**
+ * Host half of dsh-theme-studio.
+ *
+ * A purely client-side plugin — the host half exists only to satisfy the Cordis
+ * bundle contract (every plugin needs a host entry point with a cordis.patch.yml).
+ * No routes, no storage, no services: all theme state lives in the browser's
+ * localStorage and is applied via CSS custom properties on document.documentElement.
+ *
+ * @module index
+ */
+export function apply(_ctx) {
+    // Intentionally empty. The client half (src/client/index.tsx) registers the
+    // settings section; the host half has no work to do.
+}

package/lib/theme-studio.web.js

@@ -0,0 +1,947 @@
+// src/client/locales.ts
+var NS = "theme-studio";
+var zh = {
+  nav: "\u4E3B\u9898\u5DE5\u4F5C\u5BA4",
+  title: "\u4E3B\u9898\u5DE5\u4F5C\u5BA4",
+  subtitle: "\u81EA\u5B9A\u4E49 dsh \u754C\u9762\u5916\u89C2",
+  presetSection: "\u9884\u8BBE\u4E3B\u9898",
+  presetHint: "\u9009\u62E9\u4E00\u4E2A\u9884\u8BBE\u914D\u8272\u65B9\u6848",
+  noPreset: "\u65E0\uFF08\u4F7F\u7528\u9ED8\u8BA4\uFF09",
+  accentSection: "\u5F3A\u8C03\u8272",
+  accentHint: "\u81EA\u5B9A\u4E49\u754C\u9762\u5F3A\u8C03\u8272\uFF0C\u8986\u76D6\u9884\u8BBE\u4E2D\u7684\u5F3A\u8C03\u8272",
+  accentPlaceholder: "#4B8BBE",
+  densitySection: "\u5BC6\u5EA6",
+  densityCompact: "\u7D27\u51D1",
+  densityComfortable: "\u8212\u9002",
+  densitySpacious: "\u5BBD\u677E",
+  radiusSection: "\u5706\u89D2",
+  radiusSharp: "\u9510\u5229",
+  radiusRounded: "\u5706\u89D2",
+  radiusSoft: "\u67D4\u548C",
+  fontSection: "\u5B57\u4F53",
+  fontSystem: "\u7CFB\u7EDF",
+  fontMono: "\u7B49\u5BBD",
+  fontSerif: "\u886C\u7EBF",
+  customCssSection: "\u81EA\u5B9A\u4E49 CSS",
+  customCssHint: "\u76F4\u63A5\u8986\u76D6 CSS \u81EA\u5B9A\u4E49\u5C5E\u6027\uFF0C\u6BCF\u884C\u4E00\u4E2A `--property: value;`",
+  customCssPlaceholder: "--accent: #ff0000;\n--border: 1px solid red;",
+  preview: "\u9884\u89C8",
+  apply: "\u5E94\u7528",
+  reset: "\u91CD\u7F6E\u4E3A\u9ED8\u8BA4",
+  resetConfirm: "\u786E\u5B9A\u8981\u91CD\u7F6E\u6240\u6709\u4E3B\u9898\u8BBE\u7F6E\u5417\uFF1F",
+  applied: "\u4E3B\u9898\u5DF2\u5E94\u7528",
+  resetted: "\u5DF2\u91CD\u7F6E\u4E3A\u9ED8\u8BA4\u4E3B\u9898",
+  card: "\u5361\u7247",
+  button: "\u6309\u94AE",
+  badge: "\u6807\u7B7E",
+  text: "\u8FD9\u662F\u4E00\u6BB5\u793A\u4F8B\u6587\u672C\uFF0C\u7528\u4E8E\u9884\u89C8\u4E3B\u9898\u6548\u679C\u3002"
+};
+var en = {
+  nav: "Theme Studio",
+  title: "Theme Studio",
+  subtitle: "Customize the dsh UI appearance",
+  presetSection: "Preset Themes",
+  presetHint: "Choose a pre-built color scheme",
+  noPreset: "None (use default)",
+  accentSection: "Accent Color",
+  accentHint: "Custom accent color, overrides the preset",
+  accentPlaceholder: "#4B8BBE",
+  densitySection: "Density",
+  densityCompact: "Compact",
+  densityComfortable: "Comfortable",
+  densitySpacious: "Spacious",
+  radiusSection: "Border Radius",
+  radiusSharp: "Sharp",
+  radiusRounded: "Rounded",
+  radiusSoft: "Soft",
+  fontSection: "Font Family",
+  fontSystem: "System",
+  fontMono: "Monospace",
+  fontSerif: "Serif",
+  customCssSection: "Custom CSS",
+  customCssHint: "Override CSS custom properties directly, one `--property: value;` per line",
+  customCssPlaceholder: "--accent: #ff0000;\n--border: 1px solid red;",
+  preview: "Preview",
+  apply: "Apply",
+  reset: "Reset to Default",
+  resetConfirm: "Reset all theme settings to default?",
+  applied: "Theme applied",
+  resetted: "Reset to default theme",
+  card: "Card",
+  button: "Button",
+  badge: "Badge",
+  text: "This is sample text to preview the theme."
+};
+
+// src/client/view.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/types.ts
+var DEFAULT_PREFERENCES = {
+  preset: null,
+  accentColor: null,
+  density: "comfortable",
+  radius: "rounded",
+  fontFamily: "system",
+  customCss: ""
+};
+var STORAGE_KEY = "dsh-theme-studio";
+
+// src/themes.ts
+var PRESETS = [
+  {
+    id: "ocean",
+    name: "Ocean",
+    description: "Deep blue accent with cool neutrals",
+    tokens: {
+      "--accent": "#2563eb",
+      "--accent-hover": "#1d4ed8",
+      "--dsw-alias-state-business-primary": "#2563eb",
+      "--dsw-alias-state-business-secondary": "#dbeafe",
+      "--dsw-alias-interactive-bg-hover": "rgba(37,99,235,0.08)"
+    }
+  },
+  {
+    id: "forest",
+    name: "Forest",
+    description: "Green accent with earthy neutrals",
+    tokens: {
+      "--accent": "#16a34a",
+      "--accent-hover": "#15803d",
+      "--dsw-alias-state-business-primary": "#16a34a",
+      "--dsw-alias-state-business-secondary": "#dcfce7",
+      "--dsw-alias-interactive-bg-hover": "rgba(22,163,74,0.08)"
+    }
+  },
+  {
+    id: "sunset",
+    name: "Sunset",
+    description: "Warm orange accent with amber highlights",
+    tokens: {
+      "--accent": "#ea580c",
+      "--accent-hover": "#c2410c",
+      "--dsw-alias-state-business-primary": "#ea580c",
+      "--dsw-alias-state-business-secondary": "#fed7aa",
+      "--dsw-alias-interactive-bg-hover": "rgba(234,88,12,0.08)"
+    }
+  },
+  {
+    id: "monochrome",
+    name: "Monochrome",
+    description: "Grayscale only \u2014 no color accent",
+    tokens: {
+      "--accent": "#404040",
+      "--accent-hover": "#262626",
+      "--dsw-alias-state-business-primary": "#404040",
+      "--dsw-alias-state-business-secondary": "#e5e5e5",
+      "--dsw-alias-interactive-bg-hover": "rgba(64,64,64,0.08)"
+    }
+  },
+  {
+    id: "nord",
+    name: "Nord",
+    description: "Frost blue inspired by the Nord palette",
+    tokens: {
+      "--accent": "#5e81ac",
+      "--accent-hover": "#4c6f96",
+      "--dsw-alias-state-business-primary": "#5e81ac",
+      "--dsw-alias-state-business-secondary": "#e5ebf1",
+      "--dsw-alias-interactive-bg-hover": "rgba(94,129,172,0.08)"
+    }
+  },
+  {
+    id: "dracula",
+    name: "Dracula",
+    description: "Purple accent with dark mode flair",
+    tokens: {
+      "--accent": "#bd93f9",
+      "--accent-hover": "#a678e8",
+      "--dsw-alias-state-business-primary": "#bd93f9",
+      "--dsw-alias-state-business-secondary": "#3a3a5c",
+      "--dsw-alias-interactive-bg-hover": "rgba(189,147,249,0.12)"
+    }
+  }
+];
+var DENSITY_TOKENS = {
+  compact: {
+    "--dsh-content-font-size": "13px",
+    "--dsh-spacing-unit": "4px"
+  },
+  comfortable: {
+    "--dsh-content-font-size": "14px",
+    "--dsh-spacing-unit": "6px"
+  },
+  spacious: {
+    "--dsh-content-font-size": "15px",
+    "--dsh-spacing-unit": "8px"
+  }
+};
+var RADIUS_TOKENS = {
+  sharp: {
+    "--dsh-radius-small": "2px",
+    "--dsh-radius-medium": "4px",
+    "--dsh-radius-large": "6px"
+  },
+  rounded: {
+    "--dsh-radius-small": "6px",
+    "--dsh-radius-medium": "10px",
+    "--dsh-radius-large": "14px"
+  },
+  soft: {
+    "--dsh-radius-small": "10px",
+    "--dsh-radius-medium": "16px",
+    "--dsh-radius-large": "22px"
+  }
+};
+var FONT_TOKENS = {
+  system: { "--dsh-font-family": "system-ui, -apple-system, sans-serif" },
+  mono: { "--dsh-font-family": "'JetBrains Mono', 'Fira Code', monospace" },
+  serif: { "--dsh-font-family": "'Georgia', 'Times New Roman', serif" }
+};
+function getPreset(id) {
+  return PRESETS.find((p) => p.id === id);
+}
+
+// src/client/ui.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var T = {
+  accent: "var(--accent, #4B8BBE)",
+  accentHover: "var(--accent-hover, #3a6f9e)",
+  error: "var(--error, #e53935)",
+  success: "var(--success, #2e7d32)",
+  warning: "var(--warning, #ed6c02)",
+  bg: "var(--bg-secondary, rgba(128,128,128,0.04))",
+  bgHover: "var(--bg-tertiary, rgba(128,128,128,0.08))",
+  border: "var(--border, rgba(128,128,128,0.2))",
+  text: "var(--text-primary, inherit)",
+  muted: "var(--text-secondary, rgba(128,128,128,0.65))",
+  surface: "var(--bg-primary, #fff)"
+};
+var injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.textContent = `
+@keyframes dsh-fade-in{from{opacity:0}to{opacity:1}}
+@keyframes dsh-slide-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+@keyframes dsh-spin{to{transform:rotate(360deg)}}
+.dsh-modal-overlay{animation:dsh-fade-in .15s ease}
+.dsh-modal-body{animation:dsh-slide-up .2s ease}
+.dsh-toast{animation:dsh-slide-up .2s ease}
+.dsh-spin{animation:dsh-spin .6s linear infinite}
+  `;
+  document.head.appendChild(el);
+}
+function Modal({
+  title,
+  onClose,
+  children,
+  footer,
+  width = 520
+}) {
+  useEffect(() => {
+    ensureStyles();
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "dsh-modal-overlay",
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1e3,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0,0,0,0.45)",
+        backdropFilter: "blur(3px)",
+        WebkitBackdropFilter: "blur(3px)"
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "dsh-modal-body",
+          style: {
+            background: T.surface,
+            borderRadius: 14,
+            boxShadow: "0 12px 40px rgba(0,0,0,0.25)",
+            width: `min(92vw, ${width}px)`,
+            maxHeight: "85vh",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "16px 22px",
+                  borderBottom: `1px solid ${T.border}`
+                },
+                children: [
+                  /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: 15, fontWeight: 600 }, children: title }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        fontSize: 20,
+                        color: T.muted,
+                        padding: "0 4px",
+                        lineHeight: 1,
+                        borderRadius: 4
+                      },
+                      "aria-label": "Close",
+                      children: "\xD7"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { padding: 22, overflow: "auto", flex: 1 }, children }),
+            footer !== void 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  padding: "14px 22px",
+                  borderTop: `1px solid ${T.border}`,
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  gap: 10,
+                  background: T.bg
+                },
+                children: footer
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function ConfirmDialog({
+  title,
+  message,
+  confirmLabel,
+  cancelLabel = "Cancel",
+  onConfirm,
+  onClose,
+  danger
+}) {
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      title,
+      onClose,
+      width: 420,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onClose, children: cancelLabel }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: danger === true ? "danger" : "primary",
+            onClick: () => {
+              onConfirm();
+              onClose();
+            },
+            children: confirmLabel
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 14, lineHeight: 1.6 }, children: message })
+    }
+  );
+}
+function Button({
+  variant = "secondary",
+  size = "md",
+  children,
+  style,
+  ...rest
+}) {
+  const base = {
+    cursor: "pointer",
+    borderRadius: 7,
+    fontWeight: 500,
+    transition: "all 0.15s ease",
+    border: "none",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    fontSize: size === "sm" ? 12 : 13,
+    padding: size === "sm" ? "5px 12px" : "8px 18px",
+    fontFamily: "inherit"
+  };
+  const variants = {
+    primary: { background: T.accent, color: "#fff" },
+    secondary: {
+      background: T.bg,
+      color: T.text,
+      border: `1px solid ${T.border}`
+    },
+    danger: {
+      background: "transparent",
+      color: T.error,
+      border: `1px solid ${T.error}`
+    },
+    ghost: { background: "transparent", color: T.muted, border: "none" }
+  };
+  return /* @__PURE__ */ jsx("button", { type: "button", style: { ...base, ...variants[variant], ...style }, ...rest, children });
+}
+function Card({
+  title,
+  icon,
+  children,
+  actions,
+  style,
+  padding = 14
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        borderRadius: 10,
+        border: `1px solid ${T.border}`,
+        background: T.bg,
+        overflow: "hidden",
+        ...style
+      },
+      children: [
+        (title !== void 0 || actions !== void 0) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "12px 16px",
+              borderBottom: title !== void 0 ? `1px solid ${T.border}` : "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 600, display: "flex", alignItems: "center", gap: 6 }, children: [
+                icon !== void 0 && /* @__PURE__ */ jsx("span", { children: icon }),
+                title
+              ] }),
+              actions
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { padding }, children })
+      ]
+    }
+  );
+}
+function Badge({
+  children,
+  color = "default"
+}) {
+  const colors = {
+    default: { bg: "rgba(128,128,128,0.12)", fg: T.muted },
+    success: { bg: "rgba(46,125,50,0.12)", fg: T.success },
+    error: { bg: "rgba(229,57,53,0.12)", fg: T.error },
+    warning: { bg: "rgba(245,124,0,0.12)", fg: T.warning },
+    info: { bg: "rgba(75,139,190,0.12)", fg: T.accent }
+  };
+  const c = colors[color];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        padding: "2px 9px",
+        borderRadius: 10,
+        fontSize: 11,
+        fontWeight: 600,
+        background: c.bg,
+        color: c.fg
+      },
+      children
+    }
+  );
+}
+function Input({
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...rest,
+      style: {
+        fontSize: 13,
+        padding: "8px 12px",
+        borderRadius: 7,
+        border: `1px solid ${T.border}`,
+        background: T.surface,
+        color: T.text,
+        width: "100%",
+        boxSizing: "border-box",
+        fontFamily: "inherit",
+        outline: "none",
+        transition: "border-color 0.15s",
+        ...style
+      }
+    }
+  );
+}
+function Textarea({
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ...rest,
+      style: {
+        fontSize: 13,
+        padding: "8px 12px",
+        borderRadius: 7,
+        border: `1px solid ${T.border}`,
+        background: T.surface,
+        color: T.text,
+        width: "100%",
+        boxSizing: "border-box",
+        fontFamily: "inherit",
+        outline: "none",
+        resize: "vertical",
+        lineHeight: 1.5,
+        ...style
+      }
+    }
+  );
+}
+var ToastContext = createContext(
+  () => {
+  }
+);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const show = useCallback((type, message) => {
+    const id = Date.now() + Math.random();
+    setToasts((t) => [...t, { id, type, message }]);
+    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 3500);
+  }, []);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: show, children: [
+    children,
+    toasts.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          bottom: 24,
+          right: 24,
+          zIndex: 2e3,
+          display: "flex",
+          flexDirection: "column",
+          gap: 8
+        },
+        children: toasts.map((t) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "dsh-toast",
+            style: {
+              padding: "12px 18px",
+              borderRadius: 8,
+              fontSize: 13,
+              fontWeight: 500,
+              boxShadow: "0 6px 20px rgba(0,0,0,0.2)",
+              color: "#fff",
+              background: t.type === "success" ? T.success : t.type === "error" ? T.error : T.accent,
+              maxWidth: 360
+            },
+            children: t.message
+          },
+          t.id
+        ))
+      }
+    )
+  ] });
+}
+function useToast() {
+  return useContext(ToastContext);
+}
+function SectionTitle({
+  icon,
+  children,
+  actions
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginTop: 6,
+        marginBottom: 8
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              fontSize: 14,
+              fontWeight: 600,
+              display: "flex",
+              alignItems: "center",
+              gap: 6
+            },
+            children: [
+              icon !== void 0 && /* @__PURE__ */ jsx("span", { children: icon }),
+              children
+            ]
+          }
+        ),
+        actions
+      ]
+    }
+  );
+}
+var tableStyles = {
+  table: {
+    borderCollapse: "collapse",
+    width: "100%"
+  },
+  th: {
+    textAlign: "left",
+    padding: "8px 12px 8px 0",
+    fontWeight: 600,
+    fontSize: 12,
+    color: T.muted,
+    borderBottom: `1px solid ${T.border}`
+  },
+  td: {
+    padding: "8px 12px 8px 0",
+    fontSize: 13,
+    borderBottom: "1px solid rgba(128,128,128,0.08)"
+  },
+  clickRow: { cursor: "pointer" }
+};
+function Field({
+  label,
+  children,
+  hint
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+    /* @__PURE__ */ jsx("label", { style: { fontSize: 12, fontWeight: 600, color: T.text }, children: label }),
+    children,
+    hint !== void 0 && /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: T.muted }, children: hint })
+  ] });
+}
+
+// src/client/view.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function loadPreferences() {
+  if (typeof localStorage === "undefined") return { ...DEFAULT_PREFERENCES };
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw === null) return { ...DEFAULT_PREFERENCES };
+    return { ...DEFAULT_PREFERENCES, ...JSON.parse(raw) };
+  } catch {
+    return { ...DEFAULT_PREFERENCES };
+  }
+}
+function savePreferences(prefs) {
+  if (typeof localStorage === "undefined") return;
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
+}
+function applyTheme(prefs) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const allTokens = {};
+  if (prefs.preset !== null) {
+    const preset = getPreset(prefs.preset);
+    if (preset !== void 0) Object.assign(allTokens, preset.tokens);
+  }
+  if (prefs.accentColor !== null && prefs.accentColor.trim() !== "") {
+    allTokens["--accent"] = prefs.accentColor;
+  }
+  Object.assign(allTokens, DENSITY_TOKENS[prefs.density] ?? {});
+  Object.assign(allTokens, RADIUS_TOKENS[prefs.radius] ?? {});
+  Object.assign(allTokens, FONT_TOKENS[prefs.fontFamily] ?? {});
+  for (const [prop, value] of Object.entries(allTokens)) {
+    root.style.setProperty(prop, value);
+  }
+  if (prefs.customCss.trim() !== "") {
+    for (const line of prefs.customCss.split("\n")) {
+      const match = line.match(/^\s*(--[\w-]+)\s*:\s*(.+?)\s*;?\s*$/);
+      if (match !== null) {
+        root.style.setProperty(match[1], match[2]);
+      }
+    }
+  }
+}
+function clearTheme() {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const known = /* @__PURE__ */ new Set([
+    "--accent",
+    "--accent-hover",
+    "--dsh-content-font-size",
+    "--dsh-spacing-unit",
+    "--dsh-radius-small",
+    "--dsh-radius-medium",
+    "--dsh-radius-large",
+    "--dsh-font-family",
+    "--dsw-alias-state-business-primary",
+    "--dsw-alias-state-business-secondary",
+    "--dsw-alias-interactive-bg-hover"
+  ]);
+  for (const prop of known) root.style.removeProperty(prop);
+  const prefs = loadPreferences();
+  if (prefs.customCss.trim() !== "") {
+    for (const line of prefs.customCss.split("\n")) {
+      const match = line.match(/^\s*(--[\w-]+)\s*:/);
+      if (match !== null) root.style.removeProperty(match[1]);
+    }
+  }
+}
+function PresetCard({ preset, selected, onClick }) {
+  const accent = preset.tokens["--accent"] ?? "#4B8BBE";
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      onClick,
+      style: {
+        cursor: "pointer",
+        borderRadius: 10,
+        padding: 12,
+        border: selected ? "2px solid var(--accent, #4B8BBE)" : "1px solid var(--border, rgba(128,128,128,0.2))",
+        background: selected ? "rgba(75,139,190,0.06)" : "var(--bg-secondary, rgba(128,128,128,0.04))",
+        transition: "all 0.15s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }, children: [
+          /* @__PURE__ */ jsx2("div", { style: { width: 16, height: 16, borderRadius: "50%", background: accent, border: "1px solid rgba(128,128,128,0.2)" } }),
+          /* @__PURE__ */ jsx2("strong", { style: { fontSize: 13 }, children: preset.name }),
+          selected && /* @__PURE__ */ jsx2(Badge, { color: "info", children: "\u2713" })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.6 }, children: preset.description })
+      ]
+    }
+  );
+}
+function Segmented({ value, options, onChange }) {
+  return /* @__PURE__ */ jsx2("div", { style: { display: "inline-flex", borderRadius: 8, overflow: "hidden", border: "1px solid var(--border, rgba(128,128,128,0.2))" }, children: options.map((opt) => /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick: () => onChange(opt.value),
+      style: {
+        cursor: "pointer",
+        border: "none",
+        padding: "7px 16px",
+        fontSize: 13,
+        fontWeight: 500,
+        fontFamily: "inherit",
+        background: value === opt.value ? "var(--accent, #4B8BBE)" : "transparent",
+        color: value === opt.value ? "#fff" : "var(--text-primary, inherit)",
+        transition: "all 0.15s ease"
+      },
+      children: opt.label
+    },
+    opt.value
+  )) });
+}
+function PreviewArea({ t }) {
+  return /* @__PURE__ */ jsx2(Card, { title: t("preview"), icon: "\u{1F441}", children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx2(Badge, { color: "info", children: "Info" }),
+      /* @__PURE__ */ jsx2(Badge, { color: "success", children: "Success" }),
+      /* @__PURE__ */ jsx2(Badge, { color: "warning", children: "Warning" }),
+      /* @__PURE__ */ jsx2(Badge, { color: "error", children: "Error" })
+    ] }),
+    /* @__PURE__ */ jsxs2(Card, { children: [
+      /* @__PURE__ */ jsx2("div", { style: { fontSize: 13, marginBottom: 8 }, children: t("text") }),
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ jsx2(Button, { variant: "primary", size: "sm", children: t("button") }),
+        /* @__PURE__ */ jsx2(Button, { variant: "secondary", size: "sm", children: "Secondary" }),
+        /* @__PURE__ */ jsx2(Button, { variant: "danger", size: "sm", children: "Danger" })
+      ] })
+    ] })
+  ] }) });
+}
+function ThemePanelInner({ t }) {
+  const toast = useToast();
+  const [prefs, setPrefs] = useState2(loadPreferences);
+  const [confirmReset, setConfirmReset] = useState2(false);
+  useEffect2(() => {
+    applyTheme(prefs);
+    savePreferences(prefs);
+  }, [prefs]);
+  const update = useCallback2((key, value) => {
+    setPrefs((p) => ({ ...p, [key]: value }));
+  }, []);
+  const handleReset = useCallback2(() => {
+    clearTheme();
+    setPrefs({ ...DEFAULT_PREFERENCES });
+    toast("success", t("resetted"));
+  }, [t, toast]);
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 16, maxWidth: 820 }, children: [
+    /* @__PURE__ */ jsxs2("header", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+      /* @__PURE__ */ jsxs2("strong", { style: { fontSize: 15 }, children: [
+        "\u{1F3A8} ",
+        t("title")
+      ] }),
+      /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, opacity: 0.6 }, children: t("subtitle") }),
+      /* @__PURE__ */ jsx2("span", { style: { flex: 1 } }),
+      /* @__PURE__ */ jsxs2(Button, { variant: "danger", size: "sm", onClick: () => setConfirmReset(true), children: [
+        "\u21BA ",
+        t("reset")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u{1F3AD}", children: t("presetSection") }),
+    /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: 10 }, children: [
+      /* @__PURE__ */ jsx2(
+        PresetCard,
+        {
+          preset: { id: "none", name: t("noPreset"), description: "", tokens: {} },
+          selected: prefs.preset === null,
+          onClick: () => update("preset", null)
+        }
+      ),
+      PRESETS.map((p) => /* @__PURE__ */ jsx2(
+        PresetCard,
+        {
+          preset: p,
+          selected: prefs.preset === p.id,
+          onClick: () => update("preset", p.id)
+        },
+        p.id
+      ))
+    ] }),
+    /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u{1F308}", children: t("accentSection") }),
+    /* @__PURE__ */ jsxs2(Card, { children: [
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "color",
+            value: prefs.accentColor ?? "#4B8BBE",
+            onChange: (e) => update("accentColor", e.target.value),
+            style: { width: 40, height: 40, cursor: "pointer", borderRadius: 8, border: "1px solid var(--border, rgba(128,128,128,0.2))" }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Input,
+          {
+            value: prefs.accentColor ?? "",
+            onChange: (e) => update("accentColor", e.target.value || null),
+            placeholder: t("accentPlaceholder"),
+            style: { maxWidth: 200 }
+          }
+        ),
+        prefs.accentColor !== null && /* @__PURE__ */ jsx2(Button, { variant: "ghost", size: "sm", onClick: () => update("accentColor", null), children: "\u2715" })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.5, marginTop: 6 }, children: t("accentHint") })
+    ] }),
+    /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u{1F4D0}", children: t("densitySection") }),
+    /* @__PURE__ */ jsx2(
+      Segmented,
+      {
+        value: prefs.density,
+        onChange: (v) => update("density", v),
+        options: [
+          { value: "compact", label: t("densityCompact") },
+          { value: "comfortable", label: t("densityComfortable") },
+          { value: "spacious", label: t("densitySpacious") }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u2B1C", children: t("radiusSection") }),
+    /* @__PURE__ */ jsx2(
+      Segmented,
+      {
+        value: prefs.radius,
+        onChange: (v) => update("radius", v),
+        options: [
+          { value: "sharp", label: t("radiusSharp") },
+          { value: "rounded", label: t("radiusRounded") },
+          { value: "soft", label: t("radiusSoft") }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u{1F524}", children: t("fontSection") }),
+    /* @__PURE__ */ jsx2(
+      Segmented,
+      {
+        value: prefs.fontFamily,
+        onChange: (v) => update("fontFamily", v),
+        options: [
+          { value: "system", label: t("fontSystem") },
+          { value: "mono", label: t("fontMono") },
+          { value: "serif", label: t("fontSerif") }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u270F\uFE0F", children: t("customCssSection") }),
+    /* @__PURE__ */ jsx2(Card, { children: /* @__PURE__ */ jsx2(Field, { label: t("customCssSection"), hint: t("customCssHint"), children: /* @__PURE__ */ jsx2(
+      Textarea,
+      {
+        value: prefs.customCss,
+        onChange: (e) => update("customCss", e.target.value),
+        placeholder: t("customCssPlaceholder"),
+        rows: 4
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx2(PreviewArea, { t }),
+    confirmReset && /* @__PURE__ */ jsx2(
+      ConfirmDialog,
+      {
+        title: t("reset"),
+        message: t("resetConfirm"),
+        confirmLabel: t("reset"),
+        danger: true,
+        onConfirm: handleReset,
+        onClose: () => setConfirmReset(false)
+      }
+    )
+  ] });
+}
+function ThemePanel({ t }) {
+  return /* @__PURE__ */ jsx2(ToastProvider, { children: /* @__PURE__ */ jsx2(ThemePanelInner, { t }) });
+}
+
+// src/client/index.tsx
+var inject = ["slots", "locale"];
+function apply(ctx) {
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), "dsh-theme-studio: dictionaries");
+  ctx.slots.inject("settings.section", () => ctx.slots.register(
+    {
+      name: "settings.section",
+      id: "theme-studio",
+      order: 47,
+      label: () => ctx.locale.bind(NS)("nav"),
+      locale: NS
+    },
+    ThemePanel
+  ));
+}
+export {
+  apply,
+  inject
+};

package/lib/themes.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Pre-built theme presets for dsh-theme-studio.
+ *
+ * Each preset overrides a set of CSS custom properties on document.documentElement.
+ * The property names target dsh's `--dsw-alias-*` semantic layer so the overrides
+ * cascade through every component that reads the design tokens.
+ *
+ * @module themes
+ */
+import type { ThemePreset } from './types.js';
+export declare const PRESETS: readonly ThemePreset[];
+/** Density → CSS custom property overrides */
+export declare const DENSITY_TOKENS: Record<string, Record<string, string>>;
+/** Radius → CSS custom property overrides */
+export declare const RADIUS_TOKENS: Record<string, Record<string, string>>;
+/** Font family → CSS custom property overrides */
+export declare const FONT_TOKENS: Record<string, Record<string, string>>;
+/** Look up a preset by id. */
+export declare function getPreset(id: string): ThemePreset | undefined;

package/lib/themes.js

@@ -0,0 +1,126 @@
+/**
+ * Pre-built theme presets for dsh-theme-studio.
+ *
+ * Each preset overrides a set of CSS custom properties on document.documentElement.
+ * The property names target dsh's `--dsw-alias-*` semantic layer so the overrides
+ * cascade through every component that reads the design tokens.
+ *
+ * @module themes
+ */
+export const PRESETS = [
+    {
+        id: 'ocean',
+        name: 'Ocean',
+        description: 'Deep blue accent with cool neutrals',
+        tokens: {
+            '--accent': '#2563eb',
+            '--accent-hover': '#1d4ed8',
+            '--dsw-alias-state-business-primary': '#2563eb',
+            '--dsw-alias-state-business-secondary': '#dbeafe',
+            '--dsw-alias-interactive-bg-hover': 'rgba(37,99,235,0.08)',
+        },
+    },
+    {
+        id: 'forest',
+        name: 'Forest',
+        description: 'Green accent with earthy neutrals',
+        tokens: {
+            '--accent': '#16a34a',
+            '--accent-hover': '#15803d',
+            '--dsw-alias-state-business-primary': '#16a34a',
+            '--dsw-alias-state-business-secondary': '#dcfce7',
+            '--dsw-alias-interactive-bg-hover': 'rgba(22,163,74,0.08)',
+        },
+    },
+    {
+        id: 'sunset',
+        name: 'Sunset',
+        description: 'Warm orange accent with amber highlights',
+        tokens: {
+            '--accent': '#ea580c',
+            '--accent-hover': '#c2410c',
+            '--dsw-alias-state-business-primary': '#ea580c',
+            '--dsw-alias-state-business-secondary': '#fed7aa',
+            '--dsw-alias-interactive-bg-hover': 'rgba(234,88,12,0.08)',
+        },
+    },
+    {
+        id: 'monochrome',
+        name: 'Monochrome',
+        description: 'Grayscale only — no color accent',
+        tokens: {
+            '--accent': '#404040',
+            '--accent-hover': '#262626',
+            '--dsw-alias-state-business-primary': '#404040',
+            '--dsw-alias-state-business-secondary': '#e5e5e5',
+            '--dsw-alias-interactive-bg-hover': 'rgba(64,64,64,0.08)',
+        },
+    },
+    {
+        id: 'nord',
+        name: 'Nord',
+        description: 'Frost blue inspired by the Nord palette',
+        tokens: {
+            '--accent': '#5e81ac',
+            '--accent-hover': '#4c6f96',
+            '--dsw-alias-state-business-primary': '#5e81ac',
+            '--dsw-alias-state-business-secondary': '#e5ebf1',
+            '--dsw-alias-interactive-bg-hover': 'rgba(94,129,172,0.08)',
+        },
+    },
+    {
+        id: 'dracula',
+        name: 'Dracula',
+        description: 'Purple accent with dark mode flair',
+        tokens: {
+            '--accent': '#bd93f9',
+            '--accent-hover': '#a678e8',
+            '--dsw-alias-state-business-primary': '#bd93f9',
+            '--dsw-alias-state-business-secondary': '#3a3a5c',
+            '--dsw-alias-interactive-bg-hover': 'rgba(189,147,249,0.12)',
+        },
+    },
+];
+/** Density → CSS custom property overrides */
+export const DENSITY_TOKENS = {
+    compact: {
+        '--dsh-content-font-size': '13px',
+        '--dsh-spacing-unit': '4px',
+    },
+    comfortable: {
+        '--dsh-content-font-size': '14px',
+        '--dsh-spacing-unit': '6px',
+    },
+    spacious: {
+        '--dsh-content-font-size': '15px',
+        '--dsh-spacing-unit': '8px',
+    },
+};
+/** Radius → CSS custom property overrides */
+export const RADIUS_TOKENS = {
+    sharp: {
+        '--dsh-radius-small': '2px',
+        '--dsh-radius-medium': '4px',
+        '--dsh-radius-large': '6px',
+    },
+    rounded: {
+        '--dsh-radius-small': '6px',
+        '--dsh-radius-medium': '10px',
+        '--dsh-radius-large': '14px',
+    },
+    soft: {
+        '--dsh-radius-small': '10px',
+        '--dsh-radius-medium': '16px',
+        '--dsh-radius-large': '22px',
+    },
+};
+/** Font family → CSS custom property overrides */
+export const FONT_TOKENS = {
+    system: { '--dsh-font-family': "system-ui, -apple-system, sans-serif" },
+    mono: { '--dsh-font-family': "'JetBrains Mono', 'Fira Code', monospace" },
+    serif: { '--dsh-font-family': "'Georgia', 'Times New Roman', serif" },
+};
+/** Look up a preset by id. */
+export function getPreset(id) {
+    return PRESETS.find((p) => p.id === id);
+}

package/lib/types.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Shared types for dsh-theme-studio.
+ *
+ * @module types
+ */
+/** A named preset that overrides a set of CSS custom properties. */
+export interface ThemePreset {
+    id: string;
+    name: string;
+    description: string;
+    /** CSS custom property → value, applied to document.documentElement.style */
+    tokens: Record<string, string>;
+}
+/** User-selectable density preference. */
+export type Density = 'compact' | 'comfortable' | 'spacious';
+/** User-selectable border-radius preference. */
+export type Radius = 'sharp' | 'rounded' | 'soft';
+/** User-selectable font family preference. */
+export type FontFamily = 'system' | 'mono' | 'serif';
+/** Complete theme preferences persisted in localStorage. */
+export interface ThemePreferences {
+    preset: string | null;
+    accentColor: string | null;
+    density: Density;
+    radius: Radius;
+    fontFamily: FontFamily;
+    customCss: string;
+}
+/** Default preferences — nothing overridden, dsh's built-in theme wins. */
+export declare const DEFAULT_PREFERENCES: ThemePreferences;
+/** localStorage key for persisting preferences. */
+export declare const STORAGE_KEY = "dsh-theme-studio";

package/lib/types.js

@@ -0,0 +1,16 @@
+/**
+ * Shared types for dsh-theme-studio.
+ *
+ * @module types
+ */
+/** Default preferences — nothing overridden, dsh's built-in theme wins. */
+export const DEFAULT_PREFERENCES = {
+    preset: null,
+    accentColor: null,
+    density: 'comfortable',
+    radius: 'rounded',
+    fontFamily: 'system',
+    customCss: '',
+};
+/** localStorage key for persisting preferences. */
+export const STORAGE_KEY = 'dsh-theme-studio';

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "dsh-theme-studio",
+  "version": "0.1.0",
+  "description": "Customize the dsh UI theme: pick presets, set accent colors, adjust density, border radius, and font family, or write custom CSS variable overrides.",
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./lib/client.d.ts",
+      "default": "./lib/theme-studio.web.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": ["lib", "cordis.patch.yml", "README.md", "CHANGELOG.md"],
+  "keywords": ["dsh", "dsh-plugin", "deepseek-harness", "theme", "appearance", "customization"],
+  "dsh": {
+    "bundle": { "patch": "./cordis.patch.yml" },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-ui-renderer",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-settings"
+      ]
+    }
+  },
+  "license": "MIT",
+  "author": "hj01857655",
+  "repository": { "type": "git", "url": "git+https://github.com/hj01857655/dsh-theme-studio.git" },
+  "bugs": { "url": "https://github.com/hj01857655/dsh-theme-studio/issues" },
+  "homepage": "https://github.com/hj01857655/dsh-theme-studio#readme",
+  "engines": { "node": ">=20" },
+  "peerDependencies": { "@deepseek-ai/cordis": "^4.0.1" },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.2",
+    "@types/node": "^22.20.3",
+    "@types/react": "^19.3.0",
+    "esbuild": "^0.28.2",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "typescript": "^5.6.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node scripts/bundle-client.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.client.json",
+    "test": "tsc -p tsconfig.json && node --test",
+    "prepublishOnly": "npm run build && npm test"
+  }
+}