@simplysm/solid 13.0.75 → 13.0.76

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

@@ -1,7 +1,5 @@
 import {
-  children,
   createEffect,
-  createMemo,
   createSignal,
   createUniqueId,
   For,
@@ -19,19 +17,21 @@ import "@simplysm/core-common"; // register extensions
 import type { SortingDef } from "../../data/sheet/types";
 import { DataSheet } from "../../data/sheet/DataSheet";
 import { DataSheetColumn } from "../../data/sheet/DataSheetColumn";
+import { normalizeHeader } from "../../data/sheet/sheetUtils";
 import { BusyContainer } from "../../feedback/busy/BusyContainer";
-import { useNotification } from "../../feedback/notification/NotificationContext";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { useNotification } from "../../feedback/notification/NotificationProvider";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 import { Button } from "../../form-control/Button";
 import { Icon } from "../../display/Icon";
 import { FormGroup } from "../../layout/FormGroup";
-import { createTopbarActions, TopbarContext } from "../../layout/topbar/TopbarContext";
-import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
+import { createTopbarActions, TopbarContext } from "../../layout/topbar/Topbar";
 import { Dialog } from "../../disclosure/Dialog";
 import { Link } from "../../display/Link";
 import { createEventListener } from "@solid-primitives/event-listener";
 import { useBeforeLeave } from "@solidjs/router";
 import clsx from "clsx";
+import { text } from "../../../styles/base.styles";
+import { gap, pad } from "../../../styles/control.styles";
 import {
   IconDeviceFloppy,
   IconExternalLink,
@@ -44,17 +44,14 @@ import {
   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";
-import { CrudSheetHeader, isCrudSheetHeaderDef } from "./CrudSheetHeader";
+import { CrudSheetColumn, createCrudSheetColumnSlotsAccessor } from "./CrudSheetColumn";
+import { CrudSheetFilter, createCrudSheetFilterSlotAccessor } from "./CrudSheetFilter";
+import { CrudSheetTools, createCrudSheetToolsSlotAccessor } from "./CrudSheetTools";
+import { CrudSheetHeader, createCrudSheetHeaderSlotAccessor } from "./CrudSheetHeader";
 import type {
-  CrudSheetColumnDef,
+  CrudSheetCellContext,
   CrudSheetContext,
-  CrudSheetFilterDef,
-  CrudSheetHeaderDef,
   CrudSheetProps,
-  CrudSheetToolsDef,
   SearchResult,
 } from "./types";
 
@@ -72,24 +69,25 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   const [local] = splitProps(props, [
     "search",
     "getItemKey",
-    "persistKey",
+    "storageKey",
     "editable",
     "itemEditable",
     "itemDeletable",
     "itemDeleted",
-    "isItemSelectable",
+    "itemSelectable",
     "lastModifiedAtProp",
     "lastModifiedByProp",
-    "onSubmitted",
+    "onSubmitComplete",
     "filterInitial",
     "items",
     "onItemsChange",
     "inlineEdit",
     "dialogEdit",
     "excel",
-    "selectMode",
+    "selectionMode",
     "onSelect",
     "hideAutoTools",
+    "close",
     "class",
     "children",
   ]);
@@ -97,22 +95,15 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   const noti = useNotification();
   const i18n = useI18n();
   const topbarCtx = useContext(TopbarContext);
-  const dialogInstance = useDialogInstance();
-  const isInDialog = dialogInstance !== undefined;
-  const isSelectMode = () => local.selectMode != null;
+  const isInDialog = local.close !== undefined;
+  const isSelectMode = () => local.selectionMode != null;
   const canEdit = () => (isInDialog && isSelectMode() ? false : (local.editable ?? true));
 
-  // -- Children Resolution --
-  const resolved = children(() => local.children);
-  const defs = createMemo(() => {
-    const arr = resolved.toArray();
-    return {
-      filter: arr.find(isCrudSheetFilterDef) as CrudSheetFilterDef<TFilter> | undefined,
-      columns: arr.filter(isCrudSheetColumnDef) as unknown as CrudSheetColumnDef<TItem>[],
-      tools: arr.find(isCrudSheetToolsDef) as CrudSheetToolsDef<TItem> | undefined,
-      header: arr.find(isCrudSheetHeaderDef) as CrudSheetHeaderDef | undefined,
-    };
-  });
+  // -- Slot Accessors --
+  const [headerSlot, HeaderProvider] = createCrudSheetHeaderSlotAccessor();
+  const [filterSlot, FilterProvider] = createCrudSheetFilterSlotAccessor();
+  const [toolsSlot, ToolsProvider] = createCrudSheetToolsSlotAccessor();
+  const [columnSlots, ColumnsProvider] = createCrudSheetColumnSlotsAccessor();
 
   // -- State --
   const [items, setItems] = createControllableStore<TItem[]>({
@@ -121,7 +112,6 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   });
   let originalItems: TItem[] = [];
 
-  // eslint-disable-next-line solid/reactivity -- filterInitial is used only for initial value
   const [filter, setFilter] = createStore<TFilter>((local.filterInitial ?? {}) as TFilter);
   const [lastFilter, setLastFilter] = createSignal<TFilter>(objClone(filter));
 
@@ -132,7 +122,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   const [busyCount, setBusyCount] = createSignal(0);
   const [ready, setReady] = createSignal(false);
 
-  const [selectedItems, setSelectedItems] = createSignal<TItem[]>([]);
+  const [selection, setSelection] = createSignal<TItem[]>([]);
   const [selectedKeys, setSelectedKeys] = createSignal<Set<string | number>>(new Set());
 
   let formRef: HTMLFormElement | undefined;
@@ -146,13 +136,13 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     void doRefresh();
   });
 
-  // -- Key-based selection: restore selectedItems when items change --
+  // -- Key-based selection: restore selection when items change --
   createEffect(() => {
     const currentItems = items as unknown as TItem[];
     const keys = selectedKeys();
     if (keys.size === 0) {
-      if (selectedItems().length > 0) {
-        setSelectedItems([]);
+      if (selection().length > 0) {
+        setSelection([]);
       }
       return;
     }
@@ -160,7 +150,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       const key = local.getItemKey(item);
       return key != null && keys.has(key);
     });
-    setSelectedItems(restored);
+    setSelection(restored);
   });
 
   async function doRefresh() {
@@ -181,13 +171,11 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     setTotalPageCount(result.pageCount ?? 0);
   }
 
