@glasshome/widget-cli 0.10.1 → 0.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glasshome/widget-cli",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "CLI for creating and managing GlassHome widgets",
   "type": "module",
   "bin": {
@@ -28,9 +28,9 @@
     "@fontsource-variable/caveat": "^5.2.8",
     "@fontsource-variable/geist": "^5.2.9",
     "@fontsource-variable/geist-mono": "^5.2.8",
-    "@glasshome/sync-layer": "0.5.0",
+    "@glasshome/sync-layer": "0.7.0",
     "@glasshome/widget-contract": "0.2.0",
-    "@glasshome/widget-sdk": "1.9.0",
+    "@glasshome/widget-sdk": "1.10.0",
     "@iconify-json/lucide": "^1.2.0",
     "@iconify-json/mdi": "^1.2.3",
     "@tailwindcss/vite": "^4.1.13",

package/src/commands/publish.ts

@@ -193,6 +193,10 @@ export async function runPublish(
     process.exit(1);
   }
 
+  // Re-read after the build: it rewrites the bundle-owned manifest keys, and
+  // serializing the pre-build object would ship them one publish behind.
+  const builtManifest = readManifest(cwd, widgetName);
+
   // Step 7: Publish
   const distPath = resolve(cwd, "dist", `${widgetName}.js`);
 
@@ -217,37 +221,37 @@ export async function runPublish(
     ? createHash("sha256").update(cssBuffer).digest("hex")
     : undefined;
 
-  s.start(`Publishing ${manifest.name}@${version}...`);
+  s.start(`Publishing ${builtManifest.name}@${version}...`);
 
   let publishData: Awaited<ReturnType<typeof requestPublish>>;
   try {
     publishData = await requestPublish(hubUrl, token!, {
       scope,
       name: widgetName,
-      displayName: manifest.name,
-      description: manifest.description,
-      icon: manifest.icon,
-      minSize: manifest.minSize,
-      maxSize: manifest.maxSize,
-      sdkVersion: manifest.sdkVersion,
+      displayName: builtManifest.name,
+      description: builtManifest.description,
+      icon: builtManifest.icon,
+      minSize: builtManifest.minSize,
+      maxSize: builtManifest.maxSize,
+      sdkVersion: builtManifest.sdkVersion,
       version,
       bundleSize: bundleBuffer.byteLength,
       sha256Hash,
       ...(cssBuffer && cssSha256Hash
         ? { cssSize: cssBuffer.byteLength, cssSha256Hash }
         : {}),
-      manifestJson: JSON.stringify(manifest),
+      manifestJson: JSON.stringify(builtManifest),
     });
   } catch (err: any) {
     if (err.status === 409) {
-      s.stop(`${manifest.name}@${version} already published, bump version to republish`);
+      s.stop(`${builtManifest.name}@${version} already published, bump version to republish`);
       process.exit(0);
     }
     s.stop(`Publish failed: ${err.message}`);
     process.exit(1);
   }
 
-  s.message(`Uploading ${manifest.name} to CDN...`);
+  s.message(`Uploading ${builtManifest.name} to CDN...`);
   try {
     await uploadToR2(publishData.uploadUrl, bundleBuffer);
   } catch (err: any) {
@@ -262,7 +266,7 @@ export async function runPublish(
       );
       process.exit(1);
     }
-    s.message(`Uploading ${manifest.name} styles to CDN...`);
+    s.message(`Uploading ${builtManifest.name} styles to CDN...`);
     try {
       await uploadToR2(publishData.cssUploadUrl, cssBuffer, "text/css");
     } catch (err: any) {
@@ -271,10 +275,10 @@ export async function runPublish(
     }
   }
 
-  s.message(`Confirming ${manifest.name}...`);
+  s.message(`Confirming ${builtManifest.name}...`);
   try {
     const result = await confirmPublish(hubUrl, token!, publishData.versionId);
-    s.stop(`Published ${manifest.name}@${version}`);
+    s.stop(`Published ${builtManifest.name}@${version}`);
     log.info(`CDN: ${result.bundleUrl}`);
     if (result.cssUrl) log.info(`CSS: ${result.cssUrl}`);
   } catch (err: any) {

package/src/preview/harness/harness.tsx

@@ -1,7 +1,6 @@
 import type { ReactiveWidgetContext, WidgetDefinition } from "@glasshome/widget-sdk";
 import { instantiateWidget } from "@glasshome/widget-sdk/host";
-import { loadDemoData } from "@glasshome/sync-layer";
-import { getEntityView } from "@glasshome/sync-layer";
+import { claimHostApi, getEntityView } from "@glasshome/sync-layer";
 import { byDomain, useAreas, useEntities } from "@glasshome/sync-layer/solid";
 import type { EntityDataAdapter } from "@glasshome/ui/solid";
 import { provideEntityData } from "@glasshome/ui/solid";
@@ -85,7 +84,13 @@ async function loadWidget(name: string): Promise<{ def: WidgetDefinition; css: s
 // Grid geometry mirrored from the dash route (rowHeight 70, margin 16, lg 12
 // cols at a 1024px reference container). A preview approximates one dashboard
 // width rather than mirroring every breakpoint.
-const CONTAINER = 1024;
+// max-w-7xl (1280px) minus the route's px-3 padding, i.e. the width the grid
+// actually gets on a desktop dashboard. NOT the lg breakpoint's 1024 minimum:
+// that is the narrowest a desktop can be, and using it rendered every
+// size-responsive widget one tier below what users see (energy-flow never
+// reached its node-graph tier, so the storefront advertised the compact
+// layout).
+const CONTAINER = 1256;
 const COLS = 12;
 const GAP = 16;
 const ROW_H = 70;
@@ -98,11 +103,26 @@ function tilePx(size: { w: number; h: number }): { width: number; height: number
   };
 }
 
+/* The shell composites `--glass-frost` as its bottom background layer and
+   defaults it to `none`, because in the app a live backdrop-filter blurs the
+   dashboard wallpaper behind the widget. A preview is shot alone on a
+   transparent page, so there is nothing to blur and the widget would render
+   with no surface at all: legible by luck in light mode, white-on-nothing in
+   dark. ui registers --glass-frost with `inherits: false`, so it cannot be
+   handed down from the host and has to be set on the shell element itself,
+   which is what dash's performant-blur override sheet does too.
+
+   `--card` is an ordinary inheriting theme token, so it crosses the shadow
+   boundary and follows the `dark` class already mirrored onto the host. */
+const FROST_SHEET = new CSSStyleSheet();
+FROST_SHEET.replaceSync(
+  ".glasshome-widget { --glass-frost: linear-gradient(var(--card), var(--card)); }",
+);
+
 /** Mount via the shared SDK recipe (`@glasshome/widget-sdk/host`): closed shadow
     root, injected tokens, adopted widget CSS, WidgetCtx provider, `dark`
-    mirrored onto the host. No perf-blur/a11y override sheet — not needed for a
-    static shot, so no `extraSheets`; `dark` is the default `mirrorClasses`. The
-    `dark` document class is toggled by the caller before this runs. */
+    mirrored onto the host. `dark` is the default `mirrorClasses`; the `dark`
+    document class is toggled by the caller before this runs. */
 function mount(
   host: HTMLElement,
   def: WidgetDefinition,
@@ -115,6 +135,7 @@ function mount(
     config: () => config,
     ctx,
     cssText,
+    extraSheets: [FROST_SHEET],
     onCrash: (err) => console.error("[harness] widget threw:", err),
   });
 }
@@ -144,7 +165,11 @@ async function main(): Promise<void> {
   // triggers the (now dead) network lookup and renders blank.
   await preloadIcons();
 
-  await loadDemoData();
+  // The harness is a host: claim the privileged surface once at boot
+  // (sync-layer keeps demo control off the widget-reachable entry).
+  const hostApi = claimHostApi();
+  if (!hostApi) throw new Error("harness: host API already claimed");
+  await hostApi.loadDemoData();
 
   // Background and padding are the renderer's job: the preview is the widget
   // alone, tight and transparent (omitBackground on capture).