@ciridae/ui 0.16.1 → 1.0.1

package/dist/lib/palette-tokens.js

@@ -1,133 +0,0 @@
-/**
- * The fixed parts of the theme: the lightness ladder every palette is built on,
- * and the status colors no palette is allowed to move.
- *
- * Kept apart from ./palette so the derivation reads as logic rather than data.
- */
-/**
- * Every color token, as lightness plus a multiplier on the palette's ground
- * chroma. Read straight out of ciridae.css against its 0.002 chroma, so the
- * Slate preset reproduces the stylesheet exactly -- `check-palette-contrast.mjs`
- * asserts that, and will fail if the two ever drift.
- *
- * A palette moves hue and chroma but never the lightness, which is what keeps
- * the contrast gates cleared: WCAG contrast is dominated by lightness.
- */
-const LADDER = {
-    light: {
-        background: { l: 0.985, c: 0.5 },
-        foreground: { l: 0.145, c: 1 },
-        card: { l: 1, c: 0 },
-        "card-foreground": { l: 0.145, c: 1 },
-        popover: { l: 1, c: 0 },
-        "popover-foreground": { l: 0.145, c: 1 },
-        primary: { l: 0.145, c: 1, brand: true },
-        "primary-foreground": { l: 0.99, c: 0 },
-        secondary: { l: 0.955, c: 1 },
-        "secondary-foreground": { l: 0.2, c: 1 },
-        muted: { l: 0.955, c: 1 },
-        "muted-foreground": { l: 0.46, c: 1.5 },
-        accent: { l: 0.935, c: 1, brand: true },
-        "accent-foreground": { l: 0.18, c: 1, brand: true },
-        border: { l: 0.865, c: 1 },
-        input: { l: 0.835, c: 1 },
-        ring: { l: 0.145, c: 1, brand: true },
-        overlay: { l: 0.145, c: 1, a: 0.58 },
-        surface: { l: 1, c: 0 },
-        "surface-foreground": { l: 0.145, c: 1 },
-        "surface-inverse": { l: 0.145, c: 1 },
-        "surface-inverse-foreground": { l: 0.99, c: 0 },
-        "chart-1": { l: 0.22, c: 1, brand: true },
-        "chart-2": { l: 0.5, c: 1, brand: true },
-        "chart-3": { l: 0.72, c: 1, brand: true },
-        sidebar: { l: 0.965, c: 0.5 },
-        "sidebar-foreground": { l: 0.23, c: 1 },
-        "sidebar-primary": { l: 0.145, c: 1, brand: true },
-        "sidebar-primary-foreground": { l: 0.99, c: 0 },
-        "sidebar-accent": { l: 0.935, c: 1, brand: true },
-        "sidebar-accent-foreground": { l: 0.18, c: 1, brand: true },
-        "sidebar-border": { l: 0.865, c: 1 },
-        "sidebar-ring": { l: 0.145, c: 1, brand: true },
-        "table-header-foreground": { l: 0.42, c: 1.5 },
-    },
-    dark: {
-        background: { l: 0.145, c: 1 },
-        foreground: { l: 0.935, c: 0.5 },
-        card: { l: 0.185, c: 1 },
-        "card-foreground": { l: 0.935, c: 0.5 },
-        popover: { l: 0.205, c: 1 },
-        "popover-foreground": { l: 0.935, c: 0.5 },
-        primary: { l: 0.965, c: 0.5, brand: true },
-        "primary-foreground": { l: 0.145, c: 1 },
-        secondary: { l: 0.255, c: 1 },
-        "secondary-foreground": { l: 0.94, c: 0.5 },
-        muted: { l: 0.255, c: 1 },
-        "muted-foreground": { l: 0.7, c: 1 },
-        accent: { l: 0.275, c: 1, brand: true },
-        "accent-foreground": { l: 0.94, c: 0.5, brand: true },
-        border: { l: 0.32, c: 1 },
-        input: { l: 0.36, c: 1 },
-        ring: { l: 0.88, c: 0.5, brand: true },
-        overlay: { l: 0.08, c: 0.5, a: 0.72 },
-        surface: { l: 0.205, c: 1 },
-        "surface-foreground": { l: 0.935, c: 0.5 },
-        "surface-inverse": { l: 0.935, c: 0.5 },
-        "surface-inverse-foreground": { l: 0.145, c: 1 },
-        "chart-1": { l: 0.9, c: 0.5, brand: true },
-        "chart-2": { l: 0.68, c: 1, brand: true },
-        "chart-3": { l: 0.48, c: 1, brand: true },
-        sidebar: { l: 0.18, c: 1 },
-        "sidebar-foreground": { l: 0.88, c: 0.5 },
-        "sidebar-primary": { l: 0.965, c: 0.5, brand: true },
-        "sidebar-primary-foreground": { l: 0.145, c: 1 },
-        "sidebar-accent": { l: 0.235, c: 1, brand: true },
-        "sidebar-accent-foreground": { l: 0.94, c: 0.5, brand: true },
-        "sidebar-border": { l: 0.32, c: 1 },
-        "sidebar-ring": { l: 0.88, c: 0.5, brand: true },
-        "table-header-foreground": { l: 0.78, c: 1 },
-    },
-};
-/**
- * Status stays semantic across every palette: an error is the same red whatever
- * brand the app wears, so "failed" never has to be relearned per theme. The last
- * two chart series sit here for the same reason -- they keep a five-series chart
- * readable when the brand-led three are close together.
- */
-const STATUS_TOKENS = {
-    light: {
-        destructive: "oklch(0.48 0.13 27)",
-        "destructive-foreground": "oklch(0.99 0 0)",
-        success: "oklch(0.44 0.075 150)",
-        "success-foreground": "oklch(0.99 0 0)",
-        "success-muted": "oklch(0.94 0.03 150)",
-        info: "oklch(0.43 0.045 245)",
-        "info-foreground": "oklch(0.99 0 0)",
-        "info-muted": "oklch(0.94 0.018 245)",
-        warning: "oklch(0.52 0.075 85)",
-        "warning-foreground": "oklch(0.99 0 0)",
-        "warning-muted": "oklch(0.95 0.035 85)",
-        "chart-4": "oklch(0.5 0.055 245)",
-        "chart-5": "oklch(0.5 0.07 150)",
-    },
-    dark: {
-        destructive: "oklch(0.65 0.12 27)",
-        "destructive-foreground": "oklch(0.12 0.002 260)",
-        success: "oklch(0.68 0.075 150)",
-        "success-foreground": "oklch(0.12 0.002 260)",
-        "success-muted": "oklch(0.25 0.035 150)",
-        info: "oklch(0.7 0.05 245)",
-        "info-foreground": "oklch(0.12 0.002 260)",
-        "info-muted": "oklch(0.25 0.028 245)",
-        warning: "oklch(0.76 0.075 85)",
-        "warning-foreground": "oklch(0.12 0.002 260)",
-        "warning-muted": "oklch(0.27 0.04 85)",
-        "chart-4": "oklch(0.72 0.065 245)",
-        "chart-5": "oklch(0.7 0.1 150)",
-    },
-};
-/** Tokens whose fill carries the brand rather than a surface step. */
-const BRAND_FILLS = new Set(["primary", "sidebar-primary", "ring", "sidebar-ring"]);
-/** Hover surfaces take a fraction of the brand chroma so they read as tinted, not saturated. */
-const ACCENT_SURFACES = new Set(["accent", "sidebar-accent"]);
-const ACCENT_FOREGROUNDS = new Set(["accent-foreground", "sidebar-accent-foreground"]);
-export { ACCENT_FOREGROUNDS, ACCENT_SURFACES, BRAND_FILLS, LADDER, STATUS_TOKENS, };

