@agimon-ai/doompi-web-components 0.0.1-alpha.0

package/dist/theme/derive.d.cts

@@ -0,0 +1,15 @@
+import { DerivedToken, ThemeConfig, ThemeToken } from "../types/theme.cjs";
+//#region src/theme/derive.d.ts
+declare const DEFAULT_FONT_MONO = "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace";
+/**
+ * A derived token's fallback: a CSS colour expression over the palette, so a
+ * theme that supplies only its palette still gets coherent tints and edges.
+ */
+declare function derivedFallback(token: DerivedToken): string;
+/** Every derived token, in a stable order. */
+declare function derivedTokens(): DerivedToken[];
+/** The value a theme publishes for a token: its own, or the derived fallback. */
+declare function tokenValue(theme: ThemeConfig, token: ThemeToken): string;
+//#endregion
+export { DEFAULT_FONT_MONO, derivedFallback, derivedTokens, tokenValue };
+//# sourceMappingURL=derive.d.cts.map

package/dist/theme/derive.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"derive.d.cts","names":[],"sources":["../../src/theme/derive.ts"],"mappings":";;cAea;;;;;iBAOG,gBAAgB,OAAO;;iBAWvB,iBAAiB;;iBASjB,WAAW,OAAO,aAAa,OAAO"}

package/dist/theme/parse.d.cts

@@ -0,0 +1,11 @@
+import { ThemeConfig } from "../types/theme.cjs";
+//#region src/theme/parse.d.ts
+/**
+ * Validates a theme config read from JSON. Returns null rather than throwing
+ * because a bad theme file must never take the cockpit down; the caller falls
+ * back to the shipped default and says so.
+ */
+declare function parseThemeConfig(input: unknown): ThemeConfig | null;
+//#endregion
+export { parseThemeConfig };
+//# sourceMappingURL=parse.d.cts.map

package/dist/theme/parse.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse.d.cts","names":[],"sources":["../../src/theme/parse.ts"],"mappings":";;;;;;;iBAgBgB,iBAAiB,iBAAiB"}

package/dist/theme/piTheme.d.cts

@@ -0,0 +1,20 @@
+import { ThemeConfig, ThemeScheme } from "../types/theme.cjs";
+//#region src/theme/piTheme.d.ts
+interface PiThemeBridgeOptions {
+  /** The web theme's id; defaults to the Pi theme's name. */
+  name?: string;
+  label?: string;
+  /** Forced scheme; otherwise inferred from the background luminance. */
+  scheme?: ThemeScheme;
+}
+/**
+ * Builds a web theme from a Pi TUI theme, so the palette DoomPi ships for
+ * the terminal (doompi-ui/themes/doom-pi-dark.json) drives the browser too.
+ * The mapping is by role, not by name: Pi has no cockpit "deep" surface or
+ * "border-soft" line, so those are mixed from the nearest vars. Returns null
+ * when the input is not a Pi theme with a complete palette.
+ */
+declare function themeFromPiTheme(input: unknown, options?: PiThemeBridgeOptions): ThemeConfig | null;
+//#endregion
+export { PiThemeBridgeOptions, themeFromPiTheme };
+//# sourceMappingURL=piTheme.d.cts.map

package/dist/theme/piTheme.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"piTheme.d.cts","names":[],"sources":["../../src/theme/piTheme.ts"],"mappings":";;UAiCiB;;EAEf;EACA;;EAEA,SAAS;;;;;;;;;iBAUK,iBAAiB,gBAAgB,UAAS,uBAA4B"}

package/dist/theme/preference.d.cts

@@ -0,0 +1,16 @@
+//#region src/theme/preference.d.ts
+/** Where the page remembers the chosen theme; one key, machine-local. */
+declare const THEME_STORAGE_KEY = "doompi.web.theme";
+/** The two Storage calls the preference needs, so tests pass a plain map. */
+interface PreferenceStorage {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+  removeItem(key: string): void;
+}
+/** The stored theme name, or null when nothing was chosen or storage is unavailable. */
+declare function readThemePreference(storage: PreferenceStorage | undefined): string | null;
+/** Remembers a theme name; null forgets it. Storage failures are swallowed: a theme is a convenience. */
+declare function writeThemePreference(storage: PreferenceStorage | undefined, name: string | null): void;
+//#endregion
+export { PreferenceStorage, THEME_STORAGE_KEY, readThemePreference, writeThemePreference };
+//# sourceMappingURL=preference.d.cts.map

package/dist/theme/preference.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preference.d.cts","names":[],"sources":["../../src/theme/preference.ts"],"mappings":";;cACa;;UAGI;EACf,QAAQ;EACR,QAAQ,aAAa;EACrB,WAAW;;;iBAIG,oBAAoB,SAAS;;iBAU7B,qBAAqB,SAAS,+BAA+B"}

