@simplysm/solid 13.0.70 → 13.0.72

package/src/components/disclosure/Dropdown.tsx

@@ -18,6 +18,7 @@ import { twMerge } from "tailwind-merge";
 import { mergeStyles } from "../../helpers/mergeStyles";
 import { createSlotComponent } from "../../helpers/createSlotComponent";
 import { borderSubtle } from "../../styles/tokens.styles";
+import { tabbable } from "tabbable";
 
 // --- DropdownContext (internal) ---
 
@@ -70,13 +71,15 @@ export interface DropdownProps {
    * Enable keyboard navigation (used in Select, etc)
    *
    * When direction=down:
-   * - ArrowDown from trigger -> focus first focusable item
-   * - ArrowUp from first item -> focus trigger
+   * - ArrowDown from trigger -> focus first tabbable item in popup
+   * - ArrowUp/ArrowDown within popup -> navigate between tabbable items
+   * - ArrowUp from first tabbable -> focus trigger
    * - ArrowUp from trigger -> close
    *
    * When direction=up:
-   * - ArrowUp from trigger -> focus last focusable item
-   * - ArrowDown from last item -> focus trigger
+   * - ArrowUp from trigger -> focus last tabbable item in popup
+   * - ArrowUp/ArrowDown within popup -> navigate between tabbable items
+   * - ArrowDown from last tabbable -> focus trigger
    * - ArrowDown from trigger -> close
    */
   keyboardNav?: boolean;
@@ -319,11 +322,7 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     if (!popup) return;
 
     const dir = direction();
-    const focusables = [
-      ...popup.querySelectorAll<HTMLElement>(
-        '[tabindex]:not([tabindex="-1"]), button, [data-list-item]',
-      ),
-    ];
+    const focusables = tabbable(popup);
 
     if (dir === "down") {
       if (e.key === "ArrowDown" && focusables.length > 0) {
@@ -354,16 +353,30 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
 
     if (!triggerRef) return;
 
+    const popup = popupRef();
+    if (!popup) return;
+
     const dir = direction();
+    const allTabbable = tabbable(popup);
+    const current = (document.activeElement ?? e.target) as HTMLElement;
+    const currentIdx = allTabbable.indexOf(current);
 
-    // If ArrowUp/ArrowDown not handled in popup (first/last item)
-    // Move focus to trigger
-    if (dir === "down" && e.key === "ArrowUp") {
-      e.preventDefault();
-      triggerRef.focus();
-    } else if (dir === "up" && e.key === "ArrowDown") {
-      e.preventDefault();
-      triggerRef.focus();
+    if (e.key === "ArrowUp") {
+      if (currentIdx > 0) {
+        e.preventDefault();
+        allTabbable[currentIdx - 1].focus();
+      } else if (dir === "down") {
+        e.preventDefault();
+        triggerRef.focus();
+      }
+    } else if (e.key === "ArrowDown") {
+      if (currentIdx >= 0 && currentIdx < allTabbable.length - 1) {
+        e.preventDefault();
+        allTabbable[currentIdx + 1].focus();
+      } else if (dir === "up") {
+        e.preventDefault();
+        triggerRef.focus();
+      }
     }
   };
 
@@ -432,6 +445,7 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
           ref={(el) => {
             triggerRef = el;
           }}
+          tabIndex={-1}
           data-dropdown-trigger
           onClick={toggle}
           onKeyDown={handleTriggerKeyDown}

package/src/components/disclosure/dialogZIndex.ts

@@ -46,3 +46,8 @@ function reindex(): void {
 export function isTopmost(el: HTMLElement): boolean {
   return stack.length > 0 && stack[stack.length - 1] === el;
 }
+
+/** Get the topmost (front-most) Dialog element, or null if none are open */
+export function getTopmostDialog(): HTMLElement | null {
+  return stack.length > 0 ? stack[stack.length - 1] : null;
+}

package/src/components/features/crud-detail/CrudDetail.tsx

@@ -2,12 +2,15 @@ import {
   children,
   createMemo,
   createSignal,
+  createUniqueId,
   type JSX,
+  onCleanup,
   onMount,
   Show,
   splitProps,
   useContext,
 } from "solid-js";
+import { registerCrud, unregisterCrud, activateCrud, isActiveCrud } from "../crudRegistry";
 import { reconcile, unwrap } from "solid-js/store";
 import { createControllableStore } from "../../../hooks/createControllableStore";
 import { objClone, objEqual } from "@simplysm/core-common";
@@ -82,6 +85,8 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
 
   let formRef: HTMLFormElement | undefined;
 
+  const crudId = createUniqueId();
+
   // -- Load --
   async function doLoad() {
     setBusyCount((c) => c + 1);
@@ -100,6 +105,10 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
   onMount(() => {
     void doLoad();
   });
+  onCleanup(() => unregisterCrud(crudId));
+
+  createEventListener(() => formRef, "pointerdown", () => activateCrud(crudId));
+  createEventListener(() => formRef, "focusin", () => activateCrud(crudId));
 
   // -- Change Detection --
   function hasChanges(): boolean {
@@ -177,13 +186,15 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
 
   // -- Keyboard Shortcuts --
   createEventListener(document, "keydown", (e: KeyboardEvent) => {
-    if (!formRef?.contains(document.activeElement)) return;
+    if (!isActiveCrud(crudId)) return;
     if (e.ctrlKey && e.key === "s") {
       e.preventDefault();
-      formRef.requestSubmit();
+      e.stopImmediatePropagation();
+      formRef?.requestSubmit();
     }
     if (e.ctrlKey && e.altKey && e.key === "l") {
       e.preventDefault();
+      e.stopImmediatePropagation();
       void handleRefresh();
     }
   });
@@ -273,11 +284,11 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
       <BusyContainer
         ready={ready()}
         busy={busyCount() > 0}
-        class={clsx("flex h-full flex-col", local.class)}
+        class={clsx("flex h-full flex-col gap-2", local.class)}
       >
         {/* Toolbar */}
         <Show when={(!isModal && !topbarCtx) || defs().tools}>
-          <div class="flex gap-2 p-2 pb-0">
+          <div class="flex gap-2 pb-0">
             <Show when={!topbarCtx && !isModal}>
               <Show when={canEdit() && local.submit}>
                 <Button
@@ -324,7 +335,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         <Show when={defs().before}>{(beforeDef) => beforeDef().children}</Show>
 
         {/* Form */}
-        <form ref={formRef} class="flex-1 overflow-auto p-4" onSubmit={handleFormSubmit}>
+        <form ref={(el) => { formRef = el; registerCrud(crudId, el); }} class="flex-1 overflow-auto" onSubmit={handleFormSubmit}>
           {formContent()}
         </form>
 

package/src/components/features/crud-sheet/CrudSheet.tsx

@@ -3,8 +3,10 @@ import {
   createEffect,
   createMemo,
   createSignal,
+  createUniqueId,
   For,
   type JSX,
+  onCleanup,
   Show,
   splitProps,
   useContext,
@@ -41,6 +43,7 @@ import {
   IconTrashOff,
   IconUpload,
 } from "@tabler/icons-solidjs";
+import { registerCrud, unregisterCrud, activateCrud, isActiveCrud } from "../crudRegistry";
 import { CrudSheetColumn, isCrudSheetColumnDef } from "./CrudSheetColumn";
 import { CrudSheetFilter, isCrudSheetFilterDef } from "./CrudSheetFilter";
 import { CrudSheetTools, isCrudSheetToolsDef } from "./CrudSheetTools";
@@ -134,6 +137,11 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   let formRef: HTMLFormElement | undefined;
 
+  const crudId = createUniqueId();
+  onCleanup(() => unregisterCrud(crudId));
+  createEventListener(() => formRef, "pointerdown", () => activateCrud(crudId));
+  createEventListener(() => formRef, "focusin", () => activateCrud(crudId));
+
   createEffect(() => {
     void doRefresh();
   });
@@ -389,13 +397,15 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   // -- Keyboard Shortcuts --
   createEventListener(document, "keydown", async (e: KeyboardEvent) => {
-    if (!formRef?.contains(document.activeElement)) return;
+    if (!isActiveCrud(crudId)) return;
     if (e.ctrlKey && e.key === "s" && !isSelectMode()) {
       e.preventDefault();
-      formRef.requestSubmit();
+      e.stopImmediatePropagation();
+      formRef?.requestSubmit();
     }
     if (e.ctrlKey && e.altKey && e.key === "l") {
       e.preventDefault();
+      e.stopImmediatePropagation();
       if (!checkIgnoreChanges()) return;
       await doRefresh();
     }
@@ -602,7 +612,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
         </Show>
 
         {/* DataSheet */}
-        <form ref={formRef} class="flex-1 overflow-hidden p-2 pt-1" onSubmit={handleFormSubmit}>
+        <form ref={(el) => { formRef = el; registerCrud(crudId, el); }} class="flex-1 overflow-hidden p-2 pt-1" onSubmit={handleFormSubmit}>
           <DataSheet
             class="h-full"
             items={items}

package/src/components/features/crudRegistry.ts

@@ -0,0 +1,60 @@
+/**
+ * Crud activation registry
+ *
+ * Tracks mounted CrudDetail/CrudSheet instances and determines which one
+ * should respond to keyboard shortcuts (Ctrl+S, Ctrl+Alt+L).
+ *
+ * Priority rules:
+ * 1. If a Dialog is open, only cruds inside the topmost Dialog are candidates.
+ * 2. Among candidates, the most recently activated (interacted) crud wins.
+ * 3. On mount, cruds are auto-activated (last mounted = active).
+ */
+
+import { getTopmostDialog } from "../disclosure/dialogZIndex";
+
+interface CrudEntry {
+  id: string;
+  formEl: HTMLFormElement;
+  lastActivatedAt: number;
+}
+
+const entries: CrudEntry[] = [];
+let _counter = 0;
+
+export function registerCrud(id: string, formEl: HTMLFormElement): void {
+  const existing = entries.find((e) => e.id === id);
+  if (existing) return;
+  entries.push({ id, formEl, lastActivatedAt: ++_counter });
+}
+
+export function unregisterCrud(id: string): void {
+  const idx = entries.findIndex((e) => e.id === id);
+  if (idx >= 0) entries.splice(idx, 1);
+}
+
+export function activateCrud(id: string): void {
+  const entry = entries.find((e) => e.id === id);
+  if (entry) entry.lastActivatedAt = ++_counter;
+}
+
+export function isActiveCrud(id: string): boolean {
+  const entry = entries.find((e) => e.id === id);
+  if (!entry) return false;
+
+  const topDialog = getTopmostDialog();
+
+  const candidates = topDialog
+    ? entries.filter((e) => topDialog.contains(e.formEl))
+    : entries;
+
+  if (candidates.length === 0) return false;
+
+  let best = candidates[0];
+  for (let i = 1; i < candidates.length; i++) {
+    if (candidates[i].lastActivatedAt > best.lastActivatedAt) {
+      best = candidates[i];
+    }
+  }
+
+  return best.id === id;
+}

package/src/components/features/permission-table/PermissionTable.tsx

@@ -10,7 +10,6 @@ import {
   splitProps,
 } from "solid-js";
 import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
 import { DataSheet } from "../../data/sheet/DataSheet";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { borderDefault } from "../../../styles/tokens.styles";
@@ -261,51 +260,55 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
   };
 
   return (
-    <div data-permission-table class={twMerge(local.class)} style={local.style}>
-      <DataSheet
-        items={visibleItems()}
-        getChildren={getChildren}
-        expandedItems={expandedItems()}
-        onExpandedItemsChange={setExpandedItems}
-        hideConfigBar
+    <DataSheet
+      data-permission-table
+      items={visibleItems()}
+      getChildren={getChildren}
+      expandedItems={expandedItems()}
+      onExpandedItemsChange={setExpandedItems}
+      hideConfigBar
+    >
+      <DataSheet.Column
+        key="title"
+        header={i18n?.t("permissionTable.permissionItem") ?? "Permission Item"}
+        sortable={false}
+        resizable={false}
       >
-        <DataSheet.Column key="title" header={i18n?.t("permissionTable.permissionItem") ?? "Permission Item"} sortable={false} resizable={false}>
-          {(ctx) => {
-            const item = ctx.item as AppPerm;
-            return (
-              <div class={titleCellClass}>
-                <For each={Array.from({ length: ctx.depth })}>
-                  {() => (
-                    <div class={indentGuideWrapperClass}>
-                      <div class={indentGuideLineClass} />
-                    </div>
-                  )}
-                </For>
-                <span class="py-1">{item.title}</span>
-              </div>
-            );
-          }}
-        </DataSheet.Column>
-        <For each={allPerms()}>
-          {(perm) => (
-            <DataSheet.Column key={`perm-${perm}`} header={perm} sortable={false} resizable={false}>
-              {(ctx) => {
-                const item = ctx.item as AppPerm;
-                return (
-                  <Show when={hasPermInTree(item, perm)}>
-                    <Checkbox
-                      value={isGroupPermChecked(item, perm, currentValue())}
-                      onValueChange={(checked) => handlePermChange(item, perm, checked)}
-                      disabled={local.disabled || isPermDisabled(item, perm, currentValue())}
-                      inset
-                    />
-                  </Show>
-                );
-              }}
-            </DataSheet.Column>
-          )}
-        </For>
-      </DataSheet>
-    </div>
+        {(ctx) => {
+          const item = ctx.item as AppPerm;
+          return (
+            <div class={titleCellClass}>
+              <For each={Array.from({ length: ctx.depth })}>
+                {() => (
+                  <div class={indentGuideWrapperClass}>
+                    <div class={indentGuideLineClass} />
+                  </div>
+                )}
+              </For>
+              <span class="py-1">{item.title}</span>
+            </div>
+          );
+        }}
+      </DataSheet.Column>
+      <For each={allPerms()}>
+        {(perm) => (
+          <DataSheet.Column key={`perm-${perm}`} header={perm} sortable={false} resizable={false}>
+            {(ctx) => {
+              const item = ctx.item as AppPerm;
+              return (
+                <Show when={hasPermInTree(item, perm)}>
+                  <Checkbox
+                    value={isGroupPermChecked(item, perm, currentValue())}
+                    onValueChange={(checked) => handlePermChange(item, perm, checked)}
+                    disabled={local.disabled || isPermDisabled(item, perm, currentValue())}
+                    inset
+                  />
+                </Show>
+              );
+            }}
+          </DataSheet.Column>
+        )}
+      </For>
+    </DataSheet>
   );
 };

package/src/components/features/shared-data/SharedDataSelect.tsx

@@ -90,12 +90,12 @@ export function SharedDataSelect<TItem>(props: SharedDataSelectProps<TItem>): JS
       <Select.ItemTemplate>{local.children}</Select.ItemTemplate>
       {local.modal && (
         <Select.Action onClick={() => void handleOpenModal()} aria-label={i18n?.t("sharedDataSelect.search") ?? "Search"}>
-          <Icon icon={IconSearch} size="1em" />
+          <Icon icon={IconSearch} />
         </Select.Action>
       )}
       {local.editModal && (
         <Select.Action onClick={() => void handleOpenEditModal()} aria-label={i18n?.t("sharedDataSelect.edit") ?? "Edit"}>
-          <Icon icon={IconEdit} size="1em" />
+          <Icon icon={IconEdit} />
         </Select.Action>
       )}
     </Select>

package/src/components/features/shared-data/SharedDataSelectList.tsx

@@ -1,14 +1,10 @@
 import { createEffect, createMemo, createSignal, For, type JSX, Show, splitProps } from "solid-js";
-import { IconExternalLink } from "@tabler/icons-solidjs";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataContext";
 import { List } from "../../data/list/List";
 import { Pagination } from "../../data/Pagination";
-import { Button } from "../../form-control/Button";
-import { Icon } from "../../display/Icon";
 import { TextInput } from "../../form-control/field/TextInput";
-import { useDialog } from "../../disclosure/DialogContext";
 import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 import { textMuted } from "../../../styles/tokens.styles";
 import { createSlotSignal } from "../../../hooks/createSlotSignal";
@@ -39,10 +35,8 @@ export interface SharedDataSelectListProps<TItem> {
   canChange?: (item: TItem | undefined) => boolean | Promise<boolean>;
   /** Page size (shows Pagination if provided) */
   pageSize?: number;
-  /** Header text */
-  header?: string;
-  /** Management modal component factory */
-  modal?: () => JSX.Element;
+  /** Header content */
+  header?: JSX.Element;
 
   /** Compound sub-components (ItemTemplate, Filter) */
   children?: JSX.Element;
@@ -57,8 +51,6 @@ export interface SharedDataSelectListProps<TItem> {
 
 const containerClass = clsx("flex-col gap-1");
 
-const headerClass = clsx("flex items-center gap-1 px-2 py-1 text-sm font-semibold");
-
 // ─── Component ───────────────────────────────────────────
 
 export interface SharedDataSelectListComponent {
@@ -83,10 +75,8 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
     "canChange",
     "pageSize",
     "header",
-    "modal",
   ]);
 
-  const dialog = useDialog();
   const i18n = useI18nOptional();
 
   // ─── Slot signals ──────────────────────────────────────
@@ -192,13 +182,6 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
     }
   };
 
-  // ─── Open modal ────────────────────────────────────────
-
-  const handleOpenModal = async () => {
-    if (!local.modal) return;
-    await dialog.show(local.modal, {});
-  };
-
   // ─── Render ────────────────────────────────────────────
 
   return (
@@ -212,26 +195,18 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
         style={local.style}
       >
         {/* Header */}
-        <Show when={local.header != null || local.modal != null}>
-          <div class={headerClass}>
-            <Show when={local.header != null}>{local.header}</Show>
-            <Show when={local.modal != null}>
-              <Button size="sm" onClick={() => void handleOpenModal()}>
-                <Icon icon={IconExternalLink} />
-              </Button>
-            </Show>
-          </div>
-        </Show>
+        <Show when={local.header != null}>{local.header}</Show>
 
         {/* Search input: when Filter compound is absent and getSearchText exists */}
         <Show when={!filter() && local.data.getSearchText}>
-          <TextInput
-            value={searchText()}
-            onValueChange={setSearchText}
-            placeholder={i18n?.t("sharedDataSelectList.searchPlaceholder") ?? "Search..."}
-            size="sm"
-            inset
-          />
+          <div class={"p-1"}>
+            <TextInput
+              value={searchText()}
+              onValueChange={setSearchText}
+              placeholder={i18n?.t("sharedDataSelectList.searchPlaceholder") ?? "Search..."}
+              class={"w-full"}
+            />
+          </div>
         </Show>
 
         {/* Custom Filter */}

package/src/components/form-control/select/Select.tsx

@@ -44,11 +44,7 @@ const searchInputClass = clsx(
   "w-full",
   "rounded-none",
   "border-0 border-b",
-  borderSubtle,
-  "bg-transparent dark:bg-transparent",
-  "h-auto",
-  "py-1.5",
-  "text-sm",
+  borderSubtle
 );
 
 // Select all/deselect all button area styles

package/src/helpers/createAppStructure.ts

@@ -1,5 +1,6 @@
 import type { Component, ParentComponent } from "solid-js";
-import { type Accessor, createContext, createMemo, createRoot, useContext } from "solid-js";
+import { type Accessor, createMemo, createRoot, useContext } from "solid-js";
+import { createHmrSafeContext } from "./createHmrSafeContext";
 import type { IconProps } from "@tabler/icons-solidjs";
 
 // ── Input Types ──
@@ -497,7 +498,7 @@ export function createAppStructure<TModule, const TItems extends AppStructureIte
 } {
   type TRet = AppStructure<TModule> & { perms: InferPerms<TItems> };
 
-  const Ctx = createContext<TRet>();
+  const Ctx = createHmrSafeContext<TRet>("AppStructure");
 
   const AppStructureProvider: ParentComponent = (props) => {
     const structure = buildAppStructure(getOpts());

package/src/helpers/createHmrSafeContext.ts

@@ -0,0 +1,8 @@
+import { type Context, createContext } from "solid-js";
+
+const CACHE_KEY = "__simplysm_ctx__";
+const cache = ((globalThis as unknown as Record<string, Record<string, unknown>>)[CACHE_KEY] ??= {});
+
+export function createHmrSafeContext<TValue>(key: string): Context<TValue | undefined> {
+  return (cache[key] ??= createContext<TValue>()) as Context<TValue | undefined>;
+}

package/src/hooks/createSelectionGroup.tsx

@@ -1,11 +1,11 @@
 import {
   type JSX,
   type ParentComponent,
-  createContext,
   createMemo,
   splitProps,
   useContext,
 } from "solid-js";
+import { createHmrSafeContext } from "../helpers/createHmrSafeContext";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "./createControllableSignal";
 import { Invalid } from "../components/form-control/Invalid";
@@ -106,7 +106,9 @@ export function createSelectionGroup(config: MultiGroupConfig | SingleGroupConfi
     Item: <TValue = unknown>(props: SelectionGroupItemProps<TValue>) => JSX.Element;
   };
 } {
-  const Context = createContext<MultiSelectContext | SingleSelectContext>();
+  const Context = createHmrSafeContext<MultiSelectContext | SingleSelectContext>(
+    `SelectionGroup_${config.contextName}`,
+  );
   const ItemComponent = config.ItemComponent;
 
   function ItemInner<TValue>(props: SelectionGroupItemProps<TValue>) {