three-slicer 0.1.0 → 0.1.1

package/README.md

@@ -1,44 +1,362 @@
 # 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.
+Browser/WASM 3D-printing slicer package derived from [OrcaSlicer](https://github.com/OrcaSlicer/OrcaSlicer). It can slice binary STL files to G-code in Node or the browser, and it also ships React UI pieces for building a browser slicer: a three.js viewport, GPU toolpath preview, and a schema-driven settings panel.
 
-- **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.
+The package is published as a single npm package, `three-slicer`, with subpath exports for the engine, viewer, components, worker, and extracted OrcaSlicer data.
 
-## Install
+## Links
+
+- Package: [npmjs.com/package/three-slicer](https://www.npmjs.com/package/three-slicer)
+- Source: [kimgh06/Web_Three_Slicer](https://github.com/kimgh06/Web_Three_Slicer)
+- Demo: [slicer.kimgh06.com](https://slicer.kimgh06.com/)
+
+## Features
+
+- WASM slicing engine with Arachne walls, infill patterns, supports, raft/brim/skirt, ironing, arc fitting, multi-material paths, and layer streaming.
+- Headless SDK for Node or browser use with no `three.js` dependency.
+- Browser worker entry for off-main-thread slicing.
+- React `<Viewport/>` for model import, plate layout, transform controls, slicing, G-code export, and GPU toolpath preview.
+- React `<SettingsPanel/>` generated from extracted OrcaSlicer metadata.
+- Extracted data files for custom UIs: config schema, UI tree, toggle rules, and invalidation map.
+- Automatic multithreaded WASM selection on cross-origin-isolated browser pages.
+
+## Installation
 
 ```bash
-npm i three-slicer            # engine only (Node-safe)
-npm i three-slicer react react-dom three   # + viewer/components
+npm i three-slicer
 ```
 
-## Use
+`react`, `react-dom`, and `three` are peer dependencies and npm installs them for you. They stay peers rather than dependencies because React and three must be single instances — a duplicate copy breaks hooks and `instanceof`.
+
+Only the viewer and components import them. If you use the headless engine, they are installed into `node_modules` but never enter your bundle:
+
+| Import path | Needs react/three at runtime |
+| --- | --- |
+| `three-slicer`, `/settings`, `/toggle`, `/worker`, `/wasm`, `/data` | no |
+| `three-slicer/viewer`, `/viewer/toolpath`, `/viewer/loaders` | yes |
+| `three-slicer/components` | react only |
+
+## Quick Start: Headless Slicing
+
+Use the root import when you only need STL-to-G-code slicing.
 
 ```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
+const slicer = await createSlicer()
+
+const result = slicer.slice(stlArrayBuffer, {
+  layer_height: 0.2,
+  first_layer_height: 0.2,
+  line_width: 0.42,
+  wall_loops: 2,
+  infill_density: 0.15,
+  nozzle_diameter: 0.4,
+  filament_diameter: 1.75,
+})
+
+console.log(result.stats.layers)
+console.log(result.gcode)
+
+slicer.dispose()
+```
+
+`slice()` accepts a binary STL as an `ArrayBuffer` or `Uint8Array`. Parameters can be either a kernel params object or a JSON string.
+
+## Streaming Layers
+
+For large models, pass callbacks to receive each sliced layer as it is produced. This avoids keeping the full G-code and layer payload in memory at once.
+
+```js
+const chunks = []
+
+const result = slicer.slice(stlArrayBuffer, params, {
+  onProgress(done, total) {
+    console.log(`${done}/${total}`)
+  },
+  onLayer(layer) {
+    chunks.push(layer.gcode)
+  },
+})
+
+const gcode = chunks.join('')
+console.log(result.stats)
+```
+
+When `onLayer` is set, the returned result carries stats; assemble G-code from the layer callback if you need the full file.
+
+## Quick Start: React Viewer
+
+Use `three-slicer/viewer` when you want a ready-made browser slicer viewport.
+
+```jsx
+import { useState } from 'react'
+import Viewport from 'three-slicer/viewer'
+
+export default function App() {
+  const [settings, setSettings] = useState({})
+
+  return (
+    <Viewport
+      settings={settings}
+      setSettings={setSettings}
+    />
+  )
+}
+```
+
+The viewer handles model loading, drag and drop, transform controls, multi-plate layout, worker slicing, GPU toolpath preview, and G-code export. It supports STL, OBJ, 3MF (including the production extension used by Orca/Bambu/Prusa), AMF, and PLY out of the box; other formats such as STEP can be added with `registerLoader()`. Viewer and component styles are bundled into their Shadow DOM roots, so host app CSS does not need to import package CSS.
+
+## Quick Start: Settings Panel
+
+Use `three-slicer/components` when you want the OrcaSlicer-style settings UI without building the form yourself.
+
+```jsx
+import { useState } from 'react'
+import SettingsPanel from 'three-slicer/components'
+
+export default function App() {
+  const [settings, setSettings] = useState({})
+
+  return (
+    <SettingsPanel
+      settings={settings}
+      setSettings={setSettings}
+    />
+  )
+}
+```
+
+`settings` is a sparse object keyed by OrcaSlicer setting names. Store only edited values; missing keys fall back to schema defaults.
+
+## Full React Example
+
+The viewer and settings panel are designed to share the same `settings` state.
+
+```jsx
+import { useState } from 'react'
 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'
+export default function App() {
+  const [settings, setSettings] = useState({})
+
+  return (
+    <main style={{ display: 'flex', height: '100vh' }}>
+      <Viewport
+        settings={settings}
+        setSettings={setSettings}
+      />
+      <SettingsPanel
+        settings={settings}
+        setSettings={setSettings}
+      />
+    </main>
+  )
+}
 ```
 
-Vite consumers need `worker: { format: 'es' }` and `build: { target: 'es2022' }`.
-Serve with COOP/COEP headers to enable the multithreaded kernel (~2.2× faster).
+The same sparse settings map can feed the settings panel, the viewer, and `deriveKernelParams()`.
+
+## Import Paths
+
+```js
+import { createSlicer, engineWorkerURL } from 'three-slicer'
+import { deriveKernelParams } from 'three-slicer/settings'
+import { disabledKeys, makeCfg } from 'three-slicer/toggle'
+import Viewport from 'three-slicer/viewer'
+import SettingsPanel from 'three-slicer/components'
+import { schema, uiTree } from 'three-slicer/data'
+```
+
+Available subpaths:
+
+| Import path | Use |
+| --- | --- |
+| `three-slicer` | Headless WASM engine SDK |
+| `three-slicer/settings` | Schema defaults and settings-to-kernel mapping |
+| `three-slicer/toggle` | Enable/disable rule evaluation for settings UIs |
+| `three-slicer/worker` | Browser worker entry |
+| `three-slicer/wasm` | Single-threaded Emscripten WASM glue |
+| `three-slicer/wasm-mt` | Multithreaded Emscripten WASM glue |
+| `three-slicer/viewer` | React `<Viewport/>` |
+| `three-slicer/viewer/toolpath` | GPU toolpath renderer utilities |
+| `three-slicer/viewer/loaders` | Model loaders |
+| `three-slicer/components` | React `<SettingsPanel/>` |
+| `three-slicer/data` | Named exports for extracted metadata |
+| `three-slicer/data/*.json` | Extracted OrcaSlicer metadata |
+
+## TypeScript
+
+Type declarations ship with the package — no `@types/*` needed. All 907 setting keys are typed from the config schema, enum values included:
+
+```ts
+import { createSlicer, type SlicerSettings } from 'three-slicer'
+import { deriveKernelParams } from 'three-slicer/settings'
+
+const settings: SlicerSettings = {
+  layer_height: 0.2,
+  sparse_infill_pattern: 'gyroid',   // autocompletes; 'nope' is a type error
+}
+
+const slicer = await createSlicer()
+slicer.slice(stlArrayBuffer, deriveKernelParams(settings))
+```
+
+Requires `"moduleResolution": "bundler"`, `"node16"`, or `"nodenext"`. The declarations are wired through the `exports` field, which the legacy `"node"` resolution ignores.
+
+## Settings Model
+
+There are two related settings shapes:
+
+| Shape | Used by | Description |
+| --- | --- | --- |
+| Sparse OrcaSlicer settings map | `<SettingsPanel/>`, `<Viewport/>` | Object keyed by original OrcaSlicer schema keys. Missing keys use schema defaults. |
+| Kernel params | `slicer.slice()` | Flat object consumed directly by the WASM kernel. |
+
+To convert UI settings to kernel params:
+
+```js
+import { deriveKernelParams } from 'three-slicer/settings'
+
+const settings = {
+  layer_height: 0.25,
+  sparse_infill_density: 15,
+  wall_loops: 3,
+}
+
+const params = deriveKernelParams(settings)
+const result = slicer.slice(stlArrayBuffer, params)
+```
+
+`deriveKernelParams()` maps the curated set of schema keys currently supported by the kernel. Other schema keys can still be displayed by the UI, but they may not affect slicing output yet. Vector options are simplified to their first element.
+
+## Worker Usage
+
+Use a module worker to run slicing off the browser main thread.
+
+```js
+import { engineWorkerURL } from 'three-slicer'
+
+const worker = new Worker(engineWorkerURL(), { type: 'module' })
+
+worker.onmessage = (event) => {
+  const message = event.data
+
+  if (message.type === 'progress') {
+    console.log(message.done, message.total)
+  }
+
+  if (message.type === 'layer') {
+    console.log(message.idx, message.z, message.gcode)
+  }
+
+  if (message.type === 'done') {
+    console.log(message.stats)
+  }
+
+  if (message.type === 'error') {
+    console.error(message.error)
+  }
+}
+```
+
+The worker protocol emits `progress`, `layer`, `done`, and `error` messages. For bundler-specific setups, `three-slicer/worker` exposes the worker entry directly.
+
+## Bundler Notes
+
+Vite consumers should enable ES module workers and an ES2022 build target:
+
+```js
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  worker: { format: 'es' },
+  build: { target: 'es2022' },
+})
+```
+
+For Next.js or webpack apps, render the viewer on the client side and disable Node-only module aliases used by Emscripten guards.
+
+```js
+module.exports = {
+  webpack: (config) => {
+    for (const moduleName of [
+      'node:module',
+      'node:fs',
+      'node:path',
+      'node:url',
+      'node:crypto',
+      'node:worker_threads',
+    ]) {
+      config.resolve.alias[moduleName] = false
+    }
+    return config
+  },
+}
+```
+
+## Multithreaded WASM
+
+The engine ships single-threaded and multithreaded WASM builds. The browser worker automatically uses the multithreaded kernel when the page is cross-origin isolated.
+
+Serve these headers to enable it:
+
+```txt
+Cross-Origin-Opener-Policy: same-origin
+Cross-Origin-Embedder-Policy: require-corp
+```
+
+Without those headers, the engine falls back to the single-threaded kernel.
+
+## Data Files
+
+The package includes extracted OrcaSlicer metadata for custom interfaces:
+
+| File | Use |
+| --- | --- |
+| `three-slicer/data/config-schema.json` | Setting definitions, defaults, labels, units, and option metadata |
+| `three-slicer/data/ui-tree.json` | Tab, page, group, and option layout |
+| `three-slicer/data/toggle-rules.json` | Original enable/disable rule metadata |
+| `three-slicer/data/invalidation-map.json` | Setting invalidation/dependency metadata |
+
+## API Reference
+
+| API | Description |
+| --- | --- |
+| `createSlicer()` | Loads the WASM kernel and returns a slicer handle |
+| `slicer.slice(stl, params, callbacks?)` | Slices binary STL input to G-code or streamed layers |
+| `slicer.paintPrepare(stl)` | Prepares support painting against a model |
+| `slicer.paint(args)` | Paints support enforcer/blocker data |
+| `slicer.paintClear()` | Clears support painting data |
+| `slicer.overlay(enforcer)` | Returns support painting overlay data |
+| `slicer.heapSize()` | Returns current WASM heap size |
+| `slicer.dispose()` | Releases the slicer handle for garbage collection |
+| `engineWorkerURL()` | Returns a browser worker URL |
+| `deriveKernelParams(settings)` | Converts sparse OrcaSlicer settings to kernel params |
+| `<Viewport/>` | React slicer viewport |
+| `<SettingsPanel/>` | React settings form |
+
+## Runtime Support
+
+| Environment | Supported use |
+| --- | --- |
+| Node ESM | Headless slicing |
+| Browser main thread | Headless slicing |
+| Browser worker | Off-main-thread slicing and streaming |
+| React | Viewer and settings panel |
+| three.js | Required by `three-slicer/viewer` |
+
+## Known Limits
+
+- `slice()` currently takes binary STL input at the engine API boundary.
+- The viewer can import STL, OBJ, 3MF, AMF, and PLY, then converts them for slicing.
+- `registerLoader(exts, fn)` from `three-slicer/viewer/loaders` adds any other format. Formats needing a heavy dependency are kept out of the package so it stays runtime-dependency-free — see `web/viewer/src/step_loader.js` for a STEP loader built on `occt-import-js` (OCCT WASM).
+- Not every OrcaSlicer schema key is wired into the WASM kernel yet.
+- Some vector settings are simplified to their first element.
+- Multithreaded WASM requires cross-origin isolation.
+- `three` is pinned as a peer dependency because viewer internals depend on the `TransformControls` API shape.
 
 ## License
 
-AGPL-3.0-or-later — derived from OrcaSlicer.
-Source: https://github.com/kimgh06/Web_Three_Slicer
+AGPL-3.0-or-later. This package is derived from OrcaSlicer. Source is available at [kimgh06/Web_Three_Slicer](https://github.com/kimgh06/Web_Three_Slicer). If you embed it in a web app, make sure your app complies with the AGPL network-use requirements, including offering source code to users where required.

package/components/README.md

@@ -1,6 +1,6 @@
 # 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`).
+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 `packages/pack_check.sh`).
 
 ## `<SettingsPanel/>`
 

package/components/dist/SettingsPanel.js

@@ -1,7 +1,6 @@
 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 { uiTree as M, schema as C } from "three-slicer/data";
 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 }) {
@@ -163,7 +162,7 @@ function V({ optKey: t, settings: r, setSettings: n, disabled: s, onOptionOpen:
   }), 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 }) {
+function ne({ 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));
@@ -176,5 +175,5 @@ function re({ settings: t, setSettings: r, onOptionOpen: n, embedded: s = !1, cu
   })) : /* @__PURE__ */ e.createElement("p", { className: "muted" }, "빌더 없음"))));
 }
 export {
-  re as default
+  ne as default
 };

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/src/data.js

