@agimon-ai/po-web-components 0.0.0-alpha.0

package/dist/src/types/editor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.cjs","names":["MEDIA_KINDS"],"sources":["../../../src/types/editor.ts"],"sourcesContent":["/**\n * The vocabulary a file surface shares: how a file is shown, and what an\n * editor hands back when a reader selects part of one.\n *\n * It lives here rather than beside the components so a caller can classify a\n * path, or hold a selection in its own state, without pulling the editor\n * chunk in behind it.\n */\n\n/** How a file is shown when its bytes are not text: inline by kind, or offered as a download. */\nexport const MEDIA_KINDS = ['image', 'video', 'pdf', 'download'] as const;\nexport type MediaKind = (typeof MEDIA_KINDS)[number];\n\n/**\n * What a reader picked out, in the terms a review comment needs: the text\n * itself, and where it sits. Lines are one-based, matching what an editor\n * gutter shows, and a caret with nothing selected reports the same line twice\n * with empty text.\n */\nexport interface EditorSelectionRange {\n  text: string;\n  /** Zero-based, half-open offsets in the mounted document. */\n  from: number;\n  to: number;\n  startLine: number;\n  endLine: number;\n}\n\n/** A zero-based half-open range in the mounted editor document. */\nexport interface EditorTextRange {\n  from: number;\n  to: number;\n}\n\n/** A persistent numbered annotation drawn over a mounted editor range. */\nexport interface EditorMarkedRange extends EditorTextRange {\n  label: string;\n}\n/** One replacement applied with the other edits in a single editor transaction. */\nexport interface EditorEdit extends EditorTextRange {\n  insert: string;\n}\n\n/** A client-coordinate rectangle over the visible editor viewport. */\nexport interface EditorViewportRectangle {\n  left: number;\n  top: number;\n  right: number;\n  bottom: number;\n}\n\n/** The deliberately small imperative surface exposed by a mounted editor. */\nexport interface CodeEditorController {\n  focus: () => void;\n  revealAndSelect: (range: EditorTextRange) => void;\n  applyEdits: (edits: readonly EditorEdit[]) => void;\n  setClosedRanges: (ranges: readonly EditorTextRange[]) => void;\n  setMarkedRanges: (ranges: readonly EditorMarkedRange[]) => void;\n  /** Resolves visible geometry to a document-native range, or null when it misses the document. */\n  resolveViewportRegion: (rectangle: EditorViewportRectangle) => EditorSelectionRange | null;\n}\n\nexport interface CodeEditorProps {\n  value: string;\n  /**\n   * The file this content came from. It picks the syntax grammar and nothing\n   * else; leave it off and the editor stays plain text.\n   */\n  path?: string;\n  readOnly?: boolean;\n  /**\n   * Wraps long lines rather than scrolling sideways. On by default, because\n   * the cockpit is read on phones and unwrapped code there is unreadable.\n   */\n  lineWrapping?: boolean;\n  className?: string;\n  'data-testid'?: string;\n  onChange?: (value: string) => void;\n  onSelect?: (range: EditorSelectionRange) => void;\n  /** Receives the controller while the CodeMirror view is mounted, and `null` after it is destroyed. */\n  controllerRef?: import('react').Ref<CodeEditorController>;\n}\n"],"mappings":"AAUA,MAAaA,EAAc,CAAC,QAAS,QAAS,MAAO,UAAU"}

package/dist/src/types/theme.cjs

@@ -0,0 +1,2 @@
+const e=[`bg`,`rail`,`panel`,`deep`,`border`,`border-soft`,`hi`,`text`,`dim`,`faint`,`blue`,`green`,`yellow`,`red`,`magenta`,`violet`,`cyan`,`orange`,`teal`,`selected`],t=[`blue`,`green`,`yellow`,`red`,`magenta`,`violet`,`cyan`,`orange`,`teal`],n=[`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`],r=[...e,...n];function i(e){return`--doom-${e}`}exports.ACCENT_TOKENS=t,exports.DERIVED_TOKENS=n,exports.PALETTE_TOKENS=e,exports.THEME_TOKENS=r,exports.themeVariable=i;
+//# sourceMappingURL=theme.cjs.map

