@nanisoft/prism-ui 0.13.0 → 0.15.0

package/dist/components/ui/code-block.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/**
+ * How many lines the gutter counts, and the text the body draws.
+ *
+ * One `split` and two consumers, which is the whole point: the numbers and the
+ * code are derived from the same string in the same pass, so a gutter cannot
+ * claim a line the body does not have. The trailing empty line a file's final
+ * newline produces is dropped from the count only. The body still draws the
+ * `code` verbatim, because a `<pre>` that has lost its final newline is a
+ * snippet that no longer copies correctly, and a count that is one too high is a
+ * cosmetic defect by comparison.
+ */
+function linesOf(code) {
+    const lines = code.split('\n');
+    return code.endsWith('\n') ? Math.max(1, lines.length - 1) : lines.length;
+}
+/**
+ * A snippet of source: a mono surface with a header for the words that say what
+ * it is.
+ *
+ * **Prism ships a code surface and no syntax highlighter, and that is the
+ * decision worth defending.** A highlighter is not a presentation detail, it is
+ * a dependency that arrives with its own answer to the question "what does this
+ * token mean", and it is a second source of truth for exactly the kind of thing
+ * this system is built to have one of. Prism's law is that a value is authored
+ * once and reaches a consumer through the tokens; a highlighter decides on its
+ * own that `const` is a keyword and that a string is a string, and it decides
+ * that in a vocabulary of its own, published as a theme file, styled with class
+ * names that have to be reconciled against six packs and two modes. The
+ * reconciliation is where a highlighter stops being a convenience. The moment
+ * one is in the product, the token source and the highlight theme are two files
+ * that have to be kept in step, and a pack that moves a step leaves the second
+ * one behind, and the result is a code surface in the wrong hue that every
+ * colour gate in this repository reports as correct.
+ *
+ * So nothing here is highlighted, and the cost of that is real and worth naming:
+ * a long snippet is a wall of one colour, a reader scanning for a name has no
+ * colour to catch it, and Prism gives them the table of contents instead, which
+ * is the line numbers and the filename. A caller who has decided they want
+ * highlighting composes it themselves, and the two places to do it are named on
+ * the props: `actions` takes a control the caller built, and the whole item is a
+ * plain figure with a `code` string, so anything a caller wraps around it is
+ * theirs. What Prism will not do is hold the highlighting itself, because the
+ * day it does there are two answers to what a token means in every product that
+ * installs it.
+ *
+ * **The figure is named by `label`, and the naming is required whenever the
+ * caller brings a control.** See the union on `CodeBlockProps`: a copy button
+ * beside an unnamed figure is a button that acts on nothing a reader can
+ * identify. When the caller brings no control the name is optional, because a
+ * snippet inside a sentence is identified by the sentence.
+ *
+ * **The line numbers are a gutter, not part of the text.** They sit outside the
+ * `<pre>`, hidden from assistive technology, and the code inside the `<pre>` is
+ * the caller's `code` and nothing else. That is what keeps a copy clean: a copy
+ * that carries `1  2  3` down its left edge is a snippet pasted into a file
+ * that does not compile, and the alternative, numbers inside the `<pre>`, is
+ * exactly that. The cost of the gutter is alignment, because two parallel
+ * renderings of the same lines line up only while the lines do not wrap, which
+ * is why the body is `whitespace-pre` and scrolls horizontally. A snippet that
+ * soft-wrapped would put the numbers a line out of step after the first long
+ * line, and horizontal scroll is the honest answer: source is read by the line
+ * and not reflowed to the viewport.
+ *
+ * **It spreads no other prop.** `Kbd` and `Separator` spread a native element's
+ * props because there is no other route to them. A `<pre>` is a different case,
+ * and the reason is specific: a code surface is the one place in a component
+ * library where a caller might reasonably reach for `dangerouslySetInnerHTML`,
+ * because highlighting is usually done that way and this file has just argued
+ * against highlighting. A spread would hand them the attribute that bypasses
+ * every claim on the page in one prop, so the surface is `code`, `language`,
+ * `filename`, `lineNumbers`, `actions`, `label` and `className`, and nothing
+ * else.
+ *
+ * **The header is a header, and it is not always there.** It is drawn when
+ * there is something to put in it: a filename, a language, or a control. A
+ * snippet with no filename, no language and no control is a tinted box of
+ * monospace, and an empty strip above it would be a bar of ink saying nothing.
+ */
+function CodeBlock({ code, language, filename, lineNumbers = false, actions, label, className, }) {
+    const named = filename !== undefined || language !== undefined || actions !== undefined;
+    const count = linesOf(code);
+    return (_jsxs("figure", { "data-slot": "code-block", "data-named": named, "data-line-numbers": lineNumbers, "aria-label": label, className: cn('bg-muted border-border flex w-full flex-col overflow-hidden rounded-md border', className), children: [named ? (_jsxs("div", { "data-slot": "code-block-header", className: "border-border text-muted-foreground flex items-center justify-between gap-3 border-b px-3 py-1.5 text-xs", children: [_jsxs("span", { "data-slot": "code-block-name", className: "flex min-w-0 items-center gap-2 font-mono", children: [filename === undefined ? null : (_jsx("span", { "data-slot": "code-block-filename", className: "text-foreground truncate", children: filename })), language === undefined ? null : (_jsx("span", { "data-slot": "code-block-language", children: language }))] }), actions === undefined ? null : (_jsx("span", { "data-slot": "code-block-actions", className: "flex shrink-0 items-center gap-2", children: actions }))] })) : null, _jsx("div", { "data-slot": "code-block-body", className: "overflow-x-auto", children: _jsxs("div", { className: "flex min-w-max", children: [lineNumbers ? (_jsx("div", { "data-slot": "code-block-numbers", "aria-hidden": "true", className: "text-muted-foreground border-border w-9 shrink-0 border-r pr-2 text-right font-mono text-xs leading-relaxed tabular-nums select-none", children: Array.from({ length: count }, (_, index) => (_jsx("span", { "data-slot": "code-block-number", className: "block", children: index + 1 }, index))) })) : null, _jsx("pre", { "data-slot": "code-block-pre", className: "text-foreground min-w-0 flex-1 px-3 py-2 font-mono text-sm leading-relaxed whitespace-pre", children: _jsx("code", { "data-slot": "code-block-code", children: code }) })] }) })] }));
+}
+/**
+ * An inline run of source: a symbol, a command, a filename, a prop.
+ *
+ * The inline form of the same idea `CodeBlock` states at length, and the reason
+ * it is its own export rather than a size of the block is that the two answer
+ * different questions. A `CodeBlock` is something a reader may copy, so it is a
+ * figure with a name, a header and a gutter. A `Code` is a word inside a
+ * sentence, and the whole treatment is that it is visibly not prose: the mono
+ * face is the signal, and the muted surface is what stops a long symbol from
+ * reading as a run of emphasised text.
+ *
+ * Use it for a symbol the reader types (`--strict`), a component or a function
+ * name (`ChartFrame`), a file (`dialog.tsx`), a prop (`tone`) or a command. Do
+ * not use it for a value that is a number with a unit, for a key the reader
+ * presses, which is `Kbd`, or for anything the reader is meant to remember as
+ * prose. It renders a native `<code>`, so a screen reader identifies it as
+ * source rather than as text to read through, and it spreads a `<code>`'s own
+ * props because that is the only route to a title, a `lang` or an `id` on one.
+ */
+function Code({ className, ...props }) {
+    return (_jsx("code", { "data-slot": "code", className: cn('bg-muted text-foreground rounded-sm px-1 py-0.5 font-mono text-sm', className), ...props }));
+}
+export { CodeBlock, Code };

