@imfusion/web-ui 0.5.1-dev.3.g8e0a047a → 0.5.1-dev.30.gf9b152db

package/bin/install.test.ts

@@ -0,0 +1,243 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { spawnSync } from "node:child_process";
+import {
+  chmodSync,
+  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("recognises registrations written with braced ${CLAUDE_PROJECT_DIR}", () => {
+    mkdirSync(join(consumer, ".claude"), { recursive: true });
+    writeFileSync(
+      join(consumer, ".claude", "settings.json"),
+      JSON.stringify({
+        hooks: {
+          PostToolUse: [
+            {
+              matcher: "Edit|MultiEdit|Write",
+              hooks: [
+                {
+                  type: "command",
+                  command: '"${CLAUDE_PROJECT_DIR}/.agents/hooks/imf-web-ui/post-tool-use.sh"',
+                  statusMessage: "Verifying file"
+                }
+              ]
+            },
+            // a foreign entry carrying no `command` at all must not throw
+            { matcher: "Bash", hooks: [{ type: "command", args: ["${CLAUDE_PROJECT_DIR}/other/gate.mjs"] }] }
+          ]
+        }
+      })
+    );
+
+    runInstall(consumer, "--hooks");
+
+    const settings = readSettings(consumer);
+    const commands = settings.hooks.PostToolUse.flatMap(entry => entry.hooks.map(hook => hook.command));
+    expect(commands.filter(command => command?.includes("post-tool-use.sh"))).toHaveLength(1);
+    expect(commands).toContain('"${CLAUDE_PROJECT_DIR}/.agents/hooks/imf-web-ui/post-tool-use.sh"');
+  });
+
+  it("does not touch settings.json when every registration is already present", () => {
+    runInstall(consumer, "--hooks");
+    const settingsFile = join(consumer, ".claude", "settings.json");
+    const settings = readSettings(consumer);
+    settings.hooks.PreToolUse = [{ hooks: [{ command: "./other/gate.mjs" }] }];
+    const before = JSON.stringify(settings, null, 4) + "\n";
+    writeFileSync(settingsFile, before);
+
+    const result = runInstall(consumer, "--hooks");
+
+    expect(readFileSync(settingsFile, "utf-8")).toBe(before);
+    expect(result.stdout).toContain("Hook registrations already present");
+  });
+
+  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("runs post-edit checks from the package containing the edited file", () => {
+    runInstall(consumer, "--hooks");
+
+    const frontend = join(consumer, "frontend");
+    const source = join(frontend, "src", "example.ts");
+    const binDir = join(frontend, "node_modules", ".bin");
+    const log = join(consumer, "hook.log");
+    mkdirSync(join(frontend, "src"), { recursive: true });
+    mkdirSync(binDir, { recursive: true });
+    writeFileSync(join(frontend, "package.json"), JSON.stringify({ private: true }));
+    writeFileSync(source, "export const example = true;\n");
+
+    for (const tool of ["eslint", "prettier"]) {
+      const path = join(binDir, tool);
+      writeFileSync(path, '#!/usr/bin/env sh\nprintf "%s|%s\\n" "$PWD" "$*" >> "$HOOK_LOG"\n');
+      chmodSync(path, 0o755);
+    }
+
+    const result = spawnSync("sh", [join(consumer, ".agents", "hooks", "imf-web-ui", "post-tool-use.sh")], {
+      cwd: consumer,
+      env: { ...process.env, HOOK_LOG: log },
+      input: JSON.stringify({ tool_input: { file_path: source } }),
+      encoding: "utf-8"
+    });
+
+    expect(result.status).toBe(0);
+    const calls = readFileSync(log, "utf-8").trim().split("\n");
+    expect(calls).toEqual([`${frontend}|--cache ${source}`, `${frontend}|--check ${source}`]);
+  });
+
+  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/field/field.d.ts

@@ -0,0 +1,104 @@
+import { Field as FieldPrimitive } from '@base-ui/react/field';
+type UpstreamRoot = React.ComponentProps<typeof FieldPrimitive.Root>;
+type UpstreamItem = React.ComponentProps<typeof FieldPrimitive.Item>;
+type UpstreamLabel = React.ComponentProps<typeof FieldPrimitive.Label>;
+type UpstreamDescription = React.ComponentProps<typeof FieldPrimitive.Description>;
+type UpstreamControl = React.ComponentProps<typeof FieldPrimitive.Control>;
+type UpstreamError = React.ComponentProps<typeof FieldPrimitive.Error>;
+type UpstreamValidity = React.ComponentProps<typeof FieldPrimitive.Validity>;
+type RootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style"> & {
+    name?: string;
+    actionsRef?: UpstreamRoot["actionsRef"];
+    dirty?: boolean;
+    touched?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    invalid?: boolean;
+    validate?: UpstreamRoot["validate"];
+    /** @default "onSubmit" */
+    validationMode?: UpstreamRoot["validationMode"];
+    /** @default 0 */
+    validationDebounceTime?: number;
+    className?: UpstreamRoot["className"];
+    style?: UpstreamRoot["style"];
+    render?: UpstreamRoot["render"];
+};
+/**
+ * Field.Root — groups a label, control, validation state, and supporting copy.
+ *
+ * @doc https://base-ui.com/react/components/field
+ * @llm https://base-ui.com/react/components/field.md
+ */
+export declare function Root({ className, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+type ItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style"> & {
+    /** @default false */
+    disabled?: boolean;
+    className?: UpstreamItem["className"];
+    style?: UpstreamItem["style"];
+    render?: UpstreamItem["render"];
+};
+/** Field.Item — groups one checkable option with its label and description. */
+export declare function Item({ className, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Item {
+    var displayName: string;
+}
+type LabelProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "className" | "style"> & {
+    /** @default true */
+    nativeLabel?: boolean;
+    className?: UpstreamLabel["className"];
+    style?: UpstreamLabel["style"];
+    render?: UpstreamLabel["render"];
+};
+/** Field.Label — an accessible label automatically associated with the control. */
+export declare function Label({ className, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Label {
+    var displayName: string;
+}
+type DescriptionProps = Omit<React.HTMLAttributes<HTMLParagraphElement>, "className" | "style"> & {
+    className?: UpstreamDescription["className"];
+    style?: UpstreamDescription["style"];
+    render?: UpstreamDescription["render"];
+};
+/** Field.Description — supporting information for a field. */
+export declare function Description({ className, ...props }: DescriptionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Description {
+    var displayName: string;
+}
+type ControlProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "style" | "defaultValue"> & {
+    defaultValue?: UpstreamControl["defaultValue"];
+    onValueChange?: UpstreamControl["onValueChange"];
+    className?: UpstreamControl["className"];
+    style?: UpstreamControl["style"];
+    render?: UpstreamControl["render"];
+};
+/** Field.Control — a native input control with Field labeling and validation. */
+export declare function Control({ className, ...props }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Control {
+    var displayName: string;
+}
+type ErrorProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style"> & {
+    match?: UpstreamError["match"];
+    className?: UpstreamError["className"];
+    style?: UpstreamError["style"];
+    render?: UpstreamError["render"];
+};
+/** Field.Error — an inline validation message shown when its match condition fails. */
+export declare function Error({ className, ...props }: ErrorProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Error {
+    var displayName: string;
+}
+type ValidityProps = {
+    children: UpstreamValidity["children"];
+};
+/**
+ * Field.Validity — renderless access to the field validity data for custom messages.
+ * Its function child owns the rendered element and therefore its identity and styling.
+ */
+export declare function Validity({ children }: ValidityProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Validity {
+    var displayName: string;
+}
+export {};

package/dist/components/field/field.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const fieldMeta: ComponentMeta;

package/dist/components/field/index.d.ts

@@ -0,0 +1,2 @@
+export * as Field from './field';
+export { fieldMeta } from './field.meta';

package/dist/components/fieldset/fieldset.d.ts

@@ -0,0 +1,29 @@
+import { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';
+type UpstreamRoot = React.ComponentProps<typeof FieldsetPrimitive.Root>;
+type UpstreamLegend = React.ComponentProps<typeof FieldsetPrimitive.Legend>;
+type RootProps = Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "className" | "style"> & {
+    className?: UpstreamRoot["className"];
+    style?: UpstreamRoot["style"];
+    render?: UpstreamRoot["render"];
+};
+/**
+ * Fieldset.Root — semantic grouping for related form controls and a shared legend.
+ *
+ * @doc https://base-ui.com/react/components/fieldset
+ * @llm https://base-ui.com/react/components/fieldset.md
+ */
+export declare function Root({ className, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+type LegendProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style"> & {
+    className?: UpstreamLegend["className"];
+    style?: UpstreamLegend["style"];
+    render?: UpstreamLegend["render"];
+};
+/** Fieldset.Legend — the accessible label for its related controls. */
+export declare function Legend({ className, ...props }: LegendProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Legend {
+    var displayName: string;
+}
+export {};

package/dist/components/fieldset/fieldset.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const fieldsetMeta: ComponentMeta;

package/dist/components/fieldset/index.d.ts

@@ -0,0 +1,2 @@
+export * as Fieldset from './fieldset';
+export { fieldsetMeta } from './fieldset.meta';

package/dist/index.d.ts

@@ -2,6 +2,8 @@ export { Button, buttonMeta } from './components/button';
 export { ChipLink, chipLinkMeta } from './components/chip-link';
 export { CopyButton, copyButtonMeta } from './components/copy-button';
 export { Checkbox, checkboxMeta } from './components/checkbox';
+export { Field, fieldMeta } from './components/field';
+export { Fieldset, fieldsetMeta } from './components/fieldset';
 export { Input, inputMeta } from './components/input';
 export { Select, selectMeta } from './components/select';
 export { Slider, sliderMeta } from './components/slider';