package/dist/lib/palette.d.ts

@@ -1,83 +0,0 @@
-import { type PaletteMode } from "./palette-tokens.js";
-/**
- * A palette's brand, supplied whole.
- *
- * One object rather than three optional fields so the two states -- ground-only
- * and branded -- are the only ones a caller can express. Separately optional
- * hue, chroma, and lightness let a type-valid spec colour the primary while the
- * charts took the ground-only path.
- */
-type PaletteBrand = {
-    hue: number;
-    chroma: number;
-    /** Light-mode lightness of primary. Dark mode lifts it to stay legible. */
-    lightness: number;
-};
-type PaletteSpec = {
-    /** Hue for surfaces, borders, and text. */
-    groundHue: number;
-    /** Chroma for those neutrals. Tiny values (< 0.015) read as a tint, not a color. */
-    groundChroma: number;
-    /** Omit for a palette that is only a tinted ground, keeping a near-black primary. */
-    brand?: PaletteBrand;
-};
-type PalettePreset = {
-    id: string;
-    label: string;
-    spec: PaletteSpec;
-};
-/**
- * Full token map for one palette in one mode, as `--name` -> oklch string.
- * Applied as inline custom properties on the document element, which is why the
- * caller must recompute when the light/dark mode changes: an inline value wins
- * over both the `:root` and `.dark` rules.
- *
- * The readability guarantee covers the specs `check-palette-contrast.mjs`
- * sweeps: the named presets and anything `customPaletteSpec` returns. A spec
- * assembled by hand with its own chroma and lightness is derived faithfully but
- * has never been graded.
- */
-declare function derivePaletteTokens(spec: PaletteSpec, mode: PaletteMode): Record<string, string>;
-/** Every token a palette writes. Used to clear stale properties when switching. */
-declare const PALETTE_TOKEN_NAMES: readonly string[];
-/**
- * A palette from a hue alone, for an app whose brand is not in the preset list.
- * Ground hue follows the brand, so there is no combination that clashes with
- * itself and only the hue has to be chosen.
- *
- * Throws on a hue that is not finite: `oklch(0.43 0.12 NaN)` is not an error any
- * browser reports, it silently voids every declaration that uses the token.
- *
- * The hue is normalised to a whole degree, which is what makes the contrast
- * gate's sweep total rather than a sample: a fraction of a degree is invisible,
- * but an unrounded hue would be a reachable palette the sweep never graded.
- */
-declare function customPaletteSpec(hue: number): PaletteSpec;
-/** What an app or a user has chosen. `null` elsewhere means "use the stylesheet". */
-type PaletteSelection = {
-    kind: "preset";
-    id: string;
-} | {
-    kind: "custom";
-    hue: number;
-};
-/**
- * The selection as the derivation reads it: a hue normalised to the whole degree
- * the tokens come from, and `null` for anything that resolves to nothing -- a
- * preset id that no longer exists, a hue that is not finite.
- *
- * This is the single validating boundary for a selection from anywhere
- * untrusted: a stored value, a URL, an app's own config. Publishing it rather
- * than the caller's own object also keeps `useTheme().palette` equal to what is
- * on the document, so a control bound to `palette.hue` reads back the palette it
- * is looking at.
- */
-declare function canonicalPaletteSelection(selection: PaletteSelection | null): PaletteSelection | null;
-/** The spec a selection derives, or `null` if it does not resolve to one. */
-declare function resolvePaletteSelection(selection: PaletteSelection): PaletteSpec | null;
-/**
- * Stable identity for a selection, so a caller holding an inline
- * `defaultPalette` object literal does not look like a new palette every render.
- */
-declare function paletteSelectionKey(selection: PaletteSelection | null): string;
-export { PALETTE_TOKEN_NAMES, canonicalPaletteSelection, customPaletteSpec, derivePaletteTokens, paletteSelectionKey, resolvePaletteSelection, type PaletteBrand, type PaletteMode, type PalettePreset, type PaletteSelection, type PaletteSpec, };

