@wipco/sdui 1.4.2 → 1.6.0

package/dist/{chunk-O4IISNE7.js → chunk-IB2ZPUTF.js}

@@ -1,5 +1,5 @@
-import { boxed } from './chunk-5WW4MBRO.js';
-import { useState } from 'react';
+import { boxed } from './chunk-3JTBOABA.js';
+import { useRef, useState, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var RECORD_SHEET_CSS = `
@@ -15,7 +15,13 @@ var RECORD_SHEET_CSS = `
 .erp-recsheet__img{display:block;width:100%;height:11rem;object-fit:cover;border-radius:var(--wp-radius-sm)}
 .erp-recsheet__noimg{display:flex;align-items:center;justify-content:center;width:100%;height:11rem;border:var(--wp-border-w) dashed var(--wp-border-default);border-radius:var(--wp-radius-sm);color:var(--wp-text-disabled);font-size:var(--wp-size-xs)}
 .erp-recsheet__note{margin:var(--wp-space-2) 0 0;text-align:right;color:var(--wp-text-subtle);font-size:var(--wp-size-xs)}
+.erp-recsheet__frame{position:relative;min-width:0}
+.erp-recsheet__frame::before,.erp-recsheet__frame::after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:var(--wp-space-4);pointer-events:none;opacity:0;transition:opacity var(--wp-duration-fast)}
+.erp-recsheet__frame::before{left:0;background:linear-gradient(to right,color-mix(in srgb,var(--wp-text-strong) 16%,transparent),transparent)}
+.erp-recsheet__frame::after{right:0;background:linear-gradient(to left,color-mix(in srgb,var(--wp-text-strong) 16%,transparent),transparent)}
+.erp-recsheet__frame[data-more-left]::before,.erp-recsheet__frame[data-more-right]::after{opacity:1}
 @media print{
+  .erp-recsheet__frame::before,.erp-recsheet__frame::after{display:none}
   .erp-recsheet__scroll{overflow-x:visible}
   .erp-recsheet{min-width:0}
   .erp-recsheet tr{break-inside:avoid}
@@ -88,6 +94,8 @@ function repeatLength(sources, minRows) {
   return Math.max(longest, Math.max(0, Math.floor(minRows ?? 0)));
 }
 function RecordSheetImpl({ columns, title, rows, note }) {
+  const scrollRef = useRef(null);
+  const edges = useScrollEdges(scrollRef);
   const width = gridColumns(columns);
   const list = Array.isArray(rows) ? rows : [];
   const body = [];
@@ -116,17 +124,48 @@ function RecordSheetImpl({ columns, title, rows, note }) {
     }
     body.push(/* @__PURE__ */ jsx("tr", { children: renderCells(cells, null, `row-${rowIndex}`) }, `row-${rowIndex}`));
   });
-  return /* @__PURE__ */ jsxs("div", { className: "erp-recsheet__scroll", children: [
-    /* @__PURE__ */ jsx(RecordSheetStyles, {}),
-    /* @__PURE__ */ jsxs("table", { className: "erp-recsheet", children: [
-      /* @__PURE__ */ jsx("colgroup", { children: Array.from({ length: width }, (_, index) => /* @__PURE__ */ jsx("col", { style: { width: `${100 / width}%` } }, index)) }),
-      /* @__PURE__ */ jsxs("tbody", { children: [
-        title ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "erp-recsheet__title", colSpan: width, children: title }) }) : null,
-        body
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "erp-recsheet__frame",
+      "data-more-left": edges.left ? "" : void 0,
+      "data-more-right": edges.right ? "" : void 0,
+      children: /* @__PURE__ */ jsxs("div", { ref: scrollRef, className: "erp-recsheet__scroll", children: [
+        /* @__PURE__ */ jsx(RecordSheetStyles, {}),
+        /* @__PURE__ */ jsxs("table", { className: "erp-recsheet", children: [
+          /* @__PURE__ */ jsx("colgroup", { children: Array.from({ length: width }, (_, index) => /* @__PURE__ */ jsx("col", { style: { width: `${100 / width}%` } }, index)) }),
+          /* @__PURE__ */ jsxs("tbody", { children: [
+            title ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "erp-recsheet__title", colSpan: width, children: title }) }) : null,
+            body
+          ] })
+        ] }),
+        note ? /* @__PURE__ */ jsx("p", { className: "erp-recsheet__note", children: note }) : null
       ] })
-    ] }),
-    note ? /* @__PURE__ */ jsx("p", { className: "erp-recsheet__note", children: note }) : null
-  ] });
+    }
+  );
+}
+function useScrollEdges(ref) {
+  const [edges, setEdges] = useState({ left: false, right: false });
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const update = () => {
+      const left = el.scrollLeft > 1;
+      const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+      setEdges((prev) => prev.left === left && prev.right === right ? prev : { left, right });
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    observer?.observe(el);
+    const table = el.querySelector("table");
+    if (table) observer?.observe(table);
+    return () => {
+      el.removeEventListener("scroll", update);
+      observer?.disconnect();
+    };
+  }, [ref]);
+  return edges;
 }
 var RecordSheet = boxed(RecordSheetImpl, "RecordSheet");
 

