@salilvnair/dui 1.0.8 → 1.0.9

package/dist/lib/components/display/BadgeChipView.d.ts

@@ -1,5 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
+import { BadgeChipVariant, ChipSkin } from './badge-chip-skins';
 export type BadgeChipSize = '2xs' | 'xs' | 'sm' | 'md';
+export type { BadgeChipVariant };
 export interface BadgeChipViewProps {
     children: ReactNode;
     /**
@@ -11,15 +13,39 @@ export interface BadgeChipViewProps {
      */
     tone?: string;
     size?: BadgeChipSize;
+    /**
+     * Which of the fifty looks. Falls back to the provider's `chipVariant`, then
+     * to the original raised one.
+     */
+    variant?: BadgeChipVariant;
     /**
      * Drop the tint and the border, keeping only the text.
      *
-     * For a chip in a dense row where a dozen of them would be more border than
-     * content — the colour still carries the meaning.
+     * Kept for the callers that already say it. It is the `text` skin by another
+     * name, and it wins over `variant` when both are given.
      */
     plain?: boolean;
     title?: string;
     className?: string;
     style?: CSSProperties;
 }
-export declare function BadgeChipView({ children, tone, size, plain, title, className, style, }: BadgeChipViewProps): import("react").JSX.Element;
+/** The style of the box, given a skin and a size. Exported for the gallery. */
+export declare function chipBoxStyle(skin: ChipSkin, tone: string, size: BadgeChipSize): CSSProperties;
+/** The dot's own box, when a skin has one. Exported for the gallery. */
+export declare function chipDotStyle(tone: string, size: BadgeChipSize): CSSProperties;
+/**
+ * What to put on the span holding the glyphs.
+ *
+ * It is a flex row, and that is not decoration. The children used to sit
+ * directly in the chip's own flex box, so a caller passing an icon and a word
+ * got them side by side. Wrapping them in a span to carry the corrections
+ * below turned that into inline flow — and an `<svg>` is `display: block`
+ * under a Tailwind reset, which breaks the line. The performance badge in the
+ * REST status bar became a gauge on one line and "5.6σ slow" on the next.
+ *
+ * Then the two corrections, both sub-pixel and both real: the trailing
+ * letter-space taken back out of the centring, and the measured vertical nudge
+ * for caps. Exported so the gallery draws exactly what the component draws.
+ */
+export declare function chipTextStyle(skin: ChipSkin, size: BadgeChipSize): CSSProperties;
+export declare function BadgeChipView({ children, tone, size, variant, plain, title, className, style, }: BadgeChipViewProps): import("react").JSX.Element;

