@simplysm/solid 13.0.74 → 13.0.76

package/dist/components/display/Tag.js

@@ -4,16 +4,14 @@ import { spread as _$spread } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
 var _tmpl$ = /* @__PURE__ */ _$template(`<span data-tag>`);
 import { splitProps } from "solid-js";
-import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { themeTokens } from "../../styles/tokens.styles.js";
-const baseClass = clsx("inline-block", "text-white", "px-1.5", "rounded-md");
+import { themeTokens } from "../../styles/theme.styles.js";
 const themeClasses = Object.fromEntries(Object.entries(themeTokens).map(([theme, t]) => [theme, t.solid]));
 const Tag = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "theme"]);
   const getClassName = () => {
     const theme = local.theme ?? "base";
-    return twMerge(baseClass, themeClasses[theme], local.class);
+    return twMerge("inline-block text-white px-1.5 rounded-md", themeClasses[theme], local.class);
   };
   return (() => {
     var _el$ = _tmpl$();

package/dist/components/display/Tag.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/components/display/Tag.tsx"],
-  "mappings": ";;;;;AAAA,SAAyCA,kBAAkB;AAC3D,OAAOC,UAAU;AACjB,SAASC,eAAe;AACxB,SAA6BC,mBAAmB;AAQhD,MAAMC,YAAYH,KAAK,gBAAgB,cAAc,UAAU,YAAY;AAE3E,MAAMI,eAAyCC,OAAOC,YACpDD,OAAOE,QAAQL,WAAW,EAAEM,IAAI,CAAC,CAACC,OAAOC,CAAC,MAAM,CAACD,OAAOC,EAAEC,KAAK,CAAC,CAClE;AAEO,MAAMC,MAAkCC,WAAU;AACvD,QAAM,CAACC,OAAOC,IAAI,IAAIhB,WAAWc,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AAEtE,QAAMG,eAAeA,MAAM;AACzB,UAAMP,QAAQK,MAAML,SAAS;AAC7B,WAAOR,QAAQE,WAAWC,aAAaK,KAAK,GAAGK,MAAMG,KAAK;EAC5D;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAAC,aAAAF,MAAAG,aAAA;MAAA,KAAA,OAAA,IAAA;AAAA,eACwBL,aAAa;MAAC;IAAA,GAAMD,IAAI,GAAA,OAAA,IAAA;AAAAO,aAAAJ,MAAA,MAC3CJ,MAAMS,QAAQ;AAAA,WAAAL;EAAA,GAAA;AAGrB;",
-  "names": ["splitProps", "clsx", "twMerge", "themeTokens", "baseClass", "themeClasses", "Object", "fromEntries", "entries", "map", "theme", "t", "solid", "Tag", "props", "local", "rest", "getClassName", "class", "_el$", "_tmpl$", "_$spread", "_$mergeProps", "_$insert", "children"]
+  "mappings": ";;;;;AAAA,SAAyCA,kBAAkB;AAC3D,SAASC,eAAe;AACxB,SAA6BC,mBAAmB;AAQhD,MAAMC,eAAyCC,OAAOC,YACpDD,OAAOE,QAAQJ,WAAW,EAAEK,IAAI,CAAC,CAACC,OAAOC,CAAC,MAAM,CAACD,OAAOC,EAAEC,KAAK,CAAC,CAClE;AAEO,MAAMC,MAAkCC,WAAU;AACvD,QAAM,CAACC,OAAOC,IAAI,IAAId,WAAWY,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AAEtE,QAAMG,eAAeA,MAAM;AACzB,UAAMP,QAAQK,MAAML,SAAS;AAC7B,WAAOP,QAAQ,6CAA6CE,aAAaK,KAAK,GAAGK,MAAMG,KAAK;EAC9F;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAAC,aAAAF,MAAAG,aAAA;MAAA,KAAA,OAAA,IAAA;AAAA,eACwBL,aAAa;MAAC;IAAA,GAAMD,IAAI,GAAA,OAAA,IAAA;AAAAO,aAAAJ,MAAA,MAC3CJ,MAAMS,QAAQ;AAAA,WAAAL;EAAA,GAAA;AAGrB;",
+  "names": ["splitProps", "twMerge", "themeTokens", "themeClasses", "Object", "fromEntries", "entries", "map", "theme", "t", "solid", "Tag", "props", "local", "rest", "getClassName", "class", "_el$", "_tmpl$", "_$spread", "_$mergeProps", "_$insert", "children"]
 }

package/dist/components/features/address/AddressSearch.d.ts

@@ -4,5 +4,7 @@ export interface AddressSearchResult {
     address: string | undefined;
     buildingName: string | undefined;
 }
-export declare const AddressSearchContent: Component;
+export declare const AddressSearchContent: Component<{
+    close?: (result?: AddressSearchResult) => void;
+}>;
 //# sourceMappingURL=AddressSearch.d.ts.map

package/dist/components/features/address/AddressSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddressSearch.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\features\\address\\AddressSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAyB,MAAM,UAAU,CAAC;AAIjE,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,oBAAoB,EAAE,SAgElC,CAAC"}
+{"version":3,"file":"AddressSearch.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\features\\address\\AddressSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAyB,MAAM,UAAU,CAAC;AAGjE,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,oBAAoB,EAAE,SAAS,CAAC;IAC3C,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAChD,CA8DA,CAAC"}

package/dist/components/features/address/AddressSearch.js

@@ -4,9 +4,7 @@ import { use as _$use } from "solid-js/web";
 var _tmpl$ = /* @__PURE__ */ _$template(`<div data-address-content style=min-height:100px>`);
 import { createSignal, onMount } from "solid-js";
 import { BusyContainer } from "../../feedback/busy/BusyContainer.js";
-import { useDialogInstance } from "../../disclosure/DialogInstanceContext.js";
-const AddressSearchContent = () => {
-  const dialogInstance = useDialogInstance();
+const AddressSearchContent = (props) => {
   const [initialized, setInitialized] = createSignal(false);
   let contentEl;
   onMount(async () => {
@@ -25,6 +23,7 @@ const AddressSearchContent = () => {
     }
     new daum.Postcode({
       oncomplete: (data) => {
+        var _a;
         const addr = data.userSelectedType === "R" ? data.roadAddress : data.jibunAddress;
         let extraAddr = "";
         if (data.userSelectedType === "R") {
@@ -38,7 +37,7 @@ const AddressSearchContent = () => {
             extraAddr = " (" + extraAddr + ")";
           }
         }
-        dialogInstance == null ? void 0 : dialogInstance.close({
+        (_a = props.close) == null ? void 0 : _a.call(props, {
           postNumber: data.zonecode,
           address: addr + extraAddr,
           buildingName: data.buildingName

package/dist/components/features/address/AddressSearch.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/features/address/AddressSearch.tsx"],
-  "mappings": ";;;;AAAA,SAAyBA,cAAcC,eAAe;AACtD,SAASC,qBAAqB;AAC9B,SAASC,yBAAyB;AAQ3B,MAAMC,uBAAkCA,MAAM;AACnD,QAAMC,iBAAiBF,kBAAuC;AAE9D,QAAM,CAACG,aAAaC,cAAc,IAAIP,aAAa,KAAK;AACxD,MAAIQ;AAEJP,UAAQ,YAAY;AAClB,QAAI,CAACQ,SAASC,eAAe,cAAc,GAAG;AAC5C,YAAM,IAAIC,QAAeC,aAAY;AACnC,cAAMC,WAAWJ,SAASK,cAAc,QAAQ;AAChDD,iBAASE,MAAM;AACfF,iBAASG,aAAa,MAAM,cAAc;AAE1CH,iBAASI,SAAS,MAAY;AAE5BC,eAAKC,SAASC,KAAK,MAAM;AACvBR,oBAAQ;UACV,CAAC;QACH;AACAH,iBAASY,KAAKC,YAAYT,QAAQ;MACpC,CAAC;IACH;AAGA,QAAIK,KAAKK,SAAS;MAChBC,YAAaC,UAAoB;AAC/B,cAAMC,OAAOD,KAAKE,qBAAqB,MAAMF,KAAKG,cAAcH,KAAKI;AAErE,YAAIC,YAAY;AAChB,YAAIL,KAAKE,qBAAqB,KAAK;AACjC,cAAIF,KAAKM,UAAU,MAAM,UAAUC,KAAKP,KAAKM,KAAK,GAAG;AACnDD,yBAAaL,KAAKM;UACpB;AAEA,cAAIN,KAAKQ,iBAAiB,MAAMR,KAAKS,cAAc,KAAK;AACtDJ,yBAAaA,cAAc,KAAK,OAAOL,KAAKQ,eAAeR,KAAKQ;UAClE;AAEA,cAAIH,cAAc,IAAI;AACpBA,wBAAY,OAAOA,YAAY;UACjC;QACF;AAEAzB,yDAAgB8B,MAAM;UACpBC,YAAYX,KAAKY;UACjBC,SAASZ,OAAOI;UAChBG,cAAcR,KAAKQ;QACrB;MACF;MACAM,UAAWC,UAAoB;AAC7BhC,kBAAUiC,MAAMC,SAASF,KAAKE,SAAS;MACzC;MACAC,OAAO;MACPD,QAAQ;IACV,CAAC,EAAEE,MAAMpC,WAAW;MAAEqC,WAAW;IAAM,CAAC;AAExCtC,mBAAe,IAAI;EACrB,CAAC;AAED,SAAAuC,kBACG5C,eAAa;IAAA,IAAC6C,OAAI;AAAA,aAAE,CAACzC,YAAY;IAAC;IAAA,IAAA0C,WAAA;AAAA,UAAAC,OAAAC,OAAA;AAAA,UAAAC,QACvB3C;AAAS,aAAA2C,UAAA,aAAAC,MAAAD,OAAAF,IAAA,IAATzC,YAASyC;AAAA,aAAAA;IAAA;EAAA,CAAA;AAGzB;",
-  "names": ["createSignal", "onMount", "BusyContainer", "useDialogInstance", "AddressSearchContent", "dialogInstance", "initialized", "setInitialized", "contentEl", "document", "getElementById", "Promise", "resolve", "scriptEl", "createElement", "src", "setAttribute", "onload", "daum", "postcode", "load", "head", "appendChild", "Postcode", "oncomplete", "data", "addr", "userSelectedType", "roadAddress", "jibunAddress", "extraAddr", "bname", "test", "buildingName", "apartment", "close", "postNumber", "zonecode", "address", "onresize", "size", "style", "height", "width", "embed", "autoClose", "_$createComponent", "busy", "children", "_el$", "_tmpl$", "_ref$", "_$use"]
+  "mappings": ";;;;AAAA,SAAyBA,cAAcC,eAAe;AACtD,SAASC,qBAAqB;AAQvB,MAAMC,uBAEPC,WAAU;AACd,QAAM,CAACC,aAAaC,cAAc,IAAIN,aAAa,KAAK;AACxD,MAAIO;AAEJN,UAAQ,YAAY;AAClB,QAAI,CAACO,SAASC,eAAe,cAAc,GAAG;AAC5C,YAAM,IAAIC,QAAeC,aAAY;AACnC,cAAMC,WAAWJ,SAASK,cAAc,QAAQ;AAChDD,iBAASE,MAAM;AACfF,iBAASG,aAAa,MAAM,cAAc;AAE1CH,iBAASI,SAAS,MAAY;AAE5BC,eAAKC,SAASC,KAAK,MAAM;AACvBR,oBAAQ;UACV,CAAC;QACH;AACAH,iBAASY,KAAKC,YAAYT,QAAQ;MACpC,CAAC;IACH;AAGA,QAAIK,KAAKK,SAAS;MAChBC,YAAaC,UAAoB;;AAC/B,cAAMC,OAAOD,KAAKE,qBAAqB,MAAMF,KAAKG,cAAcH,KAAKI;AAErE,YAAIC,YAAY;AAChB,YAAIL,KAAKE,qBAAqB,KAAK;AACjC,cAAIF,KAAKM,UAAU,MAAM,UAAUC,KAAKP,KAAKM,KAAK,GAAG;AACnDD,yBAAaL,KAAKM;UACpB;AAEA,cAAIN,KAAKQ,iBAAiB,MAAMR,KAAKS,cAAc,KAAK;AACtDJ,yBAAaA,cAAc,KAAK,OAAOL,KAAKQ,eAAeR,KAAKQ;UAClE;AAEA,cAAIH,cAAc,IAAI;AACpBA,wBAAY,OAAOA,YAAY;UACjC;QACF;AAEAzB,oBAAM8B,UAAN9B,+BAAc;UACZ+B,YAAYX,KAAKY;UACjBC,SAASZ,OAAOI;UAChBG,cAAcR,KAAKQ;QACrB;MACF;MACAM,UAAWC,UAAoB;AAC7BhC,kBAAUiC,MAAMC,SAASF,KAAKE,SAAS;MACzC;MACAC,OAAO;MACPD,QAAQ;IACV,CAAC,EAAEE,MAAMpC,WAAW;MAAEqC,WAAW;IAAM,CAAC;AAExCtC,mBAAe,IAAI;EACrB,CAAC;AAED,SAAAuC,kBACG3C,eAAa;IAAA,IAAC4C,OAAI;AAAA,aAAE,CAACzC,YAAY;IAAC;IAAA,IAAA0C,WAAA;AAAA,UAAAC,OAAAC,OAAA;AAAA,UAAAC,QACvB3C;AAAS,aAAA2C,UAAA,aAAAC,MAAAD,OAAAF,IAAA,IAATzC,YAASyC;AAAA,aAAAA;IAAA;EAAA,CAAA;AAGzB;",
+  "names": ["createSignal", "onMount", "BusyContainer", "AddressSearchContent", "props", "initialized", "setInitialized", "contentEl", "document", "getElementById", "Promise", "resolve", "scriptEl", "createElement", "src", "setAttribute", "onload", "daum", "postcode", "load", "head", "appendChild", "Postcode", "oncomplete", "data", "addr", "userSelectedType", "roadAddress", "jibunAddress", "extraAddr", "bname", "test", "buildingName", "apartment", "close", "postNumber", "zonecode", "address", "onresize", "size", "style", "height", "width", "embed", "autoClose", "_$createComponent", "busy", "children", "_el$", "_tmpl$", "_ref$", "_$use"]
 }

package/dist/components/features/crud-detail/CrudDetail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CrudDetail.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\features\\crud-detail\\CrudDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,GAAG,EAMT,MAAM,UAAU,CAAC;AAsBlB,OAAO,EAAE,eAAe,EAAwB,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAwB,MAAM,mBAAmB,CAAC;AAC1E,OAAO,KAAK,EAKV,eAAe,EAEhB,MAAM,SAAS,CAAC;AAEjB,UAAU,mBAAmB;IAC3B,CAAC,KAAK,SAAS,MAAM,EAAE,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;IACnE,KAAK,EAAE,OAAO,eAAe,CAAC;IAC9B,MAAM,EAAE,OAAO,gBAAgB,CAAC;IAChC,KAAK,EAAE,OAAO,eAAe,CAAC;CAC/B;AAgVD,eAAO,MAAM,UAAU,EAAgC,mBAAmB,CAAC"}
+{"version":3,"file":"CrudDetail.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\features\\crud-detail\\CrudDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,GAAG,EAMT,MAAM,UAAU,CAAC;AAsBlB,OAAO,EAAE,eAAe,EAAqC,MAAM,mBAAmB,CAAC;AACvF,OAAO,EAAE,gBAAgB,EAAsC,MAAM,oBAAoB,CAAC;AAC1F,OAAO,EAAE,eAAe,EAAqC,MAAM,mBAAmB,CAAC;AACvF,OAAO,KAAK,EAGV,eAAe,EAChB,MAAM,SAAS,CAAC;AAEjB,UAAU,mBAAmB;IAC3B,CAAC,KAAK,SAAS,MAAM,EAAE,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;IACnE,KAAK,EAAE,OAAO,eAAe,CAAC;IAC9B,MAAM,EAAE,OAAO,gBAAgB,CAAC;IAChC,KAAK,EAAE,OAAO,eAAe,CAAC;CAC/B;AAsUD,eAAO,MAAM,UAAU,EAIN,mBAAmB,CAAC"}

package/dist/components/features/crud-detail/CrudDetail.js

@@ -1,35 +1,36 @@
 import { template as _$template } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-var _tmpl$ = /* @__PURE__ */ _$template(`<div class="flex gap-2 pb-0">`), _tmpl$2 = /* @__PURE__ */ _$template(`<form class="flex-1 overflow-auto">`), _tmpl$3 = /* @__PURE__ */ _$template(`<div class="flex gap-2 border-t border-base-200 px-3 py-1.5"><div class=flex-1>`), _tmpl$4 = /* @__PURE__ */ _$template(`<div class="px-2 pb-1 text-xs text-base-400">: `);
-import { children, createMemo, createSignal, createUniqueId, onCleanup, onMount, Show, splitProps, useContext } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ _$template(`<div class="flex gap-2 pb-0">`), _tmpl$2 = /* @__PURE__ */ _$template(`<form class="flex-1 overflow-auto">`), _tmpl$3 = /* @__PURE__ */ _$template(`<div><div class=flex-1>`), _tmpl$4 = /* @__PURE__ */ _$template(`<div>: `);
+import { createSignal, createUniqueId, onCleanup, onMount, Show, splitProps, useContext } from "solid-js";
 import { registerCrud, unregisterCrud, activateCrud, isActiveCrud } from "../crudRegistry.js";
 import { reconcile, unwrap } from "solid-js/store";
 import { createControllableStore } from "../../../hooks/createControllableStore.js";
 import { objClone, objEqual } from "@simplysm/core-common";
 import { BusyContainer } from "../../feedback/busy/BusyContainer.js";
-import { useNotification } from "../../feedback/notification/NotificationContext.js";
+import { useNotification } from "../../feedback/notification/NotificationProvider.js";
 import { Button } from "../../form-control/Button.js";
 import { Icon } from "../../display/Icon.js";
-import { createTopbarActions, TopbarContext } from "../../layout/topbar/TopbarContext.js";
-import { useDialogInstance } from "../../disclosure/DialogInstanceContext.js";
+import { createTopbarActions, TopbarContext } from "../../layout/topbar/Topbar.js";
 import { Dialog } from "../../disclosure/Dialog.js";
 import { createEventListener } from "@solid-primitives/event-listener";
-import { useI18n } from "../../../providers/i18n/I18nContext.js";
+import { useI18n } from "../../../providers/i18n/I18nProvider.js";
 import clsx from "clsx";
+import { border, text } from "../../../styles/base.styles.js";
 import { IconCheck, IconDeviceFloppy, IconRefresh, IconTrash, IconTrashOff } from "@tabler/icons-solidjs";
-import { CrudDetailTools, isCrudDetailToolsDef } from "./CrudDetailTools.js";
-import { CrudDetailBefore, isCrudDetailBeforeDef } from "./CrudDetailBefore.js";
-import { CrudDetailAfter, isCrudDetailAfterDef } from "./CrudDetailAfter.js";
+import { CrudDetailTools, createCrudDetailToolsSlotAccessor } from "./CrudDetailTools.js";
+import { CrudDetailBefore, createCrudDetailBeforeSlotAccessor } from "./CrudDetailBefore.js";
+import { CrudDetailAfter, createCrudDetailAfterSlotAccessor } from "./CrudDetailAfter.js";
 const CrudDetailBase = (props) => {
-  const [local] = splitProps(props, ["load", "children", "submit", "toggleDelete", "editable", "deletable", "data", "onDataChange", "class"]);
+  const [local] = splitProps(props, ["load", "children", "submit", "toggleDelete", "editable", "deletable", "data", "onDataChange", "close", "class"]);
   const noti = useNotification();
   const i18n = useI18n();
   const topbarCtx = useContext(TopbarContext);
-  const dialogInstance = useDialogInstance();
-  const isInDialog = dialogInstance !== void 0;
+  const isInDialog = local.close !== void 0;
   const canEdit = () => local.editable ?? true;
   const [data, setData] = createControllableStore({
     value: () => local.data ?? {},
@@ -41,6 +42,9 @@ const CrudDetailBase = (props) => {
   const [ready, setReady] = createSignal(false);
   let formRef;
   const crudId = createUniqueId();
+  const [tools, ToolsProvider] = createCrudDetailToolsSlotAccessor();
+  const [before, BeforeProvider] = createCrudDetailBeforeSlotAccessor();
+  const [after, AfterProvider] = createCrudDetailAfterSlotAccessor();
   async function doLoad() {
     setBusyCount((c) => c + 1);
     try {
@@ -83,8 +87,8 @@ const CrudDetailBase = (props) => {
       const result = await local.submit(objClone(unwrap(data)));
       if (result) {
         noti.success(i18n.t("crudDetail.saveCompleted"), i18n.t("crudDetail.saveSuccess"));
-        if (dialogInstance) {
-          dialogInstance.close(true);
+        if (local.close) {
+          local.close(true);
         } else {
           await doLoad();
         }
@@ -109,8 +113,8 @@ const CrudDetailBase = (props) => {
       const result = await local.toggleDelete(del);
       if (result) {
         noti.success(del ? i18n.t("crudDetail.deleteCompleted") : i18n.t("crudDetail.restoreCompleted"), del ? i18n.t("crudDetail.deleteSuccess") : i18n.t("crudDetail.restoreSuccess"));
-        if (dialogInstance) {
-          dialogInstance.close(true);
+        if (local.close) {
+          local.close(true);
         } else {
           await doLoad();
         }
@@ -192,203 +196,208 @@ const CrudDetailBase = (props) => {
     save: handleSave,
     refresh: handleRefresh
   };
-  const rendered = children(() => local.children(ctx));
-  const defs = createMemo(() => {
-    const arr = rendered.toArray();
-    return {
-      tools: arr.find(isCrudDetailToolsDef),
-      before: arr.find(isCrudDetailBeforeDef),
-      after: arr.find(isCrudDetailAfterDef)
-    };
-  });
-  const formContent = () => rendered.toArray().filter((el) => !isCrudDetailToolsDef(el) && !isCrudDetailBeforeDef(el) && !isCrudDetailAfterDef(el));
-  return [_$createComponent(Show, {
-    when: isInDialog,
-    get children() {
-      return _$createComponent(Dialog.Action, {
-        get children() {
-          return _$createComponent(Button, {
-            size: "sm",
-            variant: "ghost",
-            onClick: () => void handleRefresh(),
-            get children() {
-              return _$createComponent(Icon, {
-                icon: IconRefresh
-              });
-            }
-          });
-        }
-      });
-    }
-  }), _$createComponent(BusyContainer, {
-    get ready() {
-      return ready();
-    },
-    get busy() {
-      return busyCount() > 0;
-    },
-    get ["class"]() {
-      return clsx("flex h-full flex-col gap-2", local.class);
-    },
+  return _$createComponent(ToolsProvider, {
     get children() {
-      return [_$createComponent(Show, {
-        get when() {
-          return !isInDialog && !topbarCtx || defs().tools;
-        },
+      return _$createComponent(BeforeProvider, {
         get children() {
-          var _el$ = _tmpl$();
-          _$insert(_el$, _$createComponent(Show, {
-            when: !topbarCtx && !isInDialog,
+          return _$createComponent(AfterProvider, {
             get children() {
               return [_$createComponent(Show, {
-                get when() {
-                  return _$memo(() => !!canEdit())() && local.submit;
-                },
+                when: isInDialog,
                 get children() {
-                  return _$createComponent(Button, {
-                    size: "sm",
-                    theme: "primary",
-                    variant: "ghost",
-                    onClick: () => formRef == null ? void 0 : formRef.requestSubmit(),
+                  return _$createComponent(Dialog.Action, {
                     get children() {
-                      return [_$createComponent(Icon, {
-                        icon: IconDeviceFloppy,
-                        "class": "mr-1"
-                      }), _$memo(() => i18n.t("crudDetail.save"))];
+                      return _$createComponent(Button, {
+                        size: "sm",
+                        variant: "ghost",
+                        onClick: () => void handleRefresh(),
+                        get children() {
+                          return _$createComponent(Icon, {
+                            icon: IconRefresh
+                          });
+                        }
+                      });
                     }
                   });
                 }
-              }), _$createComponent(Show, {
-                get when() {
-                  return _$memo(() => !!(canEdit() && local.toggleDelete && info() && !info().isNew))() && (local.deletable ?? true);
+              }), _$createComponent(BusyContainer, {
+                get ready() {
+                  return ready();
+                },
+                get busy() {
+                  return busyCount() > 0;
+                },
+                get ["class"]() {
+                  return clsx("flex h-full flex-col gap-2", local.class);
                 },
-                children: (_) => _$createComponent(Button, {
-                  size: "sm",
-                  theme: "danger",
-                  variant: "ghost",
-                  onClick: () => void handleToggleDelete(),
-                  get children() {
-                    return [_$createComponent(Icon, {
-                      get icon() {
-                        return info().isDeleted ? IconTrashOff : IconTrash;
-                      },
-                      "class": "mr-1"
-                    }), _$memo(() => _$memo(() => !!info().isDeleted)() ? i18n.t("crudDetail.restore") : i18n.t("crudDetail.delete"))];
-                  }
-                })
-              }), _$createComponent(Button, {
-                size: "sm",
-                theme: "info",
-                variant: "ghost",
-                onClick: () => void handleRefresh(),
                 get children() {
-                  return [_$createComponent(Icon, {
-                    icon: IconRefresh,
-                    "class": "mr-1"
-                  }), _$memo(() => i18n.t("crudDetail.refresh"))];
+                  return [_$createComponent(Show, {
+                    get when() {
+                      return !isInDialog && !topbarCtx || tools();
+                    },
+                    get children() {
+                      var _el$ = _tmpl$();
+                      _$insert(_el$, _$createComponent(Show, {
+                        when: !topbarCtx && !isInDialog,
+                        get children() {
+                          return [_$createComponent(Show, {
+                            get when() {
+                              return _$memo(() => !!canEdit())() && local.submit;
+                            },
+                            get children() {
+                              return _$createComponent(Button, {
+                                size: "sm",
+                                theme: "primary",
+                                variant: "ghost",
+                                onClick: () => formRef == null ? void 0 : formRef.requestSubmit(),
+                                get children() {
+                                  return [_$createComponent(Icon, {
+                                    icon: IconDeviceFloppy,
+                                    "class": "mr-1"
+                                  }), _$memo(() => i18n.t("crudDetail.save"))];
+                                }
+                              });
+                            }
+                          }), _$createComponent(Show, {
+                            get when() {
+                              return _$memo(() => !!(canEdit() && local.toggleDelete && info() && !info().isNew))() && (local.deletable ?? true);
+                            },
+                            children: (_) => _$createComponent(Button, {
+                              size: "sm",
+                              theme: "danger",
+                              variant: "ghost",
+                              onClick: () => void handleToggleDelete(),
+                              get children() {
+                                return [_$createComponent(Icon, {
+                                  get icon() {
+                                    return info().isDeleted ? IconTrashOff : IconTrash;
+                                  },
+                                  "class": "mr-1"
+                                }), _$memo(() => _$memo(() => !!info().isDeleted)() ? i18n.t("crudDetail.restore") : i18n.t("crudDetail.delete"))];
+                              }
+                            })
+                          }), _$createComponent(Button, {
+                            size: "sm",
+                            theme: "info",
+                            variant: "ghost",
+                            onClick: () => void handleRefresh(),
+                            get children() {
+                              return [_$createComponent(Icon, {
+                                icon: IconRefresh,
+                                "class": "mr-1"
+                              }), _$memo(() => i18n.t("crudDetail.refresh"))];
+                            }
+                          })];
+                        }
+                      }), null);
+                      _$insert(_el$, _$createComponent(Show, {
+                        get when() {
+                          return tools();
+                        },
+                        children: (toolsSlot) => toolsSlot().children
+                      }), null);
+                      return _el$;
+                    }
+                  }), _$createComponent(Show, {
+                    get when() {
+                      return before();
+                    },
+                    children: (beforeSlot) => beforeSlot().children
+                  }), (() => {
+                    var _el$2 = _tmpl$2();
+                    _el$2.addEventListener("submit", handleFormSubmit);
+                    _$use((el) => {
+                      formRef = el;
+                      registerCrud(crudId, el);
+                    }, _el$2);
+                    _$insert(_el$2, () => local.children(ctx));
+                    return _el$2;
+                  })(), _$createComponent(Show, {
+                    get when() {
+                      var _a;
+                      return (_a = info()) == null ? void 0 : _a.lastModifiedAt;
+                    },
+                    children: (_) => (() => {
+                      var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild;
+                      _$insert(_el$5, () => i18n.t("crudDetail.lastModified"), _el$6);
+                      _$insert(_el$5, () => info().lastModifiedAt.toFormatString("yyyy-MM-dd HH:mm"), null);
+                      _$insert(_el$5, _$createComponent(Show, {
+                        get when() {
+                          var _a;
+                          return (_a = info()) == null ? void 0 : _a.lastModifiedBy;
+                        },
+                        get children() {
+                          return [" (", _$memo(() => info().lastModifiedBy), ")"];
+                        }
+                      }), null);
+                      _$effect(() => _$className(_el$5, clsx("px-2 pb-1 text-xs", text.muted)));
+                      return _el$5;
+                    })()
+                  }), _$createComponent(Show, {
+                    get when() {
+                      return after();
+                    },
+                    children: (afterSlot) => afterSlot().children
+                  }), _$createComponent(Show, {
+                    get when() {
+                      return isInDialog && canEdit();
+                    },
+                    get children() {
+                      var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild;
+                      _$insert(_el$3, _$createComponent(Show, {
+                        get when() {
+                          return _$memo(() => !!(local.toggleDelete && info() && !info().isNew))() && (local.deletable ?? true);
+                        },
+                        children: (_) => _$createComponent(Button, {
+                          variant: "solid",
+                          theme: "danger",
+                          onClick: () => void handleToggleDelete(),
+                          get children() {
+                            return [_$createComponent(Icon, {
+                              get icon() {
+                                return info().isDeleted ? IconTrashOff : IconTrash;
+                              },
+                              "class": "mr-1"
+                            }), _$memo(() => _$memo(() => !!info().isDeleted)() ? i18n.t("crudDetail.restore") : i18n.t("crudDetail.delete"))];
+                          }
+                        })
+                      }), null);
+                      _$insert(_el$3, _$createComponent(Show, {
+                        get when() {
+                          return local.submit;
+                        },
+                        get children() {
+                          return _$createComponent(Button, {
+                            variant: "solid",
+                            theme: "primary",
+                            onClick: () => formRef == null ? void 0 : formRef.requestSubmit(),
+                            "class": "gap-1",
+                            get children() {
+                              return [_$createComponent(Icon, {
+                                icon: IconCheck
+                              }), _$memo(() => i18n.t("crudDetail.confirm"))];
+                            }
+                          });
+                        }
+                      }), null);
+                      _$effect(() => _$className(_el$3, clsx("flex gap-2 border-t px-3 py-1.5", border.default)));
+                      return _el$3;
+                    }
+                  })];
                 }
               })];
             }
-          }), null);
-          _$insert(_el$, _$createComponent(Show, {
-            get when() {
-              return defs().tools;
-            },
-            children: (toolsDef) => toolsDef().children
-          }), null);
-          return _el$;
-        }
-      }), _$createComponent(Show, {
-        get when() {
-          return defs().before;
-        },
-        children: (beforeDef) => beforeDef().children
-      }), (() => {
-        var _el$2 = _tmpl$2();
-        _el$2.addEventListener("submit", handleFormSubmit);
-        _$use((el) => {
-          formRef = el;
-          registerCrud(crudId, el);
-        }, _el$2);
-        _$insert(_el$2, formContent);
-        return _el$2;
-      })(), _$createComponent(Show, {
-        get when() {
-          var _a;
-          return (_a = info()) == null ? void 0 : _a.lastModifiedAt;
-        },
-        children: (_) => (() => {
-          var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild;
-          _$insert(_el$5, () => i18n.t("crudDetail.lastModified"), _el$6);
-          _$insert(_el$5, () => info().lastModifiedAt.toFormatString("yyyy-MM-dd HH:mm"), null);
-          _$insert(_el$5, _$createComponent(Show, {
-            get when() {
-              var _a;
-              return (_a = info()) == null ? void 0 : _a.lastModifiedBy;
-            },
-            get children() {
-              return [" (", _$memo(() => info().lastModifiedBy), ")"];
-            }
-          }), null);
-          return _el$5;
-        })()
-      }), _$createComponent(Show, {
-        get when() {
-          return defs().after;
-        },
-        children: (afterDef) => afterDef().children
-      }), _$createComponent(Show, {
-        get when() {
-          return isInDialog && canEdit();
-        },
-        get children() {
-          var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild;
-          _$insert(_el$3, _$createComponent(Show, {
-            get when() {
-              return _$memo(() => !!(local.toggleDelete && info() && !info().isNew))() && (local.deletable ?? true);
-            },
-            children: (_) => _$createComponent(Button, {
-              variant: "solid",
-              theme: "danger",
-              onClick: () => void handleToggleDelete(),
-              get children() {
-                return [_$createComponent(Icon, {
-                  get icon() {
-                    return info().isDeleted ? IconTrashOff : IconTrash;
-                  },
-                  "class": "mr-1"
-                }), _$memo(() => _$memo(() => !!info().isDeleted)() ? i18n.t("crudDetail.restore") : i18n.t("crudDetail.delete"))];
-              }
-            })
-          }), null);
-          _$insert(_el$3, _$createComponent(Show, {
-            get when() {
-              return local.submit;
-            },
-            get children() {
-              return _$createComponent(Button, {
-                variant: "solid",
-                theme: "primary",
-                onClick: () => formRef == null ? void 0 : formRef.requestSubmit(),
-                "class": "gap-1",
-                get children() {
-                  return [_$createComponent(Icon, {
-                    icon: IconCheck
-                  }), _$memo(() => i18n.t("crudDetail.confirm"))];
-                }
-              });
-            }
-          }), null);
-          return _el$3;
+          });
         }
-      })];
+      });
     }
-  })];
+  });
 };
-const CrudDetail = CrudDetailBase;
-CrudDetail.Tools = CrudDetailTools;
-CrudDetail.Before = CrudDetailBefore;
-CrudDetail.After = CrudDetailAfter;
+const CrudDetail = Object.assign(CrudDetailBase, {
+  Tools: CrudDetailTools,
+  Before: CrudDetailBefore,
+  After: CrudDetailAfter
+});
 export {
   CrudDetail
 };