package/dist/theme.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./src/types/theme.cjs"),t=require("./src/theme/derive.cjs"),n=require("./src/theme/apply.cjs"),r=require("./src/theme/parse.cjs"),i=require("./src/theme/builtinThemes.cjs"),a=require("./src/theme/piTheme.cjs"),o=require("./src/theme/preference.cjs");exports.ACCENT_TOKENS=e.ACCENT_TOKENS,exports.BUILTIN_THEMES=i.BUILTIN_THEMES,exports.DEFAULT_FONT_MONO=t.DEFAULT_FONT_MONO,exports.DEFAULT_THEME=i.DEFAULT_THEME,exports.DEFAULT_THEME_NAME=i.DEFAULT_THEME_NAME,exports.DERIVED_TOKENS=e.DERIVED_TOKENS,exports.PALETTE_TOKENS=e.PALETTE_TOKENS,exports.THEME_ATTRIBUTE=n.THEME_ATTRIBUTE,exports.THEME_STORAGE_KEY=o.THEME_STORAGE_KEY,exports.THEME_TOKENS=e.THEME_TOKENS,exports.applyTheme=n.applyTheme,exports.builtinTheme=i.builtinTheme,exports.derivedFallback=t.derivedFallback,exports.derivedTokens=t.derivedTokens,exports.parseThemeConfig=r.parseThemeConfig,exports.readThemePreference=o.readThemePreference,exports.themeCssText=n.themeCssText,exports.themeCssVariables=n.themeCssVariables,exports.themeFromPiTheme=a.themeFromPiTheme,exports.themeVariable=e.themeVariable,exports.tokenValue=t.tokenValue,exports.writeThemePreference=o.writeThemePreference;

package/dist/theme.d.cts

@@ -0,0 +1,8 @@
+import { ACCENT_TOKENS, AccentToken, DERIVED_TOKENS, DerivedToken, PALETTE_TOKENS, PaletteToken, THEME_TOKENS, ThemeConfig, ThemeScheme, ThemeToken, themeVariable } from "./types/theme.cjs";
+import { THEME_ATTRIBUTE, ThemeRoot, applyTheme, themeCssText, themeCssVariables } from "./theme/apply.cjs";
+import { BUILTIN_THEMES, DEFAULT_THEME, DEFAULT_THEME_NAME, builtinTheme } from "./theme/builtinThemes.cjs";
+import { DEFAULT_FONT_MONO, derivedFallback, derivedTokens, tokenValue } from "./theme/derive.cjs";
+import { parseThemeConfig } from "./theme/parse.cjs";
+import { PiThemeBridgeOptions, themeFromPiTheme } from "./theme/piTheme.cjs";
+import { PreferenceStorage, THEME_STORAGE_KEY, readThemePreference, writeThemePreference } from "./theme/preference.cjs";
+export { ACCENT_TOKENS, type AccentToken, BUILTIN_THEMES, DEFAULT_FONT_MONO, DEFAULT_THEME, DEFAULT_THEME_NAME, DERIVED_TOKENS, type DerivedToken, PALETTE_TOKENS, type PaletteToken, type PiThemeBridgeOptions, type PreferenceStorage, THEME_ATTRIBUTE, THEME_STORAGE_KEY, THEME_TOKENS, type ThemeConfig, type ThemeRoot, type ThemeScheme, type ThemeToken, applyTheme, builtinTheme, derivedFallback, derivedTokens, parseThemeConfig, readThemePreference, themeCssText, themeCssVariables, themeFromPiTheme, themeVariable, tokenValue, writeThemePreference };

package/dist/theme.d.mts

@@ -0,0 +1,8 @@
+import { ACCENT_TOKENS, AccentToken, DERIVED_TOKENS, DerivedToken, PALETTE_TOKENS, PaletteToken, THEME_TOKENS, ThemeConfig, ThemeScheme, ThemeToken, themeVariable } from "./src/types/theme.mjs";
+import { THEME_ATTRIBUTE, ThemeRoot, applyTheme, themeCssText, themeCssVariables } from "./src/theme/apply.mjs";
+import { BUILTIN_THEMES, DEFAULT_THEME, DEFAULT_THEME_NAME, builtinTheme } from "./src/theme/builtinThemes.mjs";
+import { DEFAULT_FONT_MONO, derivedFallback, derivedTokens, tokenValue } from "./src/theme/derive.mjs";
+import { parseThemeConfig } from "./src/theme/parse.mjs";
+import { PiThemeBridgeOptions, themeFromPiTheme } from "./src/theme/piTheme.mjs";
+import { PreferenceStorage, THEME_STORAGE_KEY, readThemePreference, writeThemePreference } from "./src/theme/preference.mjs";
+export { ACCENT_TOKENS, type AccentToken, BUILTIN_THEMES, DEFAULT_FONT_MONO, DEFAULT_THEME, DEFAULT_THEME_NAME, DERIVED_TOKENS, type DerivedToken, PALETTE_TOKENS, type PaletteToken, type PiThemeBridgeOptions, type PreferenceStorage, THEME_ATTRIBUTE, THEME_STORAGE_KEY, THEME_TOKENS, type ThemeConfig, type ThemeRoot, type ThemeScheme, type ThemeToken, applyTheme, builtinTheme, derivedFallback, derivedTokens, parseThemeConfig, readThemePreference, themeCssText, themeCssVariables, themeFromPiTheme, themeVariable, tokenValue, writeThemePreference };

