@danielng23/dsh-cyber-client-ui-theme-terminal 0.1.0

package/lib/client.js

@@ -0,0 +1,124 @@
+window.__ModuleLoader__.load({
+	id: "@danielng23/dsh-cyber-client-ui-theme-terminal",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react_jsx_runtime = require("react/jsx-runtime");
+		//#region src/client/locales.ts
+		/** `theme-terminal` namespace dictionaries (the Appearance row label). */
+		/** Dictionary namespace owned by this plugin. */
+		const NS = "theme-terminal";
+		/** Simplified Chinese dictionary. */
+		const zh = { "appearance.terminal": "终端" };
+		/** English dictionary. */
+		const en = { "appearance.terminal": "Terminal" };
+		//#endregion
+		//#region \0dsh-css:/Users/daniel/workspace/arisos/dsh-edex-ui-cyber/packages/ui-theme-terminal/src/client/TerminalThemeRow.module.css.mjs
+		const css = ".VBKBea_row{justify-content:space-between;align-items:center;gap:12px;padding:8px 0;display:flex}.VBKBea_label{color:var(--dsw-alias-label-primary,inherit);font-size:13px}.VBKBea_toggle{border:1px solid var(--dsw-alias-border-l1,currentColor);color:var(--dsw-alias-label-secondary,currentColor);cursor:pointer;background:0 0;padding:2px 8px;font-family:monospace;font-size:16px;line-height:1}.VBKBea_toggle:hover,.VBKBea_toggle[data-active]{color:var(--dsw-alias-brand-primary,currentColor);border-color:var(--dsw-alias-brand-primary,currentColor)}";
+		const tagId = "@danielng23/dsh-cyber-client-ui-theme-terminal/TerminalThemeRow.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "@danielng23/dsh-cyber-client-ui-theme-terminal";
+			tag.dataset.pluginCss = tagId;
+			tag.textContent = css;
+			document.head.appendChild(tag);
+		}
+		var TerminalThemeRow_module_css_default = {
+			"toggle": "VBKBea_toggle",
+			"label": "VBKBea_label",
+			"row": "VBKBea_row"
+		};
+		//#endregion
+		//#region src/client/TerminalThemeRow.tsx
+		/** The Appearance row: label + toggle. */
+		function TerminalThemeRow({ useTerminalActive, setTerminal, t }) {
+			const active = useTerminalActive((s) => s);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: TerminalThemeRow_module_css_default.row,
+				"data-testid": "appearance-terminal",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: TerminalThemeRow_module_css_default.label,
+					children: t("appearance.terminal")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: TerminalThemeRow_module_css_default.toggle,
+					"data-active": active ? "" : void 0,
+					"aria-pressed": active,
+					onClick: setTerminal,
+					children: active ? "▣" : "▢"
+				})]
+			});
+		}
+		//#endregion
+		//#region src/client/index.ts
+		/** Theme id this plugin registers (the setTheme argument). */
+		const THEME_ID = "terminal";
+		/**
+		* CRT palette as alias-token overrides. The presenter writes these as inline
+		* CSS variables over the dark base palette, so the whole default UI (and any
+		* widget registered into its slots) is recolored.
+		*/
+		const TOKENS = {
+			"--dsw-alias-bg-base": "#000a00",
+			"--dsw-alias-bg-layer-1": "#02120a",
+			"--dsw-alias-bg-layer-2": "#031d10",
+			"--dsw-alias-bg-overlay": "#000a00",
+			"--dsw-alias-border-l1": "#1d7a3f",
+			"--dsw-alias-border-l2": "#2ea854",
+			"--dsw-alias-brand-primary": "#35e06a",
+			"--dsw-alias-label-primary": "#35e06a",
+			"--dsw-alias-label-secondary": "#2ea854",
+			"--dsw-alias-state-error-primary": "#e05a5a",
+			"--dsw-alias-state-success-primary": "#35e06a",
+			"--dsw-alias-state-warn-primary": "#e0c05a",
+			"--dsw-specific-sidebar-fill": "#001408"
+		};
+		/** Required services: slot registry for the Appearance row, the theme service, and locale. */
+		const inject = [
+			"slots",
+			"theme",
+			"locale"
+		];
+		/**
+		* Client plugin body: register the terminal theme and the Appearance row that
+		* selects it.
+		* @param ctx - client root context.
+		*/
+		function apply(ctx) {
+			ctx.effect(() => ctx.locale.register(NS, {
+				zh,
+				en
+			}), "ui-theme-terminal: dictionaries");
+			const disposeTheme = ctx.theme.register({
+				id: THEME_ID,
+				colorScheme: "dark",
+				tokens: TOKENS
+			});
+			ctx.effect(() => () => void disposeTheme(), "ui-theme-terminal: theme registration");
+			const terminalActiveSource = {
+				getSnapshot: () => ctx.theme.getTheme().active.id === THEME_ID,
+				subscribe: (listener) => ctx.on("theme/change", () => listener())
+			};
+			ctx.slots.inject("settings.general.item", () => ctx.slots.register({
+				name: "settings.general.item",
+				id: "appearance-terminal",
+				order: 11,
+				locale: NS,
+				inject: () => ({
+					setTerminal: () => {
+						ctx.theme.setTheme(THEME_ID);
+					},
+					hooks: { terminalActive: terminalActiveSource }
+				})
+			}, TerminalThemeRow));
+		}
+		//#endregion
+		exports.THEME_ID = THEME_ID;
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map

