npm - @glasshome/widget-sdk - Versions diffs - 0.1.0 - Mend

@glasshome/widget-sdk 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/LICENSE +21 -0
package/README.md +79 -0
package/dist/create-entity.d.ts +22 -0
package/dist/define-widget.d.ts +10 -0
package/dist/framework/backgrounds/Glow.d.ts +24 -0
package/dist/framework/backgrounds/WidgetSliderFill.d.ts +33 -0
package/dist/framework/components/WidgetContent.d.ts +29 -0
package/dist/framework/components/WidgetEmptyState.d.ts +34 -0
package/dist/framework/components/WidgetIcon.d.ts +48 -0
package/dist/framework/components/WidgetMetrics.d.ts +47 -0
package/dist/framework/components/WidgetStatus.d.ts +26 -0
package/dist/framework/components/WidgetSubtitle.d.ts +28 -0
package/dist/framework/components/WidgetTitle.d.ts +29 -0
package/dist/framework/components/WidgetValue.d.ts +31 -0
package/dist/framework/core/Widget.d.ts +88 -0
package/dist/framework/design-system/index.d.ts +8 -0
package/dist/framework/design-system/spacing.d.ts +40 -0
package/dist/framework/design-system/typography.d.ts +40 -0
package/dist/framework/design-system/z-index.d.ts +23 -0
package/dist/framework/dialogs/WidgetDialog.d.ts +47 -0
package/dist/framework/dialogs/index.d.ts +4 -0
package/dist/framework/gestures/cursors.d.ts +17 -0
package/dist/framework/gestures/use-widget-gestures.d.ts +53 -0
package/dist/framework/hooks/index.d.ts +15 -0
package/dist/framework/hooks/use-debug-data.d.ts +46 -0
package/dist/framework/hooks/use-widget-config.d.ts +48 -0
package/dist/framework/hooks/use-widget-context.d.ts +46 -0
package/dist/framework/hooks/use-widget-dialog.d.ts +45 -0
package/dist/framework/hooks/use-widget-entity-group.d.ts +67 -0
package/dist/framework/hooks/use-widget-entity.d.ts +53 -0
package/dist/framework/hooks/use-widget-form.d.ts +79 -0
package/dist/framework/hooks/use-widget-responsive.d.ts +41 -0
package/dist/framework/index.d.ts +55 -0
package/dist/framework/layout/WidgetStack.d.ts +28 -0
package/dist/framework/theming/adaptive-color.d.ts +28 -0
package/dist/framework/theming/colors.d.ts +59 -0
package/dist/framework/theming/index.d.ts +8 -0
package/dist/framework/types.d.ts +335 -0
package/dist/framework/utils/cn.d.ts +28 -0
package/dist/framework/utils/empty-state.d.ts +49 -0
package/dist/framework/utils/entity-aggregation.d.ts +73 -0
package/dist/framework/utils/entity-state.d.ts +103 -0
package/dist/framework/utils/format-value.d.ts +22 -0
package/dist/framework/utils/index.d.ts +12 -0
package/dist/framework/utils/interpret-value.d.ts +17 -0
package/dist/framework/variants/built-in-variants.d.ts +39 -0
package/dist/framework/variants/index.d.ts +7 -0
package/dist/framework/variants/variant-utils.d.ts +105 -0
package/dist/index.d.ts +7 -0
package/dist/index.js +1955 -0
package/dist/theme.d.ts +21 -0
package/dist/types.d.ts +51 -0
package/dist/version.d.ts +5 -0
package/dist/vite/index.d.ts +56 -0
package/dist/vite/index.js +184 -0
package/package.json +76 -0
package/preview/host.tsx +89 -0
package/preview/preview.html +49 -0
package/tailwind-sources.css +1 -0

