@viniaraujo68/plinth 0.3.1 → 0.5.0

package/dist/components/Paginator.svelte

@@ -1,3 +1,23 @@
+<script lang="ts" module>
+  export interface PaginatorLabels {
+    navigation: string;
+    previous: string;
+    next: string;
+    page: (page: number) => string;
+    pageSize: string;
+    summary: (first: number, last: number, total: number) => string;
+  }
+
+  export const DEFAULT_PAGINATOR_LABELS: PaginatorLabels = {
+    navigation: "Pagination",
+    previous: "Previous page",
+    next: "Next page",
+    page: (page) => `Page ${page}`,
+    pageSize: "Items per page",
+    summary: (first, last, total) => `Showing ${first} to ${last} of ${total} items`,
+  };
+</script>
+
 <script lang="ts">
   import type { ClassValue } from "svelte/elements";
 
@@ -32,6 +52,7 @@
      * and the reset back to page 1, since a new size invalidates the old page arithmetic.
      */
     onPageSizeChange?: (size: number) => void;
+    labels?: Partial<PaginatorLabels>;
   } & (CountedPages | UncountedPages);
 
   let {
@@ -44,8 +65,11 @@
     totalPages,
     totalItems,
     hasNextPage,
+    labels,
   }: Props = $props();
 
+  const text = $derived({ ...DEFAULT_PAGINATOR_LABELS, ...labels });
+
   const range = (start: number, end: number): number[] =>
     Array.from({ length: Math.max(0, end - start + 1) }, (_, i) => start + i);
 
@@ -123,7 +147,7 @@ that means. Sizing is in `em`, so the whole strip scales with the font size arou
     class="btn h-[1.75em] min-w-[1.75em] px-2 tabular-nums btn-primary aria-[current=false]:btn-ghost"
     onclick={() => setPage(page)}
     aria-current={page === pageNumber}
-    aria-label={`Page ${page}`}
+    aria-label={text.page(page)}
   >
     {page}
   </button>
@@ -133,7 +157,7 @@ that means. Sizing is in `em`, so the whole strip scales with the font size arou
   <button
     type="button"
     class="btn size-[1.75em] btn-ghost px-1"
-    aria-label="Previous page"
+    aria-label={text.previous}
     disabled={pageNumber <= 1}
     onclick={() => setPage(pageNumber - 1)}
   >
@@ -153,7 +177,7 @@ that means. Sizing is in `em`, so the whole strip scales with the font size arou
   <button
     type="button"
     class="btn size-[1.75em] btn-ghost px-1"
-    aria-label="Next page"
+    aria-label={text.next}
     disabled={!canGoNext}
     onclick={() => setPage(pageNumber + 1)}
   >