package/dist/src/types/theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.cjs","names":["PALETTE_TOKENS","ACCENT_TOKENS","DERIVED_TOKENS","THEME_TOKENS","themeVariable","token"],"sources":["../../../src/types/theme.ts"],"sourcesContent":["/**\n * The web theme contract: the named colours every cockpit surface is built\n * from. Palette tokens are the hand-picked values a theme must supply; the\n * derived tokens (tinted backgrounds, accented borders) are computed from the\n * palette unless a theme pins them, which is how the shipped dark theme keeps\n * its exact mockup values while a third-party theme needs only the palette.\n */\nexport const PALETTE_TOKENS = [\n  'bg',\n  'rail',\n  'panel',\n  'deep',\n  'border',\n  'border-soft',\n  'hi',\n  'text',\n  'dim',\n  'faint',\n  'blue',\n  'green',\n  'yellow',\n  'red',\n  'magenta',\n  'violet',\n  'cyan',\n  'orange',\n  'teal',\n  'selected',\n] as const;\n\nexport const ACCENT_TOKENS = ['blue', 'green', 'yellow', 'red', 'magenta', 'violet', 'cyan', 'orange', 'teal'] as const;\n\nexport const DERIVED_TOKENS = [\n  'tint-blue',\n  'tint-green',\n  'tint-yellow',\n  'tint-red',\n  'tint-magenta',\n  'tint-violet',\n  'tint-cyan',\n  'tint-orange',\n  'tint-teal',\n  'edge-blue',\n  'edge-green',\n  'edge-yellow',\n  'edge-red',\n  'edge-magenta',\n  'edge-violet',\n  'edge-cyan',\n  'edge-orange',\n  'edge-teal',\n  /**\n   * The readable foreground on the `selected` surface. Derived so an existing\n   * theme stays valid, but a theme whose `selected` is pale must pin it: CSS\n   * cannot pick a contrasting colour on its own, and the fallback assumes a\n   * saturated selection, which is what both shipped themes use.\n   */\n  'on-selected',\n  'font-mono',\n] as const;\n\nexport const THEME_TOKENS = [...PALETTE_TOKENS, ...DERIVED_TOKENS] as const;\n\nexport type PaletteToken = (typeof PALETTE_TOKENS)[number];\nexport type AccentToken = (typeof ACCENT_TOKENS)[number];\nexport type DerivedToken = (typeof DERIVED_TOKENS)[number];\nexport type ThemeToken = (typeof THEME_TOKENS)[number];\n\nexport type ThemeScheme = 'dark' | 'light';\n\n/** A theme config as written in JSON: identity, colour scheme, and the token values. */\nexport interface ThemeConfig {\n  /** Stable id, kebab-case; the `data-theme` attribute and the stored preference. */\n  name: string;\n  /** What a picker shows. */\n  label: string;\n  /** Drives `color-scheme` so native controls and scrollbars match. */\n  scheme: ThemeScheme;\n  tokens: Record<PaletteToken, string> & Partial<Record<DerivedToken, string>>;\n}\n\n/** The CSS custom property a token is published as. */\nexport function themeVariable(token: ThemeToken): `--doom-${ThemeToken}` {\n  return `--doom-${token}`;\n}\n"],"mappings":"AAOA,MAAaA,EAAiB,CAC5B,KACA,OACA,QACA,OACA,SACA,cACA,KACA,OACA,MACA,QACA,OACA,QACA,SACA,MACA,UACA,SACA,OACA,SACA,OACA,UACF,EAEaC,EAAgB,CAAC,OAAQ,QAAS,SAAU,MAAO,UAAW,SAAU,OAAQ,SAAU,MAAM,EAEhGC,EAAiB,CAC5B,YACA,aACA,cACA,WACA,eACA,cACA,YACA,cACA,YACA,YACA,aACA,cACA,WACA,eACA,cACA,YACA,cACA,YAOA,cACA,WACF,EAEaC,EAAe,CAAC,GAAGH,EAAgB,GAAGE,CAAc,EAqBjE,SAAgBE,EAAc,EAA2C,CACvE,MAAO,UAAUC,GACnB"}

