@sukramj/fabric-ui 0.0.0-stage → 0.1.0

package/src/lib/api/stream.ts

@@ -0,0 +1,54 @@
+// The event stream helper: GET /node/stream as typed callbacks. A host with
+// a hub of its own feeds it from here (see ui/README.md).
+import type { ExposureEvent, FabricEvent, WindowEvent } from "./client";
+
+/** The event types of the stream, as the contract names them. */
+export const STREAM_EVENTS = [
+  "fabric_added",
+  "fabric_removed",
+  "window_opened",
+  "window_closed",
+  "endpoints_changed",
+  "exposure_changed",
+] as const;
+
+export type StreamEventType = (typeof STREAM_EVENTS)[number];
+
+export type StreamEvent =
+  | { type: "fabric_added" | "fabric_removed"; data: FabricEvent }
+  | { type: "window_opened" | "window_closed"; data: WindowEvent }
+  | { type: "endpoints_changed"; data: Record<string, never> }
+  | { type: "exposure_changed"; data: ExposureEvent };
+
+/** The part of EventSource the helper uses, so a test can hand in a fake. */
+export interface EventSourceLike {
+  addEventListener(type: string, fn: (ev: MessageEvent) => void): void;
+  close(): void;
+}
+
+export type EventSourceFactory = (url: string) => EventSourceLike;
+
+/**
+ * Subscribes to the stream at `url` and calls `onEvent` for every event;
+ * an event whose data is not JSON is skipped. The browser's EventSource
+ * reconnects on its own. Returns the close function.
+ */
+export function subscribeStream(
+  url: string,
+  onEvent: (ev: StreamEvent) => void,
+  open: EventSourceFactory = (u) => new EventSource(u, { withCredentials: true }),
+): () => void {
+  const es = open(url);
+  for (const type of STREAM_EVENTS) {
+    es.addEventListener(type, (msg: MessageEvent) => {
+      let data: unknown;
+      try {
+        data = JSON.parse(String(msg.data));
+      } catch {
+        return;
+      }
+      onEvent({ type, data } as StreamEvent);
+    });
+  }
+  return () => es.close();
+}

package/src/lib/context.ts

@@ -0,0 +1,96 @@
+// The fabric-ui context: what every page reads — the client, the host's
+// translator, toast and confirm, the node store and the links between the
+// pages. A host provides it once above the pages (provideFabricUI); the
+// standalone shell provides its own.
+import { getContext, hasContext, setContext } from "svelte";
+import type { FabricClient } from "./api/client";
+import { defaultT, type Translate } from "./i18n";
+import { createNodeStore, type NodeStore, type NodeStoreDeps, type Toast } from "./store.svelte";
+
+export type { Toast } from "./store.svelte";
+
+export interface ConfirmOptions {
+  title: string;
+  body?: string;
+  destructive?: boolean;
+  confirmLabel?: string;
+}
+
+export type Confirm = (opts: ConfirmOptions) => Promise<boolean>;
+
+/** The hrefs the pages link each other with; a host maps them onto its router. */
+export interface Routes {
+  status: string;
+  pair: string;
+  fabrics: string;
+  selection: string;
+  endpoints: string;
+  diagnostics: string;
+}
+
+export const defaultRoutes: Routes = {
+  status: "#/node/status",
+  pair: "#/node/pair",
+  fabrics: "#/node/fabrics",
+  selection: "#/node/selection",
+  endpoints: "#/node/endpoints",
+  diagnostics: "#/node/diagnostics",
+};
+
+export interface FabricUI {
+  client: FabricClient;
+  t: Translate;
+  toast: Toast;
+  confirm: Confirm;
+  node: NodeStore;
+  routes: Routes;
+}
+
+export interface FabricUIOptions {
+  client: FabricClient;
+  t?: Translate;
+  toast?: Toast;
+  confirm?: Confirm;
+  routes?: Partial<Routes>;
+  subscribe?: NodeStoreDeps["subscribe"];
+}
+
+const KEY = Symbol.for("@sukramj/fabric-ui");
+
+const consoleToast: Toast = {
+  info: (m) => console.info(m),
+  success: (m) => console.info(m),
+  error: (m) => console.error(m),
+};
+
+/** Builds a context; the node store is created on the client. */
+export function createFabricUI(opts: FabricUIOptions): FabricUI {
+  const t = opts.t ?? defaultT;
+  const toast = opts.toast ?? consoleToast;
+  return {
+    client: opts.client,
+    t,
+    toast,
+    confirm: opts.confirm ?? (async (o) => window.confirm(o.body ? `${o.title}\n\n${o.body}` : o.title)),
+    node: createNodeStore(opts.client, { t, toast, subscribe: opts.subscribe }),
+    routes: { ...defaultRoutes, ...opts.routes },
+  };
+}
+
+/** Puts ui into the component context; call it in the component above the pages. */
+export function provideFabricUI(ui: FabricUI): FabricUI {
+  setContext(KEY, ui);
+  return ui;
+}
+
+/** The context the pages read; it throws outside provideFabricUI. */
+export function useFabricUI(): FabricUI {
+  const ui = getContext<FabricUI | undefined>(KEY);
+  if (!ui) throw new Error("fabric-ui: no context — call provideFabricUI above the pages");
+  return ui;
+}
+
+/** The translator of the context, or English outside one (the kit uses it). */
+export function useT(): Translate {
+  return hasContext(KEY) ? getContext<FabricUI>(KEY).t : defaultT;
+}

