@calliopelabs/ui 0.1.0 → 0.4.0

package/README.md

@@ -2,7 +2,9 @@
 
 The shared operator UI of Calliope AI: the app shell, navigation, page frame, data table and list patterns, status colours, design tokens and appearance settings that Astrolift AI and Zentinelle AI both run on. Extracted from the Astrolift AI frontend and generalized with a per-product config, so each console keeps its own name, accent, sidebar colour and navigation while sharing everything else.
 
-It is built Storybook first: every component and every screen pattern is built and reviewed in the catalog before an app uses it. The catalog is published at **https://calliopeai.github.io/calliope-ui/**.
+The shared base of the Calliope AI ui series. Product packages (`@calliopelabs/ui-astrolift`, `ui-zentinelle`, `ui-workbench`, later `ui-chat`) depend on it and carry only what is specific to their product. `0.2.0` was published as `@calliopelabs/ui-astrolift` with the same exports; it is deprecated in favour of this package.
+
+It is built Storybook first: every component and every screen pattern is built and reviewed in the catalog before an app uses it. The catalog is published at **https://calliope-ux.astro.conflict.cloud**.
 
 - React 19 and TypeScript, shipped as per-file ESM with types. No Next-only APIs: the app hands the package its link component.
 - Tailwind CSS 4: the theme tokens as CSS, plus a preset.