package/dist/src/types/tone.cjs

@@ -0,0 +1,2 @@
+const e=[`blue`,`green`,`yellow`,`red`,`magenta`,`violet`,`cyan`,`orange`,`teal`],t=[`neutral`,...e],n=[`neutral`,`muted`,...e],r=[`neutral`,`running`,`ok`,`error`,`info`,`accent`],i=[`hi`,`text`,`dim`,`muted`,`success`,`error`,`warning`,`accent`];exports.ACCENT_TONES=e,exports.CHIP_TONES=t,exports.DOT_TONES=n,exports.MESSAGE_LINE_TONES=i,exports.STATUS_TONES=r;
+//# sourceMappingURL=tone.cjs.map

package/dist/src/types/tone.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tone.cjs","names":["ACCENT_TONES","CHIP_TONES","DOT_TONES","STATUS_TONES","MESSAGE_LINE_TONES"],"sources":["../../../src/types/tone.ts"],"sourcesContent":["/**\n * The tone vocabularies every surface shares.\n *\n * Three of them exist because they answer different questions. A chromatic\n * tone names a colour (\"this chip is violet\"), a status tone names an outcome\n * (\"this run failed\"), and a line tone names a role inside a body of text.\n * They live here, not beside the components that draw them, so a consumer can\n * translate between them without importing a component, and so adding a tone\n * to one table without the others fails to compile.\n */\n\n/** The accents a theme supplies; mirrors ACCENT_TOKENS in ./theme.ts. */\nexport const ACCENT_TONES = ['blue', 'green', 'yellow', 'red', 'magenta', 'violet', 'cyan', 'orange', 'teal'] as const;\nexport type AccentTone = (typeof ACCENT_TONES)[number];\n\n/** What a chip may be: an accent, or the quiet default. */\nexport const CHIP_TONES = ['neutral', ...ACCENT_TONES] as const;\nexport type ChipTone = (typeof CHIP_TONES)[number];\n\n/** A dot adds `muted` for a thing that exists but is not live. */\nexport const DOT_TONES = ['neutral', 'muted', ...ACCENT_TONES] as const;\nexport type DotTone = (typeof DOT_TONES)[number];\n\n/** What happened, rather than what colour it is. */\nexport const STATUS_TONES = ['neutral', 'running', 'ok', 'error', 'info', 'accent'] as const;\nexport type StatusTone = (typeof STATUS_TONES)[number];\n\n/** The role a single line of a message body plays. */\nexport const MESSAGE_LINE_TONES = ['hi', 'text', 'dim', 'muted', 'success', 'error', 'warning', 'accent'] as const;\nexport type MessageLineTone = (typeof MESSAGE_LINE_TONES)[number];\n"],"mappings":"AAYA,MAAaA,EAAe,CAAC,OAAQ,QAAS,SAAU,MAAO,UAAW,SAAU,OAAQ,SAAU,MAAM,EAI/FC,EAAa,CAAC,UAAW,GAAGD,CAAY,EAIxCE,EAAY,CAAC,UAAW,QAAS,GAAGF,CAAY,EAIhDG,EAAe,CAAC,UAAW,UAAW,KAAM,QAAS,OAAQ,QAAQ,EAIrEC,EAAqB,CAAC,KAAM,OAAQ,MAAO,QAAS,UAAW,QAAS,UAAW,QAAQ"}

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/parse.cjs"),n=require("./src/theme/builtinThemes.cjs"),r=require("./src/theme/derive.cjs"),i=require("./src/theme/apply.cjs"),a=require("./src/theme/piTheme.cjs"),o=require("./src/theme/preference.cjs");exports.ACCENT_TOKENS=e.ACCENT_TOKENS,exports.BUILTIN_THEMES=n.BUILTIN_THEMES,exports.DEFAULT_FONT_MONO=r.DEFAULT_FONT_MONO,exports.DEFAULT_THEME=n.DEFAULT_THEME,exports.DEFAULT_THEME_NAME=n.DEFAULT_THEME_NAME,exports.DERIVED_TOKENS=e.DERIVED_TOKENS,exports.PALETTE_TOKENS=e.PALETTE_TOKENS,exports.THEME_ATTRIBUTE=i.THEME_ATTRIBUTE,exports.THEME_STORAGE_KEY=o.THEME_STORAGE_KEY,exports.THEME_TOKENS=e.THEME_TOKENS,exports.applyTheme=i.applyTheme,exports.builtinTheme=n.builtinTheme,exports.derivedFallback=r.derivedFallback,exports.derivedTokens=r.derivedTokens,exports.parseThemeConfig=t.parseThemeConfig,exports.readThemePreference=o.readThemePreference,exports.themeCssText=i.themeCssText,exports.themeCssVariables=i.themeCssVariables,exports.themeFromPiTheme=a.themeFromPiTheme,exports.themeVariable=e.themeVariable,exports.tokenValue=r.tokenValue,exports.writeThemePreference=o.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 "./packages/core/po-web-components/src/types/theme.mjs";
+import { THEME_ATTRIBUTE, ThemeRoot, applyTheme, themeCssText, themeCssVariables } from "./packages/core/po-web-components/src/theme/apply.mjs";
+import { BUILTIN_THEMES, DEFAULT_THEME, DEFAULT_THEME_NAME, builtinTheme } from "./packages/core/po-web-components/src/theme/builtinThemes.mjs";
+import { DEFAULT_FONT_MONO, derivedFallback, derivedTokens, tokenValue } from "./packages/core/po-web-components/src/theme/derive.mjs";
+import { parseThemeConfig } from "./packages/core/po-web-components/src/theme/parse.mjs";
+import { PiThemeBridgeOptions, themeFromPiTheme } from "./packages/core/po-web-components/src/theme/piTheme.mjs";
+import { PreferenceStorage, THEME_STORAGE_KEY, readThemePreference, writeThemePreference } from "./packages/core/po-web-components/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"./packages/core/po-web-components/src/types/theme.mjs";import{parseThemeConfig as a}from"./packages/core/po-web-components/src/theme/parse.mjs";import{BUILTIN_THEMES as o,DEFAULT_THEME as s,DEFAULT_THEME_NAME as c,builtinTheme as l}from"./packages/core/po-web-components/src/theme/builtinThemes.mjs";import{DEFAULT_FONT_MONO as u,derivedFallback as d,derivedTokens as f,tokenValue as p}from"./packages/core/po-web-components/src/theme/derive.mjs";import{THEME_ATTRIBUTE as m,applyTheme as h,themeCssText as g,themeCssVariables as _}from"./packages/core/po-web-components/src/theme/apply.mjs";import{themeFromPiTheme as v}from"./packages/core/po-web-components/src/theme/piTheme.mjs";import{THEME_STORAGE_KEY as y,readThemePreference as b,writeThemePreference as x}from"./packages/core/po-web-components/src/theme/preference.mjs";export{e as ACCENT_TOKENS,o as BUILTIN_THEMES,u as DEFAULT_FONT_MONO,s as DEFAULT_THEME,c as DEFAULT_THEME_NAME,t as DERIVED_TOKENS,n as PALETTE_TOKENS,m as THEME_ATTRIBUTE,y as THEME_STORAGE_KEY,r as THEME_TOKENS,h as applyTheme,l as builtinTheme,d as derivedFallback,f as derivedTokens,a as parseThemeConfig,b as readThemePreference,g as themeCssText,_ as themeCssVariables,v as themeFromPiTheme,i as themeVariable,p as tokenValue,x as writeThemePreference};

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

