@ablogcms/modal 3.2.28-beta.0

package/README.md

@@ -0,0 +1,25 @@
+# @ablogcms/modal
+
+`data-modal-*` 属性を持つトリガー要素のクリックを監視し、URL/セレクタからのコンテンツ取得や
+フォーム submit と組み合わせてモーダルを開閉するパッケージ。
+
+## 使い方
+
+```tsx
+import { ModalController } from '@ablogcms/modal';
+
+ModalController.openTrigger = '.js-acms-modal-open';
+ModalController.closeTrigger = '.js-acms-modal-close';
+render(<ModalController />, element);
+```
+
+```html
+<a class="js-acms-modal-open" data-url="/path/to/content" data-modal-size="large">開く</a>
+```
+
+- `ModalController`: `openTrigger`/`closeTrigger`（セレクタ文字列）を静的プロパティに持つ
+  コンポーネント。1 度だけマウントすればページ全体のトリガーを監視する。
+- `ModalManager`: `ModalController` が内部で使う状態管理クラス。
+
+`./content-fetcher` / `./security-manager` は `@ablogcms/drawer` が同じロジックを再利用するための
+sub-path で、通常の利用ではメインエントリだけで足りる。

package/dist/acms.d.ts

@@ -0,0 +1,6 @@
+import type ModalManager from './store/modal-manager.js';
+declare module '@ablogcms/types/acms' {
+    interface AcmsLibrary {
+        modal: InstanceType<typeof ModalManager>;
+    }
+}

package/dist/acms.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=acms.mjs.map

package/dist/acms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-M67WUT4A.mjs

