imean-service-engine-htmx-plugin 2.5.0 → 2.7.0

package/dist/index.mjs

@@ -78,7 +78,6 @@ function renderActionButton(action, index) {
     close,
     submit,
     formId,
-    onClick,
     className = "",
     target
   } = action;
@@ -104,8 +103,7 @@ function renderActionButton(action, index) {
       index
     );
   }
-  const finalOnClick = close ? CLOSE_DIALOG_SCRIPT : onClick;
-  if (finalOnClick) {
+  if (close) {
     const variantStyles = {
       primary: "bg-blue-600 text-white hover:bg-blue-700",
       secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
@@ -123,7 +121,8 @@ function renderActionButton(action, index) {
       "button",
       {
         type: "button",
-        _: finalOnClick,
+        "x-data": CLOSE_DIALOG_ALPINE_DATA,
+        "x-on:click": "closeDialog()",
         className: `px-4 py-2 rounded transition-colors font-medium ${buttonStyle} ${className}`,
         "data-testid": testId2,
         ...confirm && { "data-confirm": confirm },
@@ -167,15 +166,25 @@ function renderActionButton(action, index) {
 function renderActionButtons(actions) {
   return actions.map((action, index) => renderActionButton(action, index));
 }
-var CLOSE_DIALOG_SCRIPT;
+var CLOSE_DIALOG_ALPINE_DATA;
 var init_action_button_renderer = __esm({
   "src/utils/action-button-renderer.tsx"() {
     init_button();
-    CLOSE_DIALOG_SCRIPT = `on click 
-  add .dialog-exit to .dialog-backdrop
-  add .dialog-content-exit to .dialog-content
-  wait 200ms
-  set #dialog-container's innerHTML to '' end`;
+    CLOSE_DIALOG_ALPINE_DATA = `{
+  closeDialog() {
+    const backdrop = this.$el.closest('.dialog-backdrop');
+    if (backdrop) {
+      backdrop.classList.add('dialog-exit');
+      const content = backdrop.querySelector('.dialog-content');
+      if (content) {
+        content.classList.add('dialog-content-exit');
+      }
+      setTimeout(() => {
+        backdrop.remove();
+      }, 200);
+    }
+  }
+}`;
   }
 });
 
@@ -305,11 +314,6 @@ var init_cdn_cache = __esm({
         url: "https://unpkg.com/htmx.org@latest",
         mimeType: "application/javascript"
       },
-      {
-        name: "hyperscript",
-        url: "https://unpkg.com/hyperscript.org@latest",
-        mimeType: "application/javascript"
-      },
       {
         name: "tailwindcss",
         url: "https://cdn.tailwindcss.com",
@@ -319,16 +323,6 @@ var init_cdn_cache = __esm({
         name: "alpinejs",
         url: "https://unpkg.com/alpinejs@latest/dist/cdn.min.js",
         mimeType: "application/javascript"
-      },
-      {
-        name: "idiomorph",
-        url: "https://unpkg.com/idiomorph@0.7.4/dist/idiomorph-ext.min.js",
-        mimeType: "application/javascript"
-      },
-      {
-        name: "sortablejs",
-        url: "https://unpkg.com/sortablejs@latest/Sortable.min.js",
-        mimeType: "application/javascript"
       }
     ];
     cache = /* @__PURE__ */ new Map();
@@ -553,8 +547,9 @@ function renderFormField(field, initialData, formFieldRenderers) {
           /* @__PURE__ */ jsx("div", { children: customRenderer({
             field,
             value: parsedValue,
-            initialData,
-            fieldName: field.name
+            item: initialData || {},
+            name: field.name,
+            label: field.label
           }) }),
           field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: field.description })
         ]
@@ -1851,7 +1846,12 @@ function renderDefaultValue(value) {
 function renderField(field, value, item) {
   let content;
   if (field.render) {
-    const rendered = field.render(value, item);
+    const rendered = field.render({
+      value,
+      item,
+      name: field.key,
+      label: field.label
+    });
     if (rendered === null || rendered === void 0) {
       content = /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "-" });
     } else if (typeof rendered === "string" || typeof rendered === "number" || typeof rendered === "boolean") {
@@ -1987,11 +1987,14 @@ var DefaultDetailFeature = class extends BaseFeature {
       const groupFields = groupSchemas.map(
         ({ label, schema: schema2, fields: fieldNames }) => {
           const groupFields2 = parseSchemaToFields(schema2);
-          const detailFields2 = groupFields2.map((field) => ({
-            key: field.name,
-            label: field.label,
-            render: this.fieldRenderers?.[field.name]
-          }));
+          const detailFields2 = groupFields2.map((field) => {
+            const renderer = this.fieldRenderers?.[field.name];
+            return {
+              key: field.name,
+              label: field.label,
+              render: renderer
+            };
+          });
           return {
             label,
             fields: detailFields2,
@@ -2023,12 +2026,16 @@ var DefaultDetailFeature = class extends BaseFeature {
       }
     }
     const detailFieldNames = getFieldNamesFromFields(detailFields);
-    const fields = detailFieldNames.map((fieldName) => ({
-      key: fieldName,
-      label: getFieldLabelFromFields(this.fields || [], fieldName) || fieldName,
-      render: this.fieldRenderers?.[fieldName]
-      // 如果有自定义渲染函数则使用
-    }));
+    const fields = detailFieldNames.map((fieldName) => {
+      const label = getFieldLabelFromFields(this.fields || [], fieldName) || fieldName;
+      const renderer = this.fieldRenderers?.[fieldName];
+      return {
+        key: fieldName,
+        label,
+        // 直接使用统一的渲染器类型
+        render: renderer
+      };
+    });
     return /* @__PURE__ */ jsx(DetailPage, { item, fields });
   }
   async getActions(context) {
@@ -2807,286 +2814,6 @@ var DefaultListFeature = class extends BaseFeature {
   }
 };
 
-// src/component-system/store.ts
-var STATE_EXPIRATION_TIME = 864e5;
-var StateStore = class _StateStore {
-  static instance;
-  state;
-  constructor() {
-    this.state = /* @__PURE__ */ new Map();
-    setInterval(() => {
-      this.state.forEach((state) => {
-        if (state.lastUpdated < Date.now() - STATE_EXPIRATION_TIME) {
-          this.state.delete(state.instanceId);
-        }
-      });
-    }, 3e4);
-  }
-  static get() {
-    if (!_StateStore.instance) {
-      _StateStore.instance = new _StateStore();
-    }
-    return _StateStore.instance;
-  }
-  /** 获取实例状态 */
-  getState(instanceId) {
-    const state = this.state.get(instanceId);
-    if (state) {
-      return state;
-    }
-    const newState = {
-      instanceId,
-      data: {
-        props: {},
-        state: {}
-      },
-      lastUpdated: Date.now()
-    };
-    this.state.set(instanceId, newState);
-    return newState;
-  }
-  /** 设置实例状态 */
-  setState(instanceId, state) {
-    const instanceState = this.getState(instanceId);
-    instanceState.data = Object.assign(instanceState.data.state, state);
-    instanceState.lastUpdated = Date.now();
-  }
-};
-
-// src/component-system/utils.ts
-var globalIdCounter = 0;
-function generateUniqueId() {
-  return `htmx-cid-${globalIdCounter++}`;
-}
-var HTMX_COMPONENT_PREFIX = "/_htmx_components";
-
-// src/component-system/context.tsx
-var RenderContext = class {
-  constructor(prefix, instanceId, componentName) {
-    this.prefix = prefix;
-    this.instanceId = instanceId;
-    this.componentName = componentName;
-  }
-  // 生成唯一 ID（使用全局共享计数器，避免冲突）
-  $id() {
-    return generateUniqueId();
-  }
-  setState(state) {
-    StateStore.get().setState(this.instanceId, state);
-  }
-  get state() {
-    return StateStore.get().getState(this.instanceId).data.state;
-  }
-  get props() {
-    return StateStore.get().getState(this.instanceId).data.props;
-  }
-  // 生成方法 URL（使用当前 instanceId）
-  url(methodName, params) {
-    const baseUrl = `${this.prefix}/${HTMX_COMPONENT_PREFIX}/${this.componentName}/${this.instanceId}/${methodName}`;
-    if (params && Object.keys(params).length > 0) {
-      const queryString = new URLSearchParams(
-        Object.entries(params).reduce(
-          (acc, [key, value]) => {
-            acc[key] = String(value);
-            return acc;
-          },
-          {}
-        )
-      ).toString();
-      return `${baseUrl}?${queryString}`;
-    }
-    return baseUrl;
-  }
-  callMethod(methodName, params) {
-    const selectors = Object.entries(params).map(([name, expression]) => `${name}:${expression}`).join(",");
-    return {
-      "hx-post": this.url(methodName),
-      "hx-vals": `js:{_params_:{${selectors}}}`,
-      "hx-params": "_state_,_params_,_this_value_"
-    };
-  }
-};
-var ComponentContext = class extends RenderContext {
-  constructor(prefix, ctx, componentName) {
-    const routeParams = ctx.req.param();
-    const instanceId = String(routeParams.instanceId || "");
-    super(prefix, instanceId, componentName);
-    this.ctx = ctx;
-  }
-  // 获取所有参数（统一接口：聚合 query string 和 body）
-  async params() {
-    const params = {};
-    const routeParams = this.ctx.req.param();
-    Object.assign(params, routeParams);
-    const url = new URL(this.ctx.req.url);
-    for (const [key, value] of url.searchParams.entries()) {
-      params[key] = value;
-    }
-    const contentType = this.ctx.req.header("Content-Type") || "";
-    if (contentType.includes("application/json")) {
-      try {
-        const body = await this.ctx.req.json();
-        Object.assign(params, body);
-      } catch (e) {
-        console.warn("[ComponentContext] Failed to parse JSON body:", e);
-      }
-    } else if (this.ctx.req.method === "POST" || this.ctx.req.method === "PUT" || this.ctx.req.method === "PATCH" || this.ctx.req.method === "DELETE") {
-      try {
-        const formData = await this.ctx.req.formData();
-        for (const [key, value] of formData.entries()) {
-          params[key] = value instanceof File ? value : value.toString();
-        }
-      } catch (e) {
-        console.warn("[ComponentContext] Failed to parse form data:", e);
-      }
-    }
-    return params;
-  }
-  // 获取查询参数
-  query() {
-    const url = new URL(this.ctx.req.url);
-    return Object.fromEntries(url.searchParams.entries());
-  }
-  // 获取请求体
-  async body() {
-    const contentType = this.ctx.req.header("Content-Type") || "";
-    if (contentType.includes("application/json")) {
-      try {
-        return await this.ctx.req.json();
-      } catch (e) {
-        console.warn("[ComponentContext] Failed to parse JSON body:", e);
-        return {};
-      }
-    }
-    try {
-      const formData = await this.ctx.req.formData();
-      const body = {};
-      for (const [key, value] of formData.entries()) {
-        body[key] = value instanceof File ? value : value.toString();
-      }
-      return body;
-    } catch (e) {
-      console.warn("[ComponentContext] Failed to parse form data:", e);
-      return {};
-    }
-  }
-};
-
-// src/component-system/component.tsx
-var METHOD_METADATA_KEY = /* @__PURE__ */ Symbol("htmx:method");
-function Method(config) {
-  return function(target, propertyKey, _descriptor) {
-    if (!target[METHOD_METADATA_KEY]) {
-      target[METHOD_METADATA_KEY] = /* @__PURE__ */ new Map();
-    }
-    target[METHOD_METADATA_KEY].set(propertyKey, {
-      method: config?.method || "get",
-      path: config?.path
-    });
-  };
-}
-var HtmxComponent = class {
-  constructor(name) {
-    this.name = name;
-  }
-  prefix;
-  // 组件函数
-  Component = (props) => {
-    const instanceId = generateUniqueId();
-    const state = StateStore.get().getState(instanceId).data;
-    state.props = props;
-    state.state = {};
-    const renderCtx = new RenderContext(
-      this.prefix,
-      instanceId,
-      this.name
-    );
-    return this.render(renderCtx, props);
-  };
-  // 返回 JSX script 元素
-  // 获取所有标记为 @Method() 的方法
-  // 注意：handler 不再绑定 this，因为方法会接收 ComponentContext 作为第一个参数
-  static getMethods(component) {
-    const methods = /* @__PURE__ */ new Map();
-    const metadata = component[METHOD_METADATA_KEY];
-    if (!metadata) return methods;
-    for (const [methodName, config] of metadata.entries()) {
-      const handler = component[methodName];
-      methods.set(methodName, {
-        method: config.method,
-        path: config.path,
-        handler
-      });
-    }
-    return methods;
-  }
-};
-var HtmxComponentHandler = class {
-  constructor(hono, prefix, components) {
-    this.hono = hono;
-    this.prefix = prefix;
-    this.components = components;
-    for (const component of this.components) {
-      component.prefix = this.prefix;
-      this.registerHandler(component);
-    }
-  }
-  registerHandler(component) {
-    const methods = HtmxComponent.getMethods(component);
-    for (const [methodName, methodConfig] of methods) {
-      const routePath = `${this.prefix}/${HTMX_COMPONENT_PREFIX}/${component.name}/:instanceId/${methodName}`;
-      logger.info(
-        `[HtmxComponent] Registering handler ${methodConfig.method} ${routePath}`
-      );
-      this.hono[methodConfig.method](routePath, async (ctx) => {
-        return this.handleComponentMethod(
-          ctx,
-          component,
-          methodConfig.handler.bind(component)
-        );
-      });
-    }
-  }
-  async handleComponentMethod(ctx, component, handler) {
-    const componentContext = new ComponentContext(
-      this.prefix,
-      ctx,
-      component.name
-    );
-    const result = await handler(componentContext);
-    if (result instanceof Object && ("target" in result || "swap" in result || "body" in result || "oobs" in result)) {
-      const { target, swap, body, oobs, trigger } = result;
-      const headers = {};
-      let bodyContent = body;
-      if (target) headers["HX-Retarget"] = target;
-      if (swap) headers["HX-Reswap"] = swap;
-      if (trigger) headers["HX-Trigger"] = trigger;
-      if (oobs) {
-        oobs.forEach((oob) => {
-          oob.props["hx-swap-oob"] = "true";
-        });
-        if (!body) {
-          headers["HX-Reswap"] = "delete";
-        }
-        bodyContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-          body,
-          oobs
-        ] });
-      }
-      return ctx.html(bodyContent, 200, headers);
-    }
-    if (result === null) {
-      return ctx.html(/* @__PURE__ */ jsx("div", {}), 200, {
-        "HX-Reswap": "none"
-      });
-    }
-    if (result instanceof Response) {
-      return result;
-    }
-    return ctx.html(result, 200);
-  }
-};
-
 // src/utils/path.ts
 function modelNameToPath(modelName) {
   return `/${modelName.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
@@ -3098,8 +2825,9 @@ function ErrorAlert(props) {
     type = "error",
     showClose = true,
     className = "",
-    autoClose = 5e3
+    autoClose = 5e3,
     // 默认 5 秒自动关闭
+    "hx-swap-oob": hxSwapOob
   } = props;
   const typeClasses = {
     error: "bg-red-50 border-red-200 text-red-800",
@@ -3188,12 +2916,20 @@ function ErrorAlert(props) {
             const now = Date.now();
             this.elapsedTime = now - this.startTime;
             this.progress = Math.max(0, 100 - (this.elapsedTime / this.autoCloseDelay) * 100);
+            // \u66F4\u65B0\u8FDB\u5EA6\u6761\u6837\u5F0F
+            const progressBar = this.$el.querySelector('.progress-bar');
+            if (progressBar) {
+              progressBar.style.width = this.progress + '%';
+            }
             if (this.progress > 0 && this.visible) {
               this.progressTimer = requestAnimationFrame(updateProgress);
             }
           };
           this.progressTimer = requestAnimationFrame(updateProgress);
         },
+        getProgressStyle() {
+          return { width: this.progress + '%' };
+        },
         pauseAutoClose() {
           if (this.autoCloseTimer) {
             clearTimeout(this.autoCloseTimer);
@@ -3222,6 +2958,9 @@ function ErrorAlert(props) {
             cancelAnimationFrame(this.progressTimer);
             this.progressTimer = null;
           }
+          // \u6DFB\u52A0\u6DE1\u51FA\u52A8\u753B
+          this.$el.classList.add('error-alert-exit');
+          // \u52A8\u753B\u7ED3\u675F\u540E\u5B8C\u5168\u79FB\u9664\u5143\u7D20\uFF0C\u4E0D\u7559\u7A7A div
           setTimeout(() => {
             if (this.$el && this.$el.parentNode) {
               this.$el.parentNode.removeChild(this.$el);
@@ -3232,6 +2971,9 @@ function ErrorAlert(props) {
         visible: true,
         close() {
           this.visible = false;
+          // \u6DFB\u52A0\u6DE1\u51FA\u52A8\u753B
+          this.$el.classList.add('error-alert-exit');
+          // \u52A8\u753B\u7ED3\u675F\u540E\u5B8C\u5168\u79FB\u9664\u5143\u7D20\uFF0C\u4E0D\u7559\u7A7A div
           setTimeout(() => {
             if (this.$el && this.$el.parentNode) {
               this.$el.parentNode.removeChild(this.$el);
@@ -3253,18 +2995,26 @@ function ErrorAlert(props) {
     alpineProps["@mouseenter"] = "pauseAutoClose()";
     alpineProps["@mouseleave"] = "resumeAutoClose()";
   }
+  const htmxProps = {};
+  if (hxSwapOob) {
+    htmxProps["hx-swap-oob"] = hxSwapOob;
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ...alpineProps,
-      className: `border rounded-lg p-4 shadow-lg mb-2 ${typeClasses[type]} ${className} relative overflow-hidden`,
+      ...htmxProps,
+      className: `w-full border rounded-lg p-4 shadow-lg ${typeClasses[type]} ${className} relative overflow-hidden pointer-events-auto`,
       role: "alert",
+      style: {
+        animation: "slideInRight 0.3s ease-out"
+      },
       children: [
         autoClose > 0 && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 h-1 bg-gray-200", children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: `h-full ${progressBarColors[type]}`,
-            ...{ ":style": "`width: ${progress}%`" }
+            className: `h-full ${progressBarColors[type]} progress-bar`,
+            ...{ "x-bind:style": "getProgressStyle()" }
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
@@ -3383,6 +3133,9 @@ async function createFeatureContext(ctx, page, feature, user, options) {
   };
   return featureContext;
 }
+function generateDialogId() {
+  return `dialog-${Date.now()}}`;
+}
 function Dialog(props) {
   const {
     title,
@@ -3394,6 +3147,7 @@ function Dialog(props) {
     actions = [],
     fixedContentHeight = false
   } = props;
+  const dialogId = generateDialogId();
   const sizeClasses = {
     sm: "max-w-md",
     md: "max-w-lg",
@@ -3401,19 +3155,33 @@ function Dialog(props) {
     xl: "max-w-4xl",
     full: "max-w-7xl"
   };
-  const backdropClickHandler = closeOnBackdropClick ? `on click if event.target is me 
-         add .dialog-exit to me
-         add .dialog-content-exit to .dialog-content
-         wait 200ms
-         set #dialog-container's innerHTML to '' end` : "";
+  const alpineData = `{
+    closeDialog() {
+      const backdrop = this.$el.closest('.dialog-backdrop');
+      if (backdrop) {
+        backdrop.classList.add('dialog-exit');
+        const content = backdrop.querySelector('.dialog-content');
+        if (content) {
+          content.classList.add('dialog-content-exit');
+        }
+        setTimeout(() => {
+          backdrop.remove();
+        }, 200);
+      }
+    }
+  }`;
   return /* @__PURE__ */ jsx(
     "div",
     {
+      id: dialogId,
       className: "fixed inset-0 bg-black bg-opacity-50 z-[100] flex items-center justify-center p-4 dialog-backdrop",
       style: {
         animation: "fadeIn 0.2s ease-out"
       },
-      _: backdropClickHandler,
+      "x-data": alpineData,
+      ...closeOnBackdropClick && {
+        "x-on:click": "if ($event.target === $el) closeDialog()"
+      },
       children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -3421,7 +3189,7 @@ function Dialog(props) {
           style: {
             animation: "slideIn 0.3s ease-out"
           },
-          _: "on click call event.stopPropagation()",
+          ...{ "x-on:click.stop": "" },
           children: [
             (title || showClose) && /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 border-b border-gray-200 bg-white flex items-center justify-between", children: [
               title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900", children: title }),
@@ -3429,7 +3197,7 @@ function Dialog(props) {
                 "button",
                 {
                   className: "text-gray-400 hover:text-gray-600 transition-colors",
-                  _: "on click \r\n                     add .dialog-exit to .dialog-backdrop\r\n                     add .dialog-content-exit to .dialog-content\r\n                     wait 200ms\r\n                     set #dialog-container's innerHTML to '' end",
+                  "x-on:click": "closeDialog()",
                   children: /* @__PURE__ */ jsx(
                     "svg",
                     {
@@ -3526,11 +3294,26 @@ function PermissionDeniedContent(props) {
         Button,
         {
           variant: "secondary",
-          _: "on click set #dialog-container's innerHTML to ''",
+          "x-data": `{
+              closeDialog() {
+                const backdrop = this.$el.closest('.dialog-backdrop');
+                if (backdrop) {
+                  backdrop.classList.add('dialog-exit');
+                  const content = backdrop.querySelector('.dialog-content');
+                  if (content) {
+                    content.classList.add('dialog-content-exit');
+                  }
+                  setTimeout(() => {
+                    backdrop.remove();
+                  }, 200);
+                }
+              }
+            }`,
+          "x-on:click": "closeDialog()",
           children: "\u5173\u95ED"
         }
       ),
-      !isDialog && userInfo && /* @__PURE__ */ jsx(Button, { variant: "secondary", _: "on click window.history.back()", children: "\u8FD4\u56DE" })
+      !isDialog && userInfo && /* @__PURE__ */ jsx(Button, { variant: "secondary", onclick: "window.history.back()", children: "\u8FD4\u56DE" })
     ] })
   ] });
 }
@@ -3551,13 +3334,8 @@ var getResourceUrl = (prefix, name) => {
 function globalScripts(prefix) {
   return html`
     <script src=${getResourceUrl(prefix, "htmx")}></script>
-    <script src=${getResourceUrl(prefix, "htmx-ext-form-json")}></script>
-    <script src=${getResourceUrl(prefix, "hyperscript")}></script>
     <script src=${getResourceUrl(prefix, "tailwindcss")}></script>
     <script src=${getResourceUrl(prefix, "alpinejs")} defer></script>
-    <script src=${getResourceUrl(prefix, "sortablejs")}></script>
-    <script src=${getResourceUrl(prefix, "idiomorph")}></script>
-    <script type="module" src=${getResourceUrl(prefix, "datastar")}></script>
   `;
 }
 function globalStyles() {
@@ -3687,36 +3465,6 @@ function globalStyles() {
     }
   </style>`;
 }
-function sortableScript() {
-  html`<script>
-    if (typeof htmx !== "undefined" && typeof Sortable !== "undefined") {
-      htmx.onLoad(function (content) {
-        var sortables = content.querySelectorAll(".sortable");
-        for (var i = 0; i < sortables.length; i++) {
-          var sortable = sortables[i];
-          // 检查是否已经初始化
-          if (sortable.sortableInstance) {
-            continue;
-          }
-          var sortableInstance = new Sortable(sortable, {
-            animation: 150,
-            ghostClass: "sortable-ghost",
-            filter: ".htmx-indicator",
-            onMove: function (evt) {
-              return evt.related.className.indexOf("htmx-indicator") === -1;
-            },
-          });
-          sortable.sortableInstance = sortableInstance;
-          sortable.addEventListener("htmx:afterSwap", function () {
-            if (sortable.sortableInstance) {
-              sortable.sortableInstance.option("disabled", false);
-            }
-          });
-        }
-      });
-    }
-  </script>`;
-}
 function Breadcrumb(props) {
   const { items } = props;
   if (items.length === 0) {
@@ -4072,193 +3820,183 @@ function SortableList(props) {
 function StringArrayEditor(props) {
   const {
     value,
-    fieldName,
     placeholder = "\u8BF7\u8F93\u5165\u5185\u5BB9",
     allowEmpty = false,
     rows = 1
   } = props;
+  const name = props.name;
   const initialItems = value || [];
   const initialDataJson = JSON.stringify({
     items: initialItems.map((item) => item || ""),
-    fieldName,
+    fieldName: name,
     placeholder,
     allowEmpty,
     rows
   });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "space-y-3",
-      "x-data": initialDataJson,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            ...{
-              "x-on:click": `
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", "x-data": initialDataJson, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        ...{
+          "x-on:click": `
               items.push('');
             `
-            },
-            className: "px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium flex items-center gap-2",
-            "data-testid": `${fieldName}-add-button`,
-            children: [
-              /* @__PURE__ */ jsx(
-                "svg",
+        },
+        className: "px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium flex items-center gap-2",
+        "data-testid": `${name}-add-button`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-4 h-4",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
                 {
-                  className: "w-4 h-4",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: "2",
-                      d: "M12 4v16m8-8H4"
-                    }
-                  )
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2",
+                  d: "M12 4v16m8-8H4"
                 }
-              ),
-              "\u6DFB\u52A0\u9879"
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "x-show": "items.length > 0",
-            "data-testid": `${fieldName}-list-container`,
-            ...{
-              "@sortable:change.stop": `
+              )
+            }
+          ),
+          "\u6DFB\u52A0\u9879"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "x-show": "items.length > 0",
+        "data-testid": `${name}-list-container`,
+        ...{
+          "@sortable:change.stop": `
             (function() {
               const { oldIndex, newIndex } = $event.detail;
               [items[oldIndex], items[newIndex]] = [items[newIndex], items[oldIndex]];
             })();
           `
-            },
-            children: /* @__PURE__ */ jsx(SortableList, { className: "space-y-2", handle: "[data-drag-handle]", children: /* @__PURE__ */ jsx("template", { "x-for": "(item, index) in items", "x-bind:key": "index", children: /* @__PURE__ */ jsx(ArrayItem, { fieldName, rows }) }) })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "empty-state text-center py-8 text-gray-400 text-sm border border-dashed border-gray-300 rounded-lg",
-            "x-show": "items.length === 0",
-            "data-testid": `${fieldName}-empty-state`,
-            children: '\u6682\u65E0\u9879\uFF0C\u70B9\u51FB"\u6DFB\u52A0\u9879"\u6309\u94AE\u6DFB\u52A0'
-          }
-        )
-      ]
-    }
-  );
+        },
+        children: /* @__PURE__ */ jsx(SortableList, { className: "space-y-2", handle: "[data-drag-handle]", children: /* @__PURE__ */ jsx("template", { "x-for": "(item, index) in items", "x-bind:key": "index", children: /* @__PURE__ */ jsx(ArrayItem, { fieldName: name, rows }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "empty-state text-center py-8 text-gray-400 text-sm border border-dashed border-gray-300 rounded-lg",
+        "x-show": "items.length === 0",
+        "data-testid": `${name}-empty-state`,
+        children: '\u6682\u65E0\u9879\uFF0C\u70B9\u51FB"\u6DFB\u52A0\u9879"\u6309\u94AE\u6DFB\u52A0'
+      }
+    )
+  ] });
 }
-function ArrayItem({ fieldName, rows = 1 }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-array-item": true,
-      className: "flex items-center gap-2 group",
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
+function ArrayItem({
+  fieldName,
+  rows = 1
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-array-item": true, className: "flex items-center gap-2 group", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex-shrink-0 cursor-move text-gray-400 hover:text-gray-600 transition-colors p-1",
+        "data-drag-handle": true,
+        "data-testid": `${fieldName}-drag-handle`,
+        title: "\u62D6\u62FD\u6392\u5E8F",
+        children: /* @__PURE__ */ jsx(
+          "svg",
           {
-            className: "flex-shrink-0 cursor-move text-gray-400 hover:text-gray-600 transition-colors p-1",
-            "data-drag-handle": true,
-            "data-testid": `${fieldName}-drag-handle`,
-            title: "\u62D6\u62FD\u6392\u5E8F",
+            className: "w-5 h-5",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
             children: /* @__PURE__ */ jsx(
-              "svg",
+              "path",
               {
-                className: "w-5 h-5",
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: "2",
-                    d: "M4 8h16M4 16h16"
-                  }
-                )
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2",
+                d: "M4 8h16M4 16h16"
               }
             )
           }
-        ),
-        rows === 1 ? /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            "x-model": "items[index]",
-            "x-bind:placeholder": "placeholder + ' ' + (index + 1)",
-            className: "flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
-            "data-testid": `${fieldName}-input`,
-            "x-bind:required": "!allowEmpty"
-          }
-        ) : /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            "x-model": "items[index]",
-            "x-bind:placeholder": "placeholder + ' ' + (index + 1)",
-            rows,
-            className: "flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-y",
-            "data-testid": `${fieldName}-input`,
-            "x-bind:required": "!allowEmpty"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "hidden",
-            "x-bind:name": "fieldName + '[' + index + ']'",
-            "x-bind:value": "item"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            ...{
-              "x-on:click": `
+        )
+      }
+    ),
+    rows === 1 ? /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        "x-model": "items[index]",
+        "x-bind:placeholder": "placeholder + ' ' + (index + 1)",
+        className: "flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+        "data-testid": `${fieldName}-input`,
+        "x-bind:required": "!allowEmpty"
+      }
+    ) : /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        "x-model": "items[index]",
+        "x-bind:placeholder": "placeholder + ' ' + (index + 1)",
+        rows,
+        className: "flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-y",
+        "data-testid": `${fieldName}-input`,
+        "x-bind:required": "!allowEmpty"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        "x-bind:name": "fieldName + '[' + index + ']'",
+        "x-bind:value": "item"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ...{
+          "x-on:click": `
             items.splice(index, 1);
           `
-            },
-            className: "flex-shrink-0 px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors",
-            "data-testid": `${fieldName}-remove-button`,
-            title: "\u5220\u9664\u6B64\u9879",
+        },
+        className: "flex-shrink-0 px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors",
+        "data-testid": `${fieldName}-remove-button`,
+        title: "\u5220\u9664\u6B64\u9879",
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-5 h-5",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
             children: /* @__PURE__ */ jsx(
-              "svg",
+              "path",
               {
-                className: "w-5 h-5",
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: "2",
-                    d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                  }
-                )
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2",
+                d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
               }
             )
           }
         )
