@supertype.ai/foundations 0.1.24

package/dist/seo.d.ts

@@ -0,0 +1,174 @@
+/**
+ * Structured data and page metadata, as pure functions over a site config. No
+ * `next` import, not even a type one: `buildMetadata` returns a structurally
+ * compatible object a consumer assigns straight to `Metadata`.
+ */
+export interface SeoConfig {
+    /** Absolute site origin, no trailing slash. e.g. "https://supertype.ai" */
+    baseUrl: string;
+    siteName: string;
+    /** Absolute URL of the default social card. */
+    defaultOgImage: string;
+    /** Absolute URL of the publisher logo, for Article publisher nodes. */
+    logoUrl?: string;
+    /** Path prefix articles live under, no slashes. Defaults to "notes". */
+    articleBasePath?: string;
+    /** The publisher's own site, when it is not this one. Defaults to `baseUrl`. */
+    publisherUrl?: string;
+    /**
+     * Routes served as directory indexes, as a static export with `trailingSlash`
+     * does. Structured data then names the same URL the canonical does.
+     */
+    trailingSlash?: boolean;
+}
+export interface ArticleAuthor {
+    name: string;
+    url?: string;
+    sameAs?: string[];
+    /** The byline's role. Carries an authorship signal a name alone does not. */
+    jobTitle?: string;
+}
+export interface ArticleOptions {
+    /** Topic tags, emitted as the comma-separated string schema.org expects. */
+    keywords?: string[];
+    /** Reading time in minutes, emitted as an ISO-8601 duration. */
+    readingMinutes?: number;
+}
+/** The subset of Next's Metadata this builds. Assignable to it structurally. */
+export interface PageMetadata {
+    title: string;
+    description: string;
+    alternates: {
+        canonical: string;
+    };
+    openGraph: {
+        title: string;
+        description: string;
+        url: string;
+        images: {
+            url: string;
+            width: number;
+            height: number;
+            alt: string;
+        }[];
+    };
+    twitter: {
+        card: "summary_large_image";
+        title: string;
+        description: string;
+        images: string[];
+    };
+}
+export declare function createSeo(config: SeoConfig): {
+    absolute: (url: string) => string;
+    ORG_ID: string;
+    WEBSITE_ID: string;
+    /**
+     * The canonical is a path; Next resolves it against `metadataBase`. Never set
+     * one in the root layout — it merges into every page and declares them all
+     * duplicates of the homepage.
+     */
+    buildMetadata(title: string, description: string, slug: string, ogImage?: string): PageMetadata;
+    /** Schema.org BlogPosting for an article. */
+    buildArticleJsonLd(title: string, description: string, slug: string, authors: Array<string | ArticleAuthor>, datePublished?: string, image?: string, dateModified?: string, { keywords, readingMinutes }?: ArticleOptions): {
+        publisher: {
+            logo?: {
+                "@type": string;
+                url: string;
+            } | undefined;
+            "@type": string;
+            name: string;
+            url: string;
+        };
+        mainEntityOfPage: {
+            "@type": string;
+            "@id": string;
+        };
+        timeRequired?: string | undefined;
+        keywords?: string | undefined;
+        "@context": string;
+        "@type": string;
+        headline: string;
+        description: string;
+        url: string;
+        image: string;
+        datePublished: string | undefined;
+        dateModified: string | undefined;
+        author: {
+            jobTitle?: string | undefined;
+            sameAs?: string[] | undefined;
+            url?: string | undefined;
+            "@type": string;
+            name: string;
+        }[];
+    };
+    /** Schema.org BreadcrumbList. Item URLs may be relative. */
+    buildBreadcrumbJsonLd(items: Array<{
+        name: string;
+        url: string;
+    }>): {
+        "@context": string;
+        "@type": string;
+        itemListElement: {
+            "@type": string;
+            position: number;
+            name: string;
+            item: string;
+        }[];
+    };
+    /** Schema.org ItemList, for an ordered collection such as a topic page. */
+    buildItemListJsonLd(items: Array<{
+        name: string;
+        url: string;
+    }>): {
+        "@context": string;
+        "@type": string;
+        numberOfItems: number;
+        itemListElement: {
+            "@type": string;
+            position: number;
+            name: string;
+            url: string;
+        }[];
+    };
+    /** Schema.org FAQPage from question/answer pairs. */
+    buildFaqJsonLd(faq: Array<{
+        q: string;
+        a: string;
+    }>): {
+        "@context": string;
+        "@type": string;
+        mainEntity: {
+            "@type": string;
+            name: string;
+            acceptedAnswer: {
+                "@type": string;
+                text: string;
+            };
+        }[];
+    };
+    /** Schema.org WebPage and its narrower types. */
+    buildWebPageJsonLd(name: string, description: string, slug: string, type?: "WebPage" | "AboutPage" | "ContactPage" | "CollectionPage" | "WebSite", author?: string | ArticleAuthor): {
+        publisher: {
+            logo?: {
+                "@type": string;
+                url: string;
+            } | undefined;
+            "@type": string;
+            name: string;
+            url: string;
+        };
+        author?: {
+            jobTitle?: string | undefined;
+            sameAs?: string[] | undefined;
+            url?: string | undefined;
+            "@type": string;
+            name: string;
+        } | undefined;
+        "@context": string;
+        "@type": "WebPage" | "AboutPage" | "ContactPage" | "CollectionPage" | "WebSite";
+        name: string;
+        description: string;
+        url: string;
+    };
+};

