@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/seo/Head.svelte.d.ts

@@ -0,0 +1,86 @@
+import { type OgImageCard } from './og-image.ts';
+import type { AlternateLink, FeedLink, HeadImage, OpenGraphType, Robots, SchemaPageType, TwitterCard } from './types.ts';
+interface Props {
+    /** The page title. Blank renders `siteName` alone. */
+    title: string;
+    /** Appended to every title as `"<title><titleSeparator><siteName>"`, and emitted as `og:site_name`. */
+    siteName?: string | undefined;
+    /**
+     * Between the title and `siteName`.
+     * @defaultValue `' | '`
+     */
+    titleSeparator?: string | undefined;
+    /** Meta and Open Graph description. */
+    description?: string | null | undefined;
+    /** Meta keywords. */
+    keywords?: readonly string[] | undefined;
+    /** The Schema.org page type — only used to derive `og:type`. */
+    type?: SchemaPageType | undefined;
+    /** An explicit `og:type`; wins over the one derived from `type`. */
+    openGraphType?: OpenGraphType | undefined;
+    /** An explicit canonical URL. Wins over `pathname`. */
+    canonical?: string | undefined;
+    /** The current path, resolved through `canonicalHref` into the canonical URL. */
+    pathname?: string | undefined;
+    /**
+     * Resolves an app-relative path to an absolute URL on the production origin.
+     * @defaultValue the components context’s `href`
+     */
+    canonicalHref?: ((path: string) => string) | undefined;
+    /** Explicit `hreflang` alternates. Wins over `locales`. */
+    alternates?: readonly AlternateLink[] | undefined;
+    /**
+     * The site's locales. Each, plus `x-default`, becomes an `hreflang`
+     * alternate pointing at the canonical URL — the right signal for a site
+     * whose UI chrome is localised but whose URLs are not. A site with
+     * per-locale URLs passes `alternates` instead.
+     */
+    locales?: readonly string[] | undefined;
+    /** `og:locale`, in Open Graph's `language_TERRITORY` form. */
+    ogLocale?: string | undefined;
+    /** An RSS, Atom or JSON Feed link. */
+    feed?: FeedLink | undefined;
+    /** The robots directive. */
+    robots?: Robots | undefined;
+    /** An explicit share image. Wins over `shareCard` and `defaultImage`. */
+    image?: HeadImage | undefined;
+    /** Build a per-page share card URL with {@link ogImageUrl}. */
+    shareCard?: OgImageCard | undefined;
+    /**
+     * Where the share-card renderer is mounted.
+     * @defaultValue `/og`
+     */
+    shareCardPath?: string | undefined;
+    /**
+     * The share card's alt text.
+     * @defaultValue `"<card title> — <siteName>"`, or the card title alone when `siteName` is unset or empty
+     */
+    shareCardAlt?: ((card: OgImageCard) => string) | undefined;
+    /** The share image when neither `image` nor `shareCard` gives one. */
+    defaultImage?: HeadImage | undefined;
+    /** `article:published_time`. */
+    published?: Date | undefined;
+    /** `article:modified_time`. */
+    modified?: Date | undefined;
+    /** `article:section`. Blank is treated as absent. */
+    section?: string | undefined;
+    /** `article:tag`, one per entry. */
+    tags?: readonly string[] | undefined;
+    /**
+     * The Twitter / X card type.
+     * @defaultValue `'summary_large_image'`
+     */
+    twitterCard?: TwitterCard | undefined;
+    /** The site’s Twitter / X handle. */
+    twitterSite?: string | undefined;
+    /** The author’s Twitter / X handle. */
+    twitterCreator?: string | undefined;
+    /** The previous page in a paginated series (`rel="prev"`). */
+    prevUrl?: string | undefined;
+    /** The next page in a paginated series (`rel="next"`). */
+    nextUrl?: string | undefined;
+}
+/** Per-page `<head>` metadata: title, description, canonical URL, `hreflang` alternates, Open Graph and Twitter / X tags, `article:*` and pagination links. */
+declare const Head: import("svelte").Component<Props, {}, "">;
+type Head = ReturnType<typeof Head>;
+export default Head;

package/dist/seo/JsonLd.svelte

