@snap-rail/framework-shadcn 0.0.0-stage → 0.2.0

package/lib/ui/theme.css

@@ -0,0 +1,271 @@
+/*
+ * The snap-rail theme: Tailwind v4 tokens carrying the industrial HMI
+ * palette. Two modes share one token vocabulary — the dark graphite-steel
+ * set is the @theme default, `html[data-mode='light']` overrides the same
+ * tokens with the fog-white shop-floor set (accent: cobalt #4a6cff/#3857e8,
+ * picked in docs/design/theme-samples.html). Data series colors live in
+ * --color-chart-1…6 (see docs/theme.md); red/amber/green stay reserved for
+ * state semantics. Class scanning is explicit (auto-detection roots at
+ * the Vite cwd, which is the app, not the workspace), @source globs
+ * resolve relative to this file, and gitignore is respected — build
+ * outputs under lib/lib-client/dist are skipped naturally. One broad
+ * glob covers every package's sources (spine client faces, suites,
+ * field stations alike), so the occupant roster is never re-listed
+ * here; the theme.spec gate fails loud if a package falls outside it.
+ */
+@import "tailwindcss";
+
+@source "../../../../**/src/**/*.{ts,tsx}";
+
+@theme {
+  --color-background: #0b0f14;
+  --color-foreground: #ced8e3;
+
+  --color-card: #11161d;
+  --color-card-foreground: #ced8e3;
+
+  --color-popover: #161b22;
+  --color-popover-foreground: #ced8e3;
+
+  --color-primary: #4a6cff;
+  --color-primary-foreground: #ffffff;
+
+  --color-secondary: #1c2430;
+  --color-secondary-foreground: #ced8e3;
+
+  --color-muted: #161b22;
+  --color-muted-foreground: #8b949e;
+
+  --color-accent: #1c2430;
+  --color-accent-foreground: #e8eef4;
+
+  --color-destructive: #f85149;
+  --color-destructive-foreground: #ffffff;
+
+  --color-success: #3fb950;
+  --color-success-foreground: #0b0f14;
+
+  --color-warning: #d29922;
+  --color-warning-foreground: #0b0f14;
+
+  --color-border: #1f2933;
+  --color-input: #1f2933;
+  --color-ring: #4a6cff;
+
+  /* Data series (docs/theme.md): series 1 = primary hue, 2/3 derived,
+   * 4-6 the steel-gray ramp. Not for state semantics. */
+  --color-chart-1: #4a6cff;
+  --color-chart-2: #3147a1;
+  --color-chart-3: #667fcd;
+  --color-chart-4: #7d8fa5;
+  --color-chart-5: #55677c;
+  --color-chart-6: #33414f;
+
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  --font-sans: system-ui, "Segoe UI", "Microsoft YaHei", sans-serif;
+  --font-mono: "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, monospace;
+  --text-xs: 0.8125rem;
+  --text-sm: 0.9375rem;
+  --text-base: 1.0625rem;
+}
+
+@layer base {
+  :root {
+    color-scheme: dark;
+    /* Glow strengths (color-mix percentages) — brighter at night, restrained
+     * under shop lights. Consumed by the glow-number/glow-bar utilities. */
+    --glow-a: 55%;
+    --glow-b: 20%;
+    --bar-glow: 45%;
+    --app-gradient: radial-gradient(
+      130% 100% at 50% 0%,
+      color-mix(in srgb, var(--color-primary) 8%, var(--color-background)) 0%,
+      var(--color-background) 62%
+    );
+  }
+
+  html[data-mode='light'] {
+    color-scheme: light;
+
+    --color-background: #e4e9ef;
+    --color-foreground: #26323e;
+
+    --color-card: #f3f6f9;
+    --color-card-foreground: #26323e;
+
+    --color-popover: #ffffff;
+    --color-popover-foreground: #26323e;
+
+    --color-primary: #3857e8;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #dde4ec;
+    --color-secondary-foreground: #26323e;
+
+    --color-muted: #e6ebf1;
+    --color-muted-foreground: #5d6d7e;
+
+    --color-accent: #dde4ec;
+    --color-accent-foreground: #101b26;
+
+    --color-destructive: #dc2626;
+    --color-destructive-foreground: #ffffff;
+
+    --color-success: #15803d;
+    --color-success-foreground: #ffffff;
+
+    --color-warning: #b45309;
+    --color-warning-foreground: #ffffff;
+
+    --color-border: #c7d0da;
+    --color-input: #c7d0da;
+    --color-ring: #3857e8;
+
+    --color-chart-1: #3857e8;
+    --color-chart-2: #7088ee;
+    --color-chart-3: #667dd0;
+    --color-chart-4: #94a3b8;
+    --color-chart-5: #b3c0cd;
+    --color-chart-6: #ccd6e0;
+
+    --glow-a: 20%;
+    --glow-b: 7%;
+    --bar-glow: 30%;
+    --app-gradient: radial-gradient(
+      130% 100% at 50% 0%,
+      color-mix(in srgb, var(--color-primary) 6%, var(--color-background)) 0%,
+      var(--color-background) 62%
+    );
+  }
+
+  * {
+    border-color: var(--color-border);
+  }
+  html,
+  body,
+  #root {
+    height: 100%;
+  }
+  body {
+    background-color: var(--color-background);
+    background-image: var(--app-gradient);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    margin: 0;
+  }
+
+  /* Chunky themed scrollbars: grabbable on a touch panel, tinted per mode. */
+  ::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+  }
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--color-muted-foreground) 32%, transparent);
+    background-clip: content-box;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--color-muted-foreground) 48%, transparent);
+    background-clip: content-box;
+  }
+
+  /* A DragScroll container sets this while a mouse pan is active. */
+  [data-panning='true'] {
+    cursor: grabbing;
+    user-select: none;
+  }
+
+  /* Modal entrance (Dialog surfaces); exit stays instant. */
+  .overlay-in {
+    animation: snap-overlay-in 0.15s ease-out;
+  }
+  .dialog-in {
+    animation: snap-dialog-in 0.18s ease-out;
+  }
+  @keyframes snap-overlay-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  /* Centering lives on Tailwind v4's `translate` property (not `transform`),
+   * so keyframes must only animate scale/opacity — a translate here would
+   * stack with the utility and fling the panel off-center during entry. */
+  @keyframes snap-dialog-in {
+    from {
+      opacity: 0;
+      transform: scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .overlay-in,
+    .dialog-in {
+      animation: none;
+    }
+  }
+}
+
+@utility drag-region {
+  -webkit-app-region: drag;
+}
+
+@utility no-drag {
+  -webkit-app-region: no-drag;
+}
+
+/* Hero readouts: large tabular numerals pick up a primary-tinted halo. */
+@utility glow-number {
+  text-shadow:
+    0 0 14px color-mix(in srgb, var(--color-primary) var(--glow-a), transparent),
+    0 0 44px color-mix(in srgb, var(--color-primary) var(--glow-b), transparent);
+}
+
+/* Chart bodies: the series-1 bars get a soft light bloom. */
+@utility glow-bar {
+  box-shadow: 0 0 12px color-mix(in srgb, var(--color-chart-1) var(--bar-glow), transparent);
+}
+
+/* The selected-channel keyline: a 3px primary rail on the inline-start edge. */
+@utility channel-keyline {
+  box-shadow: inset 3px 0 0 0 var(--color-primary);
+}
+
+/*
+ * Workflow sidebar attention effects. One keyframe pair serves every
+ * breathing light: the element sets --breathe-color (a CSS color) and
+ * --breathe-period (a duration); the glow ring pulses around a constant
+ * inner keyline so the item stays identifiable at the dim end.
+ */
+.breathe {
+  --breathe-color: var(--color-destructive);
+  --breathe-period: 2.4s;
+  animation: snap-breathe var(--breathe-period) ease-in-out infinite;
+}
+
+@keyframes snap-breathe {
+  0%, 100% {
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--breathe-color) 60%, transparent),
+      0 0 2px 0 color-mix(in srgb, var(--breathe-color) 25%, transparent);
+  }
+  50% {
+    box-shadow:
+      inset 0 0 0 2px var(--breathe-color),
+      0 0 16px 4px color-mix(in srgb, var(--breathe-color) 70%, transparent);
+  }
+}