package/dist/theme.mjs

@@ -0,0 +1 @@
+import{ACCENT_TOKENS as e,DERIVED_TOKENS as t,PALETTE_TOKENS as n,THEME_TOKENS as r,themeVariable as i}from"./src/types/theme.mjs";import{DEFAULT_FONT_MONO as a,derivedFallback as o,derivedTokens as s,tokenValue as c}from"./src/theme/derive.mjs";import{THEME_ATTRIBUTE as l,applyTheme as u,themeCssText as d,themeCssVariables as f}from"./src/theme/apply.mjs";import{parseThemeConfig as p}from"./src/theme/parse.mjs";import{BUILTIN_THEMES as m,DEFAULT_THEME as h,DEFAULT_THEME_NAME as g,builtinTheme as _}from"./src/theme/builtinThemes.mjs";import{themeFromPiTheme as v}from"./src/theme/piTheme.mjs";import{THEME_STORAGE_KEY as y,readThemePreference as b,writeThemePreference as x}from"./src/theme/preference.mjs";export{e as ACCENT_TOKENS,m as BUILTIN_THEMES,a as DEFAULT_FONT_MONO,h as DEFAULT_THEME,g as DEFAULT_THEME_NAME,t as DERIVED_TOKENS,n as PALETTE_TOKENS,l as THEME_ATTRIBUTE,y as THEME_STORAGE_KEY,r as THEME_TOKENS,u as applyTheme,_ as builtinTheme,o as derivedFallback,s as derivedTokens,p as parseThemeConfig,b as readThemePreference,d as themeCssText,f as themeCssVariables,v as themeFromPiTheme,i as themeVariable,c as tokenValue,x as writeThemePreference};

package/dist/themes/doom-nord-dark.cjs

@@ -0,0 +1,2 @@
+var e={name:`doom-nord-dark`,label:`Doom Nord (dark)`,scheme:`dark`,tokens:{bg:`#2e3440`,rail:`#272c36`,panel:`#2b313d`,deep:`#232831`,border:`#434c5e`,"border-soft":`#353c4a`,hi:`#eceff4`,text:`#d8dee9`,dim:`#9aa4b8`,faint:`#616e88`,blue:`#81a1c1`,green:`#a3be8c`,yellow:`#ebcb8b`,red:`#bf616a`,magenta:`#b48ead`,violet:`#a3a7d6`,cyan:`#88c0d0`,orange:`#d08770`,teal:`#8fbcbb`,selected:`#4c6a92`}};Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return e}});
+//# sourceMappingURL=doom-nord-dark.cjs.map

package/dist/themes/doom-nord-dark.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"doom-nord-dark.cjs","names":[],"sources":["../../themes/doom-nord-dark.json"],"sourcesContent":[""],"mappings":""}

package/dist/themes/doom-nord-dark.mjs

@@ -0,0 +1,2 @@
+var e={name:`doom-nord-dark`,label:`Doom Nord (dark)`,scheme:`dark`,tokens:{bg:`#2e3440`,rail:`#272c36`,panel:`#2b313d`,deep:`#232831`,border:`#434c5e`,"border-soft":`#353c4a`,hi:`#eceff4`,text:`#d8dee9`,dim:`#9aa4b8`,faint:`#616e88`,blue:`#81a1c1`,green:`#a3be8c`,yellow:`#ebcb8b`,red:`#bf616a`,magenta:`#b48ead`,violet:`#a3a7d6`,cyan:`#88c0d0`,orange:`#d08770`,teal:`#8fbcbb`,selected:`#4c6a92`}};export{e as default};
+//# sourceMappingURL=doom-nord-dark.mjs.map

package/dist/themes/doom-nord-dark.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"doom-nord-dark.mjs","names":[],"sources":["../../themes/doom-nord-dark.json"],"sourcesContent":[""],"mappings":""}

package/dist/themes/doom-one-dark.cjs