@@ -0,0 +1,2 @@
+var e={name:`doom-nord-dark`,label:`Po 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:`#939db1`,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":["doom_nord_dark_default","\"bg\"","\"rail\"","\"panel\"","\"deep\"","\"border\"","\"hi\"","\"text\"","\"dim\"","\"faint\"","\"blue\"","\"green\"","\"yellow\"","\"red\"","\"magenta\"","\"violet\"","\"cyan\"","\"orange\"","\"teal\"","\"selected\""],"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:`Po Bloom (dark)`,scheme:`dark`,tokens:{bg:`#1a1d1b`,rail:`#151816`,panel:`#222724`,deep:`#121513`,border:`#4f5852`,"border-soft":`#303733`,hi:`#f2efe8`,text:`#dfdcd4`,dim:`#aeb2aa`,faint:`#a1a69e`,blue:`#8db8cc`,green:`#74c9a2`,yellow:`#dcbc85`,red:`#ec9387`,magenta:`#e8aebd`,violet:`#b6a6d2`,cyan:`#94c7c6`,orange:`#d9ad84`,teal:`#93c3ab`,selected:`#2b7a62`,"tint-magenta":`#3a2a31`,"edge-magenta":`#8c5f6e`,"on-selected":`#fffcf6`}};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":["doom_one_dark_default","\"bg\"","\"rail\"","\"panel\"","\"deep\"","\"border\"","\"hi\"","\"text\"","\"dim\"","\"faint\"","\"blue\"","\"green\"","\"yellow\"","\"red\"","\"magenta\"","\"violet\"","\"cyan\"","\"orange\"","\"teal\"","\"selected\""],"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:`Po Bloom (light)`,scheme:`light`,tokens:{bg:`#f6f1e7`,rail:`#efe9dc`,panel:`#fffcf5`,deep:`#e7e0d1`,border:`#9a9587`,"border-soft":`#ddd6c6`,hi:`#18271f`,text:`#2a3a31`,dim:`#55625a`,faint:`#56645b`,blue:`#285d80`,green:`#1a6b4b`,yellow:`#7a5d1c`,red:`#ad4036`,magenta:`#a2445f`,violet:`#675a80`,cyan:`#2b696c`,orange:`#8c5932`,teal:`#256b52`,selected:`#2b7a62`,"on-selected":`#fffcf6`}};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":["doom_one_light_default","\"bg\"","\"rail\"","\"panel\"","\"deep\"","\"border\"","\"hi\"","\"text\"","\"dim\"","\"faint\"","\"blue\"","\"green\"","\"yellow\"","\"red\"","\"magenta\"","\"violet\"","\"cyan\"","\"orange\"","\"teal\"","\"selected\""],"sources":["../../themes/doom-one-light.json"],"sourcesContent":[""],"mappings":""}

package/llms.txt

@@ -0,0 +1,8 @@
+# @agimon-ai/po-web-components
+
+Package-owned guidance for the Po 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,130 @@
+{
+  "name": "@agimon-ai/po-web-components",
+  "version": "0.0.0-alpha.0",
+  "description": "Shared web components and theme tokens for the Po 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",
+    "pi-package",
+    "po",
+    "react",
+    "shadcn",
+    "tailwind",
+    "theme",
+    "web"
+  ],
+  "homepage": "https://agimon.ai",
+  "bugs": {
+    "url": "https://github.com/AgiFlow/po/issues"
+  },
+  "license": "MIT",
+  "author": "Vuong Ngo",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AgiFlow/po.git",
+    "directory": "packages/core/po-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",
+    "./mcpWidget": {
+      "types": "./dist/mcpWidget.d.mts",
+      "import": "./dist/mcpWidget.mjs",
+      "require": "./dist/mcpWidget.cjs"
+    },
+    "./mcp.css": "./styles/mcp.css",
+    "./nativeTheme": {
+      "types": "./dist/nativeTheme.d.mts",
+      "import": "./dist/nativeTheme.mjs",
+      "require": "./dist/nativeTheme.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@codemirror/commands": "6.11.1",
+    "@codemirror/lang-css": "6.3.1",
+    "@codemirror/lang-html": "6.4.12",
+    "@codemirror/lang-javascript": "6.2.5",
+    "@codemirror/lang-json": "6.0.2",
+    "@codemirror/lang-markdown": "6.5.2",
+    "@codemirror/lang-python": "6.2.1",
+    "@codemirror/lang-yaml": "6.1.3",
+    "@codemirror/language": "6.12.4",
+    "@codemirror/legacy-modes": "6.5.4",
+    "@codemirror/search": "6.7.2",
+    "@codemirror/state": "6.7.6",
+    "@codemirror/view": "6.43.13",
+    "@fontsource-variable/ibm-plex-sans": "5.3.0",
+    "@fontsource-variable/jetbrains-mono": "5.3.0",
+    "@fontsource-variable/source-serif-4": "5.3.0",
+    "@lezer/highlight": "1.2.5",
+    "@modelcontextprotocol/client": "2.2.0",
+    "@modelcontextprotocol/core": "2.2.0",
+    "@modelcontextprotocol/ext-apps": "2.0.3",
+    "@xterm/xterm": "6.0.0",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "lucide-react": "1.49.0",
+    "mermaid": "12.0.0",
+    "pdfjs-dist": "6.3.289",
+    "radix-ui": "1.6.7",
+    "react-markdown": "10.1.0",
+    "remark-gfm": "4.0.1",
+    "tailwind-merge": "3.7.0"
+  },
+  "devDependencies": {
+    "@agimon-ai/po-core": "0.0.0-alpha.0",
+    "@agimon-ai/vibe-lint-plugin-doom-web": "0.0.0-alpha.0",
+    "@types/node": "26.6.4",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitest/coverage-v8": "5.0.3",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "tsdown": "0.23.0",
+    "typescript": "7.0.2",
+    "vitest": "5.0.3"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest --run",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint . && oxfmt . --check",
+    "fixcode": "oxlint . --fix && oxfmt ."
+  }
+}