package/src/lib/i18n/de.json

@@ -0,0 +1,157 @@
+{
+  "common.cancel": "Abbrechen",
+  "common.close": "Schließen",
+  "common.confirm": "Bestätigen",
+  "common.copy": "Kopieren",
+  "common.error": "Fehler:",
+  "common.loading": "Wird geladen…",
+  "common.modified": "geändert",
+  "common.refresh": "Aktualisieren",
+  "common.reload": "Neu laden",
+  "common.remove": "Entfernen",
+  "common.save": "Speichern",
+  "common.saving": "Wird gespeichert…",
+  "common.search": "Suchen…",
+  "node.commissioning.closed": "Kopplungsfenster geschlossen",
+  "node.diag.age_hours": "{n} h",
+  "node.diag.age_minutes": "{n} min",
+  "node.diag.age_seconds": "{n} s",
+  "node.diag.col_fabric": "Fabric",
+  "node.diag.col_peer_idle": "Controller still seit",
+  "node.diag.col_session": "Sitzung",
+  "node.diag.col_subscriptions": "Abonnements",
+  "node.diag.compat_ok": "Keine bekannten Unverträglichkeiten für die gekoppelten Ökosysteme.",
+  "node.diag.compatibility": "Ökosystem-Kompatibilität",
+  "node.diag.discovery": "Auffindbarkeit",
+  "node.diag.discovery_ok": "Der Knoten kündigt sich korrekt an — Controller können ihn finden.",
+  "node.diag.ecosystem.amazon": "Alexa",
+  "node.diag.ecosystem.apple": "Apple",
+  "node.diag.ecosystem.aqara": "Aqara",
+  "node.diag.ecosystem.google": "Google",
+  "node.diag.ecosystem.home_assistant": "Home Assistant",
+  "node.diag.ecosystem.smartthings": "SmartThings",
+  "node.diag.ecosystem.unknown": "Unbekannter Controller",
+  "node.diag.events": "Letzte Ereignisse",
+  "node.diag.events_empty": "Seit dem Start des Knotens nichts aufgezeichnet.",
+  "node.diag.events_hint": "Was geschehen ist, im Unterschied zu dem, was gerade gilt. Nur im Speicher gehalten und beim Neustart verloren.",
+  "node.diag.kind_discovery": "Auffindbarkeit",
+  "node.diag.kind_pairing": "Kopplung",
+  "node.diag.kind_session": "Sitzung",
+  "node.diag.no_sessions": "Gerade ist kein Controller verbunden.",
+  "node.diag.no_subscriptions": "verbunden, empfängt aber nichts",
+  "node.diag.not_advertising": "Die DNS-SD-Ankündigung ist abgeschaltet; kein Controller kann diesen Knoten finden.",
+  "node.diag.pase": "Kopplung",
+  "node.diag.port": "Port",
+  "node.diag.sessions": "Verbundene Controller",
+  "node.diag.sessions_hint": "Wie lange jeder Controller schon schweigt. Ein Controller, der ohne Abmelden verschwindet, lässt seine Sitzung offen und sendet einfach nichts mehr.",
+  "node.diag.sessions_occupancy": "Sitzungs-IDs: {live} aktiv · {reserved} für laufende Handshakes reserviert · {free} von {capacity} frei",
+  "node.diag.severity.error": "Blockierend",
+  "node.diag.severity.warning": "Warnung",
+  "node.diag.title": "Knotendiagnose",
+  "node.endpoints.empty": "Noch ist kein Endpunkt freigegeben.",
+  "node.endpoints.hint": "Was ein Controller sieht. Endpunktnummern stammen aus gespeicherter Identität; sie bleiben über Neustarts gleich, lassen sich aber nicht aus der Elementliste ableiten.",
+  "node.endpoints.part_of": "Teil von #{id}",
+  "node.endpoints.reachable": "Erreichbar",
+  "node.endpoints.title": "Endpunkte",
+  "node.endpoints.unreachable": "Nicht erreichbar",
+  "node.fabric.label_unknown": "(ohne Bezeichnung)",
+  "node.fabric.share": "Knoten mit einem weiteren Controller teilen",
+  "node.fabric.share_go": "Zur Kopplungsseite",
+  "node.fabric.share_hint": "Ein weiterer Controller wird über ein Kopplungsfenster mit QR-Code, Countdown und Schließen-Knopf hinzugefügt — all das liegt auf der Kopplungsseite.",
+  "node.fabric.unpair_confirm": "Diese Fabric entfernen?",
+  "node.fabric.unpaired": "Fabric entfernt.",
+  "node.fabrics.col_fabric": "Fabric #",
+  "node.fabrics.col_label": "Bezeichnung",
+  "node.fabrics.col_node_id": "Node-ID",
+  "node.fabrics.col_vendor": "Hersteller",
+  "node.fabrics.empty": "Noch keine Fabric gekoppelt.",
+  "node.fabrics.node_id_rounded": "gerundet",
+  "node.fabrics.node_id_rounded_hint": "Diese Node-ID übersteigt die Genauigkeit, die diese Liste überträgt; die letzten Stellen können von denen des Controllers abweichen.",
+  "node.maint.reassemble": "Endpunkte neu aufbauen",
+  "node.maint.reassemble_done": "Endpunkte neu aufgebaut.",
+  "node.maint.reassemble_hint": "Baut die freigegebenen Endpunkte aus der aktuellen Auswahl neu auf. Controller behalten ihre Kopplung.",
+  "node.maint.reset": "Alle Kopplungen entfernen",
+  "node.maint.reset_confirm": "Alle Kopplungen entfernen?",
+  "node.maint.reset_confirm_body": "Jeder gekoppelte Controller verliert diesen Knoten und muss ihn erneut hinzufügen. Das lässt sich nicht rückgängig machen.",
+  "node.maint.reset_confirm_label": "Alle entfernen",
+  "node.maint.reset_done": "Alle Kopplungen entfernt.",
+  "node.maint.reset_hint": "Setzt den Knoten in den ungekoppelten Zustand zurück. Jeder Controller muss ihn erneut hinzufügen.",
+  "node.maint.title": "Wartung",
+  "node.pair.add_controller": "Weiteren Controller hinzufügen",
+  "node.pair.already_paired": "Controller, die diesen Knoten bereits halten: {count}. Ein neues Fenster fügt einen weiteren hinzu; bestehende Kopplungen bleiben unberührt.",
+  "node.pair.close_window": "Kopplungsfenster schließen",
+  "node.pair.copied": "In die Zwischenablage kopiert.",
+  "node.pair.copy_failed": "Der Browser verweigert den Zugriff auf die Zwischenablage — bitte den Code von Hand übernehmen.",
+  "node.pair.copy_manual_code": "Manuellen Kopplungscode kopieren",
+  "node.pair.copy_qr_payload": "QR-Inhalt kopieren",
+  "node.pair.load_error": "Der Kopplungszustand konnte nicht geladen werden.",
+  "node.pair.loading": "Kopplungszustand wird geladen…",
+  "node.pair.manual_code": "Manueller Code",
+  "node.pair.minutes": "Min.",
+  "node.pair.qr_caption": "QR-Code mit der App des Controllers scannen",
+  "node.pair.qr_payload": "QR-Inhalt",
+  "node.pair.success": "Controller erfolgreich gekoppelt.",
+  "node.pair.waiting": "Noch ist kein Endpunkt freigegeben — die Kopplung öffnet, sobald der Knoten mindestens einen bereitstellt.",
+  "node.pair.window_open": "Kopplungsfenster offen",
+  "node.pair.window_open_duration": "Kopplungsfenster öffnen",
+  "node.selection.apply": "Übernehmen",
+  "node.selection.back": "Zurück",
+  "node.selection.bulk_expose": "Auswahl freigeben",
+  "node.selection.bulk_hide": "Auswahl ausblenden",
+  "node.selection.col_device_type": "Gerätetyp",
+  "node.selection.col_name": "Name",
+  "node.selection.col_select": "Auswahl",
+  "node.selection.col_state": "Zustand",
+  "node.selection.discard": "Verwerfen",
+  "node.selection.drawer_aria": "Elementdetails",
+  "node.selection.drawer_clusters": "Cluster",
+  "node.selection.drawer_device_type": "Gerätetyp",
+  "node.selection.drawer_source": "Herkunft des Verdikts",
+  "node.selection.drawer_state": "Zustand",
+  "node.selection.empty": "Keine freigebbaren Elemente gefunden.",
+  "node.selection.exposed": "Freigegeben",
+  "node.selection.filter_all": "Alle",
+  "node.selection.group_count": "{count} Elemente",
+  "node.selection.legend": "Legende",
+  "node.selection.mappable_hint": "Vollständig abbildbar.",
+  "node.selection.name": "Name",
+  "node.selection.partially_mappable_hint": "Teilweise abbildbar — ein Teil des Elements bleibt unveröffentlicht.",
+  "node.selection.pending": "{count} ungespeicherte Änderung(en)",
+  "node.selection.preview": "Änderungen prüfen",
+  "node.selection.preview_changed": "Verdikt ändert sich",
+  "node.selection.preview_hint": "Die Verdikte der Elemente nach den Änderungen. Geschrieben wird erst beim Übernehmen.",
+  "node.selection.preview_title": "Was die Änderungen bewirken",
+  "node.selection.saved_toast": "{count} Änderung(en) übernommen.",
+  "node.selection.search_placeholder": "Name, Gruppe, Werte suchen…",
+  "node.selection.select_all": "Alle auswählen",
+  "node.selection.select_row": "Zeile auswählen",
+  "node.selection.state_available": "Verfügbar (nicht freigegeben)",
+  "node.selection.state_exposed": "Freigegeben",
+  "node.selection.state_partial": "Teilweise abbildbar",
+  "node.selection.state_unmappable": "Nicht abbildbar",
+  "node.selection.unavailable": "Dieser Host stellt keine Auswahl bereit.",
+  "node.selection.unmappable_checkbox_title": "Nicht auf einen Endpunkt abbildbar",
+  "node.selection.unmappable_hint": "Nicht auf einen Endpunkt abbildbar.",
+  "node.status.advertising": "wird angekündigt",
+  "node.status.disabled": "Dieser Host stellt keinen Knoten bereit.",
+  "node.status.enabled": "Knoten aktiv",
+  "node.status.endpoints": "{count} Endpunkte",
+  "node.status.exposed": "{count} Elemente freigegeben",
+  "node.status.fabrics": "{count} Fabrics",
+  "node.status.healthy": "gesund",
+  "node.status.listen_addr": "Empfängt auf {addr}",
+  "node.status.listening": "empfangsbereit",
+  "node.status.load_error": "Der Status des Knotens konnte nicht geladen werden.",
+  "node.status.not_listening": "nicht empfangsbereit",
+  "node.status.unhealthy": "gestört",
+  "node.subtitle": "Kopplung, Fabrics, freigegebene Elemente und Diagnose dieses Knotens.",
+  "node.tab.diagnostics": "Diagnose",
+  "node.tab.endpoints": "Endpunkte",
+  "node.tab.fabrics": "Fabrics",
+  "node.tab.pair": "Koppeln",
+  "node.tab.selection": "Auswahl",
+  "node.tab.status": "Status",
+  "node.title": "Knoten",
+  "select.placeholder": "Auswählen…",
+  "shell.language": "Sprache"
+}