@@ -0,0 +1,12 @@
+// 추출 JSON 4종의 유일한 import 지점.
+//
+// 왜 한 군데로 모으는가: JSON 은 Node 22+ ESM 에서 `with { type: 'json' }` 이 필수인데,
+// Vite/esbuild 는 번들 출력에서 이 attribute 를 떼어낸다(build.target·importAttributesKey 로
+// 막을 수 없음 — 실측). 그래서 같은 JSON 을 "attribute 있는 원본(engine/src/*.js)" 과
+// "attribute 없는 번들(components/dist)" 이 동시에 가리키면 소비자 번들러가
+// "inconsistent import attributes" 로 경고한다. 여기 한 곳만 JSON 을 잡고 나머지는
+// 이 모듈을 external 로 import → 번들에 JSON import 자체가 남지 않아 불일치가 성립하지 않는다.
+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' }

package/engine/src/settings.js

@@ -1,7 +1,7 @@
 // 우측 설정 패널(편집 가능)의 실제 값 → 커널 슬라이스 파라미터 매핑.
 //  - 설정 상태는 sparse 맵(key→value): 편집한 키만 저장, 없으면 config-schema default.
 //  - 벡터형(coFloats/coInts 등)은 첫 원소만 사용/편집(단순화).
-import schema from 'three-slicer/data/config-schema.json'
+import { schema } from './data.js'
 
 export function schemaDefault(key) { return schema[key]?.default }
 export function settingRaw(settings, key) { return (settings && key in settings) ? settings[key] : schemaDefault(key) }

