@charcuterie/ui 2.18.0 → 3.1.0

package/dist/MarkdownEditor/markdownSpans.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Markdown → coloured spans, with **every character kept**.
+ *
+ * This is the half of the live-hybrid editor that decides what a
+ * line looks like, and its one hard requirement is not a parsing
+ * requirement at all — it is a geometry one.
+ *
+ * ### The concatenation invariant
+ *
+ * The editing surface is a real `<textarea>` with a painted layer
+ * behind it, sharing one grid cell. The textarea owns the caret,
+ * the selection, the undo stack and the IME; the layer owns the
+ * colour. That only works while the two layers **wrap identically**,
+ * and they only wrap identically while they contain the *same
+ * characters in the same order*.
+ *
+ * So `toMarkdownLines(text)` is not a parser in the usual sense. It
+ * never drops a marker, never normalises whitespace, never resolves
+ * a reference, and never emits a node the source did not contain.
+ * Joining every span's text back together, with `\n` between lines,
+ * reproduces the input byte for byte — `markdownSpans.test.ts`
+ * asserts exactly that over a fixture corpus, and it is the test
+ * that stops a well-meaning "let's trim the trailing space"
+ * from silently shearing the caret away from the glyphs.
+ *
+ * ### It emits kinds, not HTML
+ *
+ * The return value is a list of `{ kind, text }` pairs. There is no
+ * HTML string anywhere in this module, no `innerHTML`, and no
+ * sanitiser — because there is nothing to sanitise. Docket's whole
+ * reason to exist is that HTML-in-the-field destroyed a previous
+ * tool's data, and the cheapest possible guarantee against that is
+ * a pipeline in which HTML is never *constructed*. React renders
+ * these spans as text nodes; a `<script>` in the source is a
+ * `<script>` on screen.
+ *
+ * ### Why it is line-based, and what that costs
+ *
+ * A CommonMark parser resolves lazy continuation, setext headings,
+ * link reference definitions and nested block containers across the
+ * whole document. This resolves one line at a time, carrying
+ * exactly one bit of cross-line state: whether we are inside a
+ * fenced code block.
+ *
+ * That is a deliberate trade. Painting is per-line and re-runs on
+ * every keystroke, so the cost has to be linear in the line, not in
+ * the document; and a mis-coloured marker is a cosmetic defect
+ * while a mis-*placed* one is a broken editor. The known gaps are
+ * written down in `MarkdownEditor.mdx` rather than hidden: setext
+ * headings, indented (four-space) code blocks, reference links, and
+ * emphasis that spans a line break all colour as plain text. They
+ * still **store** correctly, because the stored value is the
+ * textarea's, not this module's.
+ */
+export type MarkdownSpanKind = "code" | "emphasis" | "heading" | "link" | "marker" | "plain" | "strikethrough" | "strong" | "url";
+export type MarkdownSpan = {
+    kind: MarkdownSpanKind;
+    text: string;
+};
+export type MarkdownLineKind = "blockquote" | "code" | "heading" | "list" | "paragraph" | "table" | "thematicBreak";
+export type MarkdownLine = {
+    kind: MarkdownLineKind;
+    spans: MarkdownSpan[];
+};
+/**
+ * The inline scanner.
+ *
+ * `baseKind` is what unmarked text becomes — `"plain"` in a
+ * paragraph, `"heading"` inside a heading — so a heading's words
+ * carry the heading colour while the `##` in front of them stays a
+ * marker.
+ */
+export declare const toInlineSpans: (text: string, baseKind?: MarkdownSpanKind) => MarkdownSpan[];
+/**
+ * The whole document, one entry per line.
+ *
+ * `text.split("\n")` on an empty string yields `[""]` — one empty
+ * line — which is right: an empty editor still has a line for the
+ * caret to sit on, and the painted layer still needs a row so the
+ * two layers agree about where line 0 is.
+ */
+export declare const toMarkdownLines: (text: string) => MarkdownLine[];
+/**
+ * Which line the caret is on, from a character offset.
+ *
+ * The active line is the one construct in this editor that is
+ * *state* rather than syntax: its markers paint at full strength
+ * and every other line's fade back, which is the whole "raw syntax
+ * on the cursor's line" behaviour.
+ */
+export declare const toLineIndex: (text: string, offset: number) => number;
+//# sourceMappingURL=markdownSpans.d.ts.map