package/lib/index.js

@@ -0,0 +1,6 @@
+//#region src/index.ts
+/** Host loader entry for the browser-only terminal-theme plugin. */
+/** Provides no host-side behavior. */
+function apply() {}
+//#endregion
+export { apply };

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

@@ -0,0 +1,22 @@
+/**
+ * Appearance row that activates the terminal theme. Mirrors the built-in
+ * Appearance row's shape: one settings.general.item entry with a toggle that
+ * calls theme.setTheme('terminal'); the active state rides the theme/change
+ * hook seat.
+ */
+import type { InjectFace, PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+import type { ObservableSource } from './index.ts';
+/** The row's inject face: the setter plus the active-state hook source. */
+export interface TerminalThemeRowInjected {
+    /** Activate the terminal theme (theme.setTheme('terminal')). */
+    setTerminal: () => void;
+    /** Bare observable "terminal theme is active" source bound to useTerminalActive. */
+    hooks: {
+        terminalActive: ObservableSource<boolean>;
+    };
+}
+/** Full composed props of the row. */
+export type TerminalThemeRowProps = PropsLocale<'theme-terminal'> & InjectFace<TerminalThemeRowInjected>;
+/** The Appearance row: label + toggle. */
+export declare function TerminalThemeRow({ useTerminalActive, setTerminal, t, }: TerminalThemeRowProps): import("react").JSX.Element;
+//# sourceMappingURL=TerminalThemeRow.d.ts.map

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

@@ -0,0 +1,24 @@
+/**
+ * Terminal theme plugin, browser half: registers the CRT `terminal` theme with
+ * the theme service (alias-token overrides over the dark base palette) and
+ * contributes one Appearance row that activates it. Purely additive — the
+ * default surface is untouched, so every existing slot/widget keeps working
+ * and picks up the palette automatically.
+ */
+import type { Context } from '@deepseek-ai/cordis';
+/** Theme id this plugin registers (the setTheme argument). */
+export declare const THEME_ID = "terminal";
+/** Bare observable snapshot source (getSnapshot + subscribe). */
+export interface ObservableSource<T> {
+    getSnapshot(): T;
+    subscribe(listener: () => void): () => void;
+}
+/** Required services: slot registry for the Appearance row, the theme service, and locale. */
+export declare const inject: string[];
+/**
+ * Client plugin body: register the terminal theme and the Appearance row that
+ * selects it.
+ * @param ctx - client root context.
+ */
+export declare function apply(ctx: Context): void;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,16 @@
+/** `theme-terminal` namespace dictionaries (the Appearance row label). */
+/** Dictionary namespace owned by this plugin. */
+export declare const NS = "theme-terminal";
+/** The dictionary key set (source of truth for both locales). */
+export type ThemeTerminalKey = 'appearance.terminal';
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+    interface LocaleNamespaceMap {
+        /** The terminal theme's Appearance row copy. */
+        'theme-terminal': ThemeTerminalKey;
+    }
+}
+/** Simplified Chinese dictionary. */
+export declare const zh: Record<ThemeTerminalKey, string>;
+/** English dictionary. */
+export declare const en: Record<ThemeTerminalKey, string>;
+//# sourceMappingURL=locales.d.ts.map

package/lib/types/index.d.ts

@@ -0,0 +1,4 @@
+/** Host loader entry for the browser-only terminal-theme plugin. */
+/** Provides no host-side behavior. */
+export declare function apply(): void;
+//# sourceMappingURL=index.d.ts.map

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@danielng23/dsh-cyber-client-ui-theme-terminal",
+  "description": "Terminal (CRT) theme for the web UI: registers a green-on-black alias-token theme and an Appearance row to pick it",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ph4310822/dsh-edex-cyber-ui.git",
+    "directory": "packages/ui-theme-terminal"
+  },
+  "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-runtime",
+        "@deepseek-ai/dsh-client-ui-theme",
+        "@deepseek-ai/dsh-client-locale"
+      ],
+      "platform": "web"
+    }
+  },
+  "files": [
+    "lib/index.js",
+    "lib/client.js",
+    "lib/types/**/*.d.ts"
+  ],
+  "peerDependencies": {
+    "@deepseek-ai/dsh-client-locale": "*",
+    "@deepseek-ai/dsh-client-runtime": "*",
+    "@deepseek-ai/dsh-client-ui-slots": "*",
+    "@deepseek-ai/dsh-client-ui-theme": "*",
+    "@deepseek-ai/cordis": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "*",
+    "@deepseek-ai/dsh-client-runtime": "*",
+    "@deepseek-ai/dsh-client-ui-slots": "*",
+    "@deepseek-ai/dsh-client-ui-theme": "*",
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "license": "MIT"
+}