@sukramj/fabric-ui 0.0.0-stage → 0.1.0

package/src/lib/qr.ts

@@ -0,0 +1,58 @@
+// The QR code of a pairing payload as an inline SVG string, drawn on the
+// client from the payload the API returns. Ported from openccu-loom
+// assets/ui/src/lib/qr.ts:1-95 at b40b289a (qrcode, MIT): the matrix from
+// QRCode.create, one horizontal path segment per run of dark modules.
+// Chosen over a second encoder of our own: the library is small, MIT and
+// already proven on loom's pairing page.
+import { create as qrCreate } from "qrcode";
+
+const MARGIN = 4; // quiet-zone modules (the spec minimum)
+
+function modulesToPath(data: Uint8Array, size: number, margin: number): string {
+  let path = "";
+  let moveBy = 0;
+  let newRow = false;
+  let lineLength = 0;
+  for (let i = 0; i < data.length; i++) {
+    const col = i % size;
+    const row = Math.floor(i / size);
+    if (col === 0 && !newRow) newRow = true;
+    if (data[i]) {
+      lineLength++;
+      if (!(i > 0 && col > 0 && data[i - 1])) {
+        if (newRow) {
+          path += `M${col + margin} ${0.5 + row + margin}`;
+          newRow = false;
+        } else {
+          path += `m${moveBy} 0`;
+        }
+        moveBy = 0;
+      }
+      if (!(col + 1 < size && data[i + 1])) {
+        path += `h${lineLength}`;
+        lineLength = 0;
+      }
+    } else {
+      moveBy++;
+    }
+  }
+  return path;
+}
+
+/**
+ * A self-contained SVG of `payload` as a QR code. Black on a white plate
+ * whatever the theme: a scanner needs a light quiet zone and dark modules.
+ */
+export function renderQrSvg(payload: string, opts?: { size?: number }): string {
+  const px = opts?.size ?? 200;
+  const qr = qrCreate(payload, { errorCorrectionLevel: "M" });
+  const { size, data } = qr.modules;
+  const total = size + MARGIN * 2;
+  const path = modulesToPath(data, size, MARGIN);
+  return (
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${px}" height="${px}" viewBox="0 0 ${total} ${total}" shape-rendering="crispEdges">` +
+    `<path fill="white" d="M0 0h${total}v${total}H0z"/>` +
+    `<path stroke="black" d="${path}"/>` +
+    `</svg>`
+  );
+}

package/src/lib/store.svelte.ts

