@glasshome/widget-cli 0.14.5 → 0.15.0

package/bin/cli.ts

@@ -23,7 +23,7 @@ glasshome-widget <command> [--dir <path>] [options]
 
 Commands:
   create                 Create a new widget project (default when no project found)
-  add                    Add a new widget to the project
+  add                    Add a new widget to the project (prompts, or --name <widget> [--description <text>])
   build                  Build all widgets (per-widget, self-contained bundles)
   connect <url>          Connect to a running dashboard for live testing
                          --re-auth discards stored credentials and re-runs device approval
@@ -49,6 +49,7 @@ Examples:
   glasshome-widget                              Create a new widget project
   glasshome-widget create                       Create a new widget project
   glasshome-widget add
+  glasshome-widget add --name plant --description "How thirsty the plant is"
   glasshome-widget build
   glasshome-widget connect http://localhost:3333
   glasshome-widget preview
@@ -76,6 +77,7 @@ const { values: flags, positionals } = parseArgs({
   options: {
     dir: { type: "string" },
     name: { type: "string" },
+    description: { type: "string" },
     bump: { type: "string" },
     scope: { type: "string" },
     to: { type: "string" },
@@ -132,7 +134,10 @@ switch (effectiveCommand) {
 
   case "add": {
     const { runAdd } = await import("../src/commands/add");
-    await runAdd(resolveWidgetDir());
+    await runAdd(resolveWidgetDir(), {
+      name: str(flags.name),
+      description: str(flags.description),
+    });
     outro("Done");
     break;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glasshome/widget-cli",
-  "version": "0.14.5",
+  "version": "0.15.0",
   "description": "CLI for creating and managing GlassHome widgets",
   "keywords": [
     "cli",
@@ -45,13 +45,14 @@
     "@fontsource-variable/caveat": "^5.2.8",
     "@fontsource-variable/geist": "^5.2.9",
     "@fontsource-variable/geist-mono": "^5.2.8",
-    "@glasshome/sync-layer": "0.10.2",
+    "@glasshome/sync-layer": "0.11.0",
     "@glasshome/widget-contract": "0.3.0",
-    "@glasshome/widget-sdk": "1.18.1",
+    "@glasshome/widget-sdk": "1.19.0",
     "@iconify-json/lucide": "^1.2.0",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/utils": "^3.1.4",
     "@tailwindcss/vite": "^4.1.13",
+    "iconify-icon": "^3.0.2",
     "open": "^11.0.0",
     "picocolors": "^1.1.1",
     "semver": "^7.6.0",

package/src/commands/add.ts

@@ -45,17 +45,15 @@ export function scaffoldWidget(
   srcContent = srcContent.replace(/SDK_RANGE/g, sdkRange);
   writeFileSync(resolve(widgetDir, "index.tsx"), srcContent);
 
-  // Generate manifest.json. `capabilities` is required for any SDK >= 1.0.0
-  // range and an empty array is the honest default: a fresh widget reads
-  // nothing from Home Assistant, and the declaration is what consent shows.
+  // Matches the template's inline manifest: it reads one sensor.
   const manifest = {
     name: displayName,
     description: widgetDescription,
     minSize: { w: 1, h: 1 },
-    maxSize: { w: 4, h: 4 },
+    maxSize: { w: 8, h: 8 },
     defaultSize: { w: 2, h: 2 },
     sdkVersion: sdkRange,
-    capabilities: [],
+    capabilities: [{ domain: "sensor", access: "read" }],
     version: "0.1.0",
   };
   writeFileSync(resolve(widgetDir, "manifest.json"), `${JSON.stringify(manifest, null, 2)}\n`);
@@ -99,7 +97,10 @@ export async function promptWidgetDetails(defaults?: { widgetName?: string }): P
   };
 }
 
-export async function runAdd(cwd: string): Promise<void> {
+export async function runAdd(
+  cwd: string,
+  flags: { name?: string; description?: string } = {},
+): Promise<void> {
   // Verify project structure
   const srcDir = resolve(cwd, "src");
   if (!existsSync(srcDir)) {
@@ -107,8 +108,14 @@ export async function runAdd(cwd: string): Promise<void> {
     process.exit(1);
   }
 
-  const details = await promptWidgetDetails();
+  const details = flags.name
+    ? { widgetName: flags.name, description: flags.description ?? "" }
+    : await promptWidgetDetails();
   if (!details) process.exit(0);
+  if (!/^[a-z][a-z0-9-]*$/.test(details.widgetName)) {
+    log.error("--name must be lowercase letters, digits and hyphens, starting with a letter.");
+    process.exit(1);
+  }
 
   const widgetDir = resolve(srcDir, details.widgetName);
   if (existsSync(widgetDir)) {

package/src/commands/create.ts

@@ -11,6 +11,7 @@ import {
 import { dirname, join, resolve } from "node:path";
 import { cancel, confirm, log, note, spinner, text } from "@clack/prompts";
 import color from "picocolors";
+import { writeAgentStubs } from "../utils/agent-guide";
 import { cancelled } from "../utils/prompt";
 import { defaultSdkRange, FALLBACK_SDK_RANGE } from "../utils/sdk-version";
 import { getCliVersion } from "../utils/version";
@@ -140,6 +141,7 @@ export async function runCreate() {
 
     // Create the first widget in src/{widgetName}/
     scaffoldWidget(targetDir, widgetDetails);
+    writeAgentStubs(targetDir);
 
     s.stop("Widget project created!");
 

package/src/commands/preview.ts

@@ -1,7 +1,6 @@
 import { log } from "@clack/prompts";
 import color from "picocolors";
-import { capturePreviews } from "../preview/capture";
-import { type Box, DEFAULT_SIZES, runSweep, type Theme } from "../preview/sweep";
+import type { Box, Theme } from "../preview/sweep";
 import { withQuietStdout } from "../utils/quiet";
 
 /**
@@ -9,9 +8,7 @@ import { withQuietStdout } from "../utils/quiet";
  * `<project>/preview/`, rendered through the same constraints as the hub's
  * render worker: frozen clock, DNS blackhole, per-render timeout, hash pin.
  *
- * Playwright is an OPTIONAL peer — the CLI stays Chromium-free by default — so
- * detect it first and give an actionable install hint rather than a raw
- * module-not-found when it is absent.
+ * Playwright is an optional peer: check for it before importing anything that loads it.
  */
 async function requirePlaywright(): Promise<void> {
   try {
@@ -31,6 +28,7 @@ const progress = (m: string) => {
 
 export async function runPreview(cwd: string, names: string[], isolate: boolean): Promise<void> {
   await requirePlaywright();
+  const { capturePreviews } = await import("../preview/capture");
 
   log.info(names.length ? `Previewing ${names.join(", ")}` : "Previewing all widgets");
 
@@ -46,15 +44,16 @@ export async function runPreview(cwd: string, names: string[], isolate: boolean)
 
   const hangs = summary.failures.filter((f) => f.kind === "hang");
   const integrity = summary.failures.filter((f) => f.kind === "integrity");
+  const crashes = summary.failures.filter((f) => f.kind === "crash");
   const networkWidgets = [
     ...new Set(summary.failures.filter((f) => f.kind === "network").map((f) => f.widget)),
   ];
-  const attempted = summary.shots + hangs.length;
+  const attempted = summary.shots + hangs.length + crashes.length;
 
   // Headline: plain count of what landed in preview/. A miss only matters if a
   // render could not complete (hangs) or a bundle changed under us (integrity).
   const out = color.cyan("preview/");
-  if (hangs.length || integrity.length) {
+  if (hangs.length || integrity.length || crashes.length) {
     log.warn(`Rendered ${summary.shots} of ${attempted} previews into ${out}`);
   } else {
     log.success(`Rendered ${summary.shots} previews (light + dark) into ${out}`);
@@ -64,6 +63,13 @@ export async function runPreview(cwd: string, names: string[], isolate: boolean)
     log.message(color.dim(`No examples to render: ${summary.skipped.join(", ")}`));
   }
 
+  if (crashes.length) {
+    log.error(
+      `Widget crashed (no image written):\n` +
+        crashes.map((f) => `  · ${f.widget}  ${f.detail}`).join("\n"),
+    );
+  }
+
   // Real miss: a render still too slow after one retry. Its slot is left without
   // a PNG; everything else rendered.
   if (hangs.length) {
@@ -97,7 +103,7 @@ export async function runPreview(cwd: string, names: string[], isolate: boolean)
   // Vite's dev server leaves live handles behind (file watchers, keep-alive
   // sockets from browsers that crashed mid-render), so the process would sit
   // idle forever after the verdict instead of exiting. Leave deliberately.
-  process.exit(hangs.length || integrity.length ? 1 : 0);
+  process.exit(hangs.length || integrity.length || crashes.length ? 1 : 0);
 }
 
 export interface SweepFlags {
@@ -120,9 +126,9 @@ function fail(message: string): never {
   process.exit(1);
 }
 
-function parseSizes(value: string | boolean | undefined): Box[] {
+function parseSizes(value: string | boolean | undefined, grid: Box[]): Box[] {
   if (value === undefined) return [];
-  if (value === "grid") return DEFAULT_SIZES;
+  if (value === "grid") return grid;
   return String(value)
     .split(",")
     .map((s) => {
@@ -163,6 +169,7 @@ export async function runSweepPreview(
   flags: SweepFlags,
 ): Promise<void> {
   await requirePlaywright();
+  const { DEFAULT_SIZES, runSweep } = await import("../preview/sweep");
   const at = flags.at ? new Date(flags.at) : undefined;
   if (at && Number.isNaN(at.getTime()))
     fail(`--at takes an ISO time like 2026-06-15T21:00:00 (got "${flags.at}")`);
@@ -176,7 +183,7 @@ export async function runSweepPreview(
       only: names,
       themes: parseThemes(flags.theme),
       examples,
-      sizes: parseSizes(flags.sizes),
+      sizes: parseSizes(flags.sizes, DEFAULT_SIZES),
       at,
       config: parseConfig(flags.config),
       services: flags.service ?? [],

package/src/commands/upgrade.ts

@@ -1,6 +1,7 @@
 import { existsSync, readFileSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { log, spinner } from "@clack/prompts";
+import { installedGuide, writeAgentStubs } from "../utils/agent-guide";
 import { discoverWidgets, readManifest, writeManifest } from "../utils/manifest";
 import { getInstalledSdkVersion } from "../utils/sdk-version";
 import { runValidate } from "./validate";
@@ -42,6 +43,18 @@ function findWorkspaceSdkVersion(monorepoRoot: string): string | null {
   return null;
 }
 
+function refreshAgentStubs(cwd: string): void {
+  const { skill, agents } = writeAgentStubs(cwd);
+  if (skill !== "kept" || agents !== "kept") {
+    log.info("Pointed your coding agent at the SDK's widget guide (.claude/skills, AGENTS.md)");
+  }
+  if (!installedGuide(cwd)) {
+    log.warn(
+      "The installed @glasshome/widget-sdk has no widget guide yet; your agent needs SDK 1.19 or later.",
+    );
+  }
+}
+
 /** Update sdkVersion in all manifest.json files. */
 function syncManifestSdkVersions(cwd: string, newVersion: string): void {
   const widgets = discoverWidgets(cwd);
@@ -136,6 +149,7 @@ export async function runUpgrade(cwd: string, options: UpgradeOptions = {}): Pro
       log.success(`Already up to date with workspace SDK (${sdkVersion})`);
       // Still sync manifests in case they're out of date
       syncManifestSdkVersions(cwd, sdkVersion);
+      refreshAgentStubs(cwd);
       return;
     }
 
@@ -153,6 +167,7 @@ export async function runUpgrade(cwd: string, options: UpgradeOptions = {}): Pro
 
     // Sync sdkVersion in all manifest.json files
     syncManifestSdkVersions(cwd, sdkVersion);
+    refreshAgentStubs(cwd);
 
     // Run validate to check compatibility
     log.info("Checking compatibility...");
@@ -176,6 +191,7 @@ export async function runUpgrade(cwd: string, options: UpgradeOptions = {}): Pro
     return;
   }
   syncManifestSdkVersions(cwd, installed);
+  refreshAgentStubs(cwd);
   const valid = await runValidate(cwd);
   if (valid) {
     log.success(`Upgraded to @glasshome/widget-sdk@${installed}`);

package/src/preview/capture.ts

@@ -5,6 +5,8 @@ import {
   hashWidgetArtifacts,
   settleAnimations,
   type SharedBrowser,
+  WidgetCrash,
+  assertNoCrash,
   watchEgress,
   withFreshBrowser,
   withRenderTimeout,
@@ -21,7 +23,7 @@ interface ShotListEntry {
 
 interface Failure {
   widget: string;
-  kind: "network" | "hang" | "integrity";
+  kind: "network" | "hang" | "integrity" | "crash";
   detail: string;
 }
 
@@ -134,6 +136,7 @@ export async function capturePreviews(opts: PreviewOptions): Promise<PreviewSumm
               });
               // Fire rAF-gated mount animations before capturing.
               await settleAnimations(page);
+              await assertNoCrash(page);
               await page.locator("#stage").screenshot({ path: file, omitBackground: true });
               for (const a of lock.attempts) widgetAttempts.add(a);
             };
@@ -162,15 +165,23 @@ export async function capturePreviews(opts: PreviewOptions): Promise<PreviewSumm
             // browser is why it stalled) and give it one clean retry before
             // recording a miss.
             let ok = false;
-            for (let tries = 0; tries < 2 && !ok; tries++) {
+            let crash: WidgetCrash | null = null;
+            for (let tries = 0; tries < 2 && !ok && !crash; tries++) {
               try {
                 await attempt();
                 ok = true;
-              } catch {
-                await shared?.recycle().catch(() => {});
+              } catch (err) {
+                if (err instanceof WidgetCrash) crash = err;
+                else await shared?.recycle().catch(() => {});
               }
             }
             if (ok) shot++;
+            else if (crash)
+              failures.push({
+                widget,
+                kind: "crash",
+                detail: `${label} (${theme}): ${crash.message}`,
+              });
             else failures.push({ widget, kind: "hang", detail: `${label} (${theme})` });
           }
         }

package/src/preview/constraints.ts

@@ -113,6 +113,14 @@ export async function freezeClock(page: Page): Promise<void> {
 }
 
 /** Advance the frozen clock enough to settle rAF-gated mount animations. */
+export class WidgetCrash extends Error {}
+
+/** Throws when the harness recorded a widget crash during mount. */
+export async function assertNoCrash(page: Page): Promise<void> {
+  const crash = await page.evaluate(() => document.documentElement.dataset.harnessCrash);
+  if (crash) throw new WidgetCrash(`widget crashed: ${crash}`);
+}
+
 export async function settleAnimations(page: Page, ms = 1_000): Promise<void> {
   await page.clock.runFor(ms);
 }

package/src/preview/harness/harness.tsx

@@ -141,6 +141,14 @@ FROST_SHEET.replaceSync(
 const UI_SHEET = new CSSStyleSheet();
 UI_SHEET.replaceSync(uiCss);
 
+/** Read by the capture driver, so a widget that throws fails the render instead of saving a blank shot. */
+function reportCrash(err: unknown): void {
+  document.documentElement.dataset.harnessCrash =
+    err instanceof Error ? `${err.name}: ${err.message}` : String(err);
+}
+addEventListener("error", (e) => reportCrash(e.error ?? e.message));
+addEventListener("unhandledrejection", (e) => reportCrash(e.reason));
+
 /** 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. `dark` is the default `mirrorClasses`; the `dark`
@@ -158,7 +166,10 @@ function mount(
     ctx,
     cssText,
     extraSheets: [UI_SHEET, FROST_SHEET],
-    onCrash: (err) => console.error("[harness] widget threw:", err),
+    onCrash: (err) => {
+      console.error("[harness] widget threw:", err);
+      reportCrash(err);
+    },
   });
 }
 

package/src/preview/serve.ts

@@ -73,6 +73,8 @@ export async function serveHarness(
     // build and dash mount). tailwindcss() compiles @glasshome/ui/styles so the
     // app theme tokens land on :root exactly as they do in dash.
     plugins: [tailwindcss(), solid({ solid: { delegateEvents: false } })],
+    // ui resolves to its Solid source; prebundling would compile that JSX as React unless ui is a direct dependency.
+    optimizeDeps: { exclude: ["@glasshome/ui"] },
     server: { fs: { allow: [tempRoot, ...ancestors(projectDir)] } },
   });
 

package/src/preview/sweep.ts

@@ -3,6 +3,7 @@ import { resolve } from "node:path";
 import type { Page } from "playwright";
 import { slug } from "./capture";
 import {
+  assertNoCrash,
   freezeClock,
   settleAnimations,
   watchEgress,
@@ -103,6 +104,7 @@ export async function runSweep(opts: SweepOptions): Promise<SweepSummary> {
       timeout: 20_000,
     });
     await settleAnimations(page);
+    await assertNoCrash(page);
     if (opts.click) {
       // Playwright's actionability checks wait on animation frames, which a frozen clock never runs.
       await page.clock.resume();

package/src/utils/agent-guide.test.ts

@@ -0,0 +1,68 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { writeAgentStubs } from "./agent-guide";
+
+const dirs: string[] = [];
+function project(): string {
+  const dir = mkdtempSync(join(tmpdir(), "agent-guide-"));
+  dirs.push(dir);
+  return dir;
+}
+afterEach(() => {
+  for (const dir of dirs.splice(0)) rmSync(dir, { recursive: true, force: true });
+});
+
+const skillPath = (dir: string) => join(dir, ".claude/skills/glasshome-widget/SKILL.md");
+const guide = "node_modules/@glasshome/widget-sdk/guide/widgets.md";
+
+describe("writeAgentStubs", () => {
+  test("a fresh project gets a skill and an AGENTS.md that point at the SDK's guide", () => {
+    const dir = project();
+    expect(writeAgentStubs(dir)).toEqual({ skill: "written", agents: "written" });
+    expect(readFileSync(skillPath(dir), "utf-8")).toStartWith("---\nname: glasshome-widget\n");
+    expect(readFileSync(skillPath(dir), "utf-8")).toContain(guide);
+    expect(readFileSync(join(dir, "AGENTS.md"), "utf-8")).toContain(guide);
+  });
+
+  test("running again changes nothing", () => {
+    const dir = project();
+    writeAgentStubs(dir);
+    expect(writeAgentStubs(dir)).toEqual({ skill: "kept", agents: "kept" });
+  });
+
+  test("an author's AGENTS.md keeps its text and gains one block, replaced in place later", () => {
+    const dir = project();
+    writeFileSync(join(dir, "AGENTS.md"), "# Mine\n\nUse tabs.\n");
+    writeAgentStubs(dir);
+    const once = readFileSync(join(dir, "AGENTS.md"), "utf-8");
+    expect(once).toStartWith("# Mine\n\nUse tabs.\n\n<!-- glasshome-widget:start -->");
+
+    writeFileSync(
+      join(dir, "AGENTS.md"),
+      once.replace(
+        /start -->[\s\S]*<!-- glasshome-widget:end/,
+        "start -->\nold\n<!-- glasshome-widget:end",
+      ),
+    );
+    expect(writeAgentStubs(dir).agents).toBe("updated");
+    expect(readFileSync(join(dir, "AGENTS.md"), "utf-8")).toBe(once);
+  });
+
+  test("an AGENTS.md whose block lost its end marker is left alone", () => {
+    const dir = project();
+    const broken = "# Mine\n\n<!-- glasshome-widget:start -->\nhalf a block\n\nMore of mine.\n";
+    writeFileSync(join(dir, "AGENTS.md"), broken);
+    expect(writeAgentStubs(dir).agents).toBe("kept");
+    expect(readFileSync(join(dir, "AGENTS.md"), "utf-8")).toBe(broken);
+  });
+
+  test("a skill the author took over (marker removed) is left alone", () => {
+    const dir = project();
+    mkdirSync(join(dir, ".claude/skills/glasshome-widget"), { recursive: true });
+    writeFileSync(skillPath(dir), "my own skill\n");
+    expect(writeAgentStubs(dir).skill).toBe("kept");
+    expect(readFileSync(skillPath(dir), "utf-8")).toBe("my own skill\n");
+  });
+});

package/src/utils/agent-guide.ts

@@ -0,0 +1,84 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join, resolve } from "node:path";
+
+const GUIDE_PATH = "node_modules/@glasshome/widget-sdk/guide/widgets.md";
+const START = "<!-- glasshome-widget:start -->";
+const END = "<!-- glasshome-widget:end -->";
+const SKILL_FILE = ".claude/skills/glasshome-widget/SKILL.md";
+
+const pointer = `Read \`${GUIDE_PATH}\` (or an ancestor's \`node_modules\`) before working on a widget. It matches the installed SDK; \`bun widget upgrade\` updates both.`;
+
+const skill = `---
+name: glasshome-widget
+description: Use when building, styling, previewing or reviewing a GlassHome widget in this project.
+---
+
+# GlassHome widgets
+
+${pointer}
+
+${START}
+Managed by \`bun widget upgrade\`. Delete this block to own the file.
+${END}
+`;
+
+const agentsBlock = `${START}
+## GlassHome widgets
+
+${pointer}
+${END}`;
+
+export type StubResult = "written" | "updated" | "kept";
+
+/** The skill is ours while it still carries the marker; without it the author owns the file. */
+function writeSkill(projectDir: string): StubResult {
+  const path = join(projectDir, SKILL_FILE);
+  if (!existsSync(path)) {
+    mkdirSync(dirname(path), { recursive: true });
+    writeFileSync(path, skill);
+    return "written";
+  }
+  const current = readFileSync(path, "utf-8");
+  if (!current.includes(START) || current === skill) return "kept";
+  writeFileSync(path, skill);
+  return "updated";
+}
+
+function writeAgents(projectDir: string): StubResult {
+  const path = join(projectDir, "AGENTS.md");
+  if (!existsSync(path)) {
+    writeFileSync(path, `${agentsBlock}\n`);
+    return "written";
+  }
+  const current = readFileSync(path, "utf-8");
+  const start = current.indexOf(START);
+  const end = current.indexOf(END);
+  if (start !== -1 && end < start) return "kept";
+  const next =
+    start !== -1
+      ? current.slice(0, start) + agentsBlock + current.slice(end + END.length)
+      : `${current.trimEnd()}\n\n${agentsBlock}\n`;
+  if (next === current) return "kept";
+  writeFileSync(path, next);
+  return "updated";
+}
+
+/** The guide the installed SDK ships, or null when the SDK predates it. */
+export function installedGuide(projectDir: string): string | null {
+  try {
+    const require = createRequire(resolve(projectDir, "package.json"));
+    const guide = join(
+      dirname(require.resolve("@glasshome/widget-sdk/package.json")),
+      "guide/widgets.md",
+    );
+    return existsSync(guide) ? guide : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Point coding agents (Claude skill, AGENTS.md) at the guide the installed SDK ships. */
+export function writeAgentStubs(projectDir: string): { skill: StubResult; agents: StubResult } {
+  return { skill: writeSkill(projectDir), agents: writeAgents(projectDir) };
+}

package/template/src/index.tsx.template

@@ -1,49 +1,122 @@
-import { defineWidget } from "@glasshome/widget-sdk";
-import { type Component, createSignal } from "solid-js";
+import {
+  Button,
+  defineConfig,
+  defineWidget,
+  field,
+  Icon,
+  type Infer,
+  ResponsiveDialog,
+  ResponsiveDialogBody,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+  SchemaForm,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  useEntity,
+  useWidgetContext,
+  useWidgetDialog,
+  Widget,
+  WidgetDialog,
+} from "@glasshome/widget-sdk";
+import { Show } from "solid-js";
 
-interface WidgetConfig {
-  label: string;
-}
+const configSchema = defineConfig({
+  title: field.title(),
+  entityIds: field.entity("sensor"),
+});
+
+type WidgetConfig = Infer<typeof configSchema>;
+
+const dialogParts = {
+  ResponsiveDialog,
+  ResponsiveDialogContent,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+  ResponsiveDialogDescription,
+  ResponsiveDialogBody,
+  ResponsiveDialogFooter,
+  Button,
+  SchemaForm,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} as const;
 
-const WIDGET_NAMEWidget: Component<{ config: WidgetConfig }> = (props) => {
-  const [count, setCount] = createSignal(0);
+function WIDGET_NAMEWidget(props: { config: WidgetConfig }) {
+  const ctx = useWidgetContext();
+  const { setShowDialog, dialogProps } = useWidgetDialog();
+  const entity = useEntity(() => props.config.entityIds[0] ?? "");
+
+  const name = () => props.config.title || entity()?.friendlyName || "WIDGET_NAME";
 
   return (
-    <div class="flex h-full w-full flex-col items-center justify-center gap-3">
-      <h3 class="text-sm font-medium text-muted-foreground">
-        {props.config.label || "WIDGET_NAME"}
-      </h3>
-      <p class="text-4xl font-bold">{count()}</p>
-      <button
-        type="button"
-        onClick={() => setCount((c) => c + 1)}
-        class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+    <>
+      <Widget
+        variant="classic-glass"
+        tone="info"
+        emptyState={
+          entity()
+            ? undefined
+            : {
+                icon: <Icon icon="mdi:gauge" width={32} />,
+                title: "No sensor",
+                message: "Hold to configure",
+              }
+        }
       >
-        Increment
-      </button>
-    </div>
+        <Show when={entity()}>
+          {(e) => (
+            <Widget.Content>
+              <Widget.Glyph icon="mdi:gauge" />
+              <Widget.Head icon="mdi:gauge" name={name()} active />
+              <Widget.Hero value={e().state} unit={e().unitOfMeasurement ?? undefined} />
+            </Widget.Content>
+          )}
+        </Show>
+      </Widget>
+      <WidgetDialog
+        {...dialogParts}
+        {...dialogProps}
+        title="WIDGET_NAME"
+        configSchema={configSchema}
+        config={props.config}
+        onConfigSave={(config) => {
+          ctx.updateConfig(config);
+          setShowDialog(false);
+        }}
+      />
+    </>
   );
-};
+}
 
 export default defineWidget<WidgetConfig>({
   manifest: {
     name: "WIDGET_NAME",
+    icon: "mdi:gauge",
     minSize: { w: 1, h: 1 },
-    maxSize: { w: 4, h: 4 },
+    maxSize: { w: 8, h: 8 },
     defaultSize: { w: 2, h: 2 },
     sdkVersion: "SDK_RANGE",
-    schema: {
-      type: "object",
-      properties: {
-        label: {
-          type: "string",
-          title: "Widget Label",
-          description: "Display label for the widget",
-          default: "WIDGET_NAME",
-        },
+    capabilities: [{ domain: "sensor", access: "read" }],
+    examples: [
+      {
+        label: "Living room",
+        size: { w: 2, h: 2 },
+        config: { title: "Living room", entityIds: ["sensor.temperature_living"] },
+      },
+      {
+        label: "Small",
+        size: { w: 1, h: 1 },
+        config: { entityIds: ["sensor.temperature_living"] },
       },
-    },
-    defaultConfig: { label: "WIDGET_NAME" },
+    ],
   },
+  configSchema,
   component: WIDGET_NAMEWidget,
 });