package/src/lib/i18n/en.json

@@ -0,0 +1,157 @@
+{
+  "common.cancel": "Cancel",
+  "common.close": "Close",
+  "common.confirm": "Confirm",
+  "common.copy": "Copy",
+  "common.error": "Error:",
+  "common.loading": "Loading…",
+  "common.modified": "modified",
+  "common.refresh": "Refresh",
+  "common.reload": "Reload",
+  "common.remove": "Remove",
+  "common.save": "Save",
+  "common.saving": "Saving…",
+  "common.search": "Search…",
+  "node.commissioning.closed": "Commissioning window closed",
+  "node.diag.age_hours": "{n}h",
+  "node.diag.age_minutes": "{n}min",
+  "node.diag.age_seconds": "{n}s",
+  "node.diag.col_fabric": "Fabric",
+  "node.diag.col_peer_idle": "Controller quiet for",
+  "node.diag.col_session": "Session",
+  "node.diag.col_subscriptions": "Subscriptions",
+  "node.diag.compat_ok": "No known incompatibilities for the paired ecosystems.",
+  "node.diag.compatibility": "Ecosystem compatibility",
+  "node.diag.discovery": "Discovery",
+  "node.diag.discovery_ok": "The node advertises correctly — controllers can discover it.",
+  "node.diag.ecosystem.amazon": "Alexa",
+  "node.diag.ecosystem.apple": "Apple",
+  "node.diag.ecosystem.aqara": "Aqara",
+  "node.diag.ecosystem.google": "Google",
+  "node.diag.ecosystem.home_assistant": "Home Assistant",
+  "node.diag.ecosystem.smartthings": "SmartThings",
+  "node.diag.ecosystem.unknown": "Unknown controller",
+  "node.diag.events": "Recent events",
+  "node.diag.events_empty": "Nothing recorded since the node started.",
+  "node.diag.events_hint": "What happened, as opposed to what is currently true. Kept in memory only and lost on restart.",
+  "node.diag.kind_discovery": "Discovery",
+  "node.diag.kind_pairing": "Pairing",
+  "node.diag.kind_session": "Session",
+  "node.diag.no_sessions": "No controller is connected right now.",
+  "node.diag.no_subscriptions": "connected but receiving nothing",
+  "node.diag.not_advertising": "DNS-SD advertising is switched off, so no controller can discover this node.",
+  "node.diag.pase": "Pairing",
+  "node.diag.port": "Port",
+  "node.diag.sessions": "Connected controllers",
+  "node.diag.sessions_hint": "How long each controller has been quiet. A controller that goes away without disconnecting leaves its session open and simply stops sending.",
+  "node.diag.sessions_occupancy": "Session ids: {live} live · {reserved} reserved for handshakes in progress · {free} of {capacity} free",
+  "node.diag.severity.error": "Blocking",
+  "node.diag.severity.warning": "Warning",
+  "node.diag.title": "Node diagnostics",
+  "node.endpoints.empty": "No endpoint is exposed yet.",
+  "node.endpoints.hint": "What a controller sees. Endpoint numbers come from stored identity, so they stay the same across restarts but cannot be derived from the item list.",
+  "node.endpoints.part_of": "part of #{id}",
+  "node.endpoints.reachable": "Reachable",
+  "node.endpoints.title": "Endpoints",
+  "node.endpoints.unreachable": "Unreachable",
+  "node.fabric.label_unknown": "(no label)",
+  "node.fabric.share": "Share the node with another controller",
+  "node.fabric.share_go": "Go to the pairing page",
+  "node.fabric.share_hint": "Adding another controller opens a commissioning window with a QR code, a countdown, and a way to close it again — all of that lives on the pairing page.",
+  "node.fabric.unpair_confirm": "Remove this fabric?",
+  "node.fabric.unpaired": "Fabric removed.",
+  "node.fabrics.col_fabric": "Fabric #",
+  "node.fabrics.col_label": "Label",
+  "node.fabrics.col_node_id": "Node ID",
+  "node.fabrics.col_vendor": "Vendor",
+  "node.fabrics.empty": "No fabrics paired yet.",
+  "node.fabrics.node_id_rounded": "rounded",
+  "node.fabrics.node_id_rounded_hint": "This node id exceeds the precision this list transports, so its last digits may differ from the ones the controller shows.",
+  "node.maint.reassemble": "Reassemble endpoints",
+  "node.maint.reassemble_done": "Endpoints reassembled.",
+  "node.maint.reassemble_hint": "Rebuilds the exposed endpoints from the current selection. Controllers keep their pairing.",
+  "node.maint.reset": "Remove all pairings",
+  "node.maint.reset_confirm": "Remove all pairings?",
+  "node.maint.reset_confirm_body": "Every paired controller loses this node and has to add it again. This cannot be undone.",
+  "node.maint.reset_confirm_label": "Remove all",
+  "node.maint.reset_done": "All pairings removed.",
+  "node.maint.reset_hint": "Returns the node to its unpaired state. Every controller has to add it again.",
+  "node.maint.title": "Maintenance",
+  "node.pair.add_controller": "Add another controller",
+  "node.pair.already_paired": "Controllers already holding this node: {count}. Opening a window adds another one; the existing pairings are untouched.",
+  "node.pair.close_window": "Close pairing window",
+  "node.pair.copied": "Copied to the clipboard.",
+  "node.pair.copy_failed": "The browser refused clipboard access — copy the code by hand.",
+  "node.pair.copy_manual_code": "Copy the manual pairing code",
+  "node.pair.copy_qr_payload": "Copy the QR payload",
+  "node.pair.load_error": "Failed to load commissioning state.",
+  "node.pair.loading": "Loading commissioning state…",
+  "node.pair.manual_code": "Manual code",
+  "node.pair.minutes": "min",
+  "node.pair.qr_caption": "Scan the QR code with your controller app",
+  "node.pair.qr_payload": "QR payload",
+  "node.pair.success": "Controller paired successfully.",
+  "node.pair.waiting": "No endpoint is exposed yet — pairing opens once the node exposes at least one.",
+  "node.pair.window_open": "Pairing window open",
+  "node.pair.window_open_duration": "Open pairing window",
+  "node.selection.apply": "Apply",
+  "node.selection.back": "Back",
+  "node.selection.bulk_expose": "Expose selection",
+  "node.selection.bulk_hide": "Hide selection",
+  "node.selection.col_device_type": "Device type",
+  "node.selection.col_name": "Name",
+  "node.selection.col_select": "Select",
+  "node.selection.col_state": "State",
+  "node.selection.discard": "Discard",
+  "node.selection.drawer_aria": "Item detail",
+  "node.selection.drawer_clusters": "Clusters",
+  "node.selection.drawer_device_type": "Device type",
+  "node.selection.drawer_source": "Verdict source",
+  "node.selection.drawer_state": "State",
+  "node.selection.empty": "No exposable items found.",
+  "node.selection.exposed": "Exposed",
+  "node.selection.filter_all": "All",
+  "node.selection.group_count": "{count} items",
+  "node.selection.legend": "Legend",
+  "node.selection.mappable_hint": "Fully mappable.",
+  "node.selection.name": "Name",
+  "node.selection.partially_mappable_hint": "Partially mappable — some of the item stays unexposed.",
+  "node.selection.pending": "{count} unsaved change(s)",
+  "node.selection.preview": "Preview changes",
+  "node.selection.preview_changed": "verdict changes",
+  "node.selection.preview_hint": "The verdicts the items carry after the changes. Nothing is written until you apply.",
+  "node.selection.preview_title": "What the changes do",
+  "node.selection.saved_toast": "{count} update(s) applied.",
+  "node.selection.search_placeholder": "Search name, group, values…",
+  "node.selection.select_all": "Select all",
+  "node.selection.select_row": "Select row",
+  "node.selection.state_available": "Available (not exposed)",
+  "node.selection.state_exposed": "Exposed",
+  "node.selection.state_partial": "Partially mappable",
+  "node.selection.state_unmappable": "Cannot be mapped",
+  "node.selection.unavailable": "This host serves no selection.",
+  "node.selection.unmappable_checkbox_title": "Cannot be mapped to an endpoint",
+  "node.selection.unmappable_hint": "Not mappable to an endpoint.",
+  "node.status.advertising": "advertising",
+  "node.status.disabled": "This host serves no node.",
+  "node.status.enabled": "Node active",
+  "node.status.endpoints": "{count} endpoints",
+  "node.status.exposed": "{count} items exposed",
+  "node.status.fabrics": "{count} fabrics",
+  "node.status.healthy": "healthy",
+  "node.status.listen_addr": "Listening on {addr}",
+  "node.status.listening": "listening",
+  "node.status.load_error": "The node's status could not be loaded.",
+  "node.status.not_listening": "not listening",
+  "node.status.unhealthy": "unhealthy",
+  "node.subtitle": "Pairing, fabrics, exposed items and diagnostics of this node.",
+  "node.tab.diagnostics": "Diagnostics",
+  "node.tab.endpoints": "Endpoints",
+  "node.tab.fabrics": "Fabrics",
+  "node.tab.pair": "Pair",
+  "node.tab.selection": "Selection",
+  "node.tab.status": "Status",
+  "node.title": "Node",
+  "select.placeholder": "Select…",
+  "shell.language": "Language"
+}