-  /* eslint-disable solid/reactivity -- called only in event handlers, immediate store read */
   function getItemDiffs() {
     return items.oneWayDiffs(originalItems, (item) => local.getItemKey(item), {
       excludes: local.inlineEdit?.diffsExcludes,
     });
   }
-  /* eslint-enable solid/reactivity */
 
   function checkIgnoreChanges(): boolean {
     if (!local.inlineEdit) return true;
@@ -252,7 +240,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       await local.inlineEdit.submit(diffs);
       noti.success(i18n.t("crudSheet.saveCompleted"), i18n.t("crudSheet.saveSuccess"));
       await refresh();
-      local.onSubmitted?.();
+      local.onSubmitComplete?.();
     } catch (err) {
       noti.error(err, i18n.t("crudSheet.saveFailed"));
     }
@@ -281,7 +269,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   async function handleDeleteItems() {
     if (!local.dialogEdit?.deleteItems) return;
-    const result = await local.dialogEdit.deleteItems(selectedItems());
+    const result = await local.dialogEdit.deleteItems(selection());
     if (!result) return;
 
     setBusyCount((c) => c + 1);
@@ -296,7 +284,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   async function handleRestoreItems() {
     if (!local.dialogEdit?.restoreItems) return;
-    const result = await local.dialogEdit.restoreItems(selectedItems());
+    const result = await local.dialogEdit.restoreItems(selection());
     if (!result) return;
 
     setBusyCount((c) => c + 1);
@@ -347,7 +335,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   }
 
   // -- Select Mode --
-  function handleSelectedItemsChange(newSelectedItems: TItem[]) {
+  function handleSelectionChange(newSelection: TItem[]) {
     // Current page items key Set
     const currentItems = items as unknown as TItem[];
     const currentKeys = new Set<string | number>();
@@ -358,7 +346,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
     // Newly selected items key
     const newSelectedKeys = new Set<string | number>();
-    for (const item of newSelectedItems) {
+    for (const item of newSelection) {
       const key = local.getItemKey(item);
       if (key != null) newSelectedKeys.add(key);
     }
@@ -375,17 +363,17 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     }
 
     setSelectedKeys(merged);
-    setSelectedItems(newSelectedItems);
+    setSelection(newSelection);
   }
 
   function clearSelection() {
     setSelectedKeys(new Set<string | number>());
-    setSelectedItems([]);
+    setSelection([]);
   }
 
   function handleSelectConfirm() {
     local.onSelect?.({
-      items: selectedItems(),
+      items: selection(),
       keys: [...selectedKeys()],
     });
   }
@@ -412,7 +400,6 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   });
 
   // -- Route Leave Guard --