package/dist/theme.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+/**
+ * Theme utilities — plain DOM reads.
+ * Framework-agnostic: no SolidJS imports.
+ *
+ * These functions read CSS custom properties and class state from the
+ * document root. They are synchronous and work in any browser environment.
+ */
+/**
+ * Read a CSS custom property (theme token) from the document root.
+ * Automatically prepends "--" if not already present.
+ *
+ * @example
+ * getThemeToken("color-primary")  // reads --color-primary
+ * getThemeToken("--color-primary") // also works
+ */
+export declare function getThemeToken(name: string): string;
+/**
+ * Check whether the current theme is dark mode.
+ * Reads the presence of the "dark" class on <html>.
+ */
+export declare function isDark(): boolean;

package/dist/types.d.ts ADDED Viewed

@@ -0,0 +1,51 @@
+/**
+ * Grid size constraint — number of columns (w) and rows (h).
+ */
+export interface GridSize {
+    w: number;
+    h: number;
+}
+/**
+ * Widget manifest — declarative metadata about a widget.
+ * Framework-agnostic: no SolidJS imports.
+ */
+export interface WidgetManifest {
+    tag: string;
+    name: string;
+    description?: string;
+    minSize: GridSize;
+    maxSize: GridSize;
+    sdkVersion: string;
+    icon?: string;
+    schema?: object;
+    defaultConfig?: Record<string, unknown>;
+}
+/**
+ * Runtime context provided to widgets by the host.
+ * Framework-agnostic: plain objects and functions.
+ */
+export interface WidgetContext {
+    config: Record<string, unknown>;
+    theme: {
+        getToken: (name: string) => string;
+        isDark: () => boolean;
+    };
+    dimensions: {
+        width: number;
+        height: number;
+    };
+}
+/**
+ * A complete widget definition combining manifest metadata with a component.
+ * The component return type is `any` so the type contract does not force SolidJS
+ * (internally the runtime knows it is SolidJS, but widget authors code against
+ * a stable contract that does not leak framework internals).
+ *
+ * @template C - Widget configuration type
+ */
+export interface WidgetDefinition<C = Record<string, unknown>> {
+    manifest: WidgetManifest;
+    component: (props: {
+        config: C;
+    }) => any;
+}

package/dist/version.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+/**
+ * SDK version constant for runtime version compatibility checking.
+ * The host can compare this against widget manifest sdkVersion fields.
+ */
+export declare const SDK_VERSION = "0.2.0";

package/dist/vite/index.d.ts ADDED Viewed

@@ -0,0 +1,56 @@
+import type { InlineConfig, Plugin } from "vite";
+export interface GlasshomeWidgetOptions {
+    /** Entry file for the widget (default: "src/index.tsx") */
+    entry?: string;
+}
+/** Packages provided by the host import map — widgets must not bundle these. */
+export declare function isWidgetExternal(id: string): boolean;
+interface DiscoveredWidget {
+    name: string;
+    entry: string;
+}
+/** Scan srcDir for subdirectories containing index.tsx + manifest.json. */
+export declare function discoverWidgets(srcDir: string): DiscoveredWidget[];
+/** Generate registry.json from widget manifests. */
+export declare function generateRegistry(srcDir: string, outDir: string): void;
+export interface BuildWidgetsOptions {
+    /** Directory containing widget subdirectories (default: "src") */
+    srcDir?: string;
+    /** Output directory for built bundles and registry (default: "dist") */
+    outDir?: string;
+    /** Additional Vite plugins to apply to each widget build (e.g. solid()) */
+    plugins?: Plugin[];
+    /** Extra Vite config merged into each widget build */
+    viteConfig?: InlineConfig;
+    /** Build only these widget names (subdirectory names). Skips full clean. */
+    only?: string[];
+}
+/**
+ * Build each widget as a separate Vite invocation so shared code is inlined
+ * into each bundle (no chunk splitting).
+ */
+export declare function buildWidgets(options?: BuildWidgetsOptions): Promise<void>;
+/**
+ * Vite plugin for GlassHome widget development and building.
+ *
+ * Returns an array of plugins:
+ * - Build mode: configures library build with proper externals
+ * - Dev mode: serves a preview host with dark mode toggle and manifest display
+ */
+export declare function glasshomeWidget(options?: GlasshomeWidgetOptions): Plugin[];
+export interface GlasshomeWidgetsOptions {
+    /** Directory containing widget subdirectories (default: "src") */
+    srcDir?: string;
+    /** Output directory for built bundles and registry (default: "dist") */
+    outDir?: string;
+}
+/**
+ * Vite plugin for multi-widget projects.
+ *
+ * In build mode, delegates to `buildWidgets()` which runs a separate Vite
+ * build per widget so shared code is inlined (no chunk splitting).
+ * The plugin's `config()` returns a minimal build config to suppress Vite's
+ * default build, and `closeBundle()` runs the actual per-widget builds.
+ */
+export declare function glasshomeWidgets(options?: GlasshomeWidgetsOptions): Plugin[];
+export {};