package/src/lib/i18n/index.ts

@@ -0,0 +1,50 @@
+// The catalogues and the translator. A host passes its own `t` through the
+// fabric-ui context (it may wrap `createTranslator` with catalogues of its
+// own); the standalone shell provides the default. Mirrors openccu-loom
+// assets/ui/src/lib/i18n.ts:36, :8688-8719 at b40b289a (format, the
+// fallback chain active locale → English → raw key, catalogKeys).
+import en from "./en.json";
+import de from "./de.json";
+
+export type Catalog = Record<string, string>;
+export type Vars = Record<string, string | number>;
+export type Translate = (key: string, vars?: Vars) => string;
+
+/** The catalogues the package ships. */
+export const catalogs: Record<string, Catalog> = { en, de };
+
+/** Replaces `{name}` placeholders; an unknown one stays as written. */
+export function format(s: string, vars?: Vars): string {
+  if (!vars) return s;
+  return s.replace(/\{(\w+)\}/g, (_, key: string) => {
+    const v = vars[key];
+    return v == null ? `{${key}}` : String(v);
+  });
+}
+
+/**
+ * A translator over the shipped catalogues plus `extra` (a host's own
+ * keys, or overrides of ours, by locale). `locale` is read on every call,
+ * so a translator whose locale getter reads reactive state re-renders the
+ * text that calls it when the language changes.
+ */
+export function createTranslator(locale: () => string, extra: Record<string, Catalog> = {}): Translate {
+  return (key, vars) => {
+    const loc = locale();
+    const value = extra[loc]?.[key] ?? catalogs[loc]?.[key] ?? extra.en?.[key] ?? en[key as keyof typeof en] ?? key;
+    return format(value, vars);
+  };
+}
+
+/** The English translator the kit falls back to outside a fabric-ui context. */
+export const defaultT: Translate = createTranslator(() => "en");
+
+/** The keys one shipped catalogue defines, without the English fallback. */
+export function catalogKeys(locale: string): readonly string[] {
+  return Object.keys(catalogs[locale] ?? {});
+}
+
+/** "de" when the browser's first language is German, "en" otherwise. */
+export function detectLocale(languages: readonly string[] = typeof navigator === "undefined" ? [] : navigator.languages): "en" | "de" {
+  return (languages[0] ?? "").toLowerCase().startsWith("de") ? "de" : "en";
+}