package/dist/seo.js

@@ -0,0 +1,152 @@
+/**
+ * Structured data and page metadata, as pure functions over a site config. No
+ * `next` import, not even a type one: `buildMetadata` returns a structurally
+ * compatible object a consumer assigns straight to `Metadata`.
+ */
+export function createSeo(config) {
+    const { baseUrl, siteName, defaultOgImage, logoUrl, articleBasePath = "notes", publisherUrl, trailingSlash = false, } = config;
+    /** Resolves a possibly-relative URL against the site origin. */
+    const absolute = (url) => url.startsWith("http") ? url : `${baseUrl}${url.startsWith("/") ? "" : "/"}${url}`;
+    /**
+     * Stable `@id` anchors for the site's core entities. Pages reference these
+     * rather than re-declaring an Organization node, so crawlers merge them into
+     * one entity instead of collecting near-duplicates.
+     */
+    /**
+     * A page route in the shape this site actually serves. A URL already carrying
+     * a query, a fragment or a file extension is left alone — only a route gets
+     * the slash.
+     */
+    const route = (url) => {
+        const abs = absolute(url);
+        if (!trailingSlash || abs.endsWith("/") || /[#?]|\.[a-z0-9]+$/i.test(abs))
+            return abs;
+        return `${abs}/`;
+    };
+    /** A schema.org Person from a name or a fuller author record. */
+    const person = (a) => {
+        const author = typeof a === "string" ? { name: a } : a;
+        return {
+            "@type": "Person",
+            name: author.name,
+            ...(author.url ? { url: absolute(author.url) } : {}),
+            ...(author.sameAs?.length ? { sameAs: author.sameAs } : {}),
+            ...(author.jobTitle ? { jobTitle: author.jobTitle } : {}),
+        };
+    };
+    const ORG_ID = `${baseUrl}/#organization`;
+    const WEBSITE_ID = `${baseUrl}/#website`;
+    const publisher = {
+        "@type": "Organization",
+        name: siteName,
+        url: publisherUrl ?? baseUrl,
+        ...(logoUrl
+            ? { logo: { "@type": "ImageObject", url: logoUrl } }
+            : {}),
+    };
+    return {
+        absolute,
+        ORG_ID,
+        WEBSITE_ID,
+        /**
+         * The canonical is a path; Next resolves it against `metadataBase`. Never set
+         * one in the root layout — it merges into every page and declares them all
+         * duplicates of the homepage.
+         */
+        buildMetadata(title, description, slug, ogImage) {
+            const image = ogImage ?? defaultOgImage;
+            const path = slug ? `/${slug.replace(/^\//, "")}` : "/";
+            return {
+                title,
+                description,
+                alternates: { canonical: path },
+                openGraph: {
+                    title,
+                    description,
+                    url: path,
+                    images: [{ url: image, width: 1200, height: 628, alt: title }],
+                },
+                twitter: {
+                    card: "summary_large_image",
+                    title,
+                    description,
+                    images: [image],
+                },
+            };
+        },
+        /** Schema.org BlogPosting for an article. */
+        buildArticleJsonLd(title, description, slug, authors, datePublished, image, dateModified, { keywords, readingMinutes } = {}) {
+            const url = route(`${articleBasePath}/${slug}`);
+            return {
+                "@context": "https://schema.org",
+                "@type": "BlogPosting",
+                headline: title,
+                description,
+                url,
+                image: image ?? defaultOgImage,
+                datePublished,
+                // Falls back to datePublished rather than omitting. To a crawler, an
+                // article with no modified date reads as never revised.
+                dateModified: dateModified ?? datePublished,
+                author: authors.map(person),
+                ...(keywords?.length ? { keywords: keywords.join(", ") } : {}),
+                ...(readingMinutes ? { timeRequired: `PT${readingMinutes}M` } : {}),
+                publisher,
+                mainEntityOfPage: { "@type": "WebPage", "@id": url },
+            };
+        },
+        /** Schema.org BreadcrumbList. Item URLs may be relative. */
+        buildBreadcrumbJsonLd(items) {
+            return {
+                "@context": "https://schema.org",
+                "@type": "BreadcrumbList",
+                itemListElement: items.map((item, index) => ({
+                    "@type": "ListItem",
+                    position: index + 1,
+                    name: item.name,
+                    item: route(item.url),
+                })),
+            };
+        },
+        /** Schema.org ItemList, for an ordered collection such as a topic page. */
+        buildItemListJsonLd(items) {
+            return {
+                "@context": "https://schema.org",
+                "@type": "ItemList",
+                numberOfItems: items.length,
+                itemListElement: items.map((item, index) => ({
+                    "@type": "ListItem",
+                    position: index + 1,
+                    name: item.name,
+                    url: route(item.url),
+                })),
+            };
+        },
+        /** Schema.org FAQPage from question/answer pairs. */
+        buildFaqJsonLd(faq) {
+            return {
+                "@context": "https://schema.org",
+                "@type": "FAQPage",
+                mainEntity: faq.map((item) => ({
+                    "@type": "Question",
+                    name: item.q,
+                    acceptedAnswer: { "@type": "Answer", text: item.a },
+                })),
+            };
+        },
+        /** Schema.org WebPage and its narrower types. */
+        buildWebPageJsonLd(name, description, slug, type = "WebPage", 
+        /** A page carrying a byline says who wrote it, same as an article does. */
+        author) {
+            return {
+                "@context": "https://schema.org",
+                "@type": type,
+                name,
+                description,
+                url: route(slug),
+                ...(author ? { author: person(author) } : {}),
+                publisher,
+            };
+        },
+    };
+}

package/dist/typography/as.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+/** One union, not a bespoke one per component: the narrow ones only decided, for
+ * the reader, that a caption could not be a heading. Classes never change with
+ * the tag, so the tag is a prop rather than three more components. */
+export type TypographyTag = "span" | "p" | "div" | "small" | "label" | "h1" | "h2" | "h3" | "h4";
+/** A primitive's own props, plus the element choice. */
+export type WithAs<Own = unknown> = ComponentProps<"span"> & Own & {
+    as?: TypographyTag;
+};
+/** The cast lives here once instead of in each primitive; a per-tag generic would
+ * only narrow `ref`, at the price of a generic in four public signatures. `as`
+ * is not forwarded — on the DOM node it is an unknown attribute. */
+export declare function TextAs({ as, ...props }: ComponentProps<"span"> & {
+    as?: TypographyTag;
+}): import("react").JSX.Element;

package/dist/typography/as.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** The cast lives here once instead of in each primitive; a per-tag generic would
+ * only narrow `ref`, at the price of a generic in four public signatures. `as`
+ * is not forwarded — on the DOM node it is an unknown attribute. */
+export function TextAs({ as = "span", ...props }) {
+    const As = as;
+    return _jsx(As, { ...props });
+}

package/dist/typography/header.d.ts

@@ -0,0 +1,44 @@
+import { type VariantProps } from "class-variance-authority";
+import { type WithAs } from "./as.js";
+declare const h1Variants: (props?: ({
+    variant?: "default" | "display" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare function TypographyH1({ className, variant, children, ...props }: React.ComponentProps<"h1"> & VariantProps<typeof h1Variants>): import("react").JSX.Element;
+declare const h2Variants: (props?: ({
+    variant?: "default" | "display" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The h2 ramp as a class, for a caller that must render its own element. */
+export declare const headingClass: (variant?: VariantProps<typeof h2Variants>["variant"]) => string;
+/**
+ * `divider` is a rule under the heading, not a size — it used to ride the size
+ * axis as `default` vs `unbordered`, which made every call site state a border
+ * it had no opinion about in order to reach the size it wanted.
+ */
+export declare function TypographyH2({ className, variant, divider, children, ...props }: React.ComponentProps<"h2"> & VariantProps<typeof h2Variants> & {
+    divider?: boolean;
+}): import("react").JSX.Element;
+declare const h3Variants: (props?: ({
+    variant?: "default" | "display" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare function TypographyH3({ className, variant, children, ...props }: React.ComponentProps<"h3"> & VariantProps<typeof h3Variants>): import("react").JSX.Element;
+/** The card / panel title: 14px in the product, 20 on an editorial surface. */
+export declare function TypographyH4({ className, children, ...props }: React.ComponentProps<"h4">): import("react").JSX.Element;
+declare const eyebrowVariants: (props?: ({
+    tone?: "label" | "heading" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The eyebrow's ramp as a class, for a caller that cannot render our element —
+ * a dialog title primitive, a motion element. Same escape hatch as
+ * `headingClass`, and it exists so that a consumer needing the class does not
+ * hand-roll a second copy of it that then drifts from the component.
+ */
+export declare const eyebrowClass: (tone?: VariantProps<typeof eyebrowVariants>["tone"]) => string;
+/**
+ * An all-caps micro-label above a stat or a group of controls, and — since the
+ * deck was folded into it — the standfirst that sits with a page title.
+ *
+ * `as` covers the case the span cannot: an eyebrow that is also the section's
+ * heading. See `TypographyTag` in as.tsx for why the classes hold across tags.
+ */
+export declare function TypographyEyebrow({ className, tone, as, children, ...props }: WithAs<VariantProps<typeof eyebrowVariants>>): import("react").JSX.Element;
+export {};

package/dist/typography/header.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { TextAs } from "./as.js";
+/**
+ * The heading ladder. Four levels, one rung each.
+ *
+ * A heading does not pick its size — `--text-h1`…`--text-h4` in type.css do, and
+ * `.editorial` retunes all four together. That is the whole design: size is a
+ * property of the SURFACE, and level is the only thing a call site knows. When
+ * the rungs were shared with body copy the call site had to know both, which is
+ * how `larger` and `entry` appeared — variants whose entire job was to climb out
+ * of a rung that read fine in the product and landed under the paragraph on a
+ * marketing page. Retuning a surface now means editing two lines of CSS.
+ *
+ * `display` is a role rather than a size: the landing-page heading that has to
+ * outrank the same level in the docs. Size is all it changes — the slant it once
+ * carried turned out to be unwanted on every surface.
+ *
+ * Tailwind scans comments — never spell a class out here or it becomes a real
+ * utility.
+ */
+/**
+ * The heading face, stated once. Anything wearing it composes this rather than
+ * respelling it: a second literal here is a level that forked, and a literal
+ * weight beside the face survives into `.editorial` and synthesises the
+ * single-weight serif. viably asserts there is exactly one of these strings.
+ */
+const HEADING_FACE = "font-heading font-[number:var(--heading-weight)]";
+const HEADING_BASE = `scroll-m-20 ${HEADING_FACE} text-foreground`;
+const h1Variants = cva(`${HEADING_BASE} tracking-tight`, {
+    variants: {
+        variant: {
+            /** The page title: 22px in the product, 36 on an editorial surface. */
+            default: "text-h1",
+            /** A landing hero, drawn to be seen from the top of a scroll. */
+            display: "text-4xl sm:text-5xl",
+        },
+    },
+    defaultVariants: { variant: "default" },
+});
+export function TypographyH1({ className, variant, children, ...props }) {
+    return (_jsx("h1", { className: cn(h1Variants({ variant }), className), ...props, children: children }));
+}
+const h2Variants = cva(`${HEADING_BASE} tracking-[-0.01em] first:mt-0`, {
+    variants: {
+        variant: {
+            /** The section heading: 18px in the product, 30 on an editorial surface. */
+            default: "text-h2",
+            /** A landing page's section heading, one step over the docs equivalent. */
+            display: "text-3xl sm:text-4xl",
+        },
+    },
+    defaultVariants: { variant: "default" },
+});
+/** The h2 ramp as a class, for a caller that must render its own element. */
+export const headingClass = (variant) => h2Variants({ variant });
+/**
+ * `divider` is a rule under the heading, not a size — it used to ride the size
+ * axis as `default` vs `unbordered`, which made every call site state a border
+ * it had no opinion about in order to reach the size it wanted.
+ */
+export function TypographyH2({ className, variant, divider, children, ...props }) {
+    return (_jsx("h2", { className: cn(h2Variants({ variant }), divider && "w-fit border-b pb-2", className), ...props, children: children }));
+}
+const h3Variants = cva(HEADING_BASE, {
+    variants: {
+        variant: {
+            /** The subhead: 16px in the product, 24 on an editorial surface. */
+            default: "text-h3",
+            /**
+             * The lead card in a grid — a featured post, a pinned series. Present at
+             * this rung and not below it: h4 is a panel title, and a panel title that
+             * reaches for a display size is a section heading wearing the wrong tag.
+             */
+            display: "text-2xl sm:text-3xl",
+        },
+    },
+    defaultVariants: { variant: "default" },
+});
+export function TypographyH3({ className, variant, children, ...props }) {
+    return (_jsx("h3", { className: cn(h3Variants({ variant }), className), ...props, children: children }));
+}
+/** The card / panel title: 14px in the product, 20 on an editorial surface. */
+export function TypographyH4({ className, children, ...props }) {
+    return (_jsx("h4", { className: cn(HEADING_BASE, "text-h4", className), ...props, children: children }));
+}
+const eyebrowVariants = cva("block uppercase tracking-wider", {
+    variants: {
+        tone: {
+            /**
+             * Weight is load-bearing here: uppercase at this size loses shape at 400.
+             * Primary ink, stated not inherited — an eyebrow names the section under it,
+             * and one that turns red from its surroundings is not a heading.
+             */
+            heading: "text-xs font-semibold text-foreground",
+            /** Stat cards invert it: the figure is the headline, so the label yields. */
+            label: "text-2xs font-medium text-accent-foreground",
+        },
+    },
+    defaultVariants: { tone: "heading" },
+});
+/**
+ * The eyebrow's ramp as a class, for a caller that cannot render our element —
+ * a dialog title primitive, a motion element. Same escape hatch as
+ * `headingClass`, and it exists so that a consumer needing the class does not
+ * hand-roll a second copy of it that then drifts from the component.
+ */
+export const eyebrowClass = (tone) => eyebrowVariants({ tone });
+/**
+ * An all-caps micro-label above a stat or a group of controls, and — since the
+ * deck was folded into it — the standfirst that sits with a page title.
+ *
+ * `as` covers the case the span cannot: an eyebrow that is also the section's
+ * heading. See `TypographyTag` in as.tsx for why the classes hold across tags.
+ */
+export function TypographyEyebrow({ className, tone, as, children, ...props }) {
+    return (_jsx(TextAs, { as: as, className: cn(eyebrowVariants({ tone }), className), ...props, children: children }));
+}

package/dist/typography/highlight.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentProps } from "react";
+/**
+ * Inks only. A fill token (`--secondary`, `--accent`) has no chroma to wash with —
+ * at 44% alpha it is invisible, and the `luminosity` blend then strips the text's
+ * hue for nothing. That is why the earth tones enter as `-foreground`: those are
+ * the ink-grade pair, mixed to hold at text weight in both themes.
+ *
+ * Emphasis, never status. Warn and info and destructive are absent on purpose —
+ * a swipe of red under a phrase says less than the words do.
+ *
+ * The four earth tones are one palette, not a menu: each is a different hue,
+ * because two a reader cannot tell apart are one tone with two names.
+ */
+declare const MARKER_TONES: {
+    readonly primary: "var(--primary)";
+    readonly success: "var(--success)";
+    readonly ochre: "var(--ochre-foreground)";
+    readonly terracotta: "var(--terracotta-foreground)";
+    readonly sage: "var(--sage-foreground)";
+    readonly fig: "var(--fig-foreground)";
+};
+export type HighlightTone = keyof typeof MARKER_TONES;
+/**
+ * Marker highlight for inline text. Painted as the run's own background, never a
+ * mask — a mask would shave the glyph tops. `luminosity` lets letters borrow the
+ * marker's hue while keeping their own lightness, so contrast holds in both themes.
+ */
+export declare function TypographyHighlight({ tone, seed, className, style, children, ...props }: ComponentProps<"span"> & {
+    tone?: HighlightTone;
+    /** Changes the wobble and the grain of the swipe. Any integer. */
+    seed?: number;
+}): import("react").JSX.Element;
+export {};

package/dist/typography/highlight.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../cn.js";
+/**
+ * Inks only. A fill token (`--secondary`, `--accent`) has no chroma to wash with —
+ * at 44% alpha it is invisible, and the `luminosity` blend then strips the text's
+ * hue for nothing. That is why the earth tones enter as `-foreground`: those are
+ * the ink-grade pair, mixed to hold at text weight in both themes.
+ *
+ * Emphasis, never status. Warn and info and destructive are absent on purpose —
+ * a swipe of red under a phrase says less than the words do.
+ *
+ * The four earth tones are one palette, not a menu: each is a different hue,
+ * because two a reader cannot tell apart are one tone with two names.
+ */
+const MARKER_TONES = {
+    primary: "var(--primary)",
+    success: "var(--success)",
+    ochre: "var(--ochre-foreground)",
+    terracotta: "var(--terracotta-foreground)",
+    sage: "var(--sage-foreground)",
+    fig: "var(--fig-foreground)",
+};
+/** Wash density at a fraction of the theme's base alpha. */
+const ink = (weight) => `color-mix(in srgb, var(--marker) calc(var(--marker-alpha) * ${weight}), transparent)`;
+// One dab of the tip, in percentages so the swipe stretches with the phrase.
+// They overlap by a third — that scalloping is what separates a swipe from a
+// shape. The last three are the strand a felt tip pools into as it lifts.
+const DABS = [
+    { x: 3, y: 64, rx: 10, ry: 32, w: 0.34 },
+    { x: 16, y: 61, rx: 18, ry: 37, w: 0.46 },
+    { x: 31, y: 63, rx: 19, ry: 34, w: 0.44 },
+    { x: 46, y: 60, rx: 19, ry: 37, w: 0.48 },
+    { x: 61, y: 62, rx: 19, ry: 34, w: 0.43 },
+    { x: 76, y: 59, rx: 19, ry: 36, w: 0.47 },
+    { x: 89, y: 61, rx: 15, ry: 33, w: 0.4 },
+    { x: 98, y: 63, rx: 8, ry: 30, w: 0.3 },
+    { x: 18, y: 95.5, rx: 14, ry: 3.4, w: 0.3 },
+    { x: 44, y: 97.5, rx: 18, ry: 2.8, w: 0.26 },
+    { x: 68, y: 96, rx: 15, ry: 3.2, w: 0.2 },
+];
+// Integer-only: `Math.sin` is implementation-defined, so Node and the browser
+// disagreed in the last bits and the swipe hydrated as a mismatch.
+const hash = (seed, i) => {
+    let h = Math.imul(seed ^ 0x9e3779b9, 0x85ebca6b) ^ Math.imul(i + 0x165667b1, 0xc2b2ae35);
+    h ^= h >>> 15;
+    h = Math.imul(h, 0x2545f491);
+    h ^= h >>> 13;
+    return (h >>> 0) / 4294967296;
+};
+/** Rounding keeps the string identical across engines. */
+const q = (n) => Math.round(n * 100) / 100;
+const q4 = (n) => Math.round(n * 10000) / 10000;
+/** Deterministic noise in [-1, 1], so `seed` reshapes a swipe without a random source. */
+const drift = (seed, i) => hash(seed, i) * 2 - 1;
+/** `drift` remapped to a range, for the values that are a size rather than an offset. */
+const between = (seed, i, lo, hi) => lo + hash(seed, i) * (hi - lo);
+// Grain is drag, not noise. Bounds keep streaks inside the wash — one clearing
+// the feathered edge reads as dirt.
+const STREAKS = 9;
+const streak = (seed, k) => {
+    const i = 100 + k * 7; // Stride, so neighbouring streaks draw on unrelated noise.
+    const x = q(between(seed, i, 16, 82));
+    const y = q(between(seed, i + 1, 44, 86));
+    const rx = q(between(seed, i + 2, 10, 27));
+    const ry = q(between(seed, i + 3, 1.3, 3.1));
+    const w = q4(between(seed, i + 4, 0.07, 0.14));
+    return `radial-gradient(ellipse ${rx}% ${ry}% at ${x}% ${y}%, ${ink(w)} 0 58%, transparent 100%)`;
+};
+const fillCache = new Map();
+const markerFill = (seed) => {
+    const cached = fillCache.get(seed);
+    if (cached)
+        return cached;
+    // Streaks first: later layers paint under earlier ones.
+    const fill = [
+        ...Array.from({ length: STREAKS }, (_, k) => streak(seed, k)),
+        ...DABS.map(({ x, y, rx, ry, w }, i) => {
+            // Wobble scales with the dab; a flat offset would relocate the strand.
+            const cy = q(y + drift(seed, i) * Math.min(4, ry * 0.4));
+            const r = q(rx + drift(seed, i + DABS.length) * 2);
+            return `radial-gradient(ellipse ${r}% ${ry}% at ${x}% ${cy}%, ${ink(w)} 0 56%, ${ink(w * 0.45)} 82%, transparent 100%)`;
+        }),
+    ].join(", ");
+    fillCache.set(seed, fill);
+    return fill;
+};
+/**
+ * Marker highlight for inline text. Painted as the run's own background, never a
+ * mask — a mask would shave the glyph tops. `luminosity` lets letters borrow the
+ * marker's hue while keeping their own lightness, so contrast holds in both themes.
+ */
+export function TypographyHighlight({ tone = "primary", seed = 3, className, style, children, ...props }) {
+    return (_jsx("span", { className: cn("isolate inline px-[0.3em] py-[0.06em]", "[-webkit-box-decoration-break:clone] [box-decoration-break:clone]", "[--marker-alpha:44%] dark:[--marker-alpha:58%]", className), style: {
+            "--marker": MARKER_TONES[tone],
+            backgroundImage: markerFill(seed),
+            ...style,
+        }, ...props, children: _jsx("span", { className: "[mix-blend-mode:luminosity]", children: children }) }));
+}

package/dist/typography/index.d.ts

@@ -0,0 +1,4 @@
+export type { TypographyTag } from "./as.js";
+export * from "./header.js";
+export * from "./paragraph.js";
+export * from "./highlight.js";

package/dist/typography/index.js

@@ -0,0 +1,3 @@
+export * from "./header.js";
+export * from "./paragraph.js";
+export * from "./highlight.js";