@@ -162,19 +186,19 @@ that means. Sizing is in `em`, so the whole strip scales with the font size arou
 {/snippet}
 
 {#if totalItems === undefined || pageSize === undefined}
-  <nav class={["flex place-content-center gap-px", cls]} aria-label="Pagination">
+  <nav class={["flex place-content-center gap-px", cls]} aria-label={text.navigation}>
     {@render pageSelector()}
   </nav>
 {:else}
-  <nav class={["@container", cls]} aria-label="Pagination">
+  <nav class={["@container", cls]} aria-label={text.navigation}>
     <div class="grid items-center justify-items-center gap-1 @min-[45rem]:grid-cols-3">
       <!-- Narrow, the summary and the size picker fall below the buttons: the control the user
            came for stays at the top of the block rather than being pushed off by chrome. -->
       <div class="flex items-center gap-1 @max-[45rem]:order-last @min-[45rem]:mr-auto">
-        <span class="text-nowrap">Items per page:</span>
+        <span class="text-nowrap">{text.pageSize}:</span>
         <select
           class="select box-content w-[3ch] select-xs"
-          aria-label="Items per page"
+          aria-label={text.pageSize}
           value={pageSize}
           onchange={({ currentTarget }) => onPageSizeChange?.(Number(currentTarget.value))}
         >
@@ -185,7 +209,9 @@ that means. Sizing is in `em`, so the whole strip scales with the font size arou
       </div>
 
       <div class="text-center tabular-nums" data-testid="paginator-summary">
-        Showing {firstShown} to {lastShown} of {totalItems} items
+        {#if firstShown !== undefined && lastShown !== undefined}
+          {text.summary(firstShown, lastShown, totalItems)}
+        {/if}
       </div>
 
       <div class="flex items-center gap-px @max-[45rem]:order-first @min-[45rem]:ml-auto">

package/dist/components/Paginator.svelte.d.ts

@@ -1,3 +1,12 @@
+export interface PaginatorLabels {
+    navigation: string;
+    previous: string;
+    next: string;
+    page: (page: number) => string;
+    pageSize: string;
+    summary: (first: number, last: number, total: number) => string;
+}
+export declare const DEFAULT_PAGINATOR_LABELS: PaginatorLabels;
 import type { ClassValue } from "svelte/elements";
 /** The server answered with a count: the last page is reachable and the summary is exact. */
 interface CountedPages {
@@ -28,6 +37,7 @@ type Props = {
      * and the reset back to page 1, since a new size invalidates the old page arithmetic.
      */
     onPageSizeChange?: (size: number) => void;
+    labels?: Partial<PaginatorLabels>;
 } & (CountedPages | UncountedPages);
 /**
  * Page selector for a list, in two flavours picked by which props are passed: `totalPages`

package/dist/components/RequestErrorDisplay.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { classifyError } from "../http.js";
+  import ErrorDisplay from "./ErrorDisplay.svelte";
+  import {
+    DEFAULT_REQUEST_ERROR_COPY,
+    REQUEST_ERROR_ICONS,
+    type RequestErrorLabels,
+  } from "./request-error.js";
+
+  interface Props {
+    error: unknown;
+    reset?: () => void;
+    labels?: RequestErrorLabels;
+    eyebrow?: string;
+    retryLabel?: string;
+  }
+
+  let { error, reset, labels, eyebrow = "Error", retryLabel = "Try again" }: Props = $props();
+
+  const kind = $derived(classifyError(error));
+  const copy = $derived({ ...DEFAULT_REQUEST_ERROR_COPY[kind], ...labels?.[kind] });
+</script>
+
+<div class="contents" data-kind={kind}>
+  <ErrorDisplay {reset} title={copy.title} message={copy.message} {eyebrow} {retryLabel}>
+    {#snippet icon()}
+      <svg
+        class="size-12 text-base-content/40"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        {#each REQUEST_ERROR_ICONS[kind] as d (d)}
+          <path {d} />
+        {/each}
+      </svg>
+    {/snippet}
+  </ErrorDisplay>
+</div>

package/dist/components/RequestErrorDisplay.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type RequestErrorLabels } from "./request-error.js";
+interface Props {
+    error: unknown;
+    reset?: () => void;
+    labels?: RequestErrorLabels;
+    eyebrow?: string;
+    retryLabel?: string;
+}
+declare const RequestErrorDisplay: import("svelte").Component<Props, {}, "">;
+type RequestErrorDisplay = ReturnType<typeof RequestErrorDisplay>;
+export default RequestErrorDisplay;

package/dist/components/Tabs.svelte

@@ -0,0 +1,204 @@
+<script lang="ts" generics="Id extends string">
+  import { tick } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+  import type { TabItem } from "./tabs.js";
+
+  interface Props {
+    /** The tabs, in the order they are shown. `id` is the value, so it has to be unique. */
+    tabs: readonly TabItem<Id>[];
+    /** The selected tab's `id`. Bindable, and also reported through {@link Props.onchange}. */
+    value: Id;
+    /** Accessible name of the tab list. A prop because the library ships no translations. */
+    label: string;
+    /**
+     * The `id` of the panel the tabs drive. One panel whose content changes with the selection,
+     * which is how a page with a tab per section is usually built; leave it out when there is no
+     * single panel to point at.
+     */
+    controls?: string;
+    /**
+     * Prefix of each tab's element id: the tab for `ranking` is `${idPrefix}-ranking`, which is
+     * what the panel's `aria-labelledby` points at. Unique per instance by default; pass one when
+     * the panel has to name its tab.
+     */
+    idPrefix?: string;
+    /** Centres the tabs while they fit. Once they overflow they scroll from the first one. */
+    center?: boolean;
+    /** Classes for the wrapper — spacing, mostly. */
+    class?: ClassValue;
+    /** Called with the new `id` only when it actually changes; re-picking the current tab is silent. */
+    onchange?: (id: Id) => void;
+  }
+
+  const uid = $props.id();
+
+  let {
+    tabs,
+    value = $bindable(),
+    label,
+    controls,
+    idPrefix = uid,
+    center = false,
+    class: className,
+    onchange,
+  }: Props = $props();
+
+  const tabId = (id: Id) => `${idPrefix}-${id}`;
+
+  const select = (id: Id) => {
+    if (id === value) return;
+    value = id;
+    onchange?.(id);
+  };
+
+  const STEPS: Record<string, (from: number, count: number) => number> = {
+    ArrowRight: (from, count) => (from + 1) % count,
+    ArrowLeft: (from, count) => (from - 1 + count) % count,
+    Home: () => 0,
+    End: (_, count) => count - 1,
+  };
+
+  const onkeydown = async (event: KeyboardEvent) => {
+    const step = STEPS[event.key];
+    if (!step || tabs.length === 0) return;
+    event.preventDefault();
+    const from = Math.max(
+      tabs.findIndex((tab) => tab.id === value),
+      0,
+    );
+    const id = tabs[step(from, tabs.length)].id;
+    select(id);
+    // Selection follows focus, and a caller that keeps the selection in the URL navigates on
+    // `onchange` — which leaves the focus wherever it was. Walk it to the tab that is now selected.
+    await tick();
+    document.getElementById(tabId(id))?.focus();
+  };
+
+  let strip = $state<HTMLElement>();
+  let overflowing = $state(false);
+
+  const measure = () => {
+    if (!strip) return;
+    overflowing = strip.scrollWidth - strip.clientWidth - strip.scrollLeft > 4;
+  };
+
+  $effect(() => {
+    // Re-measured whenever the labels change — a language switch can push the last tab out.
+    void tabs.map((tab) => tab.label);
+    measure();
+  });
+</script>
+
+<!--
+@component
+A row of tabs that switches what one panel shows: a real `tablist` with a roving tabindex, so Tab
+lands on the selected tab and the arrow keys, Home and End move the selection along the row. The
+selection follows focus, the pattern for panels that are cheap to show.
+
+On a narrow screen the row scrolls sideways instead of wrapping, and while tabs are hidden past the
+right edge it fades out there — at phone width, the fade is the only hint that a fifth tab exists.
+
+The selection is the caller's: bind `value`, or pass it in and act on `onchange` — a page that
+keeps its tab in the URL navigates there, and the tab moves when the URL does.
+
+```svelte
+<Tabs
+  bind:value={tab}
+  label="Sections"
+  controls="panel"
+  idPrefix="tab"
+  tabs={[
+    { id: "overview", label: "Overview" },
+    { id: "settings", label: "Settings" },
+  ]}
+/>
+<div id="panel" role="tabpanel" aria-labelledby="tab-{tab}">…</div>
+```
+-->
+<div class={["plinth-tabs", className]} class:fade={overflowing}>
+  <div
+    class="plinth-tabs-strip tabs tabs-border"
+    class:center
+    role="tablist"
+    aria-label={label}
+    bind:this={strip}
+    onscroll={measure}
+  >
+    {#each tabs as tab (tab.id)}
+      <button
+        type="button"
+        class="tab"
+        role="tab"
+        id={tabId(tab.id)}
+        aria-selected={tab.id === value}
+        aria-controls={controls}
+        tabindex={tab.id === value ? 0 : -1}
+        onclick={() => select(tab.id)}
+        {onkeydown}
+      >
+        {tab.label}
+      </button>
+    {/each}
+  </div>
+</div>
+
+<svelte:window onresize={measure} />
+
+<style>
+  .plinth-tabs {
+    position: relative;
+  }
+
+  /* `display` stated here rather than left to daisyUI's `.tabs`: the one-row layout is what the
+     overflow and the fade are built on, so it cannot depend on a class the app might restyle. */
+  .plinth-tabs-strip {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .plinth-tabs-strip::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* `safe` keeps the first tab reachable once the row overflows; plain `center` would push it off
+     the left edge, where no scroll can reach. The first declaration is the fallback. */
+  .plinth-tabs-strip.center {
+    justify-content: center;
+    justify-content: safe center;
+  }
+
+  /* A mask rather than a gradient laid over the strip, so it fades into whatever surface the tabs
+     sit on. Only while something is actually hidden past the edge. */
+  .plinth-tabs.fade .plinth-tabs-strip {
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent);
+    mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent);
+  }
+
+  .tab {
+    flex: 0 0 auto;
+    min-height: 2.75rem;
+    white-space: nowrap;
+  }
+
+  /* Inside a horizontal scroller an outset ring is clipped; drawn inside, it shows whole. */
+  .tab:focus-visible {
+    outline-offset: -2px;
+  }
+
+  .tab[aria-selected="true"] {
+    color: var(--color-base-content);
+    font-weight: 600;
+  }
+
+  .tab:not([aria-selected="true"]) {
+    color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
+  }
+
+  .tab:not([aria-selected="true"]):hover {
+    color: var(--color-base-content);
+  }
+</style>

package/dist/components/Tabs.svelte.d.ts

@@ -0,0 +1,76 @@
+import type { ClassValue } from "svelte/elements";
+import type { TabItem } from "./tabs.js";
+declare function $$render<Id extends string>(): {
+    props: {
+        /** The tabs, in the order they are shown. `id` is the value, so it has to be unique. */
+        tabs: readonly TabItem<Id>[];
+        /** The selected tab's `id`. Bindable, and also reported through {@link Props.onchange}. */
+        value: Id;
+        /** Accessible name of the tab list. A prop because the library ships no translations. */
+        label: string;
+        /**
+         * The `id` of the panel the tabs drive. One panel whose content changes with the selection,
+         * which is how a page with a tab per section is usually built; leave it out when there is no
+         * single panel to point at.
+         */
+        controls?: string;
+        /**
+         * Prefix of each tab's element id: the tab for `ranking` is `${idPrefix}-ranking`, which is
+         * what the panel's `aria-labelledby` points at. Unique per instance by default; pass one when
+         * the panel has to name its tab.
+         */
+        idPrefix?: string;
+        /** Centres the tabs while they fit. Once they overflow they scroll from the first one. */
+        center?: boolean;
+        /** Classes for the wrapper — spacing, mostly. */
+        class?: ClassValue;
+        /** Called with the new `id` only when it actually changes; re-picking the current tab is silent. */
+        onchange?: (id: Id) => void;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Id extends string> {
+    props(): ReturnType<typeof $$render<Id>>['props'];
+    events(): ReturnType<typeof $$render<Id>>['events'];
+    slots(): ReturnType<typeof $$render<Id>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Id extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Id>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Id>['props']>, ReturnType<__sveltets_Render<Id>['events']>, ReturnType<__sveltets_Render<Id>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Id>['bindings']>;
+    } & ReturnType<__sveltets_Render<Id>['exports']>;
+    <Id extends string>(internal: unknown, props: ReturnType<__sveltets_Render<Id>['props']> & {}): ReturnType<__sveltets_Render<Id>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A row of tabs that switches what one panel shows: a real `tablist` with a roving tabindex, so Tab
+ * lands on the selected tab and the arrow keys, Home and End move the selection along the row. The
+ * selection follows focus, the pattern for panels that are cheap to show.
+ *
+ * On a narrow screen the row scrolls sideways instead of wrapping, and while tabs are hidden past the
+ * right edge it fades out there — at phone width, the fade is the only hint that a fifth tab exists.
+ *
+ * The selection is the caller's: bind `value`, or pass it in and act on `onchange` — a page that
+ * keeps its tab in the URL navigates there, and the tab moves when the URL does.
+ *
+ * ```svelte
+ * <Tabs
+ * bind:value={tab}
+ * label="Sections"
+ * controls="panel"
+ * idPrefix="tab"
+ * tabs={[
+ *   { id: "overview", label: "Overview" },
+ *   { id: "settings", label: "Settings" },
+ * ]}
+ * />
+ * <div id="panel" role="tabpanel" aria-labelledby="tab-{tab}">…</div>
+ * ```
+ */
+declare const Tabs: $$IsomorphicComponent;
+type Tabs<Id extends string> = InstanceType<typeof Tabs<Id>>;
+export default Tabs;

package/dist/components/VirtualJsonView.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import VirtualList from "../virtual/VirtualList.svelte";
+  import JsonViewFrame, {
+    type JsonViewProps,
+    type JsonViewRevealTarget,
+  } from "./JsonViewFrame.svelte";
+
+  const props: JsonViewProps = $props();
+
+  let list = $state<ReturnType<typeof VirtualList>>();
+  let host = $state<HTMLDivElement>();
+  let probe = $state<HTMLSpanElement>();
+
+  const reveal = ({ visibleIndex, columnCh }: JsonViewRevealTarget) => {
+    list?.scrollToIndex(visibleIndex, "center");
+    const scroller = host?.querySelector<HTMLElement>(".plinth-virtual");
+    const ch = probe?.getBoundingClientRect().width ?? 0;
+    if (!scroller || ch === 0) return;
+    const target = columnCh * ch;
+    const start = scroller.scrollLeft;
+    const end = start + scroller.clientWidth;
+    if (target < start + ch * 4 || target > end - ch * 4)
+      scroller.scrollLeft = Math.max(0, target - scroller.clientWidth / 2);
+  };
+</script>
+
+<JsonViewFrame {...props} {reveal}>
+  {#snippet viewport({ visible, line, rowId, rowHeight, widthCh })}
+    <div bind:this={host} class="plinth-json-virtual">
+      <span bind:this={probe} class="plinth-json-probe" aria-hidden="true"></span>
+      <VirtualList
+        bind:this={list}
+        class="plinth-json-virtual-list"
+        count={visible.length}
+        itemSize={rowHeight}
+        getItemKey={(index) => rowId(visible[index])}
+        crossSize="max(100%, {widthCh + 1}ch)"
+      >
+        {#snippet item(index)}
+          {@render line(visible[index])}
+        {/snippet}
+      </VirtualList>
+    </div>
+  {/snippet}
+</JsonViewFrame>
+
+<style>
+  .plinth-json-virtual {
+    position: relative;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .plinth-json-probe {
+    position: absolute;
+    width: 1ch;
+    height: 0;
+    visibility: hidden;
+  }
+
+  :global(.plinth-json-virtual-list) {
+    flex: 1;
+    min-height: 0;
+  }
+</style>

package/dist/components/VirtualJsonView.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type JsonViewProps } from "./JsonViewFrame.svelte";
+declare const VirtualJsonView: import("svelte").Component<JsonViewProps, {}, "">;
+type VirtualJsonView = ReturnType<typeof VirtualJsonView>;
+export default VirtualJsonView;

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 { 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,21 +8,25 @@ 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
@@ -36,3 +40,5 @@ export { buildRange, CUSTOM_PRESET_ID, DEFAULT_PRESETS, isoToLocalInput, localIn
 // 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;