@calliopelabs/ui 0.1.0 → 0.3.1

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.
@@ -296,11 +298,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,96 @@ export declare const zentinelleBrand: {
         readonly light: "mist";
     };
 };
+/**
+ * Calliope AI Workbench (JunoHub, the installer's default theme, the desktop
+ * splash): teal on navy. From junohub `custom.css` (--calliope-primary,
+ * --calliope-dark) and the installer's workbench theme. Dark only today.
+ */
+export declare const workbenchBrand: {
+    readonly id: "workbench";
+    readonly name: "Calliope AI Workbench";
+    readonly accent: {
+        readonly key: "workbench-teal";
+        readonly label: "Workbench teal";
+        readonly dark: "#0af0ce";
+        readonly onDark: "#0b1120";
+        readonly light: "#0b7a69";
+        readonly onLight: "#f3fbf7";
+    };
+    readonly sidebar: "#0b1120";
+    readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];
+    readonly defaultGround: {
+        readonly dark: "charcoal";
+        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,92 @@ 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): teal on navy. From junohub `custom.css` (--calliope-primary,
+ * --calliope-dark) and the installer's workbench theme. Dark only today.
+ */
+export const workbenchBrand = {
+    id: "workbench",
+    name: "Calliope AI Workbench",
+    accent: {
+        key: "workbench-teal",
+        label: "Workbench teal",
+        dark: "#0af0ce",
+        onDark: "#0b1120",
+        // derived: the hub has no light ground
+        light: "#0b7a69",
+        onLight: "#f3fbf7",
+    },
+    sidebar: "#0b1120",
+    grounds: ["black", "charcoal", "graphite", "paper", "mist"],
+    defaultGround: { dark: "charcoal", 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calliopelabs/ui",
-  "version": "0.1.0",
+  "version": "0.3.1",
   "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",