@imfusion/web-ui 0.5.1-dev.2.g0a349a2a → 0.5.1-dev.20.g9170acaf

package/bin/install.test.ts

@@ -0,0 +1,166 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { spawnSync } from "node:child_process";
+import {
+  existsSync,
+  lstatSync,
+  mkdirSync,
+  mkdtempSync,
+  readdirSync,
+  readFileSync,
+  statSync,
+  symlinkSync,
+  writeFileSync
+} from "node:fs";
+import { tmpdir } from "node:os";
+import { join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const installer = resolve(fileURLToPath(new URL(".", import.meta.url)), "install.js");
+
+function runInstall(cwd: string, ...args: string[]) {
+  const result = spawnSync("node", [installer, ...args], { cwd, encoding: "utf-8" });
+  expect(result.status).toBe(0);
+  return result;
+}
+
+function readSettings(cwd: string) {
+  return JSON.parse(readFileSync(join(cwd, ".claude", "settings.json"), "utf-8")) as {
+    permissions?: { allow: string[] };
+    hooks: Record<string, { hooks: { command: string }[] }[]>;
+  };
+}
+
+let consumer: string;
+
+beforeEach(() => {
+  consumer = mkdtempSync(join(tmpdir(), "web-ui-install-"));
+});
+
+describe("web-ui-install", () => {
+  it("installs skills into both targets with version markers", () => {
+    runInstall(consumer, "--skills", "--target", "agents", "--target", "claude");
+
+    const installed = readdirSync(join(consumer, ".agents", "skills"));
+    expect(installed).toContain("imf-web-ui");
+    expect(installed).toContain("imf-web-ui-frontend-conventions");
+    expect(installed).toContain("imf-web-ui-frontend-setup");
+
+    for (const name of installed) {
+      expect(existsSync(join(consumer, ".agents", "skills", name, ".imf-web-ui-skill-version.json"))).toBe(true);
+      expect(lstatSync(join(consumer, ".claude", "skills", name)).isSymbolicLink()).toBe(true);
+    }
+  });
+
+  it("removes skills that are no longer included in the bundle", () => {
+    const orphan = "imf-web-ui-retired-skill";
+    const agentsOrphan = join(consumer, ".agents", "skills", orphan);
+    mkdirSync(agentsOrphan, { recursive: true });
+    writeFileSync(join(agentsOrphan, "SKILL.md"), "# Retired skill\n");
+    const claudeOrphan = join(consumer, ".claude", "skills", orphan);
+    mkdirSync(join(consumer, ".claude", "skills"), { recursive: true });
+    symlinkSync(agentsOrphan, claudeOrphan);
+    expect(lstatSync(claudeOrphan).isSymbolicLink()).toBe(true);
+
+    const result = runInstall(consumer, "--skills", "--target", "agents", "--target", "claude");
+
+    expect(existsSync(agentsOrphan)).toBe(false);
+    expect(lstatSync(claudeOrphan, { throwIfNoEntry: false })).toBeUndefined();
+    expect(result.stdout).toContain(`Removed orphaned skill: ${orphan} (no longer in this bundle)`);
+  });
+
+  it("installs hooks into an installer-owned directory and registers them", () => {
+    runInstall(consumer, "--hooks");
+
+    const hookDir = join(consumer, ".agents", "hooks", "imf-web-ui");
+    const scripts = readdirSync(hookDir);
+    expect(scripts).toEqual(expect.arrayContaining(["session-start.sh", "user-prompt-submit.sh", "post-tool-use.sh"]));
+    for (const script of scripts) {
+      expect(statSync(join(hookDir, script)).mode & 0o100).toBeTruthy();
+    }
+
+    const settings = readSettings(consumer);
+    expect(Object.keys(settings.hooks)).toEqual(expect.arrayContaining(["SessionStart", "UserPromptSubmit", "PostToolUse"]));
+    // --hooks alone installs no skills
+    expect(existsSync(join(consumer, ".agents", "skills"))).toBe(false);
+  });
+
+  it("merges registrations without clobbering existing settings, idempotently", () => {
+    mkdirSync(join(consumer, ".claude"), { recursive: true });
+    writeFileSync(
+      join(consumer, ".claude", "settings.json"),
+      JSON.stringify({
+        permissions: { allow: ["Bash(git *)"] },
+        hooks: { PostToolUse: [{ matcher: "Edit", hooks: [{ type: "command", command: "echo existing" }] }] }
+      })
+    );
+
+    runInstall(consumer, "--hooks");
+    runInstall(consumer, "--hooks");
+
+    const settings = readSettings(consumer);
+    expect(settings.permissions?.allow).toEqual(["Bash(git *)"]);
+    const commands = settings.hooks.PostToolUse.flatMap(entry => entry.hooks.map(hook => hook.command));
+    expect(commands).toContain("echo existing");
+    // the shipped registration is added exactly once across both runs
+    expect(commands.filter(command => command.includes("post-tool-use.sh"))).toHaveLength(1);
+  });
+
+  it("upserts the fenced AGENTS.md block and leaves the rest untouched", () => {
+    const agentsPath = join(consumer, "AGENTS.md");
+    writeFileSync(
+      agentsPath,
+      "# AGENTS.md\n\nRepo-specific intro.\n\n<!-- imf-web-ui:begin stale -->\nold content\n<!-- imf-web-ui:end -->\n\nRepo-specific outro.\n"
+    );
+
+    runInstall(consumer, "--skills", "--target", "agents");
+    const updated = readFileSync(agentsPath, "utf-8");
+    expect(updated).toContain("Repo-specific intro.");
+    expect(updated).toContain("Repo-specific outro.");
+    expect(updated).not.toContain("old content");
+    expect(updated).toContain("resynced with `npx web-ui-install`");
+
+    // no fence yet → block is appended; missing AGENTS.md entirely → left alone
+    writeFileSync(agentsPath, "# AGENTS.md\n\nNo fence here.\n");
+    runInstall(consumer, "--skills", "--target", "agents");
+    const appended = readFileSync(agentsPath, "utf-8");
+    expect(appended).toContain("No fence here.");
+    expect(appended).toContain("<!-- imf-web-ui:begin");
+  });
+
+  it("ships hooks that stay advisory: exit 0 with and without a usable payload", () => {
+    runInstall(consumer, "--hooks");
+    const hookDir = join(consumer, ".agents", "hooks", "imf-web-ui");
+
+    const noFile = spawnSync("sh", [join(hookDir, "post-tool-use.sh")], { input: "{}", encoding: "utf-8" });
+    expect(noFile.status).toBe(0);
+
+    const missingFile = spawnSync("sh", [join(hookDir, "post-tool-use.sh")], {
+      input: JSON.stringify({ tool_input: { file_path: join(consumer, "nope.ts") } }),
+      encoding: "utf-8"
+    });
+    expect(missingFile.status).toBe(0);
+
+    const sessionStart = spawnSync("sh", [join(hookDir, "session-start.sh")], { encoding: "utf-8" });
+    expect(sessionStart.status).toBe(0);
+    expect(sessionStart.stdout).toContain("imf-web-ui-frontend-conventions");
+
+    // no node_modules in the consumer → silent success
+    const staleness = spawnSync("sh", [join(hookDir, "baseline-staleness.sh")], { cwd: consumer, encoding: "utf-8" });
+    expect(staleness.status).toBe(0);
+    expect(staleness.stdout).toBe("");
+  });
+
+  it("warns from the staleness script when skill markers lag the package", () => {
+    runInstall(consumer, "--skills", "--hooks", "--target", "agents");
+    const pkgDir = join(consumer, "node_modules", "@imfusion", "web-ui");
+    mkdirSync(pkgDir, { recursive: true });
+    writeFileSync(join(pkgDir, "package.json"), JSON.stringify({ version: "99.0.0" }));
+
+    const result = spawnSync("sh", [join(consumer, ".agents", "hooks", "imf-web-ui", "baseline-staleness.sh")], {
+      cwd: consumer,
+      encoding: "utf-8"
+    });
+    expect(result.status).toBe(0);
+    expect(result.stdout).toContain("npx web-ui-install");
+  });
+});

package/dist/build/vite-css-module-names/index.d.ts

@@ -0,0 +1,20 @@
+import { Plugin } from 'vite';
+export interface ReadableCssModuleNamesOptions {
+    /** Namespace for every generated class name. Short, stable, app-scoped (`imf-ui`, `acme`). */
+    prefix: string;
+}
+/**
+ * Generates readable CSS Module class names instead of the default hash, so the DOM
+ * stays legible in devtools and browser automation. `button.module.css` yields
+ * `{prefix}-button-module-root` — `[name]` is the filename, which keeps its `.module`
+ * suffix.
+ *
+ * Register it in every tool that compiles the CSS (the app build AND Storybook). A
+ * compiler left out generates different class names for the same source file and its
+ * styles silently don't apply.
+ *
+ * Defaults to opting into Lightning CSS, which drops `css.modules` options it has no
+ * equivalent for (`localsConvention`). Set `css.transformer: "postcss"` to stay on
+ * the PostCSS pipeline.
+ */
+export declare function readableCssModuleNames({ prefix }: ReadableCssModuleNamesOptions): Plugin;

package/dist/build/vite-css-module-names.js

@@ -0,0 +1,17 @@
+//#region src/build/vite-css-module-names/index.ts
+function e(e, t) {
+	let { lightningcss: n, modules: r, transformer: i } = e.css ?? {}, a = n?.cssModules;
+	if (!(typeof a == "boolean" || r === !1) && !a?.pattern && !(typeof r == "object" && r.generateScopedName)) return i === "postcss" ? { css: { modules: { generateScopedName: t } } } : { css: {
+		transformer: "lightningcss",
+		lightningcss: { cssModules: { pattern: t } }
+	} };
+}
+function t({ prefix: t }) {
+	let n = `${t}-[name]-[local]`;
+	return {
+		name: "imf-ui:readable-css-module-names",
+		config: (t) => e(t, n)
+	};
+}
+//#endregion
+export { t as readableCssModuleNames };

package/dist/components/logo/logo.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const logo: (props?: ({
     size?: "sm" | "md" | "lg" | "hero" | "xs" | "xl" | "fit" | null | undefined;
-    variant?: "main" | "inherit" | "support" | "minor" | "brand" | null | undefined;
+    variant?: "main" | "inherit" | "support" | "minor" | "brand" | "oncolor" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & VariantProps<typeof logo> & {
     /** Logo source — an image URL or an inline SVG node. Required; this primitive carries no brand default (see `ImFusionLogo` for our own mark). */

package/dist/index.js

@@ -301,7 +301,7 @@ function Jn({ value: e, label: t = "Copy", copiedLabel: n = "Copied", variant: i
 		"data-copied": c || void 0,
 		"aria-label": c ? n : t,
 		onClick: () => l(e),
-		className: r(Kn.root, typeof o == "string" ? o : void 0),
+		className: (e) => r(Kn.root, typeof o == "function" ? o(e) : o),
 		children: /* @__PURE__ */ X(u, {
 			size: 15,
 			strokeWidth: 2,
@@ -10593,6 +10593,7 @@ var Xh = {
 	variantInherit: "imf-ui-logo-module-variantInherit",
 	variantMain: "imf-ui-logo-module-variantMain",
 	variantMinor: "imf-ui-logo-module-variantMinor",
+	variantOncolor: "imf-ui-logo-module-variantOncolor",
 	variantSupport: "imf-ui-logo-module-variantSupport"
 }, Qh = n(Zh.root, { variants: {
 	size: {
@@ -10609,7 +10610,8 @@ var Xh = {
 		main: Zh.variantMain,
 		support: Zh.variantSupport,
 		minor: Zh.variantMinor,
-		brand: Zh.variantBrand
+		brand: Zh.variantBrand,
+		oncolor: Zh.variantOncolor
 	}
 } });
 function $h({ src: e, alt: t, size: n = "md", variant: r = "brand", height: i, className: a, style: o, ...s }) {