@@ -0,0 +1,61 @@
+// src/store/security-manager.ts
+var defaultOptions = {
+  allowSameOrigin: true,
+  allowRelativeUrls: true,
+  allowedDomains: []
+};
+function validateUrl(url, config = defaultOptions) {
+  try {
+    const urlObj = new URL(url, window.location.href);
+    if (urlObj.protocol === "file:" && !config.allowRelativeUrls) {
+      return false;
+    }
+    if (urlObj.origin === window.location.origin) {
+      return config.allowSameOrigin;
+    }
+    if (config.allowedDomains && config.allowedDomains.length > 0) {
+      return config.allowedDomains.some((domain) => {
+        if (domain.startsWith("*.")) {
+          const domainSuffix = domain.slice(2);
+          return urlObj.hostname.endsWith(domainSuffix);
+        }
+        return urlObj.hostname === domain;
+      });
+    }
+    return false;
+  } catch (error) {
+    console.error("Invalid URL:", error);
+    return false;
+  }
+}
+var SecurityManager = class {
+  #config = { ...defaultOptions };
+  constructor(options = {}) {
+    this.#config = { ...defaultOptions, ...options };
+  }
+  /**
+   * セキュリティ設定を更新
+   */
+  setConfig(newConfig) {
+    this.#config = { ...this.#config, ...newConfig };
+  }
+  /**
+   * 現在の設定を取得
+   */
+  get config() {
+    return this.#config;
+  }
+  /**
+   * URLを検証
+   */
+  validateUrl(url) {
+    return validateUrl(url, this.#config);
+  }
+};
+
+export {
+  defaultOptions,
+  validateUrl,
+  SecurityManager
+};
+//# sourceMappingURL=chunk-M67WUT4A.mjs.map

package/dist/chunk-M67WUT4A.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/store/security-manager.ts"],"sourcesContent":["/**\n * URL検証の設定\n */\nexport interface SecurityConfig {\n  allowedDomains?: string[];\n  allowSameOrigin: boolean;\n  allowRelativeUrls: boolean;\n}\n\n/**\n * デフォルトのセキュリティ設定\n */\nexport const defaultOptions: SecurityConfig = {\n  allowSameOrigin: true,\n  allowRelativeUrls: true,\n  allowedDomains: [],\n};\n\n/**\n * URLが安全かどうかを検証する関数\n */\nexport function validateUrl(url: string, config: SecurityConfig = defaultOptions): boolean {\n  try {\n    const urlObj = new URL(url, window.location.href);\n\n    // 相対URLの許可チェック\n    if (urlObj.protocol === 'file:' && !config.allowRelativeUrls) {\n      return false;\n    }\n\n    // 同一オリジンの許可チェック\n    if (urlObj.origin === window.location.origin) {\n      return config.allowSameOrigin;\n    }\n\n    // 許可されたドメインのチェック\n    if (config.allowedDomains && config.allowedDomains.length > 0) {\n      return config.allowedDomains.some((domain) => {\n        // ワイルドカードサポート（例: *.example.com）\n        if (domain.startsWith('*.')) {\n          const domainSuffix = domain.slice(2);\n          return urlObj.hostname.endsWith(domainSuffix);\n        }\n        return urlObj.hostname === domain;\n      });\n    }\n\n    // 許可されたドメインが設定されていない場合は拒否\n    return false;\n  } catch (error) {\n    console.error('Invalid URL:', error);\n    return false;\n  }\n}\n\n/**\n * セキュリティ設定を管理するクラス\n */\nexport default class SecurityManager {\n  #config: SecurityConfig = { ...defaultOptions };\n\n  constructor(options: Partial<SecurityConfig> = {}) {\n    this.#config = { ...defaultOptions, ...options };\n  }\n\n  /**\n   * セキュリティ設定を更新\n   */\n  setConfig(newConfig: Partial<SecurityConfig>) {\n    this.#config = { ...this.#config, ...newConfig };\n  }\n\n  /**\n   * 現在の設定を取得\n   */\n  public get config(): SecurityConfig {\n    return this.#config;\n  }\n\n  /**\n   * URLを検証\n   */\n  public validateUrl(url: string): boolean {\n    return validateUrl(url, this.#config);\n  }\n}\n"],"mappings":";AAYO,IAAM,iBAAiC;AAAA,EAC5C,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,gBAAgB,CAAC;AACnB;AAKO,SAAS,YAAY,KAAa,SAAyB,gBAAyB;AACzF,MAAI;AACF,UAAM,SAAS,IAAI,IAAI,KAAK,OAAO,SAAS,IAAI;AAGhD,QAAI,OAAO,aAAa,WAAW,CAAC,OAAO,mBAAmB;AAC5D,aAAO;AAAA,IACT;AAGA,QAAI,OAAO,WAAW,OAAO,SAAS,QAAQ;AAC5C,aAAO,OAAO;AAAA,IAChB;AAGA,QAAI,OAAO,kBAAkB,OAAO,eAAe,SAAS,GAAG;AAC7D,aAAO,OAAO,eAAe,KAAK,CAAC,WAAW;AAE5C,YAAI,OAAO,WAAW,IAAI,GAAG;AAC3B,gBAAM,eAAe,OAAO,MAAM,CAAC;AACnC,iBAAO,OAAO,SAAS,SAAS,YAAY;AAAA,QAC9C;AACA,eAAO,OAAO,aAAa;AAAA,MAC7B,CAAC;AAAA,IACH;AAGA,WAAO;AAAA,EACT,SAAS,OAAO;AACd,YAAQ,MAAM,gBAAgB,KAAK;AACnC,WAAO;AAAA,EACT;AACF;AAKA,IAAqB,kBAArB,MAAqC;AAAA,EACnC,UAA0B,EAAE,GAAG,eAAe;AAAA,EAE9C,YAAY,UAAmC,CAAC,GAAG;AACjD,SAAK,UAAU,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,WAAoC;AAC5C,SAAK,UAAU,EAAE,GAAG,KAAK,SAAS,GAAG,UAAU;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA,EAKA,IAAW,SAAyB;AAClC,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKO,YAAY,KAAsB;AACvC,WAAO,YAAY,KAAK,KAAK,OAAO;AAAA,EACtC;AACF;","names":[]}

package/dist/chunk-SOMGEYKM.mjs

@@ -0,0 +1,62 @@
+// src/store/content-fetcher.ts
+function patchFormActions(html, baseUrl) {
+  try {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    doc.querySelectorAll("form").forEach((form) => {
+      form.setAttribute("action", baseUrl);
+    });
+    return doc.body.innerHTML;
+  } catch (error) {
+    console.error("Failed to patch form actions:", error);
+    return html;
+  }
+}
+async function fetchContentFromUrl(url) {
+  try {
+    const response = await fetch(url, {
+      headers: {
+        "Content-Type": "text/html",
+        "X-Requested-With": "XMLHttpRequest",
+        "X-Csrf-Token": window.csrfToken || ""
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const contentType = response.headers.get("content-type");
+    if (contentType && !contentType.includes("text/html")) {
+      throw new Error(`Invalid content type: ${contentType}. Expected text/html`);
+    }
+    const html = await response.text();
+    return patchFormActions(html, url);
+  } catch (error) {
+    console.error("Failed to fetch content from URL:", error);
+    throw error;
+  }
+}
+function getContentFromSelector(selector) {
+  try {
+    const template = document.querySelector(selector);
+    if (!template) {
+      throw new Error(`Element not found: ${selector}`);
+    }
+    if (!(template instanceof HTMLTemplateElement)) {
+      throw new Error(`Element is not a template: ${selector}`);
+    }
+    const clone = template.content.cloneNode(true);
+    const div = document.createElement("div");
+    div.appendChild(clone);
+    return div.innerHTML;
+  } catch (error) {
+    console.error("Failed to get content from selector:", error);
+    throw error;
+  }
+}
+
+export {
+  patchFormActions,
+  fetchContentFromUrl,
+  getContentFromSelector
+};
+//# sourceMappingURL=chunk-SOMGEYKM.mjs.map

package/dist/chunk-SOMGEYKM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/store/content-fetcher.ts"],"sourcesContent":["/**\n * フォームアクション補完機能\n */\nexport function patchFormActions(html: string, baseUrl: string): string {\n  try {\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(html, 'text/html');\n\n    // formのactionを補完\n    doc.querySelectorAll('form').forEach((form) => {\n      form.setAttribute('action', baseUrl);\n    });\n\n    return doc.body.innerHTML;\n  } catch (error) {\n    console.error('Failed to patch form actions:', error);\n    return html;\n  }\n}\n\n/**\n * URL からのコンテンツ取得\n */\nexport async function fetchContentFromUrl(url: string): Promise<string> {\n  try {\n    const response = await fetch(url, {\n      headers: {\n        'Content-Type': 'text/html',\n        'X-Requested-With': 'XMLHttpRequest',\n        'X-Csrf-Token': window.csrfToken || '',\n      },\n    });\n\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n\n    // Content-Typeの検証\n    const contentType = response.headers.get('content-type');\n    if (contentType && !contentType.includes('text/html')) {\n      throw new Error(`Invalid content type: ${contentType}. Expected text/html`);\n    }\n\n    const html = await response.text();\n    // フォームアクションの補完\n    return patchFormActions(html, url);\n  } catch (error) {\n    console.error('Failed to fetch content from URL:', error);\n    throw error;\n  }\n}\n\n/**\n * セレクタからのコンテンツ取得\n */\nexport function getContentFromSelector(selector: string): string {\n  try {\n    const template = document.querySelector(selector);\n\n    if (!template) {\n      throw new Error(`Element not found: ${selector}`);\n    }\n\n    if (!(template instanceof HTMLTemplateElement)) {\n      throw new Error(`Element is not a template: ${selector}`);\n    }\n\n    const clone = template.content.cloneNode(true) as DocumentFragment;\n    const div = document.createElement('div');\n    div.appendChild(clone);\n    return div.innerHTML;\n  } catch (error) {\n    console.error('Failed to get content from selector:', error);\n    throw error;\n  }\n}\n"],"mappings":";AAGO,SAAS,iBAAiB,MAAc,SAAyB;AACtE,MAAI;AACF,UAAM,SAAS,IAAI,UAAU;AAC7B,UAAM,MAAM,OAAO,gBAAgB,MAAM,WAAW;AAGpD,QAAI,iBAAiB,MAAM,EAAE,QAAQ,CAAC,SAAS;AAC7C,WAAK,aAAa,UAAU,OAAO;AAAA,IACrC,CAAC;AAED,WAAO,IAAI,KAAK;AAAA,EAClB,SAAS,OAAO;AACd,YAAQ,MAAM,iCAAiC,KAAK;AACpD,WAAO;AAAA,EACT;AACF;AAKA,eAAsB,oBAAoB,KAA8B;AACtE,MAAI;AACF,UAAM,WAAW,MAAM,MAAM,KAAK;AAAA,MAChC,SAAS;AAAA,QACP,gBAAgB;AAAA,QAChB,oBAAoB;AAAA,QACpB,gBAAgB,OAAO,aAAa;AAAA,MACtC;AAAA,IACF,CAAC;AAED,QAAI,CAAC,SAAS,IAAI;AAChB,YAAM,IAAI,MAAM,uBAAuB,SAAS,MAAM,EAAE;AAAA,IAC1D;AAGA,UAAM,cAAc,SAAS,QAAQ,IAAI,cAAc;AACvD,QAAI,eAAe,CAAC,YAAY,SAAS,WAAW,GAAG;AACrD,YAAM,IAAI,MAAM,yBAAyB,WAAW,sBAAsB;AAAA,IAC5E;AAEA,UAAM,OAAO,MAAM,SAAS,KAAK;AAEjC,WAAO,iBAAiB,MAAM,GAAG;AAAA,EACnC,SAAS,OAAO;AACd,YAAQ,MAAM,qCAAqC,KAAK;AACxD,UAAM;AAAA,EACR;AACF;AAKO,SAAS,uBAAuB,UAA0B;AAC/D,MAAI;AACF,UAAM,WAAW,SAAS,cAAc,QAAQ;AAEhD,QAAI,CAAC,UAAU;AACb,YAAM,IAAI,MAAM,sBAAsB,QAAQ,EAAE;AAAA,IAClD;AAEA,QAAI,EAAE,oBAAoB,sBAAsB;AAC9C,YAAM,IAAI,MAAM,8BAA8B,QAAQ,EAAE;AAAA,IAC1D;AAEA,UAAM,QAAQ,SAAS,QAAQ,UAAU,IAAI;AAC7C,UAAM,MAAM,SAAS,cAAc,KAAK;AACxC,QAAI,YAAY,KAAK;AACrB,WAAO,IAAI;AAAA,EACb,SAAS,OAAO;AACd,YAAQ,MAAM,wCAAwC,KAAK;AAC3D,UAAM;AAAA,EACR;AACF;","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ModalController } from './modal-controller.js';
+export type { ModalControllerProps } from './modal-controller.js';
+export { default as ModalManager } from './store/modal-manager.js';
+export type { ModalManagerOptions } from './store/modal-manager.js';

package/dist/index.mjs

@@ -0,0 +1,404 @@
+import {
+  fetchContentFromUrl,
+  getContentFromSelector,
+  patchFormActions
+} from "./chunk-SOMGEYKM.mjs";
+import {
+  SecurityManager
+} from "./chunk-M67WUT4A.mjs";
+
+// src/modal-controller.tsx
+import { useCallback, useEffect, useRef as useRef2 } from "react";
+import { emit } from "@ablogcms/events";
+import useUpdateEffect from "@ablogcms/react-hooks/use-update-effect";
+import { datasetToProps } from "@ablogcms/utils/react";
+import Modal, { ModalBody, ModalFooter, ModalHeader } from "@ablogcms/components/modal";
+
+// src/store/use-modal-manager.ts
+import { useRef, useState, useSyncExternalStore } from "react";
+
+// src/store/modal-manager.tsx
+import { pending } from "@ablogcms/pending";
+var defaultOptions = {
+  header: '[data-modal-section="header"]',
+  body: '[data-modal-section="body"]',
+  footer: '[data-modal-section="footer"]',
+  security: {}
+};
+var ModalManager = class {
+  listeners = /* @__PURE__ */ new Set();
+  state = {
+    content: {
+      raw: ""
+    },
+    modalProps: {
+      isOpen: false
+    },
+    modalHeaderProps: {},
+    modalBodyProps: {},
+    modalFooterProps: {}
+  };
+  #container = null;
+  config = defaultOptions;
+  securityManager;
+  constructor(options) {
+    this.config = { ...defaultOptions, ...options.current };
+    this.securityManager = new SecurityManager(this.config.security);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.open = this.open.bind(this);
+    this.close = this.close.bind(this);
+    this.reset = this.reset.bind(this);
+    this.init();
+  }
+  subscribe = (callback) => {
+    this.listeners.add(callback);
+    return () => this.listeners.delete(callback);
+  };
+  getSnapshot = () => this.state;
+  setState(state) {
+    if (typeof state === "function") {
+      this.state = state(this.state);
+    } else {
+      this.state = state;
+    }
+    this.emit();
+  }
+  get content() {
+    return this.state.content;
+  }
+  get modalProps() {
+    return this.state.modalProps;
+  }
+  get modalHeaderProps() {
+    return this.state.modalHeaderProps;
+  }
+  get modalBodyProps() {
+    return this.state.modalBodyProps;
+  }
+  get modalFooterProps() {
+    return this.state.modalFooterProps;
+  }
+  get container() {
+    return this.#container;
+  }
+  init() {
+    const container = document.getElementById("acms-modal-manager-container");
+    if (container !== null) {
+      this.#container = container;
+    } else {
+      this.#container = document.createElement("div");
+      this.#container.id = "acms-modal-manager-container";
+      document.body.appendChild(this.#container);
+    }
+    this.registerEventListeners();
+  }
+  async open(options = {}) {
+    const removeSplash = pending.splash(ACMS.i18n("splash.default"));
+    try {
+      const element = await this.fetchContent(options);
+      const content = this.parseContent(element);
+      this.setState({
+        content,
+        modalProps: {
+          ...options.modalProps,
+          isOpen: true
+        },
+        modalHeaderProps: {
+          ...options.modalHeaderProps
+        },
+        modalBodyProps: {
+          ...options.modalBodyProps
+        },
+        modalFooterProps: {
+          ...options.modalFooterProps
+        }
+      });
+    } catch (error) {
+      console.error("Failed to open modal:", error);
+      throw error;
+    } finally {
+      removeSplash();
+    }
+  }
+  close() {
+    this.setState((prev) => ({
+      ...prev,
+      modalProps: {
+        ...prev.modalProps,
+        isOpen: false
+      }
+    }));
+  }
+  reset() {
+    this.setState({
+      content: {
+        raw: ""
+      },
+      modalProps: {
+        isOpen: false
+      },
+      modalHeaderProps: {},
+      modalBodyProps: {},
+      modalFooterProps: {}
+    });
+  }
+  emit = () => {
+    this.listeners.forEach((cb) => cb());
+  };
+  // クリーンアップ用メソッド
+  destroy() {
+    this.unregisterEventListeners();
+    if (this.#container) {
+      this.#container.remove();
+      this.#container = null;
+    }
+  }
+  async handleSubmit(event) {
+    if (event.defaultPrevented) {
+      return;
+    }
+    event.preventDefault();
+    const form = event.target;
+    const { submitter } = event;
+    const formData = new FormData(form, submitter);
+    let isSuccess = false;
+    const removeSplash = pending.splash(ACMS.i18n("splash.save"));
+    try {
+      const response = await fetch(form.action, {
+        method: form.method,
+        body: formData,
+        headers: {
+          "X-Requested-With": "XMLHttpRequest",
+          "X-Csrf-Token": window.csrfToken || ""
+        }
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const html = await response.text();
+      isSuccess = this.checkSuccessFromContent(html);
+      const content = this.parseContent(patchFormActions(html, form.action));
+      this.setState((prev) => ({
+        ...prev,
+        content
+      }));
+    } catch (error) {
+      console.error("Failed to submit form:", error);
+    } finally {
+      removeSplash();
+      if (isSuccess) {
+        setTimeout(() => {
+          if (confirm(ACMS.i18n("modal.reload"))) {
+            window.location.reload();
+          }
+        }, 500);
+      }
+    }
+  }
+  checkSuccessFromContent(html) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    const successSelectors = [
+      ".acms-admin-alert-info",
+      // 成功アラート
+      ".acms-admin-alert-success",
+      // 成功アラート
+      '[data-status="success"]',
+      // 成功ステータス
+      ".success-message"
+      // 成功メッセージ
+    ];
+    const errorSelectors = [
+      ".acms-admin-alert-danger",
+      // エラーアラート
+      ".acms-admin-alert-error",
+      // エラーアラート
+      '[data-status="error"]',
+      // エラーステータス
+      ".error-message"
+      // エラーメッセージ
+    ];
+    for (const selector of errorSelectors) {
+      if (doc.querySelector(selector)) {
+        return false;
+      }
+    }
+    for (const selector of successSelectors) {
+      if (doc.querySelector(selector)) {
+        return true;
+      }
+    }
+    return true;
+  }
+  registerEventListeners() {
+    this.#container?.addEventListener("submit", this.handleSubmit);
+  }
+  unregisterEventListeners() {
+    this.#container?.removeEventListener("submit", this.handleSubmit);
+  }
+  parseContent(htmlContent) {
+    const { header, body, footer } = this.config;
+    const result = {
+      raw: htmlContent
+    };
+    if (!header && !body && !footer) {
+      result.body = htmlContent;
+      return result;
+    }
+    const div = document.createElement("div");
+    div.innerHTML = htmlContent;
+    if (header) {
+      const headerElement = div.querySelector(header);
+      if (headerElement) {
+        result.header = headerElement.innerHTML;
+      }
+    }
+    if (body) {
+      const bodyElement = div.querySelector(body);
+      if (bodyElement) {
+        result.body = bodyElement.innerHTML;
+      }
+    }
+    if (footer) {
+      const footerElement = div.querySelector(footer);
+      if (footerElement) {
+        result.footer = footerElement.innerHTML;
+      }
+    }
+    if (!result.header && !result.body && !result.footer) {
+      result.body = htmlContent;
+    }
+    return result;
+  }
+  fetchContent(options) {
+    const { selector, url } = options;
+    if (selector) {
+      return getContentFromSelector(selector);
+    }
+    if (url) {
+      if (!this.securityManager.validateUrl(url)) {
+        throw new Error(`URL is not allowed: ${url}`);
+      }
+      return fetchContentFromUrl(url);
+    }
+    throw new Error("No selector or URL provided");
+  }
+};
+var modal_manager_default = ModalManager;
+
+// src/store/use-modal-manager.ts
+function useModalManager(options = {}) {
+  const mostRecentOptions = useRef(options);
+  mostRecentOptions.current = options;
+  const [manager] = useState(() => new modal_manager_default(mostRecentOptions));
+  const state = useSyncExternalStore(
+    manager.subscribe,
+    () => manager.getSnapshot(),
+    () => manager.getSnapshot()
+  );
+  ACMS.Library.modal = manager;
+  return {
+    state,
+    manager
+  };
+}
+
+// src/modal-controller.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function parseProps(element, type) {
+  const props = datasetToProps(element.dataset, type);
+  return props;
+}
+function ModalController({ ...props }) {
+  const { manager, state } = useModalManager(props);
+  const openStateRef = useRef2(state.modalProps.isOpen);
+  const hydrateModalContent = useCallback(() => {
+    if (manager.container) {
+      ACMS.Dispatch(manager.container);
+      void emit("dialog.open.after", { element: manager.container });
+      ACMS.dispatchEvent("acmsDialogOpened", manager.container, {
+        item: manager.container
+      });
+    }
+  }, [manager.container]);
+  const handleAfterOpen = useCallback(() => {
+    openStateRef.current = true;
+    hydrateModalContent();
+  }, [hydrateModalContent]);
+  const handleAfterClose = useCallback(() => {
+    openStateRef.current = false;
+    manager.reset();
+  }, [manager]);
+  useEffect(() => {
+    const handleOpen = (event) => {
+      if (!(event.target instanceof HTMLElement)) {
+        return;
+      }
+      const element = event.target.closest(ModalController.openTrigger);
+      if (!element) {
+        return;
+      }
+      const { target: selector, url } = element.dataset;
+      const modalProps = parseProps(element, "modal");
+      const modalHeaderProps = parseProps(element, "modal-header");
+      const modalBodyProps = parseProps(element, "modal-body");
+      const modalFooterProps = parseProps(element, "modal-footer");
+      manager.open({
+        selector,
+        url,
+        modalProps,
+        modalHeaderProps,
+        modalBodyProps,
+        modalFooterProps
+      });
+    };
+    const handleClose = (event) => {
+      if (!(event.target instanceof HTMLElement)) {
+        return;
+      }
+      const element = event.target.closest(ModalController.closeTrigger);
+      if (!element) {
+        return;
+      }
+      manager.close();
+    };
+    document.addEventListener("click", handleOpen);
+    document.addEventListener("click", handleClose);
+    return () => {
+      document.removeEventListener("click", handleOpen);
+      document.removeEventListener("click", handleClose);
+    };
+  }, [manager]);
+  useUpdateEffect(() => {
+    if (!openStateRef.current) {
+      return;
+    }
+    hydrateModalContent();
+  }, [state.content.raw]);
+  if (!manager.container) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      ...state.modalProps,
+      onClose: manager.close,
+      container: manager.container,
+      onAfterOpen: handleAfterOpen,
+      onAfterClose: handleAfterClose,
+      children: [
+        state.content.header && /* @__PURE__ */ jsx(ModalHeader, { ...state.modalHeaderProps, children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: state.content.header } }) }),
+        /* @__PURE__ */ jsx(ModalBody, { ...state.modalBodyProps, children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: state.content.body || state.content.raw } }) }),
+        state.content.footer && /* @__PURE__ */ jsx(ModalFooter, { ...state.modalFooterProps, children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: state.content.footer } }) })
+      ]
+    }
+  );
+}
+ModalController.openTrigger = ".js-acms-modal-open";
+ModalController.closeTrigger = ".js-acms-modal-close";
+var modal_controller_default = ModalController;
+export {
+  modal_controller_default as ModalController,
+  modal_manager_default as ModalManager
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modal-controller.tsx","../src/store/use-modal-manager.ts","../src/store/modal-manager.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { emit } from '@ablogcms/events';\nimport useUpdateEffect from '@ablogcms/react-hooks/use-update-effect';\nimport { datasetToProps } from '@ablogcms/utils/react';\nimport Modal, { ModalBody, ModalFooter, ModalHeader } from '@ablogcms/components/modal';\nimport useModalManager, { UseModalManagerOptions } from './store/use-modal-manager';\n\ntype ModalProps = React.ComponentProps<typeof Modal>;\ntype ModalHeaderProps = React.ComponentProps<typeof ModalHeader>;\ntype ModalBodyProps = React.ComponentProps<typeof ModalBody>;\ntype ModalFooterProps = React.ComponentProps<typeof ModalFooter>;\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface ModalControllerProps extends UseModalManagerOptions {}\n\n/**\n * data-modal-*属性を動的に取得する関数\n */\nfunction parseProps<T extends 'modal' | 'modal-header' | 'modal-body' | 'modal-footer'>(\n  element: HTMLElement,\n  type: T\n): Partial<\n  T extends 'modal'\n    ? ModalProps\n    : T extends 'modal-header'\n      ? ModalHeaderProps\n      : T extends 'modal-body'\n        ? ModalBodyProps\n        : ModalFooterProps\n> {\n  const props = datasetToProps(element.dataset, type);\n  return props as Partial<\n    T extends 'modal'\n      ? ModalProps\n      : T extends 'modal-header'\n        ? ModalHeaderProps\n        : T extends 'modal-body'\n          ? ModalBodyProps\n          : ModalFooterProps\n  >;\n}\n\nfunction ModalController({ ...props }: ModalControllerProps) {\n  const { manager, state } = useModalManager(props);\n  const openStateRef = useRef<boolean>(state.modalProps.isOpen);\n\n  const hydrateModalContent = useCallback(() => {\n    if (manager.container) {\n      ACMS.Dispatch(manager.container);\n      void emit('dialog.open.after', { element: manager.container });\n      ACMS.dispatchEvent('acmsDialogOpened', manager.container, {\n        item: manager.container,\n      });\n    }\n  }, [manager.container]);\n\n  const handleAfterOpen = useCallback(() => {\n    openStateRef.current = true;\n    hydrateModalContent();\n  }, [hydrateModalContent]);\n\n  const handleAfterClose = useCallback(() => {\n    openStateRef.current = false;\n    // 閉じるトランジション完了後に state をクリアする\n    manager.reset();\n  }, [manager]);\n\n  useEffect(() => {\n    const handleOpen = (event: Event) => {\n      if (!(event.target instanceof HTMLElement)) {\n        return;\n      }\n\n      const element = event.target.closest<HTMLElement>(ModalController.openTrigger);\n\n      if (!element) {\n        return;\n      }\n\n      const { target: selector, url } = element.dataset;\n\n      // Modal用 props とセレクタ情報を data-* から取得\n      const modalProps = parseProps(element, 'modal');\n      const modalHeaderProps = parseProps(element, 'modal-header');\n      const modalBodyProps = parseProps(element, 'modal-body');\n      const modalFooterProps = parseProps(element, 'modal-footer');\n\n      // ModalManagerでモーダルを開く\n      manager.open({\n        selector,\n        url,\n        modalProps,\n        modalHeaderProps,\n        modalBodyProps,\n        modalFooterProps,\n      });\n    };\n\n    const handleClose = (event: Event) => {\n      if (!(event.target instanceof HTMLElement)) {\n        return;\n      }\n\n      const element = event.target.closest<HTMLElement>(ModalController.closeTrigger);\n\n      if (!element) {\n        return;\n      }\n\n      manager.close();\n    };\n    document.addEventListener('click', handleOpen);\n    document.addEventListener('click', handleClose);\n\n    return () => {\n      document.removeEventListener('click', handleOpen);\n      document.removeEventListener('click', handleClose);\n    };\n  }, [manager]);\n\n  useUpdateEffect(() => {\n    if (!openStateRef.current) {\n      // モーダルが開いた初回はonAfterOpenでhydrateするためスキップ\n      return;\n    }\n\n    hydrateModalContent();\n    // コンテンツが変更されたら組み込みJSを実行\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.content.raw]);\n\n  if (!manager.container) {\n    return null;\n  }\n\n  return (\n    <Modal\n      {...state.modalProps}\n      onClose={manager.close}\n      container={manager.container}\n      onAfterOpen={handleAfterOpen}\n      onAfterClose={handleAfterClose}\n    >\n      {state.content.header && (\n        <ModalHeader {...state.modalHeaderProps}>\n          {}\n          <span dangerouslySetInnerHTML={{ __html: state.content.header }} />\n        </ModalHeader>\n      )}\n      <ModalBody {...state.modalBodyProps}>\n        {}\n        <div dangerouslySetInnerHTML={{ __html: state.content.body || state.content.raw }} />\n      </ModalBody>\n      {state.content.footer && (\n        <ModalFooter {...state.modalFooterProps}>\n          {}\n          <div dangerouslySetInnerHTML={{ __html: state.content.footer }} />\n        </ModalFooter>\n      )}\n    </Modal>\n  );\n}\n\nModalController.openTrigger = '.js-acms-modal-open';\nModalController.closeTrigger = '.js-acms-modal-close';\n\nexport default ModalController;\n","import { useRef, useState, useSyncExternalStore } from 'react';\nimport ModalManager, { ModalManagerOptions } from './modal-manager';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface UseModalManagerOptions extends Partial<ModalManagerOptions> {}\n\nexport default function useModalManager(options: UseModalManagerOptions = {}) {\n  const mostRecentOptions = useRef(options);\n\n  mostRecentOptions.current = options;\n  const [manager] = useState(() => new ModalManager(mostRecentOptions));\n\n  const state = useSyncExternalStore(\n    manager.subscribe,\n    () => manager.getSnapshot(),\n    () => manager.getSnapshot()\n  );\n\n  ACMS.Library.modal = manager;\n\n  return {\n    state,\n    manager,\n  };\n}\n","import { pending } from '@ablogcms/pending';\nimport type Modal from '@ablogcms/components/modal';\nimport type { ModalBody, ModalFooter, ModalHeader } from '@ablogcms/components/modal';\nimport { fetchContentFromUrl, getContentFromSelector, patchFormActions } from './content-fetcher';\nimport SecurityManager, { SecurityConfig } from './security-manager';\n\ntype ModalProps = Omit<React.ComponentProps<typeof Modal>, 'onClose'>;\ntype ModalHeaderProps = Omit<React.ComponentProps<typeof ModalHeader>, 'children'>;\ntype ModalBodyProps = Omit<React.ComponentProps<typeof ModalBody>, 'children'>;\ntype ModalFooterProps = Omit<React.ComponentProps<typeof ModalFooter>, 'children'>;\n\nexport interface ModalManagerState {\n  content: Content;\n  modalProps: ModalProps;\n  modalHeaderProps: ModalHeaderProps;\n  modalBodyProps: ModalBodyProps;\n  modalFooterProps: ModalFooterProps;\n}\n\nexport interface ModalManagerOptions {\n  header: string;\n  body: string;\n  footer: string;\n  security: Partial<SecurityConfig>;\n}\n\ninterface Content {\n  header?: string;\n  body?: string;\n  footer?: string;\n  raw: string;\n}\n\ninterface ModalManagerOpenOptions {\n  selector?: string;\n  url?: string;\n  modalProps?: Partial<ModalProps>;\n  modalHeaderProps?: Partial<ModalHeaderProps>;\n  modalBodyProps?: Partial<ModalBodyProps>;\n  modalFooterProps?: Partial<ModalFooterProps>;\n}\n\nconst defaultOptions: ModalManagerOptions = {\n  header: '[data-modal-section=\"header\"]',\n  body: '[data-modal-section=\"body\"]',\n  footer: '[data-modal-section=\"footer\"]',\n  security: {},\n};\n\nclass ModalManager {\n  private listeners = new Set<() => void>();\n\n  private state: ModalManagerState = {\n    content: {\n      raw: '',\n    },\n    modalProps: {\n      isOpen: false,\n    },\n    modalHeaderProps: {},\n    modalBodyProps: {},\n    modalFooterProps: {},\n  };\n\n  #container: HTMLElement | null = null;\n\n  private config: ModalManagerOptions = defaultOptions;\n\n  private securityManager: SecurityManager;\n\n  constructor(options: React.MutableRefObject<Partial<ModalManagerOptions>>) {\n    this.config = { ...defaultOptions, ...options.current };\n    this.securityManager = new SecurityManager(this.config.security);\n    this.handleSubmit = this.handleSubmit.bind(this);\n    this.open = this.open.bind(this);\n    this.close = this.close.bind(this);\n    this.reset = this.reset.bind(this);\n    this.init();\n  }\n\n  subscribe = (callback: () => void) => {\n    this.listeners.add(callback);\n    return () => this.listeners.delete(callback);\n  };\n\n  getSnapshot = () => this.state;\n\n  public setState(state: ModalManagerState | ((state: ModalManagerState) => ModalManagerState)) {\n    if (typeof state === 'function') {\n      this.state = state(this.state);\n    } else {\n      this.state = state;\n    }\n    this.emit();\n  }\n\n  public get content() {\n    return this.state.content;\n  }\n\n  public get modalProps() {\n    return this.state.modalProps;\n  }\n\n  public get modalHeaderProps() {\n    return this.state.modalHeaderProps;\n  }\n\n  public get modalBodyProps() {\n    return this.state.modalBodyProps;\n  }\n\n  public get modalFooterProps() {\n    return this.state.modalFooterProps;\n  }\n\n  public get container() {\n    return this.#container;\n  }\n\n  private init() {\n    // モーダル用のコンテナ要素を作成\n    const container = document.getElementById('acms-modal-manager-container');\n    if (container !== null) {\n      this.#container = container;\n    } else {\n      this.#container = document.createElement('div');\n      this.#container.id = 'acms-modal-manager-container';\n      document.body.appendChild(this.#container);\n    }\n    this.registerEventListeners();\n  }\n\n  async open(options: ModalManagerOpenOptions = {}) {\n    const removeSplash = pending.splash(ACMS.i18n('splash.default'));\n    try {\n      // コンテンツ取得ユーティリティを使用\n      const element = await this.fetchContent(options);\n\n      // コンテンツをパース\n      const content = this.parseContent(element);\n\n      // 状態を更新\n      this.setState({\n        content,\n        modalProps: {\n          ...options.modalProps,\n          isOpen: true,\n        },\n        modalHeaderProps: {\n          ...options.modalHeaderProps,\n        },\n        modalBodyProps: {\n          ...options.modalBodyProps,\n        },\n        modalFooterProps: {\n          ...options.modalFooterProps,\n        },\n      });\n    } catch (error) {\n      console.error('Failed to open modal:', error);\n      // エラーを再スローして呼び出し元でハンドリングできるようにする\n      throw error;\n    } finally {\n      removeSplash();\n    }\n  }\n\n  close() {\n    // 閉じるトランジション中は size などの modalProps を保持する必要があるため、\n    // isOpen のみを切り替える。完全な初期化は reset() を onAfterClose 経由で呼ぶ\n    this.setState((prev) => ({\n      ...prev,\n      modalProps: {\n        ...prev.modalProps,\n        isOpen: false,\n      },\n    }));\n  }\n\n  reset() {\n    // 閉じるトランジション完了後に呼ばれることを想定し、コンテンツと props をクリアする\n    this.setState({\n      content: {\n        raw: '',\n      },\n      modalProps: {\n        isOpen: false,\n      },\n      modalHeaderProps: {},\n      modalBodyProps: {},\n      modalFooterProps: {},\n    });\n  }\n\n  private emit = () => {\n    this.listeners.forEach((cb) => cb());\n  };\n\n  // クリーンアップ用メソッド\n  destroy() {\n    this.unregisterEventListeners();\n    if (this.#container) {\n      this.#container.remove();\n      this.#container = null;\n    }\n  }\n\n  private async handleSubmit(event: SubmitEvent) {\n    if (event.defaultPrevented) {\n      // バリデーターがフォームの送信をキャンセルしている場合は、何もしない\n      return;\n    }\n    event.preventDefault();\n    const form = event.target as HTMLFormElement;\n    const { submitter } = event;\n    const formData = new FormData(form, submitter);\n\n    let isSuccess = false;\n\n    const removeSplash = pending.splash(ACMS.i18n('splash.save'));\n    try {\n      const response = await fetch(form.action, {\n        method: form.method,\n        body: formData,\n        headers: {\n          'X-Requested-With': 'XMLHttpRequest',\n          'X-Csrf-Token': window.csrfToken || '',\n        },\n      });\n      if (!response.ok) {\n        throw new Error(`HTTP error! status: ${response.status}`);\n      }\n      const html = await response.text();\n      isSuccess = this.checkSuccessFromContent(html);\n      const content = this.parseContent(patchFormActions(html, form.action));\n      this.setState((prev) => ({\n        ...prev,\n        content,\n      }));\n    } catch (error) {\n      console.error('Failed to submit form:', error);\n    } finally {\n      removeSplash();\n      if (isSuccess) {\n        setTimeout(() => {\n          // 成功メッセージの表示が完了してから確認ダイアログを表示\n          if (confirm(ACMS.i18n('modal.reload'))) {\n            window.location.reload();\n          }\n        }, 500);\n      }\n    }\n  }\n\n  private checkSuccessFromContent(html: string): boolean {\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(html, 'text/html');\n\n    // 成功メッセージのセレクタを確認\n    const successSelectors = [\n      '.acms-admin-alert-info', // 成功アラート\n      '.acms-admin-alert-success', // 成功アラート\n      '[data-status=\"success\"]', // 成功ステータス\n      '.success-message', // 成功メッセージ\n    ];\n\n    // エラーメッセージのセレクタを確認\n    const errorSelectors = [\n      '.acms-admin-alert-danger', // エラーアラート\n      '.acms-admin-alert-error', // エラーアラート\n      '[data-status=\"error\"]', // エラーステータス\n      '.error-message', // エラーメッセージ\n    ];\n\n    // エラーメッセージが存在する場合は失敗\n    for (const selector of errorSelectors) {\n      if (doc.querySelector(selector)) {\n        return false;\n      }\n    }\n\n    // 成功メッセージが存在する場合は成功\n    for (const selector of successSelectors) {\n      if (doc.querySelector(selector)) {\n        return true;\n      }\n    }\n\n    // デフォルトは成功とみなす（エラーがない場合）\n    return true;\n  }\n\n  private registerEventListeners() {\n    this.#container?.addEventListener('submit', this.handleSubmit);\n  }\n\n  private unregisterEventListeners() {\n    this.#container?.removeEventListener('submit', this.handleSubmit);\n  }\n\n  private parseContent(htmlContent: string) {\n    const { header, body, footer } = this.config;\n    const result: Content = {\n      raw: htmlContent,\n    };\n\n    if (!header && !body && !footer) {\n      // セレクタが指定されていない場合は、全体をボディとして扱う\n      result.body = htmlContent;\n      return result;\n    }\n\n    // 一時的なDOM要素を作成してHTMLを解析\n    const div = document.createElement('div');\n    div.innerHTML = htmlContent;\n\n    // ヘッダーセクションの抽出\n    if (header) {\n      const headerElement = div.querySelector(header);\n      if (headerElement) {\n        result.header = headerElement.innerHTML;\n      }\n    }\n\n    // ボディセクションの抽出\n    if (body) {\n      const bodyElement = div.querySelector(body);\n      if (bodyElement) {\n        result.body = bodyElement.innerHTML;\n      }\n    }\n\n    // フッターセクションの抽出\n    if (footer) {\n      const footerElement = div.querySelector(footer);\n      if (footerElement) {\n        result.footer = footerElement.innerHTML;\n      }\n    }\n\n    // セレクタが指定されていない場合は、対応するセクションに全体のコンテンツを設定\n    if (!result.header && !result.body && !result.footer) {\n      result.body = htmlContent;\n    }\n\n    return result;\n  }\n\n  private fetchContent(options: ModalManagerOpenOptions) {\n    const { selector, url } = options;\n\n    if (selector) {\n      return getContentFromSelector(selector);\n    }\n\n    if (url) {\n      if (!this.securityManager.validateUrl(url)) {\n        throw new Error(`URL is not allowed: ${url}`);\n      }\n      return fetchContentFromUrl(url);\n    }\n\n    throw new Error('No selector or URL provided');\n  }\n}\n\nexport default ModalManager;\n"],"mappings":"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","names":["useRef","useRef"]}

package/dist/modal-controller.d.ts

@@ -0,0 +1,9 @@
+import { UseModalManagerOptions } from './store/use-modal-manager.js';
+export interface ModalControllerProps extends UseModalManagerOptions {
+}
+declare function ModalController({ ...props }: ModalControllerProps): import("react").JSX.Element | null;
+declare namespace ModalController {
+    var openTrigger: string;
+    var closeTrigger: string;
+}
+export default ModalController;

package/dist/store/content-fetcher.d.ts

@@ -0,0 +1,12 @@
+/**
+ * フォームアクション補完機能
+ */
+export declare function patchFormActions(html: string, baseUrl: string): string;
+/**
+ * URL からのコンテンツ取得
+ */
+export declare function fetchContentFromUrl(url: string): Promise<string>;
+/**
+ * セレクタからのコンテンツ取得
+ */
+export declare function getContentFromSelector(selector: string): string;

package/dist/store/content-fetcher.mjs

@@ -0,0 +1,11 @@
+import {
+  fetchContentFromUrl,
+  getContentFromSelector,
+  patchFormActions
+} from "../chunk-SOMGEYKM.mjs";
+export {
+  fetchContentFromUrl,
+  getContentFromSelector,
+  patchFormActions
+};
+//# sourceMappingURL=content-fetcher.mjs.map

package/dist/store/content-fetcher.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/store/modal-manager.d.ts

@@ -0,0 +1,64 @@
+import type Modal from '@ablogcms/components/modal';
+import type { ModalBody, ModalFooter, ModalHeader } from '@ablogcms/components/modal';
+import { SecurityConfig } from './security-manager.js';
+type ModalProps = Omit<React.ComponentProps<typeof Modal>, 'onClose'>;
+type ModalHeaderProps = Omit<React.ComponentProps<typeof ModalHeader>, 'children'>;
+type ModalBodyProps = Omit<React.ComponentProps<typeof ModalBody>, 'children'>;
+type ModalFooterProps = Omit<React.ComponentProps<typeof ModalFooter>, 'children'>;
+export interface ModalManagerState {
+    content: Content;
+    modalProps: ModalProps;
+    modalHeaderProps: ModalHeaderProps;
+    modalBodyProps: ModalBodyProps;
+    modalFooterProps: ModalFooterProps;
+}
+export interface ModalManagerOptions {
+    header: string;
+    body: string;
+    footer: string;
+    security: Partial<SecurityConfig>;
+}
+interface Content {
+    header?: string;
+    body?: string;
+    footer?: string;
+    raw: string;
+}
+interface ModalManagerOpenOptions {
+    selector?: string;
+    url?: string;
+    modalProps?: Partial<ModalProps>;
+    modalHeaderProps?: Partial<ModalHeaderProps>;
+    modalBodyProps?: Partial<ModalBodyProps>;
+    modalFooterProps?: Partial<ModalFooterProps>;
+}
+declare class ModalManager {
+    #private;
+    private listeners;
+    private state;
+    private config;
+    private securityManager;
+    constructor(options: React.MutableRefObject<Partial<ModalManagerOptions>>);
+    subscribe: (callback: () => void) => () => boolean;
+    getSnapshot: () => ModalManagerState;
+    setState(state: ModalManagerState | ((state: ModalManagerState) => ModalManagerState)): void;
+    get content(): Content;
+    get modalProps(): ModalProps;
+    get modalHeaderProps(): ModalHeaderProps;
+    get modalBodyProps(): ModalBodyProps;
+    get modalFooterProps(): ModalFooterProps;
+    get container(): HTMLElement | null;
+    private init;
+    open(options?: ModalManagerOpenOptions): Promise<void>;
+    close(): void;
+    reset(): void;
+    private emit;
+    destroy(): void;
+    private handleSubmit;
+    private checkSuccessFromContent;
+    private registerEventListeners;
+    private unregisterEventListeners;
+    private parseContent;
+    private fetchContent;
+}
+export default ModalManager;

package/dist/store/security-manager.d.ts

@@ -0,0 +1,35 @@
+/**
+ * URL検証の設定
+ */
+export interface SecurityConfig {
+    allowedDomains?: string[];
+    allowSameOrigin: boolean;
+    allowRelativeUrls: boolean;
+}
+/**
+ * デフォルトのセキュリティ設定
+ */
+export declare const defaultOptions: SecurityConfig;
+/**
+ * URLが安全かどうかを検証する関数
+ */
+export declare function validateUrl(url: string, config?: SecurityConfig): boolean;
+/**
+ * セキュリティ設定を管理するクラス
+ */
+export default class SecurityManager {
+    #private;
+    constructor(options?: Partial<SecurityConfig>);
+    /**
+     * セキュリティ設定を更新
+     */
+    setConfig(newConfig: Partial<SecurityConfig>): void;
+    /**
+     * 現在の設定を取得
+     */
+    get config(): SecurityConfig;
+    /**
+     * URLを検証
+     */
+    validateUrl(url: string): boolean;
+}

package/dist/store/security-manager.mjs

@@ -0,0 +1,11 @@
+import {
+  SecurityManager,
+  defaultOptions,
+  validateUrl
+} from "../chunk-M67WUT4A.mjs";
+export {
+  SecurityManager as default,
+  defaultOptions,
+  validateUrl
+};
+//# sourceMappingURL=security-manager.mjs.map

package/dist/store/security-manager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/store/use-modal-manager.d.ts

@@ -0,0 +1,7 @@
+import ModalManager, { ModalManagerOptions } from './modal-manager.js';
+export interface UseModalManagerOptions extends Partial<ModalManagerOptions> {
+}
+export default function useModalManager(options?: UseModalManagerOptions): {
+    state: import("./modal-manager.js").ModalManagerState;
+    manager: ModalManager;
+};

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@ablogcms/modal",
+  "version": "3.2.28-beta.0",
+  "type": "module",
+  "description": "data-modal-* 属性トリガー監視とモーダル制御",
+  "license": "MIT",
+  "homepage": "https://www.a-blogcms.jp",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org:appleple/ablogcms.git",
+    "directory": "packages/frontend/modal"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@ablogcms/components": "3.2.28-beta.0",
+    "@ablogcms/react-hooks": "3.2.28-beta.0",
+    "@ablogcms/utils": "3.2.28-beta.0",
+    "@ablogcms/pending": "3.2.28-beta.0",
+    "@ablogcms/types": "3.2.28-beta.0",
+    "@ablogcms/events": "3.2.28-beta.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.2",
+    "vitest": "^4.1.9"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "@types/react": "^19.2.17"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    },
+    "./acms": {
+      "types": "./dist/acms.d.ts",
+      "import": "./dist/acms.mjs",
+      "default": "./dist/acms.mjs"
+    },
+    "./content-fetcher": {
+      "types": "./dist/store/content-fetcher.d.ts",
+      "import": "./dist/store/content-fetcher.mjs",
+      "default": "./dist/store/content-fetcher.mjs"
+    },
+    "./security-manager": {
+      "types": "./dist/store/security-manager.d.ts",
+      "import": "./dist/store/security-manager.mjs",
+      "default": "./dist/store/security-manager.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node ../../../tools/build-package.mjs"
+  }
+}