package/engine/src/slicer.worker.js

@@ -47,8 +47,9 @@ self.onmessage = async (e) => {
       try {
         // Module.HEAPU8 은 emscripten 6.x 글루가 노출하지 않음 — embind typed_memory_view 로 버퍼 획득
         const v = Module.sup_progress_view && Module.sup_progress_view()
+        const c = Module.cancel_flag_view && Module.cancel_flag_view()
         if (v && v.buffer instanceof SharedArrayBuffer)
-          self.postMessage({ type: 'supsab', buf: v.buffer, ptr: v.byteOffset })
+          self.postMessage({ type: 'supsab', buf: v.buffer, ptr: v.byteOffset, cancelPtr: c ? c.byteOffset : 0 })
       } catch {}
     }
     // 기본: 슬라이스. 레이어 싱크 등록 → 커널이 레이어마다 콜백(z, idx, gcodeChunk, pathsF32, widthsF32).

package/engine/src/toggle_eval.js

@@ -2,8 +2,7 @@
 //  범위: 뷰어가 다루는 키에 관련된 규칙 중, 아래 하드코딩 로컬로 "완전히" 번역 가능한 것만 적용.
 //  번역 불가(모르는 로컬/enum 비교 등)는 fail-open(활성 유지) — 잘못된 비활성 방지(정직한 부분 구현).
 //  전체 907키·231규칙 완역은 범위 외(README 기록). 참조: toggle-rules.json 의 toggle_print_fff_options.locals.