-      ]
-    }
-  );
+      }
+    )
+  ] });
 }
 function TagsEditor(props) {
-  const { value, fieldName, placeholder = "\u8F93\u5165\u6807\u7B7E\u540E\u6309\u56DE\u8F66\u6DFB\u52A0" } = props;
+  const { value, placeholder = "\u8F93\u5165\u6807\u7B7E\u540E\u6309\u56DE\u8F66\u6DFB\u52A0" } = props;
+  const name = props.name;
   const initialTags = value || [];
   const initialDataJson = JSON.stringify({
     tags: initialTags.map((tag) => tag || ""),
-    fieldName,
+    fieldName: name,
     newTag: "",
     editingIndex: null,
     editingValue: "",
@@ -4285,7 +4023,7 @@ function TagsEditor(props) {
           placeholder,
           autocomplete: "off",
           className: "w-full px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
-          "data-testid": `${fieldName}-input`
+          "data-testid": `${name}-input`
         }
       ),
       /* @__PURE__ */ jsx(
@@ -4294,7 +4032,7 @@ function TagsEditor(props) {
           "x-show": "error && editingIndex === null",
           "x-text": "error",
           className: "text-red-600 text-sm p-2",
-          id: `${fieldName}-error`
+          id: `${name}-error`
         }
       )
     ] }),