package/dist/components/ui/cohort-grid.d.ts

@@ -0,0 +1,210 @@
+import type { ComponentProps, ReactNode } from 'react';
+/**
+ * One column of the matrix, which is an offset from a row's own start.
+ *
+ * The key is a handle for the markup and the label is what a reader reads, and the
+ * split is the same one `IntensityGrid` uses for both of its axes. The words are
+ * the caller's because an offset is written in the product's own terms: "Week 1",
+ * "Month 3", "Day 30", "the first renewal", and a Component that composed one of
+ * those would be a Component shipping an English calendar into every consumer's
+ * product.
+ */
+export type CohortGridColumn = {
+    /** A stable handle for this offset, read by no one. */
+    key: string;
+    /** The offset's own name, printed as the column header. */
+    label: ReactNode;
+};
+/**
+ * One cohort, and the share still present at each offset.
+ *
+ * **A `null` is an offset the cohort has not reached, and it is not a zero.** This
+ * is the whole data model of a retention matrix: the youngest cohort has one
+ * reading and the oldest has twelve, so the matrix is ragged and its top corner is
+ * empty by arithmetic rather than by measurement. A zero means every member of the
+ * cohort had gone by that offset; a `null` means the cohort had not got there. They
+ * draw differently here, a zero prints `0%` and a `null` prints nothing, and they
+ * sound different because one of them is read and the other is blank.
+ *
+ * Every row must have exactly as many entries as there are columns, a `null` for
+ * each offset the cohort has not reached. That is stricter than it needs to be and
+ * the strictness is the point: a short row and a row of nulls draw the same, and
+ * only the second one says what it means.
+ */
+export type CohortGridRow = {
+    /**
+     * A stable handle for this cohort, read by no one.
+     *
+     * A string is required rather than made optional because it is the only identity
+     * a row has once its label is a node, and it is what lets a caller reorder rows
+     * without the matrix changing anything else.
+     */
+    key: string;
+    /** The cohort's own name, printed as its row header. */
+    label: ReactNode;
+    /** The share still present at each offset, in the order the columns are given. */
+    shares: readonly (number | null)[];
+};
+/** The props the CohortGrid accepts. */
+export interface CohortGridProps extends Omit<ComponentProps<'figure'>, 'children'> {
+    /**
+     * The cohorts, in the order they are read.
+     *
+     * The order is the caller's and nothing here sorts: the ordinary order is newest
+     * first, because the youngest cohort is the one being watched, and a Component
+     * that ordered by key size or by value would put the reader's question somewhere
+     * else.
+     */
+    rows: readonly CohortGridRow[];
+    /** The offsets, in the order they are read. */
+    columns: readonly CohortGridColumn[];
+    /**
+     * The name of the matrix, printed as the table's caption.
+     *
+     * Required rather than defaulted, for the two reasons `ChartFrame` states and the
+     * rest of the package repeats: two retention tables on one page are two tables a
+     * reader cannot tell apart, and a table with no name is neither announced nor
+     * linkable.
+     *
+     * **It is the caption and not an `aria-label` on the figure**, which is the one
+     * place this package's figures differ. `Chart` puts its name on the figure and
+     * keeps its table visually hidden, so the name has to be spoken from the figure.
+     * Here the table is the figure and the caption is visible, and a name said on the
+     * figure and again by the caption is a name a reader hears twice on the way into
+     * the same data.
+     */
+    label: string;
+    /**
+     * The name of the column holding the cohort names, drawn in the corner.
+     *
+     * Optional, and a retention table that has one nearly always does: the corner is
+     * the only cell that names the row headers, and leaving it empty is honest because
+     * every row head already names itself. Omitted, the corner is an empty cell rather
+     * than a word Prism chose, which is the whole reason it is not required.
+     */
+    rowHeading?: ReactNode;
+    /**
+     * The lower end of the scale the shading is drawn against. @defaultValue 0
+     *
+     * Zero because a share of a cohort is measured from nothing: the cohort at its
+     * first offset is the whole of itself. A caller whose measure starts above zero
+     * passes it, and the cost is that a cell at the floor and a cell with nothing in
+     * it draw the same way, which is what a floor means.
+     */
+    min?: number;
+    /**
+     * The upper end of the scale the shading is drawn against. @defaultValue 100
+     *
+     * A hundred because that is the whole cohort, and a scale that tops out below it
+     * exaggerates every difference in the grid. Pass a lower number when the useful
+     * range is narrow, and treat it as a claim the reader has been told rather than
+     * one they have inferred: see the note on the helper above.
+     */
+    max?: number;
+    /**
+     * How many decimal places each cell is printed to. @defaultValue 0
+     *
+     * Whole numbers, because a retention grid is a shape rather than a set of
+     * measurements, and a column of one-decimal percentages on a mobile screen is
+     * wider than the numbers are worth. Pass `1` when the underlying counts are small
+     * enough that a point of a percent is a real difference.
+     */
+    precision?: number;
+    /**
+     * The sentence under the table, which is where the measure belongs.
+     *
+     * The caller's words, and required in practice though optional in the type,
+     * because the cells print bare numbers: this is the sentence that says what the
+     * numbers are a share of. "Of the accounts that were active in the month they
+     * signed up" is a claim about a product this Component knows nothing about, so it
+     * is the caller's to write, and a grid with no sentence under it says only what
+     * its numbers say.
+     */
+    caption?: ReactNode;
+    /** Layout only, exactly as on every Component. */
+    className?: string;
+}
+/**
+ * A retention matrix, read as a table of printed percentages under one scale.
+ *
+ * **It is a table, and that is the Component rather than an implementation
+ * detail.** A retention grid is the one data display whose job is to be read one
+ * cell at a time: a reader asks "what share of the March cohort was still sending
+ * readings at month three", and the answer is a cell. `Table` is that answer, with
+ * row and column headers, a caption and per-cell navigation, all of which the
+ * percentages need and a drawing of divs would throw away. So this Component
+ * composes `Table` rather than replacing it, and what it adds is the four things a
+ * generic table has no opinion about: the shape of the data, the scale the shading
+ * is drawn against, the difference between an offset not reached and a share of
+ * nothing, and the order in which a cell is printed and shaded.
+ *
+ * **How it differs from `Table`, precisely.** `Table` holds no domain, no scale and
+ * no claim: it gives a caller seven parts and gets out of the way, which is exactly
+ * what a caller with arbitrary columns wants and exactly what a retention grid does
+ * not, because a retention grid knows that its columns are ordinal offsets from
+ * each row's own start and that its cells are shares. So the difference is not the
+ * markup, it is the four refusals. There is no way to add a column beside the
+ * matrix, because an extra column is not an offset. There is no way to shade a cell
+ * by hand, because the shade is the value and a hand-set shade would be a second
+ * claim about it. There is no way to pass rows of unequal length, because a short
+ * row is a row of nulls that says nothing about which offsets were measured. And
+ * there is no way to print anything but a number, because the cell's whole content
+ * is the share. A caller who needs any of those is building a table, and `Table` is
+ * the Component for it.
+ *
+ * **There is no horizontal scale, and the columns are ordinal rather than
+ * continuous.** Each column is an offset, and the offsets are the same *number* on
+ * every row while the *periods* they stand for are not: the March cohort's month
+ * three and the September cohort's month three are two different months in the
+ * calendar. So there is no axis, no tick spacing and no interpolation, and nothing
+ * may be read as "the cell halfway between these two". A measure that varies along
+ * a continuous domain is `Chart`; a measure along an ordinal offset is this. That is
+ * also why a retention grid cannot be a heat map of categories in the
+ * `IntensityGrid` sense even though both shade cells: the columns there are names
+ * with no order at all, and here they are ordered offsets that every row reads
+ * differently.
+ *
+ * **Print, then shade, and the order is the design.** Every cell carries its share
+ * as a number in the caller's own unit, and the shade is laid over the cell behind
+ * it. Neither channel is optional and neither is the fallback: a reader who cannot
+ * rank five steps of one hue reads every number in the grid, and a reader who cannot
+ * see the pale end of the scale still has the numbers, which is the arrangement
+ * `IntensityGrid` refuses on purpose for the opposite reason. The consequence is
+ * that shading must never be the only carrier of the number, and this Component
+ * makes that structural rather than advisory by printing unconditionally and by
+ * refusing a cell it cannot put a number in. It is also why the cells are the
+ * figure's own visible content rather than a table generated from a drawing: there
+ * is no drawing to generate a table beside.
+ *
+ * **The scale is absolute by default, and `max` is a claim the caller owns.** See
+ * the note on the helper: quartiles of `min` to `max`, defaulting to zero and a
+ * hundred, so two months of the same product are comparable. The cost is that a
+ * product whose cohorts all collapse below a quarter loses the contrast, and the
+ * answer is a narrower `max` which exaggerates on purpose. A retention grid that
+ * silently rescaled itself to flatter the rows in front of it would be the exact
+ * failure `Chart` names for a pre-normalised caller, and a table of retention
+ * percentages is the last place to ship one.
+ *
+ * **Nothing here moves, and the reason is the same as everywhere else in this
+ * family.** A hover state on a cell would have to change the cell's surface, and the
+ * surface is what the number is printed on, so a hover would change the reading
+ * while the pointer rested on it. A row wash would do the same to every cell in the
+ * row at once. So the grid is static by construction, which is also the cheapest
+ * reading of a motion law that permits only state feedback on a token duration.
+ *
+ * **Two inputs throw, and a drawn lie is worse than a refusal.** A row whose
+ * `shares` are not one per column is a ragged row that would draw as if the missing
+ * offsets had been measured and found empty, which is the one thing this data model
+ * exists to prevent. A share outside `min` to `max` is a measurement that cannot be
+ * placed on the scale, and the alternative was to clamp it, which is what `Chart`
+ * does for a value past the end of its axis and what this Component deliberately
+ * does not: a clamped retention cell is a cell that says its share is the ceiling
+ * when it is not, in a table whose whole claim is that every number in it was
+ * measured.
+ *
+ * **It is a server Component.** There is no state, no effect and no handler, every
+ * cell is arithmetic over props, and a dashboard of cohorts costs no client code.
+ */
+declare function CohortGrid({ className, rows, columns, label, rowHeading, min, max, precision, caption, ...props }: CohortGridProps): import("react").JSX.Element;
+export { CohortGrid };
+//# sourceMappingURL=cohort-grid.d.ts.map

