@inkbar/svelte 0.9.0 → 0.11.0

package/dist/components/InkZoomSelect.svelte

@@ -59,7 +59,7 @@
      select-only combobox of the ARIA pattern, as Reka UI and Radix render it. -->
 <Select.Root type="single" {items} bind:value={() => value, onValueChange}>
   <Select.Trigger
-    class={['ink-zoom-select', 'ink-select-trigger', className]}
+    class={['ink-select', 'ink-select-trigger', 'ink-zoom-select', className]}
     data-ink-zoom-select=""
     role="combobox"
     aria-label="Zoom"

package/dist/components/RecordCards.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  /*
+   * A record list's markup on core's record list controller, shared by `InkRecordList` and
+   * `InkSearchResults`: `createRecordList`'s `div.ink-records` holding `ul.ink-record-list` with
+   * one `li.ink-record` card per row, the empty text and a polite live region. The controller
+   * holds the rows, the count and the announcement, and handles the clicks, keys, Tab stop,
+   * focus and scrolling. Empty, with no empty text, until there is a source.
+   */
+  import {
+    createRecordListController,
+    type RecordListController,
+    type RecordListRow,
+    type RecordListSource,
+  } from '@inkbar/core/dom'
+  import { untrack, type Snippet } from 'svelte'
+
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    source,
+    emptyShown = true,
+    empty,
+    oncount,
+    class: className,
+    ...rest
+  }: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    source: RecordListSource | null
+    /** Whether the empty text shows when there are no rows. Default true. */
+    emptyShown?: boolean | undefined
+    /** Replaces "Nothing here yet.". */
+    empty?: Snippet | undefined
+    /** Called with the number listed whenever it changes. */
+    oncount?: ((count: number) => void) | undefined
+  } = $props()
+
+  /** A focused action button whose row re-renders: where to put focus back if it goes. */
+  interface HeldFocus {
+    button: HTMLElement
+    id: string
+    index: number
+  }
+
+  const actionButtons = (row: Element): HTMLElement[] => [
+    ...row.querySelectorAll<HTMLElement>('.ink-card-actions > button'),
+  ]
+
+  let root = $state<HTMLDivElement | null>(null)
+  let controller = $state.raw<RecordListController | null>(null)
+  let rows = $state.raw<readonly RecordListRow[]>([])
+  let announcement = $state('')
+  const showEmpty = $derived(controller !== null && rows.length === 0 && emptyShown)
+
+  /** The count last reported, across sources. */
+  let reported: number | null = null
+  let held: HeldFocus | null = null
+
+  function report(count: number): void {
+    if (count === reported) return
+    reported = count
+    oncount?.(count)
+  }
+
+  /**
+   * Before the rows re-render under a focused action whose button goes (its card lost that
+   * action), note where it was; the effect below focuses the same place in the card, else the
+   * row. A row that goes is the controller's to re-home.
+   */
+  function holdActionFocus(el: HTMLElement): void {
+    const active = el.ownerDocument.activeElement
+    if (!(active instanceof HTMLButtonElement) || !el.contains(active)) return
+    const row = active.closest<HTMLElement>('[data-ink-record]')
+    const id = row?.dataset.inkRecord
+    if (!row || id === undefined) return
+    held = { button: active, id, index: actionButtons(row).indexOf(active) }
+  }
+
+  $effect(() => {
+    const el = root
+    const s = source
+    if (!el || !s) return
+    return untrack(() => {
+      const c = createRecordListController(s)
+      controller = c
+      rows = c.rows.get()
+      announcement = c.announcement.get()
+      report(c.count.get())
+      const stops = [
+        c.rows.subscribe((next) => {
+          holdActionFocus(el)
+          rows = next
+        }),
+        c.count.subscribe(report),
+        c.announcement.subscribe((text) => {
+          announcement = text
+        }),
+      ]
+      const detach = c.attach(el)
+      return () => {
+        for (const stop of stops) stop()
+        detach()
+        c.destroy()
+        controller = null
+        rows = []
+        announcement = ''
+      }
+    })
+  })
+
+  // After the rows have re-rendered.
+  $effect(() => {
+    void rows
+    const el = root
+    untrack(() => {
+      const focus = held
+      held = null
+      if (!focus || !el || focus.button.isConnected) return
+      const row = [...el.querySelectorAll<HTMLElement>('[data-ink-record]')].find(
+        (r) => r.dataset.inkRecord === focus.id
+      )
+      if (row) (actionButtons(row)[focus.index] ?? row).focus({ preventScroll: true })
+    })
+  })
+</script>
+
+<div
+  {...rest}
+  bind:this={root}
+  class={['ink-records', className]}
+  data-ink-records=""
+  tabindex="-1"
+>
+  <ul class="ink-record-list" role="list" hidden={rows.length === 0}>
+    <!-- The controller sets each row's tabindex. -->
+    {#each rows as { item, card, selected } (item.id)}
+      <li
+        class="ink-record"
+        data-ink-record={item.id}
+        aria-current={selected ? 'true' : undefined}
+        data-selected={selected ? '' : undefined}
+      >
+        <div class={['ink-card', card?.className]}>
+          {#if card}
+            <p class="ink-card-title">{card.title}</p>
+            {#if card.meta !== undefined}
+              <!-- prettier-ignore -->
+              <p class="ink-card-meta">{#if card.swatch !== undefined}<span class="ink-card-swatch" style:background={card.swatch}></span>{/if}{card.meta}</p>
+            {/if}
+            {#if card.body !== undefined}
+              <p class="ink-card-body">{card.body}</p>
+            {/if}
+            {#if card.excerpt !== undefined}
+              <!-- prettier-ignore -->
+              <p class="ink-card-excerpt">{card.excerpt.before}<mark>{card.excerpt.match}</mark>{card.excerpt.after}</p>
+            {/if}
+            <div class="ink-card-actions">
+              {#each Object.keys(card.actions) as label (label)}
+                <button type="button" onclick={() => controller?.act(item.id, label)}
+                  >{label}</button
+                >
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </li>
+    {/each}
+  </ul>
+  <p class="ink-record-list-empty" hidden={!showEmpty}>
+    {#if empty}{@render empty()}{:else}Nothing here yet.{/if}
+  </p>
+  <div class="ink-visually-hidden" aria-live="polite" data-ink-record-status="">
+    {announcement}
+  </div>
+</div>

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

@@ -0,0 +1,16 @@
+import { type RecordListSource } from '@inkbar/core/dom';
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    source: RecordListSource | null;
+    /** Whether the empty text shows when there are no rows. Default true. */
+    emptyShown?: boolean | undefined;
+    /** Replaces "Nothing here yet.". */
+    empty?: Snippet | undefined;
+    /** Called with the number listed whenever it changes. */
+    oncount?: ((count: number) => void) | undefined;
+};
+declare const RecordCards: import("svelte").Component<$$ComponentProps, {}, "">;
+type RecordCards = ReturnType<typeof RecordCards>;
+export default RecordCards;
+//# sourceMappingURL=RecordCards.svelte.d.ts.map

package/dist/components/RecordCards.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordCards.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/RecordCards.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,EAIH,KAAK,gBAAgB,EACtB,MAAM,kBAAkB,CAAA;AAC3B,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAA;AAE9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AASrD,KAAK,gBAAgB,GAAI,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACzE,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC3B,yDAAyD;IACzD,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CAChD,CAAC;AA2IJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/SidebarTrigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  /*
+   * A sidebar trigger's content: `createSidebar`'s markup, so the theme styles both alike. The
+   * rail shows the icon alone (the trigger's `title` carries the label); tabs and stack headers
+   * show the label too. The badge is hidden from assistive technology: the trigger's name has it.
+   */
+  import { sidebarBadge, type SidebarPanelInfo } from '@inkbar/core/dom'
+
+  import InkIcon from './InkIcon.svelte'
+
+  let { panel, rail }: { panel: SidebarPanelInfo; rail: boolean } = $props()
+
+  const badge = $derived(sidebarBadge(panel.badge))
+</script>
+
+{#if panel.icon}<InkIcon icon={panel.icon} />{/if}{#if !panel.icon || !rail}<span
+    class="ink-sidebar-label">{panel.label}</span
+  >{/if}<span class="ink-sidebar-badge" aria-hidden="true" hidden={badge === null}
+  >{badge}</span
+>

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

@@ -0,0 +1,9 @@
+import { type SidebarPanelInfo } from '@inkbar/core/dom';
+type $$ComponentProps = {
+    panel: SidebarPanelInfo;
+    rail: boolean;
+};
+declare const SidebarTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type SidebarTrigger = ReturnType<typeof SidebarTrigger>;
+export default SidebarTrigger;
+//# sourceMappingURL=SidebarTrigger.svelte.d.ts.map

package/dist/components/SidebarTrigger.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarTrigger.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/SidebarTrigger.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAIrE,KAAK,gBAAgB,GAAI;IAAE,KAAK,EAAE,gBAAgB,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAgBrE,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/sidebar-context.d.ts

@@ -0,0 +1,24 @@
+import type { ReadableRef } from '../use-readable.svelte.js';
+import type { SidebarController, SidebarPanelInfo, SidebarState } from '@inkbar/core/dom';
+/** A panel as `InkPanel` registers it. */
+export interface SidebarPanelEntry {
+    /** The panel's props; read inside an effect, so changes reach the sidebar. */
+    info(): SidebarPanelInfo;
+    /** The panel's element once mounted, to keep the panels in DOM order. */
+    element(): HTMLElement | null;
+}
+/** What `InkSidebar` gives its panels. */
+export interface SidebarContext {
+    controller: SidebarController;
+    /** The controller's state: read it to re-render when the attributes change. */
+    state: ReadableRef<SidebarState>;
+    /** Adds a panel at the end; returns the function that removes it. */
+    register(entry: SidebarPanelEntry): () => void;
+    /** Puts the registered panels in the order of their elements in the DOM. */
+    arrange(): void;
+}
+/** Called once by InkSidebar during its initialisation. */
+export declare function setSidebarContext(ctx: SidebarContext): void;
+/** The sidebar's context, or a readable error outside `InkSidebar`. */
+export declare function useSidebarContext(consumer: string): SidebarContext;
+//# sourceMappingURL=sidebar-context.d.ts.map

package/dist/components/sidebar-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-context.d.ts","sourceRoot":"","sources":["../../src/lib/components/sidebar-context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAEzF,0CAA0C;AAC1C,MAAM,WAAW,iBAAiB;IAChC,8EAA8E;IAC9E,IAAI,IAAI,gBAAgB,CAAA;IACxB,yEAAyE;IACzE,OAAO,IAAI,WAAW,GAAG,IAAI,CAAA;CAC9B;AAED,0CAA0C;AAC1C,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,iBAAiB,CAAA;IAC7B,+EAA+E;IAC/E,KAAK,EAAE,WAAW,CAAC,YAAY,CAAC,CAAA;IAChC,qEAAqE;IACrE,QAAQ,CAAC,KAAK,EAAE,iBAAiB,GAAG,MAAM,IAAI,CAAA;IAC9C,4EAA4E;IAC5E,OAAO,IAAI,IAAI,CAAA;CAChB;AAID,2DAA2D;AAC3D,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,cAAc,GAAG,IAAI,CAE3D;AAED,uEAAuE;AACvE,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,cAAc,CAIlE"}

package/dist/components/sidebar-context.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('inkbar-sidebar');
+/** Called once by InkSidebar during its initialisation. */
+export function setSidebarContext(ctx) {
+    setContext(KEY, ctx);
+}
+/** The sidebar's context, or a readable error outside `InkSidebar`. */
+export function useSidebarContext(consumer) {
+    const ctx = getContext(KEY);
+    if (!ctx)
+        throw new Error(`[inkbar] ${consumer} must be inside <InkSidebar>.`);
+    return ctx;
+}