package/dist/lib/components/display/LoadingStateView.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface LoadingStateViewProps {
+    /**
+     * The thing being waited for, drawn large.
+     *
+     * Deliberately the subject rather than a generic spinner: a reader glancing
+     * at the screen learns what is happening from the icon before they read a
+     * word of it.
+     */
+    icon?: ReactNode;
+    title: string;
+    message?: string;
+    accentColor?: string;
+    /** Matches EmptyStateView, so the two swap without the layout moving. */
+    compact?: boolean;
+    /**
+     * The medallion's box, in px.
+     *
+     * Defaulted from `compact`, and worth overriding in one case: a state that
+     * owns a whole panel rather than sitting inside a list. 54px centred in an
+     * empty tab reads as something that failed to load rather than as the
+     * subject of the screen. Pair it with a larger icon — `IconSize.hero`.
+     */
+    medallionSize?: number;
+    /**
+     * Seconds after which the wait stops being ordinary.
+     *
+     * A cluster on the other side of the world, behind a VPN, answers in seconds
+     * rather than milliseconds — and the reader cannot tell that from a hang. At
+     * this point the component says so itself instead of leaving them to guess.
+     * 0 disables it.
+     */
+    slowAfterSeconds?: number;
+    /** What to say once it has been slow. Replaces `message`. */
+    slowMessage?: string;
+    /** Offered only once the wait has gone long — Cancel, Try again, Go back. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Shown under the message: what is being fetched, step by step. */
+    hints?: {
+        key: ReactNode;
+        text: string;
+    }[];
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Waiting, said properly.
+ *
+ * The shape of EmptyStateView with a pulse and a clock. It exists because the
+ * alternative everywhere was a line of grey text — "Loading pods…", "Loading
+ * namespaces…" — which says nothing about what is being waited for, nothing
+ * about how long it has been, and looks identical whether the answer is a
+ * hundred milliseconds away or never coming.
+ *
+ * Three things it does that a spinner cannot: it names the subject, it changes
+ * its mind after a while, and it eventually offers a way out.
+ */
+export declare function LoadingStateView({ icon, title, message, accentColor, compact, medallionSize, slowAfterSeconds, slowMessage, action, hints, className, style, }: LoadingStateViewProps): import("react").JSX.Element;

package/dist/lib/components/display/badge-chip-skins.d.ts

@@ -0,0 +1,496 @@
+/**
+ * Fifty ways to draw the same chip.
+ *
+ * The chip started as one look — a raised face with a light top edge, a dark
+ * inner bottom edge and a drop shadow. That reads well alone in a dense
+ * monospace row and badly in a line of five, where every chip looks like a
+ * button you could press and none of them are. Rather than argue the point
+ * once and bake in a second opinion, the look is a value.
+ *
+ * Each entry here is DATA, not a style function, and that is deliberate: the
+ * same table drives the component and the gallery that photographs it, so the
+ * sheet you choose from cannot drift from what the app renders.
+ *
+ * ── What a skin may and may not decide ──
+ *
+ * It decides the surface: fill, border, corner, depth, and how the text is set
+ * — caps or not, mono or not, weight, tracking. It does NOT decide the chip's
+ * height or font size; those come from `size`, so a row of chips in different
+ * skins still lines up on one baseline. A skin that wanted to be taller would
+ * be a different size, not a different skin.
+ *
+ * ── Where they come from ──
+ *
+ * Several are modelled on chips people already know from the web — Material's
+ * assist and filter chips, MUI's filled and outlined, Ant's tag, a GitHub
+ * label, a Tailwind badge with its inset ring, an Atlassian lozenge. They are
+ * named for what they look like rather than who ships them, with the lineage
+ * in the note, because the point is to recognise the shape, not to clone a
+ * product.
+ */
+/** Where the fill comes from, when it is not a percentage of the tone. */
+export type ChipFill = number | 'neutral' | 'surface' | 'sunken';
+export interface ChipSkin {
+    id: string;
+    /** What to call it in a picker. */
+    label: string;
+    /** One line: what it is, and where the shape is from. */
+    note: string;
+    fill?: ChipFill;
+    /** Border strength as a percentage of the tone. */
+    border?: number;
+    borderWidth?: number;
+    borderStyle?: 'solid' | 'dashed';
+    /**
+     * A saturated fill, as a percentage of the tone, with ink on top instead of
+     * the tone in the text. `ink` says which way the text goes.
+     */
+    solid?: number;
+    ink?: 'dark' | 'light';
+    /** An inset ring, the Tailwind badge trick: a border that costs no layout. */
+    ring?: number;
+    /** Corner. A number is px; `pill` is fully round; omitted takes the size's. */
+    radius?: number | 'pill';
+    /** Raised like the original, or sunk into the surface. */
+    depth?: 'raised' | 'inset' | 'lift';
+    /** Uppercase, and mono. Both default true — a label, not a sentence. */
+    caps?: boolean;
+    mono?: boolean;
+    weight?: number;
+    /** Letter-spacing in em. */
+    tracking?: number;
+    /** Added to the size's horizontal padding. */
+    padX?: number;
+    /** A tone-coloured dot before the text. */
+    dot?: boolean;
+    /** Square brackets around the text, which is the box. */
+    brackets?: boolean;
+    /** A rule under the text instead of a box around it. */
+    underline?: boolean;
+    /** A 2px tone edge on the left, square corners. */
+    rail?: boolean;
+    /** No box at all: the colour carries it. */
+    bare?: boolean;
+}
+export declare const BADGE_CHIP_SKINS: readonly [{
+    readonly id: "embossed";
+    readonly label: "Embossed";
+    readonly note: "The original: lit top edge, dark inner bottom, drop shadow.";
+    readonly fill: 20;
+    readonly border: 42;
+    readonly depth: "raised";
+}, {
+    readonly id: "flat";
+    readonly label: "Flat tint";
+    readonly note: "Fill and text, nothing else.";
+    readonly fill: 22;
+}, {
+    readonly id: "soft";
+    readonly label: "Soft";
+    readonly note: "A lighter tint, still boxed.";
+    readonly fill: 14;
+    readonly radius: 6;
+}, {
+    readonly id: "quiet";
+    readonly label: "Quiet";
+    readonly note: "Soft fill with a soft hairline. No depth.";
+    readonly fill: 12;
+    readonly border: 28;
+}, {
+    readonly id: "tint-strong";
+    readonly label: "Strong tint";
+    readonly note: "The tint turned up, no border.";
+    readonly fill: 34;
+}, {
+    readonly id: "ghost";
+    readonly label: "Ghost";
+    readonly note: "A neutral wash; the tone lives in the text.";
+    readonly fill: "neutral";
+}, {
+    readonly id: "surface";
+    readonly label: "Surface";
+    readonly note: "The panel surface with a hairline, like a small card.";
+    readonly fill: "surface";
+    readonly border: 22;
+}, {
+    readonly id: "recessed";
+    readonly label: "Recessed";
+    readonly note: "A well in the surface rather than a raised face.";
+    readonly fill: "sunken";
+    readonly depth: "inset";
+}, {
+    readonly id: "solid";
+    readonly label: "Solid";
+    readonly note: "Full tone with dark ink. The loudest of them.";
+    readonly solid: 100;
+    readonly ink: "dark";
+}, {
+    readonly id: "solid-soft";
+    readonly label: "Solid, softened";
+    readonly note: "The tone at three quarters.";
+    readonly solid: 74;
+    readonly ink: "dark";
+}, {
+    readonly id: "solid-muted";
+    readonly label: "Solid, muted";
+    readonly note: "Half tone with light text.";
+    readonly solid: 52;
+    readonly ink: "light";
+}, {
+    readonly id: "solid-pill";
+    readonly label: "Solid pill";
+    readonly note: "Full tone, fully round.";
+    readonly solid: 100;
+    readonly ink: "dark";
+    readonly radius: "pill";
+}, {
+    readonly id: "hairline";
+    readonly label: "Hairline";
+    readonly note: "Outline only, no fill.";
+    readonly border: 48;
+}, {
+    readonly id: "outline-strong";
+    readonly label: "Strong outline";
+    readonly note: "A heavier rule, still hollow.";
+    readonly border: 62;
+    readonly borderWidth: 1.5;
+}, {
+    readonly id: "outline-dashed";
+    readonly label: "Dashed outline";
+    readonly note: "Hollow and provisional — good for a draft state.";
+    readonly border: 55;
+    readonly borderStyle: "dashed";
+}, {
+    readonly id: "outline-tinted";
+    readonly label: "Tinted outline";
+    readonly note: "A hairline over a faint wash.";
+    readonly fill: 9;
+    readonly border: 44;
+}, {
+    readonly id: "ring";
+    readonly label: "Inset ring";
+    readonly note: "The border drawn inside, so the box never grows.";
+    readonly fill: 10;
+    readonly ring: 26;
+    readonly radius: 6;
+}, {
+    readonly id: "rect";
+    readonly label: "Square";
+    readonly note: "No corner at all.";
+    readonly fill: 16;
+    readonly border: 30;
+    readonly radius: 0;
+}, {
+    readonly id: "tag";
+    readonly label: "Tag";
+    readonly note: "Two-pixel corners. Terminal-ish.";
+    readonly fill: 16;
+    readonly border: 34;
+    readonly radius: 2;
+}, {
+    readonly id: "rounded";
+    readonly label: "Rounded";
+    readonly note: "Six-pixel corners, the web default.";
+    readonly fill: 16;
+    readonly border: 30;
+    readonly radius: 6;
+}, {
+    readonly id: "rounded-lg";
+    readonly label: "Rounded, large";
+    readonly note: "Ten pixels: a rounded rectangle, clearly.";
+    readonly fill: 16;
+    readonly border: 30;
+    readonly radius: 10;
+}, {
+    readonly id: "pill";
+    readonly label: "Pill";
+    readonly note: "Fully round, tinted.";
+    readonly fill: 18;
+    readonly radius: "pill";
+    readonly padX: 2;
+}, {
+    readonly id: "pill-outline";
+    readonly label: "Pill, outlined";
+    readonly note: "Fully round and hollow.";
+    readonly border: 46;
+    readonly radius: "pill";
+    readonly padX: 2;
+}, {
+    readonly id: "pill-quiet";
+    readonly label: "Pill, quiet";
+    readonly note: "Round, faint fill, faint edge.";
+    readonly fill: 11;
+    readonly border: 26;
+    readonly radius: "pill";
+    readonly padX: 2;
+}, {
+    readonly id: "mui-filled";
+    readonly label: "Filled, sentence case";
+    readonly note: "MUI’s filled chip: round, tinted, not shouted.";
+    readonly fill: 16;
+    readonly radius: "pill";
+    readonly padX: 3;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "mui-outlined";
+    readonly label: "Outlined, sentence case";
+    readonly note: "MUI’s outlined chip.";
+    readonly border: 40;
+    readonly radius: "pill";
+    readonly padX: 3;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "mui-solid";
+    readonly label: "Filled solid, sentence case";
+    readonly note: "MUI’s coloured chip, ink on tone.";
+    readonly solid: 100;
+    readonly ink: "dark";
+    readonly radius: "pill";
+    readonly padX: 3;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "m3-assist";
+    readonly label: "Assist";
+    readonly note: "Material 3 assist chip: 8px corner, surface, thin outline.";
+    readonly fill: "surface";
+    readonly border: 26;
+    readonly radius: 8;
+    readonly padX: 2;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "m3-filter";
+    readonly label: "Filter";
+    readonly note: "Material 3 filter chip: 8px corner, tinted, no outline.";
+    readonly fill: 20;
+    readonly radius: 8;
+    readonly padX: 2;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "m3-input";
+    readonly label: "Input";
+    readonly note: "Material 3 input chip: outlined over a faint wash.";
+    readonly fill: 8;
+    readonly border: 34;
+    readonly radius: 8;
+    readonly padX: 2;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "m3-elevated";
+    readonly label: "Elevated";
+    readonly note: "Material 3 elevated chip: a card shadow, no outline.";
+    readonly fill: "surface";
+    readonly radius: 8;
+    readonly depth: "lift";
+    readonly padX: 2;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "ant-tag";
+    readonly label: "Tag, light";
+    readonly note: "Ant Design’s tag: 2px corner, pale fill, tone border.";
+    readonly fill: 10;
+    readonly border: 38;
+    readonly radius: 2;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 400;
+    readonly tracking: 0;
+}, {
+    readonly id: "github-label";
+    readonly label: "Issue label";
+    readonly note: "A GitHub label: round, tinted, tone border.";
+    readonly fill: 18;
+    readonly border: 30;
+    readonly radius: "pill";
+    readonly padX: 2;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "stripe-badge";
+    readonly label: "Dashboard badge";
+    readonly note: "Stripe’s badge: 4px corner, pale, quiet weight.";
+    readonly fill: 13;
+    readonly radius: 4;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "linear-badge";
+    readonly label: "Tracker badge";
+    readonly note: "Linear’s: surface fill, neutral edge, tone text.";
+    readonly fill: "surface";
+    readonly border: 18;
+    readonly radius: 4;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "shadcn-outline";
+    readonly label: "Outline, round";
+    readonly note: "shadcn’s outline badge.";
+    readonly border: 42;
+    readonly radius: "pill";
+    readonly padX: 2;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "shadcn-solid";
+    readonly label: "Default, round";
+    readonly note: "shadcn’s default badge, ink on tone.";
+    readonly solid: 100;
+    readonly ink: "dark";
+    readonly radius: "pill";
+    readonly padX: 2;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "bootstrap";
+    readonly label: "Badge, square-ish";
+    readonly note: "Bootstrap’s badge: 4px corner, solid.";
+    readonly solid: 92;
+    readonly ink: "dark";
+    readonly radius: 4;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 600;
+    readonly tracking: 0;
+}, {
+    readonly id: "bootstrap-pill";
+    readonly label: "Badge, pill";
+    readonly note: "Bootstrap’s rounded-pill badge.";
+    readonly solid: 92;
+    readonly ink: "dark";
+    readonly radius: "pill";
+    readonly padX: 2;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 600;
+    readonly tracking: 0;
+}, {
+    readonly id: "lozenge";
+    readonly label: "Lozenge";
+    readonly note: "Atlassian’s: tiny, bold, uppercase, 3px corner.";
+    readonly fill: 26;
+    readonly radius: 3;
+    readonly weight: 700;
+    readonly tracking: 0.06;
+}, {
+    readonly id: "tailwind-badge";
+    readonly label: "Ring badge";
+    readonly note: "A Tailwind badge: pale fill, inset ring, 6px corner.";
+    readonly fill: 11;
+    readonly ring: 22;
+    readonly radius: 6;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "chakra-subtle";
+    readonly label: "Subtle";
+    readonly note: "Chakra’s subtle tag: 6px corner, tinted, sentence case.";
+    readonly fill: 18;
+    readonly radius: 6;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "notion-pill";
+    readonly label: "Property pill";
+    readonly note: "A Notion property: round, flat tint, no edge.";
+    readonly fill: 24;
+    readonly radius: "pill";
+    readonly padX: 2;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 400;
+    readonly tracking: 0;
+}, {
+    readonly id: "dot";
+    readonly label: "Dot and text";
+    readonly note: "A state mark, then the word. No box.";
+    readonly bare: true;
+    readonly dot: true;
+    readonly weight: 600;
+    readonly tracking: 0.05;
+}, {
+    readonly id: "dot-pill";
+    readonly label: "Dot in a pill";
+    readonly note: "The mark inside a neutral round box.";
+    readonly fill: "neutral";
+    readonly radius: "pill";
+    readonly padX: 3;
+    readonly dot: true;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "dot-outline";
+    readonly label: "Dot, outlined";
+    readonly note: "The mark inside a hollow round box.";
+    readonly border: 34;
+    readonly radius: "pill";
+    readonly padX: 3;
+    readonly dot: true;
+    readonly caps: false;
+    readonly mono: false;
+    readonly weight: 500;
+    readonly tracking: 0;
+}, {
+    readonly id: "rail";
+    readonly label: "Left rail";
+    readonly note: "Square, with the tone as an edge down the left.";
+    readonly fill: 13;
+    readonly rail: true;
+}, {
+    readonly id: "underline";
+    readonly label: "Underline";
+    readonly note: "A rule under the word instead of a box.";
+    readonly bare: true;
+    readonly underline: true;
+}, {
+    readonly id: "bracketed";
+    readonly label: "Bracketed";
+    readonly note: "No box; the brackets are the box.";
+    readonly bare: true;
+    readonly brackets: true;
+}, {
+    readonly id: "text";
+    readonly label: "Text only";
+    readonly note: "The colour, and nothing else.";
+    readonly bare: true;
+}];
+export type BadgeChipVariant = (typeof BADGE_CHIP_SKINS)[number]['id'];
+/** Looked up by id, for the component and for anything that lists them. */
+export declare const CHIP_SKIN_BY_ID: Record<string, ChipSkin>;
+export declare const DEFAULT_CHIP_VARIANT: BadgeChipVariant;

package/dist/lib/components/display/badge-chip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/input/SearchFieldView.d.ts

@@ -1,5 +1,17 @@
 import { ReactNode } from 'react';
 import { DuiSize } from '../../core/DuiTypes';
+/**
+ * One offered search.
+ *
+ * `meta` is the right-hand detail — what the entry meant beyond its text: how
+ * many things it was run against, when, how many it found. A bare string is
+ * accepted too, and means an entry with nothing to add.
+ */
+export interface SearchSuggestion {
+    value: string;
+    meta?: string;
+    icon?: ReactNode;
+}
 export interface SearchFieldViewProps {
     /**
      * A stable hook for tests and automation.
@@ -29,5 +41,32 @@ export interface SearchFieldViewProps {
     /** Sits between the text and the clear button — a count, a spinner. */
     trailing?: ReactNode;
     autoFocus?: boolean;
+    /** Offered under the box on focus. Strings are entries with no detail. */
+    suggestions?: (string | SearchSuggestion)[];
+    /** The heading over them. What they ARE, in a word or two. */
+    suggestionsLabel?: string;
+    /**
+     * Picking one.
+     *
+     * Defaults to putting it in the box and running it, which is what a history
+     * entry is for. Callers that restore more than the text — the things the
+     * search was run against — do it here.
+     */
+    onPick?: (value: string) => void;
+    /** Given, each row gets an X that drops that entry. */
+    onForget?: (value: string) => void;
+    /**
+     * Given, the heading gets a control that drops the lot.
+     *
+     * Worth having once the list is long enough to be a list: forgetting twelve
+     * entries one X at a time is twelve gestures to reach an empty box, and the
+     * reason to do it — a screen someone else is about to look at — is usually
+     * the reason there is no time for twelve.
+     */
+    onClearAll?: () => void;
+    /** Most to offer at once. Beyond this the list stops being a shortcut. */
+    maxSuggestions?: number;
+    /** Above modals by default, which is where this is usually used. */
+    suggestionZIndex?: number;
 }
-export declare function SearchFieldView({ testId, value, onChange, onSearch, onClear, placeholder, size, width, accentColor, trailing, autoFocus, }: SearchFieldViewProps): import("react").JSX.Element;
+export declare function SearchFieldView({ testId, value, onChange, onSearch, onClear, placeholder, size, width, accentColor, trailing, autoFocus, suggestions, suggestionsLabel, onPick, onForget, onClearAll, maxSuggestions, suggestionZIndex, }: SearchFieldViewProps): import("react").JSX.Element;

package/dist/lib/components/input/markdown-serialise.d.ts

@@ -13,6 +13,22 @@
  * reduced to its text, because silently emitting HTML into a Markdown document
  * makes the next round trip worse, not better.
  */
+/**
+ * Characters that would otherwise turn plain text into markup.
+ *
+ * Escaped only where they would ACTUALLY be markup, which is narrower than
+ * "at the start of a line" and the difference matters.
+ *
+ * CommonMark needs a space after the marker: `# Title` is a heading, `#14` is
+ * the text `#14`. Escaping the second produced `\#14`, which renders as `#14`
+ * and so looked right — while GitHub quietly stopped linking it to issue 14. A
+ * reference typed into a comment box arrived dead on github.com and dead in
+ * dkgh, for a heading nobody was writing.
+ *
+ * Same rule for the list markers: `- item` is a bullet, `-5` is a number.
+ * `>` is the exception — a blockquote needs no space, so it always escapes.
+ */
+export declare function escapeText(text: string): string;
 /**
  * Turn a contenteditable's HTML into Markdown.
  *

package/dist/lib/components/input/markdown-serialise.test.d.ts

@@ -0,0 +1 @@
+export {};