package/dist/components/ui/cohort-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cohort-grid.d.ts","sourceRoot":"","sources":["../../../src/components/ui/cohort-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AActD;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,uDAAuD;IACvD,GAAG,EAAE,MAAM,CAAA;IACX,2DAA2D;IAC3D,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;;OAMG;IACH,GAAG,EAAE,MAAM,CAAA;IACX,wDAAwD;IACxD,KAAK,EAAE,SAAS,CAAA;IAChB,kFAAkF;IAClF,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;CACnC,CAAA;AAmFD,wCAAwC;AACxC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IACjF;;;;;;;OAOG;IACH,IAAI,EAAE,SAAS,aAAa,EAAE,CAAA;IAC9B,+CAA+C;IAC/C,OAAO,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACpC;;;;;;;;;;;;;;OAcG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EACL,UAAU,EACV,GAAO,EACP,GAAS,EACT,SAAa,EACb,OAAO,EACP,GAAG,KAAK,EACT,EAAE,eAAe,+BAyGjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/ui/cohort-grid.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from './table.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The fill each step is drawn in, from the contract's roles and no other.
+ *
+ * The five entries `IntensityGrid` and `ContributionGraph` both draw from, spelled
+ * here because each of those modules keeps its own map to itself, and the honest
+ * cost is the one they state between them: a change to the intensity scale is now
+ * three edits rather than one. What keeps the three in step is the type, which is
+ * imported from `IntensityGrid` rather than redeclared, so a sixth step is a type
+ * error at all three maps at once instead of a cell that silently falls through to
+ * no ink in whichever file nobody remembered.
+ *
+ * Step zero is the `muted` surface rather than a pale primary, so a cohort that has
+ * nothing left is visibly a different thing from a cohort with a little left. The
+ * other four are the same `primary` role at four alpha steps, which is one token at
+ * four strengths: five authored colours would be a second set of colour tokens for a
+ * scale the alpha modifier already expresses, and they would not move with a scoped
+ * pack boundary.
+ */
+const LEVEL_FILL = {
+    0: 'bg-muted',
+    1: 'bg-primary/25',
+    2: 'bg-primary/50',
+    3: 'bg-primary/75',
+    4: 'bg-primary',
+};
+/**
+ * The ink a cell's number is printed in, from the same step.
+ *
+ * The inverse on the top step only, and it is `primary-foreground` on `primary`
+ * because that is the contract's own pairing for a filled control and the contrast
+ * gate already measures it at 4.5:1 in every pack and both modes. The other four
+ * keep `foreground`, which clears the page and the muted surface under a quarter
+ * and a half of a primary. Inverting anything earlier would have meant light ink on
+ * a light shade, which is a legibility failure dressed as a consistency.
+ */
+const LEVEL_INK = {
+    0: 'text-foreground',
+    1: 'text-foreground',
+    2: 'text-foreground',
+    3: 'text-foreground',
+    4: 'text-primary-foreground',
+};
+/**
+ * Where a share sits on the caller's scale, as a step.
+ *
+ * **Quartiles of the caller's scale, and not of the data.** The scale runs from
+ * `min` to `max` and defaults to zero and a hundred, because a share of a cohort is
+ * an absolute quantity and two months of the same product must be comparable. A
+ * grid that fitted its scale to the rows in front of it would make a cohort whose
+ * members all left draw as dark as a cohort that kept everyone, which is the quietest
+ * and worst way a retention table can be wrong.
+ *
+ * The cost is the same argument in reverse and it is real: once a product's cohorts
+ * are all below a quarter, the grid goes uniformly pale and the reader gets no
+ * contrast in it. The answer is `min`, which raises the floor of the scale on
+ * purpose and is documented as a claim the caller has to own, because a scale that
+ * starts at twenty and a table that does not are two truths about the same grid.
+ *
+ * **`max` cannot do that job here, and the reason is the first column.** A
+ * retention row's own starting column is a hundred percent by definition, so a
+ * scale that stops below a hundred is a scale the data cannot be drawn against,
+ * and this Component throws rather than clamp because a clamped cell is a cell
+ * claiming its share is the ceiling. Narrowing the scale therefore means raising
+ * `min`, and it means the last column of an old cohort and the second column of a
+ * new one are the two cells a reader compares. That is a real limit on the knob
+ * rather than a default that happened to land well, and a caller who wants the
+ * saturation the low `max` was reaching for has to leave the first column out of
+ * `columns` and say in the caption what the offsets now begin at.
+ */
+function levelOf(share, min, max) {
+    const span = max - min;
+    const position = span <= 0 ? 1 : (share - min) / span;
+    if (position <= 0)
+        return 0;
+    if (position <= 0.25)
+        return 1;
+    if (position <= 0.5)
+        return 2;
+    if (position <= 0.75)
+        return 3;
+    return 4;
+}
+/**
+ * A retention matrix, read as a table of printed percentages under one scale.
+ *
+ * **It is a table, and that is the Component rather than an implementation
+ * detail.** A retention grid is the one data display whose job is to be read one
+ * cell at a time: a reader asks "what share of the March cohort was still sending
+ * readings at month three", and the answer is a cell. `Table` is that answer, with
+ * row and column headers, a caption and per-cell navigation, all of which the
+ * percentages need and a drawing of divs would throw away. So this Component
+ * composes `Table` rather than replacing it, and what it adds is the four things a
+ * generic table has no opinion about: the shape of the data, the scale the shading
+ * is drawn against, the difference between an offset not reached and a share of
+ * nothing, and the order in which a cell is printed and shaded.
+ *
+ * **How it differs from `Table`, precisely.** `Table` holds no domain, no scale and
+ * no claim: it gives a caller seven parts and gets out of the way, which is exactly
+ * what a caller with arbitrary columns wants and exactly what a retention grid does
+ * not, because a retention grid knows that its columns are ordinal offsets from
+ * each row's own start and that its cells are shares. So the difference is not the
+ * markup, it is the four refusals. There is no way to add a column beside the
+ * matrix, because an extra column is not an offset. There is no way to shade a cell
+ * by hand, because the shade is the value and a hand-set shade would be a second
+ * claim about it. There is no way to pass rows of unequal length, because a short
+ * row is a row of nulls that says nothing about which offsets were measured. And
+ * there is no way to print anything but a number, because the cell's whole content
+ * is the share. A caller who needs any of those is building a table, and `Table` is
+ * the Component for it.
+ *
+ * **There is no horizontal scale, and the columns are ordinal rather than
+ * continuous.** Each column is an offset, and the offsets are the same *number* on
+ * every row while the *periods* they stand for are not: the March cohort's month
+ * three and the September cohort's month three are two different months in the
+ * calendar. So there is no axis, no tick spacing and no interpolation, and nothing
+ * may be read as "the cell halfway between these two". A measure that varies along
+ * a continuous domain is `Chart`; a measure along an ordinal offset is this. That is
+ * also why a retention grid cannot be a heat map of categories in the
+ * `IntensityGrid` sense even though both shade cells: the columns there are names
+ * with no order at all, and here they are ordered offsets that every row reads
+ * differently.
+ *
+ * **Print, then shade, and the order is the design.** Every cell carries its share
+ * as a number in the caller's own unit, and the shade is laid over the cell behind
+ * it. Neither channel is optional and neither is the fallback: a reader who cannot
+ * rank five steps of one hue reads every number in the grid, and a reader who cannot
+ * see the pale end of the scale still has the numbers, which is the arrangement
+ * `IntensityGrid` refuses on purpose for the opposite reason. The consequence is
+ * that shading must never be the only carrier of the number, and this Component
+ * makes that structural rather than advisory by printing unconditionally and by
+ * refusing a cell it cannot put a number in. It is also why the cells are the
+ * figure's own visible content rather than a table generated from a drawing: there
+ * is no drawing to generate a table beside.
+ *
+ * **The scale is absolute by default, and `max` is a claim the caller owns.** See
+ * the note on the helper: quartiles of `min` to `max`, defaulting to zero and a
+ * hundred, so two months of the same product are comparable. The cost is that a
+ * product whose cohorts all collapse below a quarter loses the contrast, and the
+ * answer is a narrower `max` which exaggerates on purpose. A retention grid that
+ * silently rescaled itself to flatter the rows in front of it would be the exact
+ * failure `Chart` names for a pre-normalised caller, and a table of retention
+ * percentages is the last place to ship one.
+ *
+ * **Nothing here moves, and the reason is the same as everywhere else in this
+ * family.** A hover state on a cell would have to change the cell's surface, and the
+ * surface is what the number is printed on, so a hover would change the reading
+ * while the pointer rested on it. A row wash would do the same to every cell in the
+ * row at once. So the grid is static by construction, which is also the cheapest
+ * reading of a motion law that permits only state feedback on a token duration.
+ *
+ * **Two inputs throw, and a drawn lie is worse than a refusal.** A row whose
+ * `shares` are not one per column is a ragged row that would draw as if the missing
+ * offsets had been measured and found empty, which is the one thing this data model
+ * exists to prevent. A share outside `min` to `max` is a measurement that cannot be
+ * placed on the scale, and the alternative was to clamp it, which is what `Chart`
+ * does for a value past the end of its axis and what this Component deliberately
+ * does not: a clamped retention cell is a cell that says its share is the ceiling
+ * when it is not, in a table whose whole claim is that every number in it was
+ * measured.
+ *
+ * **It is a server Component.** There is no state, no effect and no handler, every
+ * cell is arithmetic over props, and a dashboard of cohorts costs no client code.
+ */
+function CohortGrid({ className, rows, columns, label, rowHeading, min = 0, max = 100, precision = 0, caption, ...props }) {
+    // A nonsense `precision` is floored at zero rather than reaching `toFixed`, which
+    // throws on a negative count, because a rounding instruction is a reading
+    // instruction rather than a measurement and a typo in one should not take a page
+    // down. The cost is that `precision={-1}` reads as `0`, which is the whole number
+    // it was asking for anyway.
+    const places = Math.min(20, Math.max(0, Math.floor(precision)));
+    for (const row of rows) {
+        if (row.shares.length !== columns.length) {
+            throw new Error(`CohortGrid: the cohort '${row.key}' has ${String(row.shares.length)} share(s) for ` +
+                `${String(columns.length)} column(s). Every row must have one entry per offset, and an offset ` +
+                'the cohort has not reached is a null rather than a missing entry: a short row draws as a row ' +
+                'of empties, which claims the cohort had nothing at those offsets instead of claiming it had ' +
+                'not got there.');
+        }
+        for (const share of row.shares) {
+            if (share === null)
+                continue;
+            if (!Number.isFinite(share) || share < min || share > max) {
+                throw new Error(`CohortGrid: the cohort '${row.key}' carries the share ${String(share)}, which is not between ` +
+                    `the scale's own ends of ${String(min)} and ${String(max)}. A retention cell that cannot be ` +
+                    'placed on the scale it is drawn against has been measured against a different one, so this ' +
+                    'stops rather than clamping it to the ceiling and printing a number the data does not hold.');
+            }
+        }
+    }
+    return (_jsxs("figure", { "data-slot": "cohort-grid", className: cn('flex w-full flex-col gap-3', className), ...props, children: [_jsxs(Table, { children: [_jsx(TableCaption, { children: label }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [rowHeading === undefined ? (_jsx(TableHead, { className: "w-32" })) : (_jsx(TableHead, { className: "w-32", children: rowHeading })), columns.map((column) => (_jsx(TableHead, { scope: "col", className: "text-center tabular-nums", children: column.label }, column.key)))] }) }), _jsx(TableBody, { children: rows.map((row) => (_jsxs(TableRow, { "data-cohort": row.key, children: [_jsx(TableHead, { scope: "row", className: "font-medium whitespace-nowrap", children: row.label }), columns.map((column, at) => {
+                                    const share = row.shares[at];
+                                    if (share === null) {
+                                        return (_jsx(TableCell, { "data-offset": column.key, "data-state": "not-reached", className: "text-center tabular-nums" }, column.key));
+                                    }
+                                    const level = levelOf(share, min, max);
+                                    return (_jsxs(TableCell, { "data-offset": column.key, "data-level": level, className: cn('text-center tabular-nums', LEVEL_FILL[level], LEVEL_INK[level]), children: [share.toFixed(places), "%"] }, column.key));
+                                })] }, row.key))) })] }), caption === undefined ? null : (_jsx("p", { "data-slot": "cohort-grid-caption", className: "text-muted-foreground text-sm", children: caption }))] }));
+}
+export { CohortGrid };