@@ -0,0 +1,2 @@
+var e={name:`doom-one-dark`,label:`Doom One (dark)`,scheme:`dark`,tokens:{bg:`#282c34`,rail:`#21242b`,panel:`#23272e`,deep:`#1c1f24`,border:`#3f444a`,"border-soft":`#2a2e35`,hi:`#dfdfdf`,text:`#bbc2cf`,dim:`#9ca0a4`,faint:`#5b6268`,blue:`#51afef`,green:`#98be65`,yellow:`#ecbe7b`,red:`#ff6c6b`,magenta:`#c678dd`,violet:`#a9a1e1`,cyan:`#46d9ff`,orange:`#da8548`,teal:`#4db5bd`,selected:`#2257a0`,"tint-blue":`#21313f`,"tint-green":`#262e1e`,"tint-yellow":`#312a1c`,"tint-red":`#332428`,"tint-magenta":`#2e2136`,"tint-violet":`#2d253f`,"edge-blue":`#2f4a68`,"edge-green":`#35452e`,"edge-yellow":`#574427`,"edge-red":`#6b3a3a`,"edge-magenta":`#4a3358`,"edge-violet":`#3b3558`}};Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return e}});
+//# sourceMappingURL=doom-one-dark.cjs.map

package/dist/themes/doom-one-dark.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"doom-one-dark.cjs","names":[],"sources":["../../themes/doom-one-dark.json"],"sourcesContent":[""],"mappings":""}

package/dist/themes/doom-one-dark.mjs

@@ -0,0 +1,2 @@
+var e={name:`doom-one-dark`,label:`Doom One (dark)`,scheme:`dark`,tokens:{bg:`#282c34`,rail:`#21242b`,panel:`#23272e`,deep:`#1c1f24`,border:`#3f444a`,"border-soft":`#2a2e35`,hi:`#dfdfdf`,text:`#bbc2cf`,dim:`#9ca0a4`,faint:`#5b6268`,blue:`#51afef`,green:`#98be65`,yellow:`#ecbe7b`,red:`#ff6c6b`,magenta:`#c678dd`,violet:`#a9a1e1`,cyan:`#46d9ff`,orange:`#da8548`,teal:`#4db5bd`,selected:`#2257a0`,"tint-blue":`#21313f`,"tint-green":`#262e1e`,"tint-yellow":`#312a1c`,"tint-red":`#332428`,"tint-magenta":`#2e2136`,"tint-violet":`#2d253f`,"edge-blue":`#2f4a68`,"edge-green":`#35452e`,"edge-yellow":`#574427`,"edge-red":`#6b3a3a`,"edge-magenta":`#4a3358`,"edge-violet":`#3b3558`}};export{e as default};
+//# sourceMappingURL=doom-one-dark.mjs.map

package/dist/themes/doom-one-dark.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"doom-one-dark.mjs","names":[],"sources":["../../themes/doom-one-dark.json"],"sourcesContent":[""],"mappings":""}

package/dist/themes/doom-one-light.cjs

@@ -0,0 +1,2 @@
+var e={name:`doom-one-light`,label:`Doom One (light)`,scheme:`light`,tokens:{bg:`#fafafa`,rail:`#f0f0f0`,panel:`#f4f4f5`,deep:`#e7e7e8`,border:`#d4d4d8`,"border-soft":`#e4e4e7`,hi:`#1c1f24`,text:`#383a42`,dim:`#6b6f78`,faint:`#9ca0a4`,blue:`#4078f2`,green:`#50a14f`,yellow:`#986801`,red:`#e45649`,magenta:`#a626a4`,violet:`#7c5bcf`,cyan:`#0184bc`,orange:`#da8548`,teal:`#2f9c9c`,selected:`#4078f2`}};Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return e}});
+//# sourceMappingURL=doom-one-light.cjs.map

package/dist/themes/doom-one-light.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"doom-one-light.cjs","names":[],"sources":["../../themes/doom-one-light.json"],"sourcesContent":[""],"mappings":""}

package/dist/themes/doom-one-light.mjs

@@ -0,0 +1,2 @@
+var e={name:`doom-one-light`,label:`Doom One (light)`,scheme:`light`,tokens:{bg:`#fafafa`,rail:`#f0f0f0`,panel:`#f4f4f5`,deep:`#e7e7e8`,border:`#d4d4d8`,"border-soft":`#e4e4e7`,hi:`#1c1f24`,text:`#383a42`,dim:`#6b6f78`,faint:`#9ca0a4`,blue:`#4078f2`,green:`#50a14f`,yellow:`#986801`,red:`#e45649`,magenta:`#a626a4`,violet:`#7c5bcf`,cyan:`#0184bc`,orange:`#da8548`,teal:`#2f9c9c`,selected:`#4078f2`}};export{e as default};
+//# sourceMappingURL=doom-one-light.mjs.map