package/dist/lib/palette.js

@@ -1,151 +0,0 @@
-/**
- * Palette derivation for the Ciridae theme.
- *
- * A palette is a ground plus an optional brand, not a hand-authored token set:
- * ./palette-tokens owns the lightness ladder, and a palette moves only hue and
- * chroma over it. Holding lightness fixed is what keeps every palette clearing
- * the contrast gates, because WCAG contrast is dominated by lightness;
- * `scripts/check-palette-contrast.mjs` proves that across both the presets and
- * every whole-degree hue `customPaletteSpec` can produce.
- *
- * Named presets and custom hues run through `derivePaletteTokens` alike, so
- * there is no second code path that could drift from the validated one.
- */
-import { PALETTE_PRESETS_BY_ID } from "./palette-presets.js";
-import { ACCENT_FOREGROUNDS, ACCENT_SURFACES, BRAND_FILLS, LADDER, STATUS_TOKENS, } from "./palette-tokens.js";
-function round(value, places) {
-    return Number.parseFloat(value.toFixed(places));
-}
-/** Hue is dropped at zero chroma, where it says nothing and `oklch(1 0 0)` is the idiom. */
-function formatOklch(lightness, chroma, hue, alpha) {
-    const c = round(chroma, 4);
-    const channels = `${round(lightness, 3)} ${c} ${c === 0 ? 0 : hue}`;
-    return alpha === undefined ? `oklch(${channels})` : `oklch(${channels} / ${alpha})`;
-}
-function brandChroma(token, brand, mode) {
-    if (ACCENT_SURFACES.has(token))
-        return brand.chroma * (mode === "light" ? 0.22 : 0.3);
-    if (ACCENT_FOREGROUNDS.has(token))
-        return brand.chroma * 0.35;
-    return brand.chroma;
-}
-function brandLightness(token, entry, brand, mode) {
-    if (!BRAND_FILLS.has(token))
-        return entry.l;
-    if (mode === "light")
-        return brand.lightness;
-    // A saturated brand at its light-mode lightness disappears into a dark
-    // ground, so the fill lifts rather than inverting to near-white.
-    return Math.min(0.82, brand.lightness + 0.32);
-}
-/**
- * Full token map for one palette in one mode, as `--name` -> oklch string.
- * Applied as inline custom properties on the document element, which is why the
- * caller must recompute when the light/dark mode changes: an inline value wins
- * over both the `:root` and `.dark` rules.
- *
- * The readability guarantee covers the specs `check-palette-contrast.mjs`
- * sweeps: the named presets and anything `customPaletteSpec` returns. A spec
- * assembled by hand with its own chroma and lightness is derived faithfully but
- * has never been graded.
- */
-function derivePaletteTokens(spec, mode) {
-    const tokens = {};
-    for (const [token, entry] of Object.entries(LADDER[mode])) {
-        // A palette with no brand is entirely its ground, so the brand-marked
-        // tokens fall back to the ladder untouched. That is what lets Slate come
-        // out byte-identical to ciridae.css rather than as a near-copy.
-        const brand = entry.brand === true ? spec.brand : undefined;
-        const hue = brand ? brand.hue : spec.groundHue;
-        const chroma = brand ? brandChroma(token, brand, mode) : spec.groundChroma * entry.c;
-        const lightness = brand ? brandLightness(token, entry, brand, mode) : entry.l;
-        tokens[token] = formatOklch(lightness, chroma, hue, entry.a);
-    }
-    return { ...tokens, ...STATUS_TOKENS[mode] };
-}
-/** Every token a palette writes. Used to clear stale properties when switching. */
-const PALETTE_TOKEN_NAMES = Object.freeze([
-    ...new Set([
-        ...Object.keys(LADDER.light),
-        ...Object.keys(LADDER.dark),
-        ...Object.keys(STATUS_TOKENS.light),
-        ...Object.keys(STATUS_TOKENS.dark),
-    ]),
-]);
-/** Chroma for a hue-only palette: the middle of the range the presets use. */
-const CUSTOM_BRAND_CHROMA = 0.12;
-/**
- * Whole degrees in [0, 360) -- the space `check-palette-contrast.mjs` sweeps.
- *
- * Shared so a hue and its identity cannot normalise differently: 360, 0, and
- * 359.6 all derive the same palette, so they must all name it the same way.
- */
-function normalizeHue(hue) {
-    return Math.round(((hue % 360) + 360) % 360) % 360;
-}
-/**
- * A palette from a hue alone, for an app whose brand is not in the preset list.
- * Ground hue follows the brand, so there is no combination that clashes with
- * itself and only the hue has to be chosen.
- *
- * Throws on a hue that is not finite: `oklch(0.43 0.12 NaN)` is not an error any
- * browser reports, it silently voids every declaration that uses the token.
- *
- * The hue is normalised to a whole degree, which is what makes the contrast
- * gate's sweep total rather than a sample: a fraction of a degree is invisible,
- * but an unrounded hue would be a reachable palette the sweep never graded.
- */
-function customPaletteSpec(hue) {
-    if (!Number.isFinite(hue))
-        throw new Error(`Custom palette hue must be finite, got ${hue}`);
-    const normalizedHue = normalizeHue(hue);
-    return {
-        groundHue: normalizedHue,
-        groundChroma: 0.005,
-        brand: { hue: normalizedHue, chroma: CUSTOM_BRAND_CHROMA, lightness: 0.43 },
-    };
-}
-/**
- * The selection as the derivation reads it: a hue normalised to the whole degree
- * the tokens come from, and `null` for anything that resolves to nothing -- a
- * preset id that no longer exists, a hue that is not finite.
- *
- * This is the single validating boundary for a selection from anywhere
- * untrusted: a stored value, a URL, an app's own config. Publishing it rather
- * than the caller's own object also keeps `useTheme().palette` equal to what is
- * on the document, so a control bound to `palette.hue` reads back the palette it
- * is looking at.
- */
-function canonicalPaletteSelection(selection) {
-    if (!selection)
-        return null;
-    if (selection.kind === "preset") {
-        return PALETTE_PRESETS_BY_ID.has(selection.id) ? selection : null;
-    }
-    return Number.isFinite(selection.hue)
-        ? { kind: "custom", hue: normalizeHue(selection.hue) }
-        : null;
-}
-/** The spec a selection derives, or `null` if it does not resolve to one. */
-function resolvePaletteSelection(selection) {
-    const canonical = canonicalPaletteSelection(selection);
-    if (!canonical)
-        return null;
-    return canonical.kind === "preset"
-        ? (PALETTE_PRESETS_BY_ID.get(canonical.id)?.spec ?? null)
-        : customPaletteSpec(canonical.hue);
-}
-/**
- * Stable identity for a selection, so a caller holding an inline
- * `defaultPalette` object literal does not look like a new palette every render.
- */
-function paletteSelectionKey(selection) {
-    if (!selection)
-        return "none";
-    if (selection.kind === "preset")
-        return `preset:${selection.id}`;
-    // Normalised exactly as `customPaletteSpec` does, so two hues that derive the
-    // same palette cannot read as two different selections.
-    return `custom:${normalizeHue(selection.hue)}`;
-}
-export { PALETTE_TOKEN_NAMES, canonicalPaletteSelection, customPaletteSpec, derivePaletteTokens, paletteSelectionKey, resolvePaletteSelection, };