@@ -0,0 +1,293 @@
+// The node family's state: status, fabrics, the selection with its pending
+// changes, and the pairing flow, kept current by the event stream. Ported
+// from openccu-loom assets/ui/src/lib/stores/matter.svelte.ts:23-381 at
+// b40b289a: one instance per fabric-ui context rather than a module
+// singleton, the five-part exposure key replaced by the provider's opaque
+// item key, the WebSocket topics by the stream's event types, the
+// host-readiness gate dropped.
+import { ApiError, type FabricClient, type FabricList, type ExposureSchema, type Item, type Status, type Update, type Window } from "./api/client";
+import { subscribeStream, type StreamEvent } from "./api/stream";
+import type { Translate } from "./i18n";
+
+export interface Toast {
+  info(message: string): void;
+  success(message: string): void;
+  error(message: string): void;
+}
+
+export type CommissioningPhase = "idle" | "open" | "success";
+
+export interface Commissioning {
+  phase: CommissioningPhase;
+  window: Window | null;
+  remaining: number | null;
+  addedFabricLabel: string | null;
+}
+
+export interface NodeStoreDeps {
+  t: Translate;
+  toast: Toast;
+  /** Subscribes to the event stream; the default opens an EventSource on the client's stream URL. */
+  subscribe?: (onEvent: (ev: StreamEvent) => void) => () => void;
+}
+
+const IDLE: Commissioning = { phase: "idle", window: null, remaining: null, addedFabricLabel: null };
+
+export function createNodeStore(client: FabricClient, deps: NodeStoreDeps) {
+  let status = $state<Status | null>(null);
+  let statusLoading = $state(false);
+  let statusError = $state<string | null>(null);
+  let fabrics = $state<FabricList["fabrics"]>([]);
+  let fabricsLoading = $state(false);
+  let fabricsError = $state<string | null>(null);
+  let schema = $state<ExposureSchema | null>(null);
+  let items = $state<Item[]>([]);
+  let exposureLoading = $state(false);
+  let exposureError = $state<string | null>(null);
+  let pending = $state<Map<string, Update>>(new Map());
+  let commissioning = $state<Commissioning>({ ...IDLE });
+
+  let unsub: (() => void) | null = null;
+  let countdown: ReturnType<typeof setInterval> | null = null;
+  let exposureReload: ReturnType<typeof setTimeout> | null = null;
+  let closedTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const message = (err: unknown) => (err instanceof Error ? err.message : String(err));
+
+  async function loadStatus() {
+    statusLoading = true;
+    statusError = null;
+    try {
+      status = await client.status();
+    } catch (err) {
+      status = null;
+      statusError = message(err);
+    } finally {
+      statusLoading = false;
+    }
+  }
+
+  async function loadFabrics() {
+    fabricsLoading = true;
+    fabricsError = null;
+    try {
+      fabrics = (await client.fabrics()).fabrics;
+    } catch (err) {
+      fabricsError = message(err);
+    } finally {
+      fabricsLoading = false;
+    }
+  }
+
+  async function loadExposure() {
+    exposureLoading = true;
+    exposureError = null;
+    try {
+      const [s, list] = await Promise.all([client.exposureSchema(), client.exposure()]);
+      schema = s;
+      items = list.items;
+    } catch (err) {
+      exposureError = message(err);
+    } finally {
+      exposureLoading = false;
+    }
+  }
+
+  // One exposure_changed may follow a burst of others (a host applying
+  // hundreds of rows); collapse them into one reload.
+  function scheduleExposureReload() {
+    if (exposureReload) clearTimeout(exposureReload);
+    exposureReload = setTimeout(() => {
+      exposureReload = null;
+      void loadExposure();
+    }, 300);
+  }
+
+  function markDirty(item: Item, patch: { enabled?: boolean; name?: string }) {
+    const base: Update = pending.get(item.key) ?? { key: item.key, enabled: item.enabled };
+    const next: Update = { ...base, ...patch };
+    if (next.name !== undefined && next.name === item.name) delete next.name;
+    const map = new Map(pending);
+    if (next.enabled === item.enabled && next.name === undefined) map.delete(item.key);
+    else map.set(item.key, next);
+    pending = map;
+  }
+
+  function discardDirty() {
+    pending = new Map();
+  }
+
+  async function preview(): Promise<Item[]> {
+    const updates = Array.from(pending.values());
+    if (updates.length === 0) return [];
+    return (await client.previewExposure(updates)).items;
+  }
+
+  async function saveBulk(): Promise<number> {
+    const updates = Array.from(pending.values());
+    if (updates.length === 0) return 0;
+    const applied = await client.applyExposure(updates);
+    pending = new Map();
+    await loadExposure();
+    return applied;
+  }
+
+  function stopCountdown() {
+    if (countdown !== null) {
+      clearInterval(countdown);
+      countdown = null;
+    }
+  }
+
+  function startCountdown(seconds: number) {
+    stopCountdown();
+    let remaining = seconds;
+    commissioning = { ...commissioning, remaining };
+    countdown = setInterval(() => {
+      remaining -= 1;
+      commissioning = { ...commissioning, remaining };
+      if (remaining <= 0) {
+        stopCountdown();
+        if (commissioning.phase === "open") commissioning = { ...IDLE };
+      }
+    }, 1000);
+  }
+
+  async function openWindow(durationSeconds: number) {
+    const win = await client.openWindow(durationSeconds);
+    commissioning = { phase: "open", window: win, remaining: win.duration_seconds, addedFabricLabel: null };
+    startCountdown(win.duration_seconds);
+  }
+
+  // hydrateCommissioning re-syncs the pairing flow from the node, so a
+  // reload or a window opened elsewhere shows the codes and the countdown
+  // instead of the empty form (loom matter.svelte.ts:282-318).
+  async function hydrateCommissioning() {
+    if (commissioning.phase !== "idle") return;
+    let st = status;
+    if (st === null) {
+      st = await client.status();
+      status = st;
+    }
+    if (!st.enabled || !st.commissioning_window_open) return;
+    const p = await client.pairing();
+    const duration = p.duration_seconds ?? st.commissioning_window_duration_seconds ?? 0;
+    commissioning = {
+      phase: "open",
+      window: {
+        discriminator: p.discriminator,
+        passcode: p.passcode,
+        duration_seconds: duration,
+        qr_code: p.qr_code,
+        manual_code: p.manual_code,
+      },
+      // Without a server-side remaining time the full duration is the upper bound.
+      remaining: duration > 0 ? duration : null,
+      addedFabricLabel: null,
+    };
+    if (duration > 0) startCountdown(duration);
+  }
+
+  async function closeWindow() {
+    await client.closeWindow();
+    stopCountdown();
+    commissioning = { ...IDLE };
+  }
+
+  function resetCommissioning() {
+    stopCountdown();
+    commissioning = { ...IDLE };
+  }
+
+  function applyEvent(ev: StreamEvent) {
+    switch (ev.type) {
+      case "fabric_added":
+        if (closedTimer) {
+          clearTimeout(closedTimer);
+          closedTimer = null;
+        }
+        stopCountdown();
+        commissioning = { ...commissioning, phase: "success", addedFabricLabel: ev.data.label || ev.data.vendor_name || null };
+        void loadFabrics();
+        void loadStatus();
+        break;
+      case "fabric_removed":
+        void loadFabrics();
+        void loadStatus();
+        break;
+      case "window_opened":
+      case "endpoints_changed":
+        void loadStatus();
+        break;
+      case "window_closed":
+        void loadStatus();
+        // A commissioning closes the window just before the fabric is
+        // reported; only a close that no fabric follows ends the flow.
+        if (commissioning.phase === "open" && !closedTimer) {
+          closedTimer = setTimeout(() => {
+            closedTimer = null;
+            if (commissioning.phase === "open") {
+              stopCountdown();
+              commissioning = { ...IDLE };
+              deps.toast.info(deps.t("node.commissioning.closed"));
+            }
+          }, 750);
+        }
+        break;
+      case "exposure_changed":
+        scheduleExposureReload();
+        break;
+    }
+  }
+
+  function connect() {
+    if (unsub) return;
+    const sub = deps.subscribe ?? ((fn) => subscribeStream(client.streamUrl(), fn));
+    unsub = sub(applyEvent);
+  }
+
+  function close() {
+    stopCountdown();
+    for (const timer of [exposureReload, closedTimer]) if (timer) clearTimeout(timer);
+    exposureReload = closedTimer = null;
+    unsub?.();
+    unsub = null;
+  }
+
+  return {
+    get status() { return status; },
+    get statusLoading() { return statusLoading; },
+    get statusError() { return statusError; },
+    get fabrics() { return fabrics; },
+    get fabricsLoading() { return fabricsLoading; },
+    get fabricsError() { return fabricsError; },
+    get schema() { return schema; },
+    get items() { return items; },
+    get exposureLoading() { return exposureLoading; },
+    get exposureError() { return exposureError; },
+    get pending() { return pending; },
+    get hasDirty() { return pending.size > 0; },
+    get commissioning() { return commissioning; },
+    loadStatus,
+    loadFabrics,
+    loadExposure,
+    markDirty,
+    discardDirty,
+    preview,
+    saveBulk,
+    openWindow,
+    hydrateCommissioning,
+    closeWindow,
+    resetCommissioning,
+    applyEvent,
+    connect,
+    close,
+  };
+}
+
+export type NodeStore = ReturnType<typeof createNodeStore>;
+
+/** The message of an error a page shows. */
+export function errorText(err: unknown): string {
+  return err instanceof ApiError ? err.message : err instanceof Error ? err.message : String(err);
+}

