three-slicer 0.1.0

package/README.md

@@ -0,0 +1,44 @@
+# three-slicer
+
+Browser/WASM 3D-printing slicer, reverse-engineered from [OrcaSlicer](https://github.com/SoftFever/OrcaSlicer).
+Slices STL to G-code entirely in the browser (or Node) — no server.
+
+- **Engine** — WASM kernel: Arachne variable-width walls, gyroid/honeycomb/crosshatch infill,
+  tree/grid supports, support painting, raft/brim/skirt, ironing, arc fitting, multi-material,
+  layer streaming (OOM-tolerant), multithreaded kernel auto-selected on cross-origin-isolated sites.
+- **Viewer** — React `<Viewport/>`: model import (STL/OBJ/3MF/AMF/PLY), transform gizmos,
+  multi-plate, GPU toolpath preview (libvgcode port). Shadow-DOM isolated — no CSS collisions.
+- **Settings UI** — React `<SettingsPanel/>`: 907 options driven by the extracted OrcaSlicer
+  config schema, with search, mode filters, and custom widget registry.
+
+## Install
+
+```bash
+npm i three-slicer            # engine only (Node-safe)
+npm i three-slicer react react-dom three   # + viewer/components
+```
+
+## Use
+
+```js
+// Headless slicing (Node or browser main thread)
+import { createSlicer } from 'three-slicer'
+const s = await createSlicer()
+const { gcode, stats } = s.slice(stlArrayBuffer, params)
+
+// React viewer + settings panel
+import Viewport from 'three-slicer/viewer'
+import SettingsPanel from 'three-slicer/components'
+// <Viewport settings={settings} setSettings={setSettings} />
+
+// Extracted data
+import schema from 'three-slicer/data/config-schema.json'
+```
+
+Vite consumers need `worker: { format: 'es' }` and `build: { target: 'es2022' }`.
+Serve with COOP/COEP headers to enable the multithreaded kernel (~2.2× faster).
+
+## License
+
+AGPL-3.0-or-later — derived from OrcaSlicer.
+Source: https://github.com/kimgh06/Web_Three_Slicer

package/components/README.md

@@ -0,0 +1,39 @@
+# three-slicer/components
+
+Reusable React components for the browser slicer. Props-driven — no global state, no React context, no router coupling (proven standalone by the tarball consumer gate `web/pack_check.sh`).
+
+## `<SettingsPanel/>`
+
+An OrcaSlicer-style settings form generated from `@three-slicer/data` (schema + UI tree + toggle rules): tab/page/group navigation, mode filter (simple/advanced/expert), search across 907 options, dirty markers with per-option reset, and enable/disable rules evaluation.
+
+```bash
+npm i three-slicer/components react
+```
+
+```jsx
+import { useState } from 'react'
+import SettingsPanel from 'three-slicer/components'
+
+function App() {
+  const [settings, setSettings] = useState({})   // sparse map: edited keys only; missing = schema default
+  return <SettingsPanel settings={settings} setSettings={setSettings} />
+}
+```
+
+Props:
+
+| Prop | Type | Description |
+|---|---|---|
+| `settings` | `{ [schemaKey]: value }` | Sparse settings map — the consumer's state is the single source of truth |
+| `setSettings` | `(updater) => void` | React setState-style updater; the only way state leaves the component |
+| `onOptionOpen` | `(key) => void` (optional) | Label click hook for deep links/detail views. Omit → plain labels |
+
+The same `settings` object feeds `deriveKernelParams()` in `three-slicer` and the `<Viewport/>` in `three-slicer/viewer` — one state connects all three.
+
+Ships transpiled ESM (`dist/`); react is a peer dependency. Styling is class-based and unstyled by default (bring your own CSS, or reuse the demo's).
+
+The 3D viewport lives in its own package: `three-slicer/viewer`.
+
+## License
+
+AGPL-3.0-or-later (derived from OrcaSlicer).

package/components/dist/SettingsPanel.js

@@ -0,0 +1,180 @@
+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 { 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;
+  });
+  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));
+}
+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)];
+  });
+}, 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) };
+};
+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);
+  }, [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) => {
+    x(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);
+    } catch {
+      y(!0);
+    }
+  }, E = (a) => {
+    const p = parseFloat(a);
+    return Number.isFinite(p) ? p : 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(
+    "input",
+    {
+      type: "number",
+      min: "1",
+      value: i.w,
+      disabled: n,
+      "data-testid": "bed-w",
+      onChange: (a) => v({ ...i, w: E(a.target.value) })
+    }
+  ), " mm"), /* @__PURE__ */ e.createElement("label", null, "깊이 ", /* @__PURE__ */ e.createElement(
+    "input",
+    {
+      type: "number",
+      min: "1",
+      value: i.d,
+      disabled: n,
+      "data-testid": "bed-d",
+      onChange: (a) => v({ ...i, d: E(a.target.value) })
+    }
+  ), " mm"), /* @__PURE__ */ e.createElement("label", null, "원점 X ", /* @__PURE__ */ e.createElement(
+    "input",
+    {
+      type: "number",
+      value: i.ox,
+      disabled: n,
+      onChange: (a) => v({ ...i, ox: E(a.target.value) })
+    }
+  )), /* @__PURE__ */ e.createElement("label", null, "원점 Y ", /* @__PURE__ */ e.createElement(
+    "input",
+    {
+      type: "number",
+      value: i.oy,
+      disabled: n,
+      onChange: (a) => v({ ...i, oy: E(a.target.value) })
+    }
+  ))), d === "circle" && /* @__PURE__ */ e.createElement("div", { className: "bse-grid" }, /* @__PURE__ */ e.createElement("label", null, "지름 ", /* @__PURE__ */ e.createElement(
+    "input",
+    {
+      type: "number",
+      min: "1",
+      value: h,
+      disabled: n,
+      "data-testid": "bed-dia",
+      onChange: (a) => w(E(a.target.value))
+    }
+  ), " mm")), d === "custom" && /* @__PURE__ */ e.createElement(
+    "textarea",
+    {
+      className: "bse-json" + (g ? " err" : ""),
+      rows: 3,
+      value: c,
+      disabled: n,
+      "data-testid": "bed-json",
+      onChange: (a) => N(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 ?? "");
+}
+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 W(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 }) {
+  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) {
+    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);
+      }));
+    case "checkbox":
+      return /* @__PURE__ */ e.createElement("input", { type: "checkbox", checked: Array.isArray(o) ? !!o[0] : !!o, onChange: (c) => i(c.target.checked), disabled: l });
+    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 });
+    case "textarea":
+      return /* @__PURE__ */ e.createElement("textarea", { rows: 2, value: Array.isArray(o) ? o.join(`
+`) : o ?? "", onChange: (c) => i(c.target.value), disabled: l });
+    case "points":
+      return /* @__PURE__ */ e.createElement("code", { className: "pts" }, JSON.stringify(o ?? []));
+    case "unknown":
+      return /* @__PURE__ */ e.createElement("span", { className: "muted" }, "스키마 없음");
+    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));
+  }
+}
+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 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" }, "빌더 없음"))));
+}
+export {
+  re as default
+};