package/dist/vite/index.js ADDED Viewed

@@ -0,0 +1,184 @@
+import { existsSync as a, rmSync as x, mkdirSync as w, readdirSync as v, statSync as b, readFileSync as D, writeFileSync as S } from "node:fs";
+import { resolve as l, join as g, sep as h, dirname as W } from "node:path";
+import { fileURLToPath as I } from "node:url";
+const j = "virtual:glasshome-widget", p = "\0virtual:glasshome-widget", E = "/@glasshome/preview";
+function y(e) {
+  return h === "\\" ? e.split(h).join("/") : e;
+}
+function f() {
+  const e = I(import.meta.url);
+  return l(W(e), "../../preview");
+}
+function P(e) {
+  return e === "solid-js" || e.startsWith("solid-js/") || e === "@glasshome/widget-sdk" || e.startsWith("@glasshome/widget-sdk/") || e === "@glasshome/ui" || e.startsWith("@glasshome/ui/") || e === "@glasshome/sync-layer" || e.startsWith("@glasshome/sync-layer/");
+}
+function _(e) {
+  const i = [];
+  if (!a(e)) return i;
+  for (const r of v(e)) {
+    const n = l(e, r);
+    if (!b(n).isDirectory()) continue;
+    const t = l(n, "index.tsx"), s = l(n, "manifest.json");
+    a(t) && a(s) && i.push({ name: r, entry: t });
+  }
+  return i;
+}
+function O(e, i) {
+  const r = [];
+  if (a(e))
+    for (const t of v(e)) {
+      if (!b(g(e, t)).isDirectory()) continue;
+      const s = g(e, t, "manifest.json");
+      try {
+        const o = JSON.parse(D(s, "utf-8"));
+        r.push({ ...o, bundleUrl: `./${t}.js` });
+      } catch {
+      }
+    }
+  const n = {
+    version: 1,
+    generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    baseUrl: "./",
+    widgets: r
+  };
+  a(i) || w(i, { recursive: !0 }), S(g(i, "registry.json"), JSON.stringify(n, null, 2)), console.log(`[registry] Generated registry.json with ${r.length} widget(s)`);
+}
+async function R(e) {
+  const { build: i } = await import("vite"), r = process.cwd(), n = l(r, e?.srcDir ?? "src"), t = l(r, e?.outDir ?? "dist");
+  let s = _(n);
+  if (s.length === 0) {
+    console.warn("[glasshome-widgets] No widgets found in", n);
+    return;
+  }
+  if (e?.only) {
+    const o = new Set(e.only);
+    s = s.filter((u) => o.has(u.name));
+  }
+  e?.only || a(t) && x(t, { recursive: !0 }), a(t) || w(t, { recursive: !0 });
+  for (const o of s)
+    await i({
+      configFile: !1,
+      root: r,
+      plugins: e?.plugins ?? [],
+      ...e?.viteConfig,
+      build: {
+        lib: {
+          entry: o.entry,
+          formats: ["es"],
+          fileName: o.name
+        },
+        rollupOptions: {
+          external: P
+        },
+        outDir: t,
+        emptyOutDir: !1,
+        copyPublicDir: !1,
+        ...e?.viteConfig?.build
+      },
+      logLevel: "warn"
+    });
+  O(n, t);
+}
+function L(e) {
+  const i = e?.entry ?? "src/index.tsx";
+  return [{
+    name: "glasshome-widget:build",
+    apply: "build",
+    config() {
+      return {
+        build: {
+          lib: {
+            entry: i,
+            formats: ["es"],
+            fileName: "index"
+          },
+          rollupOptions: {
+            external: P
+          }
+        }
+      };
+    }
+  }, {
+    name: "glasshome-widget:dev",
+    apply: "serve",
+    enforce: "pre",
+    config() {
+      const t = f(), s = process.cwd(), o = l(s, "..", "..");
+      return {
+        server: {
+          fs: {
+            allow: [t, s, o]
+          }
+        }
+      };
+    },
+    configureServer(t) {
+      const s = f(), o = g(s, "preview.html");
+      t.middlewares.use(async (u, d, m) => {
+        if (u.url === "/" || u.url === "/index.html")
+          try {
+            let c = D(o, "utf-8");
+            c = await t.transformIndexHtml(u.url, c), d.setHeader("Content-Type", "text/html"), d.statusCode = 200, d.end(c);
+          } catch (c) {
+            m(c);
+          }
+        else
+          m();
+      });
+    },
+    resolveId(t) {
+      if (t === E) {
+        const s = f();
+        return y(g(s, "host.tsx"));
+      }
+      if (t === j)
+        return p;
+    },
+    load(t) {
+      if (t === p)
+        return `export { default } from "${y(l(process.cwd(), i))}";`;
+    }
+  }];
+}
+function k(e) {
+  const i = e?.srcDir ?? "src", r = e?.outDir ?? "dist";
+  let n = [];
+  return [{
+    name: "glasshome-widgets:build",
+    apply: "build",
+    config(s) {
+      return n = (s.plugins ?? []).flat().filter(Boolean).filter(
+        (o) => !o.name?.startsWith("glasshome-widgets:")
+      ), {
+        build: {
+          rollupOptions: {
+            input: { __glasshome_noop: "\0glasshome-noop" }
+          },
+          outDir: r,
+          copyPublicDir: !1
+        }
+      };
+    },
+    resolveId(s) {
+      if (s === "\0glasshome-noop") return s;
+    },
+    load(s) {
+      if (s === "\0glasshome-noop") return "export {}";
+    },
+    async closeBundle() {
+      await R({
+        srcDir: i,
+        outDir: r,
+        plugins: n
+      });
+    }
+  }];
+}
+export {
+  R as buildWidgets,
+  _ as discoverWidgets,
+  O as generateRegistry,
+  L as glasshomeWidget,
+  k as glasshomeWidgets,
+  P as isWidgetExternal
+};