package/dist/{chunk-MPT7WJG2.js → chunk-IQXLNICY.js}

@@ -1,8 +1,8 @@
-import { orderCircleStyle, ellipsisStyle, unwrapRows, uid } from './chunk-Q4SWUINA.js';
-import { includesLooseSearch } from './chunk-UV6HHFEW.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
-import { Icon, Badge, IconButton, Field, Select, Input, Tag, Spinner, Button, isPlainObject } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { orderCircleStyle, ellipsisStyle, unwrapRows, uid } from './chunk-LKQJJSVJ.js';
+import { includesLooseSearch } from './chunk-4OABUPIU.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-YNEEJCSZ.js';
+import { Icon, Badge, IconButton, Field, Select, Input, Tag, Spinner, Button, isPlainObject } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React, { useState, useId, useRef, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-OQ52XMGG.js → chunk-K6RE23XX.js}

@@ -1,7 +1,7 @@
-import { resolveTreeNodes, TreeView } from './chunk-GZBY7I4Y.js';
-import { OverlayLayer } from './chunk-XQPTSEJC.js';
-import { Field, Dialog, Icon, Button, Input } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { resolveTreeNodes, TreeView } from './chunk-2KQL6DYG.js';
+import { OverlayLayer } from './chunk-BITS7UJY.js';
+import { Field, Dialog, Icon, Button, Input } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-VY7MVBSE.js → chunk-KZ6U6FKB.js}

@@ -1,5 +1,5 @@
-import { ImageViewer } from './chunk-SAPBDJJQ.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { ImageViewer } from './chunk-AZSLSAJB.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-WPSK2CB5.js → chunk-LIZTK3HO.js}

@@ -1,4 +1,5 @@
-import { mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle, GAP_CSS } from './chunk-5WW4MBRO.js';
+import { formatDisplayValue } from './chunk-BLFJMMBW.js';
+import { mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle, GAP_CSS } from './chunk-3JTBOABA.js';
 import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -9,6 +10,7 @@ function paddingStyle(padding) {
 function Grid({
   columns = 3,
   template,
+  collapse = true,
   gap,
   rowGap,
   columnGap,
@@ -23,10 +25,16 @@ function Grid({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: joinClass("wp-grid", !template && columnsClass(columns), className),
+      className: joinClass(
+        "wp-grid",
+        template ? "wp-grid--custom" : columnsClass(columns),
+        collapse === false && "wp-grid--nocollapse",
+        className
+      ),
       style: mergeStyle(
         {
-          ...template ? { gridTemplateColumns: template } : null,
+          // 규칙(`.wp-grid--custom{grid-template-columns:var(--wp-grid-template)}`)은 LAYOUT_CSS 에 있다.
+          ...template ? { "--wp-grid-template": String(template) } : null,
           ...containerLayoutStyle({ gap, rowGap, columnGap, align, justify, wrap }),
           ...paddingStyle(padding)
         },
@@ -135,6 +143,7 @@ function Text({
     }
   );
 }
+var KV_BLOCK_AUTO_LENGTH = 80;
 function KeyValueList({ source, items, className, style }) {
   return /* @__PURE__ */ jsx("div", { className: joinClass("wp-kv", className), style, children: (items ?? []).map((item, index) => {
     const raw = item.key ? source?.[item.key] : item.value;
@@ -147,11 +156,13 @@ function KeyValueList({ source, items, className, style }) {
         word
       ] }, `${word}-${wordIndex}`)) });
     } else {
-      content = raw === null || raw === void 0 || raw === "" ? "\u2014" : raw;
+      const shown = formatDisplayValue(raw, item.format);
+      content = shown === null || shown === void 0 || shown === "" ? "\u2014" : shown;
     }
+    const block = item.block ?? (typeof content === "string" && (content.includes("\n") || content.length > KV_BLOCK_AUTO_LENGTH));
     return /* @__PURE__ */ jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: "wp-kv__k", children: item.label }),
-      /* @__PURE__ */ jsx("span", { className: joinClass("wp-kv__v", item.mono && "wp-mono"), children: content })
+      /* @__PURE__ */ jsx("span", { className: joinClass("wp-kv__v", block && "wp-kv__v--block", item.mono && "wp-mono"), children: content })
     ] }, index);
   }) });
 }