@@ -0,0 +1,30 @@
+<!-- @component
+One Schema.org JSON-LD node as an XSS-safe `<script type="application/ld+json">` block in `<svelte:head>`.
+-->
+<script lang="ts">/**
+* Emits one Schema.org JSON-LD graph node as a
+* `<script type="application/ld+json">` block in `<svelte:head>`.
+*
+* The JSON goes through {@link serializeJsonLd}, which escapes `<`, `>`,
+* `&`, U+2028 and U+2029, so authored content can neither close the script
+* element nor open an HTML comment inside it and inject markup. `data` of
+* `null` / `undefined` renders nothing, so a builder that
+* may have nothing to emit (a degenerate breadcrumb trail) can be wired
+* without a call-site `{#if}`.
+*/
+import { serializeJsonLd } from "./json-ld.js";
+let { data } = $props();
+// The closing tag is split so neither the Svelte compiler nor an HTML
+// parser reading this file sees it as the end of the component's own
+// `<script>`.
+const open = "<script type=\"application/ld+json\">";
+const close = "<" + "/script>";
+const block = $derived(data === null || data === undefined ? undefined : open + serializeJsonLd(data) + close);
+</script>
+
+<svelte:head>
+  {#if block !== undefined}
+    <!-- Escaped by serializeJsonLd: `<`, `>` and `&` cannot appear unescaped. -->
+    {@html block}
+  {/if}
+</svelte:head>

package/dist/seo/JsonLd.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+   * Emits one Schema.org JSON-LD graph node as a
+   * `<script type="application/ld+json">` block in `<svelte:head>`.
+   *
+   * The JSON goes through {@link serializeJsonLd}, which escapes `<`, `>`,
+   * `&`, U+2028 and U+2029, so authored content can neither close the script
+   * element nor open an HTML comment inside it and inject markup. `data` of
+   * `null` / `undefined` renders nothing, so a builder that
+   * may have nothing to emit (a degenerate breadcrumb trail) can be wired
+   * without a call-site `{#if}`.
+   */
+import { type JsonLdObject } from './json-ld.ts';
+interface Props {
+    /** The node to serialise; nothing is emitted for `null` or `undefined`. */
+    data: JsonLdObject | null | undefined;
+}
+/** One Schema.org JSON-LD node as an XSS-safe `<script type="application/ld+json">` block in `<svelte:head>`. */
+declare const JsonLd: import("svelte").Component<Props, {}, "">;
+type JsonLd = ReturnType<typeof JsonLd>;
+export default JsonLd;

package/dist/seo/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * `@thomasfosterau/components/seo` — per-page `<head>` metadata and
+ * structured data. A separate entry point: it renders only into
+ * `<svelte:head>`, and a consumer that manages its own head never loads it.
+ *
+ * `<Head>` emits the title, canonical, `hreflang`, Open Graph and Twitter /
+ * X tags; `<JsonLd>` emits one XSS-safe JSON-LD block; `serializeJsonLd` is
+ * the escaping serialiser underneath it; `ogImageUrl` builds the
+ * content-addressed share-card URL `<Head>` emits, with the param names and
+ * caps a card renderer reads back.
+ *
+ * @module
+ */
+export { default as Head } from './Head.svelte';
+export { default as JsonLd } from './JsonLd.svelte';
+export { serializeJsonLd, type JsonLdObject } from './json-ld.ts';
+export { OG_IMAGE_HEIGHT, OG_IMAGE_WIDTH, OG_SUBTITLE_MAX_LENGTH, OG_SUBTITLE_PARAM, OG_TITLE_MAX_LENGTH, OG_TITLE_PARAM, OG_VERSION_PARAM, ogImageUrl, type OgImageCard, type OgImageUrlOptions, } from './og-image.ts';
+export type { AlternateLink, FeedLink, HeadImage, OpenGraphType, Robots, SchemaPageType, TwitterCard, } from './types.ts';

package/dist/seo/index.js

@@ -0,0 +1,17 @@
+/**
+ * `@thomasfosterau/components/seo` — per-page `<head>` metadata and
+ * structured data. A separate entry point: it renders only into
+ * `<svelte:head>`, and a consumer that manages its own head never loads it.
+ *
+ * `<Head>` emits the title, canonical, `hreflang`, Open Graph and Twitter /
+ * X tags; `<JsonLd>` emits one XSS-safe JSON-LD block; `serializeJsonLd` is
+ * the escaping serialiser underneath it; `ogImageUrl` builds the
+ * content-addressed share-card URL `<Head>` emits, with the param names and
+ * caps a card renderer reads back.
+ *
+ * @module
+ */
+export { default as Head } from './Head.svelte';
+export { default as JsonLd } from './JsonLd.svelte';
+export { serializeJsonLd } from "./json-ld.js";
+export { OG_IMAGE_HEIGHT, OG_IMAGE_WIDTH, OG_SUBTITLE_MAX_LENGTH, OG_SUBTITLE_PARAM, OG_TITLE_MAX_LENGTH, OG_TITLE_PARAM, OG_VERSION_PARAM, ogImageUrl, } from "./og-image.js";

package/dist/seo/json-ld.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Serialising Schema.org JSON-LD for a `<script type="application/ld+json">`
+ * block.
+ *
+ * `JSON.stringify` already escapes `"` inside strings. What it leaves is the
+ * HTML parser: an authored title containing `</script>` would close the
+ * embedding script element and inject whatever follows. `<`, `>` and `&` are
+ * therefore replaced with their `\u` escapes — JSON parsers read them
+ * identically, so the structured-data consumer sees the original text — and so
+ * are U+2028 / U+2029, which are legal in JSON strings but line terminators in
+ * JavaScript (OWASP / Google's JSON-in-HTML guidance).
+ *
+ * @module
+ */
+/**
+ * A JSON-LD graph node with its top-level `@context`.
+ *
+ * Deliberately loose: the library does not take `schema-dts` (or any
+ * vocabulary) as a dependency. `WithContext<Thing>` from `schema-dts` (a type
+ * alias, so it satisfies the index signature) is assignable to it, so an app
+ * that type-checks its builders against the real vocabulary can hand the
+ * result straight to {@link serializeJsonLd} or `<JsonLd>`.
+ */
+export type JsonLdObject = {
+    readonly '@context': unknown;
+    readonly [property: string]: unknown;
+};
+/**
+ * Serialise a JSON-LD object to a string safe to embed in a
+ * `<script type="application/ld+json">` block. The output is valid JSON that
+ * round-trips through `JSON.parse` to the input.
+ */
+export declare function serializeJsonLd(data: JsonLdObject): string;

package/dist/seo/json-ld.js

@@ -0,0 +1,29 @@
+/**
+ * Serialising Schema.org JSON-LD for a `<script type="application/ld+json">`
+ * block.
+ *
+ * `JSON.stringify` already escapes `"` inside strings. What it leaves is the
+ * HTML parser: an authored title containing `</script>` would close the
+ * embedding script element and inject whatever follows. `<`, `>` and `&` are
+ * therefore replaced with their `\u` escapes — JSON parsers read them
+ * identically, so the structured-data consumer sees the original text — and so
+ * are U+2028 / U+2029, which are legal in JSON strings but line terminators in
+ * JavaScript (OWASP / Google's JSON-in-HTML guidance).
+ *
+ * @module
+ */
+const LINE_SEPARATOR = new RegExp(String.fromCharCode(0x2028), 'g');
+const PARAGRAPH_SEPARATOR = new RegExp(String.fromCharCode(0x2029), 'g');
+/**
+ * Serialise a JSON-LD object to a string safe to embed in a
+ * `<script type="application/ld+json">` block. The output is valid JSON that
+ * round-trips through `JSON.parse` to the input.
+ */
+export function serializeJsonLd(data) {
+    return JSON.stringify(data)
+        .replace(/</g, '\\u003C')
+        .replace(/>/g, '\\u003E')
+        .replace(/&/g, '\\u0026')
+        .replace(LINE_SEPARATOR, '\\u2028')
+        .replace(PARAGRAPH_SEPARATOR, '\\u2029');
+}

package/dist/seo/og-image.d.ts

@@ -0,0 +1,72 @@
+/**
+ * The content-addressed Open Graph share-image URL builder.
+ *
+ * Shared by `<Head>` (which emits the URL as `og:image`) and whatever renders
+ * the card (an app route or Worker reading the same query params), so the
+ * producer and the consumer of the URL can never disagree on the param names
+ * or the length caps — import the constants below on both sides.
+ *
+ * The URL is **content-addressed**: the title and description ride in the
+ * query, and a `v` token derived from the content's last-modified instant
+ * changes the whole URL whenever the content changes. A new URL is how the
+ * image cache-busts — link-preview scrapers (Facebook, LinkedIn, federated
+ * servers) cache aggressively and only re-fetch a URL they have not seen, so
+ * the version token is load-bearing, not cosmetic.
+ *
+ * @module
+ */
+/** Query param carrying the card title. */
+export declare const OG_TITLE_PARAM = "t";
+/** Query param carrying the card's second line (the page description). */
+export declare const OG_SUBTITLE_PARAM = "d";
+/** Query param carrying the cache-busting version token. */
+export declare const OG_VERSION_PARAM = "v";
+/**
+ * Longest title, in characters, carried in a share-card URL. A renderer
+ * should re-apply this cap (and `OG_SUBTITLE_MAX_LENGTH`) defensively; here
+ * they keep the emitted URL short.
+ */
+export declare const OG_TITLE_MAX_LENGTH = 120;
+/** Longest description, in characters, carried in a share-card URL; see `OG_TITLE_MAX_LENGTH`. */
+export declare const OG_SUBTITLE_MAX_LENGTH = 200;
+/** Share-card width in pixels — the 1.91:1 Open Graph standard, with `OG_IMAGE_HEIGHT`. */
+export declare const OG_IMAGE_WIDTH = 1200;
+/** Share-card height in pixels; see `OG_IMAGE_WIDTH`. */
+export declare const OG_IMAGE_HEIGHT = 630;
+/** What a per-page share card is built from. */
+export interface OgImageCard {
+    /** The page title — the card headline. A blank title builds no URL. */
+    readonly title: string;
+    /** Optional second line (the page description). */
+    readonly description?: string | null | undefined;
+    /**
+     * A stable, opaque identity for the page (a content UUID, a slug), used only
+     * to build the readable `<slug>.png` path segment. Never rendered.
+     */
+    readonly id: string;
+    /**
+     * The content's last-modified instant, or anything that changes when the
+     * card should. Drives the version token; absent or unparseable, the URL is
+     * keyed by title + description alone.
+     */
+    readonly updatedAt?: Date | string | number | null | undefined;
+}
+/** How `ogImageUrl` turns a card into an absolute URL: the href resolver and the renderer's mount path. */
+export interface OgImageUrlOptions {
+    /**
+     * Resolves the card's path to the href emitted — the production origin, so
+     * the URL is absolute (`og:image` must be). `<Head>` passes its
+     * `canonicalHref`, which defaults to the components context's `href`.
+     * Defaults to the identity.
+     */
+    readonly href?: ((path: string) => string) | undefined;
+    /** The path the card renderer is mounted at. Default `/og`. */
+    readonly basePath?: string | undefined;
+}
+/**
+ * Build the `og:image` URL for a page's share card: `<basePath>/<slug>.png`
+ * resolved through `href`, with the title, description and version token in
+ * the query. Returns `undefined` for a blank title, so the caller falls back
+ * to its default share image.
+ */
+export declare function ogImageUrl(card: OgImageCard, options?: OgImageUrlOptions): string | undefined;

package/dist/seo/og-image.js

@@ -0,0 +1,82 @@
+/**
+ * The content-addressed Open Graph share-image URL builder.
+ *
+ * Shared by `<Head>` (which emits the URL as `og:image`) and whatever renders
+ * the card (an app route or Worker reading the same query params), so the
+ * producer and the consumer of the URL can never disagree on the param names
+ * or the length caps — import the constants below on both sides.
+ *
+ * The URL is **content-addressed**: the title and description ride in the
+ * query, and a `v` token derived from the content's last-modified instant
+ * changes the whole URL whenever the content changes. A new URL is how the
+ * image cache-busts — link-preview scrapers (Facebook, LinkedIn, federated
+ * servers) cache aggressively and only re-fetch a URL they have not seen, so
+ * the version token is load-bearing, not cosmetic.
+ *
+ * @module
+ */
+/** Query param carrying the card title. */
+export const OG_TITLE_PARAM = 't';
+/** Query param carrying the card's second line (the page description). */
+export const OG_SUBTITLE_PARAM = 'd';
+/** Query param carrying the cache-busting version token. */
+export const OG_VERSION_PARAM = 'v';
+/**
+ * Longest title, in characters, carried in a share-card URL. A renderer
+ * should re-apply this cap (and `OG_SUBTITLE_MAX_LENGTH`) defensively; here
+ * they keep the emitted URL short.
+ */
+export const OG_TITLE_MAX_LENGTH = 120;
+/** Longest description, in characters, carried in a share-card URL; see `OG_TITLE_MAX_LENGTH`. */
+export const OG_SUBTITLE_MAX_LENGTH = 200;
+/** Share-card width in pixels — the 1.91:1 Open Graph standard, with `OG_IMAGE_HEIGHT`. */
+export const OG_IMAGE_WIDTH = 1200;
+/** Share-card height in pixels; see `OG_IMAGE_WIDTH`. */
+export const OG_IMAGE_HEIGHT = 630;
+/**
+ * Reduce an identity to a short URL-safe slug. Cosmetic — a renderer should
+ * ignore it — so an empty or garbage id collapses to a stable fallback rather
+ * than an invalid path.
+ */
+const toSlug = (id) => {
+    const slug = id
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 64);
+    return slug === '' ? 'page' : slug;
+};
+/** Epoch milliseconds of `updatedAt`, or `undefined` when absent or unparseable. */
+const versionToken = (updatedAt) => {
+    if (updatedAt === null || updatedAt === undefined)
+        return undefined;
+    const time = updatedAt instanceof Date
+        ? updatedAt.getTime()
+        : typeof updatedAt === 'number'
+            ? updatedAt
+            : Date.parse(updatedAt);
+    return Number.isFinite(time) ? String(time) : undefined;
+};
+/**
+ * Build the `og:image` URL for a page's share card: `<basePath>/<slug>.png`
+ * resolved through `href`, with the title, description and version token in
+ * the query. Returns `undefined` for a blank title, so the caller falls back
+ * to its default share image.
+ */
+export function ogImageUrl(card, options = {}) {
+    const title = card.title.trim();
+    if (title === '')
+        return undefined;
+    const params = new URLSearchParams();
+    params.set(OG_TITLE_PARAM, title.slice(0, OG_TITLE_MAX_LENGTH));
+    const description = card.description?.trim();
+    if (description !== undefined && description !== '') {
+        params.set(OG_SUBTITLE_PARAM, description.slice(0, OG_SUBTITLE_MAX_LENGTH));
+    }
+    const version = versionToken(card.updatedAt);
+    if (version !== undefined)
+        params.set(OG_VERSION_PARAM, version);
+    const basePath = (options.basePath ?? '/og').replace(/\/+$/, '');
+    const href = options.href ?? ((path) => path);
+    return `${href(`${basePath}/${toSlug(card.id)}.png`)}?${params.toString()}`;
+}

package/dist/seo/types.d.ts

@@ -0,0 +1,43 @@
+/**
+ * The data shapes `<Head>` takes.
+ *
+ * @module
+ */
+/** The Open Graph `og:type` values `<Head>` emits. */
+export type OpenGraphType = 'website' | 'article' | 'profile';
+/**
+ * The Schema.org page types `<Head>` understands, used only to derive
+ * `og:type` when `openGraphType` is not given (so it is never empty).
+ */
+export type SchemaPageType = 'WebPage' | 'WebSite' | 'CollectionPage' | 'Article' | 'BlogPosting' | 'ProfilePage';
+/** The Twitter / X card variants. */
+export type TwitterCard = 'summary' | 'summary_large_image';
+/** A social preview image. `url` must be absolute. */
+export interface HeadImage {
+    readonly url: string;
+    readonly alt?: string | undefined;
+    readonly width?: number | undefined;
+    readonly height?: number | undefined;
+    /** The MIME type, e.g. `image/png`. */
+    readonly type?: string | undefined;
+}
+/** One `<link rel="alternate" hreflang>`. */
+export interface AlternateLink {
+    readonly href: string;
+    /** A BCP 47 tag, or `x-default`. */
+    readonly lang: string;
+}
+/** The `robots` meta directive. Both default to `true`. */
+export interface Robots {
+    readonly index?: boolean | undefined;
+    readonly follow?: boolean | undefined;
+}
+/** A feed advertised with `<link rel="alternate">`. */
+export interface FeedLink {
+    /** App-relative path, resolved through `canonicalHref` like the canonical URL. */
+    readonly path: string;
+    /** The feed's title. Default `'Latest changes'`. */
+    readonly title?: string | undefined;
+    /** The feed's MIME type. Default `application/feed+json` (JSON Feed 1.1). */
+    readonly type?: string | undefined;
+}

package/dist/seo/types.js

@@ -0,0 +1,6 @@
+/**
+ * The data shapes `<Head>` takes.
+ *
+ * @module
+ */
+export {};

package/dist/theme.css

@@ -0,0 +1,161 @@
+/*
+ * The library's design tokens: two daisyUI themes, `light` and `dark`, that
+ * every component in this package renders on.
+ *
+ * Shipped as the package's `./theme.css` export and imported by BOTH
+ * consumers — an application's CSS entry, and Storybook's
+ * `.storybook/preview.css` relatively — so there is exactly one copy of every
+ * token.
+ *
+ * **This is the whole styling vocabulary.** A component here reaches for a
+ * semantic name — `bg-base-200`, `text-error`, `btn-primary` — and never for
+ * a raw palette class (`bg-green-700`), a hex, or an `oklch()` of its own. Two
+ * vocabularies for one palette is how a design system drifts.
+ *
+ * The values below are DELIBERATELY NEUTRAL: an achromatic surface ramp and a
+ * single mid-slate brand hue, so the library looks like nothing in particular
+ * out of the box. They are a starting point, not a brand. An application
+ * overrides them by declaring its own `light` / `dark` themes after importing
+ * this file, or by naming its own themes entirely and never importing it.
+ */
+@plugin "daisyui/theme" {
+  name: 'light';
+  default: true;
+  color-scheme: light;
+  /* Surfaces: a neutral off-white ramp. */
+  --color-base-100: oklch(100% 0 0);
+  --color-base-200: oklch(96% 0 0);
+  --color-base-300: oklch(91% 0 0);
+  --color-base-content: oklch(22% 0 0);
+  /* Brand: slate. Replace these four pairs, not the surface ramp. */
+  --color-primary: oklch(45% 0.03 260);
+  --color-primary-content: oklch(98% 0 0);
+  --color-secondary: oklch(55% 0.02 260);
+  --color-secondary-content: oklch(98% 0 0);
+  --color-accent: oklch(60% 0.02 260);
+  --color-accent-content: oklch(98% 0 0);
+  --color-neutral: oklch(30% 0 0);
+  --color-neutral-content: oklch(96% 0 0);
+  /* Status: blue / green / amber / red, at their conventional roles. */
+  --color-info: oklch(62.3% 0.214 259.815);
+  --color-info-content: oklch(97% 0.01 260);
+  --color-success: oklch(59.6% 0.145 163.225);
+  --color-success-content: oklch(97% 0.02 163);
+  --color-warning: oklch(76.9% 0.188 70.08);
+  --color-warning-content: oklch(28% 0.07 70);
+  --color-error: oklch(57.7% 0.245 27.325);
+  --color-error-content: oklch(97% 0.01 27);
+  --radius-selector: 1rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.75rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
+}
+
+@plugin "daisyui/theme" {
+  name: 'dark';
+  prefersdark: true;
+  color-scheme: dark;
+  /* Surfaces: the same ramp inverted — not a different ramp. */
+  --color-base-100: oklch(18% 0 0);
+  --color-base-200: oklch(22% 0 0);
+  --color-base-300: oklch(28% 0 0);
+  --color-base-content: oklch(95% 0 0);
+  /* Brand: the light theme's hue, stepped for a dark surface rather than
+     flipped — a colour that clears contrast on white rarely clears it on
+     near-black. */
+  --color-primary: oklch(72% 0.04 260);
+  --color-primary-content: oklch(20% 0.01 260);
+  --color-secondary: oklch(66% 0.03 260);
+  --color-secondary-content: oklch(20% 0.01 260);
+  --color-accent: oklch(70% 0.03 260);
+  --color-accent-content: oklch(20% 0.01 260);
+  --color-neutral: oklch(26% 0 0);
+  --color-neutral-content: oklch(92% 0 0);
+  --color-info: oklch(70.7% 0.165 254.624);
+  --color-info-content: oklch(20% 0.05 255);
+  --color-success: oklch(76.5% 0.177 163.223);
+  --color-success-content: oklch(20% 0.05 163);
+  --color-warning: oklch(82.8% 0.189 84.429);
+  --color-warning-content: oklch(25% 0.07 84);
+  --color-error: oklch(70.4% 0.191 22.216);
+  --color-error-content: oklch(20% 0.05 22);
+  --radius-selector: 1rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.75rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
+}
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * Categorical chart slots — appended block, owned by `charts/`.
+ *
+ * The one part of the palette a component reads as a raw custom property
+ * rather than through a Tailwind class, because a series colour is chosen by
+ * INDEX at runtime and Tailwind only emits classes it can see spelled out.
+ *
+ * Four slots, and **validated rather than chosen by eye**: the figures below
+ * were measured against the two themes above (`--color-base-100` is
+ * `oklch(100% 0 0)` → #ffffff in light, `oklch(18% 0 0)` → #121212 in dark),
+ * with dichromacy simulated by the Machado (2009) severity-1.0 matrices on
+ * linear sRGB and separation as Euclidean ΔE in OKLab ×100.
+ *
+ *   light — #008236 #4f39f6 #e17100 #155dfc
+ *     contrast on the surface 4.94 / 6.44 / 3.19 / 5.26 : 1
+ *     worst ADJACENT pair: normal ΔE 37.6, simulated-dichromat ΔE 8.3
+ *   dark — #00a63e #615fff #e17100 #155dfc
+ *     contrast on the surface 5.85 / 4.11 / 5.89 / 3.58 : 1
+ *     worst ADJACENT pair: normal ΔE 38.6, simulated-dichromat ΔE 9.8
+ *
+ * Every slot clears 3:1 against its own surface; every adjacent pair clears the
+ * ΔE ≥ 15 normal-vision floor and the ΔE ≥ 8 dichromat floor in both modes.
+ * The dark set is STEPPED for the dark surface, not flipped: slots 1 and 2 move
+ * one step lighter, slots 3 and 4 already sit inside both modes' bands.
+ *
+ * Three rules the slots exist to make keepable:
+ *
+ * - **Order is the safety mechanism.** The gates above are measured on ADJACENT
+ *   pairs, which is what a line, bar or stack puts side by side. Re-ordering
+ *   the slots invalidates the measurement — slots 2 and 4 (indigo and blue) are
+ *   ΔE 2.7 apart in light and 0.4 in dark under simulated dichromacy, so a
+ *   chart that puts them side by side has no colour difference for that reader
+ *   at all.
+ * - **Four is the cap, and three is the cap for a form that compares EVERY
+ *   pair at once** (a scatter, a choropleth, a pie). A fifth series is a design
+ *   problem — fold it into an "other" series, or facet — never a generated hue.
+ *   `Chart` draws a fifth in `--color-neutral` and names it in the legend
+ *   rather than inventing one. Even at three, the 1↔3 pair falls to ΔE 4.9
+ *   under protanopia, which is the reason `Chart`'s `sr-only` data table is
+ *   always in the DOM: colour is the fast path, never the only one.
+ * - **Status colours are not series colours.** `--color-success` / `-warning` /
+ *   `-error` mean a STATE, and slot 3 is deliberately amber-600 rather than the
+ *   amber-500 that IS `--color-warning`, so a series can never impersonate one.
+ *
+ * A consumer replacing the two themes above should replace these four with
+ * their own measured set, in the same order.
+ * ──────────────────────────────────────────────────────────────────────────── */
+:root {
+  /*
+   * One declaration per slot, not one per mode: `light-dark()` resolves against
+   * the `color-scheme` each daisyUI theme already sets — `light` on the `light`
+   * theme, `dark` on the `dark` one, and on whichever the OS asks for by
+   * default. Writing the dark set out a second time under `[data-theme]` and a
+   * third under `prefers-color-scheme` is how two of the three drift apart.
+   */
+  --color-chart-1: light-dark(
+    oklch(52.7% 0.154 150.069),
+    oklch(62.7% 0.194 149.214)
+  ); /* green-700 / -600 */
+  --color-chart-2: light-dark(
+    oklch(51.1% 0.262 276.966),
+    oklch(58.5% 0.233 277.117)
+  ); /* indigo-600 / -500 */
+  --color-chart-3: oklch(66.6% 0.179 58.318); /* amber-600, inside both bands */
+  --color-chart-4: oklch(54.6% 0.245 262.881); /* blue-600, inside both bands */
+}