@c9up/nebula 0.1.5 → 0.1.6

package/dist/adapters/tailwind.d.ts

@@ -14,6 +14,13 @@
  *   a v4 setup produces an unstyled page.
  * - `@custom-variant dark` makes `dark:` respond to a `.dark` class rather
  *   than the system preference, so a theme toggle can override the OS.
+ * - `tw-animate-css` supplies `animate-in` / `animate-out` and the `fade-*`,
+ *   `zoom-*` and `slide-*` modifiers — where shadcn gets them too. Imported
+ *   rather than reimplemented, so the components use its class strings
+ *   verbatim. nebula previously declared four keyframes of its own and reached
+ *   them through arbitrary animation values, which Tailwind compiles whether or
+ *   not the keyframes exist: an app that skipped the stylesheet got overlays
+ *   that never finished CLOSING rather than overlays that never animated.
  * - `@theme inline` maps nebula's plain custom properties onto Tailwind's
  *   colour namespace, which is what turns `--primary` into a `bg-primary`
  *   utility.

package/dist/adapters/tailwind.js

@@ -14,6 +14,13 @@
  *   a v4 setup produces an unstyled page.
  * - `@custom-variant dark` makes `dark:` respond to a `.dark` class rather
  *   than the system preference, so a theme toggle can override the OS.
+ * - `tw-animate-css` supplies `animate-in` / `animate-out` and the `fade-*`,
+ *   `zoom-*` and `slide-*` modifiers — where shadcn gets them too. Imported
+ *   rather than reimplemented, so the components use its class strings
+ *   verbatim. nebula previously declared four keyframes of its own and reached
+ *   them through arbitrary animation values, which Tailwind compiles whether or
+ *   not the keyframes exist: an app that skipped the stylesheet got overlays
+ *   that never finished CLOSING rather than overlays that never animated.
  * - `@theme inline` maps nebula's plain custom properties onto Tailwind's
  *   colour namespace, which is what turns `--primary` into a `bg-primary`
  *   utility.