package/styles/mcp.css

@@ -0,0 +1,22 @@
+@import './theme.css';
+
+/* MCP hosts supply these variables. System colours also work in an offline reference host. */
+:root {
+  color-scheme: light dark;
+  --doom-bg: var(--color-background-primary, Canvas);
+  --doom-panel: var(--color-background-secondary, Canvas);
+  --doom-text: var(--color-text-primary, CanvasText);
+  --doom-hi: var(--color-text-primary, CanvasText);
+  --doom-dim: var(--color-text-secondary, CanvasText);
+  --doom-border: var(--color-border-primary, GrayText);
+  --doom-border-soft: var(--color-border-secondary, GrayText);
+  --doom-red: var(--color-text-danger, CanvasText);
+  --doom-font-mono: var(--font-mono, ui-monospace, monospace);
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans, system-ui, sans-serif);
+  background: var(--doom-bg);
+  color: var(--doom-text);
+}

package/styles/preview.css

@@ -0,0 +1,17 @@
+/*
+ * Render entrypoint for style-system story screenshots.
+ *
+ * This file exists because `styles/tokens.css` is the *consumer-facing* export:
+ * it deliberately does not pull in Tailwind, leaving that to whoever imports it.
+ * The screenshot renderer only injects `@import 'tailwindcss'` when a project
+ * configures no `cssFiles` at all, so a project that names one has to bring
+ * Tailwind itself.
+ *
+ * `@source` for the component sources is appended by the renderer, which scans
+ * `<appPath>/src`. That matters here because theme.css scans `../dist`, which
+ * holds built output rather than the sources a story renders from.
+ *
+ * Referenced by `style-system.config.yaml` (preset `doom-components`).
+ */
+@import 'tailwindcss';
+@import './tokens.css';

