@sukramj/fabric-ui 0.0.0-stage → 0.1.0

package/src/lib/kit/DataTable.svelte

@@ -0,0 +1,239 @@
+<!-- Ported from openccu-loom assets/ui/src/lib/components/ui/DataTable.svelte:1-469
+     at b40b289a: sortable headers, an optional search box, sort and search
+     persisted under persistKey, the phone reflow (table-reflow in
+     tokens.css), groupBy sections and activatable rows. The column filter
+     row, column groups and row expansion are left out; the node pages use
+     none of them. -->
+<script lang="ts" generics="Row">
+  import type { Snippet } from "svelte";
+  import type { IconName } from "./icons";
+  import type { DataColumn, DataTableSort } from "./data-table";
+  import { makeTextMatcher } from "./utils";
+  import { useT } from "../context";
+  import Input from "./Input.svelte";
+  import EmptyState from "./EmptyState.svelte";
+
+  let {
+    rows,
+    columns,
+    rowKey,
+    search = false,
+    searchPlaceholder = "",
+    initialSort = null,
+    persistKey = "",
+    emptyMessage,
+    emptyDescription = "",
+    emptyIcon = "mdi:format-list-bulleted",
+    cell,
+    rowClass,
+    onRowClick,
+    groupBy,
+    groupHeader,
+  }: {
+    rows: Row[];
+    columns: DataColumn<Row>[];
+    rowKey: (row: Row) => string;
+    search?: boolean;
+    searchPlaceholder?: string;
+    initialSort?: DataTableSort | null;
+    /** When set, sort and search persist under this localStorage key. */
+    persistKey?: string;
+    emptyMessage: string;
+    emptyDescription?: string;
+    emptyIcon?: IconName;
+    cell?: Snippet<[Row, DataColumn<Row>]>;
+    rowClass?: (row: Row) => string;
+    /** Makes every row activatable; a click inside a control stays the control's. */
+    onRowClick?: (row: Row) => void;
+    /** Splits the rows into sections, after search and sort, in first-row order. */
+    groupBy?: (row: Row) => string;
+    groupHeader?: Snippet<[string, Row[]]>;
+  } = $props();
+
+  const t = useT();
+
+  type Persisted = { sortKey: string; sortAsc: boolean; query: string };
+
+  // Read initialSort once; a persisted state wins.
+  function initialState(): Persisted {
+    let base: Persisted = { sortKey: initialSort?.key ?? "", sortAsc: initialSort?.asc ?? true, query: "" };
+    if (persistKey) {
+      try {
+        const raw = localStorage.getItem("fabric-ui.table:" + persistKey);
+        if (raw) base = { ...base, ...(JSON.parse(raw) as Partial<Persisted>) };
+      } catch {
+        // storage unavailable — the initial sort stands.
+      }
+    }
+    return base;
+  }
+
+  const init0 = initialState();
+  let sortKey = $state(init0.sortKey);
+  let sortAsc = $state(init0.sortAsc);
+  let query = $state(init0.query);
+
+  $effect(() => {
+    if (!persistKey) return;
+    const snapshot: Persisted = { sortKey, sortAsc, query };
+    try {
+      localStorage.setItem("fabric-ui.table:" + persistKey, JSON.stringify(snapshot));
+    } catch {
+      // storage unavailable — sort and search do not persist.
+    }
+  });
+
+  function toggleSort(col: DataColumn<Row>) {
+    if (!col.sortable) return;
+    if (sortKey === col.key) sortAsc = !sortAsc;
+    else {
+      sortKey = col.key;
+      sortAsc = true;
+    }
+  }
+
+  function alignClass(col: DataColumn<Row>): string {
+    const align = col.align ?? (col.numeric ? "right" : "left");
+    return align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
+  }
+
+  function rowClickHandler(row: Row) {
+    return (event: MouseEvent) => {
+      const target = event.target as HTMLElement | null;
+      if (target?.closest("button, a, input, select, textarea, label")) return;
+      onRowClick?.(row);
+    };
+  }
+
+  function rowKeyHandler(row: Row) {
+    return (event: KeyboardEvent) => {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      const target = event.target as HTMLElement | null;
+      if (target?.closest("button, a, input, select, textarea")) return;
+      event.preventDefault();
+      onRowClick?.(row);
+    };
+  }
+
+  function compare(a: unknown, b: unknown): number {
+    const an = a === null || a === undefined;
+    const bn = b === null || b === undefined;
+    if (an && bn) return 0;
+    if (an) return 1; // nulls last
+    if (bn) return -1;
+    if (typeof a === "number" && typeof b === "number") return a - b;
+    return String(a).localeCompare(String(b), undefined, { sensitivity: "base", numeric: true });
+  }
+
+  const processed = $derived.by(() => {
+    let list = rows;
+    if (search && query.trim()) {
+      const match = makeTextMatcher(query);
+      list = list.filter((r) =>
+        columns.some((c) => {
+          const v = c.get?.(r);
+          return v != null && match(String(v));
+        }),
+      );
+    }
+    const col = sortKey ? columns.find((c) => c.key === sortKey) : undefined;
+    if (col?.get) {
+      const get = col.get;
+      list = [...list].sort((a, b) => {
+        const cmp = compare(get(a), get(b));
+        return sortAsc ? cmp : -cmp;
+      });
+    }
+    return list;
+  });
+
+  const groups = $derived.by(() => {
+    if (!groupBy) return null;
+    const out = new Map<string, Row[]>();
+    for (const row of processed) {
+      const key = groupBy(row);
+      const bucket = out.get(key);
+      if (bucket) bucket.push(row);
+      else out.set(key, [row]);
+    }
+    return Array.from(out, ([key, rows]) => ({ key, rows }));
+  });
+
+  function ariaSort(col: DataColumn<Row>): "ascending" | "descending" | "none" {
+    if (!col.sortable || sortKey !== col.key) return "none";
+    return sortAsc ? "ascending" : "descending";
+  }
+</script>
+
+{#if search}
+  <div class="mb-3 max-w-md">
+    <Input type="search" placeholder={searchPlaceholder || t("common.search")} bind:value={query} />
+  </div>
+{/if}
+
+{#if processed.length === 0}
+  <EmptyState message={emptyMessage} description={emptyDescription} icon={emptyIcon} />
+{:else}
+  <div class="overflow-x-auto">
+    <table class="table-reflow w-full text-sm">
+      <thead class="border-b border-[var(--ha-divider-color)] text-left text-xs font-semibold uppercase tracking-wide text-[var(--ha-secondary-text-color)]">
+        <tr>
+          {#each columns as col (col.key)}
+            <th class="px-3 py-2 {alignClass(col)} {col.headClass ?? ''}" aria-sort={ariaSort(col)} scope="col">
+              {#if col.sortable}
+                <button
+                  type="button"
+                  class="inline-flex items-center gap-1 font-semibold uppercase tracking-wide hover:text-[var(--ha-primary-text-color)]"
+                  onclick={() => toggleSort(col)}
+                >
+                  <span>{col.label}</span>
+                  <span class="w-3 text-[10px]" aria-hidden="true">{sortKey === col.key ? (sortAsc ? "▲" : "▼") : ""}</span>
+                </button>
+              {:else}
+                {col.label}
+              {/if}
+            </th>
+          {/each}
+        </tr>
+      </thead>
+      {#snippet bodyRow(row: Row)}
+        <tr
+          class="border-b border-[var(--ha-divider-color)] last:border-0 hover:bg-[var(--ha-secondary-background-color)] {onRowClick ? 'cursor-pointer' : ''} {rowClass?.(row) ?? ''}"
+          tabindex={onRowClick ? 0 : undefined}
+          onclick={onRowClick ? rowClickHandler(row) : undefined}
+          onkeydown={onRowClick ? rowKeyHandler(row) : undefined}
+        >
+          {#each columns as col (col.key)}
+            <td
+              class="px-3 py-2 {alignClass(col)} {col.numeric ? 'tabular-nums' : ''} {col.title ? 'reflow-title' : ''} {col.cellClass ?? ''}"
+              data-label={col.label}
+            >
+              {#if cell}{@render cell(row, col)}{:else}{col.get?.(row) ?? "—"}{/if}
+            </td>
+          {/each}
+        </tr>
+      {/snippet}
+
+      {#if groups}
+        {#each groups as group (group.key)}
+          <tbody>
+            <tr class="border-b border-[var(--ha-divider-color)] bg-[var(--ha-secondary-background-color)]">
+              <th colspan={columns.length} scope="colgroup" class="px-3 py-2 text-left font-normal">
+                {#if groupHeader}{@render groupHeader(group.key, group.rows)}{:else}{group.key}{/if}
+              </th>
+            </tr>
+            {#each group.rows as row (rowKey(row))}
+              {@render bodyRow(row)}
+            {/each}
+          </tbody>
+        {/each}
+      {:else}
+        <tbody>
+          {#each processed as row (rowKey(row))}
+            {@render bodyRow(row)}
+          {/each}
+        </tbody>
+      {/if}
+    </table>
+  </div>
+{/if}

package/src/lib/kit/EmptyState.svelte

@@ -0,0 +1,24 @@
+<!-- Ported from openccu-loom assets/ui/src/lib/components/ui//EmptyState.svelte:1-46 at b40b289a. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { cn } from "./utils";
+  import Icon from "./Icon.svelte";
+  import type { IconName } from "./icons";
+
+  type Props = { message: string; description?: string; icon?: IconName; class?: string; action?: Snippet };
+
+  let { message, description, icon = "mdi:text-box-search-outline", class: className, action }: Props = $props();
+</script>
+
+<div class={cn("flex flex-col items-center justify-center gap-3 py-12 text-center", className)}>
+  <Icon name={icon} size={40} class="text-[var(--ha-disabled-text-color)]" aria-label="" />
+  <div class="flex flex-col items-center gap-1">
+    <p class="text-sm text-[var(--ha-secondary-text-color)]">{message}</p>
+    {#if description}
+      <p class="max-w-sm text-balance text-xs text-[var(--ha-disabled-text-color)]">{description}</p>
+    {/if}
+  </div>
+  {#if action}
+    {@render action()}
+  {/if}
+</div>

package/src/lib/kit/ErrorState.svelte

@@ -0,0 +1,22 @@
+<!-- Ported from openccu-loom assets/ui/src/lib/components/ui//ErrorState.svelte:1-36 at b40b289a. -->
+<script lang="ts">
+  import { useT } from "../context";
+  import { cn } from "./utils";
+  import Card from "./Card.svelte";
+  import Button from "./Button.svelte";
+  import Icon from "./Icon.svelte";
+
+  type Props = { message: string; onRetry?: () => void; class?: string };
+  let { message, onRetry, class: className }: Props = $props();
+  const t = useT();
+</script>
+
+<Card class={cn("flex items-start gap-3 p-3", className)}>
+  <Icon name="mdi:alert-circle" size={18} class="mt-0.5 shrink-0 text-[var(--ha-error-color)]" aria-label="" />
+  <div class="min-w-0 flex-1">
+    <p class="text-sm text-[var(--ha-error-color)]">{t("common.error")} {message}</p>
+    {#if onRetry}
+      <Button variant="outline" size="sm" class="mt-2" onclick={onRetry}>{t("common.reload")}</Button>
+    {/if}
+  </div>
+</Card>

package/src/lib/kit/Icon.svelte

@@ -0,0 +1,12 @@
+<!-- Ported from openccu-loom assets/ui/src/lib/components/ui//Icon.svelte:1-35 at b40b289a. -->
+<script lang="ts">
+  import { resolveIcon, type IconName } from "./icons";
+
+  type Props = { name: IconName; size?: number; class?: string; "aria-label"?: string; title?: string };
+
+  let { name, size = 18, class: className = "", "aria-label": ariaLabel, title }: Props = $props();
+
+  const Cmp = $derived(resolveIcon(name));
+</script>
+
+<Cmp {size} class={className} aria-label={ariaLabel} aria-hidden={ariaLabel ? undefined : "true"} {title} />

package/src/lib/kit/Input.svelte

@@ -0,0 +1,22 @@
+<!-- Ported from openccu-loom assets/ui/src/lib/components/ui//Input.svelte:1-24 at b40b289a. -->
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import { cn } from "./utils";
+
+  type Props = HTMLInputAttributes & { value?: string | number | null };
+
+  let { class: className, value = $bindable(), ...rest }: Props = $props();
+</script>
+
+<input
+  bind:value
+  class={cn(
+    // 16px on phones suppresses iOS Safari's focus zoom; h-10 is a 40px touch row.
+    "h-10 w-full rounded-md border border-[var(--ha-divider-color)] bg-[var(--ha-card-background-color)] px-3 py-1 text-base text-[var(--ha-primary-text-color)] shadow-sm transition sm:text-sm",
+    "placeholder:text-[var(--ha-secondary-text-color)]",
+    "focus-visible:border-[var(--ha-primary-color)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ha-primary-color)]",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    className,
+  )}
+  {...rest}
+/>

package/src/lib/kit/LoadingState.svelte

@@ -0,0 +1,15 @@
+<!-- Ported from openccu-loom assets/ui/src/lib/components/ui//LoadingState.svelte:1-30 at b40b289a. -->
+<script lang="ts">
+  import { useT } from "../context";
+  import { cn } from "./utils";
+  import Spinner from "./Spinner.svelte";
+
+  type Props = { label?: string; message?: string; class?: string };
+  let { label, message, class: className }: Props = $props();
+  const t = useT();
+</script>
+
+<div class={cn("flex items-center justify-center gap-2 py-8 text-sm text-[var(--ha-secondary-text-color)]", className)} role="status" aria-live="polite">
+  <Spinner size={18} />
+  <span>{label ?? message ?? t("common.loading")}</span>
+</div>

package/src/lib/kit/PageHeader.svelte

@@ -0,0 +1,32 @@
+<!-- Ported from openccu-loom assets/ui/src/lib/components/ui//PageHeader.svelte:1-72 at b40b289a: title and subtitle on the
+     left, actions on the right, wrapping by the rendered width (works inside
+     a narrow frame on a wide viewport). -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { cn } from "./utils";
+
+  interface Props {
+    title: string;
+    subtitle?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let { title, subtitle, actions, children, class: cls = "" }: Props = $props();
+</script>
+
+<header class={cn("mb-4 flex flex-wrap items-start justify-between gap-3", cls)}>
+  <div>
+    <h1 class="text-balance text-2xl font-bold tracking-tight text-[var(--ha-primary-text-color)]">{title}</h1>
+    {#if subtitle}
+      <p class="text-sm text-[var(--ha-secondary-text-color)]">{subtitle}</p>
+    {/if}
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+  {#if actions}
+    <div class="flex flex-wrap items-center gap-2">{@render actions()}</div>
+  {/if}
+</header>

package/src/lib/kit/PageShell.svelte

@@ -0,0 +1,16 @@
+<!-- Ported from openccu-loom assets/ui/src/lib/components/ui//PageShell.svelte:1-44 at b40b289a. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { cn } from "./utils";
+
+  type Width = "default" | "wide" | "narrow";
+  interface Props { width?: Width; class?: string; children: Snippet }
+
+  let { width = "default", class: cls = "", children }: Props = $props();
+
+  const widths: Record<Width, string> = { default: "max-w-6xl", wide: "", narrow: "max-w-4xl" };
+</script>
+
+<section class={cn("mx-auto w-full px-4 py-6 sm:px-6", widths[width], cls)}>
+  {@render children()}
+</section>

package/src/lib/kit/Select.svelte

@@ -0,0 +1,49 @@
+<!-- Ported from openccu-loom assets/ui/src/lib/components/ui//Select.svelte:1-80 at b40b289a, on a native <select>
+     instead of bits-ui: the same props and look, the platform's own popup
+     and keyboard handling, one dependency less. -->
+<script lang="ts">
+  import { useT } from "../context";
+  import { cn } from "./utils";
+
+  type Option = { value: string; label: string };
+  type Props = {
+    options: Option[];
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    onValueChange?: (value: string) => void;
+    ariaLabel?: string;
+    class?: string;
+  };
+
+  const t = useT();
+  let {
+    options,
+    value = $bindable(""),
+    placeholder = t("select.placeholder"),
+    disabled = false,
+    onValueChange,
+    ariaLabel,
+    class: className,
+  }: Props = $props();
+</script>
+
+<select
+  bind:value
+  {disabled}
+  aria-label={ariaLabel}
+  onchange={(e) => onValueChange?.((e.currentTarget as HTMLSelectElement).value)}
+  class={cn(
+    "h-10 w-full rounded-md border border-[var(--ha-divider-color)] bg-[var(--ha-card-background-color)] px-3 py-1 text-base text-[var(--ha-primary-text-color)] shadow-sm sm:text-sm",
+    "focus-visible:border-[var(--ha-primary-color)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ha-primary-color)]",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    className,
+  )}
+>
+  {#if !options.some((o) => o.value === value)}
+    <option value="" disabled>{placeholder}</option>
+  {/if}
+  {#each options as option (option.value)}
+    <option value={option.value}>{option.label}</option>
+  {/each}
+</select>

package/src/lib/kit/Spinner.svelte

@@ -0,0 +1,59 @@
+<!-- Ported from openccu-loom assets/ui/src/lib/components/ui//Spinner.svelte:1-100 at b40b289a: three threads with a
+     sweeping segment; decorative, collapses to a static mark under reduced
+     motion. -->
+<script lang="ts">
+  import { cn } from "./utils";
+
+  type Props = { size?: number; class?: string };
+  let { size = 18, class: className }: Props = $props();
+</script>
+
+<span class={cn("fui-loader text-[var(--ha-secondary-text-color)]", className)} style="--fui-size:{size}px" aria-hidden="true">
+  <span class="fui-thread"></span>
+  <span class="fui-thread"></span>
+  <span class="fui-thread"></span>
+</span>
+
+<style>
+  .fui-loader {
+    display: inline-block;
+    position: relative;
+    width: calc(var(--fui-size) * 1.5);
+    height: var(--fui-size);
+    flex: none;
+  }
+  .fui-thread {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: max(1.5px, calc(var(--fui-size) / 9));
+    border-radius: 9999px;
+    background-color: currentColor;
+    opacity: 0.25;
+    overflow: hidden;
+  }
+  .fui-thread:nth-child(1) { top: 12%; }
+  .fui-thread:nth-child(2) { top: 44%; }
+  .fui-thread:nth-child(3) { top: 76%; }
+  .fui-thread::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 40%;
+    border-radius: inherit;
+    background-color: currentColor;
+    opacity: 0.9;
+    animation: fui-sweep 1.1s ease-in-out infinite;
+  }
+  .fui-thread:nth-child(2)::after { animation-delay: 0.16s; }
+  .fui-thread:nth-child(3)::after { animation-delay: 0.32s; }
+  @keyframes fui-sweep {
+    0% { transform: translateX(-110%); }
+    55%, 100% { transform: translateX(360%); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fui-thread { opacity: 0.5; }
+    .fui-thread::after { animation: none; opacity: 0; }
+  }
+</style>

package/src/lib/kit/Tabs.svelte

@@ -0,0 +1,63 @@
+<!-- Ported from openccu-loom assets/ui/src/lib/components/ui//Tabs.svelte:1-107 at b40b289a: the underline and segmented
+     weights; the active marker uses the primary token so the skin applies. -->
+<script lang="ts">
+  import type { TabItem } from "./tabs";
+  import { cn } from "./utils";
+  import Badge from "./Badge.svelte";
+  import Icon from "./Icon.svelte";
+
+  interface Props {
+    items: TabItem[];
+    active: string;
+    variant?: "underline" | "segmented";
+    fill?: boolean;
+    ariaLabel?: string;
+    onSelect?: (key: string) => void;
+    class?: string;
+  }
+
+  let { items, active, variant = "underline", fill = false, ariaLabel, onSelect, class: cls = "" }: Props = $props();
+
+  const listClass = $derived(
+    variant === "underline"
+      ? cn("flex gap-1 overflow-x-auto border-b border-[var(--ha-divider-color)]", cls)
+      : cn("inline-flex flex-wrap gap-0.5 rounded-lg bg-[var(--ha-secondary-background-color)] p-0.5", cls),
+  );
+
+  function itemClass(isActive: boolean): string {
+    if (variant === "underline") {
+      return cn(
+        "-mb-px inline-flex items-center justify-center gap-2 whitespace-nowrap border-b-2 px-4 py-3 text-center text-sm font-medium transition",
+        fill && "flex-1",
+        isActive
+          ? "border-[var(--ha-primary-color)] text-[var(--ha-primary-color)]"
+          : "border-transparent text-[var(--ha-secondary-text-color)] hover:text-[var(--ha-primary-text-color)]",
+      );
+    }
+    return cn(
+      "rounded-md px-3 py-1.5 text-sm font-medium transition",
+      isActive
+        ? "bg-[var(--ha-card-background-color)] text-[var(--ha-primary-text-color)] shadow-sm"
+        : "text-[var(--ha-secondary-text-color)] hover:text-[var(--ha-primary-text-color)]",
+    );
+  }
+</script>
+
+<div class={listClass} role="tablist" aria-label={ariaLabel}>
+  {#each items as item (item.key)}
+    {@const isActive = item.key === active}
+    {#if item.href}
+      <a href={item.href} role="tab" aria-selected={isActive} class={itemClass(isActive)} onclick={() => onSelect?.(item.key)}>
+        {#if item.icon}<Icon name={item.icon} size={16} />{/if}
+        {item.label}
+        {#if item.badge !== undefined}<Badge variant="muted">{item.badge}</Badge>{/if}
+      </a>
+    {:else}
+      <button type="button" role="tab" aria-selected={isActive} class={itemClass(isActive)} onclick={() => onSelect?.(item.key)}>
+        {#if item.icon}<Icon name={item.icon} size={16} />{/if}
+        {item.label}
+        {#if item.badge !== undefined}<Badge variant="muted">{item.badge}</Badge>{/if}
+      </button>
+    {/if}
+  {/each}
+</div>

package/src/lib/kit/data-table.ts

@@ -0,0 +1,24 @@
+// The column descriptor of DataTable.svelte. Ported from openccu-loom
+// assets/ui/src/lib/components/ui/data-table.ts:1-55 at b40b289a, without
+// the per-column filter row and column groups the node pages do not use.
+
+export type DataTableAlign = "left" | "right" | "center";
+
+export type DataColumn<Row> = {
+  /** Stable key: sort state, the cell's data-label, the cell snippet's branch. */
+  key: string;
+  /** Header label. */
+  label: string;
+  align?: DataTableAlign;
+  sortable?: boolean;
+  /** Scalar accessor for sorting, the default text and the search. */
+  get?: (row: Row) => string | number | null | undefined;
+  /** The primary column: on the phone reflow it is the card heading. */
+  title?: boolean;
+  cellClass?: string;
+  headClass?: string;
+  /** Tabular figures, right-aligned unless align says otherwise. */
+  numeric?: boolean;
+};
+
+export type DataTableSort = { key: string; asc: boolean };

package/src/lib/kit/icons.ts

@@ -0,0 +1,41 @@
+// The icon registry: Home Assistant's mdi-style names mapped onto Lucide
+// components, so a template names an icon once. Ported from openccu-loom
+// assets/ui/src/lib/icons.ts:1-20, :205-300 and resolveIcon at b40b289a,
+// reduced to the icons the node pages use.
+import type { Component } from "svelte";
+import Ban from "@lucide/svelte/icons/ban";
+import Circle from "@lucide/svelte/icons/circle";
+import CircleAlert from "@lucide/svelte/icons/circle-alert";
+import CircleCheck from "@lucide/svelte/icons/circle-check";
+import Info from "@lucide/svelte/icons/info";
+import LinkIcon from "@lucide/svelte/icons/link";
+import List from "@lucide/svelte/icons/list";
+import ListChecks from "@lucide/svelte/icons/list-checks";
+
+export type IconName =
+  | "mdi:alert-circle"
+  | "mdi:cancel"
+  | "mdi:check-circle"
+  | "mdi:circle-outline"
+  | "mdi:format-list-bulleted"
+  | "mdi:information-outline"
+  | "mdi:link"
+  | "mdi:list-checks"
+  | "mdi:text-box-search-outline";
+
+const REGISTRY: Record<IconName, Component> = {
+  "mdi:alert-circle": CircleAlert as unknown as Component,
+  "mdi:cancel": Ban as unknown as Component,
+  "mdi:check-circle": CircleCheck as unknown as Component,
+  "mdi:circle-outline": Circle as unknown as Component,
+  "mdi:format-list-bulleted": List as unknown as Component,
+  "mdi:information-outline": Info as unknown as Component,
+  "mdi:link": LinkIcon as unknown as Component,
+  "mdi:list-checks": ListChecks as unknown as Component,
+  "mdi:text-box-search-outline": List as unknown as Component,
+};
+
+/** The component for an icon name; an unknown name renders the info icon. */
+export function resolveIcon(name: IconName): Component {
+  return REGISTRY[name] ?? (Info as unknown as Component);
+}

package/src/lib/kit/index.ts

@@ -0,0 +1,21 @@
+// The UI kit: the components the node pages are built from, for a host
+// that wants its own pages to look the same.
+export { default as Badge } from "./Badge.svelte";
+export { default as Button } from "./Button.svelte";
+export { default as Card } from "./Card.svelte";
+export { default as DataTable } from "./DataTable.svelte";
+export { default as EmptyState } from "./EmptyState.svelte";
+export { default as ErrorState } from "./ErrorState.svelte";
+export { default as Icon } from "./Icon.svelte";
+export { default as Input } from "./Input.svelte";
+export { default as LoadingState } from "./LoadingState.svelte";
+export { default as PageHeader } from "./PageHeader.svelte";
+export { default as PageShell } from "./PageShell.svelte";
+export { default as Select } from "./Select.svelte";
+export { default as Spinner } from "./Spinner.svelte";
+export { default as Tabs } from "./Tabs.svelte";
+export type { DataColumn, DataTableAlign, DataTableSort } from "./data-table";
+export type { TabItem } from "./tabs";
+export type { IconName } from "./icons";
+export { resolveIcon } from "./icons";
+export { cn, makeTextMatcher } from "./utils";

package/src/lib/kit/tabs.ts

@@ -0,0 +1,13 @@
+// The tab descriptor of Tabs.svelte. Ported from openccu-loom
+// assets/ui/src/lib/components/ui/tabs.ts:1-19 at b40b289a.
+import type { IconName } from "./icons";
+
+export type TabItem = {
+  /** Compared against the strip's `active`. */
+  key: string;
+  label: string;
+  /** A link for route-driven tabs; without it the tab is a button reporting through onSelect. */
+  href?: string;
+  icon?: IconName;
+  badge?: string | number;
+};