@@ -123,7 +130,10 @@ function relativeFromCss(config) {
 export const tailwindAdapter = {
     name: "tailwind",
     summary: "Tailwind CSS v4, configured in CSS. What shadcn/ui itself targets.",
-    packages: ["tailwindcss", "@tailwindcss/cli"],
+    // `tw-animate-css` is where the overlay animations come from — the same
+    // package shadcn tells you to install, and the reason the components can use
+    // its class strings verbatim.
+    packages: ["tailwindcss", "@tailwindcss/cli", "tw-animate-css"],
     files(config) {
         return [
             {

package/dist/adapters/unocss.js

@@ -16,6 +16,7 @@
 const CONFIG_PATH = "uno.config.ts";
 function unoConfig(config) {
     return `import { defineConfig, presetWind4 } from 'unocss'
+import presetAnimations from 'unocss-preset-animations'
 import { readFileSync } from 'node:fs'
 import { createRequire } from 'node:module'
 
@@ -40,7 +41,15 @@ const tokens = readFileSync(require.resolve('@c9up/nebula/theme.css'), 'utf8')
 const color = (name: string) => \`var(--\${name})\`
 
 export default defineConfig({
-  presets: [presetWind4()],
+  /*
+   * \`presetAnimations\` is the UnoCSS port of the same utilities shadcn uses
+   * through \`tw-animate-css\`: \`animate-in\` / \`animate-out\` and the
+   * \`fade-*\` / \`zoom-*\` / \`slide-*\` modifiers. nebula's components emit
+   * shadcn's class strings verbatim, so the utilities have to exist under every
+   * engine — and registering them is what makes a missing setup produce no
+   * animation rather than an overlay that never finishes closing.
+   */
+  presets: [presetWind4(), presetAnimations()],
   content: {
     filesystem: ['${config.paths.components}/**/*.{ts,js}'],
   },
@@ -110,7 +119,7 @@ body {
 export const unocssAdapter = {
     name: "unocss",
     summary: "UnoCSS with presetWind4 — same class syntax, no PostCSS, faster builds.",
-    packages: ["unocss", "@unocss/cli"],
+    packages: ["unocss", "@unocss/cli", "unocss-preset-animations"],
     files(config) {
         return [
             { path: CONFIG_PATH, contents: unoConfig(config), skipIfExists: true },

package/dist/atoms/NativeSelect.js

@@ -44,7 +44,25 @@ export const NativeSelect = component((props) => {
         }
         return out;
     }
-    const renderOption = (option) => html `<option value="${option.value}" ?disabled="${option.disabled === true}">
+    /**
+     * `?selected` on each option, NOT `.value` on the select alone.
+     *
+     * A property binding sits on the opening tag, so it is assigned before the
+     * options exist. `select.value = 'x'` against a childless `<select>` is a
+     * no-op the DOM does not report, and nothing re-runs it afterwards: the
+     * control then shows its FIRST option while holding the value it was given.
+     * Nothing throws and nothing logs, so the value the user sees is not the
+     * value the form will submit — in a form that edits money or tax status
+     * that is a wrong record written on save.
+     *
+     * Marking the option is order-independent, and it is also what makes the
+     * choice correct in server-rendered HTML before any script runs.
+     */
+    const renderOption = (option) => html `<option
+			value="${option.value}"
+			?disabled="${option.disabled === true}"
+			?selected="${() => read(props.value) === option.value}"
+		>
 			${option.label}
 		</option>`;
     return html `<div data-slot="native-select" class="relative inline-flex w-full items-center">
@@ -61,7 +79,14 @@ export const NativeSelect = component((props) => {
 		>
 			${props.placeholder === undefined
         ? null
-        : html `<option value="" disabled selected>${props.placeholder}</option>`}
+        : html `<option
+							value=""
+							disabled
+							?selected="${() => {
+            const current = read(props.value);
+            return current === undefined || current === "";
+        }}"
+						>${props.placeholder}</option>`}
 			${runs().map((run) => run.group === undefined
         ? run.items.map(renderOption)
         : html `<optgroup label="${run.group}">${run.items.map(renderOption)}</optgroup>`)}

package/dist/lib/motion.d.ts

@@ -1,27 +1,36 @@
 /**
  * Enter and exit animations for overlays.
  *
- * shadcn drives these with `animate-in` / `animate-out` from `tw-animate-css`
- * — a Tailwind plugin, and a dependency. nebula declares the four keyframes it
- * needs in `theme.css` and references them through arbitrary animation values,
- * which every one of the three adapters supports and none of them needs a
- * plugin for.
+ * These are shadcn's own class strings, verbatim, and they come from the same
+ * place shadcn's do: `tw-animate-css`, which registers `animate-in` /
+ * `animate-out` and the `fade-*` / `zoom-*` / `slide-*` modifiers through
+ * `@theme inline` and `@utility`.
  *
- * The durations are asymmetric on purpose: entering is slower than leaving.
- * A surface appearing wants to be noticed, a surface dismissed wants to be out
- * of the way — matching them makes closing feel sluggish.
+ * nebula used to declare four bespoke keyframes and reference them through
+ * ARBITRARY animation values (`animate-[nebula-zoom-out_120ms_ease-in]`), to
+ * avoid the plugin. That is what made a missing stylesheet fatal rather than
+ * cosmetic: Tailwind compiles an arbitrary value unconditionally, so the
+ * `animation` property was always set while the keyframes behind it might exist
+ * nowhere — the browser then never fires `animationend` and every closed
+ * overlay stays in the document. With a theme-registered utility the class
+ * simply is not emitted when the theme is absent, the element animates not at
+ * all, and closing is instant. That is the whole reason upstream registers
+ * rather than inlines, and it is why the deviation is gone.
  *
- * Every string ends in `motion-reduce:animate-none`. That is not only a
- * courtesy: `onExitFinished` reads the computed style to decide whether to
- * wait, sees no animation, and removes the node immediately. Reduced motion
- * therefore gets an instant close rather than a delayed one, with no branch in
- * the component.
+ * The durations are shadcn's too, which means asymmetric by way of the sheet
+ * variants only; everything else takes `tw-animate-css`'s defaults.
  */
 import type { Side } from "../primitives/floating.js";
-/** Popovers, menus, selects — scale up from the anchor. */
-export declare const zoomInOut = "data-[state=open]:animate-[nebula-zoom-in_150ms_ease-out] data-[state=closed]:animate-[nebula-zoom-out_120ms_ease-in] motion-reduce:animate-none";
+/**
+ * Popovers, menus, selects — scale up from the anchor.
+ *
+ * shadcn's dialog and popover string. `motion-reduce:animate-none` is ours and
+ * stays: it also makes `onExitFinished` see no animation and remove the node at
+ * once, so reduced motion gets an instant close with no branch in the component.
+ */
+export declare const zoomInOut = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 motion-reduce:animate-none";
 /** Backdrops and tooltips — no movement, just opacity. */
-export declare const fadeInOut = "data-[state=open]:animate-[nebula-fade-in_150ms_ease-out] data-[state=closed]:animate-[nebula-fade-out_120ms_ease-in] motion-reduce:animate-none";
+export declare const fadeInOut = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 motion-reduce:animate-none";
 /**
  * Panels that slide in from an edge — Sheet, Drawer.
  *

package/dist/lib/motion.js

@@ -1,26 +1,35 @@
 /**
  * Enter and exit animations for overlays.
  *
- * shadcn drives these with `animate-in` / `animate-out` from `tw-animate-css`
- * — a Tailwind plugin, and a dependency. nebula declares the four keyframes it
- * needs in `theme.css` and references them through arbitrary animation values,
- * which every one of the three adapters supports and none of them needs a
- * plugin for.
+ * These are shadcn's own class strings, verbatim, and they come from the same
+ * place shadcn's do: `tw-animate-css`, which registers `animate-in` /
+ * `animate-out` and the `fade-*` / `zoom-*` / `slide-*` modifiers through
+ * `@theme inline` and `@utility`.
  *
- * The durations are asymmetric on purpose: entering is slower than leaving.
- * A surface appearing wants to be noticed, a surface dismissed wants to be out
- * of the way — matching them makes closing feel sluggish.
+ * nebula used to declare four bespoke keyframes and reference them through
+ * ARBITRARY animation values (`animate-[nebula-zoom-out_120ms_ease-in]`), to
+ * avoid the plugin. That is what made a missing stylesheet fatal rather than
+ * cosmetic: Tailwind compiles an arbitrary value unconditionally, so the
+ * `animation` property was always set while the keyframes behind it might exist
+ * nowhere — the browser then never fires `animationend` and every closed
+ * overlay stays in the document. With a theme-registered utility the class
+ * simply is not emitted when the theme is absent, the element animates not at
+ * all, and closing is instant. That is the whole reason upstream registers
+ * rather than inlines, and it is why the deviation is gone.
  *
- * Every string ends in `motion-reduce:animate-none`. That is not only a
- * courtesy: `onExitFinished` reads the computed style to decide whether to
- * wait, sees no animation, and removes the node immediately. Reduced motion
- * therefore gets an instant close rather than a delayed one, with no branch in
- * the component.
+ * The durations are shadcn's too, which means asymmetric by way of the sheet
+ * variants only; everything else takes `tw-animate-css`'s defaults.
  */
-/** Popovers, menus, selects — scale up from the anchor. */
-export const zoomInOut = "data-[state=open]:animate-[nebula-zoom-in_150ms_ease-out] data-[state=closed]:animate-[nebula-zoom-out_120ms_ease-in] motion-reduce:animate-none";
+/**
+ * Popovers, menus, selects — scale up from the anchor.
+ *
+ * shadcn's dialog and popover string. `motion-reduce:animate-none` is ours and
+ * stays: it also makes `onExitFinished` see no animation and remove the node at
+ * once, so reduced motion gets an instant close with no branch in the component.
+ */
+export const zoomInOut = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 motion-reduce:animate-none";
 /** Backdrops and tooltips — no movement, just opacity. */
-export const fadeInOut = "data-[state=open]:animate-[nebula-fade-in_150ms_ease-out] data-[state=closed]:animate-[nebula-fade-out_120ms_ease-in] motion-reduce:animate-none";
+export const fadeInOut = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 motion-reduce:animate-none";
 /**
  * Panels that slide in from an edge — Sheet, Drawer.
  *
@@ -28,12 +37,9 @@ export const fadeInOut = "data-[state=open]:animate-[nebula-fade-in_150ms_ease-o
  * depends on the panel's own size and only `translate-x-full` knows that.
  */
 export function slideFrom(side) {
-    const axis = side === "left"
-        ? "data-[state=closed]:-translate-x-full"
-        : side === "right"
-            ? "data-[state=closed]:translate-x-full"
-            : side === "top"
-                ? "data-[state=closed]:-translate-y-full"
-                : "data-[state=closed]:translate-y-full";
-    return `transition-transform duration-300 ease-in-out data-[state=open]:translate-x-0 data-[state=open]:translate-y-0 ${axis} motion-reduce:transition-none`;
+    // shadcn's sheet: a slide utility per side, and its asymmetric durations —
+    // entering is slower than leaving, because a surface appearing wants to be
+    // noticed while one dismissed wants to be out of the way.
+    const slide = `data-[state=open]:slide-in-from-${side} data-[state=closed]:slide-out-to-${side}`;
+    return `data-[state=open]:animate-in data-[state=closed]:animate-out ${slide} data-[state=open]:duration-500 data-[state=closed]:duration-300 motion-reduce:animate-none`;
 }

package/dist/organisms/Dialog.d.ts

@@ -16,7 +16,6 @@
  * required rather than optional — `srOnlyTitle` is there for designs that show
  * no visible heading.
  */
-import type { Child } from "../lib/children.js";
 import { type Slot } from "../lib/children.js";
 import { type Reactive } from "../lib/props.js";
 export declare const dialogBackdropClasses = "fixed inset-0 z-50 bg-black/50";
@@ -24,9 +23,17 @@ export declare const dialogPanelClasses = "bg-background fixed top-1/2 left-1/2
 export interface DialogProps {
     /** Rendered inside the trigger button. Omit to drive `open` yourself. */
     trigger?: Slot;
-    /** Announced on open. Hide it visually with `srOnlyTitle`. */
-    title: Child;
-    description?: Child;
+    /**
+     * Announced on open. Hide it visually with `srOnlyTitle`.
+     *
+     * A `Slot`, so it may be an accessor: one Dialog driven between "create" and
+     * "edit" needs a title that follows. It already behaved that way — the
+     * renderer binds whatever it is given — while the type said `Child` and
+     * refused the function, so the working call did not compile and the type
+     * disagreed with `children` beside it for no reason.
+     */
+    title: Slot;
+    description?: Slot;
     children?: Slot;
     /** Actions, laid out bottom-right. */
     footer?: Slot;

package/dist/organisms/Dialog.js

@@ -59,14 +59,14 @@ export const Dialog = component((props) => {
 							id="${titleId}"
 							data-slot="dialog-title"
 							class="${cn("text-lg leading-none font-semibold", props.srOnlyTitle === true ? "sr-only" : "")}"
-						>${props.title}</h2>
+						>${slot(props.title)}</h2>
 						${props.description === undefined
             ? null
             : html `<p
 									id="${descriptionId}"
 									data-slot="dialog-description"
 									class="text-muted-foreground text-sm"
-								>${props.description}</p>`}
+								>${slot(props.description)}</p>`}
 					</div>
 					${slot(props.children)}
 					${props.footer === undefined

package/dist/organisms/Sidebar.d.ts

@@ -69,6 +69,15 @@ export interface SidebarMenuItemProps {
     tooltip?: string;
     /** A trailing control — the count of unread items, a status dot. */
     badge?: Child;
+    /**
+     * Extra classes, merged over the defaults.
+     *
+     * Every other component in this library takes one; this one did not, and a
+     * caller who wanted something as ordinary as dimming a disabled entry had
+     * to work around it. `cn` is tailwind-merge, so an override wins over the
+     * default it collides with rather than fighting it on specificity.
+     */
+    class?: Reactive<string>;
     onClick?: () => void;
 }
 /**

package/dist/organisms/Sidebar.js

@@ -171,18 +171,21 @@ export const SidebarMenuItem = component((props) => {
 					data-slot="sidebar-menu-badge"
 					class="text-sidebar-foreground/70 ml-auto flex h-5 min-w-5 shrink-0 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums"
 				>${props.badge}</span>`}`;
+    // Reactive, because `props.class` may be a signal — a caller dimming an
+    // entry as its state changes should not have to remount it.
+    const merged = () => cn(classes, read(props.class));
     const entry = props.href !== undefined
         ? html `<a
 					data-slot="sidebar-menu-item"
 					href="${props.href}"
 					aria-current="${() => (read(props.active) === true ? "page" : undefined)}"
-					class="${classes}"
+					class="${merged}"
 				>${body}</a>`
         : html `<button
 					type="button"
 					data-slot="sidebar-menu-item"
 					aria-current="${() => (read(props.active) === true ? "page" : undefined)}"
-					class="${classes}"
+					class="${merged}"
 					@click="${props.onClick}"
 				>${body}</button>`;
     if (props.tooltip === undefined)

package/dist/primitives/floatingSurface.js

@@ -33,17 +33,26 @@ import { onExitFinished } from "./presence.js";
 export function floatingSurface(options) {
     let live = null;
     function show() {
-        if (live !== null) {
-            // Already open and mid-exit: cancel the teardown and reuse the node
-            // rather than stacking a second copy on top of the one fading out.
-            live.cancelExit?.();
-            live.cancelExit = null;
-            live.element.setAttribute("data-state", "open");
-            return;
-        }
         const anchor = options.anchor();
         if (anchor === null)
             return;
+        if (live !== null) {
+            if (live.anchor === anchor) {
+                // The SAME anchor, already open and possibly mid-exit: cancel
+                // the teardown and reuse the node rather than stacking a second
+                // copy on top of the one fading out.
+                live.cancelExit?.();
+                live.cancelExit = null;
+                live.element.setAttribute("data-state", "open");
+                return;
+            }
+            // A DIFFERENT anchor. Content is built once per open, so reusing
+            // this node would show the previous anchor's content — one surface
+            // shared by the rows of a table showed the first row's entries
+            // however many rows were clicked. Its position, dismissal listeners
+            // and focus trap all belong to the old anchor too.
+            teardown();
+        }
         const mount = portal(options.content());
         const element = mount.host.firstElementChild;
         if (!(element instanceof HTMLElement)) {