@glasshome/widget-sdk 1.6.1 → 1.8.0

package/dist/tokens-Bdfb1xYe.js

@@ -0,0 +1,33 @@
+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.glasshome-widget {\n  background: 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  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 };

package/dist/vite/index.d.ts

@@ -3,6 +3,32 @@ export interface GlasshomeWidgetOptions {
     /** Entry file for the widget (default: "src/index.tsx") */
     entry?: string;
 }
+/**
+ * Most previews anyone will look at, and the ceiling the hub renders to.
+ *
+ * Declaring more than this used to mean the extras were quietly not rendered:
+ * the gallery looked complete and was not. Failing the build instead makes the
+ * author decide which states matter rather than discovering the loss never.
+ */
+export declare const MAX_EXAMPLES = 20;
+/**
+ * Configuration-drift guard (D-11). Imports the built bundle, derives the JSON
+ * Schema from its configSchema, and compares against the recorded
+ * `.schema-hash`. A shape change without a configVersion bump fails the build:
+ * tsc cannot catch this class of break because the old persisted config still
+ * parses, only its meaning shifts. Legacy plain-hash records (written by
+ * pre-1.7 builds) cannot prove a missing bump, so they only warn, then upgrade
+ * to the JSON record format.
+ *
+ * When `manifestPath` is given (single-widget projects), the generated JSON
+ * Schema is also written into `manifest.json` as `schema`.
+ */
+export declare function runSchemaGuard(args: {
+    outFile: string;
+    hashFile: string;
+    widgetName: string;
+    manifestPath?: string;
+}): Promise<void>;
 /**
  * Packages provided by the host import map — widgets must not bundle these.
  * Delegates to the shared list in @glasshome/widget-contract so the host's

package/dist/vite/index.js

@@ -10,17 +10,75 @@ function v(e) {
 	let t = JSON.stringify(e, Object.keys(e).sort());
 	return r("sha256").update(t).digest("hex").slice(0, 16);
 }
-var y = "virtual:glasshome-widget", b = "\0virtual:glasshome-widget", x = "/@glasshome/preview";
-function S(e) {
+var y = 20;
+async function b(e, t) {
+	if (e === void 0) return;
+	let n;
+	try {
+		({z: n} = await import("zod"));
+	} catch {
+		return;
+	}
+	let r = n.number().int().positive(), i = n.array(n.object({
+		config: n.record(n.string(), n.unknown()),
+		size: n.object({
+			w: r,
+			h: r
+		}),
+		label: n.string().optional()
+	})).max(20).safeParse(e);
+	if (i.success) return;
+	let a = i.error.issues.map((e) => `  examples${e.path.length ? `[${e.path.join("][")}]` : ""}: ${e.message}`).join("\n");
+	throw Error(`[widget-sdk] Invalid \`examples\` for "${t}":\n${a}\nEach example needs a \`config\` object and a \`size\` of whole positive tiles, and at most 20 are rendered.`);
+}
+async function x(e) {
+	if (!i(e.outFile)) return;
+	let t;
+	try {
+		t = (await import(`${e.outFile}?t=${Date.now()}`)).default;
+	} catch {
+		return;
+	}
+	if (await b(t?.manifest?.examples, t?.manifest?.name ?? e.widgetName), !t?.configSchema) return;
+	let n;
+	try {
+		let { z: e } = await import("zod");
+		n = e.toJSONSchema(t.configSchema, { unrepresentable: "any" });
+	} catch {
+		return;
+	}
+	if (e.manifestPath && i(e.manifestPath)) {
+		let t = JSON.parse(o(e.manifestPath, "utf-8"));
+		t.schema = n, u(e.manifestPath, JSON.stringify(t, null, 2));
+	}
+	let r = v(n), a = t.manifest?.configVersion ?? null, s = t.manifest?.name ?? e.widgetName;
+	if (i(e.hashFile)) {
+		let t = o(e.hashFile, "utf-8").trim(), n = null;
+		if (t.startsWith("{")) try {
+			n = JSON.parse(t);
+		} catch {
+			n = null;
+		}
+		if (n) {
+			if (n.hash !== r && n.configVersion === a) throw Error(`[widget-sdk] Config schema shape changed for "${s}" without a configVersion bump. Bump configVersion in defineWidget (currently ${a ?? "unset"}) or revert the schema change, then rebuild. Recorded in ${e.hashFile}`);
+		} else t !== r && console.warn(`[widget-sdk] Schema shape changed for "${s}" — verify configVersion was bumped`);
+	}
+	u(e.hashFile, `${JSON.stringify({
+		hash: r,
+		configVersion: a
+	})}\n`);
+}
+var S = "virtual:glasshome-widget", C = "\0virtual:glasshome-widget", w = "/@glasshome/preview";
+function T(e) {
 	return h === "\\" ? e.split(h).join("/") : e;
 }
-function C() {
+function E() {
 	return m(f(g(import.meta.url)), "../../preview");
 }
-function w(e) {
+function D(e) {
 	return t(e);
 }
-function T() {
+function O() {
 	return {
 		name: "glasshome-widget:sync-layer-guard",
 		apply: "build",
@@ -30,15 +88,15 @@ function T() {
 		}
 	};
 }
-var E = "node_modules/.cache/glasshome-widgets";
-function D(e) {
+var k = "node_modules/.cache/glasshome-widgets";
+function A(e) {
 	try {
 		return d(p(process.cwd(), "package.json")).resolve(e);
 	} catch {
 		return null;
 	}
 }
-var O = [
+var j = [
 	"--radius",
 	"--background",
 	"--foreground",
@@ -48,21 +106,21 @@ var O = [
 	"--muted",
 	"--accent"
 ];
-function k(e, t) {
+function M(e, t) {
 	let n = p(e, `${t}.css`);
 	if (!i(n)) return;
 	let r = o(n, "utf-8");
 	for (let e of r.matchAll(/:host[^{]*\{([^}]*)\}/g)) {
-		let n = e[1] ?? "", r = O.find((e) => n.includes(`${e}:`));
+		let n = e[1] ?? "", r = j.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 A(e, t, n) {
-	let r = m(e, E);
+function N(e, t, n) {
+	let r = m(e, k);
 	a(r, { recursive: !0 });
-	let o = D("@glasshome/ui/styles");
+	let o = A("@glasshome/ui/styles");
 	if (!o) 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 s = m(f(o), "../.."), c = D("@glasshome/widget-sdk/tailwind-sources"), l = c ? f(c) : null, d = [
+	let s = m(f(o), "../.."), c = A("@glasshome/widget-sdk/tailwind-sources"), l = c ? f(c) : null, d = [
 		p(s, "src"),
 		p(s, "dist"),
 		...l ? [p(l, "src"), p(l, "dist")] : [],
@@ -72,7 +130,7 @@ function A(e, t, n) {
 		"@import \"tailwindcss\" source(none);",
 		"@import \"tw-animate-css\";",
 		"@import \"@glasshome/ui/styles/theme\";",
-		...d.map((e) => `@source "${S(e)}";`),
+		...d.map((e) => `@source "${T(e)}";`),
 		"@custom-variant dark {",
 		"  &:is(.dark *) { @slot }",
 		"  :host(.dark) & { @slot }",
@@ -81,17 +139,17 @@ function A(e, t, n) {
 	].join("\n"));
 	let g = m(r, `${t}.entry.ts`);
 	return u(g, [
-		`import "${S(h)}";`,
-		`export { default } from "${S(n)}";`,
+		`import "${T(h)}";`,
+		`export { default } from "${T(n)}";`,
 		""
 	].join("\n")), g;
 }
-function j() {
+function P() {
 	let e = _();
 	for (let t of e) t.apply ??= "build";
 	return e;
 }
-function M(e) {
+function F(e) {
 	let t = [];
 	if (!i(e)) return t;
 	for (let n of s(e)) {
@@ -105,7 +163,7 @@ function M(e) {
 	}
 	return t;
 }
-function N(t, r) {
+function I(t, r) {
 	let c = [];
 	if (i(t)) for (let a of s(t)) {
 		if (!l(p(t, a)).isDirectory()) continue;
@@ -128,8 +186,8 @@ function N(t, r) {
 	};
 	i(r) || a(r, { recursive: !0 }), u(p(r, "registry.json"), JSON.stringify(d, null, 2)), console.log(`[registry] Generated registry.json with ${c.length} widget(s)`);
 }
-async function P(e) {
-	let { build: t } = await import("vite"), n = process.cwd(), r = m(n, e?.srcDir ?? "src"), o = m(n, e?.outDir ?? "dist"), s = M(r);
+async function L(e) {
+	let { build: t } = await import("vite"), n = process.cwd(), r = m(n, e?.srcDir ?? "src"), o = m(n, e?.outDir ?? "dist"), s = F(r);
 	if (s.length === 0) {
 		console.warn("[glasshome-widgets] No widgets found in", r);
 		return;
@@ -143,29 +201,33 @@ async function P(e) {
 		configFile: !1,
 		root: n,
 		plugins: [
-			...j(),
+			...P(),
 			...e?.plugins ?? [],
-			T()
+			O()
 		],
 		...e?.viteConfig,
 		build: {
 			lib: {
-				entry: A(n, r.name, r.entry),
+				entry: N(n, r.name, r.entry),
 				formats: ["es"],
 				fileName: r.name,
 				cssFileName: r.name
 			},
-			rollupOptions: { external: w },
+			rollupOptions: { external: D },
 			outDir: o,
 			emptyOutDir: !1,
 			copyPublicDir: !1,
 			...e?.viteConfig?.build
 		},
 		logLevel: "warn"
-	}), k(o, r.name);
-	N(r, o);
+	}), M(o, r.name), await x({
+		outFile: p(o, `${r.name}.js`),
+		hashFile: p(f(r.entry), ".schema-hash"),
+		widgetName: r.name
+	});
+	I(r, o);
 }
-function F(e) {
+function R(e) {
 	let t = e?.entry ?? "src/index.tsx", n = {
 		name: "glasshome-widget:build",
 		apply: "build",
@@ -173,12 +235,12 @@ function F(e) {
 			let e = process.cwd();
 			return { build: {
 				lib: {
-					entry: A(e, "index", m(e, t)),
+					entry: N(e, "index", m(e, t)),
 					formats: ["es"],
 					fileName: "index",
 					cssFileName: "index"
 				},
-				rollupOptions: { external: w }
+				rollupOptions: { external: D }
 			} };
 		}
 	}, r = {
@@ -186,7 +248,7 @@ function F(e) {
 		apply: "serve",
 		enforce: "pre",
 		config() {
-			let e = C(), t = process.cwd();
+			let e = E(), t = process.cwd();
 			return { server: { fs: { allow: [
 				e,
 				t,
@@ -194,7 +256,7 @@ function F(e) {
 			] } } };
 		},
 		configureServer(e) {
-			let t = p(C(), "preview.html");
+			let t = p(E(), "preview.html");
 			e.middlewares.use(async (n, r, i) => {
 				if (n.url === "/" || n.url === "/index.html") try {
 					let i = o(t, "utf-8");
@@ -206,44 +268,33 @@ function F(e) {
 			});
 		},
 		resolveId(e) {
-			if (e === x) return S(p(C(), "host.tsx"));
-			if (e === y) return b;
+			if (e === w) return T(p(E(), "host.tsx"));
+			if (e === S) return C;
 		},
 		load(e) {
-			if (e === b) return `export { default } from "${S(m(process.cwd(), t))}";`;
+			if (e === C) return `export { default } from "${T(m(process.cwd(), t))}";`;
 		}
-	}, a = {
+	}, i = {
 		name: "glasshome-widget:schema",
 		apply: "build",
 		async closeBundle() {
-			k(m(process.cwd(), "dist"), "index");
-			let e = m(process.cwd(), "dist", "index.js");
-			if (i(e)) try {
-				let t = (await import(`${e}?t=${Date.now()}`)).default;
-				if (!t?.configSchema) return;
-				let { z: n } = await import("zod"), r = n.toJSONSchema(t.configSchema, { unrepresentable: "any" }), a = m(process.cwd(), "manifest.json");
-				if (i(a)) {
-					let e = JSON.parse(o(a, "utf-8"));
-					e.schema = r, u(a, JSON.stringify(e, null, 2));
-				}
-				let s = v(r), c = m(process.cwd(), ".schema-hash");
-				if (i(c) && o(c, "utf-8").trim() !== s) {
-					let e = t.manifest?.name ?? "unknown";
-					console.warn(`[widget-sdk] Schema shape changed for "${e}" — verify configVersion was bumped`);
-				}
-				u(c, s);
-			} catch {}
+			M(m(process.cwd(), "dist"), "index"), await x({
+				outFile: m(process.cwd(), "dist", "index.js"),
+				hashFile: m(process.cwd(), ".schema-hash"),
+				widgetName: "index",
+				manifestPath: m(process.cwd(), "manifest.json")
+			});
 		}
 	};
 	return [
-		...j(),
+		...P(),
 		n,
-		T(),
-		a,
+		O(),
+		i,
 		r
 	];
 }
-function I(e) {
+function z(e) {
 	let t = e?.srcDir ?? "src", n = e?.outDir ?? "dist", r = [];
 	return [{
 		name: "glasshome-widgets:build",
@@ -262,7 +313,7 @@ function I(e) {
 			if (e === "\0glasshome-noop") return "export {}";
 		},
 		async closeBundle() {
-			await P({
+			await L({
 				srcDir: t,
 				outDir: n,
 				plugins: r
@@ -271,4 +322,4 @@ function I(e) {
 	}];
 }
 //#endregion
-export { P as buildWidgets, M as discoverWidgets, N as generateRegistry, F as glasshomeWidget, I as glasshomeWidgets, w as isWidgetExternal };
+export { y as MAX_EXAMPLES, L as buildWidgets, F as discoverWidgets, I as generateRegistry, R as glasshomeWidget, z as glasshomeWidgets, D as isWidgetExternal, x as runSchemaGuard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glasshome/widget-sdk",
-  "version": "1.6.1",
+  "version": "1.8.0",
   "description": "SDK for building GlassHome dashboard widgets with SolidJS",
   "keywords": [
     "glasshome",
@@ -32,6 +32,11 @@
       "types": "./dist/deprecations.d.ts",
       "import": "./dist/deprecations.js"
     },
+    "./host": {
+      "@glasshome/source": "./src/host/index.ts",
+      "types": "./dist/host/index.d.ts",
+      "import": "./dist/host/index.js"
+    },
     "./vite": {
       "@glasshome/source": "./src/vite/index.ts",
       "types": "./dist/vite/index.d.ts",