package/dist/themes/doom-one-light.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"doom-one-light.mjs","names":[],"sources":["../../themes/doom-one-light.json"],"sourcesContent":[""],"mappings":""}

package/dist/types/theme.d.cts

@@ -0,0 +1,39 @@
+//#region src/types/theme.d.ts
+/**
+ * The web theme contract: the named colours every cockpit surface is built
+ * from. Palette tokens are the hand-picked values a theme must supply; the
+ * derived tokens (tinted backgrounds, accented borders) are computed from the
+ * palette unless a theme pins them, which is how the shipped dark theme keeps
+ * its exact mockup values while a third-party theme needs only the palette.
+ */
+declare const PALETTE_TOKENS: readonly ['bg', 'rail', 'panel', 'deep', 'border', 'border-soft', 'hi', 'text', 'dim', 'faint', 'blue', 'green', 'yellow', 'red', 'magenta', 'violet', 'cyan', 'orange', 'teal', 'selected'];
+declare const ACCENT_TOKENS: readonly ['blue', 'green', 'yellow', 'red', 'magenta', 'violet', 'cyan', 'orange', 'teal'];
+declare const DERIVED_TOKENS: readonly ['tint-blue', 'tint-green', 'tint-yellow', 'tint-red', 'tint-magenta', 'tint-violet', 'tint-cyan', 'tint-orange', 'tint-teal', 'edge-blue', 'edge-green', 'edge-yellow', 'edge-red', 'edge-magenta', 'edge-violet', 'edge-cyan', 'edge-orange', 'edge-teal',
+/**
+ * The readable foreground on the `selected` surface. Derived so an existing
+ * theme stays valid, but a theme whose `selected` is pale must pin it: CSS
+ * cannot pick a contrasting colour on its own, and the fallback assumes a
+ * saturated selection, which is what both shipped themes use.
+ */
+'on-selected', 'font-mono'];
+declare const THEME_TOKENS: readonly ["bg", "rail", "panel", "deep", "border", "border-soft", "hi", "text", "dim", "faint", "blue", "green", "yellow", "red", "magenta", "violet", "cyan", "orange", "teal", "selected", "tint-blue", "tint-green", "tint-yellow", "tint-red", "tint-magenta", "tint-violet", "tint-cyan", "tint-orange", "tint-teal", "edge-blue", "edge-green", "edge-yellow", "edge-red", "edge-magenta", "edge-violet", "edge-cyan", "edge-orange", "edge-teal", "on-selected", "font-mono"];
+type PaletteToken = (typeof PALETTE_TOKENS)[number];
+type AccentToken = (typeof ACCENT_TOKENS)[number];
+type DerivedToken = (typeof DERIVED_TOKENS)[number];
+type ThemeToken = (typeof THEME_TOKENS)[number];
+type ThemeScheme = 'dark' | 'light';
+/** A theme config as written in JSON: identity, colour scheme, and the token values. */
+interface ThemeConfig {
+  /** Stable id, kebab-case; the `data-theme` attribute and the stored preference. */
+  name: string;
+  /** What a picker shows. */
+  label: string;
+  /** Drives `color-scheme` so native controls and scrollbars match. */
+  scheme: ThemeScheme;
+  tokens: Record<PaletteToken, string> & Partial<Record<DerivedToken, string>>;
+}
+/** The CSS custom property a token is published as. */
+declare function themeVariable(token: ThemeToken): `--doom-${ThemeToken}`;
+//#endregion
+export { ACCENT_TOKENS, AccentToken, DERIVED_TOKENS, DerivedToken, PALETTE_TOKENS, PaletteToken, THEME_TOKENS, ThemeConfig, ThemeScheme, ThemeToken, themeVariable };
+//# sourceMappingURL=theme.d.cts.map

package/dist/types/theme.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.cts","names":[],"sources":["../../src/types/theme.ts"],"mappings":";;;;;;;;cAOa;cAuBA;cAEA;;;;;;;;cA6BA;KAED,uBAAuB;KACvB,sBAAsB;KACtB,uBAAuB;KACvB,qBAAqB;KAErB;;UAGK;;EAEf;;EAEA;;EAEA,QAAQ;EACR,QAAQ,OAAO,wBAAwB,QAAQ,OAAO;;;iBAIxC,cAAc,OAAO,uBAAuB"}

package/dist/types/tone.d.cts