package/dist/components/ui/collapsible.d.ts

@@ -91,6 +91,17 @@ declare function CollapsibleTrigger({ className, children, ...props }: Collapsib
  * The height transition is state feedback rather than decoration: the panel is
  * opening or closing and the reader can watch it happen, which is the one motion
  * this system allows on a surface like this.
+ *
+ * **`duration-slow` and not `duration-base`, and the reason is the motion scale
+ * rather than a preference.** `DESIGN.md` assigns `slow` to "transform or layout
+ * state such as a disclosure", and this is the disclosure: a height animation is the
+ * case the sentence is written about. The chevron in the trigger carries the same
+ * step for the same reason, because a 160ms icon against a 280ms panel is two events
+ * where the reader is watching one, and a reader who opens this cannot tell whether
+ * the icon or the panel was late.
+ *
+ * The reduced-motion rule does not shorten it, it removes it, so a reader who asked
+ * for no motion gets the panel at its resting height with nothing to wait for.
  */
 declare function CollapsibleContent({ className, ...props }: CollapsibleContentProps): import("react").JSX.Element;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/components/ui/collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/ui/collapsible.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/E,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,wDAAwD;AACxD,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAE5E;;;;;GAKG;AACH,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,KAAK,CAAC;IACpE;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAQ7D;AAED;;;;;;GAMG;AACH,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,+BAiBrF;AAED;;;;;;GAMG;AACH,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,+BAc3E;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/ui/collapsible.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/E,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,wDAAwD;AACxD,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAE5E;;;;;GAKG;AACH,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,KAAK,CAAC;IACpE;;;;;;;;;;;OAWG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAQ7D;AAED;;;;;;GAMG;AACH,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,+BAiBrF;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,+BAc3E;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/ui/collapsible.js

@@ -39,7 +39,7 @@ function Collapsible({ className, ...props }) {
  * with the keyboard after closing the section without their hands.
  */
 function CollapsibleTrigger({ className, children, ...props }) {
-    return (_jsxs(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-trigger", className: cn('text-foreground group flex w-full items-center justify-between gap-3 rounded-md py-3 text-left text-sm font-medium outline-none', 'transition-[color,background-color,box-shadow] duration-fast ease-out', 'hover:bg-accent/60 hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-[3px]', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-base ease-out group-data-[panel-open]:rotate-90" })] }));
+    return (_jsxs(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-trigger", className: cn('text-foreground group flex w-full items-center justify-between gap-3 rounded-md py-3 text-left text-sm font-medium outline-none', 'transition-[color,background-color,box-shadow] duration-fast ease-out', 'hover:bg-accent/60 hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-[3px]', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-slow ease-out group-data-[panel-open]:rotate-90" })] }));
 }
 /**
  * The region the trigger shows and hides.
@@ -47,8 +47,19 @@ function CollapsibleTrigger({ className, children, ...props }) {
  * The height transition is state feedback rather than decoration: the panel is
  * opening or closing and the reader can watch it happen, which is the one motion
  * this system allows on a surface like this.
+ *
+ * **`duration-slow` and not `duration-base`, and the reason is the motion scale
+ * rather than a preference.** `DESIGN.md` assigns `slow` to "transform or layout
+ * state such as a disclosure", and this is the disclosure: a height animation is the
+ * case the sentence is written about. The chevron in the trigger carries the same
+ * step for the same reason, because a 160ms icon against a 280ms panel is two events
+ * where the reader is watching one, and a reader who opens this cannot tell whether
+ * the icon or the panel was late.
+ *
+ * The reduced-motion rule does not shorten it, it removes it, so a reader who asked
+ * for no motion gets the panel at its resting height with nothing to wait for.
  */
 function CollapsibleContent({ className, ...props }) {
-    return (_jsx(CollapsiblePrimitive.Panel, { "data-slot": "collapsible-content", className: cn('h-(--collapsible-panel-height) overflow-hidden text-sm', 'transition-[height] duration-base ease-out', 'data-[starting-style]:h-0 data-[ending-style]:h-0', '[&[hidden]:not([hidden="until-found"])]:hidden', className), ...props }));
+    return (_jsx(CollapsiblePrimitive.Panel, { "data-slot": "collapsible-content", className: cn('h-(--collapsible-panel-height) overflow-hidden text-sm', 'transition-[height] duration-slow ease-out', 'data-[starting-style]:h-0 data-[ending-style]:h-0', '[&[hidden]:not([hidden="until-found"])]:hidden', className), ...props }));
 }
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/components/ui/combobox.d.ts