package/dist/{chunk-Q4SWUINA.js → chunk-LKQJJSVJ.js}

@@ -1,4 +1,4 @@
-import { isPlainObject } from './chunk-RNOUXUBO.js';
+import { isPlainObject } from './chunk-BLFJMMBW.js';
 
 // src/widgets/shared.ts
 function unwrapRows(payload) {

package/dist/{chunk-E6ISNQK3.js → chunk-M6H3SHIS.js}

@@ -1,14 +1,31 @@
-import { Button } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
-import { useEffect } from 'react';
+import { Button } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
+import { useEffect, useState } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+function canScriptCloseWindow(win) {
+  if (!win) return false;
+  try {
+    return Boolean(win.opener) || win.history.length <= 1;
+  } catch {
+    return false;
+  }
+}
 var PRINT_CSS = `
 .erp-print-shell{display:flex;flex-direction:column;align-items:center;gap:var(--wp-space-4);padding:var(--wp-space-6) var(--wp-space-4)}
-.erp-print-toolbar{display:flex;justify-content:flex-end;gap:var(--wp-space-2);width:100%;max-width:210mm}
+.erp-print-toolbar{display:flex;justify-content:flex-end;gap:var(--wp-space-2);width:100%;max-width:210mm;box-sizing:border-box}
 .erp-print-sheet{width:100%;max-width:210mm;box-sizing:border-box;background:var(--wp-surface-card);border:var(--wp-border-w) solid var(--wp-border-subtle);border-radius:var(--wp-radius-lg);box-shadow:var(--wp-shadow-lg);padding:var(--wp-space-7)}
 .erp-print-sheet table{border-collapse:collapse;width:100%}
 .erp-print-sheet th,.erp-print-sheet td{border:var(--wp-border-w) solid var(--wp-border-default);padding:var(--wp-space-1) var(--wp-space-2)}
+@media screen and (max-width:1023.98px){
+  .erp-print-sheet{padding:var(--wp-space-4)}
+}
+@media screen and (max-width:767.98px){
+  .erp-print-shell{padding:var(--wp-space-2) 0}
+  /* \uC2DC\uD2B8\uB294 \uC804\uD3ED\uC774\uC9C0\uB9CC \uB3C4\uAD6C\uC904\uC740 16px \uD648\uC744 \uC9C0\uD0A8\uB2E4 \u2014 '\uC778\uC1C4\uD558\uAE30'\uAC00 \uD654\uBA74 \uAC00\uC7A5\uC790\uB9AC\uC5D0 \uBD99\uC9C0 \uC54A\uAC8C. */
+  .erp-print-toolbar{padding-inline:var(--wp-space-4)}
+  .erp-print-sheet{padding:var(--wp-space-3);border-radius:var(--wp-radius-md);box-shadow:var(--wp-shadow-sm)}
+}
 @media print{
   @page{size:A4;margin:1cm}
   .erp-print-hidden{display:none !important}
@@ -19,17 +36,23 @@ var PRINT_CSS = `
 function PrintStyles() {
   return /* @__PURE__ */ jsx("style", { href: "erp-print", precedence: "medium", children: PRINT_CSS });
 }
-function PrintSheetImpl({ title, children, autoPrint = false }) {
+function PrintSheetImpl({ title, children, autoPrint = false, toolbar = "auto" }) {
   useEffect(() => {
     if (!autoPrint || !window.opener) return;
     const timer = window.setTimeout(() => window.print(), 500);
     return () => window.clearTimeout(timer);
   }, [autoPrint]);
+  const [closable, setClosable] = useState(false);
+  useEffect(() => {
+    setClosable(canScriptCloseWindow(typeof window === "undefined" ? void 0 : window));
+  }, []);
+  const mode = toolbar === "print" || toolbar === "none" ? toolbar : "auto";
+  const showClose = mode === "auto" && closable;
   return /* @__PURE__ */ jsxs("div", { className: "erp-print-shell", children: [
     /* @__PURE__ */ jsx(PrintStyles, {}),
-    /* @__PURE__ */ jsxs("div", { className: "erp-print-toolbar erp-print-hidden", children: [
+    mode === "none" ? null : /* @__PURE__ */ jsxs("div", { className: "erp-print-toolbar erp-print-hidden", children: [
       /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", onClick: () => window.print(), children: "\uC778\uC1C4\uD558\uAE30" }),
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: () => window.close(), children: "\uB2EB\uAE30" })
+      showClose ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: () => window.close(), children: "\uB2EB\uAE30" }) : null
     ] }),
     /* @__PURE__ */ jsxs("section", { className: "erp-print-sheet", children: [
       title ? /* @__PURE__ */ jsx("h1", { className: "wp-h3", style: { margin: "0 0 var(--wp-space-5)" }, children: title }) : null,
@@ -39,4 +62,4 @@ function PrintSheetImpl({ title, children, autoPrint = false }) {
 }
 var PrintSheet = boxed(PrintSheetImpl, "PrintSheet");
 
-export { PrintSheet };
+export { PrintSheet, canScriptCloseWindow };

package/dist/chunk-MN4RZ2WP.js

@@ -0,0 +1,380 @@
+import { HoistedStyle } from './chunk-RIZRM7OO.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-YNEEJCSZ.js';
+import { MOBILE_MEDIA_QUERY } from './chunk-GSM664TX.js';
+import { Icon, Badge, Checkbox, Select, Button } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
+import { useRef, useEffect, useState, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var OPERATIONS = [
+  { key: "read", label: "\uC870\uD68C" },
+  { key: "create", label: "\uC0DD\uC131" },
+  { key: "update", label: "\uC218\uC815" },
+  { key: "delete", label: "\uC0AD\uC81C" }
+];
+var SCOPE_OPTIONS = [
+  { value: "team", label: "\uD300" },
+  { value: "headquarter", label: "\uBCF8\uBD80" },
+  { value: "all", label: "\uC804\uCCB4" }
+];
+var CATEGORY_LABELS = {
+  fi: "\uC7AC\uBB34",
+  asset: "\uC790\uC0B0",
+  hr: "\uC778\uC0AC",
+  core: "\uACF5\uD1B5",
+  rbac: "\uAD8C\uD55C"
+};
+var CATEGORY_ORDER = ["fi", "asset", "hr", "core", "rbac"];
+var entityOf = (code) => {
+  const i = code.lastIndexOf(".");
+  return i > 0 ? code.slice(0, i) : code;
+};
+var operationOf = (code) => {
+  const i = code.lastIndexOf(".");
+  const op = i > 0 ? code.slice(i + 1) : "";
+  return OPERATIONS.some((o) => o.key === op) ? op : null;
+};
+var PERM_MATRIX_CSS = `
+.wp-permmx__box{position:relative;border:var(--wp-border-w) solid var(--wp-border-default);border-radius:var(--wp-radius-lg);min-height:160px;overflow:clip}
+.wp-permmx__box--scroll{overflow:hidden auto;max-height:var(--wp-permmx-max-h)}
+.wp-permmx__sticky{display:contents}
+.wp-permmx__cat{position:sticky;top:0;z-index:1;width:100%;align-items:center;padding:var(--wp-space-2) var(--wp-space-3);background:var(--wp-surface-sunken);border:none;border-top:var(--wp-border-w) solid var(--wp-border-default);cursor:pointer;text-align:left}
+.wp-permmx__head{align-items:center;padding:var(--wp-space-1) var(--wp-space-3);border-top:var(--wp-border-w) solid var(--wp-divider);color:var(--wp-text-muted)}
+.wp-permmx__row{align-items:center;padding:var(--wp-space-1) var(--wp-space-3);border-top:var(--wp-border-w) solid var(--wp-divider)}
+.wp-permmx__entity{flex:1.6;min-width:0}
+.wp-permmx__code{margin-left:var(--wp-space-2);color:var(--wp-text-muted)}
+.wp-permmx__op{flex:none;width:52px}
+.wp-permmx__head>.wp-permmx__op,.wp-permmx__head>.wp-permmx__scope{text-align:center}
+.wp-permmx__row>.wp-permmx__op{display:inline-flex;justify-content:center}
+.wp-permmx__scope{flex:none;width:96px}
+.wp-permmx__all{flex:none;width:60px}
+.wp-permmx__row>.wp-permmx__all{text-align:right}
+@media screen and (max-width:767.98px){
+  .wp-permmx__box,.wp-permmx__box--scroll{overflow:clip;max-height:none}
+  .wp-permmx__sticky{display:block;position:sticky;top:var(--wp-permmx-sticky-top,0px);z-index:1;background:var(--wp-surface-card)}
+  .wp-permmx__sticky>.wp-permmx__cat{position:static}
+  .wp-permmx__row,.wp-permmx__head{column-gap:var(--wp-space-1)}
+  .wp-permmx__row{flex-wrap:wrap;row-gap:var(--wp-space-1)}
+  .wp-permmx__row>.wp-permmx__entity{flex:1 1 100%}
+  .wp-permmx__head>.wp-permmx__entity{display:none}
+  .wp-permmx__op{width:auto;flex:1 1 0;min-width:28px}
+  .wp-permmx__scope{width:auto;flex:2.2 1 0;min-width:68px}
+  .wp-permmx__all{width:auto;flex:none}
+  .wp-permmx__all .wp-btn{padding-inline:var(--wp-space-2)}
+}
+`;
+function stickyInsetOf(box, win = window) {
+  let node = box.parentElement;
+  while (node && node !== win.document.body) {
+    const style = win.getComputedStyle(node);
+    if (/(auto|scroll|overlay)/.test(style.overflowY)) {
+      const inset = Number.parseFloat(style.paddingTop);
+      return Number.isFinite(inset) ? inset : 0;
+    }
+    node = node.parentElement;
+  }
+  return 0;
+}
+function initiallyClosedCategories(groups, granted) {
+  const closed = /* @__PURE__ */ new Set();
+  if (granted.size === 0) return closed;
+  for (const group of groups) {
+    const any = group.rows.some(
+      (row) => OPERATIONS.some((o) => row.cells[o.key] && granted.has(row.cells[o.key].code)) || row.extras.some((x) => granted.has(x.code))
+    );
+    if (!any) closed.add(group.category);
+  }
+  return closed;
+}
+function groupCatalog(catalog, categoryLabels, categoryOrder) {
+  const categories = /* @__PURE__ */ new Map();
+  for (const entry of catalog) {
+    if (!entry || typeof entry.code !== "string") continue;
+    const category = entry.category?.trim() || "\uAE30\uD0C0";
+    const entity = entityOf(entry.code);
+    const byEntity = categories.get(category) ?? /* @__PURE__ */ new Map();
+    categories.set(category, byEntity);
+    const row = byEntity.get(entity) ?? { entity, label: "", cells: {}, extras: [] };
+    byEntity.set(entity, row);
+    const op = operationOf(entry.code);
+    if (op) {
+      row.cells[op] = entry;
+      if (!row.label) row.label = entry.name.replace(/\s*(조회|생성|수정|삭제)\s*$/, "") || entity;
+    } else {
+      row.extras.push(entry);
+      if (!row.label) row.label = entry.name;
+    }
+  }
+  const order = (c) => {
+    const i = categoryOrder.indexOf(c);
+    return i < 0 ? categoryOrder.length : i;
+  };
+  return [...categories.entries()].sort((a, b) => order(a[0]) - order(b[0]) || a[0].localeCompare(b[0])).map(([category, byEntity]) => ({
+    category,
+    label: categoryLabels[category] ?? category,
+    rows: [...byEntity.values()].sort((a, b) => a.entity.localeCompare(b.entity))
+  }));
+}
+function PermissionMatrixEditorImpl({
+  permissions,
+  value,
+  onChange,
+  sourceEndpoint,
+  disabled = false,
+  scopeOptions = SCOPE_OPTIONS,
+  defaultScope = "all",
+  categoryLabels = CATEGORY_LABELS,
+  categoryOrder = CATEGORY_ORDER,
+  emptyText = "\uAD8C\uD55C \uCE74\uD0C8\uB85C\uADF8\uAC00 \uBE44\uC5B4 \uC788\uC2B5\uB2C8\uB2E4 \u2014 \uD398\uC774\uC9C0\uC758 data \uC120\uC5B8(/permissions?limit=1000)\uC744 \uD655\uC778\uD558\uC138\uC694.",
+  scrollMaxHeight
+}) {
+  const adapter = useSduiAdapter();
+  const api = hostFetchOf(adapter) ?? defaultAdapter.fetch;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const boxRef = useRef(null);
+  useEffect(() => {
+    const box = boxRef.current;
+    if (!box || typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const media = window.matchMedia(MOBILE_MEDIA_QUERY);
+    const apply = () => {
+      const inset = media.matches ? stickyInsetOf(box) : 0;
+      box.style.setProperty("--wp-permmx-sticky-top", `${-inset}px`);
+    };
+    apply();
+    media.addEventListener("change", apply);
+    window.addEventListener("resize", apply);
+    return () => {
+      media.removeEventListener("change", apply);
+      window.removeEventListener("resize", apply);
+    };
+  });
+  const seededFor = useRef(null);
+  const [seedSettled, setSeedSettled] = useState(null);
+  useEffect(() => {
+    if (!sourceEndpoint || seededFor.current === sourceEndpoint) return;
+    seededFor.current = sourceEndpoint;
+    api(sourceEndpoint, { method: "GET" }).then((response) => {
+      if (seededFor.current !== sourceEndpoint) return;
+      const body = response;
+      const rows = Array.isArray(body?.permissions) ? body.permissions : [];
+      onChangeRef.current?.(
+        rows.flatMap((row) => {
+          if (typeof row !== "object" || row === null) return [];
+          const { code, scope } = row;
+          if (typeof code !== "string" || !code) return [];
+          return [{ code, scope: typeof scope === "string" ? scope : defaultScope }];
+        })
+      );
+      setSeedSettled(sourceEndpoint);
+    }).catch(() => {
+      setSeedSettled(sourceEndpoint);
+    });
+  }, [sourceEndpoint, defaultScope]);
+  const grants = useMemo(() => Array.isArray(value) ? value : [], [value]);
+  const catalog = useMemo(
+    () => Array.isArray(permissions) ? permissions : [],
+    [permissions]
+  );
+  const labelsKey = JSON.stringify(categoryLabels);
+  const orderKey = JSON.stringify(categoryOrder);
+  const groups = useMemo(
+    () => groupCatalog(catalog, categoryLabels, categoryOrder),
+    [catalog, labelsKey, orderKey]
+  );
+  const granted = useMemo(() => new Set(grants.map((g) => g.code)), [grants]);
+  const scopeOf = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const g of grants) {
+      const e = entityOf(g.code);
+      if (!map.has(e) && g.scope) map.set(e, g.scope);
+    }
+    return map;
+  }, [grants]);
+  const seeding = !!sourceEndpoint && seedSettled !== sourceEndpoint;
+  const autoClosed = useMemo(
+    () => seeding ? new Set(groups.map((group) => group.category)) : initiallyClosedCategories(groups, granted),
+    [groups, granted, seeding]
+  );
+  const [pinnedClosed, setPinnedClosed] = useState(null);
+  const [closedFor, setClosedFor] = useState(sourceEndpoint);
+  if (closedFor !== sourceEndpoint) {
+    setClosedFor(sourceEndpoint);
+    setPinnedClosed(null);
+  }
+  const closed = pinnedClosed ?? autoClosed;
+  const toggleCategory = (c) => setPinnedClosed((prev) => {
+    const next = new Set(prev ?? autoClosed);
+    if (next.has(c)) next.delete(c);
+    else next.add(c);
+    return next;
+  });
+  const emit = (nextGranted, nextScopes) => {
+    if (pinnedClosed === null) setPinnedClosed(new Set(autoClosed));
+    onChange?.(
+      [...nextGranted].sort().map((code) => ({
+        code,
+        scope: nextScopes.get(entityOf(code)) ?? defaultScope
+      }))
+    );
+  };
+  const toggleCode = (code, on) => {
+    const next = new Set(granted);
+    if (on) next.add(code);
+    else next.delete(code);
+    emit(next, scopeOf);
+  };
+  const setEntityScope = (entity, scope) => {
+    const next = new Map(scopeOf);
+    next.set(entity, scope);
+    emit(granted, next);
+  };
+  const toggleRow = (row, on) => {
+    const next = new Set(granted);
+    for (const op of OPERATIONS) {
+      const cell = row.cells[op.key];
+      if (!cell) continue;
+      if (on) next.add(cell.code);
+      else next.delete(cell.code);
+    }
+    for (const extra of row.extras) {
+      if (on) next.add(extra.code);
+      else next.delete(extra.code);
+    }
+    emit(next, scopeOf);
+  };
+  if (catalog.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "wp-body-sm",
+        style: {
+          border: "var(--wp-border-w) dashed var(--wp-border-default)",
+          borderRadius: "var(--wp-radius-lg)",
+          padding: "var(--wp-space-4)",
+          textAlign: "center",
+          color: "var(--wp-text-muted)"
+        },
+        children: emptyText
+      }
+    );
+  }
+  const scrollBox = scrollMaxHeight !== void 0 && scrollMaxHeight !== null && scrollMaxHeight !== "";
+  const boxStyle = scrollBox ? {
+    "--wp-permmx-max-h": typeof scrollMaxHeight === "number" ? `${scrollMaxHeight}px` : String(scrollMaxHeight)
+  } : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "wp-col wp-permmx", style: { gap: "var(--wp-space-2)" }, children: [
+    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-permmx", css: PERM_MATRIX_CSS }),
+    /* @__PURE__ */ jsxs("span", { className: "wp-caption", children: [
+      "\uAD8C\uD55C ",
+      catalog.length,
+      "\uC885 \uC911 ",
+      granted.size,
+      "\uAC1C \uBD80\uC5EC\uB428 \xB7 \uBC94\uC704\uB294 \uC5D4\uD2F0\uD2F0 \uB2E8\uC704\uB85C \uC801\uC6A9\uB429\uB2C8\uB2E4 (",
+      scopeOptions.map((option) => option.label).join(" < "),
+      ")"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: boxRef,
+        className: scrollBox ? "wp-permmx__box wp-permmx__box--scroll" : "wp-permmx__box",
+        style: boxStyle,
+        children: groups.map((group) => {
+          const total = group.rows.reduce(
+            (a, r) => a + Object.keys(r.cells).length + r.extras.length,
+            0
+          );
+          const on = group.rows.reduce(
+            (a, r) => a + OPERATIONS.filter((o) => r.cells[o.key] && granted.has(r.cells[o.key].code)).length + r.extras.filter((x) => granted.has(x.code)).length,
+            0
+          );
+          const isClosed = closed.has(group.category);
+          return /* @__PURE__ */ jsxs("div", { className: "wp-permmx__group", children: [
+            /* @__PURE__ */ jsxs("div", { className: "wp-permmx__sticky", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "wp-row wp-permmx__cat",
+                  onClick: () => toggleCategory(group.category),
+                  "aria-expanded": !isClosed,
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { name: isClosed ? "chevron-right" : "chevron-down", size: 14 }),
+                    /* @__PURE__ */ jsx("span", { className: "wp-label", style: { flex: 1 }, children: group.label }),
+                    /* @__PURE__ */ jsxs(Badge, { tone: on > 0 ? "brand" : "neutral", children: [
+                      on,
+                      "/",
+                      total
+                    ] })
+                  ]
+                }
+              ),
+              isClosed ? null : /* @__PURE__ */ jsxs("div", { className: "wp-row wp-caption wp-permmx__head", children: [
+                /* @__PURE__ */ jsx("span", { className: "wp-permmx__entity", children: "\uC5D4\uD2F0\uD2F0" }),
+                OPERATIONS.map((op) => /* @__PURE__ */ jsx("span", { className: "wp-permmx__op", children: op.label }, op.key)),
+                /* @__PURE__ */ jsx("span", { className: "wp-permmx__scope", children: "\uBC94\uC704" }),
+                /* @__PURE__ */ jsx("span", { className: "wp-permmx__all" })
+              ] })
+            ] }),
+            isClosed ? null : /* @__PURE__ */ jsx("div", { className: "wp-col", style: { gap: 0 }, children: group.rows.map((row) => {
+              const rowCodes = [
+                ...OPERATIONS.flatMap(
+                  (o) => row.cells[o.key] ? [row.cells[o.key].code] : []
+                ),
+                ...row.extras.map((x) => x.code)
+              ];
+              const allOn = rowCodes.length > 0 && rowCodes.every((c) => granted.has(c));
+              const anyOn = rowCodes.some((c) => granted.has(c));
+              return /* @__PURE__ */ jsxs("div", { className: "wp-row wp-permmx__row", children: [
+                /* @__PURE__ */ jsxs("span", { className: "wp-body-sm wp-permmx__entity", children: [
+                  row.label || row.entity,
+                  /* @__PURE__ */ jsx("span", { className: "wp-caption wp-permmx__code", children: row.entity })
+                ] }),
+                OPERATIONS.map((op) => {
+                  const cell = row.cells[op.key];
+                  return /* @__PURE__ */ jsx("span", { className: "wp-permmx__op", children: cell ? /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      "aria-label": `${row.label || row.entity} ${op.label}`,
+                      checked: granted.has(cell.code),
+                      disabled,
+                      onChange: (event) => toggleCode(cell.code, event.target.checked)
+                    }
+                  ) : /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { color: "var(--wp-text-muted)" }, children: "\u2013" }) }, op.key);
+                }),
+                /* @__PURE__ */ jsx("span", { className: "wp-permmx__scope", children: /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    "aria-label": `${row.label || row.entity} \uBC94\uC704`,
+                    value: scopeOf.get(row.entity) ?? defaultScope,
+                    options: scopeOptions,
+                    disabled: disabled || !anyOn,
+                    onChange: (event) => setEntityScope(row.entity, event.target.value)
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("span", { className: "wp-permmx__all", children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "sm",
+                    variant: "ghost",
+                    disabled,
+                    onClick: () => toggleRow(row, !allOn),
+                    children: allOn ? "\uD574\uC81C" : "\uC804\uCCB4"
+                  }
+                ) })
+              ] }, row.entity);
+            }) })
+          ] }, group.category);
+        })
+      }
+    )
+  ] });
+}
+var PermissionMatrixEditor = boxed(
+  PermissionMatrixEditorImpl,
+  "PermissionMatrixEditor"
+);
+
+export { PermissionMatrixEditor, initiallyClosedCategories, stickyInsetOf };

package/dist/{chunk-GTGS2QRL.js → chunk-NA232CBX.js}

@@ -1,6 +1,6 @@
-import { Disclosure } from './chunk-2HLXCKK7.js';
-import { Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Disclosure } from './chunk-VPOOIEKT.js';
+import { Icon } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var TYPE_META = {

package/dist/{chunk-ZFNFPXPR.js → chunk-NAIWQQPW.js}

@@ -1,5 +1,5 @@
-import { Textarea, Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Textarea, Icon } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useId, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';