package/dist/lib/utils.d.ts

@@ -1,5 +0,0 @@
-import { type ClassValue } from "clsx";
-export declare function cn(...inputs: ClassValue[]): string;
-export declare const glassSurface = "border-border/38 bg-background/36 shadow-[0_18px_60px_color-mix(in_oklch,var(--foreground)_9%,transparent)] backdrop-blur-xl backdrop-saturate-150 supports-[backdrop-filter]:bg-background/24 dark:border-border/32 dark:bg-background/34 dark:shadow-[0_18px_60px_color-mix(in_oklch,var(--foreground)_20%,transparent)] dark:supports-[backdrop-filter]:bg-background/22";
-export declare const glassSurfaceFocus = "focus-within:border-ring focus-within:bg-background/46 focus-within:ring-[var(--focus-ring-width)] focus-within:ring-ring/35 focus-within:shadow-[0_20px_70px_color-mix(in_oklch,var(--foreground)_12%,transparent)] supports-[backdrop-filter]:focus-within:bg-background/32 dark:focus-within:border-ring dark:focus-within:bg-background/42 dark:focus-within:ring-ring/55 dark:supports-[backdrop-filter]:focus-within:bg-background/30";
-export declare const sidebarGlassSurface = "border-sidebar-border/60 bg-sidebar/48 shadow-none backdrop-blur-xl backdrop-saturate-150 supports-[backdrop-filter]:bg-sidebar/34 dark:border-sidebar-border/60 dark:bg-sidebar/44 dark:supports-[backdrop-filter]:bg-sidebar/30";