package/dist/MarkdownEditor/markdownSpans.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdownSpans.d.ts","sourceRoot":"","sources":["../../src/MarkdownEditor/markdownSpans.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AAEH,MAAM,MAAM,gBAAgB,GACxB,MAAM,GACN,UAAU,GACV,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,GACP,eAAe,GACf,QAAQ,GACR,KAAK,CAAA;AAET,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,gBAAgB,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,gBAAgB,GACxB,YAAY,GACZ,MAAM,GACN,SAAS,GACT,MAAM,GACN,WAAW,GACX,OAAO,GACP,eAAe,CAAA;AAEnB,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,gBAAgB,CAAA;IACtB,KAAK,EAAE,YAAY,EAAE,CAAA;CACtB,CAAA;AA2ED;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GACxB,MAAM,MAAM,EACZ,WAAU,gBAA0B,KACnC,YAAY,EAkId,CAAA;AAkGD;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAC1B,MAAM,MAAM,KACX,YAAY,EAyBd,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GACtB,MAAM,MAAM,EACZ,QAAQ,MAAM,KACb,MAYF,CAAA"}

package/dist/MarkdownEditor/markdownSpans.js

@@ -0,0 +1,303 @@
+/**
+ * Markdown → coloured spans, with **every character kept**.
+ *
+ * This is the half of the live-hybrid editor that decides what a
+ * line looks like, and its one hard requirement is not a parsing
+ * requirement at all — it is a geometry one.
+ *
+ * ### The concatenation invariant
+ *
+ * The editing surface is a real `<textarea>` with a painted layer
+ * behind it, sharing one grid cell. The textarea owns the caret,
+ * the selection, the undo stack and the IME; the layer owns the
+ * colour. That only works while the two layers **wrap identically**,
+ * and they only wrap identically while they contain the *same
+ * characters in the same order*.
+ *
+ * So `toMarkdownLines(text)` is not a parser in the usual sense. It
+ * never drops a marker, never normalises whitespace, never resolves
+ * a reference, and never emits a node the source did not contain.
+ * Joining every span's text back together, with `\n` between lines,
+ * reproduces the input byte for byte — `markdownSpans.test.ts`
+ * asserts exactly that over a fixture corpus, and it is the test
+ * that stops a well-meaning "let's trim the trailing space"
+ * from silently shearing the caret away from the glyphs.
+ *
+ * ### It emits kinds, not HTML
+ *
+ * The return value is a list of `{ kind, text }` pairs. There is no
+ * HTML string anywhere in this module, no `innerHTML`, and no
+ * sanitiser — because there is nothing to sanitise. Docket's whole
+ * reason to exist is that HTML-in-the-field destroyed a previous
+ * tool's data, and the cheapest possible guarantee against that is
+ * a pipeline in which HTML is never *constructed*. React renders
+ * these spans as text nodes; a `<script>` in the source is a
+ * `<script>` on screen.
+ *
+ * ### Why it is line-based, and what that costs
+ *
+ * A CommonMark parser resolves lazy continuation, setext headings,
+ * link reference definitions and nested block containers across the
+ * whole document. This resolves one line at a time, carrying
+ * exactly one bit of cross-line state: whether we are inside a
+ * fenced code block.
+ *
+ * That is a deliberate trade. Painting is per-line and re-runs on
+ * every keystroke, so the cost has to be linear in the line, not in
+ * the document; and a mis-coloured marker is a cosmetic defect
+ * while a mis-*placed* one is a broken editor. The known gaps are
+ * written down in `MarkdownEditor.mdx` rather than hidden: setext
+ * headings, indented (four-space) code blocks, reference links, and
+ * emphasis that spans a line break all colour as plain text. They
+ * still **store** correctly, because the stored value is the
+ * textarea's, not this module's.
+ */
+/**
+ * A fence opens or closes on any line whose first non-space run is
+ * three or more backticks or tildes. Up to three leading spaces,
+ * per CommonMark; a fourth would be an indented code block, which
+ * this module deliberately does not track.
+ */
+const FENCE_PATTERN = /^ {0,3}(?:```|~~~)/;
+const INDENT_PATTERN = /^[ \t]*/;
+const BLOCKQUOTE_PATTERN = /^(?:>[ \t]?)+/;
+const THEMATIC_BREAK_PATTERN = /^(?:\*[ \t]*){3,}$|^(?:-[ \t]*){3,}$|^(?:_[ \t]*){3,}$/;
+const HEADING_PATTERN = /^#{1,6}[ \t]+/;
+const LIST_MARKER_PATTERN = /^(?:[-*+]|\d{1,9}[.)])[ \t]+/;
+const TASK_MARKER_PATTERN = /^\[[ xX]\][ \t]*/;
+/**
+ * Sticky, because every one of these is tried at a known index
+ * rather than searched for. A non-sticky `exec` would happily match
+ * an emphasis pair fifty characters further down the line and the
+ * scanner would swallow everything in between.
+ *
+ * Order is the whole grammar here, and two orderings are
+ * load-bearing:
+ *
+ *  - **Escape first.** `\*not emphasis\*` has to lose to the
+ *    backslash, or the editor colours text the renderer will not.
+ *  - **Code before everything.** A code span suppresses every other
+ *    construct inside it, which is what makes `` `**` `` render as
+ *    two asterisks rather than an unterminated bold run.
+ *  - **Image before link**, because `![alt](url)` starts with a
+ *    valid link at index 1.
+ *  - **Strong before emphasis**, because `**` starts with `*`.
+ */
+const INLINE_PATTERNS = {
+    code: /(`+)([^\n]*?)\1/y,
+    emphasis: /([*_])(?=[^\s*_])([^\n*_]*?[^\s*_])\1/y,
+    escape: /\\([\\`*_{}[\]()#+\-.!>~|])/y,
+    image: /(!\[)([^\]\n]*)(\]\()([^)\s\n]*)(\))/y,
+    link: /(\[)([^\]\n]*)(\]\()([^)\s\n]*)(\))/y,
+    strikethrough: /(~~)(?=\S)([^\n]*?\S)\1/y,
+    strong: /(\*\*|__)(?=\S)([^\n]*?\S)\1/y,
+};
+const pushSpan = (spans, kind, text) => {
+    if (text === "") {
+        return;
+    }
+    const previous = spans.at(-1);
+    // Merged as they are pushed rather than in a second pass. The
+    // scanner emits one span per plain *character*, so without this a
+    // 200-character paragraph is 200 React elements and every
+    // keystroke reconciles all of them.
+    if (previous?.kind === kind) {
+        previous.text += text;
+        return;
+    }
+    spans.push({ kind, text });
+};
+/**
+ * The inline scanner.
+ *
+ * `baseKind` is what unmarked text becomes — `"plain"` in a
+ * paragraph, `"heading"` inside a heading — so a heading's words
+ * carry the heading colour while the `##` in front of them stays a
+ * marker.
+ */
+export const toInlineSpans = (text, baseKind = "plain") => {
+    const spans = [];
+    let index = 0;
+    while (index < text.length) {
+        INLINE_PATTERNS.escape.lastIndex = index;
+        const escaped = INLINE_PATTERNS.escape.exec(text);
+        if (escaped) {
+            pushSpan(spans, "marker", "\\");
+            pushSpan(spans, baseKind, escaped[1] ?? "");
+            index += escaped[0].length;
+            continue;
+        }
+        INLINE_PATTERNS.code.lastIndex = index;
+        const code = INLINE_PATTERNS.code.exec(text);
+        if (code) {
+            pushSpan(spans, "marker", code[1] ?? "");
+            pushSpan(spans, "code", code[2] ?? "");
+            pushSpan(spans, "marker", code[1] ?? "");
+            index += code[0].length;
+            continue;
+        }
+        INLINE_PATTERNS.image.lastIndex = index;
+        const image = INLINE_PATTERNS.image.exec(text);
+        if (image) {
+            pushSpan(spans, "marker", image[1] ?? "");
+            pushSpan(spans, "link", image[2] ?? "");
+            pushSpan(spans, "marker", image[3] ?? "");
+            pushSpan(spans, "url", image[4] ?? "");
+            pushSpan(spans, "marker", image[5] ?? "");
+            index += image[0].length;
+            continue;
+        }
+        INLINE_PATTERNS.link.lastIndex = index;
+        const link = INLINE_PATTERNS.link.exec(text);
+        if (link) {
+            pushSpan(spans, "marker", link[1] ?? "");
+            pushSpan(spans, "link", link[2] ?? "");
+            pushSpan(spans, "marker", link[3] ?? "");
+            pushSpan(spans, "url", link[4] ?? "");
+            pushSpan(spans, "marker", link[5] ?? "");
+            index += link[0].length;
+            continue;
+        }
+        INLINE_PATTERNS.strong.lastIndex = index;
+        const strong = INLINE_PATTERNS.strong.exec(text);
+        if (strong) {
+            pushSpan(spans, "marker", strong[1] ?? "");
+            pushSpan(spans, "strong", strong[2] ?? "");
+            pushSpan(spans, "marker", strong[1] ?? "");
+            index += strong[0].length;
+            continue;
+        }
+        INLINE_PATTERNS.strikethrough.lastIndex = index;
+        const struck = INLINE_PATTERNS.strikethrough.exec(text);
+        if (struck) {
+            pushSpan(spans, "marker", struck[1] ?? "");
+            pushSpan(spans, "strikethrough", struck[2] ?? "");
+            pushSpan(spans, "marker", struck[1] ?? "");
+            index += struck[0].length;
+            continue;
+        }
+        INLINE_PATTERNS.emphasis.lastIndex = index;
+        const emphasised = INLINE_PATTERNS.emphasis.exec(text);
+        if (emphasised) {
+            pushSpan(spans, "marker", emphasised[1] ?? "");
+            pushSpan(spans, "emphasis", emphasised[2] ?? "");
+            pushSpan(spans, "marker", emphasised[1] ?? "");
+            index += emphasised[0].length;
+            continue;
+        }
+        pushSpan(spans, baseKind, text[index] ?? "");
+        index += 1;
+    }
+    return spans;
+};
+const toTableSpans = (text) => {
+    const spans = [];
+    for (const part of text.split(/(\|)/)) {
+        if (part === "|") {
+            pushSpan(spans, "marker", part);
+            continue;
+        }
+        for (const span of toInlineSpans(part)) {
+            pushSpan(spans, span.kind, span.text);
+        }
+    }
+    return spans;
+};
+const toBlockLine = (line) => {
+    const spans = [];
+    const indent = INDENT_PATTERN.exec(line)?.[0] ?? "";
+    pushSpan(spans, "plain", indent);
+    let rest = line.slice(indent.length);
+    const quote = BLOCKQUOTE_PATTERN.exec(rest)?.[0];
+    if (quote !== undefined) {
+        pushSpan(spans, "marker", quote);
+        rest = rest.slice(quote.length);
+    }
+    if (THEMATIC_BREAK_PATTERN.test(rest)) {
+        pushSpan(spans, "marker", rest);
+        return { kind: "thematicBreak", spans };
+    }
+    const heading = HEADING_PATTERN.exec(rest)?.[0];
+    if (heading !== undefined) {
+        pushSpan(spans, "marker", heading);
+        for (const span of toInlineSpans(rest.slice(heading.length), "heading")) {
+            pushSpan(spans, span.kind, span.text);
+        }
+        return { kind: "heading", spans };
+    }
+    const listMarker = LIST_MARKER_PATTERN.exec(rest)?.[0];
+    if (listMarker !== undefined) {
+        pushSpan(spans, "marker", listMarker);
+        rest = rest.slice(listMarker.length);
+        const taskMarker = TASK_MARKER_PATTERN.exec(rest)?.[0];
+        if (taskMarker !== undefined) {
+            pushSpan(spans, "marker", taskMarker);
+            rest = rest.slice(taskMarker.length);
+        }
+        for (const span of toInlineSpans(rest)) {
+            pushSpan(spans, span.kind, span.text);
+        }
+        return { kind: "list", spans };
+    }
+    if (rest.startsWith("|")) {
+        for (const span of toTableSpans(rest)) {
+            pushSpan(spans, span.kind, span.text);
+        }
+        return { kind: "table", spans };
+    }
+    for (const span of toInlineSpans(rest)) {
+        pushSpan(spans, span.kind, span.text);
+    }
+    return {
+        kind: quote === undefined ? "paragraph" : "blockquote",
+        spans,
+    };
+};
+/**
+ * The whole document, one entry per line.
+ *
+ * `text.split("\n")` on an empty string yields `[""]` — one empty
+ * line — which is right: an empty editor still has a line for the
+ * caret to sit on, and the painted layer still needs a row so the
+ * two layers agree about where line 0 is.
+ */
+export const toMarkdownLines = (text) => {
+    let isInsideFence = false;
+    return text.split("\n").map((line) => {
+        if (FENCE_PATTERN.test(line)) {
+            isInsideFence = !isInsideFence;
+            return {
+                kind: "code",
+                spans: [{ kind: "marker", text: line }],
+            };
+        }
+        if (isInsideFence) {
+            return {
+                kind: "code",
+                spans: line === ""
+                    ? []
+                    : [{ kind: "code", text: line }],
+            };
+        }
+        return toBlockLine(line);
+    });
+};
+/**
+ * Which line the caret is on, from a character offset.
+ *
+ * The active line is the one construct in this editor that is
+ * *state* rather than syntax: its markers paint at full strength
+ * and every other line's fade back, which is the whole "raw syntax
+ * on the cursor's line" behaviour.
+ */
+export const toLineIndex = (text, offset) => {
+    const clamped = Math.max(0, Math.min(offset, text.length));
+    let lineIndex = 0;
+    for (let index = 0; index < clamped; index += 1) {
+        if (text[index] === "\n") {
+            lineIndex += 1;
+        }
+    }
+    return lineIndex;
+};
+//# sourceMappingURL=markdownSpans.js.map

package/dist/MarkdownEditor/markdownSpans.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdownSpans.js","sourceRoot":"","sources":["../../src/MarkdownEditor/markdownSpans.ts"],"names":[],"mappings":"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"}

package/dist/Select/Select.d.ts

@@ -24,7 +24,23 @@ export type SelectItem = SelectOption | SelectOptionGroup;
  * Same arrangement as `Button`, for the same reason.
  */
 export type SelectProps = Omit<ComponentPropsWithRef<"select">, "disabled" | "onChange" | "size" | "value"> & {
+    /**
+     * Goes on the **wrapper**, which is the box a caller means when
+     * they size a control. See the component docblock — the chevron
+     * is positioned against that wrapper, so a width anywhere else
+     * leaves it behind.
+     */
     className?: string;
+    /**
+     * The escape hatch for the inner `<select>` itself, for the
+     * things that genuinely are not the outer box: `font-mono` on the
+     * option text, a `text-*` override, a `bg-*`.
+     *
+     * Sizing does **not** belong here. The inner element is `w-full`
+     * and a width on it desynchronises it from the wrapper the
+     * chevron is pinned to, which is the whole of #112.
+     */
+    controlClassName?: string;
     isDisabled?: boolean;
     /**
      * The accessible name, when this is **not** inside a `Field`. A
@@ -59,6 +75,25 @@ export type SelectProps = Omit<ComponentPropsWithRef<"select">, "disabled" | "on
  * A styled native `<select>`, and the fleet's fourteen hand-rolled
  * ones collapse onto it.
  *
+ * ### Sizing: `className` is the wrapper, `controlClassName` is the select
+ *
+ * This renders a wrapper around the native `<select>` because the
+ * chevron has to live somewhere, and the chevron is positioned
+ * against that wrapper. `className` therefore lands on the wrapper
+ * and the `<select>` stays `w-full` inside it, so
+ * `className="w-44"` means "this control is 176px" — chevron
+ * included — which is what a caller writing a width already assumes.
+ *
+ * Before this, `className` went to the inner element only. The
+ * wrapper stayed `w-full`, the chevron stayed at *its* edge, and
+ * mux-magic's rules builder measured the gap at **869.6px** with the
+ * control's own text clipping beside it. The width never worked;
+ * `ui@2.16.0`'s `tailwind-merge` only made half of it work and made
+ * the other half visible.
+ *
+ * For the genuinely-inner things — `font-mono` on the option text, a
+ * `bg-*` — there is `controlClassName`.
+ *
  * ### There is no state kind here, and that is the finding
  *
  * Every other interactive component in this package owns its state
@@ -91,5 +126,5 @@ export type SelectProps = Omit<ComponentPropsWithRef<"select">, "disabled" | "on
  * from nothing: type-ahead, Home/End, PageUp/PageDown, the mobile
  * wheel picker, form submission, `:invalid`, and autofill.
  */
-export declare const Select: ({ className, isDisabled, label, onChange, options, placeholder, size, value, ...selectProps }: SelectProps) => ReactNode;
+export declare const Select: ({ className, controlClassName, isDisabled, label, onChange, options, placeholder, size, value, ...selectProps }: SelectProps) => ReactNode;
 //# sourceMappingURL=Select.d.ts.map

package/dist/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAEV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AASd,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;CACjC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,iBAAiB,CAAA;AAEzD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAC3C,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;;;;;OAOG;IACH,OAAO,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,MAAM,GAAI,+FAUpB,WAAW,KAAG,SAkFhB,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAEV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AASd,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;CACjC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,iBAAiB,CAAA;AAEzD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAC3C,GAAG;IACF;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;;OAQG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;;;;;OAOG;IACH,OAAO,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,MAAM,GAAI,iHAWpB,WAAW,KAAG,SAsGhB,CAAA"}

package/dist/Select/Select.js

@@ -7,6 +7,25 @@ const getIsGroup = (item) => "options" in item;
  * A styled native `<select>`, and the fleet's fourteen hand-rolled
  * ones collapse onto it.
  *
+ * ### Sizing: `className` is the wrapper, `controlClassName` is the select
+ *
+ * This renders a wrapper around the native `<select>` because the
+ * chevron has to live somewhere, and the chevron is positioned
+ * against that wrapper. `className` therefore lands on the wrapper
+ * and the `<select>` stays `w-full` inside it, so
+ * `className="w-44"` means "this control is 176px" — chevron
+ * included — which is what a caller writing a width already assumes.
+ *
+ * Before this, `className` went to the inner element only. The
+ * wrapper stayed `w-full`, the chevron stayed at *its* edge, and
+ * mux-magic's rules builder measured the gap at **869.6px** with the
+ * control's own text clipping beside it. The width never worked;
+ * `ui@2.16.0`'s `tailwind-merge` only made half of it work and made
+ * the other half visible.
+ *
+ * For the genuinely-inner things — `font-mono` on the option text, a
+ * `bg-*` — there is `controlClassName`.
+ *
  * ### There is no state kind here, and that is the finding
  *
  * Every other interactive component in this package owns its state
@@ -39,7 +58,20 @@ const getIsGroup = (item) => "options" in item;
  * from nothing: type-ahead, Home/End, PageUp/PageDown, the mobile
  * wheel picker, form submission, `:invalid`, and autofill.
  */
-export const Select = ({ className, isDisabled = false, label, onChange, options, placeholder, size = "md", value, ...selectProps }) => (_jsxs("div", { className: "relative inline-grid w-full items-center", children: [_jsxs("select", { ...selectProps, "aria-label": label, className: toClassName("w-full cursor-pointer appearance-none rounded-md border border-border-default bg-surface-raised text-content-primary transition-colors duration-(--duration-fast) ease-standard", 
+export const Select = ({ className, controlClassName, isDisabled = false, label, onChange, options, placeholder, size = "md", value, ...selectProps }) => (_jsxs("div", { className: toClassName("relative inline-grid w-full items-center", 
+    // `className` lands HERE, not on the `<select>`, and that is
+    // the fix for #112 rather than a stylistic choice. The chevron
+    // below is `absolute end-3` against this element, so a width
+    // that reaches only the inner control moves the control and
+    // leaves the chevron pinned to the old edge — measured at
+    // 869.6px adrift in mux-magic's rules builder, with the
+    // control's own text clipping at the same time.
+    //
+    // It also matches every other component in this package:
+    // `className` is the outermost box. `ms-auto` — which mux-magic
+    // passes and which did nothing on a `w-full` inner select — is
+    // the tell that callers already believed this.
+    className), children: [_jsxs("select", { ...selectProps, "aria-label": label, className: toClassName("w-full cursor-pointer appearance-none rounded-md border border-border-default bg-surface-raised text-content-primary transition-colors duration-(--duration-fast) ease-standard", 
             // Room for the chevron below, which sits in the same grid
             // cell. A `<select>`'s own arrow is what `appearance-none`
             // removes, and forgetting to put one back leaves a control
@@ -50,7 +82,11 @@ export const Select = ({ className, isDisabled = false, label, onChange, options
             // job (`[data-density]` scales `--control-height-*` past 44px on a
             // kiosk), so forcing 44px here made Select taller than Button et al.
             // at desktop density. See the controls-share-one-height decision.
-            CONTROL_SIZE_CLASS[size], "hover:border-border-strong", FOCUS_RING_CLASS, DISABLED_CLASS, className), defaultValue: value ??
+            CONTROL_SIZE_CLASS[size], "hover:border-border-strong", FOCUS_RING_CLASS, DISABLED_CLASS, 
+            // Inner-only, and deliberately not `className`. `w-full`
+            // above keeps this element the same width as the wrapper the
+            // chevron is measured from, so the two can never drift.
+            controlClassName), defaultValue: value ??
                 (placeholder === undefined ? undefined : ""), disabled: isDisabled, onChange: (changeEvent) => {
                 onChange?.(changeEvent.currentTarget.value);
             }, children: [placeholder === undefined ? null : (_jsx("option", { disabled: true, value: "", children: placeholder })), options.map((item) => getIsGroup(item) ? (_jsx("optgroup", { label: item.label, children: item.options.map((option) => (_jsx("option", { disabled: option.isDisabled, value: option.value, children: option.label }, option.value))) }, item.label)) : (_jsx("option", { disabled: item.isDisabled, value: item.value, children: item.label }, item.value)))] }), _jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute end-3 size-4 text-content-secondary", fill: "none", focusable: false, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.75, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }));

package/dist/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EACL,cAAc,EACd,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAgE/C,MAAM,UAAU,GAAG,CACjB,IAAgB,EACW,EAAE,CAAC,SAAS,IAAI,IAAI,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,WAAW,EACF,EAAa,EAAE,CAAC,CAC5B,eAAK,SAAS,EAAC,0CAA0C,aACvD,qBACM,WAAW,gBACH,KAAK,EACjB,SAAS,EAAE,WAAW,CACpB,iLAAiL;YACjL,0DAA0D;YAC1D,2DAA2D;YAC3D,2DAA2D;YAC3D,wCAAwC;YACxC,MAAM;YACN,kEAAkE;YAClE,mEAAmE;YACnE,mEAAmE;YACnE,qEAAqE;YACrE,kEAAkE;YAClE,kBAAkB,CAAC,IAAI,CAAC,EACxB,4BAA4B,EAC5B,gBAAgB,EAChB,cAAc,EACd,SAAS,CACV,EACD,YAAY,EACV,KAAK;gBACL,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAE9C,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,CACR,WAA2C,EAC3C,EAAE;gBACF,QAAQ,EAAE,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;YAC7C,CAAC,aAEA,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClC,iBAAQ,QAAQ,QAAC,KAAK,EAAC,EAAE,YACtB,WAAW,GACL,CACV,EAEA,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACpB,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACjB,mBAA2B,KAAK,EAAE,IAAI,CAAC,KAAK,YACzC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,iBACE,QAAQ,EAAE,MAAM,CAAC,UAAU,EAE3B,KAAK,EAAE,MAAM,CAAC,KAAK,YAElB,MAAM,CAAC,KAAK,IAHR,MAAM,CAAC,KAAK,CAIV,CACV,CAAC,IATW,IAAI,CAAC,KAAK,CAUd,CACZ,CAAC,CAAC,CAAC,CACF,iBACE,QAAQ,EAAE,IAAI,CAAC,UAAU,EAEzB,KAAK,EAAE,IAAI,CAAC,KAAK,YAEhB,IAAI,CAAC,KAAK,IAHN,IAAI,CAAC,KAAK,CAIR,CACV,CACF,IACM,EAET,6BAGc,MAAM,EAClB,SAAS,EAAC,kEAAkE,EAC5E,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,EAChB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,YAElC,eAAM,CAAC,EAAC,cAAc,GAAG,GACrB,IACF,CACP,CAAA"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"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"}

package/dist/categoricalStyles.d.ts

@@ -0,0 +1,53 @@
+/**
+ * One categorical index → class map, the twin of
+ * `intentStyles.ts`.
+ *
+ * Its own file rather than ten more entries in that one, because
+ * the two families are keyed by different things and mean different
+ * things. `intentStyles.ts` opens by explaining that it exists to
+ * delete rip-deck's duplicated `TONE_CLASS` — a *status* map, where
+ * every key is a claim about state. Nothing here is a claim about
+ * anything: an index is a user's pick for a label, and the only
+ * thing a component may do with it is paint it. Keeping them apart
+ * is also what keeps `IntentName` an exhaustive union that
+ * `getAsyncIntent` can switch over.
+ *
+ * **Every class name is written out in full, and that is not
+ * negotiable.** Tailwind v4 scans source text for *complete* class
+ * strings, so `` `bg-categorical-${index}-solid` `` generates
+ * nothing at all — the badge renders unstyled with no error, no
+ * warning, and no failing test unless something checks. Something
+ * does: `tailwindCandidates.test.ts` compiles every literal in this
+ * package through the real Tailwind and fails on any candidate it
+ * cannot generate. Forty lines of near-duplication is the price,
+ * and the alternative is the `--color-danger-9` that shipped in
+ * Docket: a token name that had never existed, resolving to
+ * nothing, painting transparent, and passing every assertion about
+ * whether the element was rendered.
+ */
+import type { CategoricalIndex } from "@charcuterie/tokens";
+import type { IntentAppearance } from "./intentStyles.ts";
+export declare const CATEGORICAL_APPEARANCE_CLASS: Record<CategoricalIndex, Record<IntentAppearance, string>>;
+/**
+ * Hover, split out for exactly the reason `INTENT_HOVER_CLASS` is:
+ * most things wearing a colour are not interactive. A label pill in
+ * a task list that lightens under the cursor is telling the user it
+ * can be clicked, and a `Badge` cannot be. So an interactive
+ * component opts in, and a static one cannot accidentally opt in.
+ *
+ * `solid` hovers toward `solidHover`, which for this family is
+ * **brighter** rather than deeper — the fill carries a near-black
+ * label, so it moves away from it in the opposite direction to an
+ * intent's white-labelled fill.
+ */
+export declare const CATEGORICAL_HOVER_CLASS: Record<CategoricalIndex, Record<IntentAppearance, string>>;
+/**
+ * The fill on its own, for the parts of a component that are a dot
+ * or a bar rather than a box — the swatch beside a label in a
+ * picker, a series marker on a chart. Same values, no border and no
+ * hover, because neither of those is a surface anyone can point at.
+ */
+export declare const CATEGORICAL_SOLID_FILL_CLASS: Record<CategoricalIndex, string>;
+/** The same ten as text, for a glyph or a dot's ring. */
+export declare const CATEGORICAL_CONTENT_CLASS: Record<CategoricalIndex, string>;
+//# sourceMappingURL=categoricalStyles.d.ts.map

package/dist/categoricalStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"categoricalStyles.d.ts","sourceRoot":"","sources":["../src/categoricalStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAE3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAC/C,gBAAgB,EAChB,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CA4FjC,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAC1C,gBAAgB,EAChB,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CA8DjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAC/C,gBAAgB,EAChB,MAAM,CAYP,CAAA;AAED,yDAAyD;AACzD,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,gBAAgB,EAChB,MAAM,CAYP,CAAA"}