@ciridae/ui 1.0.2 → 1.0.4

package/dist/theme/palettes.js

@@ -1,11 +1,16 @@
 import { lean } from "./color.js";
 export const PALETTE_NAMES = ["ciridae", "ocean", "moss", "violet", "ember"];
-/* The kit's own greys: today's dark, and the Figma's crisp light, each face flattened to its middle. */
+/** The third chart category: no status hue is indigo, so every palette shares this one. */
+export const chartIndigo = { base: "#8A86FF", _light: "#5B56EE" };
+/*
+ * The kit's own greys, from the Ciridae OS Figma: each face it paints as a gradient is kept as its
+ * two ends and flattened to its middle. A dark card is white glass, washed in at 5%.
+ */
 const ciridaeGreys = {
     dark: {
         canvas: "#141416",
         panel: "#27272A",
-        card: "#212124",
+        card: "#FFFFFF",
         well: "#1D1D20",
         avatar: "#36363C",
         primary: "#FFFFFF",
@@ -18,6 +23,7 @@ const ciridaeGreys = {
         cardBorder: "#3C3C3C",
         mark: "#898887",
         hairline: "#3B342B",
+        menuHoverBorder: "#3C3C3C",
         wash: "#FFFFFF",
         shade: "#141416",
         focus: "#827F7A",
@@ -28,24 +34,37 @@ const ciridaeGreys = {
         raised: "#C1BFBD",
         hover: "#C1BFBD",
         knob: "#FFFFFF",
+        scrim: "#141416",
+        popover: "#141416",
+        modalShell: "#FFFFFF",
+        modalSheet: "#FFFFFF",
+        drawerShell: "#27272A",
+        drawerSheet: "#2B2B2D",
+        gradients: {
+            canvas: ["#141416", "#141416"],
+            panel: ["#27272A", "#27272A"],
+            raised: ["#FFFFFF", "#827F7A"],
+            selected: ["#FFFFFF", "#827F7A"],
+        },
     },
     light: {
         canvas: "#E1E1E1",
         panel: "#F8F8F8",
-        card: "#FFFFFF",
+        card: "#FBFBFB",
         well: "#EEEEEE",
         avatar: "#D8D8DE",
         primary: "#2A2A2D",
-        secondary: "#3F3F45",
-        muted: "#7B7B7E",
+        secondary: "#7B7B7E",
+        muted: "#98989E",
         subtle: "#98989E",
         archived: "#5A5854",
-        line: "#E2E2E6",
+        line: "#CDCDCD",
         border: "#CDCDCD",
-        cardBorder: "#E2E2E2",
+        cardBorder: "#CDCDCD",
         mark: "#A7A7A7",
         hairline: "#E0DAD0",
-        wash: "#141416",
+        menuHoverBorder: "#D8D8D8",
+        wash: "#2A2A2D",
         shade: "#141416",
         focus: "#6B6A68",
         surface: "#FBFBFC",
@@ -55,6 +74,18 @@ const ciridaeGreys = {
         raised: "#F3F3F4",
         hover: "#4B4A48",
         knob: "#FBFBFB",
+        scrim: "#2A2A2D",
+        popover: "#F0F0F0",
+        modalShell: "#EEEEEE",
+        modalSheet: "#FBFBFB",
+        drawerShell: "#F0F0F0",
+        drawerSheet: "#FBFBFB",
+        gradients: {
+            canvas: ["#D8D8D8", "#EBEBEB"],
+            panel: ["#F0F0F0", "#FFFFFF"],
+            raised: ["#FDFDFD", "#E8E9EA"],
+            selected: ["#F8F8F8", "#ECECEC"],
+        },
     },
 };
 /*
@@ -66,6 +97,7 @@ function leanedGreys(hue) {
     const leanAll = (greys, toward) => {
         const surface = (grey) => lean(grey, toward, 1);
         const ink = (grey) => lean(grey, toward, 0.5);
+        const surfaceGradient = ([from, to]) => [surface(from), surface(to)];
         return {
             canvas: surface(greys.canvas),
             panel: surface(greys.panel),
@@ -82,6 +114,7 @@ function leanedGreys(hue) {
             cardBorder: ink(greys.cardBorder),
             mark: ink(greys.mark),
             hairline: ink(greys.hairline),
+            menuHoverBorder: ink(greys.menuHoverBorder),
             wash: surface(greys.wash),
             shade: surface(greys.shade),
             focus: ink(greys.focus),
@@ -92,6 +125,18 @@ function leanedGreys(hue) {
             raised: surface(greys.raised),
             hover: surface(greys.hover),
             knob: surface(greys.knob),
+            scrim: surface(greys.scrim),
+            popover: surface(greys.popover),
+            modalShell: surface(greys.modalShell),
+            modalSheet: surface(greys.modalSheet),
+            drawerShell: surface(greys.drawerShell),
+            drawerSheet: surface(greys.drawerSheet),
+            gradients: {
+                canvas: surfaceGradient(greys.gradients.canvas),
+                panel: surfaceGradient(greys.gradients.panel),
+                raised: surfaceGradient(greys.gradients.raised),
+                selected: surfaceGradient(greys.gradients.selected),
+            },
         };
     };
     return {
@@ -99,30 +144,54 @@ function leanedGreys(hue) {
         light: leanAll(ciridaeGreys.light, hue._light),
     };
 }
-/* The kit's own warm glass, which every palette but ember keeps. */
+/* The kit's own warm glass, which every palette but ember keeps. The flat face is its middle. */
 const amberTint = {
     face: { base: "#FFE6BD", _light: "#F2EFEB" },
+    faceGradient: { base: ["#FFFFFF", "#FFCD7B"], _light: ["#FDFDFD", "#E8E2D9"] },
+    edge: { base: ["#FFF1C9", "#A47D28"], _light: ["#B5AF87", "#BF8931"] },
 };
 export const palettes = {
-    /* Today's look: a monochrome primary that inverts with the theme, and the kit's warm gold. */
+    /*
+     * The Ciridae OS look: a monochrome primary that inverts with the theme, the kit's warm gold,
+     * and a blue focus ring apart from it.
+     */
     ciridae: {
         greys: ciridaeGreys,
         accent: { base: "#D1B778", _light: "#8A6D33" },
+        focusRing: { base: "#66B7F1", _light: "#4186B8" },
         primary: { base: "#FFFFFF", _light: "#37373A" },
+        primaryGradient: { base: ["#FFFFFF", "#FFFFFF"], _light: ["#57575B", "#171719"] },
         status: {
             green: {
                 text: { base: "#45A999", _light: "#488F83" },
                 wash: { base: "#45A999", _light: "#3D8B7D" },
+                dark: { base: "#45A999", _light: "#698984" },
             },
-            red: { text: { base: "#F7644F", _light: "#C4594B" } },
-            yellow: { text: { base: "#DFBB65", _light: "#93793A" } },
-            blue: {
-                text: { base: "#66B7F2", _light: "#4186B8" },
-                wash: { base: "#66B7F2", _light: "#4189C4" },
+            red: {
+                text: { base: "#F7644F", _light: "#EB442C" },
+                dark: { base: "#F7644F", _light: "#986159" },
             },
+            yellow: {
+                text: { base: "#DFBB65", _light: "#B27D00" },
+                icon: { base: "#DFBB65", _light: "#DB972A" },
+            },
+            blue: { text: { base: "#66B7F1", _light: "#4186B8" } },
         },
         bronze: { base: "#725D42", _light: "#6D6554" },
         tint: amberTint,
+        chart: {
+            bar: { base: "#66B7F1", _light: "#72BFF6" },
+            trend: { base: "#66B7F1", _light: "#4186B8" },
+            area: { base: ["#FFFFFF", "#A4D5F8"], _light: ["#60BCFF", "#FFFFFF"] },
+            categories: [
+                { base: "#DFBB65", _light: "#F8B853" },
+                { base: "#45A999", _light: "#488F83" },
+                chartIndigo,
+                { base: "#F7644F", _light: "#EB442C" },
+            ],
+            progress: { base: ["#A6D6FA", "#4D9CD9"], _light: ["#7AC1F4", "#4186B8"] },
+            atRisk: { base: ["#F2D995", "#C99E3E"], _light: ["#F8B853", "#DB972A"] },
+        },
     },
     /* A cool blue, where the primary takes the accent. */
     ocean: {

package/dist/theme/tokens.d.ts

@@ -2,9 +2,9 @@ import { type PaletteTokens } from "./derive.js";
 import { type CiridaeTheme, type ColorTheme } from "./options.js";
 import { type ThemedColor } from "./palettes.js";
 export type ThemeTokens = {
-    colors: Record<keyof PaletteTokens["colors"] | "border.focus" | "border.error" | "bg.canvas" | "bg.panel" | "bg.card" | "bg.surface" | "bg.avatar" | "bg.field" | "bg.fieldDisabled" | "bg.control" | "bg.pill" | "bg.glass" | "bg.glassHover" | "bg.raised" | "bg.raisedHover" | "bg.check" | "bg.hover" | "bg.fill" | "bg.rowHover" | "bg.track" | "bg.knob" | "fg.primary" | "fg.secondary" | "fg.muted" | "fg.subtle" | "fg.archived" | "border.subtle" | "border.control" | "border.panel" | "border.card" | "border.mark" | "border.glass" | "border.toolbar" | "border.hairline", ThemedColor>;
-    gradients: Record<"skeleton", ThemedColor>;
-    shadows: Record<"search" | "inset" | "card" | "focus" | "glow" | "toast" | "control.raised" | "control.raisedHover" | "control.pressed", ThemedColor>;
+    colors: Record<keyof PaletteTokens["colors"] | "border.focus" | "border.error" | "bg.canvas" | "bg.panel" | "bg.card" | "bg.surface" | "bg.avatar" | "bg.backdrop" | "bg.popover" | "bg.modalShell" | "bg.modalSheet" | "bg.drawerShell" | "bg.drawerSheet" | "bg.field" | "bg.formField" | "bg.openTrigger" | "bg.fieldDisabled" | "bg.control" | "bg.pill" | "bg.glass" | "bg.glassHover" | "bg.raised" | "bg.raisedHover" | "bg.check" | "bg.hover" | "bg.controlHover" | "bg.pressed" | "bg.fill" | "bg.rowHover" | "bg.track" | "bg.knob" | "fg.primary" | "fg.secondary" | "fg.muted" | "fg.subtle" | "fg.quietGlyph" | "fg.label" | "fg.archived" | "border.subtle" | "border.control" | "border.panel" | "border.card" | "border.canvas" | "border.divider" | "border.menuHover" | "border.mark" | "border.glass" | "border.hairline" | "chart.neutral" | "chart.notStarted", ThemedColor>;
+    gradients: Record<keyof PaletteTokens["gradients"] | "skeletonFill" | "canvas" | "panel" | "card" | "raised" | "raisedHover" | "selected" | "rowHover", ThemedColor>;
+    shadows: Record<"search" | "inset" | "card" | "soft" | "focus" | "glow" | "toast" | "control.raised" | "control.raisedHover" | "control.pressed", ThemedColor>;
     fonts: {
         display: string;
         sans: string;

package/dist/theme/tokens.js

@@ -1,7 +1,10 @@
-import { alpha } from "./color.js";
-import { derivePaletteTokens } from "./derive.js";
+import { alpha, linearGradient } from "./color.js";
+import { derivePaletteTokens, themedGradient } from "./derive.js";
 import { defaultTheme } from "./options.js";
 import { palettes } from "./palettes.js";
+/* The two elevations, the same in both themes: a card's, and the softer one a sheet or toast casts. */
+const cardElevation = "0 1px 4px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.03)";
+const softElevation = "0 1px 2px rgba(0,0,0,.04), 0 6px 20px -4px rgba(0,0,0,.05)";
 /**
  * Every token value a theme decides. `createCiridaePreset` bakes these into the stylesheet;
  * `themeVariables` writes the same values over it at runtime, so the two never drift.
@@ -10,23 +13,54 @@ export function deriveThemeTokens(theme = {}) {
     const source = palettes[theme.palette ?? defaultTheme.palette];
     const palette = derivePaletteTokens(source);
     const { dark, light } = source.greys;
+    const face = (name, opacity) => themedGradient("to bottom", { base: dark.gradients[name], _light: light.gradients[name] }, opacity);
     return {
         colors: {
             ...palette.colors,
-            // Focus is the brand accent in both themes. Set from the palette, not by reference: Panda
-            // renders a reference to a dotted semantic token as an undefined variable.
-            "border.focus": palette.colors["accent.brand"],
-            // A field's edge once invalid: the accent red in dark, a quieter dark red in light.
-            "border.error": { base: palette.colors["accent.red"].base, _light: "rgba(168,71,71,.33)" },
+            // Focus is the palette's focus ring, its accent unless it names another. Set from the
+            // palette, not by reference: Panda renders a reference to a dotted semantic token as an
+            // undefined variable.
+            "border.focus": source.focusRing ?? source.accent,
+            // A field's edge once invalid: the palette's red, at full strength in both themes.
+            "border.error": palette.colors["accent.red"],
             "bg.canvas": { base: dark.canvas, _light: light.canvas },
             // The app's main surface and its panels: a translucent lift off the canvas.
             "bg.panel": { base: alpha(dark.panel, 0.66), _light: alpha(light.panel, 0.66) },
-            "bg.card": { base: dark.card, _light: light.card },
+            // A card: white glass in dark, a near-white solid in light.
+            "bg.card": { base: alpha(dark.card, 0.05), _light: light.card },
             // A dialog, drawer or stat card: the card lifted a step.
             "bg.surface": { base: dark.surface, _light: light.surface },
             "bg.avatar": { base: dark.avatar, _light: light.avatar },
-            // The well of a field you type into or pick from; flat, where the raised faces are glass.
-            "bg.field": { base: alpha(dark.well, 0.33), _light: alpha(light.well, 0.66) },
+            // Behind a modal, full screen; the design gives a drawer none.
+            "bg.backdrop": { base: alpha(dark.scrim, 0.6), _light: alpha(light.scrim, 0.24) },
+            /*
+             * The overlays' glass, blurred by the `blurs.*` token of the same name. A popover or menu
+             * is one glass face; a modal and a drawer are a glass shell holding a sheet.
+             */
+            "bg.popover": { base: alpha(dark.popover, 0.6), _light: alpha(light.popover, 0.33) },
+            "bg.modalShell": {
+                base: alpha(dark.modalShell, 0.01),
+                _light: alpha(light.modalShell, 0.66),
+            },
+            "bg.modalSheet": {
+                base: alpha(dark.modalSheet, 0.01),
+                _light: alpha(light.modalSheet, 0.88),
+            },
+            "bg.drawerShell": {
+                base: alpha(dark.drawerShell, 0.33),
+                _light: alpha(light.drawerShell, 0.33),
+            },
+            "bg.drawerSheet": { base: dark.drawerSheet, _light: alpha(light.drawerSheet, 0.88) },
+            // A flat well on the canvas or a sheet -- a tab or saved-view track, the nav pill: white at
+            // 5% in dark, where the raised faces are glass.
+            "bg.field": { base: alpha(dark.wash, 0.05), _light: alpha(light.well, 0.66) },
+            // The well of a form field you type into or pick from -- input, textarea, select field,
+            // combobox, the sidebar search: the darker well grey in dark, the same grey well as
+            // `bg.field` in light.
+            "bg.formField": { base: alpha(dark.well, 0.33), _light: alpha(light.well, 0.66) },
+            // A menu's trigger while its menu is open, such as the workspace switcher: the canvas
+            // edge's grey as a fill in dark, the field's well in light.
+            "bg.openTrigger": { base: alpha(dark.border, 0.5), _light: alpha(light.well, 0.66) },
             // A disabled field loses its grey in light and reads as a blank well.
             "bg.fieldDisabled": { base: alpha(dark.well, 0.33), _light: light.knob },
             /*
@@ -38,9 +72,9 @@ export function deriveThemeTokens(theme = {}) {
             "bg.control": { base: alpha(dark.control, 0.5), _light: alpha(light.control, 0.95) },
             "bg.pill": { base: dark.pill, _light: light.pill },
             /*
-             * The glass face of a toolbar control -- a select, a slicer, a hovered card. Dark is the
-             * button's glass; light is a translucent wash under `border.toolbar`, where the button's
-             * `bg.raised` is solid. Hover is the button face.
+             * The glass face of a toolbar control -- a select, a slicer, a hovered card -- flat at the
+             * middle of `gradients.selected`. Dark is the button's glass; light is a translucent wash,
+             * where the button's `bg.raised` is solid. Hover is the button face.
              */
             "bg.glass": { base: alpha(dark.glass, 0.1), _light: alpha(light.glass, 0.66) },
             "bg.glassHover": { base: alpha(dark.glass, 0.05), _light: light.raised },
@@ -52,14 +86,19 @@ export function deriveThemeTokens(theme = {}) {
             "bg.raisedHover": { base: alpha(dark.raised, 0.05), _light: light.raised },
             // An unticked checkbox or radio: glass in dark, a solid near-white in light.
             "bg.check": { base: alpha(dark.glass, 0.1), _light: light.knob },
-            // The grey washes: a hovered item, and the firmer fill a chip or a subtle button wears.
-            "bg.hover": { base: alpha(dark.hover, 0.05), _light: alpha(light.hover, 0.04) },
+            // The state layers over a hovered and a pressed item: white in dark, the primary ink in light.
+            "bg.hover": { base: alpha(dark.wash, 0.06), _light: alpha(light.wash, 0.06) },
+            // The quieter layer over a hovered field, mark, tab or segment: the ink at 4% in light. Dark
+            // draws none there, and lifts the text or the edge instead.
+            "bg.controlHover": { base: alpha(dark.wash, 0), _light: alpha(light.wash, 0.04) },
+            "bg.pressed": { base: alpha(dark.wash, 0.08), _light: alpha(light.wash, 0.08) },
+            // The firmer grey fill a chip or a subtle button wears.
             "bg.fill": { base: alpha(dark.hover, 0.1), _light: alpha(light.hover, 0.08) },
             // A hovered table or list row: a flat wash, so a column of rows reads as one surface rather
             // than a stack of separately lit bands. A selected row takes the accent's `bg.selected`.
-            "bg.rowHover": { base: alpha(dark.wash, 0.03), _light: alpha(light.wash, 0.03) },
+            "bg.rowHover": { base: alpha(dark.wash, 0.05), _light: alpha(light.wash, 0.04) },
             // A switch's track while off; checked, it takes the green.
-            "bg.track": { base: alpha(dark.muted, 0.6), _light: light.muted },
+            "bg.track": { base: dark.muted, _light: light.secondary },
             "bg.knob": { base: dark.knob, _light: light.knob },
             "fg.primary": { base: dark.primary, _light: light.primary },
             // Supporting text that still reads: a record's meta line, a part's next step.
@@ -67,26 +106,67 @@ export function deriveThemeTokens(theme = {}) {
             "fg.muted": { base: dark.muted, _light: light.muted },
             // Placeholder and meta text: the muted grey, lifted a step further in light.
             "fg.subtle": { base: dark.subtle, _light: light.subtle },
+            // A muted glyph, such as a separator, or the ring of a step not reached yet.
+            "fg.quietGlyph": { base: alpha(dark.border, 0.66), _light: alpha(light.subtle, 0.33) },
+            // A label beside its value -- a description list's term, a neutral badge, a stage's meta, a
+            // log row's detail: the muted grey in dark, the secondary in light.
+            "fg.label": { base: dark.muted, _light: light.secondary },
             "fg.archived": { base: alpha(dark.archived, 0.66), _light: alpha(light.archived, 0.66) },
-            "border.subtle": { base: dark.line, _light: light.line },
+            "border.subtle": { base: dark.line, _light: alpha(light.line, 0.66) },
             "border.control": { base: alpha(dark.border, 0.5), _light: alpha(light.border, 0.66) },
             "border.panel": { base: alpha(dark.border, 1), _light: alpha(light.border, 0.66) },
-            "border.card": { base: dark.cardBorder, _light: light.cardBorder },
+            "border.card": { base: dark.cardBorder, _light: alpha(light.cardBorder, 0.66) },
+            // The edge of what sits on the canvas -- the sidebar search, the active nav pill, the main
+            // surface's outline -- darker in light so it holds on the grey.
+            "border.canvas": { base: alpha(dark.border, 0.5), _light: alpha(light.mark, 0.33) },
+            // A divider or row rule on a card, sheet or drawer, and the drawer shell's glass edge.
+            "border.divider": { base: alpha(dark.border, 0.66), _light: alpha(light.border, 0.66) },
+            // The hairline round a hovered menu or select item.
+            "border.menuHover": {
+                base: alpha(dark.menuHoverBorder, 0.5),
+                _light: alpha(light.menuHoverBorder, 0.33),
+            },
             // The hairline round an unticked checkbox or radio: the top of the glass edge, flat.
             "border.mark": { base: alpha(dark.mark, 0.33), _light: alpha(light.mark, 0.33) },
             // The hairline round a glass button and the glass card surfaces: the dark mark in both
             // themes, as the bronze hairline is; the light mark is too pale for it. Dark sits at the
             // old vertical gradient's average, not its bright top, so a button's edge stays quiet.
             "border.glass": { base: alpha(dark.mark, 0.2), _light: alpha(dark.mark, 0.28) },
-            // The hairline round a toolbar control: the glass edge in dark, the control border in light.
-            "border.toolbar": { base: alpha(dark.mark, 0.33), _light: alpha(light.border, 0.66) },
             // The sidebar's divider.
             "border.hairline": { base: dark.hairline, _light: light.hairline },
+            // The grey data marks: a grey series and its swatch, and a part not started yet.
+            "chart.neutral": { base: alpha(dark.wash, 0.2), _light: light.secondary },
+            "chart.notStarted": { base: alpha(dark.wash, 0.2), _light: alpha(light.mark, 0.33) },
         },
         gradients: {
-            skeleton: {
-                base: `linear-gradient(90deg, ${alpha(dark.wash, 0.06)} 30%, ${alpha(dark.wash, 0.12)} 50%, ${alpha(dark.wash, 0.06)} 70%)`,
-                _light: `linear-gradient(90deg, ${alpha(light.wash, 0.05)} 30%, ${alpha(light.wash, 0.09)} 50%, ${alpha(light.wash, 0.05)} 70%)`,
+            ...palette.gradients,
+            // The skeleton as the design draws it, with no shimmer: the canvas's gradient in light,
+            // a flat white wash in dark.
+            skeletonFill: {
+                base: linearGradient("to bottom", [dark.wash, dark.wash], 0.08),
+                _light: linearGradient("to bottom", light.gradients.canvas, 1),
+            },
+            /*
+             * The faces the design paints as gradients, top to bottom; each flat `bg.*` face sits near
+             * its middle. Dark draws the canvas and panel flat, and the raised, selected and card faces
+             * as white glass falling to the muted grey.
+             */
+            canvas: face("canvas", { base: 1, _light: 1 }),
+            panel: face("panel", { base: 0.66, _light: 0.66 }),
+            card: {
+                base: linearGradient("to bottom", dark.gradients.raised, 0.05),
+                _light: linearGradient("to bottom", [light.card, light.card], 1),
+            },
+            raised: face("raised", { base: 0.1, _light: 1 }),
+            // A hovered toolbar control or round button: the raised face, thinner in dark.
+            raisedHover: face("raised", { base: 0.05, _light: 1 }),
+            // The toolbar control's tint -- a select, slicer, filter chip, an unticked mark in dark.
+            selected: face("selected", { base: 0.1, _light: 0.66 }),
+            // A hovered log row: the flat wash in light, and in dark the raised glass at half its
+            // strength, as `bg.rowHover` flattens it.
+            rowHover: {
+                base: linearGradient("to bottom", dark.gradients.raised, 0.05),
+                _light: linearGradient("to bottom", [light.wash, light.wash], 0.04),
             },
         },
         shadows: {
@@ -98,10 +178,8 @@ export function deriveThemeTokens(theme = {}) {
                 base: `inset 1px 2px 8px ${alpha(dark.shade, 0.25)}`,
                 _light: `inset 1px 2px 8px ${alpha(light.shade, 0.07)}`,
             },
-            card: {
-                base: `1px 2px 8px ${alpha(dark.shade, 0.33)}`,
-                _light: `1px 2px 8px ${alpha(light.shade, 0.1)}`,
-            },
+            card: { base: cardElevation, _light: cardElevation },
+            soft: { base: softElevation, _light: softElevation },
             focus: {
                 base: `0 0 4px ${alpha(dark.focus, 0.66)}`,
                 _light: `0 0 4px ${alpha(light.focus, 0.5)}`,
@@ -111,10 +189,7 @@ export function deriveThemeTokens(theme = {}) {
                 base: `0 0 8px ${alpha(dark.muted, 0.25)}`,
                 _light: `0 0 8px ${alpha(dark.muted, 0.2)}`,
             },
-            toast: {
-                base: "0 8px 24px rgba(0,0,0,.45)",
-                _light: `0 8px 24px ${alpha(light.shade, 0.16)}`,
-            },
+            toast: { base: softElevation, _light: softElevation },
             /*
              * Control elevation: a bevel catching light from above, plus the shadow the control casts.
              * The cast shadow is softened in light, since a dark scrim on a white page reads far

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"type": "module",
 	"repository": {
 		"type": "git",
@@ -94,6 +94,14 @@
 			"types": "./dist/components/document-viewer.d.ts",
 			"default": "./dist/components/document-viewer.js"
 		},
+		"./app-frame": {
+			"types": "./dist/components/app-frame.d.ts",
+			"default": "./dist/components/app-frame.js"
+		},
+		"./feedback-operator": {
+			"types": "./dist/feedback/operator-controller.d.ts",
+			"default": "./dist/feedback/operator-controller.js"
+		},
 		"./lightbox": {
 			"types": "./dist/components/lightbox.d.ts",
 			"default": "./dist/components/lightbox.js"
@@ -122,6 +130,10 @@
 			"types": "./dist/components/theme-customizer.d.ts",
 			"default": "./dist/components/theme-customizer.js"
 		},
+		"./theme-toggle": {
+			"types": "./dist/components/theme-toggle.d.ts",
+			"default": "./dist/components/theme-toggle.js"
+		},
 		"./segmented-bar": {
 			"types": "./dist/components/segmented-bar.d.ts",
 			"default": "./dist/components/segmented-bar.js"
@@ -390,6 +402,10 @@
 			"types": "./dist/components/shell-skeleton.d.ts",
 			"default": "./dist/components/shell-skeleton.js"
 		},
+		"./log-entry": {
+			"types": "./dist/components/log-entry.d.ts",
+			"default": "./dist/components/log-entry.js"
+		},
 		"./log-list": {
 			"types": "./dist/components/log-list.d.ts",
 			"default": "./dist/components/log-list.js"
@@ -473,6 +489,10 @@
 		"./format-money": {
 			"types": "./dist/format/money.d.ts",
 			"default": "./dist/format/money.js"
+		},
+		"./ciridae-app": {
+			"types": "./dist/app/index.d.ts",
+			"default": "./dist/app/index.js"
 		}
 	},
 	"imports": {
@@ -487,22 +507,39 @@
 		"@types/react": ">=19",
 		"date-fns": "^4",
 		"react": ">=19",
-		"react-dom": ">=19"
+		"react-dom": ">=19",
+		"@ciridae/auth": ">=0.3.0",
+		"@ciridae/telemetry": ">=0.3.1",
+		"@sentry/react": ">=10",
+		"react-router-dom": ">=7"
 	},
 	"peerDependenciesMeta": {
 		"@types/react": {
 			"optional": true
+		},
+		"@ciridae/auth": {
+			"optional": true
+		},
+		"@ciridae/telemetry": {
+			"optional": true
+		},
+		"@sentry/react": {
+			"optional": true
+		},
+		"react-router-dom": {
+			"optional": true
 		}
 	},
 	"dependencies": {
 		"@base-ui/react": "1.6.0",
 		"@phosphor-icons/react": "2.1.10",
+		"@tanstack/charts": "1.1.0",
+		"@tanstack/markdown": "1.0.0",
 		"@tanstack/react-hotkeys": "0.17.0",
 		"@tanstack/react-pacer": "0.24.1",
 		"@tanstack/react-table": "9.2.4",
 		"@tanstack/react-virtual": "3.14.23",
 		"cmdk": "1.1.1",
-		"recharts": "^3.9.2",
 		"sonner": "2.0.8",
 		"zod": "^4.4.3"
 	},