@@ -73,9 +75,9 @@ const NAV: NavModel = [
 export const astrolift = defineProduct({ ...astroliftBrand, nav: NAV });
 ```
 
-Astrolift AI: leaf green on the deep planet green sidebar (`#04231a`), all six grounds, graphite by default (mist when the system runs light), and its eight named themes.
+Astrolift AI: leaf green on the deep planet green sidebar (`#04231a`), six grounds (every one but navy), graphite by default (mist when the system runs light), and its eight named themes.
 
-Zentinelle AI: teal (`#37efed`, `#0d7470` on light grounds) on the navy sidebar (`#0b0b19`), a true black ground by default, the family accents beside teal, and no emerald ground. Its seven areas gate rows by role:
+Zentinelle AI: teal (`#37efed`, `#0d7470` on light grounds) on the navy sidebar (`#0b0b19`), a true black ground by default, the family accents beside teal, and no emerald or navy ground. Its seven areas gate rows by role:
 
 ```ts
 import { defineProduct, zentinelleBrand, type NavModel } from "@calliopelabs/ui";
@@ -114,6 +116,8 @@ const NAV: NavModel = [
 export const zentinelle = defineProduct({ ...zentinelleBrand, nav: NAV });
 ```
 
+Calliope AI Workbench (`workbenchBrand`): Workbench blue (`#8fb8e8`, `#2f5d94` on light grounds) on a navy sidebar (`#0e1730`), its own navy ground by default (mist when the system runs light), the family accents beside its blue, and no emerald ground.
+
 `defineProduct` validates the config and throws on anything that would paint wrong: a colour that is not lowercase `#rrggbb`, a default ground the product does not offer, a brand accent key the family already uses.
 
 ## Wire the shell
@@ -263,7 +267,7 @@ The package fetches nothing. `DataTable` reads a `TableController`: rows, state,
 
 ## Appearance
 
-The person sets four axes, per product: the **ground** (black, charcoal, graphite, emerald, paper, mist; it decides light or dark), the **accent** (the product's own, a family accent, or any colour that stands 3:1 off the ground), the **density** (`compact` hairline rows or boxed `cards`) and the **corners** (0, 2, 4 or 10 px). `AppearancePicker` is the settings UI for all four.
+The person sets four axes, per product: the **ground** (black, charcoal, graphite, emerald, navy, paper, mist; it decides light or dark), the **accent** (the product's own, a family accent, or any colour that stands 3:1 off the ground), the **density** (`compact` hairline rows or boxed `cards`) and the **corners** (0, 2, 4 or 10 px). `AppearancePicker` is the settings UI for all four.
 
 - Precedence: a locked org theme, then the person's choice, then the org default, then the product default. Until someone picks a ground, light or dark follows the system.
 - An org policy that arrives after sign-in goes in through `useAppearance().setPolicy`. An app that keeps the preference on its server passes `onChange` and hands the server's copy back through `applyServerAppearance`.
@@ -296,11 +300,11 @@ Conventions for contributors and agents are in [`bootstrap.md`](bootstrap.md).
 
 ## Releasing
 
-`publish.yml` publishes to npm as `@calliopelabs/ui` through npm trusted publishing: there is no npm token, the job's GitHub OIDC identity stands in for one, and the package carries provenance. It runs when a GitHub release is published, or by hand on an existing version tag; it refuses a branch. Before anything is published, `release-checks.yml` checks that the tag names the `package.json` version and points at the commit being built, then runs every CI gate on that commit. A prerelease version (`0.2.0-alpha.1`) goes out under the `alpha` dist-tag, and a version already on npm is left alone. Nothing in the workflows bumps a version or creates a tag.
+`publish.yml` publishes to npm as `@calliopelabs/ui` through npm trusted publishing: there is no npm token, the job's GitHub OIDC identity stands in for one. The package carries no provenance while the repository is private: npm accepts provenance only from public repositories. It runs when a GitHub release is published, or by hand on an existing version tag; it refuses a branch. Before anything is published, `release-checks.yml` checks that the tag names the `package.json` version and points at the commit being built, then runs every CI gate on that commit. A prerelease version (`0.2.0-alpha.1`) goes out under the `alpha` dist-tag, and a version already on npm is left alone. Nothing in the workflows bumps a version or creates a tag.
 
 ### The first publish
 
-A brand new package cannot use trusted publishing: npm attaches a trusted publisher to a package that already exists. So `0.1.0` is published once by hand, by an npm account in the `calliopelabs` organization with two-factor authentication on. In a fresh clone of `main`, tag it (a tag push starts no workflow) and publish that clean checkout of the tag:
+A brand new package cannot use trusted publishing: npm attaches a trusted publisher to a package that already exists. So the first version, `0.1.0`, was published once by hand, by an npm account in the `calliopelabs` organization with two-factor authentication on. In a fresh clone of `main`, tag it (a tag push starts no workflow) and publish that clean checkout of the tag:
 
 ```sh
 git clone https://github.com/calliopeai/calliope-ui.git calliope-ui-v0.1.0 && cd calliope-ui-v0.1.0

package/dist/appearance/brands.d.ts

@@ -92,3 +92,97 @@ export declare const zentinelleBrand: {
         readonly light: "mist";
     };
 };
+/**
+ * Calliope AI Workbench (JunoHub, the installer's default theme, the desktop
+ * splash): a sober light blue on navy. The navy comes from junohub `custom.css`
+ * (--calliope-dark); the hub's teal and violet are retired. Dark only today, so
+ * it defaults to its own navy ground, which no other product offers.
+ */
+export declare const workbenchBrand: {
+    readonly id: "workbench";
+    readonly name: "Calliope AI Workbench";
+    readonly accent: {
+        readonly key: "workbench-blue";
+        readonly label: "Workbench blue";
+        readonly dark: "#8fb8e8";
+        readonly onDark: "#0b1120";
+        readonly light: "#2f5d94";
+        readonly onLight: "#f3fbf7";
+    };
+    readonly sidebar: "#0e1730";
+    readonly grounds: readonly ["navy", "black", "charcoal", "graphite", "paper", "mist"];
+    readonly defaultGround: {
+        readonly dark: "navy";
+        readonly light: "mist";
+    };
+};
+/**
+ * Calliope AI Chat Studio: blue, from `sql-agent-ui/src/index.css` (--brand
+ * in :root and .dark, --sidebar-background in .dark).
+ */
+export declare const chatStudioBrand: {
+    readonly id: "chat-studio";
+    readonly name: "Calliope AI Chat Studio";
+    readonly accent: {
+        readonly key: "studio-blue";
+        readonly label: "Studio blue";
+        readonly dark: "#8ab4f8";
+        readonly onDark: "#0c0c0c";
+        readonly light: "#1d4ed8";
+        readonly onLight: "#ffffff";
+    };
+    readonly sidebar: "#080808";
+    readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];
+    readonly defaultGround: {
+        readonly dark: "black";
+        readonly light: "paper";
+    };
+};
+/**
+ * Calliope AI Loadr: Catppuccin blue, from `frontend/src/index.css`
+ * (--ctp-blue for Latte and Mocha, --accent-strong-fg). Sidebar is Mocha's
+ * mantle. Dark by default.
+ */
+export declare const loadrBrand: {
+    readonly id: "loadr";
+    readonly name: "Calliope AI Loadr";
+    readonly accent: {
+        readonly key: "loadr-blue";
+        readonly label: "Loadr blue";
+        readonly dark: "#89b4fa";
+        readonly onDark: "#11111b";
+        readonly light: "#1e66f5";
+        readonly onLight: "#ffffff";
+    };
+    readonly sidebar: "#181825";
+    readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];
+    readonly defaultGround: {
+        readonly dark: "charcoal";
+        readonly light: "paper";
+    };
+};
+/**
+ * Cykick: cyan on near-black with square corners, from
+ * `ui/theme/native-themes.json` (primary, background, radius 0). Cykick's
+ * own plugins read tokens, not these components; the brand keeps the family
+ * values in one place.
+ */
+export declare const cykickBrand: {
+    readonly id: "cykick";
+    readonly name: "Cykick";
+    readonly accent: {
+        readonly key: "cykick-cyan";
+        readonly label: "Cykick cyan";
+        readonly dark: "#22d3ee";
+        readonly onDark: "#07090e";
+        readonly light: "#0e7490";
+        readonly onLight: "#ffffff";
+    };
+    readonly sidebar: "#07090e";
+    readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];
+    readonly defaultGround: {
+        readonly dark: "black";
+        readonly light: "mist";
+    };
+    readonly defaultCorners: 0;
+};

package/dist/appearance/brands.js

@@ -59,3 +59,93 @@ export const zentinelleBrand = {
     grounds: ["black", "charcoal", "graphite", "paper", "mist"],
     defaultGround: { dark: "black", light: "mist" },
 };
+/*
+ * The brands below are copied from what each product ships today, so nothing
+ * changes when an app moves onto the library. Where a product has no value
+ * the model needs (usually a light-ground accent), the nearest one that
+ * passes the contrast tests is used and marked "derived" for the designer.
+ */
+/**
+ * Calliope AI Workbench (JunoHub, the installer's default theme, the desktop
+ * splash): a sober light blue on navy. The navy comes from junohub `custom.css`
+ * (--calliope-dark); the hub's teal and violet are retired. Dark only today, so
+ * it defaults to its own navy ground, which no other product offers.
+ */
+export const workbenchBrand = {
+    id: "workbench",
+    name: "Calliope AI Workbench",
+    accent: {
+        key: "workbench-blue",
+        label: "Workbench blue",
+        dark: "#8fb8e8",
+        onDark: "#0b1120",
+        // derived: the hub has no light ground
+        light: "#2f5d94",
+        onLight: "#f3fbf7",
+    },
+    sidebar: "#0e1730",
+    grounds: ["navy", "black", "charcoal", "graphite", "paper", "mist"],
+    defaultGround: { dark: "navy", light: "mist" },
+};
+/**
+ * Calliope AI Chat Studio: blue, from `sql-agent-ui/src/index.css` (--brand
+ * in :root and .dark, --sidebar-background in .dark).
+ */
+export const chatStudioBrand = {
+    id: "chat-studio",
+    name: "Calliope AI Chat Studio",
+    accent: {
+        key: "studio-blue",
+        label: "Studio blue",
+        dark: "#8ab4f8",
+        onDark: "#0c0c0c",
+        light: "#1d4ed8",
+        onLight: "#ffffff",
+    },
+    sidebar: "#080808",
+    grounds: ["black", "charcoal", "graphite", "paper", "mist"],
+    defaultGround: { dark: "black", light: "paper" },
+};
+/**
+ * Calliope AI Loadr: Catppuccin blue, from `frontend/src/index.css`
+ * (--ctp-blue for Latte and Mocha, --accent-strong-fg). Sidebar is Mocha's
+ * mantle. Dark by default.
+ */
+export const loadrBrand = {
+    id: "loadr",
+    name: "Calliope AI Loadr",
+    accent: {
+        key: "loadr-blue",
+        label: "Loadr blue",
+        dark: "#89b4fa",
+        onDark: "#11111b",
+        light: "#1e66f5",
+        onLight: "#ffffff",
+    },
+    sidebar: "#181825",
+    grounds: ["black", "charcoal", "graphite", "paper", "mist"],
+    defaultGround: { dark: "charcoal", light: "paper" },
+};
+/**
+ * Cykick: cyan on near-black with square corners, from
+ * `ui/theme/native-themes.json` (primary, background, radius 0). Cykick's
+ * own plugins read tokens, not these components; the brand keeps the family
+ * values in one place.
+ */
+export const cykickBrand = {
+    id: "cykick",
+    name: "Cykick",
+    accent: {
+        key: "cykick-cyan",
+        label: "Cykick cyan",
+        dark: "#22d3ee",
+        onDark: "#07090e",
+        // derived: no light accent in native-themes.json
+        light: "#0e7490",
+        onLight: "#ffffff",
+    },
+    sidebar: "#07090e",
+    grounds: ["black", "charcoal", "graphite", "paper", "mist"],
+    defaultGround: { dark: "black", light: "mist" },
+    defaultCorners: 0,
+};

package/dist/appearance/product.d.ts

@@ -36,7 +36,7 @@ export interface ProductConfig {
     accent: FamilyAccent | BrandAccent;
     /** The brand surface: the sidebar on dark grounds (graphite and light grounds stay neutral). */
     sidebar: string;
-    /** The grounds offered, in picker order. All six when absent. */
+    /** The grounds offered, in picker order. All seven when absent. */
     grounds?: readonly Ground[];
     /** The ground until someone chooses: one per mode, following the operating system. */
     defaultGround?: {

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { cn } from "./lib/cn.js";
 export { ACCENTS, ACCENT_KEYS, DENSITIES, DENSITY_KEYS, GROUNDS, GROUND_KEYS, MODE_TOKENS, SURFACES, type AccentSpec, type Density, type FamilyAccent, type Ground, type Mode, type StatusName, } from "./theme/tokens.js";
 export { MIN_NON_TEXT_CONTRAST, MIN_TEXT_CONTRAST, contrastRatio, luminance, } from "./theme/contrast.js";
 export { CORNERS, defineProduct, type BrandAccent, type Corners, type Product, type ProductAccent, type ProductConfig, type ProductTheme, } from "./appearance/product.js";
-export { astroliftBrand, zentinelleBrand } from "./appearance/brands.js";
+export { astroliftBrand, chatStudioBrand, cykickBrand, loadrBrand, workbenchBrand, zentinelleBrand, } from "./appearance/brands.js";
 export { accentContrast, appearanceFromServer, applyAppearance, clearAppearance, inkFor, isCustomAccent, modeFor, normalize, normalizePartial, parseCustomAccent, readAppearance, resolveAppearance, writeAppearance, type Appearance, type CustomAccent, type OrgAppearancePolicy, type ResolvedAppearance, } from "./appearance/appearance.js";
 export { appearanceScript, productStyles } from "./appearance/boot.js";
 export { AppearanceScript, type AppearanceScriptProps } from "./appearance/AppearanceScript.js";

package/dist/index.js

@@ -11,7 +11,7 @@ export { ACCENTS, ACCENT_KEYS, DENSITIES, DENSITY_KEYS, GROUNDS, GROUND_KEYS, MO
 export { MIN_NON_TEXT_CONTRAST, MIN_TEXT_CONTRAST, contrastRatio, luminance, } from "./theme/contrast.js";
 // Product and appearance
 export { CORNERS, defineProduct, } from "./appearance/product.js";
-export { astroliftBrand, zentinelleBrand } from "./appearance/brands.js";
+export { astroliftBrand, chatStudioBrand, cykickBrand, loadrBrand, workbenchBrand, zentinelleBrand, } from "./appearance/brands.js";
 export { accentContrast, appearanceFromServer, applyAppearance, clearAppearance, inkFor, isCustomAccent, modeFor, normalize, normalizePartial, parseCustomAccent, readAppearance, resolveAppearance, writeAppearance, } from "./appearance/appearance.js";
 export { appearanceScript, productStyles } from "./appearance/boot.js";
 export { AppearanceScript } from "./appearance/AppearanceScript.js";

package/dist/styles/theme.css

@@ -200,6 +200,22 @@
   --sidebar-border: rgba(255, 255, 255, 0.08);
 }
 
+/* Ground: Navy (dark) */
+[data-mode="dark"][data-ground="navy"] {
+  --background: #0b1120;
+  --card: #152141;
+  --popover: #1a284a;
+  --secondary: #1d2b50;
+  --muted: #182545;
+  --accent: #213157;
+  --muted-foreground: #97a6c2;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --sidebar: var(--brand-sidebar, #152141);
+  --sidebar-accent: color-mix(in oklab, var(--primary) 16%, transparent);
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+}
+
 /* Ground: Paper (light) */
 [data-mode="light"][data-ground="paper"] {
   --background: #faf6ee;

package/dist/theme/tokens.d.ts

@@ -32,6 +32,10 @@ export declare const GROUNDS: {
         readonly label: "Emerald";
         readonly mode: "dark";
     };
+    readonly navy: {
+        readonly label: "Navy";
+        readonly mode: "dark";
+    };
     readonly paper: {
         readonly label: "Paper";
         readonly mode: "light";

package/dist/theme/tokens.js

@@ -19,6 +19,7 @@ export const GROUNDS = {
     charcoal: { label: "Charcoal", mode: "dark" },
     graphite: { label: "Graphite", mode: "dark" },
     emerald: { label: "Emerald", mode: "dark" },
+    navy: { label: "Navy", mode: "dark" },
     paper: { label: "Paper", mode: "light" },
     mist: { label: "Mist", mode: "light" },
 };
@@ -82,6 +83,27 @@ export const SURFACES = {
         sidebarAccent: PRIMARY_TINT_16,
         sidebarBorder: "rgba(255, 255, 255, 0.08)",
     },
+    /*
+     * Workbench's navy, from JunoHub's palette: page #0b1120 and card
+     * rgba(22, 35, 69, 0.9) composited on the page, with the neutral hairlines
+     * every other dark ground uses. Its text colours are not carried over: foreground is per mode,
+     * and the hub's muted text (#e6e9ee) is not muted, so muted text is a
+     * navy-tinted grey that reads on every panel.
+     */
+    navy: {
+        background: "#0b1120",
+        card: "#152141",
+        popover: "#1a284a",
+        secondary: "#1d2b50",
+        muted: "#182545",
+        accent: "#213157",
+        mutedForeground: "#97a6c2",
+        border: "rgba(255, 255, 255, 0.1)",
+        input: "rgba(255, 255, 255, 0.1)",
+        sidebar: "brand",
+        sidebarAccent: PRIMARY_TINT_16,
+        sidebarBorder: "rgba(255, 255, 255, 0.08)",
+    },
     paper: {
         background: "#faf6ee",
         card: "#fffdf9",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calliopelabs/ui",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "description": "Calliope AI shared operator UI: app shell, navigation, page frame, data table and list patterns, status colours, design tokens and appearance for Astrolift AI and Zentinelle AI.",
   "keywords": [
     "calliope-ai",