@viniaraujo68/plinth 0.3.1 → 0.6.0

package/dist/components/date-range.js

@@ -14,9 +14,16 @@ export const DEFAULT_PRESETS = [
     { id: "7d", label: "7d", durationMs: 7 * DAY_MS },
     { id: "30d", label: "30d", durationMs: 30 * DAY_MS },
 ];
-/** Builds the window a preset names, ending at `now`. */
-export const buildRange = (preset, now = Date.now()) => {
+const pad = (value, length = 2) => String(value).padStart(length, "0");
+/** A local calendar day as `YYYY-MM-DD`, the value an `<input type="date">` holds. */
+export const toDay = (date) => `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+/** Builds the window a preset names as of `now`, in the picker's `mode`. */
+export const buildRange = (preset, now = Date.now(), mode = "datetime") => {
     const end = now instanceof Date ? now.getTime() : now;
+    if (preset.range)
+        return preset.range(new Date(end));
+    if (mode === "date")
+        return { from: toDay(new Date(end - preset.durationMs)), to: toDay(new Date(end)) };
     return { from: new Date(end - preset.durationMs).toISOString(), to: new Date(end).toISOString() };
 };
 /**
@@ -27,12 +34,87 @@ export const buildRange = (preset, now = Date.now()) => {
  * range is never re-anchored" a property of the data rather than of the timer's wiring: even a
  * tick that somehow fired while the user was in custom mode would have nothing to emit.
  */
-export const anchorSelection = (selection, presets, now = Date.now()) => {
+export const anchorSelection = (selection, presets, now = Date.now(), mode = "datetime") => {
     if (selection === CUSTOM_PRESET_ID)
         return null;
     const preset = presets.find(({ id }) => id === selection);
-    return preset ? buildRange(preset, now) : null;
+    return preset ? buildRange(preset, now, mode) : null;
+};
+/**
+ * The selection a picker handed `value` (and no `preset`) should open on: the preset whose window
+ * right now is exactly that pair, or {@link CUSTOM_PRESET_ID}. A page that remounts its picker —
+ * one per tab, say — gets its "Last month" button back instead of a custom pair spelling it out.
+ *
+ * A duration preset in `"datetime"` mode only matches to the millisecond, so in practice a seeded
+ * instant pair still opens as custom, as it always did.
+ */
+export const selectionFor = (value, presets, now = Date.now(), mode = "datetime") => {
+    const match = presets.find((preset) => {
+        const range = buildRange(preset, now, mode);
+        return range.from === value.from && range.to === value.to;
+    });
+    return match?.id ?? CUSTOM_PRESET_ID;
 };
+/**
+ * Whether a pair of days is in order. An empty end leaves that side open, so it can never put the
+ * pair out of order.
+ */
+export const isValidDayRange = (from, to) => !from || !to || from <= to;
+const DAY_PATTERN = /^([1-9]\d{3})-(\d{2})-(\d{2})$/;
+/**
+ * Reads an `<input type="date">` value back: the day itself, `""` for an empty field — no bound on
+ * that side — or `null` for anything that is not yet a real day.
+ *
+ * A year below 1000 counts as not yet a day. Chrome reports a value on every digit of the year as
+ * it is typed — `0002-03-01`, `0020-03-01`, `0202-03-01` — and each of those would otherwise be
+ * emitted, and fetched, on the way to `2026`.
+ */
+export const parseDay = (value) => {
+    if (!value)
+        return "";
+    const match = DAY_PATTERN.exec(value);
+    if (!match)
+        return null;
+    const [, year, month, day] = match;
+    const date = new Date(Number(year), Number(month) - 1, Number(day));
+    return date.getMonth() === Number(month) - 1 && date.getDate() === Number(day) ? value : null;
+};
+/** `now` moved back `months` calendar months, kept on its day or the last one the month has. */
+const monthsBefore = (now, months) => {
+    const month = now.getMonth() - months;
+    const lastDay = new Date(now.getFullYear(), month + 1, 0).getDate();
+    return new Date(now.getFullYear(), month, Math.min(now.getDate(), lastDay));
+};
+/** "This month", for `"date"` mode: from the 1st, open at the end. */
+export const thisMonth = (label, id = "this-month") => ({
+    id,
+    label,
+    range: (now) => ({ from: toDay(new Date(now.getFullYear(), now.getMonth(), 1)), to: "" }),
+});
+/** "Last month", for `"date"` mode: its first day to its last. */
+export const lastMonth = (label, id = "last-month") => ({
+    id,
+    label,
+    range: (now) => ({
+        from: toDay(new Date(now.getFullYear(), now.getMonth() - 1, 1)),
+        to: toDay(new Date(now.getFullYear(), now.getMonth(), 0)),
+    }),
+});
+/**
+ * The last `months` months, for `"date"` mode: from the same day that many months ago — or the
+ * last day that month has — open at the end.
+ */
+export const lastMonths = (months, label, id = `last-${months}-months`) => ({
+    id,
+    label,
+    range: (now) => ({ from: toDay(monthsBefore(now, months)), to: "" }),
+});
+/** "All time", for `"date"` mode: both ends open. */
+export const allTime = (label, id = "all-time") => ({
+    id,
+    label,
+    range: () => ({ from: "", to: "" }),
+});
 /** Whether the pair is in order. An empty end is not a range, so it is not valid either. */
 export const isValidRange = (from, to) => {
     if (from === null || to === null)
@@ -41,7 +123,6 @@ export const isValidRange = (from, to) => {
     const end = Date.parse(to);
     return !Number.isNaN(start) && !Number.isNaN(end) && start <= end;
 };
-const pad = (value, length = 2) => String(value).padStart(length, "0");
 const LOCAL_INPUT_PATTERN = /^(\d{4,6})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?$/;
 /**
  * Formats a UTC instant for the `value` of an `<input type="datetime-local">`, whose contents are

package/dist/components/index.d.ts

@@ -8,19 +8,26 @@ export { default as Dropdown } from "./Dropdown.svelte";
 export { default as ErrorDisplay } from "./ErrorDisplay.svelte";
 export { default as ErrorPage } from "./ErrorPage.svelte";
 export { default as JsonInput } from "./JsonInput.svelte";
+export { default as JsonView } from "./JsonView.svelte";
+export { default as VirtualJsonView } from "./VirtualJsonView.svelte";
 export { default as Listbox } from "./Listbox.svelte";
 export { default as LoadingButton } from "./LoadingButton.svelte";
 export { default as Logo } from "./Logo.svelte";
 export { default as Modal } from "./Modal.svelte";
 export { default as MultiSelect } from "./MultiSelect.svelte";
-export { default as Paginator } from "./Paginator.svelte";
+export { default as Paginator, DEFAULT_PAGINATOR_LABELS, type PaginatorLabels, } from "./Paginator.svelte";
 export { default as RefreshButton } from "./RefreshButton.svelte";
+export { default as RequestErrorDisplay } from "./RequestErrorDisplay.svelte";
 export { default as SegmentedControl } from "./SegmentedControl.svelte";
 export { default as Select } from "./Select.svelte";
 export { default as Skeleton } from "./Skeleton.svelte";
+export { default as Tabs } from "./Tabs.svelte";
 export { default as Tooltip } from "./Tooltip.svelte";
 export { PICK_CLIP_PATH, PICK_PATH } from "./pick.js";
-export { buildRange, CUSTOM_PRESET_ID, DEFAULT_PRESETS, isoToLocalInput, localInputToIso, type DateRange, type DateRangePreset, } from "./date-range.js";
+export { allTime, buildRange, CUSTOM_PRESET_ID, DEFAULT_PRESETS, isoToLocalInput, lastMonth, lastMonths, localInputToIso, thisMonth, toDay, type CalendarPreset, type DateRange, type DateRangeMode, type DateRangePreset, type DurationPreset, } from "./date-range.js";
 export { matchesSelectQuery, normalizeForSearch, type SelectOption } from "./select.js";
 export { formatJsonText, parseJsonText, type JsonTextOptions, type JsonTextResult, } from "./json-text.js";
+export { DEFAULT_JSON_VIEW_LABELS, type JsonViewLabels } from "./json-view.js";
+export { DEFAULT_REQUEST_ERROR_COPY, type RequestErrorCopy, type RequestErrorLabels, } from "./request-error.js";
 export type { SegmentedOption } from "./segmented.js";
+export type { TabItem } from "./tabs.js";

package/dist/components/index.js

@@ -8,31 +8,37 @@ export { default as Dropdown } from "./Dropdown.svelte";
 export { default as ErrorDisplay } from "./ErrorDisplay.svelte";
 export { default as ErrorPage } from "./ErrorPage.svelte";
 export { default as JsonInput } from "./JsonInput.svelte";
+export { default as JsonView } from "./JsonView.svelte";
+export { default as VirtualJsonView } from "./VirtualJsonView.svelte";
 export { default as Listbox } from "./Listbox.svelte";
 export { default as LoadingButton } from "./LoadingButton.svelte";
 export { default as Logo } from "./Logo.svelte";
 export { default as Modal } from "./Modal.svelte";
 export { default as MultiSelect } from "./MultiSelect.svelte";
-export { default as Paginator } from "./Paginator.svelte";
+export { default as Paginator, DEFAULT_PAGINATOR_LABELS, } from "./Paginator.svelte";
 export { default as RefreshButton } from "./RefreshButton.svelte";
+export { default as RequestErrorDisplay } from "./RequestErrorDisplay.svelte";
 export { default as SegmentedControl } from "./SegmentedControl.svelte";
 export { default as Select } from "./Select.svelte";
 export { default as Skeleton } from "./Skeleton.svelte";
+export { default as Tabs } from "./Tabs.svelte";
 export { default as Tooltip } from "./Tooltip.svelte";
-// The mark's outline as data. `Logo` and the shell's avatar already read it from here, and an app
-// that wants the same silhouette -- a placeholder cut to the pick, an avatar of its own -- has no
-// other way to get it than copying the curve out of the library, which is how two versions of one
-// shape start existing.
+// The mark's outline as data. `Logo` already reads it from here, and an app that wants the same
+// silhouette -- a placeholder cut to the pick, a mark of its own -- has no other way to get it than
+// copying the curve out of the library, which is how two versions of one shape start existing.
+// Not for avatars: a profile picture cut to anything but a disc reads as a badge.
 export { PICK_CLIP_PATH, PICK_PATH } from "./pick.js";
-// The half of `date-range.js` a consumer of the picker has a use for: the two prop types, the
-// preset list and the reserved id they are written against, and the three conversions anyone
-// pairing their own field with a `DateRange` has to repeat otherwise. The rest -- the selection
+// The half of `date-range.js` a consumer of the picker has a use for: the prop types, the preset
+// list, the calendar preset builders and the reserved id they are written against, and the
+// conversions anyone pairing their own field with a `DateRange` has to repeat otherwise. The rest -- the selection
 // anchor, the pair validator and the re-anchor clock -- is how the picker drives itself, and the
 // picker never emits a pair that would fail the validator.
-export { buildRange, CUSTOM_PRESET_ID, DEFAULT_PRESETS, isoToLocalInput, localInputToIso, } from "./date-range.js";
+export { allTime, buildRange, CUSTOM_PRESET_ID, DEFAULT_PRESETS, isoToLocalInput, lastMonth, lastMonths, localInputToIso, thisMonth, toDay, } from "./date-range.js";
 // The half of `select.ts` a consumer has a use for: the option type every caller of either
 // control has to name, and the default matcher, so widening the search -- matching the value too,
 // a synonym list -- can compose with the accent folding instead of reimplementing it. The
 // highlight walk stays private: it is how the two components drive themselves.
 export { matchesSelectQuery, normalizeForSearch } from "./select.js";
 export { formatJsonText, parseJsonText, } from "./json-text.js";
+export { DEFAULT_JSON_VIEW_LABELS } from "./json-view.js";
+export { DEFAULT_REQUEST_ERROR_COPY, } from "./request-error.js";

package/dist/components/json-view.d.ts

@@ -0,0 +1,70 @@
+export type JsonLineKind = "open" | "close" | "value";
+export type JsonTokenType = "string" | "number" | "boolean" | "null" | "circular";
+export interface JsonLine {
+    kind: JsonLineKind;
+    pointer: string;
+    id: string;
+    depth: number;
+    parent: number;
+    end: number;
+    name: string | null;
+    text: string;
+    type: JsonTokenType | null;
+    size: number;
+    comma: boolean;
+    source: unknown;
+}
+export interface JsonFlattenOptions {
+    circular?: string;
+}
+export interface JsonMatch {
+    line: number;
+    field: "name" | "value";
+    start: number;
+    length: number;
+}
+export interface JsonMatchSegment {
+    text: string;
+    start: number;
+    match: boolean;
+}
+export interface JsonPoint {
+    line: number;
+    column: number;
+}
+export interface JsonViewLabels {
+    region: string;
+    search: string;
+    searchField: string;
+    previousMatch: string;
+    nextMatch: string;
+    closeSearch: string;
+    matchCount: (current: number, total: number) => string;
+    noMatches: string;
+    expandAll: string;
+    collapseAll: string;
+    copy: string;
+    copied: string;
+    expand: string;
+    collapse: string;
+    items: (count: number) => string;
+    circular: string;
+    empty: string;
+}
+export declare const DEFAULT_JSON_VIEW_LABELS: JsonViewLabels;
+export declare const JSON_VIEW_GUTTER_CH = 2;
+export declare const JSON_VIEW_INDENT_CH = 2;
+export declare const flattenJson: (value: unknown, options?: JsonFlattenOptions) => JsonLine[];
+export declare const isFoldable: (line: JsonLine) => boolean;
+export declare const isFolded: (line: JsonLine, collapsed: ReadonlySet<string>) => boolean;
+export declare const visibleLines: (lines: readonly JsonLine[], collapsed: ReadonlySet<string>) => number[];
+export declare const ancestorLines: (lines: readonly JsonLine[], index: number) => number[];
+export declare const searchJson: (lines: readonly JsonLine[], query: string) => JsonMatch[];
+export declare const matchSegments: (text: string, query: string) => JsonMatchSegment[];
+export declare const subtreeHasMatch: (matches: readonly JsonMatch[], open: number, end: number) => boolean;
+export declare const lineWidthCh: (line: JsonLine) => number;
+export declare const maxLineWidthCh: (lines: readonly JsonLine[]) => number;
+export declare const matchColumnCh: (line: JsonLine, match: JsonMatch) => number;
+export declare const lineText: (line: JsonLine) => string;
+export declare const copyJson: (lines: readonly JsonLine[], collapsed: ReadonlySet<string>, from: JsonPoint, to: JsonPoint) => string;
+export declare const copyAllJson: (lines: readonly JsonLine[]) => string;

package/dist/components/json-view.js

@@ -0,0 +1,302 @@
+export const DEFAULT_JSON_VIEW_LABELS = {
+    region: "JSON viewer",
+    search: "Search",
+    searchField: "Search keys and values",
+    previousMatch: "Previous match",
+    nextMatch: "Next match",
+    closeSearch: "Close search",
+    matchCount: (current, total) => `${current} of ${total}`,
+    noMatches: "No matches",
+    expandAll: "Expand all",
+    collapseAll: "Collapse all",
+    copy: "Copy JSON",
+    copied: "Copied",
+    expand: "Expand",
+    collapse: "Collapse",
+    items: (count) => (count === 1 ? "1 item" : `${count} items`),
+    circular: "[Circular]",
+    empty: "Nothing to show",
+};
+export const JSON_VIEW_GUTTER_CH = 2;
+export const JSON_VIEW_INDENT_CH = 2;
+const SKIPPED = Symbol("skipped");
+const escapePointerSegment = (segment) => segment.replace(/~/g, "~0").replace(/\//g, "~1");
+const unbox = (value) => {
+    if (value instanceof Number)
+        return Number(value);
+    if (value instanceof String)
+        return String(value);
+    if (value instanceof Boolean || value instanceof BigInt)
+        return value.valueOf();
+    return value;
+};
+const resolveForJson = (raw, key) => {
+    let value = raw;
+    if ((typeof value === "object" && value !== null) || typeof value === "bigint") {
+        const toJSON = value.toJSON;
+        if (typeof toJSON === "function")
+            value = toJSON.call(value, key);
+    }
+    value = unbox(value);
+    if (value === undefined || typeof value === "function" || typeof value === "symbol")
+        return SKIPPED;
+    return value;
+};
+const isContainer = (value) => typeof value === "object" && value !== null;
+const closingBracket = (open) => (open === "[" ? "]" : "}");
+const primitiveToken = (value) => {
+    if (value === null)
+        return { text: "null", type: "null" };
+    if (typeof value === "string")
+        return { text: JSON.stringify(value), type: "string" };
+    if (typeof value === "boolean")
+        return { text: String(value), type: "boolean" };
+    if (typeof value === "bigint")
+        return { text: value.toString(), type: "number" };
+    if (typeof value === "number")
+        return Number.isFinite(value)
+            ? { text: JSON.stringify(value), type: "number" }
+            : { text: "null", type: "null" };
+    return { text: "null", type: "null" };
+};
+export const flattenJson = (value, options = {}) => {
+    const circular = options.circular ?? DEFAULT_JSON_VIEW_LABELS.circular;
+    const lines = [];
+    const ancestors = new Set();
+    const childrenOf = (container) => {
+        if (Array.isArray(container)) {
+            const items = container;
+            return Array.from({ length: items.length }, (_, index) => {
+                const segment = String(index);
+                const resolved = resolveForJson(items[index], segment);
+                return { segment, raw: items[index], value: resolved === SKIPPED ? null : resolved };
+            });
+        }
+        const record = container;
+        return Object.keys(record)
+            .map((segment) => ({
+            segment,
+            raw: record[segment],
+            value: resolveForJson(record[segment], segment),
+        }))
+            .filter((child) => child.value !== SKIPPED);
+    };
+    const visit = (raw, node, pointer, name, depth, parent, comma) => {
+        const index = lines.length;
+        if (!isContainer(node)) {
+            const { text, type } = primitiveToken(node);
+            lines.push({
+                kind: "value",
+                pointer,
+                id: pointer,
+                depth,
+                parent,
+                end: index + 1,
+                name,
+                text,
+                type,
+                size: 0,
+                comma,
+                source: raw,
+            });
+            return;
+        }
+        if (ancestors.has(node)) {
+            lines.push({
+                kind: "value",
+                pointer,
+                id: pointer,
+                depth,
+                parent,
+                end: index + 1,
+                name,
+                text: circular,
+                type: "circular",
+                size: 0,
+                comma,
+                source: raw,
+            });
+            return;
+        }
+        const isArray = Array.isArray(node);
+        const bracket = isArray ? "[" : "{";
+        const children = childrenOf(node);
+        const open = {
+            kind: "open",
+            pointer,
+            id: pointer,
+            depth,
+            parent,
+            end: index + 1,
+            name,
+            text: bracket,
+            type: null,
+            size: children.length,
+            comma,
+            source: raw,
+        };
+        lines.push(open);
+        if (children.length === 0)
+            return;
+        ancestors.add(node);
+        children.forEach((child, position) => {
+            visit(child.raw, child.value, `${pointer}/${escapePointerSegment(child.segment)}`, isArray ? null : JSON.stringify(child.segment), depth + 1, index, position < children.length - 1);
+        });
+        ancestors.delete(node);
+        lines.push({
+            kind: "close",
+            pointer,
+            id: `~${pointer}`,
+            depth,
+            parent: index,
+            end: lines.length + 1,
+            name: null,
+            text: closingBracket(bracket),
+            type: null,
+            size: 0,
+            comma,
+            source: raw,
+        });
+        open.end = lines.length;
+    };
+    const root = resolveForJson(value, "");
+    if (root !== SKIPPED)
+        visit(value, root, "", null, 0, -1, false);
+    return lines;
+};
+export const isFoldable = (line) => line.kind === "open" && line.size > 0;
+export const isFolded = (line, collapsed) => isFoldable(line) && collapsed.has(line.pointer);
+export const visibleLines = (lines, collapsed) => {
+    const visible = [];
+    let index = 0;
+    while (index < lines.length) {
+        visible.push(index);
+        const line = lines[index];
+        index = isFolded(line, collapsed) ? line.end : index + 1;
+    }
+    return visible;
+};
+export const ancestorLines = (lines, index) => {
+    const chain = [];
+    for (let parent = lines[index].parent; parent !== -1; parent = lines[parent].parent)
+        chain.push(parent);
+    return chain;
+};
+const foldCase = (text) => {
+    const lower = text.toLowerCase();
+    if (lower.length === text.length)
+        return lower;
+    let folded = "";
+    for (const character of text) {
+        const candidate = character.toLowerCase();
+        folded += candidate.length === character.length ? candidate : character;
+    }
+    return folded;
+};
+const occurrences = (text, needle) => {
+    const haystack = foldCase(text);
+    const starts = [];
+    for (let start = haystack.indexOf(needle); start !== -1; start = haystack.indexOf(needle, start + needle.length))
+        starts.push(start);
+    return starts;
+};
+export const searchJson = (lines, query) => {
+    if (query === "")
+        return [];
+    const needle = foldCase(query);
+    const matches = [];
+    lines.forEach((line, index) => {
+        if (line.name !== null)
+            for (const start of occurrences(line.name, needle))
+                matches.push({ line: index, field: "name", start, length: query.length });
+        if (line.kind === "value")
+            for (const start of occurrences(line.text, needle))
+                matches.push({ line: index, field: "value", start, length: query.length });
+    });
+    return matches;
+};
+export const matchSegments = (text, query) => {
+    if (query === "")
+        return [{ text, start: 0, match: false }];
+    const segments = [];
+    let cursor = 0;
+    for (const start of occurrences(text, foldCase(query))) {
+        if (start > cursor)
+            segments.push({ text: text.slice(cursor, start), start: cursor, match: false });
+        segments.push({ text: text.slice(start, start + query.length), start, match: true });
+        cursor = start + query.length;
+    }
+    if (cursor < text.length || segments.length === 0)
+        segments.push({ text: text.slice(cursor), start: cursor, match: false });
+    return segments;
+};
+export const subtreeHasMatch = (matches, open, end) => {
+    let low = 0;
+    let high = matches.length;
+    while (low < high) {
+        const middle = (low + high) >> 1;
+        if (matches[middle].line <= open)
+            low = middle + 1;
+        else
+            high = middle;
+    }
+    return low < matches.length && matches[low].line < end;
+};
+const nameWidth = (line) => (line.name === null ? 0 : line.name.length + 2);
+const leadWidth = (line) => JSON_VIEW_GUTTER_CH + line.depth * JSON_VIEW_INDENT_CH + nameWidth(line);
+export const lineWidthCh = (line) => {
+    const comma = line.comma ? 1 : 0;
+    if (line.kind === "value" || line.kind === "close")
+        return leadWidth(line) + line.text.length + comma;
+    if (line.size === 0)
+        return leadWidth(line) + 2 + comma;
+    return leadWidth(line) + 3 + comma + 1 + String(line.size).length;
+};
+export const maxLineWidthCh = (lines) => {
+    let widest = 0;
+    for (const line of lines)
+        widest = Math.max(widest, lineWidthCh(line));
+    return widest;
+};
+export const matchColumnCh = (line, match) => JSON_VIEW_GUTTER_CH +
+    line.depth * JSON_VIEW_INDENT_CH +
+    (match.field === "name" ? match.start : nameWidth(line) + match.start);
+export const lineText = (line) => {
+    const lead = line.name === null ? "" : `${line.name}: `;
+    const comma = line.comma ? "," : "";
+    if (line.kind === "value")
+        return lead + line.text + comma;
+    if (line.kind === "close")
+        return line.text + comma;
+    if (line.size === 0)
+        return lead + line.text + closingBracket(line.text) + comma;
+    return lead + line.text;
+};
+const NOTHING_COLLAPSED = new Set();
+const comparePoints = (a, b) => a.line === b.line ? a.column - b.column : a.line - b.line;
+export const copyJson = (lines, collapsed, from, to) => {
+    if (lines.length === 0)
+        return "";
+    const clamp = (point) => ({
+        line: Math.min(Math.max(point.line, 0), lines.length - 1),
+        column: Math.max(point.column, 0),
+    });
+    let [start, end] = comparePoints(from, to) <= 0 ? [from, to] : [to, from];
+    start = clamp(start);
+    end = clamp(end);
+    const startLine = lines[start.line];
+    if (isFolded(startLine, collapsed))
+        start = { line: start.line, column: Math.min(start.column, lineText(startLine).length) };
+    const endLine = lines[end.line];
+    if (isFolded(endLine, collapsed) && end.column > lineText(endLine).length)
+        end = { line: endLine.end - 1, column: Number.POSITIVE_INFINITY };
+    if (start.line === end.line)
+        return lineText(lines[start.line]).slice(start.column, end.column);
+    const parts = [lineText(startLine).slice(start.column)];
+    for (let index = start.line + 1; index < end.line; index += 1)
+        parts.push(" ".repeat(lines[index].depth * 2) + lineText(lines[index]));
+    const last = lines[end.line];
+    parts.push(end.column === 0 ? "" : " ".repeat(last.depth * 2) + lineText(last).slice(0, end.column));
+    return parts.join("\n");
+};
+export const copyAllJson = (lines) => copyJson(lines, NOTHING_COLLAPSED, { line: 0, column: 0 }, { line: lines.length - 1, column: Number.POSITIVE_INFINITY });

package/dist/components/request-error.d.ts

@@ -0,0 +1,8 @@
+import type { RequestErrorKind } from "../http.js";
+export interface RequestErrorCopy {
+    title: string;
+    message: string;
+}
+export type RequestErrorLabels = Partial<Record<RequestErrorKind, Partial<RequestErrorCopy>>>;
+export declare const DEFAULT_REQUEST_ERROR_COPY: Record<RequestErrorKind, RequestErrorCopy>;
+export declare const REQUEST_ERROR_ICONS: Record<RequestErrorKind, string[]>;

package/dist/components/request-error.js

@@ -0,0 +1,55 @@
+export const DEFAULT_REQUEST_ERROR_COPY = {
+    offline: {
+        title: "Connection problem",
+        message: "The request never reached the server. Check your connection and try again.",
+    },
+    unauthorized: {
+        title: "Sign-in required",
+        message: "Your session may have expired. Sign in again to continue.",
+    },
+    forbidden: {
+        title: "Access denied",
+        message: "You do not have permission to see this.",
+    },
+    "not-found": {
+        title: "Not found",
+        message: "What you asked for does not exist, or has moved.",
+    },
+    server: {
+        title: "Server error",
+        message: "The server ran into a problem. Try again in a moment.",
+    },
+    unknown: {
+        title: "Something went wrong",
+        message: "The application ran into an unexpected problem.",
+    },
+};
+export const REQUEST_ERROR_ICONS = {
+    offline: [
+        "M12 20h.01",
+        "M8.5 16.4a5 5 0 0 1 7 0",
+        "M5 12.9a10 10 0 0 1 5.2-2.7",
+        "M16.9 11.3a10 10 0 0 1 2.2 1.6",
+        "M2 8.8a15 15 0 0 1 4.2-2.6",
+        "M10.7 5a15 15 0 0 1 11.3 3.8",
+        "m2 2 20 20",
+    ],
+    unauthorized: [
+        "M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2",
+        "M7 11V7a5 5 0 0 1 10 0v4",
+    ],
+    forbidden: ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20", "m4.9 4.9 14.2 14.2"],
+    "not-found": ["M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16", "m21 21-4.3-4.3", "M8.5 11h5"],
+    server: [
+        "M6 10H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2",
+        "M6 14H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-2",
+        "M6 6h.01",
+        "M6 18h.01",
+        "m13 6-4 6h6l-4 6",
+    ],
+    unknown: [
+        "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+        "M12 9v4",
+        "M12 17h.01",
+    ],
+};

package/dist/components/tabs.d.ts

@@ -0,0 +1,5 @@
+/** One tab of a `Tabs` row. `id` is the value the row reports. */
+export interface TabItem<Id extends string = string> {
+    id: Id;
+    label: string;
+}

package/dist/components/tabs.js

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

package/dist/http.d.ts

@@ -32,12 +32,15 @@ export interface HttpClientOptions {
     auth?: AuthTokenSource;
     parseError?: ErrorMessageParser;
 }
+export interface RequestOptions {
+    signal?: AbortSignal;
+}
 export interface HttpClient {
-    get: <T = unknown>(path: string) => Promise<T>;
-    post: <T = unknown>(path: string, body?: unknown) => Promise<T>;
-    put: <T = unknown>(path: string, body?: unknown) => Promise<T>;
-    patch: <T = unknown>(path: string, body?: unknown) => Promise<T>;
-    del: <T = unknown>(path: string) => Promise<T>;
+    get: <T = unknown>(path: string, options?: RequestOptions) => Promise<T>;
+    post: <T = unknown>(path: string, body?: unknown, options?: RequestOptions) => Promise<T>;
+    put: <T = unknown>(path: string, body?: unknown, options?: RequestOptions) => Promise<T>;
+    patch: <T = unknown>(path: string, body?: unknown, options?: RequestOptions) => Promise<T>;
+    del: <T = unknown>(path: string, options?: RequestOptions) => Promise<T>;
 }
 /**
  * Build a client bound to one API.
@@ -66,3 +69,5 @@ export declare const errorMessage: (error: unknown) => string;
  * caller special-case 403 or 404 without an `instanceof` dance.
  */
 export declare const errorStatus: (error: unknown) => number;
+export type RequestErrorKind = "offline" | "unauthorized" | "forbidden" | "not-found" | "server" | "unknown";
+export declare const classifyError: (error: unknown, online?: boolean | undefined) => RequestErrorKind;