@c9up/nebula 0.1.2 → 0.1.4

package/README.md

@@ -33,10 +33,13 @@ import { Button } from '#pages/atoms/Button.js'
 
 `ream nebula:add` copies the component's source into your project and hands it over. No version, no upgrade path, no wrapper to fight when a design needs one class changed. That is shadcn's premise and nebula keeps it.
 
+The bill for that premise is that a fix released here never reaches a project on its own, and nothing reports it — the files are local, no lockfile mentions them, `pnpm update` does not touch them. `ream nebula:diff` is where that becomes visible. It records the hash of what it copied, so it can separate a change you made from one you have not seen: `edited` is yours and needs nothing, `outdated` means the package moved while your copy stayed put and re-copying loses nothing, `conflict` means both moved. Components copied before the record existed report `unknown`, which is the honest answer — there is no way to tell which side moved.
+
 ```bash
 ream nebula:list                    # everything in the registry
 ream nebula:list --layer organisms
 ream nebula:add dialog data-table   # copies both, plus what they depend on
+ream nebula:diff                    # which copies the package has since changed
 ream nebula:add button --force      # overwrite your edited copy
 ```
 
@@ -255,7 +258,7 @@ pnpm build
 
 `registry.json` is derived from the imports rather than maintained by hand, and a test asserts that every file an item ships actually resolves — the failure it guards is otherwise silent, showing up in a user's build rather than here.
 
-Coverage sits around 83% of statements. The shape matters more than the number: every component is mounted and unmounted by `render-smoke.test.ts`, the shared surfaces and the headless primitives are tested directly, and the overlays are opened rather than only rendered closed. What the suite cannot reach is pointer-drag — happy-dom has no `setPointerCapture`, so Drawer's swipe-to-dismiss and Resizable's drag are covered by their keyboard paths only.
+Coverage sits around 83% of statements. The shape matters more than the number: every component is mounted and unmounted by `render-smoke.test.ts`, the shared surfaces and the headless primitives are tested directly, and the overlays are opened rather than only rendered closed. What the suite cannot reach is pointer-drag — jsdom has no `setPointerCapture`, so Drawer's swipe-to-dismiss and Resizable's drag are covered by their keyboard paths only.
 
 ## Licence
 

package/dist/atoms/Slider.d.ts

@@ -9,9 +9,7 @@
  * free.
  *
  * The cost is the thumb, which can only be reached through the two vendor
- * pseudo-elements. Both are written out; they cannot be combined into one
- * selector, since a browser drops an entire rule containing a pseudo-element
- * it does not recognise.
+ * pseudo-elements. Both are written out, as literals — see `sliderClasses`.
  */
 import { type Reactive } from "../lib/props.js";
 export declare const sliderClasses: string;

package/dist/atoms/Slider.js

@@ -9,15 +9,22 @@
  * free.
  *
  * The cost is the thumb, which can only be reached through the two vendor
- * pseudo-elements. Both are written out; they cannot be combined into one
- * selector, since a browser drops an entire rule containing a pseudo-element
- * it does not recognise.
+ * pseudo-elements. Both are written out, as literals — see `sliderClasses`.
  */
 import { component, html } from "@c9up/aurora";
 import { cn } from "../lib/cn.js";
 import { accessor, read } from "../lib/props.js";