-import toggles from 'three-slicer/data/toggle-rules.json'
-import schema from 'three-slicer/data/config-schema.json'
+import { toggleRules as toggles, schema } from './data.js'
 
 // 설정값 접근기 (settings 맵 우선, 없으면 스키마 default). 퍼센트("15%")는 숫자로.
 export function makeCfg(settings) {

package/package.json

@@ -1,55 +1,83 @@
 {
   "name": "three-slicer",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Browser/WASM 3D-printing slicer reverse-engineered from OrcaSlicer: slicing engine (Arachne walls, tree/grid supports, multi-material), React viewer with GPU toolpath preview, and schema-driven settings UI.",
   "license": "AGPL-3.0-or-later",
   "type": "module",
   "exports": {
     ".": {
       "types": "./engine/index.d.ts",
-      "import": "./engine/index.js"
+      "default": "./engine/index.js"
     },
-    "./settings": "./engine/src/settings.js",
-    "./toggle": "./engine/src/toggle_eval.js",
-    "./worker": "./engine/src/slicer.worker.js",
-    "./wasm": "./engine/src/slicer_core.js",
-    "./wasm-mt": "./engine/src/slicer_core.mt.js",
-    "./viewer": "./viewer/dist/Viewport.js",
-    "./viewer/toolpath": "./viewer/dist/toolpath_gpu.js",
-    "./viewer/loaders": "./viewer/dist/model_loaders.js",
-    "./components": "./components/dist/SettingsPanel.js",
-    "./data/*": "./data/*"
+    "./settings": {
+      "types": "./types/settings.d.ts",
+      "default": "./engine/src/settings.js"
+    },
+    "./toggle": {
+      "types": "./types/toggle.d.ts",
+      "default": "./engine/src/toggle_eval.js"
+    },
+    "./worker": {
+      "types": "./types/worker.d.ts",
+      "default": "./engine/src/slicer.worker.js"
+    },
+    "./wasm": {
+      "types": "./types/wasm.d.ts",
+      "default": "./engine/src/slicer_core.js"
+    },
+    "./wasm-mt": {
+      "types": "./types/wasm.d.ts",
+      "default": "./engine/src/slicer_core.mt.js"
+    },
+    "./viewer": {
+      "types": "./types/viewer.d.ts",
+      "default": "./viewer/dist/Viewport.js"
+    },
+    "./viewer/toolpath": {
+      "types": "./types/viewer-toolpath.d.ts",
+      "default": "./viewer/dist/toolpath_gpu.js"
+    },
+    "./viewer/loaders": {
+      "types": "./types/viewer-loaders.d.ts",
+      "default": "./viewer/dist/model_loaders.js"
+    },
+    "./components": {
+      "types": "./types/components.d.ts",
+      "default": "./components/dist/SettingsPanel.js"
+    },
+    "./data": {
+      "types": "./types/data.d.ts",
+      "default": "./engine/src/data.js"
+    },
+    "./data/*": {
+      "types": "./types/data/*.d.ts",
+      "default": "./data/*"
+    }
   },
   "scripts": {
-    "build": "vite build --config components/vite.config.js && vite build --config viewer/vite.config.js && cp viewer/src/make_worker.js viewer/dist/make_worker.js"
+    "build": "node types/gen_settings_types.mjs && vite build --config components/vite.config.js && vite build --config viewer/vite.config.js && cp viewer/src/make_worker.js viewer/dist/make_worker.js",
+    "check": "bash pack_check.sh"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
     "three": "^0.160.0"
   },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    },
-    "three": {
-      "optional": true
-    }
-  },
   "devDependencies": {
+    "typescript": "^5.6.0",
     "vite": "^5.4.11"
   },
   "files": [
     "engine",
+    "types",
     "components/dist",
     "viewer/dist",
-    "viewer/src",
     "viewer/styles.css",
     "components/styles.css",
-    "data/*.json",
+    "data/config-schema.json",
+    "data/ui-tree.json",
+    "data/toggle-rules.json",
+    "data/invalidation-map.json",
     "README.md",
     "LICENSE.txt"
   ],

