dowel-ui 0.23.0 → 0.25.0

package/README.md

@@ -11,7 +11,7 @@ A dowel is the hidden peg that joins two boards so the seam does not show. That
 **[Documentation](https://lacodda.github.io/dowel/)** — what everything is and why it is that way.
 **[The stand](https://lacodda.github.io/dowel/stand/)** — every component, live, in either theme and in the accent of any product of the line.
 
-**Status:** v0.23.0 - the theme, the scales, an accent per product, sixty components - overlays, menus, the command palette, the table, a hundred thousand rows, the screens between asking for data and showing it, and the three ways of saying something happened - and the gates each one passes: axe, the keyboard, a dependency budget and a picture in both themes. Every component has a page of its own on the stand, which remembers the theme and the accent you left it in. Components install from a versioned registry, the docs are served in the form an agent reads, and `dowel check` tells a project what stands between it and the vocabulary. Two products of the line live on it. See the [roadmap](#roadmap).
+**Status:** v0.25.0 - the theme, the scales, an accent per product, seventy-six components - overlays, menus, the command palette, the table, a hundred thousand rows, the screens between asking for data and showing it, the three ways of saying something happened, charts, and now text and code: rendered markdown through one stylesheet, a code block whose highlighter is yours, a comparison whose two columns stay in step, and a JSON document read rather than parsed by eye - and the gates each one passes: axe, the keyboard, a dependency budget and a picture in both themes. Every component has a page of its own on the stand, which remembers the theme and the accent you left it in. Components install from a versioned registry, the docs are served in the form an agent reads, and `dowel check` tells a project what stands between it and the vocabulary. Two products of the line live on it. See the [roadmap](#roadmap).
 
 ## The theme
 
@@ -68,10 +68,21 @@ A product of the line states one thing about its appearance - which product it i
 @import 'dowel-ui/accents/kilna.css';
 ```
 
+Text a product does not write by hand - rendered markdown, a description from a CMS, a model's reply - is the one thing a component cannot style, because the tags arrive already made. That is a second stylesheet, imported the same way and applied with one class:
+
+```css
+@import 'dowel-ui/prose.css';
+```
+
+```tsx
+<div className="prose" dangerouslySetInnerHTML={{ __html: sanitised }} />
+```
+
 Or copy the files in instead of depending on the package:
 
 ```bash
 npx shadcn@latest add https://lacodda.github.io/dowel/r/theme.json
+npx shadcn@latest add https://lacodda.github.io/dowel/r/prose.json
 ```
 
 ## Primitives
@@ -93,12 +104,12 @@ npx shadcn@latest add https://lacodda.github.io/dowel/r/app.json
 A set carries no files of its own: it resolves into the same per-component
 installs you could have typed, so nothing of it survives in your project and
 there is no membership to leave. Each minor of the registry is also served
-frozen at `r/v0.14/…`, for an install that has to be repeatable - inside a
+frozen at `r/v0.25/…`, for an install that has to be repeatable - inside a
 snapshot the cross-references point into the same snapshot, so a component and
 the sibling it reuses are the pair that shipped together. See
 [installing from the registry](https://lacodda.github.io/dowel/guides/registry/).
 
-Sixty of them so far. The everyday ones - Button, Input, Textarea, Panel,
+Seventy-six of them so far. The everyday ones - Button, Input, Textarea, Panel,
 Badge, Chip, Kbd, Spinner, Truncate and Copyable; Field and the three controls
 that answer a question - Checkbox, RadioGroup and Switch; five for a number or
 a judgement - NumberField, Slider, RatingScale, DurationField and
@@ -112,8 +123,16 @@ them; three for saying that something happened - Toast, Alert and Banner; six
 for showing rows of data - Table, Pagination, PageSize, NumberFormat,
 RelativeTime and the `table-sort` with no React in it; four for a long list or
 a deep one - VirtualList, TreeView with the `tree-rows` under it, and KeyValue;
-and five for the screens between asking for data and showing it: Skeleton,
-EmptyState, Progress, QueryState and ErrorBoundary.
+StatTile, for one figure and what it is a figure of, with Sparkline for the
+shape of its history, and Track with its `track-segments` for a bar divided
+into stretches; ActivityHeatmap with its legend and its `activity-weeks`, for a
+year of days; BarChart for a period at a time, LineChart with its `line-scale` for a level
+between the readings; and five for the screens
+between asking for data and showing it: Skeleton, EmptyState, Progress,
+QueryState and ErrorBoundary. And six for text and code: the `prose`
+stylesheet for markdown a product did not write by hand, CodeBlock with
+CopyButton beside it, DiffView with the `diff-lines` that keeps its two
+columns in step, and JsonViewer over its `json-rows`.
 
 Those last three are the ones products keep confusing, so each page names all
 four options: a **toast** goes away, an **alert** is still true after a reload,

package/dist/index.d.ts

@@ -4,6 +4,33 @@ export { defaultStorageKey, initTheme, nextTheme, resolvedTheme, useTheme, useTh
 /** Tokens that carry a colour. Ordered as they read on a screen: grounds,
  * then hairlines, then ink, then the accent, then status. */
 export declare const colorTokens: readonly ["bg", "raise", "soft", "softer", "line", "line-2", "text", "dim", "faint", "accent", "accent-2", "accent-soft", "on-accent", "on-good", "on-warn", "on-bad", "on-info", "good", "good-soft", "warn", "warn-soft", "bad", "bad-soft", "info", "info-soft"];
+/** Series colours, for charts: identity, assigned 1..8 in order and never
+ * cycled. Alone in this vocabulary alongside the status hues, they do not
+ * follow the product accent - a series belongs to the data, not to the
+ * product drawing it. The order is load-bearing: it is what keeps adjacent
+ * pairs apart under colour-blind simulation, so these are not re-sorted. */
+export declare const seriesTokens: readonly ["series-1", "series-2", "series-3", "series-4", "series-5", "series-6", "series-7", "series-8"];
+/** Magnitude: one hue from light to dark, for heatmap cells and anything else
+ * that encodes "how much" rather than "which". */
+export declare const scaleTokens: readonly ["scale-100", "scale-200", "scale-300", "scale-400", "scale-500", "scale-600", "scale-700"];
+/** A chart's own furniture, quieter than `line` because a gridline that
+ * competes with the data is drawn wrong. */
+export declare const chartTokens: readonly ["chart-grid", "chart-axis"];
+/** Heat: five discrete steps for a grid of cells where colour carries the
+ * value. Ordinal rather than sequential - told apart at a glance and matched
+ * against a legend - which is why these are their own ramp and not five of
+ * `scaleTokens`. The faintest step stays distinct from an empty cell, or the
+ * grid claims a day was worked at zero when nobody reported it. */
+export declare const heatTokens: readonly ["heat-1", "heat-2", "heat-3", "heat-4", "heat-5"];
+/** Syntax: the eight kinds of thing in a piece of code that are worth telling
+ * apart in every language. Fixed like the series - `if` should not be magenta
+ * in one product and cobalt in another - but measured against a different
+ * threshold: these are read as text, so every slot clears 4.5:1 against the
+ * surface code sits on, where a series colour only has to clear 3:1 as a
+ * filled mark. They are also the one palette here not held to the
+ * colour-blind floor, because syntax colour restates what the text already
+ * says and CodeBlock's default draws none of it. */
+export declare const syntaxTokens: readonly ["syntax-keyword", "syntax-string", "syntax-number", "syntax-comment", "syntax-name", "syntax-type", "syntax-punctuation", "syntax-meta"];
 /** Tokens a product overrides to make the theme its own: the accent from the
  * brand-line registry, and how much of it bleeds into the greys. */
 export declare const themeParameters: readonly ["accent-base", "neutral-base", "neutral-tint", "neutral-tint-strong", "ground", "ink"];
@@ -28,7 +55,7 @@ export declare const layerTokens: readonly ["z-popup", "z-sticky", "z-menu", "z-
  * vocabulary - a docs page, an inspector, the JSON export, the test that keeps
  * this file honest against the stylesheet - reads this, so a new category
  * cannot be added and quietly missed by half of them. */
-export declare const allTokens: readonly ["bg", "raise", "soft", "softer", "line", "line-2", "text", "dim", "faint", "accent", "accent-2", "accent-soft", "on-accent", "on-good", "on-warn", "on-bad", "on-info", "good", "good-soft", "warn", "warn-soft", "bad", "bad-soft", "info", "info-soft", "accent-base", "neutral-base", "neutral-tint", "neutral-tint-strong", "ground", "ink", "shadow-lift", "shadow-raise", "shadow-float", "radius-xs", "radius-sm", "radius-md", "radius-lg", "radius-xl", "radius-2xl", "radius-inner", "font-sans", "font-mono", "text-2xs", "text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "font-weight-normal", "font-weight-medium", "font-weight-semibold", "tracking-caption", "tracking-tight", "duration-quick", "duration-base", "duration-slow", "ease-out", "ease-in-out", "z-popup", "z-sticky", "z-menu", "z-floating", "z-overlay", "z-modal", "z-palette", "z-toast"];
+export declare const allTokens: readonly ["bg", "raise", "soft", "softer", "line", "line-2", "text", "dim", "faint", "accent", "accent-2", "accent-soft", "on-accent", "on-good", "on-warn", "on-bad", "on-info", "good", "good-soft", "warn", "warn-soft", "bad", "bad-soft", "info", "info-soft", "series-1", "series-2", "series-3", "series-4", "series-5", "series-6", "series-7", "series-8", "scale-100", "scale-200", "scale-300", "scale-400", "scale-500", "scale-600", "scale-700", "chart-grid", "chart-axis", "heat-1", "heat-2", "heat-3", "heat-4", "heat-5", "syntax-keyword", "syntax-string", "syntax-number", "syntax-comment", "syntax-name", "syntax-type", "syntax-punctuation", "syntax-meta", "accent-base", "neutral-base", "neutral-tint", "neutral-tint-strong", "ground", "ink", "shadow-lift", "shadow-raise", "shadow-float", "radius-xs", "radius-sm", "radius-md", "radius-lg", "radius-xl", "radius-2xl", "radius-inner", "font-sans", "font-mono", "text-2xs", "text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "font-weight-normal", "font-weight-medium", "font-weight-semibold", "tracking-caption", "tracking-tight", "duration-quick", "duration-base", "duration-slow", "ease-out", "ease-in-out", "z-popup", "z-sticky", "z-menu", "z-floating", "z-overlay", "z-modal", "z-palette", "z-toast"];
 export type ColorToken = (typeof colorTokens)[number];
 export type ThemeParameter = (typeof themeParameters)[number];
 export type ElevationToken = (typeof elevationTokens)[number];
@@ -36,7 +63,12 @@ export type RadiusToken = (typeof radiusTokens)[number];
 export type TypeToken = (typeof typeTokens)[number];
 export type MotionToken = (typeof motionTokens)[number];
 export type LayerToken = (typeof layerTokens)[number];
-export type Token = ColorToken | ThemeParameter | ElevationToken | RadiusToken | TypeToken | MotionToken | LayerToken;
+export type SeriesToken = (typeof seriesTokens)[number];
+export type ScaleToken = (typeof scaleTokens)[number];
+export type ChartToken = (typeof chartTokens)[number];
+export type HeatToken = (typeof heatTokens)[number];
+export type SyntaxToken = (typeof syntaxTokens)[number];
+export type Token = ColorToken | SeriesToken | ScaleToken | ChartToken | HeatToken | SyntaxToken | ThemeParameter | ElevationToken | RadiusToken | TypeToken | MotionToken | LayerToken;
 /** The custom property a token is read from: `token('accent')` is
  * `'--accent'`. Spelled out here so that no caller builds the string itself
  * and gets the prefix subtly wrong. */

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AACvE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,aAAa,EACb,QAAQ,EACR,cAAc,EACd,KAAK,KAAK,GACX,MAAM,YAAY,CAAA;AAEnB;6DAC6D;AAC7D,eAAO,MAAM,WAAW,qQA0Bd,CAAA;AAEV;oEACoE;AACpE,eAAO,MAAM,eAAe,kGAOlB,CAAA;AAEV;yDACyD;AACzD,eAAO,MAAM,eAAe,0DAA2D,CAAA;AAEvF;8DAC8D;AAC9D,eAAO,MAAM,YAAY,0GAQf,CAAA;AAEV;iCACiC;AACjC,eAAO,MAAM,UAAU,gOAeb,CAAA;AAEV;;0CAE0C;AAC1C,eAAO,MAAM,YAAY,0FAMf,CAAA;AAEV;;qEAEqE;AACrE,eAAO,MAAM,WAAW,0GASd,CAAA;AAEV;;;yDAGyD;AACzD,eAAO,MAAM,SAAS,62BAQZ,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AACnD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,KAAK,GACb,UAAU,GACV,cAAc,GACd,cAAc,GACd,WAAW,GACX,SAAS,GACT,WAAW,GACX,UAAU,CAAA;AAEd;;uCAEuC;AACvC,wBAAgB,KAAK,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAEzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AACvE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,aAAa,EACb,QAAQ,EACR,cAAc,EACd,KAAK,KAAK,GACX,MAAM,YAAY,CAAA;AAEnB;6DAC6D;AAC7D,eAAO,MAAM,WAAW,qQA0Bd,CAAA;AAEV;;;;4EAI4E;AAC5E,eAAO,MAAM,YAAY,2GASf,CAAA;AAEV;kDACkD;AAClD,eAAO,MAAM,WAAW,sGAQd,CAAA;AAEV;4CAC4C;AAC5C,eAAO,MAAM,WAAW,uCAAwC,CAAA;AAEhE;;;;mEAImE;AACnE,eAAO,MAAM,UAAU,6DAA8D,CAAA;AAErF;;;;;;;oDAOoD;AACpD,eAAO,MAAM,YAAY,oJASf,CAAA;AAEV;oEACoE;AACpE,eAAO,MAAM,eAAe,kGAOlB,CAAA;AAEV;yDACyD;AACzD,eAAO,MAAM,eAAe,0DAA2D,CAAA;AAEvF;8DAC8D;AAC9D,eAAO,MAAM,YAAY,0GAQf,CAAA;AAEV;iCACiC;AACjC,eAAO,MAAM,UAAU,gOAeb,CAAA;AAEV;;0CAE0C;AAC1C,eAAO,MAAM,YAAY,0FAMf,CAAA;AAEV;;qEAEqE;AACrE,eAAO,MAAM,WAAW,0GASd,CAAA;AAEV;;;yDAGyD;AACzD,eAAO,MAAM,SAAS,+vCAaZ,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AACnD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAKrD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AACnD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvD,MAAM,MAAM,KAAK,GACb,UAAU,GACV,WAAW,GACX,UAAU,GACV,UAAU,GACV,SAAS,GACT,WAAW,GACX,cAAc,GACd,cAAc,GACd,WAAW,GACX,SAAS,GACT,WAAW,GACX,UAAU,CAAA;AAEd;;uCAEuC;AACvC,wBAAgB,KAAK,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAEzC"}

package/dist/index.js

@@ -46,6 +46,59 @@ export const colorTokens = [
     'info',
     'info-soft',
 ];
+/** Series colours, for charts: identity, assigned 1..8 in order and never
+ * cycled. Alone in this vocabulary alongside the status hues, they do not
+ * follow the product accent - a series belongs to the data, not to the
+ * product drawing it. The order is load-bearing: it is what keeps adjacent
+ * pairs apart under colour-blind simulation, so these are not re-sorted. */
+export const seriesTokens = [
+    'series-1',
+    'series-2',
+    'series-3',
+    'series-4',
+    'series-5',
+    'series-6',
+    'series-7',
+    'series-8',
+];
+/** Magnitude: one hue from light to dark, for heatmap cells and anything else
+ * that encodes "how much" rather than "which". */
+export const scaleTokens = [
+    'scale-100',
+    'scale-200',
+    'scale-300',
+    'scale-400',
+    'scale-500',
+    'scale-600',
+    'scale-700',
+];
+/** A chart's own furniture, quieter than `line` because a gridline that
+ * competes with the data is drawn wrong. */
+export const chartTokens = ['chart-grid', 'chart-axis'];
+/** Heat: five discrete steps for a grid of cells where colour carries the
+ * value. Ordinal rather than sequential - told apart at a glance and matched
+ * against a legend - which is why these are their own ramp and not five of
+ * `scaleTokens`. The faintest step stays distinct from an empty cell, or the
+ * grid claims a day was worked at zero when nobody reported it. */
+export const heatTokens = ['heat-1', 'heat-2', 'heat-3', 'heat-4', 'heat-5'];
+/** Syntax: the eight kinds of thing in a piece of code that are worth telling
+ * apart in every language. Fixed like the series - `if` should not be magenta
+ * in one product and cobalt in another - but measured against a different
+ * threshold: these are read as text, so every slot clears 4.5:1 against the
+ * surface code sits on, where a series colour only has to clear 3:1 as a
+ * filled mark. They are also the one palette here not held to the
+ * colour-blind floor, because syntax colour restates what the text already
+ * says and CodeBlock's default draws none of it. */
+export const syntaxTokens = [
+    'syntax-keyword',
+    'syntax-string',
+    'syntax-number',
+    'syntax-comment',
+    'syntax-name',
+    'syntax-type',
+    'syntax-punctuation',
+    'syntax-meta',
+];
 /** Tokens a product overrides to make the theme its own: the accent from the
  * brand-line registry, and how much of it bleeds into the greys. */
 export const themeParameters = [
@@ -117,6 +170,11 @@ export const layerTokens = [
  * cannot be added and quietly missed by half of them. */
 export const allTokens = [
     ...colorTokens,
+    ...seriesTokens,
+    ...scaleTokens,
+    ...chartTokens,
+    ...heatTokens,
+    ...syntaxTokens,
     ...themeParameters,
     ...elevationTokens,
     ...radiusTokens,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAoB,MAAM,WAAW,CAAA;AACvE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,aAAa,EACb,QAAQ,EACR,cAAc,GAEf,MAAM,YAAY,CAAA;AAEnB;6DAC6D;AAC7D,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI;IACJ,OAAO;IACP,MAAM;IACN,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,MAAM;IACN,KAAK;IACL,OAAO;IACP,QAAQ;IACR,UAAU;IACV,aAAa;IACb,WAAW;IACX,SAAS;IACT,SAAS;IACT,QAAQ;IACR,SAAS;IACT,MAAM;IACN,WAAW;IACX,MAAM;IACN,WAAW;IACX,KAAK;IACL,UAAU;IACV,MAAM;IACN,WAAW;CACH,CAAA;AAEV;oEACoE;AACpE,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,aAAa;IACb,cAAc;IACd,cAAc;IACd,qBAAqB;IACrB,QAAQ;IACR,KAAK;CACG,CAAA;AAEV;yDACyD;AACzD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,CAAU,CAAA;AAEvF;8DAC8D;AAC9D,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,YAAY;IACZ,cAAc;CACN,CAAA;AAEV;iCACiC;AACjC,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,WAAW;IACX,WAAW;IACX,UAAU;IACV,SAAS;IACT,SAAS;IACT,WAAW;IACX,SAAS;IACT,SAAS;IACT,UAAU;IACV,oBAAoB;IACpB,oBAAoB;IACpB,sBAAsB;IACtB,kBAAkB;IAClB,gBAAgB;CACR,CAAA;AAEV;;0CAE0C;AAC1C,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,gBAAgB;IAChB,eAAe;IACf,eAAe;IACf,UAAU;IACV,aAAa;CACL,CAAA;AAEV;;qEAEqE;AACrE,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,SAAS;IACT,UAAU;IACV,QAAQ;IACR,YAAY;IACZ,WAAW;IACX,SAAS;IACT,WAAW;IACX,SAAS;CACD,CAAA;AAEV;;;yDAGyD;AACzD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,GAAG,WAAW;IACd,GAAG,eAAe;IAClB,GAAG,eAAe;IAClB,GAAG,YAAY;IACf,GAAG,UAAU;IACb,GAAG,YAAY;IACf,GAAG,WAAW;CACN,CAAA;AAkBV;;uCAEuC;AACvC,MAAM,UAAU,KAAK,CAAC,IAAW;IAC/B,OAAO,KAAK,IAAI,EAAE,CAAA;AACpB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/prose.css

@@ -0,0 +1,448 @@
+/*
+ * dowel prose - the shape of text a product did not write by hand.
+ *
+ * Every other rule in this system is applied by a component, because a
+ * component owns the element it draws. Rendered markdown is the case where
+ * that is impossible: the product hands the DOM a string of HTML - from
+ * `marked`, from a CMS, from a model's reply - and there is no React element
+ * to hang a class on. The tags arrive already made. Only a descendant selector
+ * reaches them.
+ *
+ * kilna proved the shape before this file existed, as thirty `[&_h1]:mt-4`
+ * arbitrary variants inside one `className` string. It works and it is a
+ * paragraph of unreadable text that no second product can share, which is the
+ * whole argument for moving it here.
+ *
+ * Scoped to `.prose`, so nothing leaks: a stylesheet that styled `h2`
+ * globally would reach into every component that happens to render one.
+ *
+ * WHY NOT A TYPOGRAPHY PLUGIN. `@tailwindcss/typography` answers the same
+ * question and brings its own answer to a different one - its own type scale,
+ * its own greys, its own idea of measure. Installing it next to this theme
+ * means two vocabularies describing the same text, and the one that wins is
+ * whichever loaded last. Every value below is a token from `theme.css`; there
+ * is not a single colour or size written down here.
+ *
+ * WHAT THIS IS NOT FOR. Interface text - a label, a row, a button - is styled
+ * by the component that draws it. `.prose` is for a reading column: a note, a
+ * description, an article, a chat reply. Wrapping a form in it is how a screen
+ * ends up with two competing ideas of what `text-sm` means.
+ *
+ * Import after the theme:
+ *
+ *     @import 'tailwindcss';
+ *     @import './dowel/theme.css';
+ *     @import './dowel/prose.css';
+ */
+
+.prose {
+  /*
+   * The reading size is `--text-base`, not the `--text-sm` the interface runs
+   * at, and the two are different on purpose. Chrome is scanned - a label is
+   * recognised rather than read - and it packs tighter the less of it there
+   * is. Prose is read word by word, and 12px of continuous text is where a
+   * reader starts leaning in. The products already knew this and did it by
+   * hand: kilna's rendered markdown sets `text-sm` (12px) against an interface
+   * of 11px, the same one-step lift.
+   */
+  font-size: var(--text-base);
+
+  /*
+   * Line height is set here rather than inherited from the size token, which
+   * carries 20px for 14px text - right for a label, tight for a paragraph.
+   * 1.65 is the ratio the eye returns to the start of the next line with; it
+   * is a ratio rather than a length so a product that scales the size up for a
+   * reading view keeps the proportion.
+   */
+  line-height: 1.65;
+  color: var(--text);
+
+  /*
+   * A measure, not a width. Prose is unreadable across a wide window - the eye
+   * loses the line it is returning from - and `ch` is the unit that says so in
+   * the terms the limit is actually about: characters, at whatever size the
+   * text is drawn. 68 is inside the 45-75 the typographic literature agrees
+   * on, at the wide end because these are technical texts with code and long
+   * identifiers in them.
+   *
+   * A product that has its own column - a chat bubble, a card - overrides
+   * `max-width` and loses nothing else.
+   */
+  max-width: 68ch;
+
+  /*
+   * The shell of a desktop app usually turns selection off, so that dragging
+   * inside a window moves the window. Text someone came to READ has to hand it
+   * back, or the one thing a reader wants to do with a paragraph - take a
+   * sentence out of it - is the thing the app forbids.
+   */
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+/*
+ * Vertical rhythm.
+ *
+ * Margins collapse between siblings, so stating both a top and a bottom on
+ * every block would double the gap at some joins and not others depending on
+ * which value was larger. Instead: one bottom margin on everything, and the
+ * top margin belongs to the headings alone, which are the only elements that
+ * need more space above them than below - a heading belongs to what follows
+ * it, and sitting equidistant between two paragraphs it appears to belong to
+ * neither.
+ */
+.prose > * {
+  margin-block: 0 0.75em;
+}
+
+/* The first and last child never push the container open: a rendered note
+ * inside a bordered card would otherwise have a gap at the top that the card's
+ * own padding did not put there. */
+.prose > :first-child {
+  margin-block-start: 0;
+}
+.prose > :last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * Headings.
+ *
+ * The scale is the theme's, stepped down from a document's h1 - and it starts
+ * lower than a web page's would, because prose here is almost always a section
+ * INSIDE a screen that already has a title. An h1 drawn at 21px next to a page
+ * heading of 18px makes the note look like the more important thing on screen.
+ *
+ * `text-wrap: balance` on headings only: it is expensive on long text and
+ * makes a two-line heading break in the middle rather than leaving one word
+ * alone on the second line.
+ */
+.prose :is(h1, h2, h3, h4, h5, h6) {
+  margin-block: 1.6em 0.5em;
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.3;
+  text-wrap: balance;
+  /* A heading that ends up at the top of a scrolled container should not be
+   * flush against its edge. */
+  scroll-margin-block-start: 1rem;
+}
+
+.prose h1 {
+  font-size: var(--text-xl);
+  letter-spacing: var(--tracking-tight);
+}
+.prose h2 {
+  font-size: var(--text-lg);
+  letter-spacing: var(--tracking-tight);
+}
+.prose h3 {
+  font-size: var(--text-base);
+}
+
+/*
+ * h4 and below stop growing and start differentiating by other means: a
+ * document nested six levels deep has run out of sizes long before it runs out
+ * of levels, and inventing two more steps inside four pixels is the noise the
+ * type scale exists to remove. They are the body size, set apart by weight and
+ * by colour.
+ */
+.prose :is(h4, h5, h6) {
+  font-size: var(--text-base);
+  color: var(--dim);
+}
+
+/* A heading directly after another has nothing between them to separate. */
+.prose :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: 0.8em;
+}
+
+/*
+ * Lists.
+ *
+ * Tailwind's preflight strips the markers, which is right for the interface -
+ * a menu is a `ul` and must not have bullets - and wrong here, where a list is
+ * a list. They are put back, and `outside` so the marker hangs in the indent
+ * and the text of a wrapped item lines up with itself rather than with the
+ * bullet.
+ */
+.prose :is(ul, ol) {
+  padding-inline-start: 1.5em;
+}
+.prose ul {
+  list-style: disc;
+}
+.prose ol {
+  list-style: decimal;
+}
+/*
+ * `--dim`, not `--faint`, and that was measured rather than chosen.
+ *
+ * A bullet looks like furniture, so the faintest token is the instinct. But
+ * the marker is what says "this is a list" - drop it and an ordered list loses
+ * its numbers, which are content. On the stand it came out at 3.17:1 against
+ * the surface, below the 4.5:1 that anything carrying meaning has to clear,
+ * and it read as a smudge at the size a bullet actually is. `--dim` puts it at
+ * 6.2:1 and still sits back from the text.
+ */
+.prose li::marker {
+  color: var(--dim);
+}
+.prose li {
+  margin-block: 0.25em;
+}
+
+/* A nested list belongs to the item above it, not to the gap after it. */
+.prose li > :is(ul, ol) {
+  margin-block: 0.25em;
+}
+
+/* A task list from markdown: the checkbox replaces the marker, so the bullet
+ * beside it would be a second one saying the same thing. */
+.prose li:has(> input[type='checkbox']:first-child) {
+  list-style: none;
+  margin-inline-start: -1.25em;
+}
+.prose li > input[type='checkbox'] {
+  margin-inline-end: 0.4em;
+  accent-color: var(--accent);
+}
+
+/*
+ * Inline code.
+ *
+ * `0.9em` rather than a token: a monospaced face at the same nominal size as
+ * the text around it looks larger, because its lowercase letters are taller
+ * relative to the em. The correction is proportional to whatever size the
+ * surrounding text happens to be, which a fixed token could not follow.
+ */
+.prose code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background-color: var(--soft);
+  border-radius: var(--radius-xs);
+  padding: 0.15em 0.35em;
+  /* A long identifier in the middle of a sentence must be allowed to break,
+   * or it pushes the whole column wider than its measure. */
+  overflow-wrap: anywhere;
+}
+
+/*
+ * A code block is not a big inline code. The padding, background and radius
+ * belong to the `pre`; the `code` inside it gives them all up, or the block
+ * gets a second inset panel drawn inside itself - which is exactly what
+ * happens when a typography plugin's inline rule is left to apply here.
+ *
+ * `overflow-x: auto` rather than wrapping: a wrapped line of code is a line
+ * that lies about where it ends, and indentation is how code is read.
+ */
+.prose pre {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  line-height: 1.55;
+  background-color: var(--soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  padding: 0.75rem 0.85rem;
+  overflow-x: auto;
+  /* `tab-size: 2` is the line's own indent; the browser default of 8 turns a
+   * tab-indented file into a horizontal scroll for nothing. */
+  tab-size: 2;
+}
+
+.prose pre code {
+  background-color: transparent;
+  border-radius: 0;
+  padding: 0;
+  font-size: inherit;
+  /* Inside a scrolling block, breaking a long line would defeat the scroll. */
+  overflow-wrap: normal;
+}
+
+/*
+ * Links.
+ *
+ * `--accent-2` rather than `--accent`: on the dark theme the accent is the
+ * product's own colour at full strength, which against body text reads as a
+ * button that failed to draw. The partner shade is the one the products use
+ * for a link, and it is also the one with room to darken on hover.
+ *
+ * Underlined, always. Colour alone is not a link - a reader who does not see
+ * the hue gets no signal at all - and this is the one place in the system
+ * where the rule "meaning never rests on colour" has a standard answer.
+ */
+.prose a {
+  color: var(--accent-2);
+  text-decoration: underline;
+  /* The underline drops below the descenders instead of striking through
+   * them, which is the difference between a link and a crossed-out word. */
+  text-underline-offset: 0.2em;
+  text-decoration-thickness: from-font;
+  overflow-wrap: anywhere;
+}
+
+.prose a:hover {
+  color: var(--accent);
+}
+
+/*
+ * A quotation.
+ *
+ * A rule on the left and dimmed text, rather than italics: a blockquote is
+ * frequently a paragraph or more, and a long passage in italic is slower to
+ * read for everyone and materially harder for some dyslexic readers.
+ */
+.prose blockquote {
+  border-inline-start: 2px solid var(--line-2);
+  padding-inline-start: 0.9em;
+  color: var(--dim);
+}
+
+/*
+ * A table inside prose.
+ *
+ * `display: block` with its own scroll, because the one thing a table must not
+ * do in a reading column is set the column's width: a note with a six-column
+ * table in it would push every paragraph around it out to the table's width.
+ * The cost is stated - a block-level table no longer participates in the
+ * column's own layout - and it is the right trade for text.
+ */
+.prose table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+
+.prose :is(th, td) {
+  border: 1px solid var(--line);
+  padding: 0.3em 0.55em;
+  text-align: start;
+  vertical-align: top;
+}
+
+.prose th {
+  background-color: var(--soft);
+  font-weight: var(--font-weight-semibold);
+}
+
+/*
+ * A horizontal rule is a section break, so the space around it is the point;
+ * a hairline with a paragraph's gap either side reads as a mistake.
+ */
+.prose hr {
+  border: 0;
+  border-block-start: 1px solid var(--line);
+  margin-block: 2em;
+}
+
+.prose :is(strong, b) {
+  font-weight: var(--font-weight-semibold);
+  color: var(--text);
+}
+
+.prose :is(em, i) {
+  font-style: italic;
+}
+
+.prose :is(s, del) {
+  color: var(--dim);
+}
+
+.prose mark {
+  background-color: var(--accent-soft);
+  color: inherit;
+  border-radius: var(--radius-xs);
+  padding: 0.05em 0.2em;
+}
+
+/*
+ * An image in prose is never wider than the column, and keeps its ratio when
+ * it is constrained. `display: block` because an inline image sits on the text
+ * baseline and leaves a strip of descender space under it that looks like a
+ * broken margin.
+ */
+.prose img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-sm);
+}
+
+/*
+ * `kbd` is drawn as a key rather than as code: a reader who sees `Ctrl` in the
+ * same grey box as a variable name has to work out which it is. This matches
+ * the Kbd primitive, so a key looks the same whether a component drew it or
+ * markdown did.
+ */
+.prose kbd {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  background-color: var(--raise);
+  border: 1px solid var(--line-2);
+  border-block-end-width: 2px;
+  border-radius: var(--radius-xs);
+  padding: 0.1em 0.35em;
+  color: var(--dim);
+}
+
+/*
+ * A definition list, which markdown does not produce but a CMS does.
+ */
+.prose dt {
+  font-weight: var(--font-weight-semibold);
+  margin-block-start: 0.75em;
+}
+.prose dd {
+  margin-inline-start: 1.5em;
+  color: var(--dim);
+}
+
+/*
+ * A footnote reference and the notes at the bottom - what `remark-gfm`
+ * produces. Smaller and dimmer, because a footnote that reads at the weight of
+ * the text interrupts the sentence carrying it.
+ */
+.prose sup a {
+  text-decoration: none;
+  font-size: 0.8em;
+}
+.prose .footnotes {
+  font-size: var(--text-sm);
+  color: var(--dim);
+  border-block-start: 1px solid var(--line);
+  margin-block-start: 2em;
+  padding-block-start: 0.75em;
+}
+
+/*
+ * Tight: the same prose in a place that has no room for a reading column - a
+ * chat bubble, a table cell, a hover card. The rhythm compresses and the
+ * measure is given up to the container, because in a bubble the container IS
+ * the measure. Nothing else changes: the same tags, the same tokens.
+ */
+.prose-tight {
+  font-size: var(--text-sm);
+  line-height: 1.55;
+  max-width: none;
+}
+
+.prose-tight > * {
+  margin-block: 0 0.5em;
+}
+
+.prose-tight :is(h1, h2, h3, h4, h5, h6) {
+  margin-block: 1em 0.35em;
+}
+
+.prose-tight :is(h1, h2) {
+  font-size: var(--text-base);
+}
+
+.prose-tight h3 {
+  font-size: var(--text-sm);
+}
+
+.prose-tight hr {
+  margin-block: 1.2em;
+}