package/components/styles.css

@@ -0,0 +1,84 @@
+/* @three-slicer/components — SettingsPanel 스타일.
+   Shadow DOM 격리(shadow_host.jsx): ?inline 으로 번들에 내장돼 패널의 shadow root 에
+   주입된다. 호스트 앱 CSS 와 양방향 무간섭 — 클래스명 충돌이 불가능하다. */
+: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; }
+
+/* 25단계 S5: toggle-rules 비활성 + dirty/리셋 */
+.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; }
+.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 — 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 커스텀 위젯) ---- */
+.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; }

package/data/README.md

@@ -0,0 +1,22 @@
+# @three-slicer/data
+
+OrcaSlicer configuration metadata extracted from the original C++ sources, as plain JSON. Used by `three-slicer` (defaults, settings mapping) and `three-slicer/components` (settings UI), and usable standalone for building slicer UIs.
+
+| File | Contents |
+|---|---|
+| `config-schema.json` | 907 print options: type, label, category, tooltip, min/max, mode, enum values/labels, defaults, source line numbers |
+| `config-schema-builddump.json` | Build-verified cross-check: the real `print_config_def` (817 options) dumped from a WASM compile of the original `PrintConfig.cpp` |
+| `ui-tree.json` | Tab → page → group → option tree from `Tab.cpp` (34 pages, 587 option references) |
+| `toggle-rules.json` | 231 enable/disable rules with original C++ `enable_if` condition source |
+| `invalidation-map.json` | Option-change → re-slice step mapping (Print/PrintObject invalidation branches) |
+
+```js
+import schema from 'three-slicer/data/config-schema.json'
+schema.layer_height.default   // 0.2
+```
+
+Regenerated by `web/extract_all.py` from the upstream source tree (see repository).
+
+## License
+
+AGPL-3.0-or-later (derived from OrcaSlicer).