@@ -4302,7 +4040,7 @@ function TagsEditor(props) {
       "div",
       {
         "x-show": "tags.length > 0",
-        "data-testid": `${fieldName}-tags-container`,
+        "data-testid": `${name}-tags-container`,
         ...{
           "@sortable:change.stop": `
             (function() {
@@ -4325,8 +4063,8 @@ function TagsEditor(props) {
                   "x-bind:value": "editingIndex === index ? editingValue : tag"
                 }
               ),
-              /* @__PURE__ */ jsx(TagItem, { fieldName }),
-              /* @__PURE__ */ jsx(TagItemEdit, { fieldName })
+              /* @__PURE__ */ jsx(TagItem, { fieldName: name }),
+              /* @__PURE__ */ jsx(TagItemEdit, { fieldName: name })
             ] }) })
           }
         )
@@ -4337,7 +4075,7 @@ function TagsEditor(props) {
       {
         className: "empty-state text-center py-4 text-gray-400 text-sm border border-dashed border-gray-300 rounded-md",
         "x-show": "tags.length === 0",
-        "data-testid": `${fieldName}-empty-state`,
+        "data-testid": `${name}-empty-state`,
         children: "\u6682\u65E0\u6807\u7B7E\uFF0C\u5728\u4E0A\u65B9\u8F93\u5165\u6846\u4E2D\u8F93\u5165\u6807\u7B7E\u540E\u6309\u56DE\u8F66\u6DFB\u52A0"
       }
     )
@@ -4518,7 +4256,7 @@ function TagItemEdit({ fieldName }) {
   );
 }
 function ObjectEditor(props) {
-  const { value, fieldName, objectSchema } = props;
+  const { value, name, objectSchema } = props;
   if (!objectSchema) {
     return /* @__PURE__ */ jsx("div", { className: "p-4 border border-yellow-300 rounded-lg bg-yellow-50 text-yellow-800 text-sm", children: "\u8BF7\u63D0\u4F9B objectSchema \u53C2\u6570\u4EE5\u4F7F\u7528\u5BF9\u8C61\u7F16\u8F91\u5668" });
   }
@@ -4538,7 +4276,7 @@ function ObjectEditor(props) {
   const initialValueJson = JSON.stringify(initialObject);
   JSON.stringify(fields.map((f) => f.name));
   const generateField = (field) => {
-    const fieldId = `${fieldName}-${field.name}`;
+    const fieldId = `${String(name)}-${field.name}`;
     const fieldValue = initialObject[field.name];
     const fieldValueStr = fieldValue === void 0 || fieldValue === null ? "" : typeof fieldValue === "object" ? JSON.stringify(fieldValue) : String(fieldValue);
     const requiredAttr = field.required ? "required" : "";
@@ -4548,11 +4286,11 @@ function ObjectEditor(props) {
         <input
           type="text"
           id="${fieldId}"
-          name="${fieldName}.${field.name}"
+          name="${name}.${field.name}"
           value="${fieldValueStr}"
           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-          data-testid="${fieldName}-input-${field.name}"
-          oninput="updateObjectField('${fieldName}', '${field.name}', this.value, 'text', ${field.required})"
+          data-testid="${name}-input-${field.name}"
+          oninput="updateObjectField('${name}', '${field.name}', this.value, 'text', ${field.required})"
           ${requiredAttr}
         />
       `;
@@ -4560,11 +4298,11 @@ function ObjectEditor(props) {
       inputElement = html`
         <textarea
           id="${fieldId}"
-          name="${fieldName}.${field.name}"
+          name="${name}.${field.name}"
           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-y"
           rows="4"
-          data-testid="${fieldName}-input-${field.name}"
-          oninput="updateObjectField('${fieldName}', '${field.name}', this.value, 'text', ${field.required})"
+          data-testid="${name}-input-${field.name}"
+          oninput="updateObjectField('${name}', '${field.name}', this.value, 'text', ${field.required})"
           ${requiredAttr}
         >${fieldValueStr}</textarea>
       `;
@@ -4574,12 +4312,12 @@ function ObjectEditor(props) {
         <input
           type="number"
           id="${fieldId}"
-          name="${fieldName}.${field.name}"
+          name="${name}.${field.name}"
           value="${fieldValueStr}"
           step="${step}"
           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-          data-testid="${fieldName}-input-${field.name}"
-          oninput="updateObjectField('${fieldName}', '${field.name}', this.value, 'number', ${field.required})"
+          data-testid="${name}-input-${field.name}"
+          oninput="updateObjectField('${name}', '${field.name}', this.value, 'number', ${field.required})"
           ${requiredAttr}
         />
       `;
@@ -4588,11 +4326,11 @@ function ObjectEditor(props) {
         <input
           type="date"
           id="${fieldId}"
-          name="${fieldName}.${field.name}"
+          name="${name}.${field.name}"
           value="${fieldValueStr}"
           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-          data-testid="${fieldName}-input-${field.name}"
-          oninput="updateObjectField('${fieldName}', '${field.name}', this.value, 'date', ${field.required})"
+          data-testid="${name}-input-${field.name}"
+          oninput="updateObjectField('${name}', '${field.name}', this.value, 'date', ${field.required})"
           ${requiredAttr}
         />
       `;
@@ -4601,11 +4339,11 @@ function ObjectEditor(props) {
         <input
           type="email"
           id="${fieldId}"
-          name="${fieldName}.${field.name}"
+          name="${name}.${field.name}"
           value="${fieldValueStr}"
           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-          data-testid="${fieldName}-input-${field.name}"
-          oninput="updateObjectField('${fieldName}', '${field.name}', this.value, 'text', ${field.required})"
+          data-testid="${name}-input-${field.name}"
+          oninput="updateObjectField('${name}', '${field.name}', this.value, 'text', ${field.required})"
           ${requiredAttr}
         />
       `;
@@ -4613,10 +4351,10 @@ function ObjectEditor(props) {
       inputElement = html`
         <select
           id="${fieldId}"
-          name="${fieldName}.${field.name}"
+          name="${name}.${field.name}"
           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white"
-          data-testid="${fieldName}-select-${field.name}"
-          onchange="updateObjectField('${fieldName}', '${field.name}', this.value, 'text', ${field.required})"
+          data-testid="${name}-select-${field.name}"
+          onchange="updateObjectField('${name}', '${field.name}', this.value, 'text', ${field.required})"
           ${requiredAttr}
         >
           ${!field.required ? html`<option value="">请选择</option>` : ""}
@@ -4639,11 +4377,11 @@ function ObjectEditor(props) {
           <input
             type="checkbox"
             id="${fieldId}"
-            name="${fieldName}.${field.name}"
+            name="${name}.${field.name}"
             ${checked ? "checked" : ""}
             class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
-            data-testid="${fieldName}-checkbox-${field.name}"
-            onchange="updateObjectField('${fieldName}', '${field.name}', this.checked, 'checkbox', ${field.required}')"
+            data-testid="${name}-checkbox-${field.name}"
+            onchange="updateObjectField('${name}', '${field.name}', this.checked, 'checkbox', ${field.required}')"
           />
           <label for="${fieldId}" class="ml-2 text-sm text-gray-700">
             ${field.label}
@@ -4652,12 +4390,12 @@ function ObjectEditor(props) {
       `;
     }
     return html`
-      <div class="space-y-2" data-testid="${fieldName}-field-${field.name}">
+      <div class="space-y-2" data-testid="${name}-field-${field.name}">
         ${field.type !== "checkbox" ? html`
               <label
                 for="${fieldId}"
                 class="block text-sm font-semibold text-gray-700"
-                data-testid="${fieldName}-label-${field.name}"
+                data-testid="${name}-label-${field.name}"
               >
                 ${field.label}
                 ${field.required ? html`<span class="text-red-500 ml-1">*</span>` : ""}
@@ -4669,15 +4407,15 @@ function ObjectEditor(props) {
   };
   return html`
     <div
-      id="object-editor-${fieldName}"
+      id="object-editor-${name}"
       class="space-y-4"
       data-initial-value="${initialValueJson}"
     >
       <input
         type="hidden"
-        name="${fieldName}"
+        name="${name}"
         value="${initialValueJson}"
-        data-testid="hidden-${fieldName}"
+        data-testid="hidden-${name}"
       />
       <div class="space-y-4">
         ${fields.map((field) => generateField(field))}
@@ -4739,14 +4477,13 @@ function BaseLayout(props) {
         <meta name="description" content="${props.description || ""}" />
         ${globalScripts(props.prefix)} ${globalStyles()}
       </head>
-      <body hx-ext="morph" className="bg-gray-50" hx-indicator="#loading-bar">
+      <body className="bg-gray-50" hx-indicator="#loading-bar">
         ${LoadingBar()} ${props.children}
         <div
-          id="error-container"
-          className="fixed top-4 right-4 z-[200] w-full max-w-2xl px-4"
+          id="notification-container"
+          style="position: fixed; top: 1rem; right: 1rem; z-index: 200; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; width: 100%; max-width: 28rem; padding-left: 1rem; padding-right: 1rem;"
         ></div>
         <div id="dialog-container"></div>
-        ${sortableScript()}
       </body>
     </html>
   `;
@@ -4998,7 +4735,7 @@ async function handlePermissionDenied(ctx, result, options) {
   if (isHtmxRequest) {
     const headers = {
       "HX-Retarget": "#dialog-container",
-      "HX-Reswap": "innerHTML",
+      "HX-Reswap": "beforeend",
       "X-Permission-Denied": "true"
     };
     return ctx.html(
@@ -5043,22 +4780,15 @@ function buildNotificationFragments(notifications) {
   if (notifications.length === 0) {
     return null;
   }
-  return notifications.map((notification, index) => /* @__PURE__ */ jsx(
-    "div",
+  return notifications.map((notification, index) => /* @__PURE__ */ jsx("div", { id: "notification-container", "hx-swap-oob": "beforeend", children: /* @__PURE__ */ jsx(
+    ErrorAlert,
     {
-      id: "error-container",
-      "hx-swap-oob": "beforeend",
-      children: /* @__PURE__ */ jsx(
-        ErrorAlert,
-        {
-          type: notification.type,
-          title: notification.title,
-          message: notification.message
-        }
-      )
+      type: notification.type,
+      title: notification.title,
+      message: notification.message
     },
     `notification-${index}`
-  ));
+  ) }));
 }
 function isEmptyContent(result) {
   if (result === null || result === void 0) return true;
@@ -5152,7 +4882,6 @@ async function renderResult(ctx, context, result, renderOptions) {
     if (context.isDialog) {
       return ctx.html(
         /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { id: "dialog-container", "hx-swap-oob": "innerHTML" }),
           notificationFragments,
           /* @__PURE__ */ jsx("title", { children: metadata.title })
         ] }),
@@ -5208,7 +4937,7 @@ async function renderResult(ctx, context, result, renderOptions) {
       );
     }
     const target = context.isDialog ? "#dialog-container" : "#main-content";
-    const swap = context.isDialog ? "innerHTML" : "outerHTML";
+    const swap = context.isDialog ? "beforeend" : "outerHTML";
     const headers = {
       "HX-Retarget": target,
       "HX-Reswap": swap
@@ -5271,7 +5000,6 @@ async function renderResult(ctx, context, result, renderOptions) {
                 useAdminLayout,
                 currentPath,
                 userInfo: user,
-                componentRegistry: renderOptions.componentRegistry,
                 breadcrumbs,
                 actions,
                 children: result
@@ -5307,7 +5035,6 @@ async function renderResult(ctx, context, result, renderOptions) {
             prefix: options.prefix,
             title: dynamicMetadata.title,
             description: dynamicMetadata.description,
-            componentRegistry: renderOptions.componentRegistry,
             children: /* @__PURE__ */ jsx(
               AdminLayout,
               {
@@ -5319,7 +5046,6 @@ async function renderResult(ctx, context, result, renderOptions) {
                 userInfo: user,
                 breadcrumbs,
                 actions,
-                componentRegistry: renderOptions.componentRegistry,
                 children: result
               }
             )
@@ -5334,7 +5060,6 @@ async function renderResult(ctx, context, result, renderOptions) {
             prefix: options.prefix,
             title: dynamicMetadata.title,
             description: dynamicMetadata.description,
-            componentRegistry: renderOptions.componentRegistry,
             children: /* @__PURE__ */ jsx(NoLayout, { children: result })
           }
         )
@@ -5423,14 +5148,15 @@ async function handleRequest(ctx, page, feature, handlerOptions) {
     if (isHtmxRequest) {
       return ctx.html(
         /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { id: "error-container", "hx-swap-oob": "beforeend", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
             ErrorAlert,
             {
+              "hx-swap-oob": "beforeend:#notification-container",
               type: "error",
               title: "\u8BF7\u6C42\u5931\u8D25",
               message: "Feature has no handler or render method"
             }
-          ) }),
+          ),
           /* @__PURE__ */ jsx("title", { children: "\u9519\u8BEF" })
         ] }),
         500,
@@ -5447,10 +5173,15 @@ async function handleRequest(ctx, page, feature, handlerOptions) {
     if (isHtmxRequest) {
       const errorMessage = error instanceof Error ? error.message : "Internal server error";
       return ctx.html(
-        /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { id: "error-container", "hx-swap-oob": "beforeend", children: /* @__PURE__ */ jsx(ErrorAlert, { type: "error", title: "\u8BF7\u6C42\u5931\u8D25", message: errorMessage }) }),
-          /* @__PURE__ */ jsx("title", { children: "\u9519\u8BEF" })
-        ] }),
+        /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+          ErrorAlert,
+          {
+            "hx-swap-oob": "beforeend:#notification-container",
+            type: "error",
+            title: "\u8BF7\u6C42\u5931\u8D25",
+            message: errorMessage
+          }
+        ) }),
         500,
         {
           "HX-Reswap": "none"
@@ -5553,7 +5284,6 @@ var HtmxAdminPlugin = class {
   options;
   serviceName = "";
   pages = /* @__PURE__ */ new Map();
-  componentHandler;
   constructor(options) {
     this.options = {
       title: options?.title || "\u7BA1\u7406\u540E\u53F0",
@@ -5562,8 +5292,7 @@ var HtmxAdminPlugin = class {
       homePath: options?.homePath || "",
       navigation: options?.navigation ?? [],
       authProvider: options?.authProvider,
-      pages: options?.pages ?? [],
-      components: options?.components ?? []
+      pages: options?.pages ?? []
     };
     this.initPages();
   }
@@ -5595,11 +5324,6 @@ var HtmxAdminPlugin = class {
     logger.info(
       `HtmxAdminPlugin initialized${this.serviceName ? ` (service: ${this.serviceName})` : ""}`
     );
-    this.componentHandler = new HtmxComponentHandler(
-      this.hono,
-      this.options.prefix,
-      this.options.components
-    );
     initializeCdnCache().catch((error) => {
       logger.error("[HtmxAdminPlugin] CDN \u7F13\u5B58\u521D\u59CB\u5316\u5931\u8D25", error);
     });
@@ -5621,4 +5345,4 @@ var HtmxAdminPlugin = class {
   }
 };
 
-export { BaseFeature, ComponentContext, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, ErrorAlert, HtmxAdminPlugin, HtmxComponent, LoadingBar, Method, ObjectEditor, PageModel, RenderContext, SortableList, StringArrayEditor, TagsEditor, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };
+export { BaseFeature, BaseFormFeature, Breadcrumb, Button, Card, CustomFeature, DefaultCreateFeature, DefaultDeleteFeature, DefaultDetailFeature, DefaultEditFeature, DefaultListFeature, Dialog, EmptyState, ErrorAlert, FilterForm, Header, HtmxAdminPlugin, LoadingBar, ObjectEditor, PageModel, Pagination, PermissionDeniedContent, PermissionDeniedPage, SortableList, StringArrayEditor, Table, TagsEditor, checkUserPermission, getUserInfo, modelNameToPath, parseListParams };