package/lib/variables.js

@@ -0,0 +1,260 @@
+import "@snap-rail/cordis";
+import { subscribeFrame } from "@snap-rail/connection";
+import { equipmentFrameSchemas, pointKey } from "@snap-rail/equipment/contract";
+import { useEffect, useState } from "react";
+//#region lib/types/variables.js
+/**
+* Mounts the `ctx.variables` registry. All state lives in construction-time
+* closures: traceable context proxies rebind `this` on every method access,
+* so `this`-reached state cannot back a service here (the uiSlots lesson).
+*/
+const variablesPlugin = {
+	name: "client-variables",
+	apply(ctx) {
+		const variables = /* @__PURE__ */ new Map();
+		ctx.provide("variables", {
+			list() {
+				return [...variables.values()];
+			},
+			register(caller, defs) {
+				const keys = defs.map((def) => pointKey(def));
+				if (new Set(keys).size !== keys.length) throw new Error(`variables: duplicate addresses in one registration: ${keys.join(", ")}`);
+				const installed = [];
+				for (const def of defs) {
+					const entry = {
+						...def,
+						source: "plugin"
+					};
+					const key = pointKey(def);
+					installed.push({
+						key,
+						entry
+					});
+					variables.set(key, entry);
+				}
+				ctx.emit("variables/changed");
+				const remove = () => {
+					let changed = false;
+					for (const { key, entry } of installed) if (variables.get(key) === entry) {
+						variables.delete(key);
+						changed = true;
+					}
+					if (changed) ctx.emit("variables/changed");
+				};
+				caller.effect(() => remove);
+				return remove;
+			}
+		});
+	}
+};
+/**
+* Resolve a binding against the generic mapping document. The device must
+* exist, the group entity must exist on it, and the point form must find
+* the point in exactly that group — an unknown group name must read as
+* unresolved, never as "all normal". A group resolves with at least one
+* member, in the document's order (the driver's projection defines it; the
+* first active member is a stable "primary").
+*/
+function resolveBinding(doc, binding) {
+	if (!doc.devices.some((device) => device.id === binding.device)) return void 0;
+	if (!doc.groups.some((group) => group.deviceId === binding.device && group.name === binding.group)) return void 0;
+	if ("name" in binding) {
+		if (!doc.points.some((point) => point.deviceId === binding.device && point.group === binding.group && point.name === binding.name)) return void 0;
+		return {
+			kind: "point",
+			ref: {
+				device: binding.device,
+				group: binding.group,
+				name: binding.name
+			},
+			name: binding.name
+		};
+	}
+	const members = doc.points.filter((point) => point.deviceId === binding.device && point.group === binding.group).map((point) => ({
+		ref: {
+			device: point.deviceId,
+			group: point.group,
+			name: point.name
+		},
+		name: point.name
+	}));
+	if (members.length === 0) return void 0;
+	return {
+		kind: "group",
+		device: binding.device,
+		group: binding.group,
+		members
+	};
+}
+/** Any-active truthiness: `true`, a nonzero number/bigint, a non-empty string. */
+function isActiveValue(value) {
+	if (value === null) return false;
+	if (typeof value === "boolean") return value;
+	if (typeof value === "bigint") return value !== 0n;
+	if (typeof value === "number") return value !== 0;
+	return value.length > 0;
+}
+/**
+* Watch one binding and emit a `BindingView` on every change. The watcher
+* resolves the generic mapping document itself, seeds current values with
+* one `field.points.read`, follows `field/point-updated` frames, and
+* re-resolves on a `field/mappings-changed` frame — re-mapping takes effect
+* without remounting the consumer.
+*
+* The returned stop function drops this watcher's subscription references;
+* the host counts references per address, so overlapping watchers of one
+* address never starve each other.
+*/
+function watchBinding(ctx, binding, listener) {
+	const { link } = ctx.client;
+	let live = true;
+	let resolved;
+	let refs = [];
+	const samples = /* @__PURE__ */ new Map();
+	const compute = () => {
+		if (resolved === void 0) {
+			listener({ kind: "unresolved" });
+			return;
+		}
+		if (resolved.kind === "point") {
+			listener({
+				kind: "point",
+				ref: resolved.ref,
+				name: resolved.name,
+				sample: samples.get(pointKey(resolved.ref))
+			});
+			return;
+		}
+		const active = [];
+		const abnormal = [];
+		const pending = [];
+		for (const member of resolved.members) {
+			const sample = samples.get(pointKey(member.ref));
+			if (sample === void 0 || sample.value === null && sample.time === 0) pending.push(member.name);
+			else if (sample.value === null) abnormal.push(member.name);
+			else if (isActiveValue(sample.value)) active.push({
+				name: member.name,
+				value: sample.value,
+				time: sample.time
+			});
+		}
+		listener({
+			kind: "group",
+			device: resolved.device,
+			group: resolved.group,
+			status: active.length > 0 ? "active" : "normal",
+			active,
+			abnormal,
+			pending
+		});
+	};
+	const resubscribe = () => {
+		link.call("equipment.mappings.list", {}).then((result) => {
+			if (!live || !result.ok) return;
+			const next = resolveBinding(result.value.mappings, binding);
+			const nextRefs = next === void 0 ? [] : next.kind === "point" ? [next.ref] : next.members.map((member) => member.ref);
+			const wanted = new Set(nextRefs.map(pointKey));
+			for (const ref of refs) if (!wanted.has(pointKey(ref))) link.call("equipment.points.unsubscribe", { points: [ref] }).catch(() => {});
+			for (const ref of nextRefs) if (!refs.some((current) => pointKey(current) === pointKey(ref))) link.call("equipment.points.subscribe", { points: [ref] }).catch(() => {});
+			refs = nextRefs;
+			resolved = next;
+			samples.clear();
+			if (nextRefs.length === 0) {
+				compute();
+				return;
+			}
+			link.call("equipment.points.read", { points: [...nextRefs] }).then((read) => {
+				if (!live) return;
+				if (read.ok) for (const sample of read.value.samples) samples.set(pointKey(sample), {
+					value: sample.value,
+					time: sample.time
+				});
+				compute();
+			}).catch(() => {
+				if (live) compute();
+			});
+		}).catch(() => {});
+	};
+	const detachUpdates = subscribeFrame(link, "equipment/point-updated", equipmentFrameSchemas["equipment/point-updated"], (frame) => {
+		const ref = {
+			device: frame.device,
+			group: frame.group,
+			name: frame.name
+		};
+		if (!refs.some((current) => pointKey(current) === pointKey(ref))) return;
+		samples.set(pointKey(ref), {
+			value: frame.value,
+			time: frame.time
+		});
+		compute();
+	});
+	const detachConfig = link.subscribe("equipment/mappings-changed", () => {
+		resubscribe();
+	});
+	resubscribe();
+	return () => {
+		live = false;
+		detachUpdates();
+		detachConfig();
+		if (refs.length > 0) link.call("equipment.points.unsubscribe", { points: [...refs] }).catch(() => {});
+	};
+}
+/** Stable identity of a binding for hook dependency lists. */
+function bindingKey(binding) {
+	return "name" in binding ? `${binding.device}/${binding.group}/${binding.name}` : `${binding.device}/${binding.group}`;
+}
+/** The React recipe over `watchBinding`; `unresolved` until first observation. */
+function useBinding(ctx, binding) {
+	const [view, setView] = useState({ kind: "unresolved" });
+	const { link } = ctx.client;
+	const key = bindingKey(binding);
+	useEffect(() => watchBinding(ctx, binding, setView), [link, key]);
+	return view;
+}
+/**
+* The consume recipe for demand plugins: seed the current value with a
+* `field.points.read`, then follow `field/point-updated` increments. Returns
+* `undefined` until the first observation — an unmapped declaration stays
+* undefined.
+*
+* The hook holds one subscription reference for its lifetime; the matching
+* `field.points.unsubscribe` fires on unmount, and the host's reference
+* counting keeps other watchers of the same address live.
+*/
+function usePoint(ctx, binding) {
+	const [sample, setSample] = useState(void 0);
+	const { link } = ctx.client;
+	const key = pointKey(binding);
+	useEffect(() => {
+		let live = true;
+		const detach = subscribeFrame(link, "equipment/point-updated", equipmentFrameSchemas["equipment/point-updated"], (frame) => {
+			const frameRef = {
+				device: frame.device,
+				group: frame.group,
+				name: frame.name
+			};
+			if (pointKey(frameRef) !== key) return;
+			if (live) setSample({
+				value: frame.value,
+				time: frame.time
+			});
+		});
+		link.call("equipment.points.subscribe", { points: [binding] }).catch(() => {});
+		link.call("equipment.points.read", { points: [binding] }).then((result) => {
+			if (!live || !result.ok) return;
+			const first = result.value.samples[0];
+			if (first !== void 0) setSample({
+				value: first.value,
+				time: first.time
+			});
+		}).catch(() => {});
+		return () => {
+			live = false;
+			detach();
+			link.call("equipment.points.unsubscribe", { points: [binding] }).catch(() => {});
+		};
+	}, [link, key]);
+	return sample;
+}
+//#endregion
+export { variablesPlugin as default, resolveBinding, useBinding, usePoint, watchBinding };