package/src/lib/index.ts

@@ -0,0 +1,10 @@
+// @sukramj/fabric-ui — the pages, the context they read, the client, the
+// translator and the theme. Subpath exports: ./pages, ./kit, ./client,
+// ./i18n, ./theme, ./theme/tokens.css.
+export * from "./pages";
+export * from "./context";
+export * from "./api";
+export { createNodeStore, errorText, type NodeStore, type Commissioning, type CommissioningPhase } from "./store.svelte";
+export { catalogs, createTranslator, defaultT, detectLocale, format, catalogKeys, type Catalog, type Translate, type Vars } from "./i18n";
+export * from "./theme";
+export { renderQrSvg } from "./qr";

package/src/lib/kit/Badge.svelte

@@ -0,0 +1,26 @@
+<!-- Ported from openccu-loom assets/ui/src/lib/components/ui//Badge.svelte:1-43 at b40b289a. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { cn } from "./utils";
+
+  type Variant = "default" | "success" | "warning" | "danger" | "muted";
+  // title is a plain HTML passthrough: a badge that carries meaning in its
+  // colour needs a text equivalent, and colour alone is not one.
+  type Props = { variant?: Variant; class?: string; title?: string; children?: Snippet };
+
+  let { variant = "default", class: className, title, children }: Props = $props();
+
+  // A 15% tint of the matching token as the fill and the token as the text
+  // colour, so the badge follows the active skin and flips with .dark.
+  const variants: Record<Variant, string> = {
+    default: "bg-[color-mix(in_srgb,var(--ha-primary-color)_15%,transparent)] text-[var(--ha-primary-color)]",
+    success: "bg-[color-mix(in_srgb,var(--ha-success-color)_15%,transparent)] text-[var(--ha-success-color)]",
+    warning: "bg-[color-mix(in_srgb,var(--ha-warning-color)_15%,transparent)] text-[var(--ha-warning-color)]",
+    danger: "bg-[color-mix(in_srgb,var(--ha-error-color)_15%,transparent)] text-[var(--ha-error-color)]",
+    muted: "bg-[var(--ha-secondary-background-color)] text-[var(--ha-secondary-text-color)]",
+  };
+</script>
+
+<span class={cn("inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium", variants[variant], className)} {title}>
+  {@render children?.()}
+</span>