package/src/lib/theme/ha-bridge.ts

@@ -0,0 +1,156 @@
+// The Home Assistant theme bridge. Inside Home Assistant's Ingress frame
+// (same origin) it mirrors the live theme: it copies Home Assistant's CSS
+// variables off the parent document onto our :root and follows its
+// light/dark choice by the parent's background luminance. Anywhere else it
+// is inert and the static defaults of tokens.css [data-skin="ha"] apply.
+// Ported from openccu-loom assets/ui/src/lib/theme/ha-bridge.ts:1-184 at
+// b40b289a, without the shell-frame detection that is loom's own.
+
+// Variables copied from the parent document. The --ha-* tokens read them
+// through var(--…, fallback), so a live value overrides the default.
+export const HA_THEME_VARS = [
+  "--primary-color",
+  "--accent-color",
+  "--primary-background-color",
+  "--secondary-background-color",
+  "--card-background-color",
+  "--primary-text-color",
+  "--secondary-text-color",
+  "--disabled-text-color",
+  "--divider-color",
+  "--error-color",
+  "--warning-color",
+  "--success-color",
+  "--info-color",
+  "--ha-card-border-radius",
+  "--ha-card-box-shadow",
+  "--app-header-background-color",
+  "--app-header-text-color",
+  "--sidebar-background-color",
+  "--rgb-primary-color",
+  "--text-primary-color",
+  "--ha-font-family-body",
+  "--header-height",
+  "--rgb-accent-color",
+  "--rgb-primary-text-color",
+  "--rgb-error-color",
+  "--rgb-success-color",
+  "--rgb-info-color",
+  "--shadow-color",
+  "--ha-color-text-primary",
+  "--ha-color-text-secondary",
+  "--ha-color-surface-default",
+] as const;
+
+// The path segment the Supervisor serves an add-on's Ingress under.
+const HA_INGRESS_SEGMENT = "/api/hassio_ingress/";
+
+export type Skin = "fabric" | "ha";
+
+// True when the page runs inside Home Assistant, detected positively: a
+// frame alone is not enough. Either the page is served under the Ingress
+// path, or a same-origin parent document is Home Assistant's frontend
+// (`<home-assistant>`).
+export function isEmbedded(): boolean {
+  if (typeof window === "undefined") return false;
+  try {
+    if (window.self === window.top) return false;
+  } catch {
+    // top inaccessible — still framed
+  }
+  if (window.location.pathname.includes(HA_INGRESS_SEGMENT)) return true;
+  try {
+    return window.parent.document.querySelector("home-assistant") !== null;
+  } catch {
+    // Cross-origin or unreadable parent — not provably Home Assistant.
+    return false;
+  }
+}
+
+// The effective skin: inside Home Assistant always "ha", otherwise the
+// stored choice.
+export function resolveSkin(stored: Skin): Skin {
+  return isEmbedded() ? "ha" : stored;
+}
+
+// A CSS colour as [r,g,b] (0–255), or null: #rgb, #rrggbb, rgb(), rgba().
+export function parseRgb(value: string): [number, number, number] | null {
+  const v = value.trim();
+  if (!v) return null;
+  if (v[0] === "#") {
+    let hex = v.slice(1);
+    if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    if (hex.length >= 6) {
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      if (!Number.isNaN(r) && !Number.isNaN(g) && !Number.isNaN(b)) return [r, g, b];
+    }
+    return null;
+  }
+  const m = v.match(/rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
+  return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : null;
+}
+
+// WCAG relative luminance (0 black, 1 white) of an sRGB triple.
+export function relativeLuminance([r, g, b]: [number, number, number]): number {
+  const lin = (c: number) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+// Starts mirroring the live theme and returns the cleanup. A no-op outside
+// Home Assistant and for a parent that is or becomes inaccessible.
+export function startHaBridge(): () => void {
+  if (!isEmbedded()) return () => {};
+  try {
+    const parentWin = window.parent;
+    const parentRoot = parentWin.document.documentElement;
+    const ourRoot = document.documentElement;
+
+    const apply = () => {
+      try {
+        const ps = parentWin.getComputedStyle(parentRoot);
+        for (const name of HA_THEME_VARS) {
+          const value = ps.getPropertyValue(name).trim();
+          if (value) ourRoot.style.setProperty(name, value);
+        }
+        // Follow Home Assistant's light/dark by its background luminance;
+        // this overrides the page's own choice while embedded.
+        const bg = ps.getPropertyValue("--primary-background-color").trim() || ps.backgroundColor;
+        const rgb = parseRgb(bg);
+        if (rgb) {
+          const dark = relativeLuminance(rgb) < 0.5;
+          ourRoot.classList.toggle("dark", dark);
+          ourRoot.style.colorScheme = dark ? "dark" : "light";
+        }
+      } catch {
+        // The parent became inaccessible — the last good values stay.
+      }
+    };
+
+    apply();
+    const observer = new MutationObserver(() => apply());
+    observer.observe(parentRoot, { attributes: true, attributeFilter: ["style", "class"] });
+    const onFocus = () => apply();
+    window.addEventListener("focus", onFocus);
+    document.addEventListener("visibilitychange", onFocus);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("focus", onFocus);
+      document.removeEventListener("visibilitychange", onFocus);
+    };
+  } catch {
+    return () => {};
+  }
+}
+
+/** Sets data-skin on <html> to the effective skin and returns it. */
+export function applySkin(stored: Skin = "ha", root: HTMLElement = document.documentElement): Skin {
+  const skin = resolveSkin(stored);
+  if (skin === "ha") root.dataset.skin = "ha";
+  else delete root.dataset.skin;
+  return skin;
+}

package/src/lib/theme/index.ts

@@ -0,0 +1 @@
+export { HA_THEME_VARS, applySkin, isEmbedded, parseRgb, relativeLuminance, resolveSkin, startHaBridge, type Skin } from "./ha-bridge";