@@ -0,0 +1,29 @@
+//#region src/types/tone.d.ts
+/**
+ * The tone vocabularies every surface shares.
+ *
+ * Three of them exist because they answer different questions. A chromatic
+ * tone names a colour ("this chip is violet"), a status tone names an outcome
+ * ("this run failed"), and a line tone names a role inside a body of text.
+ * They live here, not beside the components that draw them, so a consumer can
+ * translate between them without importing a component, and so adding a tone
+ * to one table without the others fails to compile.
+ */
+/** The accents a theme supplies; mirrors ACCENT_TOKENS in ./theme.ts. */
+declare const ACCENT_TONES: readonly ['blue', 'green', 'yellow', 'red', 'magenta', 'violet', 'cyan', 'orange', 'teal'];
+type AccentTone = (typeof ACCENT_TONES)[number];
+/** What a chip may be: an accent, or the quiet default. */
+declare const CHIP_TONES: readonly ["neutral", "blue", "green", "yellow", "red", "magenta", "violet", "cyan", "orange", "teal"];
+type ChipTone = (typeof CHIP_TONES)[number];
+/** A dot adds `muted` for a thing that exists but is not live. */
+declare const DOT_TONES: readonly ["neutral", "muted", "blue", "green", "yellow", "red", "magenta", "violet", "cyan", "orange", "teal"];
+type DotTone = (typeof DOT_TONES)[number];
+/** What happened, rather than what colour it is. */
+declare const STATUS_TONES: readonly ['neutral', 'running', 'ok', 'error', 'info', 'accent'];
+type StatusTone = (typeof STATUS_TONES)[number];
+/** The role a single line of a message body plays. */
+declare const MESSAGE_LINE_TONES: readonly ['hi', 'text', 'dim', 'muted', 'success', 'error', 'warning', 'accent'];
+type MessageLineTone = (typeof MESSAGE_LINE_TONES)[number];
+//#endregion
+export { ACCENT_TONES, AccentTone, CHIP_TONES, ChipTone, DOT_TONES, DotTone, MESSAGE_LINE_TONES, MessageLineTone, STATUS_TONES, StatusTone };
+//# sourceMappingURL=tone.d.cts.map

package/dist/types/tone.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tone.d.cts","names":[],"sources":["../../src/types/tone.ts"],"mappings":";;;;;;;;;;;;cAYa;KACD,qBAAqB;;cAGpB;KACD,mBAAmB;;cAGlB;KACD,kBAAkB;;cAGjB;KACD,qBAAqB;;cAGpB;KACD,0BAA0B"}

package/llms.txt

@@ -0,0 +1,8 @@
+# @agimon-ai/doompi-web-components
+
+Package-owned guidance for the DoomPi web component library.
+
+## Resources
+
+- [Package README](./README.md): What the library ships, how the cockpit and web plugins consume
+  it, the theme token contract, and how a theme config is written and applied.

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@agimon-ai/doompi-web-components",
+  "version": "0.0.1-alpha.0",
+  "description": "Shared web components and theme tokens for the DoomPi cockpit and its web plugins: shadcn-style primitives on Radix, tuned to the Doom palette, with runtime theme configs.",
+  "keywords": [
+    "ai",
+    "coding-agent",
+    "components",
+    "design-system",
+    "developer-tools",
+    "doompi",
+    "pi-package",
+    "react",
+    "shadcn",
+    "tailwind",
+    "theme",
+    "web"
+  ],
+  "homepage": "https://agimon.ai",
+  "bugs": {
+    "url": "https://github.com/AgiFlow/doompi/issues"
+  },
+  "license": "MIT",
+  "author": "Vuong Ngo",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AgiFlow/doompi.git",
+    "directory": "packages/core/doompi-web-components"
+  },
+  "files": [
+    "dist",
+    "styles",
+    "themes",
+    "llms.txt",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.mts",
+  "jsnext:main": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.mts",
+      "import": "./dist/theme.mjs",
+      "require": "./dist/theme.cjs"
+    },
+    "./styles.css": "./styles/tokens.css",
+    "./themes/*.json": "./themes/*.json",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "lucide-react": "1.31.0",
+    "radix-ui": "1.6.7",
+    "react-markdown": "10.1.0",
+    "remark-gfm": "4.0.1",
+    "tailwind-merge": "3.6.0"
+  },
+  "devDependencies": {
+    "@types/node": "26.2.0",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.4",
+    "@vitest/coverage-v8": "4.1.11",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "tsdown": "0.22.14",
+    "typescript": "7.0.2",
+    "vitest": "4.1.11",
+    "@agimon-ai/vibe-lint-plugin-doom-web": "0.0.1-alpha.36"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "engines": {
+    "node": ">=22.19.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest --run",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint . && oxfmt . --check",
+    "fixcode": "oxlint . --fix && oxfmt ."
+  }
+}

package/styles/tokens.css