package/src/lib/kit/Button.svelte

@@ -0,0 +1,49 @@
+<!-- Ported from openccu-loom assets/ui/src/lib/components/ui//Button.svelte:1-72 at b40b289a; the disabled fills use the
+     tokens instead of the slate ramp. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { cn } from "./utils";
+
+  type Variant = "default" | "outline" | "ghost" | "destructive" | "outline-destructive";
+  type Size = "sm" | "md" | "lg" | "icon";
+
+  type Props = HTMLButtonAttributes & { variant?: Variant; size?: Size; children?: Snippet };
+
+  let { variant = "default", size = "md", class: className, children, ...rest }: Props = $props();
+
+  // A filled variant greys out explicitly when disabled: at 50% opacity a
+  // saturated fill still reads as active on a dark card.
+  const disabledFill =
+    "disabled:bg-[var(--ha-secondary-background-color)] disabled:text-[var(--ha-disabled-text-color)] disabled:shadow-none";
+  const disabledMuted = "disabled:opacity-50 disabled:text-[var(--ha-disabled-text-color)]";
+  const variants: Record<Variant, string> = {
+    default: `bg-[var(--ha-primary-color)] text-white hover:bg-[var(--ha-primary-color-hover)] shadow-sm ${disabledFill}`,
+    outline: `border border-[var(--ha-divider-color)] bg-[var(--ha-card-background-color)] text-[var(--ha-primary-text-color)] hover:bg-[var(--ha-secondary-background-color)] ${disabledMuted}`,
+    ghost: `text-[var(--ha-primary-text-color)] hover:bg-[var(--ha-secondary-background-color)] ${disabledMuted}`,
+    destructive: `bg-[var(--ha-error-color)] text-white hover:brightness-95 shadow-sm ${disabledFill}`,
+    // Outline weight, red border and text; it fills red on hover, at the
+    // point of commitment.
+    "outline-destructive": `border border-[color-mix(in_srgb,var(--ha-error-color)_40%,transparent)] bg-[var(--ha-card-background-color)] text-[var(--ha-error-color)] hover:border-[var(--ha-error-color)] hover:bg-[var(--ha-error-color)] hover:text-white ${disabledMuted}`,
+  };
+  // Touch-first heights: even sm clears ~36px.
+  const sizes: Record<Size, string> = {
+    sm: "h-9 px-3 text-sm",
+    md: "h-10 px-4 text-sm",
+    lg: "h-11 px-5 text-base",
+    icon: "h-10 w-10",
+  };
+</script>
+
+<button
+  type="button"
+  class={cn(
+    "inline-flex items-center justify-center gap-2 rounded-md font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ha-primary-color)] disabled:cursor-not-allowed",
+    variants[variant],
+    sizes[size],
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</button>

package/src/lib/kit/Card.svelte

@@ -0,0 +1,16 @@
+<!-- Ported from openccu-loom assets/ui/src/lib/components/ui//Card.svelte:1-18 at b40b289a. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn } from "./utils";
+
+  type Props = HTMLAttributes<HTMLDivElement> & { children?: Snippet };
+  let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div
+  class={cn("rounded-[var(--ha-radius-card)] border border-[var(--ha-divider-color)] bg-[var(--ha-card-background-color)] shadow-[var(--ha-elevation-card)]", className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>