package/styles/theme.css

@@ -0,0 +1,311 @@
+/*
+ * Po web theme tokens and base styles, reached through tokens.css (which adds
+ * the fonts) or directly by mcp.css (which must not).
+ *
+ * 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 Po Bloom palette untouched.
+ *
+ * Po Bloom: jade is the primary (calm, handled: Po's own work), rose the
+ * secondary (care, personal: your preferences, a gentle ask, never urgency),
+ * on warm neutrals. Real failures stay red.
+ *
+ * React Native cannot read this file, so src/theme/nativeTheme.ts keeps a
+ * TypeScript copy of the type ramp, radii, spacing base and font families
+ * (published as ./nativeTheme). CSS cannot import TypeScript: change both
+ * together; tests/nativeTheme.test.ts fails when they drift.
+ */
+@source "../dist";
+
+:root {
+  color-scheme: dark;
+  --doom-bg: #1a1d1b;
+  --doom-rail: #151816;
+  --doom-panel: #222724;
+  --doom-deep: #121513;
+  --doom-border: #4f5852;
+  --doom-border-soft: #303733;
+  --doom-hi: #f2efe8;
+  --doom-text: #dfdcd4;
+  --doom-dim: #aeb2aa;
+  --doom-faint: #a1a69e;
+  --doom-blue: #8db8cc;
+  --doom-green: #74c9a2;
+  --doom-yellow: #dcbc85;
+  --doom-red: #ec9387;
+  --doom-magenta: #e8aebd;
+  --doom-violet: #b6a6d2;
+  --doom-cyan: #94c7c6;
+  --doom-orange: #d9ad84;
+  --doom-teal: #93c3ab;
+  --doom-selected: #2b7a62;
+  --doom-tint-blue: color-mix(in srgb, var(--doom-blue) 16%, var(--doom-panel));
+  --doom-tint-green: color-mix(in srgb, var(--doom-green) 16%, var(--doom-panel));
+  --doom-tint-yellow: color-mix(in srgb, var(--doom-yellow) 16%, var(--doom-panel));
+  --doom-tint-red: color-mix(in srgb, var(--doom-red) 16%, var(--doom-panel));
+  /* Pinned: the derived mix lands muddy brown on the green-grey panel. */
+  --doom-tint-magenta: #3a2a31;
+  --doom-tint-violet: color-mix(in srgb, var(--doom-violet) 16%, var(--doom-panel));
+  --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: color-mix(in srgb, var(--doom-blue) 40%, var(--doom-border));
+  --doom-edge-green: color-mix(in srgb, var(--doom-green) 40%, var(--doom-border));
+  --doom-edge-yellow: color-mix(in srgb, var(--doom-yellow) 40%, var(--doom-border));
+  --doom-edge-red: color-mix(in srgb, var(--doom-red) 40%, var(--doom-border));
+  --doom-edge-magenta: #8c5f6e;
+  --doom-edge-violet: color-mix(in srgb, var(--doom-violet) 40%, var(--doom-border));
+  --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: #fffcf6;
+  --doom-font-mono:
+    'JetBrains Mono Variable', '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-selected);
+  --color-primary-foreground: var(--doom-on-selected);
+  --color-secondary: var(--doom-tint-magenta);
+  --color-secondary-foreground: var(--doom-magenta);
+  --color-muted: var(--doom-deep);
+  --color-muted-foreground: var(--doom-dim);
+  --color-accent: var(--doom-tint-green);
+  --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-green);
+
+  /*
+   * Type: IBM Plex Sans for every word of UI, headings included, JetBrains Mono
+   * for code, paths, keys and terminal output. The variable families are bundled
+   * by tokens.css; the static names after them pick up a local install where the
+   * bundle is absent. `font-display` stays as an alias of the sans family so
+   * headings follow it, and an MCP host's `--font-sans`, without a second face.
+   */
+  --font-sans:
+    'IBM Plex Sans Variable', 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
+  --font-display: var(--font-sans);
+  --font-mono: var(--doom-font-mono);
+
+  /*
+   * Type scale.
+   *
+   * Normalised from the nine ad-hoc sizes that had accumulated as `text-[Npx]`
+   * utilities. Tailwind's stock steps (12/14/16/18px) are too large for this
+   * 13px-base terminal UI, which is why they were routinely bypassed; these
+   * values deliberately override them so there is a single scale.
+   *
+   * Line heights are restated for every step. Overriding `--text-*` alone would
+   * leave Tailwind's default `--text-*--line-height` in place, pairing a stale
+   * leading with the new size.
+   */
+  --text-2xs: 9px;
+  --text-2xs--line-height: 1.45;
+  --text-xs: 10px;
+  --text-xs--line-height: 1.45;
+  --text-sm: 12px;
+  --text-sm--line-height: 1.45;
+  --text-base: 13px;
+  --text-base--line-height: 1.5;
+  --text-lg: 15px;
+  --text-lg--line-height: 1.4;
+
+  /* Heading steps, set semibold for dialog, brand and page titles. */
+  --text-xl: 18px;
+  --text-xl--line-height: 1.3;
+  --text-xl--letter-spacing: -0.01em;
+  --text-2xl: 22px;
+  --text-2xl--line-height: 1.25;
+  --text-2xl--letter-spacing: -0.01em;
+  --text-3xl: 28px;
+  --text-3xl--line-height: 1.2;
+  --text-3xl--letter-spacing: -0.01em;
+
+  /* Tailwind's default spacing base, stated explicitly so the value is
+   * discoverable as a token rather than an implicit framework default. */
+  --spacing: 0.25rem;
+
+  /*
+   * Corner radii, tightened to the values this UI actually draws. Tailwind's
+   * stock steps (4/6/8px) sat just wide of the 2/3/5/10px the components were
+   * hand-rolling as `rounded-[Npx]`.
+   *
+   * Only `rounded-xs|sm|md|lg` read these. Bare `rounded`, `rounded-t|b`,
+   * `rounded-full` and `rounded-none` compile to hardcoded values and are not
+   * retunable, so the 4px of a bare `rounded` sits between sm and md by design.
+   */
+  --radius-xs: 2px;
+  --radius-sm: 3px;
+  --radius-md: 5px;
+  --radius-lg: 10px;
+
+  /*
+   * Letter spacing for the uppercase micro-labels this UI leans on. Tailwind's
+   * widest step is 0.1em, which is narrower than every tracking value in the
+   * codebase, so the whole ramp shifts wider rather than adding parallel names.
+   */
+  --tracking-wide: 0.08em;
+  --tracking-wider: 0.14em;
+  --tracking-widest: 0.18em;
+
+  --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;
+  --animate-doom-slide-right: doom-slide-right 180ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-doom-slide-left: doom-slide-left 180ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  @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-slide-right {
+    from {
+      opacity: 0;
+      transform: translateX(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  @keyframes doom-slide-left {
+    from {
+      opacity: 0;
+      transform: translateX(-16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(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(--font-sans);
+    font-size: 13px;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  code,
+  pre,
+  kbd,
+  samp {
+    font-family: var(--doom-font-mono);
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--doom-border);
+    border-radius: 5px;
+  }
+
+  ::selection {
+    background: color-mix(in srgb, var(--doom-magenta) 35%, transparent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}

package/styles/tokens.css

@@ -0,0 +1,15 @@
+/*
+ * The consumer stylesheet (`./styles.css`): the bundled brand fonts, then the
+ * theme tokens and base styles in theme.css.
+ *
+ * Import after Tailwind in the host stylesheet:
+ *   @import 'tailwindcss';
+ *   @import '@agimon-ai/po-web-components/styles.css';
+ *
+ * The fonts sit here rather than in theme.css so mcp.css can take the tokens
+ * without them: an MCP app builds to one self-contained file, and its host
+ * supplies the fonts.
+ */
+@import '@fontsource-variable/ibm-plex-sans';
+@import '@fontsource-variable/jetbrains-mono';
+@import './theme.css';

package/themes/doom-nord-dark.json

@@ -0,0 +1,27 @@
+{
+  "name": "doom-nord-dark",
+  "label": "Po 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": "#939db1",
+    "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,30 @@
+{
+  "name": "doom-one-dark",
+  "label": "Po Bloom (dark)",
+  "scheme": "dark",
+  "tokens": {
+    "bg": "#1a1d1b",
+    "rail": "#151816",
+    "panel": "#222724",
+    "deep": "#121513",
+    "border": "#4f5852",
+    "border-soft": "#303733",
+    "hi": "#f2efe8",
+    "text": "#dfdcd4",
+    "dim": "#aeb2aa",
+    "faint": "#a1a69e",
+    "blue": "#8db8cc",
+    "green": "#74c9a2",
+    "yellow": "#dcbc85",
+    "red": "#ec9387",
+    "magenta": "#e8aebd",
+    "violet": "#b6a6d2",
+    "cyan": "#94c7c6",
+    "orange": "#d9ad84",
+    "teal": "#93c3ab",
+    "selected": "#2b7a62",
+    "tint-magenta": "#3a2a31",
+    "edge-magenta": "#8c5f6e",
+    "on-selected": "#fffcf6"
+  }
+}