@@ -0,0 +1,202 @@
+/*
+ * DoomPi web theme tokens and base styles.
+ *
+ * Import after Tailwind in the host stylesheet:
+ *   @import 'tailwindcss';
+ *   @import '@agimon-ai/doompi-web-components/styles.css';
+ *
+ * Tokens are plain custom properties on :root (the shipped dark theme, so a
+ * page without JavaScript already looks right) mapped inline into Tailwind's
+ * theme, which is what lets applyTheme() swap every utility's colour at
+ * runtime by rewriting the properties. The shadcn semantic names alias the
+ * same tokens so stock component code renders on the Doom palette untouched.
+ */
+@source "../dist";
+
+:root {
+  color-scheme: dark;
+  --doom-bg: #282c34;
+  --doom-rail: #21242b;
+  --doom-panel: #23272e;
+  --doom-deep: #1c1f24;
+  --doom-border: #3f444a;
+  --doom-border-soft: #2a2e35;
+  --doom-hi: #dfdfdf;
+  --doom-text: #bbc2cf;
+  --doom-dim: #9ca0a4;
+  --doom-faint: #5b6268;
+  --doom-blue: #51afef;
+  --doom-green: #98be65;
+  --doom-yellow: #ecbe7b;
+  --doom-red: #ff6c6b;
+  --doom-magenta: #c678dd;
+  --doom-violet: #a9a1e1;
+  --doom-cyan: #46d9ff;
+  --doom-orange: #da8548;
+  --doom-teal: #4db5bd;
+  --doom-selected: #2257a0;
+  --doom-tint-blue: #21313f;
+  --doom-tint-green: #262e1e;
+  --doom-tint-yellow: #312a1c;
+  --doom-tint-red: #332428;
+  --doom-tint-magenta: #2e2136;
+  --doom-tint-violet: #2d253f;
+  --doom-tint-cyan: color-mix(in srgb, var(--doom-cyan) 16%, var(--doom-panel));
+  --doom-tint-orange: color-mix(in srgb, var(--doom-orange) 16%, var(--doom-panel));
+  --doom-tint-teal: color-mix(in srgb, var(--doom-teal) 16%, var(--doom-panel));
+  --doom-edge-blue: #2f4a68;
+  --doom-edge-green: #35452e;
+  --doom-edge-yellow: #574427;
+  --doom-edge-red: #6b3a3a;
+  --doom-edge-magenta: #4a3358;
+  --doom-edge-violet: #3b3558;
+  --doom-edge-cyan: color-mix(in srgb, var(--doom-cyan) 40%, var(--doom-border));
+  --doom-edge-orange: color-mix(in srgb, var(--doom-orange) 40%, var(--doom-border));
+  --doom-edge-teal: color-mix(in srgb, var(--doom-teal) 40%, var(--doom-border));
+  /* The label on a selected row; a theme with a pale `selected` pins this. */
+  --doom-on-selected: color-mix(in srgb, var(--doom-selected) 12%, white);
+  --doom-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+@theme inline {
+  --color-doom-bg: var(--doom-bg);
+  --color-doom-rail: var(--doom-rail);
+  --color-doom-panel: var(--doom-panel);
+  --color-doom-deep: var(--doom-deep);
+  --color-doom-border: var(--doom-border);
+  --color-doom-border-soft: var(--doom-border-soft);
+  --color-doom-hi: var(--doom-hi);
+  --color-doom-text: var(--doom-text);
+  --color-doom-dim: var(--doom-dim);
+  --color-doom-faint: var(--doom-faint);
+  --color-doom-blue: var(--doom-blue);
+  --color-doom-green: var(--doom-green);
+  --color-doom-yellow: var(--doom-yellow);
+  --color-doom-red: var(--doom-red);
+  --color-doom-magenta: var(--doom-magenta);
+  --color-doom-violet: var(--doom-violet);
+  --color-doom-cyan: var(--doom-cyan);
+  --color-doom-orange: var(--doom-orange);
+  --color-doom-teal: var(--doom-teal);
+  --color-doom-selected: var(--doom-selected);
+  --color-doom-tint-blue: var(--doom-tint-blue);
+  --color-doom-tint-green: var(--doom-tint-green);
+  --color-doom-tint-yellow: var(--doom-tint-yellow);
+  --color-doom-tint-red: var(--doom-tint-red);
+  --color-doom-tint-magenta: var(--doom-tint-magenta);
+  --color-doom-tint-violet: var(--doom-tint-violet);
+  --color-doom-tint-cyan: var(--doom-tint-cyan);
+  --color-doom-tint-orange: var(--doom-tint-orange);
+  --color-doom-tint-teal: var(--doom-tint-teal);
+  --color-doom-edge-blue: var(--doom-edge-blue);
+  --color-doom-edge-green: var(--doom-edge-green);
+  --color-doom-edge-yellow: var(--doom-edge-yellow);
+  --color-doom-edge-red: var(--doom-edge-red);
+  --color-doom-edge-magenta: var(--doom-edge-magenta);
+  --color-doom-edge-violet: var(--doom-edge-violet);
+  --color-doom-edge-cyan: var(--doom-edge-cyan);
+  --color-doom-edge-orange: var(--doom-edge-orange);
+  --color-doom-edge-teal: var(--doom-edge-teal);
+  --color-doom-on-selected: var(--doom-on-selected);
+
+  /* shadcn semantic aliases, so stock component code lands on the palette. */
+  --color-background: var(--doom-bg);
+  --color-foreground: var(--doom-text);
+  --color-card: var(--doom-panel);
+  --color-card-foreground: var(--doom-text);
+  --color-popover: var(--doom-panel);
+  --color-popover-foreground: var(--doom-text);
+  --color-primary: var(--doom-blue);
+  --color-primary-foreground: var(--doom-rail);
+  --color-secondary: var(--doom-deep);
+  --color-secondary-foreground: var(--doom-hi);
+  --color-muted: var(--doom-deep);
+  --color-muted-foreground: var(--doom-dim);
+  --color-accent: var(--doom-tint-blue);
+  --color-accent-foreground: var(--doom-hi);
+  --color-destructive: var(--doom-red);
+  --color-destructive-foreground: var(--doom-rail);
+  --color-border: var(--doom-border);
+  --color-input: var(--doom-border);
+  --color-ring: var(--doom-blue);
+
+  --font-mono: var(--doom-font-mono);
+
+  --animate-doom-fade: doom-fade 140ms ease-out;
+  --animate-doom-pop: doom-pop 160ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-doom-rise: doom-rise 160ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-doom-blink: doom-blink 1s steps(2, start) infinite;
+
+  @keyframes doom-fade {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes doom-pop {
+    from {
+      opacity: 0;
+      transform: translateY(4px) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+  @keyframes doom-rise {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes doom-blink {
+    50% {
+      opacity: 0;
+    }
+  }
+}
+
+@layer base {
+  html,
+  body {
+    height: 100%;
+  }
+
+  body {
+    margin: 0;
+    background-color: var(--doom-bg);
+    color: var(--doom-text);
+    font-family: var(--doom-font-mono);
+    font-size: 13px;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--doom-border);
+    border-radius: 5px;
+  }
+
+  ::selection {
+    background: color-mix(in srgb, var(--doom-blue) 35%, transparent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}

package/themes/doom-nord-dark.json

@@ -0,0 +1,27 @@
+{
+  "name": "doom-nord-dark",
+  "label": "Doom Nord (dark)",
+  "scheme": "dark",
+  "tokens": {
+    "bg": "#2e3440",
+    "rail": "#272c36",
+    "panel": "#2b313d",
+    "deep": "#232831",
+    "border": "#434c5e",
+    "border-soft": "#353c4a",
+    "hi": "#eceff4",
+    "text": "#d8dee9",
+    "dim": "#9aa4b8",
+    "faint": "#616e88",
+    "blue": "#81a1c1",
+    "green": "#a3be8c",
+    "yellow": "#ebcb8b",
+    "red": "#bf616a",
+    "magenta": "#b48ead",
+    "violet": "#a3a7d6",
+    "cyan": "#88c0d0",
+    "orange": "#d08770",
+    "teal": "#8fbcbb",
+    "selected": "#4c6a92"
+  }
+}

package/themes/doom-one-dark.json

@@ -0,0 +1,39 @@
+{
+  "name": "doom-one-dark",
+  "label": "Doom One (dark)",
+  "scheme": "dark",
+  "tokens": {
+    "bg": "#282c34",
+    "rail": "#21242b",
+    "panel": "#23272e",
+    "deep": "#1c1f24",
+    "border": "#3f444a",
+    "border-soft": "#2a2e35",
+    "hi": "#dfdfdf",
+    "text": "#bbc2cf",
+    "dim": "#9ca0a4",
+    "faint": "#5b6268",
+    "blue": "#51afef",
+    "green": "#98be65",
+    "yellow": "#ecbe7b",
+    "red": "#ff6c6b",
+    "magenta": "#c678dd",
+    "violet": "#a9a1e1",
+    "cyan": "#46d9ff",
+    "orange": "#da8548",
+    "teal": "#4db5bd",
+    "selected": "#2257a0",
+    "tint-blue": "#21313f",
+    "tint-green": "#262e1e",
+    "tint-yellow": "#312a1c",
+    "tint-red": "#332428",
+    "tint-magenta": "#2e2136",
+    "tint-violet": "#2d253f",
+    "edge-blue": "#2f4a68",
+    "edge-green": "#35452e",
+    "edge-yellow": "#574427",
+    "edge-red": "#6b3a3a",
+    "edge-magenta": "#4a3358",
+    "edge-violet": "#3b3558"
+  }
+}