@glasshome/widget-sdk 1.9.0 → 1.9.2

package/dist/vite/index.d.ts

@@ -25,6 +25,12 @@ export declare function runSchemaGuard(args: {
  * must be bundled, because leaving it external is a runtime 404.
  */
 export declare function isWidgetExternal(id: string): boolean;
+/**
+ * True when a widget source file imports `@glasshome/sync-layer` directly.
+ * Same file filters as `isDirectUiImportSource`: node_modules is the SDK's own
+ * business, and non-script assets are not scanned.
+ */
+export declare function isDirectSyncLayerImportSource(id: string, code: string): boolean;
 /**
  * True when a widget source file imports `@glasshome/ui` directly. The regex is
  * the registry's `sourcePattern` for `direct-ui-import`, so the build warning and
@@ -33,6 +39,22 @@ export declare function isWidgetExternal(id: string): boolean;
  * BUILD_CACHE_DIR (the theme `@import`) are the SDK's business, not the widget's.
  */
 export declare function isDirectUiImportSource(id: string, code: string): boolean;
+/**
+ * Warns (never fails) when widget source imports @glasshome/ui directly.
+ * Warn-only counterpart to syncLayerImportGuard: direct imports keep working
+ * until 2.0, but they bypass the sdkVersion gate, so ui can drift against
+ * published widgets with nothing checking compatibility. Detection scans
+ * module source in `transform` because externalized specifiers never reach
+ * `resolveId` (rollup consults `external` for the bare id first).
+ *
+ * `warned` carries the files already reported across every build in one run, so
+ * a module shared by N widgets is named once and not once per bundle it lands in.
+ */
+export declare function createUiImportTracker(warned?: Set<string>): {
+    scan(id: string, code: string): void;
+    /** Offending files this run has not reported yet; marks them reported. */
+    take(): string[];
+};
 interface DiscoveredWidget {
     name: string;
     entry: string;

package/dist/vite/index.js

@@ -129,48 +129,67 @@ function P() {
 function F(e) {
 	return r(e);
 }
-function I() {
+var I = /\.(ts|tsx|js|jsx)$/, L = /from\s+["']@glasshome\/sync-layer(\/[^"']*)?["']/;
+function R(e, t) {
+	let n = N(e).split("?")[0] ?? "";
+	return n.includes("/node_modules/") || !I.test(n) ? !1 : L.test(t);
+}
+function z() {
 	return {
 		name: "glasshome-widget:sync-layer-guard",
 		apply: "build",
 		enforce: "pre",
-		resolveId(e, t) {
-			if (e === "@glasshome/sync-layer" || e.startsWith("@glasshome/sync-layer/")) throw Error(`Widgets must not import "${e}" directly` + (t ? ` (imported by ${t})` : "") + ". Import the equivalent hook from \"@glasshome/widget-sdk\" instead (e.g. useEntity, useEntities, useService).");
+		transform(e, t) {
+			if (R(t, e)) throw Error(`Widgets must not import "@glasshome/sync-layer" directly (imported by ${N(_(process.cwd(), t.split("?")[0] ?? t))}). Import the equivalent hook from "@glasshome/widget-sdk" instead (e.g. useEntity, useEntities, useService).`);
+			return null;
 		}
 	};
 }
-var L = /\.(ts|tsx|js|jsx)$/;
-function R(t, n) {
+function B(t, n) {
 	let r = N(t).split("?")[0] ?? "";
-	if (r.includes("/node_modules/") || !L.test(r)) return !1;
+	if (r.includes("/node_modules/") || !I.test(r)) return !1;
 	let i = e.find((e) => e.id === "direct-ui-import");
 	return i?.sourcePattern ? new RegExp(i.sourcePattern).test(n) : !1;
 }
-function z() {
-	let n = /* @__PURE__ */ new Set();
+function V(e = /* @__PURE__ */ new Set()) {
+	let t = /* @__PURE__ */ new Set();
+	return {
+		scan(e, n) {
+			B(e, n) && t.add(N(_(process.cwd(), e.split("?")[0] ?? e)));
+		},
+		take() {
+			let n = [...t].filter((t) => !e.has(t));
+			for (let t of n) e.add(t);
+			return n;
+		}
+	};
+}
+function H(n) {
+	let r = V(n);
 	return {
 		name: "glasshome-widget:ui-import-guard",
 		apply: "build",
 		enforce: "pre",
 		transform(e, t) {
-			return R(t, e) && n.add(N(_(process.cwd(), t.split("?")[0] ?? t))), null;
+			return r.scan(t, e), null;
 		},
 		buildEnd() {
-			if (n.size === 0) return;
-			let r = e.find((e) => e.id === "direct-ui-import"), i = r ? t(r) : "[@glasshome/widget-sdk] Direct @glasshome/ui imports are deprecated; import the same export from \"@glasshome/widget-sdk\".", a = [...n].map((e) => `    ${e}`).join("\n");
-			console.warn(`${i}\n  Direct @glasshome/ui import(s) in:\n${a}`);
+			let n = r.take();
+			if (n.length === 0) return;
+			let i = e.find((e) => e.id === "direct-ui-import"), a = i ? t(i) : "[@glasshome/widget-sdk] Direct @glasshome/ui imports are deprecated; import the same export from \"@glasshome/widget-sdk\".", o = n.map((e) => `    ${e}`).join("\n");
+			console.warn(`${a}\n  Direct @glasshome/ui import(s) in:\n${o}`);
 		}
 	};
 }
-var B = "node_modules/.cache/glasshome-widgets";
-function V(e) {
+var U = "node_modules/.cache/glasshome-widgets";
+function W(e) {
 	try {
 		return m(g(process.cwd(), "package.json")).resolve(e);
 	} catch {
 		return null;
 	}
 }
-var H = [
+var G = [
 	"--radius",
 	"--background",
 	"--foreground",
@@ -180,21 +199,21 @@ var H = [
 	"--muted",
 	"--accent"
 ];
-function U(e, t) {
+function K(e, t) {
 	let n = g(e, `${t}.css`);
 	if (!s(n)) return;
 	let r = l(n, "utf-8");
 	for (let e of r.matchAll(/:host[^{]*\{([^}]*)\}/g)) {
-		let n = e[1] ?? "", r = H.find((e) => n.includes(`${e}:`));
+		let n = e[1] ?? "", r = G.find((e) => n.includes(`${e}:`));
 		if (r) throw Error(`[glasshome-widget] "${t}.css" defines theme variable "${r}" on :host. Theme variables must inherit from the document so widgets follow the household theme — never re-scope them into the widget's shadow root.`);
 	}
 }
-function W(e, t, n) {
-	let r = v(e, B);
+function q(e, t, n) {
+	let r = v(e, U);
 	c(r, { recursive: !0 });
-	let i = V("@glasshome/ui/styles");
+	let i = W("@glasshome/ui/styles");
 	if (!i) throw Error("[widget-sdk] @glasshome/ui is required to build widgets (it provides the theme every GlassHome widget ships with). Add it to your widget's dependencies.");
-	let a = v(h(i), "../.."), o = V("@glasshome/widget-sdk/tailwind-sources"), l = o ? h(o) : null, u = [
+	let a = v(h(i), "../.."), o = W("@glasshome/widget-sdk/tailwind-sources"), l = o ? h(o) : null, u = [
 		g(a, "src"),
 		g(a, "dist"),
 		...l ? [g(l, "src"), g(l, "dist")] : [],
@@ -218,12 +237,12 @@ function W(e, t, n) {
 		""
 	].join("\n")), f;
 }
-function G() {
+function J() {
 	let e = x();
 	for (let t of e) t.apply ??= "build";
 	return e;
 }
-function K(e) {
+function Y(e) {
 	let t = [];
 	if (!s(e)) return t;
 	for (let n of u(e)) {
@@ -237,7 +256,7 @@ function K(e) {
 	}
 	return t;
 }
-function q(e, t) {
+function X(e, t) {
 	let r = [];
 	if (s(e)) for (let a of u(e)) {
 		if (!f(g(e, a)).isDirectory()) continue;
@@ -260,8 +279,8 @@ function q(e, t) {
 	};
 	s(t) || c(t, { recursive: !0 }), p(g(t, "registry.json"), JSON.stringify(a, null, 2)), console.log(`[registry] Generated registry.json with ${r.length} widget(s)`);
 }
-async function J(e) {
-	let { build: t } = await import("vite"), n = process.cwd(), r = v(n, e?.srcDir ?? "src"), i = v(n, e?.outDir ?? "dist"), a = K(r);
+async function Z(e) {
+	let { build: t } = await import("vite"), n = process.cwd(), r = v(n, e?.srcDir ?? "src"), i = v(n, e?.outDir ?? "dist"), a = Y(r);
 	if (a.length === 0) {
 		console.warn("[glasshome-widgets] No widgets found in", r);
 		return;
@@ -271,19 +290,20 @@ async function J(e) {
 		a = a.filter((e) => t.has(e.name));
 	}
 	e?.only || s(i) && d(i, { recursive: !0 }), s(i) || c(i, { recursive: !0 });
+	let o = /* @__PURE__ */ new Set();
 	for (let r of a) await t({
 		configFile: !1,
 		root: n,
 		plugins: [
-			...G(),
+			...J(),
 			...e?.plugins ?? [],
-			I(),
-			z()
+			z(),
+			H(o)
 		],
 		...e?.viteConfig,
 		build: {
 			lib: {
-				entry: W(n, r.name, r.entry),
+				entry: q(n, r.name, r.entry),
 				formats: ["es"],
 				fileName: r.name,
 				cssFileName: r.name
@@ -295,15 +315,15 @@ async function J(e) {
 			...e?.viteConfig?.build
 		},
 		logLevel: "warn"
-	}), U(i, r.name), await k({
+	}), K(i, r.name), await k({
 		outFile: g(i, `${r.name}.js`),
 		hashFile: g(h(r.entry), ".schema-hash"),
 		widgetName: r.name,
 		manifestPath: g(h(r.entry), "manifest.json")
 	});
-	q(r, i);
+	X(r, i);
 }
-function Y(e) {
+function Q(e) {
 	let t = e?.entry ?? "src/index.tsx", n = {
 		name: "glasshome-widget:build",
 		apply: "build",
@@ -311,7 +331,7 @@ function Y(e) {
 			let e = process.cwd();
 			return { build: {
 				lib: {
-					entry: W(e, "index", v(e, t)),
+					entry: q(e, "index", v(e, t)),
 					formats: ["es"],
 					fileName: "index",
 					cssFileName: "index"
@@ -357,7 +377,7 @@ function Y(e) {
 		name: "glasshome-widget:schema",
 		apply: "build",
 		async closeBundle() {
-			U(v(process.cwd(), "dist"), "index"), await k({
+			K(v(process.cwd(), "dist"), "index"), await k({
 				outFile: v(process.cwd(), "dist", "index.js"),
 				hashFile: v(process.cwd(), ".schema-hash"),
 				widgetName: "index",
@@ -366,15 +386,15 @@ function Y(e) {
 		}
 	};
 	return [
-		...G(),
+		...J(),
 		n,
-		I(),
 		z(),
+		H(),
 		i,
 		r
 	];
 }
-function X(e) {
+function $(e) {
 	let t = e?.srcDir ?? "src", n = e?.outDir ?? "dist", r = [];
 	return [{
 		name: "glasshome-widgets:build",
@@ -393,7 +413,7 @@ function X(e) {
 			if (e === "\0glasshome-noop") return "export {}";
 		},
 		async closeBundle() {
-			await J({
+			await Z({
 				srcDir: t,
 				outDir: n,
 				plugins: r
@@ -402,4 +422,4 @@ function X(e) {
 	}];
 }
 //#endregion
-export { C as MAX_EXAMPLES, J as buildWidgets, K as discoverWidgets, q as generateRegistry, Y as glasshomeWidget, X as glasshomeWidgets, R as isDirectUiImportSource, F as isWidgetExternal, k as runSchemaGuard };
+export { C as MAX_EXAMPLES, Z as buildWidgets, V as createUiImportTracker, Y as discoverWidgets, X as generateRegistry, Q as glasshomeWidget, $ as glasshomeWidgets, R as isDirectSyncLayerImportSource, B as isDirectUiImportSource, F as isWidgetExternal, k as runSchemaGuard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glasshome/widget-sdk",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "SDK for building GlassHome dashboard widgets with SolidJS",
   "keywords": [
     "glasshome",
@@ -51,16 +51,21 @@
     "tailwind-sources.css"
   ],
   "scripts": {
-    "build": "vite build && tsc",
+    "build": "vite build && tsc && bun scripts/check-host-singleton.ts",
     "dev": "vite build --watch",
     "test": "bun test",
     "typecheck:test": "tsc --noEmit -p tsconfig.test.json"
   },
   "peerDependencies": {
-    "@glasshome/sync-layer": "0.5.0",
+    "@glasshome/sync-layer": "0.6.0",
     "@glasshome/ui": "1.3.0",
     "solid-js": "^1.9.11"
   },
+  "peerDependenciesMeta": {
+    "@glasshome/ui": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@glasshome/widget-contract": "0.2.0",
     "@modular-forms/solid": "^0.25.1",
@@ -72,6 +77,7 @@
     "zod": "^4.1.13"
   },
   "devDependencies": {
+    "@glasshome/ui": "1.3.0",
     "@types/bun": "latest",
     "@types/node": "^25.2.2",
     "typescript": "^5",

package/dist/tokens-CFl0mCx4.js

@@ -1,33 +0,0 @@
-import { createContext as e, useContext as t } from "solid-js";
-//#region src/framework/hooks/use-widget-context.ts
-var n = e();
-function r() {
-	let e = t(n);
-	if (!e) throw Error("useWidgetContext must be used within a Widget component");
-	return e;
-}
-//#endregion
-//#region src/framework/theming/tokens.css?raw
-var i = "/* Authoritative SDK CSS contract. Injected once on first Widget mount\n * via framework/theming/tokens.ts.\n *\n * All widget-internal visual scale is driven from CSS custom properties +\n * container queries on the `.glasshome-widget` shell (`container-type: size`).\n * No JS classifier, no size tier enum.\n */\n\n:root {\n  --tone-success:  oklch(0.70 0.18 145);\n  --tone-warning:  oklch(0.80 0.17 75);\n  --tone-danger:   oklch(0.64 0.22 27);\n  --tone-info:     oklch(0.66 0.20 245);\n  --tone-neutral:  oklch(0.65 0.02 250);\n  --tone-accent:   oklch(0.74 0.18 60);\n\n  --widget-grad-strength:    1;\n  --widget-glow-default:     0.4;\n  --widget-border-highlight: oklch(0.98 0 0 / 0.4);\n}\n\n.dark {\n  --tone-success:  oklch(0.74 0.18 145);\n  --tone-warning:  oklch(0.82 0.17 75);\n  --tone-danger:   oklch(0.68 0.22 27);\n  --tone-info:     oklch(0.70 0.20 245);\n  --tone-neutral:  oklch(0.69 0.02 250);\n  --tone-accent:   oklch(0.78 0.18 60);\n\n  --widget-grad-strength:    1.1;\n  --widget-glow-default:     0.5;\n  --widget-border-highlight: oklch(1 0 0 / 0.08);\n}\n\n@property --widget-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: oklch(0.65 0.02 250);\n}\n\n/* === Widget shell ===\n * Fluid scale tokens — tied to the shell's own container box (cqb=height, cqi=width).\n * Icon/pad/gap track HEIGHT (cqb) not the shortest side: two widgets of equal\n * height match regardless of width (a 2×2 and a 4×2 get the same icon). cqmin\n * starved portrait tiles by pinning the icon to the narrow width. Tune\n * multipliers / clamps to adjust density. */\n.glasshome-widget {\n  --widget-color: var(--tone-neutral);\n  --widget-glow-strength: var(--widget-glow-default);\n\n  --widget-icon-box:    clamp(44px, 25cqb, 58px);\n  --widget-icon-glyph:  clamp(24px, 14cqb, 33px);\n  --widget-pad:         clamp(8px,  3.5cqb, 22px);\n  --widget-gap:         clamp(6px,  2cqb,  14px);\n  --widget-title-size:  clamp(12px, 2cqi,    18px);\n  --widget-subtitle:    clamp(12px, 2.5cqi,  20px);\n  --widget-status-size: clamp(14px, 5cqi,    36px);\n  --widget-value-size:  clamp(18px, 7cqi,    48px);\n  --widget-badge-size:  clamp(11px, 1.6cqi,  14px);\n}\n\n/* Shell material. Two channels, both host/variant-driven:\n * - `--widget-backdrop`: the live backdrop filter (the shared glass recipe is\n *   blur + saturate, matching ui's CARD_BLUR). Default none — a variant opts\n *   in (classic-glass), and a performant-blur host disables it via override\n *   sheet when it paints a precomputed frost instead.\n * - `--glass-frost`: one full background layer (image + position / size +\n *   repeat) composited at the BOTTOM, under the accent gradient — the same\n *   frost slot ui's `.glass` formula ends its background list with. Unset →\n *   none. A performant-blur host sets it per shell with the viewport-aligned\n *   slice of its pre-blurred bitmap. */\n.glasshome-widget {\n  background:\n    var(--widget-gradient,\n      linear-gradient(135deg,\n        color-mix(in oklch, var(--widget-color) calc(22% * var(--widget-grad-strength)), transparent),\n        color-mix(in oklch, var(--widget-color-to, var(--widget-color)) calc(11% * var(--widget-grad-strength)), transparent)\n      )\n    ),\n    var(--glass-frost, none);\n  backdrop-filter: var(--widget-backdrop, none);\n  -webkit-backdrop-filter: var(--widget-backdrop, none);\n  box-shadow: inset 0 1px 0 var(--widget-border-highlight);\n}\n\n/* === Slot: content layout === */\n/* Default: column. Flip to row only on wide-and-short widgets (matches the\n * old contentLayout heuristic: aspect > 1 AND height < 150px). */\n.glasshome-widget-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  padding: var(--widget-pad);\n  gap: var(--widget-gap);\n  overflow: hidden;\n}\n@container widget (min-aspect-ratio: 1) and (max-height: 149px) {\n  .glasshome-widget-content {\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n  }\n}\n\n/* === Compact 1×1 ===\n * Small in BOTH axes → stack the tile: icon on top, label + status centered\n * under it. Icon stays moderate (not a hero) so the text keeps room. Wide\n * tiles (2×1) fail the width test and keep the row layout above. Placed after\n * the row-flip so it wins. */\n@container widget (max-width: 189px) and (max-height: 189px) {\n  .glasshome-widget-content {\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    gap: clamp(4px, 2.5cqmin, 8px);\n  }\n  .glasshome-widget-content > * { align-items: center; text-align: center; }\n  .glasshome-widget-icon {\n    --widget-icon-box:   clamp(36px, 30cqmin, 56px);\n    --widget-icon-glyph: clamp(20px, 17cqmin, 32px);\n  }\n  .glasshome-widget-title  { font-size: clamp(11px, 6cqmin, 14px); max-width: 100%; }\n  .glasshome-widget-status,\n  .glasshome-widget-value  { font-size: clamp(13px, 7cqmin, 17px); }\n  .glasshome-widget-content [class*=\"ml-auto\"] { margin-left: 0 !important; }\n}\n.glasshome-widget-content [class*=\"ml-auto\"] {\n  position: relative;\n  z-index: 30;\n}\n\n/* === Slot: icon === */\n.glasshome-widget-icon {\n  width: var(--widget-icon-box);\n  height: var(--widget-icon-box);\n  border-radius: var(--radius-sm, 12px);\n  background: var(--widget-icon-color, var(--widget-color));\n  box-shadow: 0 0 calc(var(--widget-glow-strength) * 30px)\n    color-mix(in oklch, var(--widget-icon-color, var(--widget-color)) 50%, transparent);\n  color: oklch(from var(--widget-icon-color, var(--widget-color)) calc(0.52 + sign(0.5 - l) * 0.43) calc(c * 0.2) h);\n}\n.glasshome-widget-icon-glyph {\n  font-size: var(--widget-icon-glyph);\n  line-height: 1;\n}\n.glasshome-widget-icon-stack {\n  position: absolute;\n  width: 102%;\n  height: 102%;\n  border-radius: var(--radius-sm, 12px);\n}\n.glasshome-widget-icon-stack-2 { bottom: -14%; right: -10%; opacity: 0.45; z-index: -2; }\n.glasshome-widget-icon-stack-3 { bottom: -28%; right: -20%; opacity: 0.20; z-index: -3; }\n\n/* === Slot: text === */\n.glasshome-widget-title {\n  font-size: var(--widget-title-size);\n  line-height: 1.2;\n  color: color-mix(in oklch, var(--color-foreground, currentColor) 60%, transparent);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.glasshome-widget-subtitle {\n  font-size: var(--widget-subtitle);\n  color: color-mix(in oklch, var(--color-foreground, currentColor) 60%, transparent);\n}\n.glasshome-widget-status {\n  font-size: var(--widget-status-size);\n  font-weight: 700;\n  color: var(--color-foreground, currentColor);\n  line-height: 1.1;\n}\n.glasshome-widget-value {\n  font-size: var(--widget-value-size);\n  font-weight: 700;\n  color: var(--color-foreground, currentColor);\n  line-height: 1.05;\n}\n.glasshome-widget-badge {\n  font-size: var(--widget-badge-size);\n  font-weight: 500;\n  padding: 0.125rem 0.5rem;\n  border-radius: 9999px;\n  background: color-mix(in oklch, var(--color-foreground, currentColor) 20%, transparent);\n  color: var(--color-foreground, currentColor);\n}\n\n.glasshome-widget-loading {\n  background: color-mix(in oklch, var(--widget-color) 20%, transparent);\n}\n\n/* === Slider fill ===\n * Value flows in via --widget-fill-value (0-100). Vertical orientation auto-\n * detected via container query. */\n.glasshome-widget-slider-fill {\n  --widget-fill-value: 0;\n  background: color-mix(in oklch, var(--widget-icon-color, var(--widget-color)) 30%, transparent);\n  box-shadow: 0 0 calc(var(--widget-glow-strength) * 40px)\n    color-mix(in oklch, var(--widget-icon-color, var(--widget-color)) 40%, transparent);\n  clip-path: inset(0 calc((100 - var(--widget-fill-value)) * 1%) 0 0);\n}\n@container widget (max-aspect-ratio: 1) {\n  .glasshome-widget-slider-fill {\n    clip-path: inset(calc((100 - var(--widget-fill-value)) * 1%) 0 0 0);\n  }\n}\n", a = !1, o, s = /* @__PURE__ */ new WeakSet();
-function c() {
-	return o || (o = new CSSStyleSheet(), o.replaceSync(i.replace(/:root\b/g, ":host").replace(/^\.dark\b/gm, ":host(.dark)"))), o;
-}
-function l(e) {
-	if (typeof ShadowRoot < "u" && e instanceof ShadowRoot) {
-		if (s.has(e)) return;
-		let t = c();
-		e.adoptedStyleSheets.includes(t) || (e.adoptedStyleSheets = [...e.adoptedStyleSheets, t]), s.add(e);
-		return;
-	}
-	if (a) return;
-	let t = e ?? (typeof document > "u" ? void 0 : document);
-	if (!t) return;
-	if (t.head.querySelector?.("style[data-glasshome-tokens]")) {
-		a = !0;
-		return;
-	}
-	let n = t.createElement("style");
-	n.setAttribute("data-glasshome-tokens", ""), n.textContent = i, t.head.appendChild(n), a = !0;
-}
-//#endregion
-export { n, r, l as t };