package/dist/lib/utils.js

@@ -1,8 +0,0 @@
-import { clsx } from "clsx";
-import { cx } from "#ui/styled-system/css";
-export function cn(...inputs) {
-    return cx(clsx(inputs));
-}
-export const glassSurface = "border-border/38 bg-background/36 shadow-[0_18px_60px_color-mix(in_oklch,var(--foreground)_9%,transparent)] backdrop-blur-xl backdrop-saturate-150 supports-[backdrop-filter]:bg-background/24 dark:border-border/32 dark:bg-background/34 dark:shadow-[0_18px_60px_color-mix(in_oklch,var(--foreground)_20%,transparent)] dark:supports-[backdrop-filter]:bg-background/22";
-export const glassSurfaceFocus = "focus-within:border-ring focus-within:bg-background/46 focus-within:ring-[var(--focus-ring-width)] focus-within:ring-ring/35 focus-within:shadow-[0_20px_70px_color-mix(in_oklch,var(--foreground)_12%,transparent)] supports-[backdrop-filter]:focus-within:bg-background/32 dark:focus-within:border-ring dark:focus-within:bg-background/42 dark:focus-within:ring-ring/55 dark:supports-[backdrop-filter]:focus-within:bg-background/30";
-export const sidebarGlassSurface = "border-sidebar-border/60 bg-sidebar/48 shadow-none backdrop-blur-xl backdrop-saturate-150 supports-[backdrop-filter]:bg-sidebar/34 dark:border-sidebar-border/60 dark:bg-sidebar/44 dark:supports-[backdrop-filter]:bg-sidebar/30";

package/dist/style-imports.d.ts

@@ -1,3 +0,0 @@
-declare module "*.css";
-declare module "@ciridae/ui/*.css";
-declare module "@ciridae/ui-agent/*.css";