three-slicer 0.1.0 → 0.1.2

package/components/dist/SettingsPanel.js

@@ -1,179 +1,178 @@
-import e, { useRef as R, useState as f, useLayoutEffect as F, useEffect as J, useMemo as z } from "react";
-import { createPortal as O } from "react-dom";
-import C from "three-slicer/data/config-schema.json";
-import M from "three-slicer/data/ui-tree.json";
-import { settingRaw as P } from "three-slicer/settings";
+import e, { useRef as D, useState as h, useLayoutEffect as O, useEffect as P, useMemo as A } from "react";
+import { createPortal as F } from "react-dom";
+import { uiTree as S, schema as C } from "three-slicer/data";
+import { settingRaw as J } from "three-slicer/settings";
 import { disabledKeys as I, makeCfg as B } from "three-slicer/toggle";
-function D({ css: t, className: r, children: n }) {
-  const s = R(null), [l] = f(() => {
-    const d = document.createElement("div");
-    return d.style.display = "contents", d;
+function L({ css: t, className: s, children: r }) {
+  const i = D(null), [c] = h(() => {
+    const l = document.createElement("div");
+    return l.style.display = "contents", l;
   });
-  return F(() => {
-    const d = s.current, o = d.shadowRoot || d.attachShadow({ mode: "open" });
-    let i = o.querySelector("style[data-ts-css]");
-    i || (i = document.createElement("style"), i.setAttribute("data-ts-css", ""), o.append(i)), i.textContent = t, o.contains(l) || o.append(l);
-  }, [t, l]), /* @__PURE__ */ e.createElement("div", { ref: s, className: r }, O(n, l));
+  return O(() => {
+    const l = i.current, o = l.shadowRoot || l.attachShadow({ mode: "open" });
+    let p = o.querySelector("style[data-ts-css]");
+    p || (p = document.createElement("style"), p.setAttribute("data-ts-css", ""), o.append(p)), p.textContent = t, o.contains(c) || o.append(c);
+  }, [t, c]), /* @__PURE__ */ e.createElement("div", { ref: i, className: s }, F(r, c));
 }
-const L = ':host{display:contents}*{box-sizing:border-box}.row{display:grid;grid-template-columns:260px 220px 70px 1fr;gap:8px;align-items:center;padding:3px 0;border-bottom:1px dashed #f0f0f0}.row .lbl{color:#222;text-decoration:none}.row .lbl:hover{color:#0a7d4f;text-decoration:underline}.row .key{font-size:11px;color:#999;overflow:hidden;text-overflow:ellipsis}.row input[type=text],.row input:not([type]),.row select,.row textarea{width:100%;max-width:260px;padding:2px 6px}.inputwrap{display:inline-flex;align-items:center;gap:4px}.unit{color:#888;font-size:12px;white-space:nowrap}.pts{font-size:11px;color:#666}.badge{font-size:10px;padding:1px 6px;border-radius:8px;color:#fff;text-align:center}.mode-simple{background:#2e9e5b}.mode-advanced{background:#3673c3}.mode-expert{background:#d9822b}.mode-develop{background:#c0392b}.mode-none,.mode-undefined{background:#aaa}.muted{color:#999;font-weight:400;font-size:12px}.row.custom{grid-template-columns:1fr}.row.disabled{opacity:.42}.row.disabled input,.row.disabled select,.row.disabled textarea{cursor:not-allowed;background:#f2f2f2}.lbl-cell{display:inline-flex;align-items:center;gap:5px;min-width:0}.lbl-cell .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dirty-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#e8873a;box-shadow:0 0 0 2px #fff3e6}.widget-cell{display:inline-flex;align-items:center;gap:6px;min-width:0}.reset-btn{flex:0 0 auto;border:1px solid #d8b48a;background:#fbf1e4;color:#b5701f;border-radius:5px;cursor:pointer;font-size:13px;line-height:1;padding:1px 5px}.reset-btn:hover{background:#f3e2cb}.settings-panel{flex:0 0 400px;width:400px;border-left:1px solid #e2e2e2;display:flex;flex-direction:column;min-height:0;background:#fff;color:#222;font:14px/1.5 -apple-system,Segoe UI,sans-serif}.settings-panel .sp-top{padding:10px 12px 8px;border-bottom:1px solid #eee}.sp-builder{display:flex;align-items:center;gap:8px;font-size:12px;color:#666}.sp-builder select{flex:1;padding:4px 6px}.sp-pages{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}.sp-pages button{border:1px solid #e0e0e0;background:#fafafa;border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer}.sp-pages button.on{background:#e6f5ee;color:#0a7d4f;border-color:#b7e2cd;font-weight:700}.sp-modes{display:flex;gap:4px;margin-top:8px}.sp-modes button{border:0;background:none;font-size:11px;color:#888;padding:2px 6px;border-radius:6px;cursor:pointer}.sp-modes button.on{background:#eef2f0;color:#0a7d4f;font-weight:700}.settings-panel .sp-body{flex:1 1 auto;overflow-y:auto;padding:8px 14px 24px}.settings-panel .sp-body h2{font-size:16px}.settings-panel .row{grid-template-columns:1fr auto;grid-template-areas:"lbl badge" "key widget";row-gap:2px;padding:6px 0}.settings-panel .row .lbl{grid-area:lbl;font-weight:600}.settings-panel .row .badge{grid-area:badge;justify-self:end}.settings-panel .row .key{grid-area:key}.settings-panel .row .inputwrap,.settings-panel .row>select,.settings-panel .row>input,.settings-panel .row>textarea,.settings-panel .row>.pts,.settings-panel .row>.muted{grid-area:widget;justify-self:end}.settings-panel .row input:not([type=checkbox]):not([type=color]),.settings-panel .row select,.settings-panel .row textarea{max-width:200px}.settings-panel .row.custom{grid-template-columns:1fr;grid-template-areas:"lbl"}.sp-search{width:100%;box-sizing:border-box;padding:6px 9px;border:1px solid #d6d6d6;border-radius:6px;font-size:13px;margin-bottom:8px}:host(.sp-embedded) .settings-panel{position:static;width:auto;flex:none;border:0;height:auto}:host(.sp-embedded) .sp-body{padding:4px 2px 8px;max-height:460px}.bse{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:220px}.bse-modes{display:flex;gap:4px}.bse-modes button{border:1px solid #e0e0e0;background:#fafafa;border-radius:6px;padding:2px 8px;font-size:11px;cursor:pointer}.bse-modes button.on{background:#e6f5ee;color:#0a7d4f;border-color:#b7e2cd;font-weight:700}.bse-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}.bse-grid label{display:flex;align-items:center;gap:4px;font-size:11px;color:#666;white-space:nowrap}.bse-grid input{width:56px;padding:2px 4px;font-size:12px}.bse-json{width:100%;font:11px ui-monospace,monospace;padding:4px 6px;border:1px solid #d6d6d6;border-radius:6px;box-sizing:border-box}.bse-json.err{border-color:#d0435a;background:#fdf3f4}', A = (t, r, n, s) => [[n, s], [t + n, s], [t + n, r + s], [n, r + s]], T = (t) => {
-  const r = t / 2, n = 32;
-  return Array.from({ length: n }, (s, l) => {
-    const d = 2 * Math.PI * l / n;
-    return [+(r + r * Math.cos(d)).toFixed(2), +(r + r * Math.sin(d)).toFixed(2)];
+const T = ':host{display:contents}*{box-sizing:border-box}.row{display:grid;grid-template-columns:260px 220px 70px 1fr;gap:8px;align-items:center;padding:3px 0;border-bottom:1px dashed #f0f0f0}.row .lbl{color:#222;text-decoration:none}.row .lbl:hover{color:#0a7d4f;text-decoration:underline}.row .key{font-size:11px;color:#999;overflow:hidden;text-overflow:ellipsis}.row input[type=text],.row input:not([type]),.row select,.row textarea{width:100%;max-width:260px;padding:2px 6px}.inputwrap{display:inline-flex;align-items:center;gap:4px}.unit{color:#888;font-size:12px;white-space:nowrap}.pts{font-size:11px;color:#666}.badge{font-size:10px;padding:1px 6px;border-radius:8px;color:#fff;text-align:center}.mode-simple{background:#2e9e5b}.mode-advanced{background:#3673c3}.mode-expert{background:#d9822b}.mode-develop{background:#c0392b}.mode-none,.mode-undefined{background:#aaa}.muted{color:#999;font-weight:400;font-size:12px}.row.custom{grid-template-columns:1fr}.row.disabled{opacity:.42}.row.disabled input,.row.disabled select,.row.disabled textarea{cursor:not-allowed;background:#f2f2f2}.lbl-cell{display:inline-flex;align-items:center;gap:5px;min-width:0}.lbl-cell .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dirty-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#e8873a;box-shadow:0 0 0 2px #fff3e6}.widget-cell{display:inline-flex;align-items:center;gap:6px;min-width:0}.reset-btn{flex:0 0 auto;border:1px solid #d8b48a;background:#fbf1e4;color:#b5701f;border-radius:5px;cursor:pointer;font-size:13px;line-height:1;padding:1px 5px}.reset-btn:hover{background:#f3e2cb}.settings-panel{flex:0 0 400px;width:400px;border-left:1px solid #e2e2e2;display:flex;flex-direction:column;min-height:0;background:#fff;color:#222;font:14px/1.5 -apple-system,Segoe UI,sans-serif}.settings-panel .sp-top{padding:10px 12px 8px;border-bottom:1px solid #eee}.sp-builder{display:flex;align-items:center;gap:8px;font-size:12px;color:#666}.sp-builder select{flex:1;padding:4px 6px}.sp-pages{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}.sp-pages button{border:1px solid #e0e0e0;background:#fafafa;border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer}.sp-pages button.on{background:#e6f5ee;color:#0a7d4f;border-color:#b7e2cd;font-weight:700}.sp-modes{display:flex;gap:4px;margin-top:8px}.sp-modes button{border:0;background:none;font-size:11px;color:#888;padding:2px 6px;border-radius:6px;cursor:pointer}.sp-modes button.on{background:#eef2f0;color:#0a7d4f;font-weight:700}.settings-panel .sp-body{flex:1 1 auto;overflow-y:auto;padding:8px 14px 24px}.settings-panel .sp-body h2{font-size:16px}.settings-panel .row{grid-template-columns:1fr auto;grid-template-areas:"lbl badge" "key widget";row-gap:2px;padding:6px 0}.settings-panel .row .lbl{grid-area:lbl;font-weight:600}.settings-panel .row .badge{grid-area:badge;justify-self:end}.settings-panel .row .key{grid-area:key}.settings-panel .row .inputwrap,.settings-panel .row>select,.settings-panel .row>input,.settings-panel .row>textarea,.settings-panel .row>.pts,.settings-panel .row>.muted{grid-area:widget;justify-self:end}.settings-panel .row input:not([type=checkbox]):not([type=color]),.settings-panel .row select,.settings-panel .row textarea{max-width:200px}.settings-panel .row.custom{grid-template-columns:1fr;grid-template-areas:"lbl"}.sp-search{width:100%;box-sizing:border-box;padding:6px 9px;border:1px solid #d6d6d6;border-radius:6px;font-size:13px;margin-bottom:8px}:host(.sp-embedded) .settings-panel{position:static;width:auto;flex:none;border:0;height:auto}:host(.sp-embedded) .sp-body{padding:4px 2px 8px;max-height:460px}.bse{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:220px}.bse-modes{display:flex;gap:4px}.bse-modes button{border:1px solid #e0e0e0;background:#fafafa;border-radius:6px;padding:2px 8px;font-size:11px;cursor:pointer}.bse-modes button.on{background:#e6f5ee;color:#0a7d4f;border-color:#b7e2cd;font-weight:700}.bse-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}.bse-grid label{display:flex;align-items:center;gap:4px;font-size:11px;color:#666;white-space:nowrap}.bse-grid input{width:56px;padding:2px 4px;font-size:12px}.bse-json{width:100%;font:11px ui-monospace,monospace;padding:4px 6px;border:1px solid #d6d6d6;border-radius:6px;box-sizing:border-box}.bse-json.err{border-color:#d0435a;background:#fdf3f4}', j = (t, s, r, i) => [[r, i], [t + r, i], [t + r, s + i], [r, s + i]], $ = (t) => {
+  const s = t / 2, r = 32;
+  return Array.from({ length: r }, (i, c) => {
+    const l = 2 * Math.PI * c / r;
+    return [+(s + s * Math.cos(l)).toFixed(2), +(s + s * Math.sin(l)).toFixed(2)];
   });
-}, S = (t) => {
-  const r = t.map((s) => s[0]), n = t.map((s) => s[1]);
-  return { x0: Math.min(...r), y0: Math.min(...n), w: Math.max(...r) - Math.min(...r), d: Math.max(...n) - Math.min(...n) };
+}, R = (t) => {
+  const s = t.map((i) => i[0]), r = t.map((i) => i[1]);
+  return { x0: Math.min(...s), y0: Math.min(...r), w: Math.max(...s) - Math.min(...s), d: Math.max(...r) - Math.min(...r) };
 };
-function $({ value: t, onChange: r, disabled: n }) {
-  const s = Array.isArray(t) && t.length >= 3 ? t : A(200, 200, 0, 0), l = S(s), [d, o] = f(s.length === 4 ? "rect" : s.length >= 12 ? "circle" : "custom"), [i, m] = f({ w: l.w, d: l.d, ox: l.x0, oy: l.y0 }), [h, u] = f(Math.round(l.w)), [c, x] = f(JSON.stringify(s)), [g, y] = f(!1);
-  J(() => {
-    const a = S(s);
-    m({ w: a.w, d: a.d, ox: a.x0, oy: a.y0 }), u(Math.round(a.w)), x(JSON.stringify(s)), y(!1);
+function U({ value: t, onChange: s, disabled: r }) {
+  const i = Array.isArray(t) && t.length >= 3 ? t : j(200, 200, 0, 0), c = R(i), [l, o] = h(i.length === 4 ? "rect" : i.length >= 12 ? "circle" : "custom"), [p, x] = h({ w: c.w, d: c.d, ox: c.x0, oy: c.y0 }), [w, u] = h(Math.round(c.w)), [d, f] = h(JSON.stringify(i)), [E, N] = h(!1);
+  P(() => {
+    const a = R(i);
+    x({ w: a.w, d: a.d, ox: a.x0, oy: a.y0 }), u(Math.round(a.w)), f(JSON.stringify(i)), N(!1);
   }, [JSON.stringify(t)]);
-  const v = (a) => {
-    m(a);
-    const { w: p, d: b, ox: k, oy: _ } = a;
-    p > 0 && b > 0 && r(A(p, b, k, _));
-  }, w = (a) => {
-    u(a), a > 0 && r(T(a));
-  }, N = (a) => {
+  const y = (a) => {
     x(a);
+    const { w: m, d: n, ox: b, oy: v } = a;
+    m > 0 && n > 0 && s(j(m, n, b, v));
+  }, k = (a) => {
+    u(a), a > 0 && s($(a));
+  }, M = (a) => {
+    f(a);
     try {
-      const p = JSON.parse(a);
-      if (!Array.isArray(p) || p.length < 3 || !p.every((b) => Array.isArray(b) && b.length === 2 && b.every(Number.isFinite))) throw 0;
-      y(!1), r(p);
+      const m = JSON.parse(a);
+      if (!Array.isArray(m) || m.length < 3 || !m.every((n) => Array.isArray(n) && n.length === 2 && n.every(Number.isFinite))) throw 0;
+      N(!1), s(m);
     } catch {
-      y(!0);
+      N(!0);
     }
-  }, E = (a) => {
-    const p = parseFloat(a);
-    return Number.isFinite(p) ? p : 0;
+  }, g = (a) => {
+    const m = parseFloat(a);
+    return Number.isFinite(m) ? m : 0;
   };
-  return /* @__PURE__ */ e.createElement("div", { className: "bse", "data-testid": "bed-shape-editor" }, /* @__PURE__ */ e.createElement("div", { className: "bse-modes" }, [["rect", "사각형"], ["circle", "원형"], ["custom", "커스텀"]].map(([a, p]) => /* @__PURE__ */ e.createElement("button", { key: a, type: "button", className: d === a ? "on" : "", disabled: n, onClick: () => o(a) }, p))), d === "rect" && /* @__PURE__ */ e.createElement("div", { className: "bse-grid" }, /* @__PURE__ */ e.createElement("label", null, "폭 ", /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { className: "bse", "data-testid": "bed-shape-editor" }, /* @__PURE__ */ e.createElement("div", { className: "bse-modes" }, [["rect", "Rectangular"], ["circle", "Circular"], ["custom", "Custom"]].map(([a, m]) => /* @__PURE__ */ e.createElement("button", { key: a, type: "button", className: l === a ? "on" : "", disabled: r, onClick: () => o(a) }, m))), l === "rect" && /* @__PURE__ */ e.createElement("div", { className: "bse-grid" }, /* @__PURE__ */ e.createElement("label", null, "Width ", /* @__PURE__ */ e.createElement(
     "input",
     {
       type: "number",
       min: "1",
-      value: i.w,
-      disabled: n,
+      value: p.w,
+      disabled: r,
       "data-testid": "bed-w",
-      onChange: (a) => v({ ...i, w: E(a.target.value) })
+      onChange: (a) => y({ ...p, w: g(a.target.value) })
     }
-  ), " mm"), /* @__PURE__ */ e.createElement("label", null, "깊이 ", /* @__PURE__ */ e.createElement(
+  ), " mm"), /* @__PURE__ */ e.createElement("label", null, "Depth ", /* @__PURE__ */ e.createElement(
     "input",
     {
       type: "number",
       min: "1",
-      value: i.d,
-      disabled: n,
+      value: p.d,
+      disabled: r,
       "data-testid": "bed-d",
-      onChange: (a) => v({ ...i, d: E(a.target.value) })
+      onChange: (a) => y({ ...p, d: g(a.target.value) })
     }
-  ), " mm"), /* @__PURE__ */ e.createElement("label", null, "원점 X ", /* @__PURE__ */ e.createElement(
+  ), " mm"), /* @__PURE__ */ e.createElement("label", null, "Origin X ", /* @__PURE__ */ e.createElement(
     "input",
     {
       type: "number",
-      value: i.ox,
-      disabled: n,
-      onChange: (a) => v({ ...i, ox: E(a.target.value) })
+      value: p.ox,
+      disabled: r,
+      onChange: (a) => y({ ...p, ox: g(a.target.value) })
     }
-  )), /* @__PURE__ */ e.createElement("label", null, "원점 Y ", /* @__PURE__ */ e.createElement(
+  )), /* @__PURE__ */ e.createElement("label", null, "Origin Y ", /* @__PURE__ */ e.createElement(
     "input",
     {
       type: "number",
-      value: i.oy,
-      disabled: n,
-      onChange: (a) => v({ ...i, oy: E(a.target.value) })
+      value: p.oy,
+      disabled: r,
+      onChange: (a) => y({ ...p, oy: g(a.target.value) })
     }
-  ))), d === "circle" && /* @__PURE__ */ e.createElement("div", { className: "bse-grid" }, /* @__PURE__ */ e.createElement("label", null, "지름 ", /* @__PURE__ */ e.createElement(
+  ))), l === "circle" && /* @__PURE__ */ e.createElement("div", { className: "bse-grid" }, /* @__PURE__ */ e.createElement("label", null, "Diameter ", /* @__PURE__ */ e.createElement(
     "input",
     {
       type: "number",
       min: "1",
-      value: h,
-      disabled: n,
+      value: w,
+      disabled: r,
       "data-testid": "bed-dia",
-      onChange: (a) => w(E(a.target.value))
+      onChange: (a) => k(g(a.target.value))
     }
-  ), " mm")), d === "custom" && /* @__PURE__ */ e.createElement(
+  ), " mm")), l === "custom" && /* @__PURE__ */ e.createElement(
     "textarea",
     {
-      className: "bse-json" + (g ? " err" : ""),
+      className: "bse-json" + (E ? " err" : ""),
       rows: 3,
-      value: c,
-      disabled: n,
+      value: d,
+      disabled: r,
       "data-testid": "bed-json",
-      onChange: (a) => N(a.target.value),
+      onChange: (a) => M(a.target.value),
       placeholder: "[[0,0],[200,0],[200,200],[0,200]]"
     }
   ));
 }
-const U = {
-  printable_area: $
-}, j = Object.keys(M).filter((t) => M[t].length > 0), q = ["all", "simple", "advanced", "expert", "develop"], G = (t) => t.replace("::build", "").replace("Tab", "");
-function H(t, r) {
-  var l;
-  if (!t || !(r in t)) return !1;
-  const n = (l = C[r]) == null ? void 0 : l.default, s = Array.isArray(n) ? n[0] : n;
-  return String(t[r]) !== String(s ?? "");
+const W = {
+  printable_area: U
+}, _ = Object.keys(S).filter((t) => S[t].length > 0), q = ["all", "simple", "advanced", "expert", "develop"], G = (t) => t.replace("::build", "").replace("Tab", "");
+function H(t, s) {
+  var c;
+  if (!t || !(s in t)) return !1;
+  const r = (c = C[s]) == null ? void 0 : c.default, i = Array.isArray(r) ? r[0] : r;
+  return String(t[s]) !== String(i ?? "");
 }
-function Q(t, r) {
-  var s;
-  if (r === "all" || t.startsWith("<")) return !0;
-  const n = (s = C[t]) == null ? void 0 : s.mode;
-  return r === "simple" ? n === "simple" : r === "advanced" ? n === "simple" || n === "advanced" : !0;
+function Q(t, s) {
+  var i;
+  if (s === "all" || t.startsWith("<")) return !0;
+  const r = (i = C[t]) == null ? void 0 : i.mode;
+  return s === "simple" ? r === "simple" : s === "advanced" ? r === "simple" || r === "advanced" : !0;
 }
-function W(t) {
+function X(t) {
   return t ? t.gui_type === "color" ? "color" : t.enum_values ? "select" : t.type === "coBool" || t.type === "coBools" ? "checkbox" : t.multiline || t.is_code ? "textarea" : t.type === "coPoints" || t.type === "coPoint" ? "points" : "input" : "unknown";
 }
-function X({ mode: t }) {
+function Y({ mode: t }) {
   return /* @__PURE__ */ e.createElement("span", { className: `badge mode-${t ?? "none"}` }, t ?? "—");
 }
-function Y({ def: t, optKey: r, settings: n, setSettings: s, disabled: l, customWidgets: d }) {
-  const o = P(n, r), i = (c) => s((x) => ({ ...x, [r]: c })), m = (d == null ? void 0 : d[r]) ?? U[r];
-  if (m) return /* @__PURE__ */ e.createElement(m, { def: t, value: o, onChange: i, disabled: l });
-  const h = W(t), u = Array.isArray(o) ? o[0] : o;
-  switch (h) {
+function V({ def: t, optKey: s, settings: r, setSettings: i, disabled: c, customWidgets: l }) {
+  const o = J(r, s), p = (d) => i((f) => ({ ...f, [s]: d })), x = (l == null ? void 0 : l[s]) ?? W[s];
+  if (x) return /* @__PURE__ */ e.createElement(x, { def: t, value: o, onChange: p, disabled: c });
+  const w = X(t), u = Array.isArray(o) ? o[0] : o;
+  switch (w) {
     case "select":
-      return /* @__PURE__ */ e.createElement("select", { value: u ?? "", onChange: (c) => i(c.target.value), disabled: l }, t.enum_values.map((c, x) => {
-        var g;
-        return /* @__PURE__ */ e.createElement("option", { key: c, value: c }, ((g = t.enum_labels) == null ? void 0 : g[x]) ?? c);
+      return /* @__PURE__ */ e.createElement("select", { value: u ?? "", onChange: (d) => p(d.target.value), disabled: c }, t.enum_values.map((d, f) => {
+        var E;
+        return /* @__PURE__ */ e.createElement("option", { key: d, value: d }, ((E = t.enum_labels) == null ? void 0 : E[f]) ?? d);
       }));
     case "checkbox":
-      return /* @__PURE__ */ e.createElement("input", { type: "checkbox", checked: Array.isArray(o) ? !!o[0] : !!o, onChange: (c) => i(c.target.checked), disabled: l });
+      return /* @__PURE__ */ e.createElement("input", { type: "checkbox", checked: Array.isArray(o) ? !!o[0] : !!o, onChange: (d) => p(d.target.checked), disabled: c });
     case "color":
-      return /* @__PURE__ */ e.createElement("input", { type: "color", value: typeof u == "string" && u.startsWith("#") ? u : "#00ae42", onChange: (c) => i(c.target.value), disabled: l });
+      return /* @__PURE__ */ e.createElement("input", { type: "color", value: typeof u == "string" && u.startsWith("#") ? u : "#00ae42", onChange: (d) => p(d.target.value), disabled: c });
     case "textarea":
       return /* @__PURE__ */ e.createElement("textarea", { rows: 2, value: Array.isArray(o) ? o.join(`
-`) : o ?? "", onChange: (c) => i(c.target.value), disabled: l });
+`) : o ?? "", onChange: (d) => p(d.target.value), disabled: c });
     case "points":
       return /* @__PURE__ */ e.createElement("code", { className: "pts" }, JSON.stringify(o ?? []));
     case "unknown":
-      return /* @__PURE__ */ e.createElement("span", { className: "muted" }, "스키마 없음");
+      return /* @__PURE__ */ e.createElement("span", { className: "muted" }, "No schema");
     default:
-      return /* @__PURE__ */ e.createElement("span", { className: "inputwrap" }, /* @__PURE__ */ e.createElement("input", { value: u ?? "", onChange: (c) => i(c.target.value), disabled: l }), t.sidetext && /* @__PURE__ */ e.createElement("span", { className: "unit" }, t.sidetext));
+      return /* @__PURE__ */ e.createElement("span", { className: "inputwrap" }, /* @__PURE__ */ e.createElement("input", { value: u ?? "", onChange: (d) => p(d.target.value), disabled: c }), t.sidetext && /* @__PURE__ */ e.createElement("span", { className: "unit" }, t.sidetext));
   }
 }
-function V({ optKey: t, settings: r, setSettings: n, disabled: s, onOptionOpen: l, customWidgets: d }) {
-  if (t.startsWith("<")) return /* @__PURE__ */ e.createElement("div", { className: "row custom" }, /* @__PURE__ */ e.createElement("span", { className: "muted" }, "⚙ 커스텀 위젯 ", t));
-  const o = C[t], i = s ? s[t] : void 0, m = i != null, h = H(r, t), u = () => n((x) => {
-    const g = { ...x };
-    return delete g[t], g;
-  }), c = (o == null ? void 0 : o.label) || (o == null ? void 0 : o.full_label) || t;
-  return /* @__PURE__ */ e.createElement("div", { className: "row" + (m ? " disabled" : ""), title: m ? `비활성 조건: ${i}` : (o == null ? void 0 : o.tooltip) ?? "", "data-testid": `row-${t}` }, /* @__PURE__ */ e.createElement("span", { className: "lbl-cell" }, h && /* @__PURE__ */ e.createElement("span", { className: "dirty-dot", title: "기본값에서 변경됨", "data-testid": `dirty-${t}` }), l ? /* @__PURE__ */ e.createElement("button", { type: "button", className: "lbl lbl-link", onClick: () => l(t), title: "상세" }, c) : /* @__PURE__ */ e.createElement("span", { className: "lbl" }, c)), /* @__PURE__ */ e.createElement("code", { className: "key" }, t), /* @__PURE__ */ e.createElement(X, { mode: o == null ? void 0 : o.mode }), /* @__PURE__ */ e.createElement("span", { className: "widget-cell" }, /* @__PURE__ */ e.createElement(Y, { def: o, optKey: t, settings: r, setSettings: n, disabled: m, customWidgets: d }), h && /* @__PURE__ */ e.createElement("button", { className: "reset-btn", onClick: u, title: "기본값으로 리셋", "data-testid": `reset-${t}` }, "↺")));
+function Z({ optKey: t, settings: s, setSettings: r, disabled: i, onOptionOpen: c, customWidgets: l }) {
+  if (t.startsWith("<")) return /* @__PURE__ */ e.createElement("div", { className: "row custom" }, /* @__PURE__ */ e.createElement("span", { className: "muted" }, "⚙ Custom widget ", t));
+  const o = C[t], p = i ? i[t] : void 0, x = p != null, w = H(s, t), u = () => r((f) => {
+    const E = { ...f };
+    return delete E[t], E;
+  }), d = (o == null ? void 0 : o.label) || (o == null ? void 0 : o.full_label) || t;
+  return /* @__PURE__ */ e.createElement("div", { className: "row" + (x ? " disabled" : ""), title: x ? `Disabled when: ${p}` : (o == null ? void 0 : o.tooltip) ?? "", "data-testid": `row-${t}` }, /* @__PURE__ */ e.createElement("span", { className: "lbl-cell" }, w && /* @__PURE__ */ e.createElement("span", { className: "dirty-dot", title: "Changed from default", "data-testid": `dirty-${t}` }), c ? /* @__PURE__ */ e.createElement("button", { type: "button", className: "lbl lbl-link", onClick: () => c(t), title: "Details" }, d) : /* @__PURE__ */ e.createElement("span", { className: "lbl" }, d)), /* @__PURE__ */ e.createElement("code", { className: "key" }, t), /* @__PURE__ */ e.createElement(Y, { mode: o == null ? void 0 : o.mode }), /* @__PURE__ */ e.createElement("span", { className: "widget-cell" }, /* @__PURE__ */ e.createElement(V, { def: o, optKey: t, settings: s, setSettings: r, disabled: x, customWidgets: l }), w && /* @__PURE__ */ e.createElement("button", { className: "reset-btn", onClick: u, title: "Reset to default", "data-testid": `reset-${t}` }, "↺")));
 }
-function re({ settings: t, setSettings: r, onOptionOpen: n, embedded: s = !1, customWidgets: l }) {
-  const [d, o] = f(j[0] ?? ""), [i, m] = f(0), [h, u] = f("all"), [c, x] = f(""), g = M[d] ?? [], y = g[Math.min(i, g.length - 1)], v = z(() => I(B(t)), [t]), w = c.trim().toLowerCase(), N = z(() => w ? Object.entries(C).filter(([a, p]) => {
-    var b, k;
-    return a.includes(w) || ((b = p.label) == null ? void 0 : b.toLowerCase().includes(w)) || ((k = p.full_label) == null ? void 0 : k.toLowerCase().includes(w));
-  }).slice(0, 60).map(([a]) => a) : [], [w]), E = (a, p) => /* @__PURE__ */ e.createElement(V, { key: a + p, optKey: a, settings: t, setSettings: r, disabled: v, onOptionOpen: n, customWidgets: l });
-  return /* @__PURE__ */ e.createElement(D, { css: L, className: s ? "sp-embedded" : void 0 }, /* @__PURE__ */ e.createElement("div", { className: "settings-panel" }, /* @__PURE__ */ e.createElement("div", { className: "sp-top" }, /* @__PURE__ */ e.createElement("input", { className: "sp-search", placeholder: "옵션 검색 (907개)…", value: c, onChange: (a) => x(a.target.value), "data-testid": "opt-search" }), !w && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("label", { className: "sp-builder" }, /* @__PURE__ */ e.createElement("span", null, "설정 그룹"), /* @__PURE__ */ e.createElement("select", { value: d, onChange: (a) => {
-    o(a.target.value), m(0);
-  } }, j.map((a) => /* @__PURE__ */ e.createElement("option", { key: a, value: a }, G(a))))), /* @__PURE__ */ e.createElement("div", { className: "sp-pages" }, g.map((a, p) => /* @__PURE__ */ e.createElement("button", { key: a.page + p, className: p === Math.min(i, g.length - 1) ? "on" : "", onClick: () => m(p) }, a.page))), /* @__PURE__ */ e.createElement("div", { className: "sp-modes" }, q.map((a) => /* @__PURE__ */ e.createElement("button", { key: a, className: h === a ? "on" : "", onClick: () => u(a) }, a))))), /* @__PURE__ */ e.createElement("div", { className: "sp-body" }, w ? /* @__PURE__ */ e.createElement("section", { "data-testid": "search-results" }, /* @__PURE__ */ e.createElement("h3", null, "검색: “", c, "” — ", N.length, "건", N.length === 60 ? "+" : ""), N.map(E), !N.length && /* @__PURE__ */ e.createElement("p", { className: "muted" }, "일치 없음")) : y ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h2", null, y.page, " ", /* @__PURE__ */ e.createElement("span", { className: "muted" }, "Tab.cpp:", y.line)), y.groups.map((a) => {
-    const p = a.options.filter((b) => Q(b, h));
-    return p.length ? /* @__PURE__ */ e.createElement("section", { key: a.group + a.line }, /* @__PURE__ */ e.createElement("h3", null, a.group || "(무제 그룹)", " ", /* @__PURE__ */ e.createElement("span", { className: "muted" }, ":", a.line)), p.map(E)) : null;
-  })) : /* @__PURE__ */ e.createElement("p", { className: "muted" }, "빌더 없음"))));
+function re({ settings: t, setSettings: s, onOptionOpen: r, embedded: i = !1, customWidgets: c, only: l }) {
+  const [o, p] = h((l == null ? void 0 : l.builder) ?? _[0] ?? ""), [x, w] = h(0), [u, d] = h("all"), [f, E] = h(""), N = S[(l == null ? void 0 : l.builder) ?? o] ?? [], y = l != null && l.page ? N.filter((n) => n.page === l.page) : N, k = y[Math.min(x, y.length - 1)], M = A(() => I(B(t)), [t]), g = f.trim().toLowerCase(), a = A(() => g ? Object.entries(C).filter(([n, b]) => {
+    var v, z;
+    return n.includes(g) || ((v = b.label) == null ? void 0 : v.toLowerCase().includes(g)) || ((z = b.full_label) == null ? void 0 : z.toLowerCase().includes(g));
+  }).slice(0, 60).map(([n]) => n) : [], [g]), m = (n, b) => /* @__PURE__ */ e.createElement(Z, { key: n + b, optKey: n, settings: t, setSettings: s, disabled: M, onOptionOpen: r, customWidgets: c });
+  return /* @__PURE__ */ e.createElement(L, { css: T, className: i ? "sp-embedded" : void 0 }, /* @__PURE__ */ e.createElement("div", { className: "settings-panel" }, !l && /* @__PURE__ */ e.createElement("div", { className: "sp-top" }, /* @__PURE__ */ e.createElement("input", { className: "sp-search", placeholder: "Search options (907)…", value: f, onChange: (n) => E(n.target.value), "data-testid": "opt-search" }), !g && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("label", { className: "sp-builder" }, /* @__PURE__ */ e.createElement("span", null, "Settings group"), /* @__PURE__ */ e.createElement("select", { value: o, onChange: (n) => {
+    p(n.target.value), w(0);
+  } }, _.map((n) => /* @__PURE__ */ e.createElement("option", { key: n, value: n }, G(n))))), /* @__PURE__ */ e.createElement("div", { className: "sp-pages" }, y.map((n, b) => /* @__PURE__ */ e.createElement("button", { key: n.page + b, className: b === Math.min(x, y.length - 1) ? "on" : "", onClick: () => w(b) }, n.page))), /* @__PURE__ */ e.createElement("div", { className: "sp-modes" }, q.map((n) => /* @__PURE__ */ e.createElement("button", { key: n, className: u === n ? "on" : "", onClick: () => d(n) }, n))))), /* @__PURE__ */ e.createElement("div", { className: "sp-body" }, g ? /* @__PURE__ */ e.createElement("section", { "data-testid": "search-results" }, /* @__PURE__ */ e.createElement("h3", null, "Search: “", f, "” — ", a.length, " hit", a.length === 1 ? "" : "s", a.length === 60 ? "+" : ""), a.map(m), !a.length && /* @__PURE__ */ e.createElement("p", { className: "muted" }, "No matches")) : k ? /* @__PURE__ */ e.createElement(e.Fragment, null, !l && /* @__PURE__ */ e.createElement("h2", null, k.page, " ", /* @__PURE__ */ e.createElement("span", { className: "muted" }, "Tab.cpp:", k.line)), k.groups.map((n) => {
+    const b = n.options.filter((v) => Q(v, u) && !(l && v.startsWith("<")));
+    return b.length ? /* @__PURE__ */ e.createElement("section", { key: n.group + n.line }, /* @__PURE__ */ e.createElement("h3", null, n.group || "(untitled group)", " ", /* @__PURE__ */ e.createElement("span", { className: "muted" }, ":", n.line)), b.map(m)) : null;
+  })) : /* @__PURE__ */ e.createElement("p", { className: "muted" }, "No builder"))));
 }
 export {
   re as default

package/components/styles.css

@@ -1,10 +1,10 @@
-/* @three-slicer/components — SettingsPanel 스타일.
-   Shadow DOM 격리(shadow_host.jsx): ?inline 으로 번들에 내장돼 패널의 shadow root 에
-   주입된다. 호스트 앱 CSS 와 양방향 무간섭 — 클래스명 충돌이 불가능하다. */
+/* @three-slicer/components — SettingsPanel styles.
+   Shadow DOM isolation (shadow_host.jsx): inlined into the bundle via ?inline and injected into the
+   panel's shadow root. Fully isolated from host app CSS in both directions — class names cannot collide. */
 :host { display: contents; }
 * { box-sizing: border-box; }
 
-/* ---- 옵션 행 원자 ---- */
+/* ---- Option row atoms ---- */
 .row { display: grid; grid-template-columns: 260px 220px 70px 1fr; gap: 8px;
   align-items: center; padding: 3px 0; border-bottom: 1px dashed #f0f0f0; }
 .row .lbl { color: #222; text-decoration: none; }
@@ -23,7 +23,7 @@
 .muted { color: #999; font-weight: 400; font-size: 12px; }
 .row.custom { grid-template-columns: 1fr; }
 
-/* 25단계 S5: toggle-rules 비활성 + dirty/리셋 */
+/* Stage 25 S5: toggle-rules disabling + dirty/reset */
 .row.disabled { opacity: 0.42; }
 .row.disabled input, .row.disabled select, .row.disabled textarea { cursor: not-allowed; background: #f2f2f2; }
 .lbl-cell { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
@@ -34,7 +34,7 @@
   border-radius: 5px; cursor: pointer; font-size: 13px; line-height: 1; padding: 1px 5px; }
 .reset-btn:hover { background: #f3e2cb; }
 
-/* ---- 패널 셸 ---- */
+/* ---- Panel shell ---- */
 .settings-panel { flex: 0 0 400px; width: 400px; border-left: 1px solid #e2e2e2;
   display: flex; flex-direction: column; min-height: 0; background: #fff; color: #222;
   font: 14px/1.5 -apple-system, "Segoe UI", sans-serif; }
@@ -52,7 +52,7 @@
 .settings-panel .sp-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 14px 24px; }
 .settings-panel .sp-body h2 { font-size: 16px; }
 
-/* 사이드바 폭이 좁으므로 옵션 행을 세로 스택으로 재배치 */
+/* The sidebar is narrow, so option rows are re-stacked vertically */
 .settings-panel .row { grid-template-columns: 1fr auto; grid-template-areas: "lbl badge" "key widget";
   row-gap: 2px; padding: 6px 0; }
 .settings-panel .row .lbl { grid-area: lbl; font-weight: 600; }
@@ -66,11 +66,11 @@
 .settings-panel .row.custom { grid-template-columns: 1fr; grid-template-areas: "lbl"; }
 .sp-search { width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid #d6d6d6; border-radius: 6px; font-size: 13px; margin-bottom: 8px; }
 
-/* ---- 임베드 변형 (:host 에 sp-embedded — viewer process-card 등 카드 안 전폭 배치) ---- */
+/* ---- Embedded variant (sp-embedded on :host — full width inside cards such as the viewer process-card) ---- */
 :host(.sp-embedded) .settings-panel { position: static; width: auto; flex: none; border: 0; height: auto; }
 :host(.sp-embedded) .sp-body { padding: 4px 2px 8px; max-height: 460px; }
 
-/* ---- BedShapeEditor (printable_area 커스텀 위젯) ---- */
+/* ---- BedShapeEditor (printable_area custom widget) ---- */
 .bse { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 220px; }
 .bse-modes { display: flex; gap: 4px; }
 .bse-modes button { border: 1px solid #e0e0e0; background: #fafafa; border-radius: 6px;

package/data/invalidation-map.json

@@ -627,5 +627,5 @@
    "line": 1533
   }
  ],
- "note": "조건에 없는 opt_key(기본 분기)는 전체 무효화. steps는 분기 블록에서 참조된 단계 토큰."
+ "note": "An opt_key absent from the conditions (the default branch) invalidates everything. steps are the step tokens referenced in the branch block."
 }

package/engine/examples/headless.mjs

@@ -1,7 +1,7 @@
 // three-slicer headless SDK example + independence proof: drive the engine from Node using ONLY the
 // public API (no UI, no viewer). Generates a 20mm cube STL, slices it, prints stats + G-code length.
 //   run: node packages/engine/examples/headless.mjs
-import { createSlicer } from 'three-slicer'   // 워크스페이스 심링크로 해석 — 외부 소비자와 동일한 경로
+import { createSlicer } from 'three-slicer'   // resolved via the workspace symlink — same path an external consumer takes
 
 // minimal binary-STL writer for a box (public API takes a binary-STL ArrayBuffer)
 function boxTris(ox, oy, oz, sx, sy, sz) {
@@ -27,7 +27,7 @@ const slicer = await createSlicer()
 const r = slicer.slice(cube, params)
 console.log(`batch : layers=${r.stats.layers} segments=${r.stats.path_segments} filament=${r.stats.filament_mm.toFixed(1)}mm gcode=${r.gcode.length} chars`)
 
-// (b) streaming slice via onLayer (30단계) — assemble G-code from per-layer chunks
+// (b) streaming slice via onLayer (stage 30) — assemble G-code from per-layer chunks
 let chunks = 0, gbytes = 0
 const rs = slicer.slice(cube, params, { onLayer: ({ gcode }) => { chunks++; gbytes += gcode.length } })
 console.log(`stream: layers=${chunks} streamed=${rs.stats.streamed} assembled-gcode=${gbytes} chars`)

package/engine/index.d.ts

@@ -1,4 +1,6 @@
-// Type definitions for @three-slicer/engine
+// Type definitions for three-slicer (engine entry point)
+export type { SlicerSettings, SettingKey, Point } from '../types/settings-keys.d.ts'
+
 export interface SliceLayer { z: number; idx: number; gcode: string; paths: Float32Array; widths: Float32Array }
 export interface SliceCallbacks {
   onProgress?: (done: number, total: number) => void

package/engine/index.js

@@ -7,7 +7,7 @@ import createModule from './src/slicer_core.js'
 const u8 = (b) => (b instanceof Uint8Array ? b : new Uint8Array(b))
 
 // Off-main-thread worker URL for the browser: `new Worker(engineWorkerURL(), { type: 'module' })`.
-// The worker speaks the 30단계 streaming protocol ({type:'layer'|'done'|'error'|'progress'}).
+// The worker speaks the stage-30 streaming protocol ({type:'layer'|'done'|'error'|'progress'}).
 export const engineWorkerURL = () => new URL('./src/slicer.worker.js', import.meta.url)
 
 // createSlicer(): load the WASM kernel and return a handle. Works in Node and the browser main thread.
@@ -15,7 +15,7 @@ export const engineWorkerURL = () => new URL('./src/slicer.worker.js', import.me
 //    - stl: ArrayBuffer|Uint8Array (binary STL)
 //    - params: kernel-params object OR JSON string (see web/GUIDE.md; use deriveKernelParams to build from UI settings)
 //    - onProgress(done,total): per-layer progress
-//    - onLayer({z,idx,gcode,paths,widths}): 30단계 streaming — emits + frees each layer; when set, the
+//    - onLayer({z,idx,gcode,paths,widths}): stage-30 streaming — emits + frees each layer; when set, the
 //      returned result carries stats only (assemble gcode/layers from the callbacks). When omitted, the
 //      result carries the whole { gcode, stats, layers }.
 //  paintPrepare/paint/paintClear/overlay: manual support enforcer/blocker painting (TriangleSelector).

package/engine/src/data.js

@@ -0,0 +1,12 @@
+// The single import site for the 4 extracted JSON files.
+//
+// Why funnel them through one module: JSON requires `with { type: 'json' }` in Node 22+ ESM, but
+// Vite/esbuild strip that attribute from bundle output (neither build.target nor importAttributesKey
+// prevents it — measured). So if the same JSON is pointed at by both "the original with the attribute
+// (engine/src/*.js)" and "the bundle without it (components/dist)", the consumer's bundler warns with
+// "inconsistent import attributes". Only this file holds the JSON; everything else imports this module
+// as external -> no JSON import survives in the bundle, so the mismatch cannot arise.
+export { default as schema } from 'three-slicer/data/config-schema.json' with { type: 'json' }
+export { default as uiTree } from 'three-slicer/data/ui-tree.json' with { type: 'json' }
+export { default as toggleRules } from 'three-slicer/data/toggle-rules.json' with { type: 'json' }
+export { default as invalidationMap } from 'three-slicer/data/invalidation-map.json' with { type: 'json' }