package/types/components.d.ts

@@ -0,0 +1,19 @@
+// three-slicer/components
+import type * as React from 'react'
+import type { SlicerSettings } from './settings-keys.d.ts'
+
+export interface SettingsPanelProps {
+  /** sparse 맵 — 편집한 키만. 없는 키는 config-schema default 가 쓰인다. */
+  settings: SlicerSettings
+  /** React setState 형태. 상태가 컴포넌트 밖으로 나가는 유일한 통로. */
+  setSettings: React.Dispatch<React.SetStateAction<SlicerSettings>>
+  /** 라벨 클릭 — 딥링크/상세용. 생략하면 평범한 라벨(라우터 결합 0). */
+  onOptionOpen?: (optKey: string) => void
+  /** 다른 패널 안에 끼워 넣을 때 */
+  embedded?: boolean
+  /** 스키마 구동 위젯을 키 단위로 교체 (예: `{ printable_area: MyBedEditor }`) */
+  customWidgets?: Record<string, React.ComponentType<any>>
+}
+
+declare const SettingsPanel: React.FC<SettingsPanelProps>
+export default SettingsPanel

package/types/data/config-schema.json.d.ts

@@ -0,0 +1,55 @@
+// three-slicer/data/config-schema.json — OrcaSlicer 원본에서 추출한 907개 옵션 정의.
+// ponytail: 값을 리터럴로 좁히지 않는다. 907키 × 33필드를 리터럴로 추론시키면 소비자 tsc 가 기어간다.
+//   키 단위 정확도가 필요하면 SlicerSettings(three-slicer/settings) 쪽을 쓸 것.
+
+/** 원본 ConfigOptionDef 의 coXxx 타입 태그 */
+export type ConfigOptionType =
+  | 'coBool' | 'coBools'
+  | 'coInt' | 'coInts'
+  | 'coFloat' | 'coFloats'
+  | 'coPercent' | 'coPercents'
+  | 'coFloatOrPercent' | 'coFloatsOrPercents'
+  | 'coString' | 'coStrings'
+  | 'coEnum' | 'coEnums'
+  | 'coPoint' | 'coPoints' | 'coPointsGroups'
+
+/** 907키 중 `type` 과 `defined_in` 만 전부 존재한다. 나머지는 전부 optional. */
+export interface ConfigOption {
+  type: ConfigOptionType
+  /** 추출된 원본 함수명 (예: 'init_common_params') */
+  defined_in: string
+  line?: number
+  mode?: string
+  label?: string
+  full_label?: string
+  tooltip?: string
+  sidetext?: string
+  category?: string
+  default?: unknown
+  default_type?: string
+  default_raw?: string
+  enum_type?: string
+  enum_values?: string[]
+  enum_labels?: string[]
+  enum_values_copied_from?: string
+  enum_labels_copied_from?: string
+  min?: number
+  max?: number
+  max_literal?: unknown
+  gui_type?: string
+  gui_flags?: string
+  ratio_over?: string
+  nullable?: boolean
+  readonly?: boolean
+  multiline?: boolean
+  full_width?: boolean
+  height?: number
+  cli?: string
+  cli_params?: string
+  aliases?: string[]
+  plugin_type?: string
+  generated_by_loop?: unknown
+}
+
+declare const schema: Record<string, ConfigOption>
+export default schema