package/lib/workflows.js

@@ -0,0 +1,85 @@
+import "@snap-rail/cordis";
+//#region lib/types/workflows.js
+/** Whether two epoch-ms times fall on the same local calendar day. */
+function sameLocalDay(a, b) {
+	return new Date(a).toDateString() === new Date(b).toDateString();
+}
+/**
+* Mounts the `ctx.workflows` registry. All state lives in construction-time
+* closures: traceable context proxies rebind `this` on every method access,
+* so `this`-reached state cannot back a service here (the uiSlots lesson).
+*/
+const workflowsPlugin = {
+	name: "client-workflows",
+	apply(ctx) {
+		const workflows = /* @__PURE__ */ new Map();
+		let nextSeq = 0;
+		let activeId;
+		let operator = null;
+		let events = [];
+		const satisfies = (requirement) => events.some((event) => event.action === requirement.action && (requirement.scope === "day" ? sameLocalDay(event.time, Date.now()) : event.actor === operator && sameLocalDay(event.time, Date.now())));
+		const changed = () => {
+			ctx.emit("workflow/changed");
+		};
+		ctx.provide("workflows", {
+			list() {
+				return [...workflows.values()].sort((a, b) => a.def.order - b.def.order || a.seq - b.seq).map(({ def, alert }) => ({
+					...def,
+					unlocked: def.requires.every(satisfies),
+					active: def.id === activeId,
+					alert
+				}));
+			},
+			register(caller, def) {
+				workflows.set(def.id, {
+					def,
+					alert: null,
+					seq: nextSeq++
+				});
+				changed();
+				const remove = () => {
+					if (workflows.delete(def.id)) {
+						if (activeId === def.id) activeId = void 0;
+						changed();
+					}
+				};
+				caller.effect(() => remove);
+				return remove;
+			},
+			setActive(id) {
+				if (activeId === id) return;
+				activeId = id;
+				changed();
+			},
+			setAlert(id, alert) {
+				const entry = workflows.get(id);
+				if (entry === void 0 || entry.alert === alert) return;
+				if (alert !== null && alert.kind === "halo") alert = {
+					kind: "halo",
+					progress: Math.min(1, Math.max(0, alert.progress))
+				};
+				entry.alert = alert;
+				changed();
+			},
+			setOperator(next) {
+				if (operator === next) return;
+				operator = next;
+				changed();
+			},
+			feedEvents(next) {
+				events = [...next].sort((a, b) => a.time - b.time);
+				changed();
+			},
+			announce(action, actor) {
+				events = [...events, {
+					action,
+					actor: actor ?? operator ?? "client",
+					time: Date.now()
+				}];
+				changed();
+			}
+		});
+	}
+};
+//#endregion
+export { workflowsPlugin as default };