-const THUMB = "size-4 appearance-none rounded-full border border-primary bg-background shadow-sm transition-[color,box-shadow]";
-export const sliderClasses = cn("h-1.5 w-full cursor-pointer appearance-none rounded-full bg-primary/20 outline-none disabled:pointer-events-none disabled:opacity-50", `[&::-webkit-slider-thumb]:${THUMB.split(" ").join(" [&::-webkit-slider-thumb]:")}`, `[&::-moz-range-thumb]:${THUMB.split(" ").join(" [&::-moz-range-thumb]:")}`, "focus-visible:[&::-webkit-slider-thumb]:ring-ring/50 focus-visible:[&::-webkit-slider-thumb]:ring-[3px]", "focus-visible:[&::-moz-range-thumb]:ring-ring/50 focus-visible:[&::-moz-range-thumb]:ring-[3px]");
+// Every thumb variant is written out, and the repetition is the point.
+//
+// Tailwind finds class names by SCANNING this file as text — it never runs it.
+// A variant built at runtime, `[&::-webkit-slider-thumb]:${THUMB.split(...)}`,
+// is never a literal here, so no rule is generated for it and the attribute
+// ends up naming classes that do not exist. Nothing throws and the markup looks
+// right; the thumb simply falls back to the browser's default.
+//
+// The two vendor pseudo-elements cannot be folded into one selector either: a
+// browser drops an entire rule containing a pseudo-element it does not know.
+export const sliderClasses = cn("h-1.5 w-full cursor-pointer appearance-none rounded-full bg-primary/20 outline-none disabled:pointer-events-none disabled:opacity-50", "[&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:transition-[color,box-shadow]", "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-primary [&::-moz-range-thumb]:bg-background [&::-moz-range-thumb]:shadow-sm [&::-moz-range-thumb]:transition-[color,box-shadow]", "focus-visible:[&::-webkit-slider-thumb]:ring-ring/50 focus-visible:[&::-webkit-slider-thumb]:ring-[3px]", "focus-visible:[&::-moz-range-thumb]:ring-ring/50 focus-visible:[&::-moz-range-thumb]:ring-[3px]");
 function inputValue(event) {
     const target = event.target;
     return target instanceof HTMLInputElement ? Number(target.value) : 0;

package/dist/cli/add.js

@@ -17,6 +17,7 @@
 import { copyFileSync, existsSync, mkdirSync, readdirSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { defaultPaths } from "../config.js";
+import { hashOf, writeManifest } from "./manifest.js";
 import { loadRegistry, packageRoot, resolveItems } from "./registry.js";
 /**
  * Which language the project's component tree is written in.
@@ -69,6 +70,11 @@ export function add(options) {
     }
     const written = [];
     const skipped = [];
+    // What each file looked like when it was copied. `nebula diff` reads this
+    // to tell a change you made from one released upstream that you have not
+    // seen — without it every edited component reads as "differs", which is
+    // true of all of them by design.
+    const copiedHashes = {};
     // Shared files — `lib/cn.ts`, the primitives — belong to several items, so
     // one run reaches the same path repeatedly. Without this, the second visit
     // finds the file the first visit just wrote and reports it as pre-existing,
@@ -93,7 +99,13 @@ export function add(options) {
                 continue;
             mkdirSync(dirname(to), { recursive: true });
             copyFileSync(from, to);
+            const hash = hashOf(to);
+            if (hash !== undefined)
+                copiedHashes[relative] = hash;
         }
     }
+    if (options.dryRun !== true && Object.keys(copiedHashes).length > 0) {
+        writeManifest(target, copiedHashes);
+    }
     return { written, skipped, language };
 }

package/dist/cli/diff.d.ts

@@ -0,0 +1,47 @@
+/**
+ * `nebula diff` — which copied components no longer match the package.
+ *
+ * The counterpart to `add`. Copying is one-way by design, so a fix released
+ * upstream never reaches a project on its own and nothing anywhere says so:
+ * not the lockfile, not `pnpm update`, not the file itself. This is the report
+ * that makes that visible.
+ *
+ * It answers with the *reason* a file differs, not just that it does. Every
+ * copied component is expected to diverge from upstream eventually — that is
+ * what owning the source means — so "differs" alone would flag the whole tree
+ * and mean nothing. The hash recorded at copy time is what separates a change
+ * you made from one you have not seen yet.
+ */
+import { type Language, type NebulaPaths } from "../config.js";
+export type DiffState = 
+/** Copy, record and package all agree. */
+"same"
+/** The package moved and the copy is untouched — a re-copy loses nothing. */
+ | "outdated"
+/** The copy was edited; the package has not moved. */
+ | "edited"
+/** Both moved. The only state that needs a decision. */
+ | "conflict"
+/** Copied before anything was recorded, and it no longer matches. */
+ | "unknown";
+export interface DiffEntry {
+    /** Path as the registry names it, relative to the components root. */
+    file: string;
+    state: DiffState;
+}
+export interface DiffOptions {
+    cwd: string;
+    paths?: Partial<NebulaPaths>;
+    language?: Language;
+}
+export interface DiffResult {
+    entries: DiffEntry[];
+    language: Language;
+}
+/**
+ * Compare every copied component against the installed package.
+ *
+ * Only files that are actually in the project are considered — the registry
+ * lists everything nebula ships, and a component nobody copied is not news.
+ */
+export declare function diff(options: DiffOptions): DiffResult;

package/dist/cli/diff.js

@@ -0,0 +1,78 @@
+/**
+ * `nebula diff` — which copied components no longer match the package.
+ *
+ * The counterpart to `add`. Copying is one-way by design, so a fix released
+ * upstream never reaches a project on its own and nothing anywhere says so:
+ * not the lockfile, not `pnpm update`, not the file itself. This is the report
+ * that makes that visible.
+ *
+ * It answers with the *reason* a file differs, not just that it does. Every
+ * copied component is expected to diverge from upstream eventually — that is
+ * what owning the source means — so "differs" alone would flag the whole tree
+ * and mean nothing. The hash recorded at copy time is what separates a change
+ * you made from one you have not seen yet.
+ */
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import { defaultPaths } from "../config.js";
+import { detectLanguage } from "./add.js";
+import { hashOf, readManifest } from "./manifest.js";
+import { loadRegistry, packageRoot } from "./registry.js";
+/**
+ * Compare every copied component against the installed package.
+ *
+ * Only files that are actually in the project are considered — the registry
+ * lists everything nebula ships, and a component nobody copied is not news.
+ */
+export function diff(options) {
+    const paths = { ...defaultPaths, ...options.paths };
+    const target = join(options.cwd, paths.components);
+    const language = options.language ?? detectLanguage(target) ?? "js";
+    const root = packageRoot(join(options.cwd, "package.json"));
+    const sourceRoot = join(root, language === "ts" ? "src" : "dist");
+    const registry = loadRegistry(join(root, "registry.json"));
+    const manifest = readManifest(target);
+    const entries = [];
+    const seen = new Set();
+    for (const item of registry.items) {
+        for (const file of item.files) {
+            // The registry names `.ts` paths; the compiled tree mirrors it exactly.
+            const relative = language === "ts" ? file : file.replace(/\.ts$/, ".js");
+            if (seen.has(relative))
+                continue;
+            seen.add(relative);
+            const copied = join(target, relative);
+            if (!existsSync(copied))
+                continue;
+            const state = compare({
+                copy: hashOf(copied),
+                source: hashOf(join(sourceRoot, relative)),
+                recorded: manifest.files[relative],
+            });
+            if (state !== "same")
+                entries.push({ file: relative, state });
+        }
+    }
+    entries.sort((a, b) => a.file.localeCompare(b.file));
+    return { entries, language };
+}
+function compare(hashes) {
+    const { copy, source, recorded } = hashes;
+    // Nothing to compare against: the package no longer ships this file, so
+    // whatever is in the project is now the only copy of it.
+    if (source === undefined)
+        return "same";
+    if (copy === source)
+        return "same";
+    // Copied before the manifest existed. The two differ, and there is no way
+    // to tell which side moved.
+    if (recorded === undefined)
+        return "unknown";
+    const copyTouched = copy !== recorded;
+    const sourceMoved = source !== recorded;
+    if (copyTouched && sourceMoved)
+        return "conflict";
+    if (sourceMoved)
+        return "outdated";
+    return "edited";
+}

package/dist/cli/manifest.d.ts

@@ -0,0 +1,37 @@
+/**
+ * What a copied component looked like when it was copied.
+ *
+ * The registry model hands you the source and steps back: from then on the file
+ * is yours, and nothing upgrades it. That is the point, and it is also the one
+ * thing it cannot tell you — when a component is fixed upstream, the copy in
+ * your project stays as it was, and no install, lockfile or `pnpm update`
+ * mentions it. shadcn has the same gap.
+ *
+ * Recording the hash of what was copied is what closes it. With it, three
+ * different situations stop looking alike:
+ *
+ *   - the file still matches what was copied → upstream moving is a safe re-copy
+ *   - the file was edited and upstream has not moved → nothing to do
+ *   - both moved → a decision, and the only case that needs a person
+ *
+ * Without it, every edited component reads as "differs from upstream", which is
+ * true of all of them by design and therefore says nothing.
+ */
+/** Lives beside the components it describes, so moving the tree keeps it. */
+export declare const MANIFEST_FILE = ".nebula.json";
+export interface Manifest {
+    /** Component path (as the registry names it) → hash of the copied bytes. */
+    files: Record<string, string>;
+}
+/** Content hash of a file's bytes, or `undefined` when it is not there. */
+export declare function hashOf(path: string): string | undefined;
+/**
+ * Read the manifest for a component tree.
+ *
+ * A missing or unreadable one is an empty manifest, never an error: a project
+ * that copied components before this existed still has to work, and it simply
+ * has nothing recorded yet.
+ */
+export declare function readManifest(componentsRoot: string): Manifest;
+/** Merge new entries in and write the manifest back, sorted for a clean diff. */
+export declare function writeManifest(componentsRoot: string, added: Record<string, string>): void;

package/dist/cli/manifest.js

@@ -0,0 +1,71 @@
+/**
+ * What a copied component looked like when it was copied.
+ *
+ * The registry model hands you the source and steps back: from then on the file
+ * is yours, and nothing upgrades it. That is the point, and it is also the one
+ * thing it cannot tell you — when a component is fixed upstream, the copy in
+ * your project stays as it was, and no install, lockfile or `pnpm update`
+ * mentions it. shadcn has the same gap.
+ *
+ * Recording the hash of what was copied is what closes it. With it, three
+ * different situations stop looking alike:
+ *
+ *   - the file still matches what was copied → upstream moving is a safe re-copy
+ *   - the file was edited and upstream has not moved → nothing to do
+ *   - both moved → a decision, and the only case that needs a person
+ *
+ * Without it, every edited component reads as "differs from upstream", which is
+ * true of all of them by design and therefore says nothing.
+ */
+import { createHash } from "node:crypto";
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+/** Lives beside the components it describes, so moving the tree keeps it. */
+export const MANIFEST_FILE = ".nebula.json";
+/** Content hash of a file's bytes, or `undefined` when it is not there. */
+export function hashOf(path) {
+    if (!existsSync(path))
+        return undefined;
+    return createHash("sha256").update(readFileSync(path)).digest("hex");
+}
+/**
+ * Read the manifest for a component tree.
+ *
+ * A missing or unreadable one is an empty manifest, never an error: a project
+ * that copied components before this existed still has to work, and it simply
+ * has nothing recorded yet.
+ */
+export function readManifest(componentsRoot) {
+    const path = join(componentsRoot, MANIFEST_FILE);
+    if (!existsSync(path))
+        return { files: {} };
+    try {
+        const parsed = JSON.parse(readFileSync(path, "utf8"));
+        if (typeof parsed !== "object" || parsed === null)
+            return { files: {} };
+        const files = Reflect.get(parsed, "files");
+        if (typeof files !== "object" || files === null)
+            return { files: {} };
+        const entries = {};
+        for (const [key, value] of Object.entries(files)) {
+            if (typeof value === "string")
+                entries[key] = value;
+        }
+        return { files: entries };
+    }
+    catch {
+        return { files: {} };
+    }
+}
+/** Merge new entries in and write the manifest back, sorted for a clean diff. */
+export function writeManifest(componentsRoot, added) {
+    const existing = readManifest(componentsRoot);
+    const merged = { ...existing.files, ...added };
+    const sorted = {};
+    for (const key of Object.keys(merged).sort()) {
+        const value = merged[key];
+        if (value !== undefined)
+            sorted[key] = value;
+    }
+    writeFileSync(join(componentsRoot, MANIFEST_FILE), `${JSON.stringify({ files: sorted }, null, 2)}\n`);
+}

package/dist/configure.js

@@ -15,6 +15,8 @@
  * container, and nebula has none: its components are client-side templates and
  * its adapters run at build time. An empty provider would be ceremony.
  */
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
 import { adapterFor, isAdapterName } from "./adapters/index.js";
 import { resolveConfig } from "./config.js";
 function configFile(adapter) {
@@ -65,8 +67,23 @@ export async function configure(codemods, flags = {}) {
     // line of Rust and without waiting on a release of the binary.
     await codemods.registerCommand("@c9up/nebula/commands/add");
     await codemods.registerCommand("@c9up/nebula/commands/list");
-    for (const file of adapter.files(config)) {
-        await codemods.writeFile(file.path, file.contents);
+    await codemods.registerCommand("@c9up/nebula/commands/diff");
+    const generated = adapter.files(config);
+    for (const file of generated) {
+        // `skipIfExists` is the adapter saying the app owns this file. Pass it
+        // through rather than relying on the codemod's default, so the contract
+        // is the thing that decides.
+        await codemods.writeFile(file.path, file.contents, {
+            force: !file.skipIfExists,
+        });
+    }
+    const gaps = [];
+    for (const file of generated) {
+        if (!file.skipIfExists)
+            continue;
+        const missing = await missingFrom(file);
+        if (missing.length > 0)
+            gaps.push({ path: file.path, missing });
     }
     // On stderr, and never installed on the user's behalf. nebula declares no
     // CSS dependency at all — the app owns its build tooling, and a UI library
@@ -83,6 +100,48 @@ export async function configure(codemods, flags = {}) {
     else {
         lines.push("  Register the build in config/assets.ts:", `    build:     ${commands.build.command} ${commands.build.args.join(" ")}`, `    devServer: ${commands.dev.command} ${commands.dev.args.join(" ")}`);
     }
-    lines.push("  Then add components with `ream nebula:add button card` — they are copied", "  into your project and are yours to edit.", "");
+    lines.push("  Then add components with `ream nebula:add button card` — they are copied", "  into your project and are yours to edit.");
+    for (const gap of gaps) {
+        lines.push("", `  ${gap.path} already existed, so it was left alone — it is yours.`, "  The components resolve against tokens it does not define:", ...gap.missing.map((token) => `      ${token}`), "", '  Import nebula\'s theme (`@import "@c9up/nebula/theme.css"` plus the', "  `@theme inline` block), or declare them yourself. Without them the", "  utilities still compile and every colour resolves to nothing.");
+    }
+    lines.push("");
     process.stderr.write(lines.join("\n"));
 }
+/**
+ * Which of the tokens the components resolve against are absent from the
+ * stylesheet that was left in place.
+ *
+ * `skipIfExists` means an app's own stylesheet is never overwritten, which is
+ * right — it is theirs once it exists. The cost is that a project that already
+ * had one gets the components copied in and nothing for them to resolve
+ * against. Nothing throws, every class name is present in the markup, and the
+ * page comes out grey.
+ *
+ * Tokens rather than directives, because there is more than one correct way to
+ * supply them: importing nebula's theme, or declaring `--color-*` directly in
+ * an `@theme` block. Only the second half of that is checkable by reading, so
+ * the import short-circuits the question.
+ */
+async function missingFrom(file) {
+    let existing;
+    try {
+        existing = await readFile(resolve(process.cwd(), file.path), "utf8");
+    }
+    catch {
+        // No file to read means nothing was skipped: it was written as generated.
+        return [];
+    }
+    if (existing.includes("@c9up/nebula/theme.css"))
+        return [];
+    return colorTokensOf(file.contents).filter((token) => !new RegExp(`${token}\\s*:`).test(existing));
+}
+/** The `--color-*` names a generated stylesheet makes available. */
+function colorTokensOf(css) {
+    const found = new Set();
+    for (const match of css.matchAll(/(--color-[a-z-]+)\s*:/g)) {
+        const name = match[1];
+        if (name !== undefined)
+            found.add(name);
+    }
+    return [...found];
+}

package/dist/console/DiffCommand.d.ts

@@ -0,0 +1,21 @@
+/**
+ * `ream nebula:diff` — which copied components no longer match the package.
+ *
+ * `nebula:add` hands you the source and steps back, so a fix released upstream
+ * never reaches a project on its own. Nothing else reports that: the files are
+ * local, no lockfile mentions them and `pnpm update` does not touch them. This
+ * is the one place it becomes visible.
+ */
+export default class NebulaDiffCommand {
+    static commandName: string;
+    static description: string;
+    static options: {
+        startApp: boolean;
+    };
+    static args: never[];
+    static flags: import("./contract.js").FlagMetaData[];
+    static help: string[];
+    ts: boolean;
+    js: boolean;
+    run(): Promise<void>;
+}

package/dist/console/DiffCommand.js

@@ -0,0 +1,78 @@
+/**
+ * `ream nebula:diff` — which copied components no longer match the package.
+ *
+ * `nebula:add` hands you the source and steps back, so a fix released upstream
+ * never reaches a project on its own. Nothing else reports that: the files are
+ * local, no lockfile mentions them and `pnpm update` does not touch them. This
+ * is the one place it becomes visible.
+ */
+import { diff } from "../cli/diff.js";
+import { flag } from "./contract.js";
+/** What each state means, and what to do about it. */
+const EXPLAIN = {
+    same: "",
+    outdated: "the package moved, your copy is untouched — re-copy loses nothing",
+    edited: "you changed it; the package has not moved",
+    conflict: "you changed it AND the package moved — read both before copying",
+    unknown: "copied before nebula recorded hashes; cannot tell which side moved",
+};
+export default class NebulaDiffCommand {
+    static commandName = "nebula:diff";
+    static description = "Report copied components that no longer match the installed package";
+    // Files only; nothing here needs the container or a booted app.
+    static options = { startApp: false };
+    static args = [];
+    static flags = [
+        flag("ts", "boolean", {
+            description: "Compare against the TypeScript sources",
+        }),
+        flag("js", "boolean", {
+            description: "Compare against the compiled JavaScript",
+        }),
+    ];
+    static help = [
+        "  ream nebula:diff",
+        "",
+        "Components are copied, so nothing upgrades them. This says which ones the",
+        "package has since changed, and separates that from the edits you made —",
+        "every component is expected to diverge eventually, so 'differs' alone",
+        "would flag the whole tree and say nothing.",
+        "",
+        "Update one with `ream nebula:add <name> --force`, after reading the change",
+        "if you had edited it.",
+    ];
+    ts = false;
+    js = false;
+    async run() {
+        const result = diff({
+            cwd: process.cwd(),
+            language: this.ts ? "ts" : this.js ? "js" : undefined,
+        });
+        if (result.entries.length === 0) {
+            process.stdout.write("\n  Every copied component matches the installed package.\n\n");
+            return;
+        }
+        const width = Math.max(...result.entries.map((e) => e.file.length));
+        const out = [""];
+        for (const entry of result.entries) {
+            out.push(`  ${entry.state.padEnd(9)} ${entry.file.padEnd(width)}  ${EXPLAIN[entry.state]}`);
+        }
+        const outdated = result.entries.filter((entry) => entry.state === "outdated");
+        if (outdated.length > 0) {
+            out.push("", `  ${outdated.length} can be updated with no loss:`, `    ream nebula:add --force ${outdated.map(componentOf).join(" ")}`);
+        }
+        out.push("");
+        process.stdout.write(out.join("\n"));
+    }
+}
+/** `molecules/InputGroup.js` → `input-group`, as the registry names it. */
+function componentOf(entry) {
+    const base = entry.file.split("/").pop() ?? entry.file;
+    return base
+        .replace(/\.(ts|js)$/, "")
+        .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+        .toLowerCase();
+}
+// Fails the build if the class drifts from what the kernel dispatches against.
+const _contract = NebulaDiffCommand;
+void _contract;

package/dist/molecules/InputGroup.d.ts

@@ -9,6 +9,7 @@
  * own `:focus-visible` would draw a ring around the middle third of a control
  * that visually reads as one box.
  */
+import { type InputProps } from "../atoms/Input.js";
 import { type Slot } from "../lib/children.js";
 import { type Reactive } from "../lib/props.js";
 export interface InputGroupProps {
@@ -24,10 +25,24 @@ export interface InputGroupProps {
 /**
  * Strip the inner input of its own chrome.
  *
- * Exported so a caller passing a plain `<input>` rather than nebula's `Input`
- * can apply it too — without this the input draws a second border inside the
- * group's, which is the one way this component visibly goes wrong.
+ * Put these ON the input. The group cannot do it from the outside: a descendant
+ * variant like `[&_input]:border-0` has to exist as a literal for Tailwind to
+ * generate a rule for it, and building one by joining this string at runtime
+ * produces class names no stylesheet ever defines — the input keeps its border
+ * and draws a second one inside the group's, with nothing raised to say so.
+ *
+ * {@link InputGroupInput} applies them for you. This export is for a caller
+ * passing a plain `<input>` instead.
  */
 export declare const inputGroupControlClasses = "flex-1 border-0 bg-transparent px-0 shadow-none outline-none focus-visible:border-0 focus-visible:ring-0 disabled:opacity-100";
 export declare const InputGroup: (props?: InputGroupProps | undefined) => import("@c9up/aurora").TemplateResult;
+/**
+ * The input that belongs inside an {@link InputGroup}.
+ *
+ * Same component as {@link Input}, with the group's stripping applied first so
+ * a caller's own `class` still wins. This is where the classes have to live:
+ * the group carries the border and the ring, and the input has to bring none
+ * of its own.
+ */
+export declare const InputGroupInput: (props?: InputProps | undefined) => import("@c9up/aurora").TemplateResult;
 export declare const InputGroupAddon: (props?: import("./Card.js").CardProps) => import("@c9up/aurora").TemplateResult;

package/dist/molecules/InputGroup.js

@@ -10,6 +10,7 @@
  * that visually reads as one box.
  */
 import { component, html } from "@c9up/aurora";
+import { Input } from "../atoms/Input.js";
 import { slot } from "../lib/children.js";
 import { cn } from "../lib/cn.js";
 import { read } from "../lib/props.js";
@@ -17,9 +18,14 @@ import { styledDiv } from "../lib/styled.js";
 /**
  * Strip the inner input of its own chrome.
  *
- * Exported so a caller passing a plain `<input>` rather than nebula's `Input`
- * can apply it too — without this the input draws a second border inside the
- * group's, which is the one way this component visibly goes wrong.
+ * Put these ON the input. The group cannot do it from the outside: a descendant
+ * variant like `[&_input]:border-0` has to exist as a literal for Tailwind to
+ * generate a rule for it, and building one by joining this string at runtime
+ * produces class names no stylesheet ever defines — the input keeps its border
+ * and draws a second one inside the group's, with nothing raised to say so.
+ *
+ * {@link InputGroupInput} applies them for you. This export is for a caller
+ * passing a plain `<input>` instead.
  */
 export const inputGroupControlClasses = "flex-1 border-0 bg-transparent px-0 shadow-none outline-none focus-visible:border-0 focus-visible:ring-0 disabled:opacity-100";
 export const InputGroup = component((props) => {
@@ -27,9 +33,21 @@ export const InputGroup = component((props) => {
 		data-slot="input-group"
 		data-disabled="${() => (read(props.disabled) === true ? "" : undefined)}"
 		aria-invalid="${() => (read(props.invalid) === true ? "true" : undefined)}"
-		class="${() => cn("border-input dark:bg-input/30 flex h-9 w-full min-w-0 items-center gap-2 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow]", "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", `[&_input]:${inputGroupControlClasses.split(" ").join(" [&_input]:")}`, read(props.class))}"
+		class="${() => cn("border-input dark:bg-input/30 flex h-9 w-full min-w-0 items-center gap-2 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow]", "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", read(props.class))}"
 	>
 		${slot(props.leading)}${slot(props.children)}${slot(props.trailing)}
 	</div>`;
 });
+/**
+ * The input that belongs inside an {@link InputGroup}.
+ *
+ * Same component as {@link Input}, with the group's stripping applied first so
+ * a caller's own `class` still wins. This is where the classes have to live:
+ * the group carries the border and the ring, and the input has to bring none
+ * of its own.
+ */
+export const InputGroupInput = component((props) => Input({
+    ...props,
+    class: () => cn(inputGroupControlClasses, read(props.class)),
+}));
 export const InputGroupAddon = styledDiv("input-group-addon", "text-muted-foreground flex shrink-0 items-center gap-2 [&_svg:not([class*='size-'])]:size-4");

package/dist/molecules/index.d.ts

@@ -24,7 +24,7 @@ export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader,
 export { Collapsible, type CollapsibleProps } from "./Collapsible.js";
 export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyProps, EmptyTitle, } from "./Empty.js";
 export { Field, FieldGroup, type FieldIds, type FieldProps, FieldSeparator, fieldIds, } from "./Field.js";
-export { InputGroup, InputGroupAddon, type InputGroupProps, inputGroupControlClasses, } from "./InputGroup.js";
+export { InputGroup, InputGroupAddon, InputGroupInput, type InputGroupProps, inputGroupControlClasses, } from "./InputGroup.js";
 export { InputOTP, type InputOTPProps } from "./InputOTP.js";
 export { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, type ItemVariants, itemVariants, } from "./Item.js";
 export { Message, type MessageProps } from "./Message.js";

package/dist/molecules/index.js

@@ -24,7 +24,7 @@ export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader,
 export { Collapsible } from "./Collapsible.js";
 export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "./Empty.js";
 export { Field, FieldGroup, FieldSeparator, fieldIds, } from "./Field.js";
-export { InputGroup, InputGroupAddon, inputGroupControlClasses, } from "./InputGroup.js";
+export { InputGroup, InputGroupAddon, InputGroupInput, inputGroupControlClasses, } from "./InputGroup.js";
 export { InputOTP } from "./InputOTP.js";
 export { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemSeparator, ItemTitle, itemVariants, } from "./Item.js";
 export { Message } from "./Message.js";

package/dist/organisms/Form.js

@@ -59,7 +59,15 @@ export function Form(props) {
 		novalidate
 		class="${() => cn("flex flex-col gap-6", read(props.class))}"
 		@submit="${(event) => {
-        void props.form.handleSubmit(event);
+        // A DOM listener returns nothing, so this promise is nobody's to
+        // await. `command.run` always resolves — failures route to
+        // `onFail` — but `validate()` runs first, and a validator that
+        // throws rejects here: the form would silently do nothing and leave
+        // a bare `Uncaught (in promise)` behind. Reported, so the thing
+        // that broke is the thing the console names.
+        void props.form.handleSubmit(event).catch((error) => {
+            console.error("[nebula] Form submit failed:", error);
+        });
     }}"
 	>${slot(props.children)}</form>`;
 }