@@ -113,7 +113,10 @@ export interface ComboboxProps {
  * open and explains that the query found nothing, because a combobox that closed
  * itself on a non-match tells the reader their keystroke broke the control. The
  * explanation is a prop, since the sentence is the caller's and the query is put
- * into it.
+ * into it. The message is a sibling of the listbox and not inside it, because a
+ * listbox owns `option` and `group` and nothing else, and the field's
+ * `aria-controls` points at the popup rather than at the listbox, because there is
+ * no listbox in that state and `aria-controls` is required on an expanded combobox.
  *
  * **The field keeps the caret for the whole interaction.** The arrows move a
  * highlight through the list and leave focus where it is, so a reader can keep

package/dist/components/ui/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/combobox.tsx"],"names":[],"mappings":"AAOA;;;;;;;GAOG;AACH,MAAM,WAAW,YAAY;IAC3B,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAA;IACb,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC5B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,sCAAsC;AACtC,MAAM,WAAW,aAAa;IAC5B;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;IAC9B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,gFAAgF;IAChF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C;;;;;;OAMG;IACH,KAAK,EAAE;QAAE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5D,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gEAAgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,uDAAuD;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,KAAK,EACL,KAAK,EACL,YAAmB,EACnB,aAAa,EACb,KAAK,EACL,WAAW,EACX,IAAI,EACJ,WAAmB,EACnB,YAAY,EACZ,QAAgB,EAChB,QAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,kBAAkB,EAAE,WAAW,EAC/B,SAAS,GACV,EAAE,aAAa,+BAyTf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/combobox.tsx"],"names":[],"mappings":"AAOA;;;;;;;GAOG;AACH,MAAM,WAAW,YAAY;IAC3B,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAA;IACb,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC5B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,sCAAsC;AACtC,MAAM,WAAW,aAAa;IAC5B;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;IAC9B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,gFAAgF;IAChF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C;;;;;;OAMG;IACH,KAAK,EAAE;QAAE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5D,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gEAAgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,uDAAuD;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,KAAK,EACL,KAAK,EACL,YAAmB,EACnB,aAAa,EACb,KAAK,EACL,WAAW,EACX,IAAI,EACJ,WAAmB,EACnB,YAAY,EACZ,QAAgB,EAChB,QAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,kBAAkB,EAAE,WAAW,EAC/B,SAAS,GACV,EAAE,aAAa,+BA6Uf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}