@crewlethq/ui 0.12.0 → 0.13.0

package/dist/CommandPalette/CommandPalette.d.ts

@@ -17,7 +17,12 @@ export interface CommandPaletteItem {
      * the palette's `onKeyDown`, like the chord that opens it.
      */
     meta?: ReactNode;
-    onSelect: () => void;
+    /**
+     * Taking the row. The surface closes after it, which is what a launcher's
+     * row means; a row that leads somewhere INSIDE the surface (into a step) or
+     * waits on an answer the reader is owed returns `false` to keep it open.
+     */
+    onSelect: () => boolean | void;
 }
 export interface CommandPaletteGroup {
     id: string;
@@ -25,6 +30,28 @@ export interface CommandPaletteGroup {
     label: string;
     items: CommandPaletteItem[];
 }
+/**
+ * A STEP the palette has gone into: a second list in place of the results,
+ * for a choice the first one led to (which project to file into, which theme
+ * to use). The caller hands over the step's own rows as `groups` and its own
+ * query; this draws where the reader is and the way back.
+ */
+export interface CommandPaletteStep {
+    /** What the step chooses, on the chip at the field's start: "Change theme". */
+    label: string;
+    /**
+     * Back to where the step was opened from: the chip, Escape, and Backspace in
+     * an empty field. The palette stays open; closing is the veil's and the
+     * caller's chord.
+     */
+    onBack: () => void;
+    /**
+     * The id of the row the step's list opens on: the choice already in effect,
+     * so a step that previews its rows opens on what is on screen rather than
+     * previewing its first row. The first row without it.
+     */
+    startAt?: string | undefined;
+}
 /** One scope the search can be narrowed to: a tab over the results. */
 export interface CommandPaletteScope {
     /** Stable identity: the value `scope`, `onScopeChange` and `groupsScope` carry. */
@@ -105,6 +132,19 @@ export type CommandPaletteProps = Omit<HTMLAttributes<HTMLElement>, 'children' |
     pendingMessage?: string | undefined;
     /** Names the result list itself. */
     resultsLabel?: string | undefined;
+    /**
+     * The step the palette is in, or none. In a step the field starts with a
+     * chip naming it, which goes back on a press, and Escape and Backspace in
+     * an empty field go back rather than closing the surface.
+     */
+    step?: CommandPaletteStep | undefined;
+    /**
+     * Told where the highlight COMES TO REST, and `null` when the list empties,
+     * the pointer leaves it or the surface closes: at once for a key, and once
+     * the pointer has rested on a row for `HIGHLIGHT_REST_MS`. What a step that
+     * previews its rows listens to.
+     */
+    onHighlight?: ((item: CommandPaletteItem | null) => void) | undefined;
 };
 /**
  * One search surface for a whole product: screens, records, and any id pasted
@@ -158,6 +198,13 @@ export type CommandPaletteProps = Omit<HTMLAttributes<HTMLElement>, 'children' |
  * prevented, so it does not move focus off the field: a combobox that loses its
  * input names no highlight, and typing reaches nothing.
  *
+ * A STEP IS A SECOND LIST, NOT A SECOND SURFACE (`step`). The field stays
+ * where it is, so focus and the reader's place survive going in and coming
+ * back; its search glyph gives way to a chip naming the step, and the keys
+ * that would close the surface go back instead: Escape, and Backspace in an
+ * empty field, which is where a reader who has erased their query is asking to
+ * go. The veil still closes it, as does the caller's own chord.
+ *
  * THE CHORD THAT OPENS IT IS THE APPLICATION'S, not this component's. Pass an
  * `onKeyDown`: it reaches the frame, which is every key pressed inside the
  * surface, and closing from there is one line the caller already has the

package/dist/CommandPalette/index.js

@@ -1,8 +1,8 @@
-export { CommandPalette } from '../chunk-XV65NTIT.js';
-import '../chunk-6MU7HNB4.js';
+export { CommandPalette } from '../chunk-HKGS67VG.js';
+import '../chunk-CF6DTETT.js';
+import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-FTEJPHBI.js';
-import '../chunk-TEEJSTFG.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{CommandPalette-C5AMKGN2.css → CommandPalette-HBTNKHZQ.css}

@@ -56,17 +56,70 @@
  * glyph stood 24px in and the keycap 28px from the edge; at 12px they stand
  * 20px and 16px in, where the approved palette draws them, and the query still
  * starts on the line the design's does.
+ *
+ * The band is the BAR around the field, so a step's chip shares it: the field
+ * itself draws no box and fills what the chip leaves.
  */
-.crewlet-input.crewlet-palette__field {
+.crewlet-palette__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
   flex-shrink: 0;
   min-height: var(--size-row-lg);
   padding-inline: var(--spacing-3);
-  border: none;
   border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-input.crewlet-palette__field {
+  flex: 1;
+  min-width: 0;
+  align-self: stretch;
+  padding-inline: 0;
+  border: none;
   border-radius: 0;
   background: transparent;
 }
 
+/*
+ * THE STEP'S CHIP: where the reader is, and the way back. It wears the
+ * accent's soft tint and ink, the kit's mark for "this is on", because a step
+ * is a narrowing the reader chose, as a filter that is on is; it is a control,
+ * so it takes the pointer and draws its own ring.
+ */
+.crewlet-palette__step {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex: none;
+  min-height: var(--size-target-min);
+  padding: 0 var(--spacing-2) 0 var(--spacing-1);
+  border: none;
+  border-radius: var(--radius-sm);
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+  font: inherit;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+/* Under the pointer it draws the line the soft tint is paired with, rather
+   than a stronger fill its ink was never measured on. */
+.crewlet-palette__step:hover {
+  box-shadow: inset 0 0 0 1px var(--color-brand-accent-soft-strong);
+}
+
+.crewlet-palette__step:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 1px;
+}
+
+/* In a step the query starts a gap after the chip, not a text inset after it. */
+.crewlet-palette__bar.is-step .crewlet-input__control {
+  padding-left: 0;
+}
+
 .crewlet-input.crewlet-palette__field .crewlet-input__control {
   font-size: var(--font-size-md);
 }

package/dist/DataTable/index.js

@@ -1,11 +1,11 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-GOUKOXJK.js';
-import '../chunk-AV2DXAEL.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-WY2NLRZN.js';
 import '../chunk-TFH6SYWB.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-TEEJSTFG.js';
+import '../chunk-YCTMKKRA.js';
 import '../chunk-5VNUYO76.js';
+import '../chunk-CF6DTETT.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-YCTMKKRA.js';
+import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';

package/dist/DataView/index.js

@@ -1,23 +1,23 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-IINFVK3W.js';
-import '../chunk-PGRPNDWM.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-UZPHPW3Z.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-3CZ7XAVY.js';
-import '../chunk-JCNUQ3US.js';
-import '../chunk-6MU7HNB4.js';
-import '../chunk-SMBKXWML.js';
-import '../chunk-FTEJPHBI.js';
-import '../chunk-GOUKOXJK.js';
-import '../chunk-AV2DXAEL.js';
+import '../chunk-PGRPNDWM.js';
+import '../chunk-WY2NLRZN.js';
 import '../chunk-TFH6SYWB.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-TEEJSTFG.js';
+import '../chunk-JDPAA2JU.js';
+import '../chunk-YCTMKKRA.js';
 import '../chunk-5VNUYO76.js';
+import '../chunk-CF6DTETT.js';
+import '../chunk-F73MC7EZ.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-YCTMKKRA.js';
+import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-PDUZO35I.js';
+import '../chunk-O2ZDZZS7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';

package/dist/DateTimePicker/index.js

@@ -1,8 +1,8 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-JCNUQ3US.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-JDPAA2JU.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-PDUZO35I.js';
+import '../chunk-O2ZDZZS7.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Document/Document.d.ts

@@ -0,0 +1,56 @@
+import type { HTMLAttributes } from 'react';
+export type DocumentSize = 
+/**
+ * A page read on its own: the small step at the relaxed leading, sections at
+ * the ramp's xl and lg. THE DEFAULT, because a knowledge page, a runbook and
+ * a design are what this is for.
+ */
+'md'
+/**
+ * A document read beside other things: a comment, a preview in a side
+ * pane, a result's peek. The body's own size, sections a step over it.
+ */
+ | 'sm';
+export type DocumentElement = 'div' | 'article' | 'section';
+export interface DocumentProps extends HTMLAttributes<HTMLElement> {
+    /** The element to draw. A `div` by default; an `article` for a page that stands alone. */
+    as?: DocumentElement | undefined;
+    size?: DocumentSize | undefined;
+    /** Bounds the line length at the measure token. On by default; a measure is the point. */
+    measure?: 'normal' | 'none' | undefined;
+}
+/**
+ * Rendered markdown, set as a document: headings, paragraphs, lists and task
+ * lists, quotes, code, tables, rules, links and images.
+ *
+ * A STYLESHEET OVER ELEMENTS, NOT A RENDERER. What a body may contain (which
+ * link schemes are safe, whether raw HTML is text) is a decision about the
+ * application's own content, so the parser stays with the application and
+ * emits plain semantic elements, and this draws them. Any renderer that emits
+ * `h2`, `ul`, `table` and the rest works unchanged, and nothing here reads a
+ * class name a renderer would have to know about.
+ *
+ * WHAT IT RECOGNISES BY SHAPE. A task item is a list item whose first child is
+ * a checkbox; a table that may be wider than the column sits in an element of
+ * its own, and that element scrolls. Both are read off the structure, so a
+ * renderer gets them by emitting the markup it would emit anyway. A renderer
+ * gives that element `tabIndex={0}`, a `region` role and a name, because a
+ * scroller no keyboard can reach is a table no keyboard can read to its end.
+ *
+ * THE TITLE IS NOT PART OF IT. A page's title is its address and its `h1`, set
+ * above the body by `DocumentTitle`, so a renderer draws the body's own
+ * headings from `h2` down and the outline of the page starts there.
+ */
+export declare function Document({ as: Tag, size, measure, className, children, ...rest }: DocumentProps): import("react").JSX.Element;
+export interface DocumentTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** The heading level. An `h1` by default: on a page of its own, the title is the page's. */
+    as?: 'h1' | 'h2' | undefined;
+}
+/**
+ * A document's title: the largest step a reading screen spends, at the tight
+ * tracking every title on the ramp takes.
+ *
+ * A component rather than a class, so a screen does not set a page's title in
+ * a size of its own beside the body it heads.
+ */
+export declare function DocumentTitle({ as: Tag, className, children, ...rest }: DocumentTitleProps): import("react").JSX.Element;

package/dist/Document/index.d.ts

@@ -0,0 +1,3 @@
+import './Document.css';
+export { Document, DocumentTitle } from './Document.js';
+export type { DocumentElement, DocumentProps, DocumentSize, DocumentTitleProps } from './Document.js';

package/dist/Document/index.js

@@ -0,0 +1,2 @@
+export { Document, DocumentTitle } from '../chunk-WI6K5M5X.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Document-PQGXJHB7.css

@@ -0,0 +1,288 @@
+/*
+ * Rendered markdown, set as a document (Document.tsx).
+ *
+ * Every size here is a step on the type ramp and every gap a spacing step,
+ * because a reading column set in sizes of its own (32, 20, 18, 15 and 14.5px
+ * were measured on one) is a column that drifts from every other surface.
+ */
+
+.crewlet-document {
+  /* The two rhythms a size sets: between blocks, and above a section. */
+  --crewlet-document-gap: var(--spacing-4);
+  --crewlet-document-section-gap: var(--spacing-6);
+  margin: 0;
+  min-width: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-relaxed);
+  color: var(--color-text-secondary);
+  /* The renderer decides what a break is, so the whitespace rule is normal. */
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+
+.crewlet-document--sm {
+  --crewlet-document-gap: var(--spacing-3);
+  --crewlet-document-section-gap: var(--spacing-5);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-document--measure {
+  max-width: var(--size-measure);
+}
+
+/*
+ * EVERY BLOCK'S OWN MARGIN IS ZEROED FIRST, and the rhythm is one rule over
+ * siblings. The other way round, a margin reset per element after the sibling
+ * rule, is how a rhythm dies: the shorthand resets the top margin too, at the
+ * same specificity and later in the file, and every block runs into the next.
+ */
+.crewlet-document :where(p, h1, h2, h3, h4, h5, h6, ul, ol, pre, blockquote, table, figure) {
+  margin: 0;
+}
+
+.crewlet-document > * + * {
+  margin-block-start: var(--crewlet-document-gap);
+}
+
+.crewlet-document :where(h1, h2, h3, h4, h5, h6) {
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+  letter-spacing: var(--font-letter-spacing-snug);
+  color: var(--color-text-primary);
+  /* An outline that scrolls a heading into view leaves it a little air. */
+  scroll-margin-block-start: var(--spacing-6);
+}
+
+/* A heading opens a section, so it gets more air above it than a paragraph. */
+.crewlet-document > * + :where(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: var(--crewlet-document-section-gap);
+}
+
+.crewlet-document h1 {
+  font-size: var(--font-size-2xl);
+}
+
+.crewlet-document h2 {
+  font-size: var(--font-size-xl);
+}
+
+.crewlet-document h3 {
+  font-size: var(--font-size-lg);
+}
+
+.crewlet-document :where(h4, h5, h6) {
+  font-size: var(--font-size-md);
+}
+
+.crewlet-document--sm h1 {
+  font-size: var(--font-size-lg);
+}
+
+.crewlet-document--sm h2 {
+  font-size: var(--font-size-md);
+}
+
+.crewlet-document--sm h3 {
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-document--sm :where(h4, h5, h6) {
+  font-size: var(--font-size-compact);
+  color: var(--color-text-secondary);
+}
+
+/*
+ * A HEADING AN OUTLINE MOVED TO takes focus, so a keyboard carries on from it.
+ * A press draws no ring (`:focus-visible` does not match one); a keyboard's is
+ * drawn off the text, because the heading is not a control.
+ */
+.crewlet-document :where(h1, h2, h3, h4, h5, h6):focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--spacing-1);
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-document :where(strong, b) {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.crewlet-document :where(ul, ol) {
+  padding-inline-start: var(--spacing-5);
+}
+
+.crewlet-document li + li,
+.crewlet-document li > :where(ul, ol) {
+  margin-block-start: var(--spacing-1);
+}
+
+.crewlet-document li::marker {
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * A TASK LIST keeps its box on the line rather than in the marker's place: the
+ * marker is what says "list", and the box is what says "done". The item's
+ * content is ONE column beside the box, never a second cell of the row, so a
+ * sublist hangs under the line it belongs to.
+ */
+.crewlet-document ul:has(> li > input[type='checkbox']) {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.crewlet-document li:has(> input[type='checkbox']) {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+}
+
+.crewlet-document li:has(> input[type='checkbox']) > :not(input) {
+  flex: 1;
+  min-width: 0;
+}
+
+.crewlet-document li > input[type='checkbox'] {
+  flex: none;
+  margin: 0;
+  /* On the first line's centre rather than on the top of its box. */
+  margin-block-start: 0.35em;
+  accent-color: var(--color-brand-accent);
+}
+
+/*
+ * A FENCED BLOCK WRAPS RATHER THAN SCROLLING. One long line of JSON in a body
+ * otherwise pushes the whole page sideways, and a block that scrolled instead
+ * would owe a tab stop, since a scroller no keyboard reaches is content no
+ * keyboard reads. `anywhere` because these lines have no spaces to break at.
+ */
+.crewlet-document pre {
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-inset);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-primary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-document pre code {
+  padding: 0;
+  background: none;
+  font: inherit;
+}
+
+.crewlet-document :not(pre) > code {
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-inset);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-document blockquote {
+  padding-inline-start: var(--spacing-3);
+  border-inline-start: 2px solid var(--color-border-strong);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-document hr {
+  margin-block: var(--crewlet-document-section-gap);
+  border: 0;
+  border-block-start: 1px solid var(--color-border-default);
+}
+
+/*
+ * A link in running prose keeps a permanent underline, through hover too:
+ * colour alone is not what says "link" (WCAG 1.4.1). The pointer is answered
+ * by the ink moving to the primary step.
+ */
+.crewlet-document a,
+.crewlet-document a:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.crewlet-document a {
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-document a:hover {
+  color: var(--color-text-primary);
+}
+
+.crewlet-document a:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-document img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-sm);
+}
+
+/*
+ * A TABLE WRITTEN FOR A DOCUMENT can be wider than the column it lands in, so
+ * the element a renderer wraps it in scrolls rather than the page. The table
+ * itself keeps its display, because a table set `display: block` loses its
+ * table semantics to more than one screen reader.
+ */
+.crewlet-document :where(div):has(> table) {
+  overflow-x: auto;
+}
+
+/* The scroller is a tab stop (see Document.tsx), so it draws the ring inside
+   its own box, where the table's edge would otherwise clip an outset one. */
+.crewlet-document :where(div):has(> table):focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-document table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-document--sm table {
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-document :where(th, td) {
+  padding: var(--spacing-1) var(--spacing-2);
+  border-block-end: 1px solid var(--color-border-default);
+  text-align: start;
+  vertical-align: top;
+}
+
+.crewlet-document th {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+}
+
+/*
+ * The title above a body. The largest step a reading screen spends, at the
+ * tight tracking every title on the ramp takes, and it wraps anywhere because
+ * a title is an address somebody typed and may hold no space at all.
+ */
+.crewlet-document-title {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+  letter-spacing: var(--font-letter-spacing-tight);
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}

package/dist/EntityChip/index.js

@@ -1,4 +1,4 @@
 export { EntityChip } from '../chunk-DDTDN5L2.js';
-import '../chunk-3UK4VFSK.js';
+import '../chunk-6NIZCQUM.js';
 import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Highlight/Highlight.d.ts

@@ -0,0 +1,45 @@
+import { type HTMLAttributes } from 'react';
+/** One marked stretch of a text, as `[start, end)` offsets into it. */
+export type HighlightRange = readonly [start: number, end: number];
+/**
+ * The words of a query a reader typed, as the terms a match is made of:
+ * folded to lower case, each one once, the longest first, and none shorter than
+ * two characters.
+ *
+ * A ONE LETTER TERM MARKS NOTHING. "a plan for q3" would otherwise mark every
+ * `a` in a snippet, and a page of yellow is a page with nothing marked.
+ *
+ * THE LONGEST FIRST, so where two terms start at the same place the mark covers
+ * the longer one: "settle" and "settlement" in one query mark "settlement"
+ * whole rather than its first six letters.
+ */
+export declare function highlightTerms(query: string): string[];
+/**
+ * Where `terms` start a word of `text`, as ranges in reading order.
+ *
+ * A TERM MATCHES THE START OF A WORD, never its middle: "cent" marks "cents"
+ * and "centre" but not "percent", because a search engine matches words, and a
+ * mark inside a word points at a match the engine never made.
+ *
+ * THE OFFSETS ARE THE TEXT'S OWN. The match is made by one case-insensitive
+ * Unicode pattern over the original string rather than over a lower-cased copy,
+ * because lower-casing can change a string's length ("İ" becomes two code
+ * units) and every offset after it would point one character off.
+ */
+export declare function highlightRanges(text: string, terms: readonly string[]): HighlightRange[];
+export interface HighlightProps extends HTMLAttributes<HTMLSpanElement> {
+    /** The text to draw. */
+    text: string;
+    /** What to mark, usually `highlightTerms(query)`. */
+    terms: readonly string[];
+}
+/**
+ * A line of text with the words a search matched marked in it: a result's
+ * title, its snippet, a passage of a page opened from a search.
+ *
+ * A `mark` ELEMENT, because a match is part of what the text says to a reader
+ * who came looking for it, and the element is what tells assistive technology
+ * so. The ink stays the text's own and the mark is a ground behind it, so a
+ * marked word reads at the same contrast as the words beside it.
+ */
+export declare function Highlight({ text, terms, className, ...rest }: HighlightProps): import("react").JSX.Element;

package/dist/Highlight/index.d.ts

@@ -0,0 +1,3 @@
+import './Highlight.css';
+export { Highlight, highlightRanges, highlightTerms } from './Highlight.js';
+export type { HighlightProps, HighlightRange } from './Highlight.js';

package/dist/Highlight/index.js

@@ -0,0 +1,2 @@
+export { Highlight, highlightRanges, highlightTerms } from '../chunk-H6VKCIWV.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Highlight-DXLV2R6L.css

@@ -0,0 +1,29 @@
+/*
+ * Words a search matched (Highlight.tsx).
+ */
+
+/*
+ * A GROUND, NEVER AN INK. The marked word keeps the ink of the text around it,
+ * so it reads at the contrast that text was measured at, and the accent's soft
+ * step behind it says "this is what you searched for" without making the word
+ * louder than its sentence. The accent is the one colour that means "where the
+ * reader is", and a match is exactly that: the reader's own question, found.
+ */
+.crewlet-highlight__match {
+  border-radius: var(--radius-xs);
+  background: var(--color-brand-accent-soft-strong);
+  color: inherit;
+}
+
+/*
+ * Forced colours replaces every author ground with the canvas, which would
+ * leave a match drawn exactly like the words beside it. The system's own pair
+ * for a mark is what that mode reserves for this job.
+ */
+@media (forced-colors: active) {
+  .crewlet-highlight__match {
+    forced-color-adjust: none;
+    background: Mark;
+    color: MarkText;
+  }
+}