@valentinkolb/cloud 0.4.0 → 0.5.0

package/src/ui/dialog-core.ts

@@ -23,13 +23,46 @@ export type DialogCore = {
   isOpen: () => boolean;
 };
 
-type DialogState = {
-  element?: HTMLDialogElement;
+/**
+ * One level on the dialog stack. Multiple levels can coexist (a deeper
+ * dialog opens on top of a shallower one — e.g. a `prompts.confirm`
+ * called from inside a `prompts.dialog`'s view), but only the topmost
+ * level is visible. Lower levels stay mounted (`display:none`) so their
+ * SolidJS state survives across the round-trip.
+ */
+type DialogStackEntry = {
+  /** Container `<div>` inside the shared `<dialog>`; one per level. */
+  container: HTMLDivElement;
+  /** SolidJS `render` disposer. Called only when this level is popped
+   *  off the stack — NOT when it's merely hidden by a deeper level. */
   dispose?: () => void;
+  /** Promise resolver for this level's `open()` call. */
   resolve?: (value: unknown) => void;
+  panelClassName: string;
+  cancelBehavior: NonNullable<OpenDialogOptions["cancelBehavior"]>;
+  initialFocus: NonNullable<OpenDialogOptions["initialFocus"]>;
+};
+
+type DialogState = {
+  /** Shared `<dialog>` element. One on the page, regardless of stack
+   *  depth — only the topmost level's container is visible. */
+  element?: HTMLDialogElement;
+  /** Active stack of dialog levels. Top of stack is the visible one.
+   *  Empty means no dialog is shown; `<dialog>.close()` has been called
+   *  and scroll is unlocked. */
+  stack: DialogStackEntry[];
   scrollLocked?: boolean;
   previousBodyOverflow?: string;
   previousHtmlOverflow?: string;
+  /** Tracks whether the most recent `mousedown` had `event.target ===
+   *  dialog` (i.e. on the backdrop itself, not on dialog content).
+   *  Used by the click handler to distinguish a real backdrop click
+   *  from a phantom one — e.g. when an option in an open `popover`
+   *  is mousedown'd, the popover hides synchronously, and the
+   *  subsequent click event gets retargeted to the dialog because the
+   *  option is now `display:none`. We only close on a click whose
+   *  mousedown was ALSO on the backdrop. */
+  mouseDownOnDialog?: boolean;
 };
 
 const DEFAULT_PANEL_CLASS = "dialog-panel";
@@ -41,25 +74,49 @@ const resolveInitialFocusTarget = (dialog: HTMLDialogElement, initialFocus: Open
   return dialog.querySelector<HTMLElement>("input:not([type='hidden']), textarea, select, button");
 };
 
-const applyCancelBehavior = <T>(dialog: HTMLDialogElement, close: DialogClose<T>, behavior: OpenDialogOptions["cancelBehavior"]) => {
-  dialog.oncancel = (event) => {
-    if (behavior === "ignore") {
+export const createDialogCore = (): DialogCore => {
+  const state: DialogState = { stack: [] };
+
+  /**
+   * Wires up Esc-cancel + backdrop-click behaviour to the dialog. Re-
+   * called whenever the topmost level changes (push/pop) so the
+   * handlers always reflect the current top's `cancelBehavior` and
+   * `close` callback.
+   *
+   * Backdrop-click detection guards against phantom clicks: it only
+   * fires when BOTH `mousedown` AND `click` target the dialog element
+   * itself. A click whose `mousedown` was on a child (and got
+   * retargeted to the dialog because the child went `display:none`
+   * mid-gesture — e.g. a popover hiding from inside its own option's
+   * onMouseDown) is rejected as not a real backdrop click.
+   */
+  const applyCancelBehavior = (
+    dialog: HTMLDialogElement,
+    close: () => void,
+    behavior: OpenDialogOptions["cancelBehavior"],
+  ) => {
+    dialog.oncancel = (event) => {
+      if (behavior === "ignore") {
+        event.preventDefault();
+        return;
+      }
       event.preventDefault();
-      return;
-    }
-    event.preventDefault();
-    close(undefined);
-  };
+      close();
+    };
 
-  dialog.onclick = (event) => {
-    if (event.target !== dialog) return;
-    if (behavior === "ignore") return;
-    close(undefined);
-  };
-};
+    dialog.onmousedown = (event) => {
+      state.mouseDownOnDialog = event.target === dialog;
+    };
 
-export const createDialogCore = (): DialogCore => {
-  const state: DialogState = {};
+    dialog.onclick = (event) => {
+      const wasRealBackdropClick = state.mouseDownOnDialog === true;
+      state.mouseDownOnDialog = false;
+      if (event.target !== dialog) return;
+      if (!wasRealBackdropClick) return;
+      if (behavior === "ignore") return;
+      close();
+    };
+  };
 
   const ensureDialogElement = () => {
     if (typeof document === "undefined") throw new Error("Dialog core is browser-only");
@@ -71,11 +128,6 @@ export const createDialogCore = (): DialogCore => {
     return element;
   };
 
-  const clearRenderedContent = () => {
-    state.dispose?.();
-    state.dispose = undefined;
-  };
-
   const lockPageScroll = () => {
     if (typeof document === "undefined" || state.scrollLocked) return;
 
@@ -96,50 +148,126 @@ export const createDialogCore = (): DialogCore => {
     state.previousHtmlOverflow = undefined;
   };
 
-  const close: DialogCore["close"] = (result) => {
+  /**
+   * Pop the topmost level off the stack. Disposes its SolidJS render,
+   * removes its container, resolves its promise. If this empties the
+   * stack the underlying `<dialog>` is closed and scroll unlocked;
+   * otherwise the previous level is unhidden and its dialog chrome
+   * (className, cancel handlers, initial focus) is restored.
+   */
+  const popTop = (result?: unknown) => {
+    const top = state.stack.pop();
+    if (!top) return;
+
+    top.dispose?.();
+    top.container.remove();
+
     const dialog = state.element;
-    if (!dialog) return;
+    const previous = state.stack[state.stack.length - 1];
 
-    clearRenderedContent();
-    if (dialog.open) dialog.close();
-    unlockPageScroll();
+    if (previous && dialog) {
+      // Restore the level that was hidden when this one opened — it
+      // was never disposed, so its SolidJS state is still live.
+      previous.container.style.display = "";
+      dialog.className = previous.panelClassName;
+      applyCancelBehavior(dialog, () => popTop(undefined), previous.cancelBehavior);
 
-    const resolve = state.resolve;
-    state.resolve = undefined;
-    resolve?.(result);
+      // Re-run the previous level's initial focus resolver. The
+      // browser's modal focus trap would otherwise pick the first
+      // focusable in DOM order, which can be wrong if the previous
+      // view declared a custom `initialFocus` function.
+      requestAnimationFrame(() => {
+        resolveInitialFocusTarget(dialog, previous.initialFocus)?.focus();
+      });
+    } else if (dialog) {
+      // Stack is empty — close the underlying dialog for real.
+      if (dialog.open) dialog.close();
+      unlockPageScroll();
+    }
+
+    // Resolve LAST so the awaiting caller observes the unmounted state.
+    top.resolve?.(result);
   };
 
   const open = <T>(view: DialogRender<T>, options: OpenDialogOptions = {}): Promise<T | undefined> => {
     const dialog = ensureDialogElement();
-    if (dialog.open) close(undefined);
 
-    dialog.className = options.panelClassName ?? DEFAULT_PANEL_CLASS;
-    dialog.innerHTML = "";
+    // Hide the currently-visible level (if any). We don't dispose —
+    // its SolidJS render keeps running so its signals, scroll, focus
+    // intent, etc. all survive the round-trip.
+    const previousTop = state.stack[state.stack.length - 1];
+    if (previousTop) {
+      previousTop.container.style.display = "none";
+    }
+
+    const panelClassName = options.panelClassName ?? DEFAULT_PANEL_CLASS;
+    const cancelBehavior = options.cancelBehavior ?? "resolve-undefined";
+    const initialFocus = options.initialFocus ?? "first-input";
+
+    dialog.className = panelClassName;
 
-    const content = document.createElement("div");
-    content.className = options.contentClassName ?? DEFAULT_CONTENT_CLASS;
-    dialog.appendChild(content);
+    const container = document.createElement("div");
+    container.className = options.contentClassName ?? DEFAULT_CONTENT_CLASS;
+    dialog.appendChild(container);
+
+    const entry: DialogStackEntry = {
+      container,
+      panelClassName,
+      cancelBehavior,
+      initialFocus,
+    };
 
     return new Promise((resolve) => {
-      state.resolve = (value) => resolve(value as T | undefined);
+      entry.resolve = (value) => resolve(value as T | undefined);
+
+      // Per-entry close callback. Idempotent and safe to call from a
+      // stale closure — if this entry has already been popped (or a
+      // deeper level is now on top), the call no-ops instead of
+      // accidentally popping someone else's level.
+      const closeTyped: DialogClose<T> = (result) => {
+        if (state.stack[state.stack.length - 1] !== entry) return;
+        popTop(result);
+      };
+
+      entry.dispose = render(() => view(closeTyped, { dialog }), container);
+
+      applyCancelBehavior(dialog, () => closeTyped(undefined), cancelBehavior);
 
-      const closeTyped: DialogClose<T> = (result) => close(result);
-      state.dispose = render(() => view(closeTyped, { dialog }), content);
+      // Push only after dispose is set so a synchronous close from the
+      // view's render path still finds itself on top.
+      state.stack.push(entry);
 
-      applyCancelBehavior(dialog, closeTyped, options.cancelBehavior ?? "resolve-undefined");
-      dialog.showModal();
-      lockPageScroll();
+      const wasFirstLevel = state.stack.length === 1;
+      if (wasFirstLevel) {
+        dialog.showModal();
+        lockPageScroll();
+      }
 
       requestAnimationFrame(() => {
-        resolveInitialFocusTarget(dialog, options.initialFocus ?? "first-input")?.focus();
+        resolveInitialFocusTarget(dialog, initialFocus)?.focus();
       });
     });
   };
 
+  /**
+   * Close ALL levels on the stack. The first pop receives `result`,
+   * the rest get `undefined`. Used by external callers that want to
+   * dismiss the dialog system entirely (e.g. in cleanup / route
+   * change). Internal per-level closing goes through the `close`
+   * callback passed to each view, which only pops its own level.
+   */
+  const close: DialogCore["close"] = (result) => {
+    let first = true;
+    while (state.stack.length > 0) {
+      popTop(first ? result : undefined);
+      first = false;
+    }
+  };
+
   return {
     open,
     close,
-    isOpen: () => !!state.element?.open,
+    isOpen: () => state.stack.length > 0,
   };
 };
 

package/src/ui/filter/FilterChip.tsx

@@ -1,4 +1,4 @@
-import { createSignal, createEffect, Show, createMemo } from "solid-js";
+import { createSignal, createEffect, Show } from "solid-js";
 import Dropdown from "../misc/Dropdown";
 import type { DropdownItem } from "../misc/Dropdown";
 
@@ -41,6 +41,8 @@ type FilterChipProps = {
    * Also hides the count in the trigger.
    */
   defaultValue?: string[];
+  /** Render only the trigger icon while keeping the label as accessible title text. */
+  iconOnly?: boolean;
 };
 
 // =============================================================================
@@ -50,7 +52,7 @@ type FilterChipProps = {
 /**
  * Filter chip using the shared Dropdown component.
  * Each section can be single-select or multi-select independently.
- * Changes are applied when the dropdown closes.
+ * Changes are committed immediately so URL-backed filters update without losing focus.
  */
 export default function FilterChip(props: FilterChipProps) {
   // Local selection state (tracks pending changes)
@@ -60,12 +62,6 @@ export default function FilterChip(props: FilterChipProps) {
   createEffect(() => setLocalValue([...props.value]));
 
   // Computed values
-  const hasChanges = createMemo(() => {
-    const local = localValue();
-    const original = props.value;
-    return local.length !== original.length || local.some((v) => !original.includes(v));
-  });
-
   const isActive = () => props.isActive ?? localValue().length > 0;
   const isSelected = (value: string) => localValue().includes(value);
   const selectedCount = () => localValue().length;
@@ -81,6 +77,11 @@ export default function FilterChip(props: FilterChipProps) {
   // Find which section a value belongs to
   const getSectionForValue = (value: string) => props.options.findIndex((s) => s.options.some((o) => o.value === value));
 
+  const commitValue = (nextValue: string[]) => {
+    setLocalValue(nextValue);
+    props.onChange(nextValue);
+  };
+
   // Toggle option selection
   const toggleOption = (value: string) => {
     const sectionIndex = getSectionForValue(value);
@@ -89,25 +90,20 @@ export default function FilterChip(props: FilterChipProps) {
 
     const isMultiple = section.multiple ?? false;
 
-    setLocalValue((prev) => {
-      const isCurrentlySelected = prev.includes(value);
-
-      if (isMultiple) {
-        return isCurrentlySelected ? prev.filter((v) => v !== value) : [...prev, value];
-      }
+    const prev = localValue();
+    const isCurrentlySelected = prev.includes(value);
+    if (isMultiple) {
+      commitValue(isCurrentlySelected ? prev.filter((v) => v !== value) : [...prev, value]);
+      return;
+    }
 
-      // Single-select: replace any value from this section
-      const sectionValues = new Set(section.options.map((o) => o.value));
-      const otherValues = prev.filter((v) => !sectionValues.has(v));
-      return isCurrentlySelected ? otherValues : [...otherValues, value];
-    });
+    // Single-select: replace any value from this section.
+    const sectionValues = new Set(section.options.map((o) => o.value));
+    const otherValues = prev.filter((v) => !sectionValues.has(v));
+    commitValue(isCurrentlySelected ? otherValues : [...otherValues, value]);
   };
 
-  const clearOrReset = () => setLocalValue(props.defaultValue ? [...props.defaultValue] : []);
-
-  const handleClose = () => {
-    if (hasChanges()) props.onChange(localValue());
-  };
+  const clearOrReset = () => commitValue(props.defaultValue ? [...props.defaultValue] : []);
 
   // Build dropdown elements
   const dropdownElements = (): DropdownItem[] => {
@@ -128,7 +124,14 @@ export default function FilterChip(props: FilterChipProps) {
             }}
           >
             <Show when={isMultiple}>
-              <input type="checkbox" checked={isSelected(option.value)} readOnly aria-hidden="true" tabindex={-1} class="shrink-0 pointer-events-none" />
+              <input
+                type="checkbox"
+                checked={isSelected(option.value)}
+                readOnly
+                aria-hidden="true"
+                tabindex={-1}
+                class="shrink-0 pointer-events-none"
+              />
             </Show>
 
             <Show when={option.icon && !isMultiple}>
@@ -174,23 +177,22 @@ export default function FilterChip(props: FilterChipProps) {
   };
 
   const trigger = (
-    <div class={`btn-input btn-input-sm ${isActive() ? "btn-input-active" : ""}`}>
+    <div
+      class={`btn-input btn-input-sm ${props.iconOnly ? "h-8 w-8 justify-center px-0" : ""} ${isActive() ? "btn-input-active" : ""}`}
+      role="button"
+      aria-label={props.label}
+      title={props.iconOnly ? props.label : undefined}
+    >
       <i class={`${props.icon} ${isActive() ? "text-blue-600 dark:text-blue-300" : "text-zinc-500 dark:text-zinc-400"}`} />
-      <span class={isActive() ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-700 dark:text-zinc-300"}>
-        {props.label}
-        <Show when={!hasDefaultValue() && selectedCount() > 0}>{` (${selectedCount()})`}</Show>
-      </span>
-      <i class="ti ti-chevron-down text-zinc-400 text-[10px]" />
+      <Show when={!props.iconOnly}>
+        <span class={isActive() ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-700 dark:text-zinc-300"}>
+          {props.label}
+          <Show when={!hasDefaultValue() && selectedCount() > 0}>{` (${selectedCount()})`}</Show>
+        </span>
+        <i class="ti ti-chevron-down text-zinc-400 text-[10px]" />
+      </Show>
     </div>
   );
 
-  return (
-    <Dropdown
-      trigger={trigger}
-      elements={dropdownElements()}
-      position={props.position ?? "bottom-left"}
-      onClose={handleClose}
-      width="w-52"
-    />
-  );
+  return <Dropdown trigger={trigger} elements={dropdownElements()} position={props.position ?? "bottom-left"} width="w-52" />;
 }

package/src/ui/index.ts

@@ -1,17 +1,16 @@
-export * from "./misc";
-export * from "./ipa";
-export * from "./input";
+export type { SettingsFieldProps, SettingsSaveBarProps } from "./admin-settings";
+export { readSettingsError, SettingsField, SettingsSaveBar, sameSettingValue } from "./admin-settings";
+export type { DialogClose, DialogCore, DialogRender, OpenDialogOptions } from "./dialog-core";
+export { createDialogCore, dialogCore } from "./dialog-core";
 export * from "./filter";
+export * from "./input";
+export { layout, LAYOUT_UPDATE_EVENT, type LayoutBreadcrumb, type LayoutUpdate } from "./layout";
+export * from "./misc";
+export type { PromptSearchInput, PromptSearchItem, PromptSearchOptions } from "./prompts";
+export { createFormState, DialogHeader, prompts } from "./prompts";
+export type { ToastFn, ToastHandle, ToastOptions, ToastVariant } from "./toast";
+export { toast } from "./toast";
 export * from "./widgets";
-export { currentPathWithQuery, refreshCurrentPath, navigateTo } from "./navigation";
-export { SettingsField, SettingsSaveBar, sameSettingValue, readSettingsError } from "./admin-settings";
-export type { SettingsFieldProps, SettingsSaveBarProps } from "./admin-settings";
-export { prompts, DialogHeader, createFormState } from "./prompts";
-export type { PromptSearchItem, PromptSearchInput, PromptSearchOptions } from "./prompts";
-export { dialogCore, createDialogCore } from "./dialog-core";
-export type { DialogClose, OpenDialogOptions, DialogRender, DialogCore } from "./dialog-core";
-export { default as SidebarLayout, SidebarFromSpec } from "./sidebar";
-export type { SidebarSpec, SidebarRow, SidebarSection, SidebarTreeNode, SidebarTreeSpec } from "./sidebar";
 // NOTE: islands (*.island.tsx) belong inside the consuming app's package, not
 // in cloud-lib. The SSR plugin discovers islands by import-path suffix; barrel
 // re-exports strip the `.island` segment and silently break hydration. Apps