package/package.json ADDED Viewed

@@ -0,0 +1,76 @@
+{
+  "name": "@glasshome/widget-sdk",
+  "version": "0.1.0",
+  "description": "SDK for building GlassHome dashboard widgets with SolidJS",
+  "keywords": [
+    "glasshome",
+    "widget",
+    "sdk",
+    "solidjs",
+    "vite",
+    "home-assistant",
+    "dashboard",
+    "smart-home"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "@glasshome/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./vite": {
+      "@glasshome/source": "./src/vite/index.ts",
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite/index.js"
+    },
+    "./tailwind-sources": "./tailwind-sources.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "preview",
+    "tailwind-sources.css"
+  ],
+  "scripts": {
+    "build": "vite build && tsc",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.11"
+  },
+  "dependencies": {
+    "@modular-forms/solid": "^0.25.1",
+    "@solid-primitives/resize-observer": "^2.1.5",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.1.13"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/node": "^25.2.2",
+    "typescript": "^5",
+    "vite": "^7.3.1",
+    "vite-plugin-externalize-deps": "^0.8.0",
+    "vite-plugin-solid": "^2.11.10"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/glasshome/widget-sdk.git"
+  },
+  "homepage": "https://github.com/glasshome/widget-sdk#readme",
+  "bugs": {
+    "url": "https://github.com/glasshome/widget-sdk/issues"
+  },
+  "author": "GlassHome Labs",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/preview/host.tsx ADDED Viewed

@@ -0,0 +1,89 @@
+import widget from "virtual:glasshome-widget";
+import { createSignal } from "solid-js";
+import { render } from "solid-js/web";
+function PreviewHost() {
+  const [isDark, setIsDark] = createSignal(false);
+  const [config, setConfig] = createSignal(widget.manifest.defaultConfig || {});
+  const toggleDark = () => {
+    const next = !isDark();
+    setIsDark(next);
+    document.documentElement.classList.toggle("dark", next);
+  };
+  const WidgetComponent = widget.component;
+  return (
+    <div
+      style={{
+        "max-width": "600px",
+        margin: "0 auto",
+        padding: "24px",
+      }}
+    >
+      <header
+        style={{
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "margin-bottom": "24px",
+          "padding-bottom": "16px",
+          "border-bottom": "1px solid var(--color-border)",
+        }}
+      >
+        <div>
+          <h1 style={{ "font-size": "1.5rem", "font-weight": "bold" }}>{widget.manifest.name}</h1>
+          <p
+            style={{
+              "font-size": "0.875rem",
+              opacity: 0.7,
+              "margin-top": "4px",
+            }}
+          >
+            &lt;{widget.manifest.tag}&gt; | {widget.manifest.type} | {widget.manifest.size}
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={toggleDark}
+          style={{
+            padding: "8px 16px",
+            "border-radius": "6px",
+            border: "1px solid var(--color-border)",
+            background: "transparent",
+            color: "var(--color-foreground)",
+            cursor: "pointer",
+            "font-size": "0.875rem",
+          }}
+        >
+          {isDark() ? "Light Mode" : "Dark Mode"}
+        </button>
+      </header>
+      <section
+        style={{
+          padding: "24px",
+          border: "1px solid var(--color-border)",
+          "border-radius": "8px",
+          background: "var(--color-background)",
+        }}
+      >
+        <WidgetComponent config={config()} />
+      </section>
+      <footer
+        style={{
+          "margin-top": "16px",
+          "font-size": "0.75rem",
+          opacity: 0.5,
+          "text-align": "center",
+        }}
+      >
+        GlassHome Widget Preview | SDK {widget.manifest.sdkVersion}
+      </footer>
+    </div>
+  );
+}
+render(() => <PreviewHost />, document.getElementById("root")!);

package/preview/preview.html ADDED Viewed

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Widget Preview</title>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      :root {
+        --color-primary: #3b82f6;
+        --color-background: #ffffff;
+        --color-foreground: #0f172a;
+        --color-border: #e2e8f0;
+        --color-success: #22c55e;
+        --color-error: #ef4444;
+        color-scheme: light;
+      }
+      .dark {
+        --color-primary: #60a5fa;
+        --color-background: #0f172a;
+        --color-foreground: #f1f5f9;
+        --color-border: #334155;
+        --color-success: #4ade80;
+        --color-error: #f87171;
+        color-scheme: dark;
+      }
+      body {
+        font-family: system-ui, -apple-system, sans-serif;
+        background: var(--color-background);
+        color: var(--color-foreground);
+        min-height: 100vh;
+        transition: background 0.2s, color 0.2s;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/@glasshome/preview"></script>
+  </body>
+</html>

package/tailwind-sources.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ @source "./src";