-  // eslint-disable-next-line solid/reactivity -- inlineEdit is used only for initial value
   if (!isInDialog && local.inlineEdit) {
     try {
       useBeforeLeave((e) => {
@@ -451,7 +438,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   // -- Context for Tools --
   const ctx: CrudSheetContext<TItem> = {
     items: () => items as unknown as TItem[],
-    selectedItems,
+    selection,
     page,
     sorts,
     busy: () => busyCount() > 0,
@@ -475,11 +462,19 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   return (
     <>
+      <ColumnsProvider>
+        <HeaderProvider>
+          <FilterProvider>
+            <ToolsProvider>{local.children}</ToolsProvider>
+          </FilterProvider>
+        </HeaderProvider>
+      </ColumnsProvider>
+
       {/* Dialog mode: Dialog.Action (refresh button in header) */}
       <Show when={isInDialog}>
         <Dialog.Action>
           <button
-            class="flex items-center px-2 text-base-400 hover:text-base-600"
+            class={clsx("flex items-center px-2 hover:text-base-600", text.muted)}
             onClick={handleRefresh}
           >
             <Icon icon={IconRefresh} />
@@ -514,11 +509,11 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
         </Show>
 
         {/* Header (optional) */}
-        <Show when={defs().header}>{(headerDef) => headerDef().children}</Show>
+        <Show when={headerSlot()}>{(slot) => slot().children}</Show>
 
         {/* Filter */}
-        <Show when={defs().filter}>
-          {(filterDef) => (
+        <Show when={filterSlot()}>
+          {(slot) => (
             <form class="p-2" onSubmit={handleFilterSubmit}>
               <FormGroup inline>
                 <FormGroup.Item>
@@ -527,7 +522,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                     {i18n.t("crudSheet.search")}
                   </Button>
                 </FormGroup.Item>
-                {filterDef().children(filter, setFilter)}
+                {slot().children(filter, setFilter)}
               </FormGroup>
             </form>
           )}
@@ -563,8 +558,8 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   variant="ghost"
                   onClick={handleDeleteItems}
                   disabled={
-                    selectedItems().length === 0 ||
-                    !selectedItems().some(
+                    selection().length === 0 ||
+                    !selection().some(
                       (item) =>
                         (local.itemDeletable?.(item) ?? true) &&
                         !(local.itemDeleted?.(item) ?? false),
@@ -582,8 +577,8 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   variant="ghost"
                   onClick={handleRestoreItems}
                   disabled={
-                    selectedItems().length === 0 ||
-                    !selectedItems().some((item) => local.itemDeleted?.(item) ?? false)
+                    selection().length === 0 ||
+                    !selection().some((item) => local.itemDeleted?.(item) ?? false)
                   }
                 >
                   <Icon icon={IconTrashOff} class="mr-1" />
@@ -607,7 +602,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             </Show>
 
             {/* Custom tools */}
-            <Show when={defs().tools}>{(toolsDef) => toolsDef().children(ctx)}</Show>
+            <Show when={toolsSlot()}>{(slot) => slot().children(ctx)}</Show>
           </div>
         </Show>
 
@@ -616,23 +611,23 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
           <DataSheet
             class="h-full"
             items={items}
-            persistKey={local.persistKey != null ? `${local.persistKey}-sheet` : undefined}
+            storageKey={local.storageKey != null ? `${local.storageKey}-sheet` : undefined}
             page={totalPageCount() > 0 ? page() : undefined}
             onPageChange={setPage}
             totalPageCount={totalPageCount()}
             sorts={sorts()}
             onSortsChange={setSorts}
-            isItemSelectable={local.isItemSelectable}
-            selectMode={
+            itemSelectable={local.itemSelectable}
+            selectionMode={
               isSelectMode()
-                ? local.selectMode
+                ? local.selectionMode
                 : local.dialogEdit?.deleteItems != null || local.dialogEdit?.restoreItems != null
                   ? "multiple"
                   : undefined
             }
-            selectedItems={selectedItems()}
-            onSelectedItemsChange={handleSelectedItemsChange}
-            autoSelect={isSelectMode() && local.selectMode === "single" ? "click" : undefined}
+            selection={selection()}
+            onSelectionChange={handleSelectionChange}
+            autoSelect={isSelectMode() && local.selectionMode === "single" ? "click" : undefined}
             cellClass={(item) => {
               if (isItemDeleted(item)) {
                 return "line-through";
@@ -664,41 +659,41 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             </Show>
 
             {/* User-defined columns -- map CrudSheetColumn to DataSheetColumn */}
-            <For each={defs().columns}>
+            <For each={columnSlots()}>
               {(col) => (
                 <DataSheetColumn<TItem>
                   key={col.key}
-                  header={col.header}
+                  header={normalizeHeader(col.header)}
                   headerContent={col.headerContent}
                   headerStyle={col.headerStyle}
                   summary={col.summary}
                   tooltip={col.tooltip}
-                  fixed={col.fixed}
-                  hidden={col.hidden}
-                  collapse={col.collapse}
+                  fixed={col.fixed ?? false}
+                  hidden={col.hidden ?? false}
+                  collapse={col.collapse ?? false}
                   width={col.width}
                   class={col.class}
-                  sortable={col.sortable}
-                  resizable={col.resizable}
+                  sortable={col.sortable ?? true}
+                  resizable={col.resizable ?? true}
                 >
                   {(dsCtx) => {
-                    const crudCtx = {
+                    const crudCtx: CrudSheetCellContext<any> = {
                       ...dsCtx,
-                      setItem: <TKey extends keyof TItem>(key: TKey, value: TItem[TKey]) => {
-                        setItems(dsCtx.index as any, key as any, value as any);
+                      setItem: (key, value) => {
+                        setItems(dsCtx.index as any, key as any, value);
                       },
                     };
 
                     // dialogEdit editable column -- wrap with edit link
                     if (
                       local.dialogEdit &&
-                      col.editTrigger &&
+                      (col.editTrigger ?? false) &&
                       canEdit() &&
                       (local.itemEditable?.(dsCtx.item) ?? true)
                     ) {
                       return (
                         <Link
-                          class={clsx("flex", "gap-1")}
+                          class={clsx("flex", gap.default)}
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -708,12 +703,12 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                           <div class={"p-1"}>
                             <Icon icon={IconExternalLink} />
                           </div>
-                          <div class={"flex-1"}>{col.cell(crudCtx)}</div>
+                          <div class={"flex-1"}>{col.children(crudCtx)}</div>
                         </Link>
                       );
                     }
 
-                    return col.cell(crudCtx);
+                    return col.children(crudCtx);
                   }}
                 </DataSheetColumn>
               )}
@@ -723,7 +718,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             <Show when={local.lastModifiedAtProp}>
               <DataSheetColumn<TItem> key={local.lastModifiedAtProp!} header={i18n.t("crudSheet.lastModified")} hidden>
                 {(dsCtx) => (
-                  <div class="px-2 py-1 text-center">
+                  <div class={clsx(pad.default, "text-center")}>
                     {(
                       objGetChainValue(dsCtx.item, local.lastModifiedAtProp!, true) as
                         | DateTime
@@ -737,7 +732,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             <Show when={local.lastModifiedByProp}>
               <DataSheetColumn<TItem> key={local.lastModifiedByProp!} header={i18n.t("crudSheet.modifiedBy")} hidden>
                 {(dsCtx) => (
-                  <div class="px-2 py-1 text-center">
+                  <div class={clsx(pad.default, "text-center")}>
                     {objGetChainValue(dsCtx.item, local.lastModifiedByProp!, true) as string}
                   </div>
                 )}
@@ -750,14 +745,14 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
         <Show when={isInDialog && isSelectMode()}>
           <div class="flex gap-2 border-t p-2">
             <div class="flex-1" />
-            <Show when={selectedItems().length > 0}>
+            <Show when={selection().length > 0}>
               <Button size="sm" theme="danger" onClick={handleSelectCancel}>
-                {local.selectMode === "multiple" ? i18n.t("crudSheet.deselectAll") : i18n.t("crudSheet.deselect")}
+                {local.selectionMode === "multiple" ? i18n.t("crudSheet.deselectAll") : i18n.t("crudSheet.deselect")}
               </Button>
             </Show>
-            <Show when={local.selectMode === "multiple"}>
+            <Show when={local.selectionMode === "multiple"}>
               <Button size="sm" theme="primary" onClick={handleSelectConfirm}>
-                {i18n.t("crudSheet.confirm")} ({selectedItems().length})
+                {i18n.t("crudSheet.confirm")} ({selection().length})
               </Button>
             </Show>
           </div>
@@ -767,8 +762,11 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   );
 };
 
-export const CrudSheet = CrudSheetBase as unknown as CrudSheetComponent;
-CrudSheet.Column = CrudSheetColumn;
-CrudSheet.Filter = CrudSheetFilter;
-CrudSheet.Tools = CrudSheetTools;
-CrudSheet.Header = CrudSheetHeader;
+//#region Export
+export const CrudSheet = Object.assign(CrudSheetBase as unknown as CrudSheetComponent, {
+  Column: CrudSheetColumn,
+  Filter: CrudSheetFilter,
+  Tools: CrudSheetTools,
+  Header: CrudSheetHeader,
+});
+//#endregion

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

@@ -1,34 +1,11 @@
 import type { JSX } from "solid-js";
-import type { CrudSheetColumnDef, CrudSheetColumnProps } from "./types";
-import { normalizeHeader } from "../../data/sheet/sheetUtils";
+import { createSlots } from "../../../helpers/createSlots";
+import type { CrudSheetColumnProps } from "./types";
 
-export function isCrudSheetColumnDef(value: unknown): value is CrudSheetColumnDef<unknown> {
-  return (
-    value != null &&
-    typeof value === "object" &&
-    (value as Record<string, unknown>)["__type"] === "crud-sheet-column"
-  );
-}
+const [SlotComponent, createCrudSheetColumnSlotsAccessor] = createSlots<CrudSheetColumnProps<any>>();
 
-/* eslint-disable solid/reactivity -- plain object return pattern, reactive context not needed */
-export function CrudSheetColumn<TItem>(props: CrudSheetColumnProps<TItem>): JSX.Element {
-  return {
-    __type: "crud-sheet-column",
-    key: props.key,
-    header: normalizeHeader(props.header),
-    headerContent: props.headerContent,
-    headerStyle: props.headerStyle,
-    summary: props.summary,
-    tooltip: props.tooltip,
-    cell: props.children,
-    class: props.class,
-    fixed: props.fixed ?? false,
-    hidden: props.hidden ?? false,
-    collapse: props.collapse ?? false,
-    width: props.width,
-    sortable: props.sortable ?? true,
-    resizable: props.resizable ?? true,
-    editTrigger: props.editTrigger ?? false,
-  } as unknown as JSX.Element;
+function CrudSheetColumn<TItem>(props: CrudSheetColumnProps<TItem>): JSX.Element {
+  return SlotComponent(props as CrudSheetColumnProps<any>);
 }
-/* eslint-enable solid/reactivity */
+
+export { CrudSheetColumn, createCrudSheetColumnSlotsAccessor };

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

@@ -1,21 +1,17 @@
 import type { JSX } from "solid-js";
-import type { CrudSheetFilterDef } from "./types";
+import type { SetStoreFunction } from "solid-js/store";
+import { createSlot } from "../../../helpers/createSlot";
 
-export function isCrudSheetFilterDef(value: unknown): value is CrudSheetFilterDef<any> {
-  return (
-    value != null &&
-    typeof value === "object" &&
-    (value as Record<string, unknown>)["__type"] === "crud-sheet-filter"
-  );
+export interface CrudSheetFilterSlotProps<TFilter> {
+  children: (filter: TFilter, setFilter: SetStoreFunction<TFilter>) => JSX.Element;
 }
 
-/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
-export function CrudSheetFilter<TFilter>(props: {
-  children: (filter: TFilter, setFilter: any) => JSX.Element;
-}): JSX.Element {
-  return {
-    __type: "crud-sheet-filter",
-    children: props.children,
-  } as unknown as JSX.Element;
+const [CrudSheetFilterBase, createCrudSheetFilterSlotAccessor] = createSlot<
+  CrudSheetFilterSlotProps<any>
+>();
+
+function CrudSheetFilter<TFilter>(props: CrudSheetFilterSlotProps<TFilter>): JSX.Element {
+  return CrudSheetFilterBase(props as CrudSheetFilterSlotProps<any>);
 }
-/* eslint-enable solid/reactivity */
+
+export { CrudSheetFilter, createCrudSheetFilterSlotAccessor };

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

@@ -1,19 +1,6 @@
 import type { JSX } from "solid-js";
-import type { CrudSheetHeaderDef } from "./types";
+import { createSlot } from "../../../helpers/createSlot";
 
-export function isCrudSheetHeaderDef(value: unknown): value is CrudSheetHeaderDef {
-  return (
-    value != null &&
-    typeof value === "object" &&
-    (value as Record<string, unknown>)["__type"] === "crud-sheet-header"
-  );
-}
+const [CrudSheetHeader, createCrudSheetHeaderSlotAccessor] = createSlot<{ children: JSX.Element }>();
 
-/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
-export function CrudSheetHeader(props: { children: JSX.Element }): JSX.Element {
-  return {
-    __type: "crud-sheet-header",
-    children: props.children,
-  } as unknown as JSX.Element;
-}
-/* eslint-enable solid/reactivity */
+export { CrudSheetHeader, createCrudSheetHeaderSlotAccessor };

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

@@ -1,21 +1,17 @@
 import type { JSX } from "solid-js";
-import type { CrudSheetToolsDef } from "./types";
+import type { CrudSheetContext } from "./types";
+import { createSlot } from "../../../helpers/createSlot";
 
-export function isCrudSheetToolsDef(value: unknown): value is CrudSheetToolsDef<any> {
-  return (
-    value != null &&
-    typeof value === "object" &&
-    (value as Record<string, unknown>)["__type"] === "crud-sheet-tools"
-  );
+export interface CrudSheetToolsSlotProps<TItem> {
+  children: (ctx: CrudSheetContext<TItem>) => JSX.Element;
 }
 
-/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
-export function CrudSheetTools<_TItem>(props: {
-  children: (ctx: any) => JSX.Element;
-}): JSX.Element {
-  return {
-    __type: "crud-sheet-tools",
-    children: props.children,
-  } as unknown as JSX.Element;
+const [CrudSheetToolsBase, createCrudSheetToolsSlotAccessor] = createSlot<
+  CrudSheetToolsSlotProps<any>
+>();
+
+function CrudSheetTools<TItem>(props: CrudSheetToolsSlotProps<TItem>): JSX.Element {
+  return CrudSheetToolsBase(props as CrudSheetToolsSlotProps<any>);
 }
-/* eslint-enable solid/reactivity */
+
+export { CrudSheetTools, createCrudSheetToolsSlotAccessor };