three-slicer 0.1.0 → 0.1.2

package/viewer/dist/toolpath_gpu.js

@@ -1,33 +1,4 @@
-const le = [
-  0,
-  1,
-  2,
-  0,
-  2,
-  3,
-  // front spike
-  0,
-  3,
-  4,
-  0,
-  4,
-  5,
-  // right/bottom body
-  0,
-  5,
-  6,
-  0,
-  6,
-  1,
-  // left/top body
-  5,
-  4,
-  7,
-  5,
-  7,
-  6
-  // back spike
-], U = {
+const U = {
   0: [0.42, 0.45, 0.5],
   1: [0.85, 0.51, 0.17],
   2: [0.21, 0.45, 0.76],
@@ -45,42 +16,61 @@ function ie(t) {
   const i = Math.round(t[0] * 255), s = Math.round(t[1] * 255), n = Math.round(t[2] * 255);
   return i << 16 | s << 8 | n;
 }
-function ue(t, i) {
+const le = { 1: "Wall", 2: "Sparse", 3: "Solid", 4: "Skirt", 5: "Support", 6: "Raft", 7: "Gap fill", 8: "Thin wall", 9: "Bridge", 10: "Ironing", 11: "Prime" }, _e = [
+  [11, 44, 122],
+  [19, 89, 133],
+  [28, 136, 145],
+  [4, 214, 15],
+  [170, 242, 0],
+  [252, 249, 3],
+  [245, 206, 10],
+  [227, 136, 32],
+  [209, 104, 48],
+  [194, 82, 60],
+  [148, 38, 22]
+].map((t) => [t[0] / 255, t[1] / 255, t[2] / 255]);
+function ce(t, i, s, n) {
+  const l = n.length;
+  if (!(s > i)) return n[0];
+  const a = (s - i) / (l - 1), h = (t - i) / a, _ = Math.max(0, Math.min(l - 1, Math.floor(h))), y = Math.max(0, Math.min(l - 1, _ + 1)), v = h - _, r = n[_], x = n[y];
+  return [r[0] + (x[0] - r[0]) * v, r[1] + (x[1] - r[1]) * v, r[2] + (x[2] - r[2]) * v];
+}
+function pe(t, i) {
   const s = t.length, n = i > 0 ? i : 0.42, l = new Array(s);
   for (let e = 0; e < s; e++) {
     const o = t[e].z;
     l[e] = Math.max(0.02, e === 0 ? o : o - t[e - 1].z);
   }
-  const a = [], h = [], _ = [], y = [], v = [], r = [], x = [], b = [], A = [], M = [], L = new Float64Array(16), P = [], k = [];
+  const a = [], h = [], _ = [], y = [], v = [], r = [], x = [], b = [], A = [], M = [], L = new Float64Array(16), P = [], D = [];
   let W = -1, $ = 0, R = 0, H = 0, E = -1, c = 0;
-  const d = 1e-4, u = (e, o, g, m, p, w) => (a.push(e), h.push(o), _.push(g), r.push(m), y.push(p), v.push(w), x.push(c), b.push(!1), a.length - 1);
+  const d = 1e-4, p = (e, o, g, m, u, w) => (a.push(e), h.push(o), _.push(g), r.push(m), y.push(u), v.push(w), x.push(c), b.push(!1), a.length - 1);
   for (let e = 0; e < s; e++) {
     const o = t[e].paths, g = t[e].widths, m = l[e];
     if (c = e, !!o)
-      for (let p = 0; p < o.length; p += 8) {
-        const w = o[p + 3], F = o[p], I = o[p + 1], G = o[p + 2], S = o[p + 4], V = o[p + 5], B = o[p + 6];
+      for (let u = 0; u < o.length; u += 8) {
+        const w = o[u + 3], F = o[u], S = o[u + 1], G = o[u + 2], I = o[u + 4], V = o[u + 5], B = o[u + 6];
         if (w === 0) {
-          P.push(F, I, G, S, V, B), k.push(e);
+          P.push(F, S, G, I, V, B), D.push(e);
           continue;
         }
-        const O = g && g[p / 8] > 0 ? g[p / 8] : n;
-        w < 16 && (L[w] += Math.hypot(S - F, V - I));
-        let D;
-        W >= 0 && E === w && Math.abs($ - F) < d && Math.abs(R - I) < d && Math.abs(H - G) < d ? (D = W, u(S, V, B, w, m, O)) : (D = u(F, I, G, w, m, O), u(S, V, B, w, m, O)), b[D] = !0, W = D + 1, $ = S, R = V, H = B, E = w, A.push(D), M.push(e);
+        const O = g && g[u / 8] > 0 ? g[u / 8] : n;
+        w < 16 && (L[w] += Math.hypot(I - F, V - S));
+        let k;
+        W >= 0 && E === w && Math.abs($ - F) < d && Math.abs(R - S) < d && Math.abs(H - G) < d ? (k = W, p(I, V, B, w, m, O)) : (k = p(F, S, G, w, m, O), p(I, V, B, w, m, O)), b[k] = !0, W = k + 1, $ = I, R = V, H = B, E = w, A.push(k), M.push(e);
       }
   }
   const f = a.length, C = A.length, z = new Float32Array(f * 4), Y = new Float32Array(f * 4);
-  let ee = 0, ne = !1, j = 1 / 0, T = 1 / 0, X = 1 / 0, Z = -1 / 0, q = -1 / 0, J = -1 / 0;
+  let ee = 0, ne = !1, T = 1 / 0, j = 1 / 0, X = 1 / 0, Z = -1 / 0, q = -1 / 0, J = -1 / 0;
   for (let e = 0; e < f; e++) {
-    const o = y[e], g = a[e], m = h[e], p = _[e] - 0.5 * o;
-    z[e * 4] = g, z[e * 4 + 1] = m, z[e * 4 + 2] = p;
+    const o = y[e], g = a[e], m = h[e], u = _[e] - 0.5 * o;
+    z[e * 4] = g, z[e * 4 + 1] = m, z[e * 4 + 2] = u;
     const w = e > 0 && b[e - 1], F = b[e];
-    let I = 0;
+    let S = 0;
     if (w || F) {
-      const G = w ? a[e] - a[e - 1] : 0, S = w ? h[e] - h[e - 1] : 0, V = w ? _[e] - _[e - 1] : 0, B = F ? a[e + 1] - a[e] : 0, O = F ? h[e + 1] - h[e] : 0, D = F ? _[e + 1] - _[e] : 0;
-      I = Math.atan2(G * O - S * B, G * B + S * O + V * D);
+      const G = w ? a[e] - a[e - 1] : 0, I = w ? h[e] - h[e - 1] : 0, V = w ? _[e] - _[e - 1] : 0, B = F ? a[e + 1] - a[e] : 0, O = F ? h[e + 1] - h[e] : 0, k = F ? _[e + 1] - _[e] : 0;
+      S = Math.atan2(G * O - I * B, G * B + I * O + V * k);
     }
-    Y[e * 4] = o, Y[e * 4 + 1] = v[e], Y[e * 4 + 2] = I, Y[e * 4 + 3] = ie(U[r[e]] || U[1]), (!Number.isFinite(g) || !Number.isFinite(m) || !Number.isFinite(p) || !Number.isFinite(I)) && (ne = !0), ee = Math.max(ee, Math.abs(g), Math.abs(m), Math.abs(p)), g < j && (j = g), g > Z && (Z = g), m < T && (T = m), m > q && (q = m), p < X && (X = p), p > J && (J = p);
+    Y[e * 4] = o, Y[e * 4 + 1] = v[e], Y[e * 4 + 2] = S, Y[e * 4 + 3] = ie(U[r[e]] || U[1]), (!Number.isFinite(g) || !Number.isFinite(m) || !Number.isFinite(u) || !Number.isFinite(S)) && (ne = !0), ee = Math.max(ee, Math.abs(g), Math.abs(m), Math.abs(u)), g < T && (T = g), g > Z && (Z = g), m < j && (j = m), m > q && (q = m), u < X && (X = u), u > J && (J = u);
   }
   const te = new Uint32Array(C * 4);
   for (let e = 0; e < C; e++)
@@ -96,24 +86,23 @@ function ue(t, i) {
       oe[o + 1] = e;
     }
   }
-  const Q = k.length, N = new Float32Array(Q * 6);
+  const Q = D.length, N = new Float32Array(Q * 6);
   for (let e = 0; e < N.length; e++) N[e] = P[e];
   for (let e = 0; e < N.length; e += 3) {
     const o = N[e], g = N[e + 1], m = N[e + 2];
-    o < j && (j = o), o > Z && (Z = o), g < T && (T = g), g > q && (q = g), m < X && (X = m), m > J && (J = m);
+    o < T && (T = o), o > Z && (Z = o), g < j && (j = g), g > q && (q = g), m < X && (X = m), m > J && (J = m);
   }
   const re = new Int32Array(s + 1);
   {
     let e = 0;
     for (let o = 0; o < s; o++) {
-      for (; e < Q && k[e] === o; ) e++;
+      for (; e < Q && D[e] === o; ) e++;
       re[o + 1] = e;
     }
   }
-  const se = f + Q > 0 ? { min: [j, T, X], max: [Z, q, J] } : null;
+  const se = f + Q > 0 ? { min: [T, j, X], max: [Z, q, J] } : null;
   return { position: z, hwa: Y, segIndex: te, nV: f, nSeg: C, layerSegPrefix: oe, travelPos: N, travelPrefix: re, nTrav: Q, layerCount: s, maxAbs: ee, hasNaN: ne, meta: K, typeLengths: L, bbox: se };
 }
-const _e = { 1: "벽", 2: "스파스", 3: "솔리드", 4: "스커트", 5: "서포트", 6: "래프트", 7: "갭필", 8: "씬월", 9: "브리지", 10: "아이어닝", 11: "프라임" };
 function ve(t) {
   let i = 0;
   for (let n = 1; n < 16; n++) i += t[n] || 0;
@@ -121,74 +110,11 @@ function ve(t) {
   if (i <= 0) return s;
   for (let n = 1; n < 16; n++) {
     const l = t[n] || 0;
-    l > 0 && s.push({ type: n, label: _e[n] || "t" + n, pct: 100 * l / i, color: U[n] || U[1] });
+    l > 0 && s.push({ type: n, label: le[n] || "t" + n, pct: 100 * l / i, color: U[n] || U[1] });
   }
   return s.sort((n, l) => l.pct - n.pct);
 }
-const ce = [
-  [11, 44, 122],
-  [19, 89, 133],
-  [28, 136, 145],
-  [4, 214, 15],
-  [170, 242, 0],
-  [252, 249, 3],
-  [245, 206, 10],
-  [227, 136, 32],
-  [209, 104, 48],
-  [194, 82, 60],
-  [148, 38, 22]
-].map((t) => [t[0] / 255, t[1] / 255, t[2] / 255]);
-function he(t, i, s, n) {
-  const l = n.length;
-  if (!(s > i)) return n[0];
-  const a = (s - i) / (l - 1), h = (t - i) / a, _ = Math.max(0, Math.min(l - 1, Math.floor(h))), y = Math.max(0, Math.min(l - 1, _ + 1)), v = h - _, r = n[_], x = n[y];
-  return [r[0] + (x[0] - r[0]) * v, r[1] + (x[1] - r[1]) * v, r[2] + (x[2] - r[2]) * v];
-}
-const ae = [
-  { key: "feature", label: "Feature type", cont: !1, unit: "" },
-  { key: "speed", label: "Speed", cont: !0, unit: "mm/s" },
-  { key: "height", label: "Layer Height", cont: !0, unit: "mm" },
-  { key: "width", label: "Line Width", cont: !0, unit: "mm" },
-  { key: "fan", label: "Fan Speed", cont: !0, unit: "%" },
-  { key: "temp", label: "Temperature", cont: !0, unit: "°C" }
-];
-function de(t, i, s, n) {
-  const l = i.vType[s], a = i.vLayer[s], h = a === 0;
-  switch (t) {
-    case "height":
-      return i.vHeight[s];
-    case "width":
-      return i.vWidth[s];
-    case "speed":
-      return h ? n.firstLayerSpeed : n.speedByType[l] ?? n.speedByType[1];
-    case "fan":
-      return a < n.closeFanLayers ? 0 : l === 9 ? 100 : n.fanNormal;
-    case "temp":
-      return h ? n.tempFirst : n.tempNormal;
-    default:
-      return 0;
-  }
-}
-function ge(t, i, s) {
-  const { meta: n, nV: l } = t, a = new Float32Array(l * 4), h = ae.find((r) => r.key === i) || ae[0];
-  if (!h.cont) {
-    for (let r = 0; r < l; r++) a[r * 4] = ie(U[n.vType[r]] || U[1]);
-    return { color: a, min: 0, max: 0, viewType: i, label: h.label, unit: h.unit, cont: !1 };
-  }
-  let _ = 1 / 0, y = -1 / 0;
-  const v = new Float32Array(l);
-  for (let r = 0; r < l; r++) {
-    const x = de(i, n, r, s);
-    v[r] = x, x < _ && (_ = x), x > y && (y = x);
-  }
-  Number.isFinite(_) || (_ = 0, y = 1);
-  for (let r = 0; r < l; r++) {
-    const x = he(v[r], _, y, ce);
-    a[r * 4] = ie(x);
-  }
-  return { color: a, min: _, max: y, viewType: i, label: h.label, unit: h.unit, cont: !0 };
-}
-const fe = `
+const he = `
 precision highp float;
 precision highp int;
 precision highp sampler2D;
@@ -209,11 +135,11 @@ uniform mat4 projection_matrix;
 uniform vec3 camera_position;
 uniform sampler2D position_tex;
 uniform sampler2D height_width_angle_tex;
-uniform int layer_lo;   // 25단계: 이중 슬라이더 하한(레이어). 범위 밖 세그먼트는 셰이더가 O(1) 클립.
-uniform int layer_hi;   //          상한은 instanceCount 로 컷(레이어 순 정렬).
+uniform int layer_lo;   // stage 25: dual slider lower bound (layer). The shader clips out-of-range segments in O(1).
+uniform int layer_hi;   //          the upper bound is cut via instanceCount (sorted by layer).
 in float vertex_id_float;
-in uint seg_id_a_u;     // 인스턴스 어트리뷰트(구 segment_index_tex.r) — 어트리뷰트 fetch 가 texelFetch 보다 쌈
-in uint seg_layer_u;    // 인스턴스 어트리뷰트(구 segment_index_tex.g)
+in uint seg_id_a_u;     // instance attribute (formerly segment_index_tex.r) — attribute fetch is cheaper than texelFetch
+in uint seg_layer_u;    // instance attribute (formerly segment_index_tex.g)
 out vec3 color;
 vec3 decode_color(float col) {
   int c = int(round(col));
@@ -236,7 +162,7 @@ ivec2 tex_coord(sampler2D sampler, int id) {
 void main() {
   int vertex_id = int(vertex_id_float);
   int seg_layer = int(seg_layer_u);
-  if (seg_layer < layer_lo || seg_layer > layer_hi) { gl_Position = vec4(2.0, 2.0, 2.0, 1.0); return; }   // 범위 밖 → 클립
+  if (seg_layer < layer_lo || seg_layer > layer_hi) { gl_Position = vec4(2.0, 2.0, 2.0, 1.0); return; }   // out of range -> clip
   int id_a = int(seg_id_a_u);
   int id_b = id_a + 1;
   vec3 pos_a = texelFetch(position_tex, tex_coord(position_tex, id_a), 0).xyz;
@@ -308,22 +234,51 @@ void main() {
   color = color_base * lighting(eye_position, eye_normal);
   gl_Position = projection_matrix * vec4(eye_position, 1.0);
 }
-`, pe = `
+`, de = `
 precision highp float;
 in vec3 color;
 out vec4 fragment_color;
 void main() {
   fragment_color = vec4(color, 1.0);
 }
-`;
-function me(t, i) {
+`, fe = [
+  0,
+  1,
+  2,
+  0,
+  2,
+  3,
+  // front spike
+  0,
+  3,
+  4,
+  0,
+  4,
+  5,
+  // right/bottom body
+  0,
+  5,
+  6,
+  0,
+  6,
+  1,
+  // left/top body
+  5,
+  4,
+  7,
+  5,
+  7,
+  6
+  // back spike
+];
+function ge(t, i) {
   const s = (c, d) => {
-    const u = Math.min(2048, Math.max(1, d)), f = Math.max(1, Math.ceil(d / u)), C = new Float32Array(u * f * 4);
-    C.set(c.subarray(0, Math.min(c.length, u * f * 4)));
-    const z = new t.DataTexture(C, u, f, t.RGBAFormat, t.FloatType);
+    const p = Math.min(2048, Math.max(1, d)), f = Math.max(1, Math.ceil(d / p)), C = new Float32Array(p * f * 4);
+    C.set(c.subarray(0, Math.min(c.length, p * f * 4)));
+    const z = new t.DataTexture(C, p, f, t.RGBAFormat, t.FloatType);
     return z.minFilter = z.magFilter = t.NearestFilter, z.generateMipmaps = !1, z.needsUpdate = !0, z;
   }, n = s(i.position, i.nV), l = s(i.hwa, i.nV), a = new t.InstancedBufferGeometry();
-  a.setIndex(le), a.setAttribute("position", new t.BufferAttribute(new Float32Array(8 * 3), 3)), a.setAttribute("vertex_id_float", new t.BufferAttribute(new Float32Array([0, 1, 2, 3, 4, 5, 6, 7]), 1));
+  a.setIndex(fe), a.setAttribute("position", new t.BufferAttribute(new Float32Array(8 * 3), 3)), a.setAttribute("vertex_id_float", new t.BufferAttribute(new Float32Array([0, 1, 2, 3, 4, 5, 6, 7]), 1));
   const h = new t.InstancedInterleavedBuffer(i.segIndex, 4);
   a.setAttribute("seg_id_a_u", new t.InterleavedBufferAttribute(h, 1, 0)), a.setAttribute("seg_layer_u", new t.InterleavedBufferAttribute(h, 1, 1)), a.instanceCount = 0;
   const _ = new t.RawShaderMaterial({
@@ -337,50 +292,94 @@ function me(t, i) {
       layer_lo: { value: 0 },
       layer_hi: { value: i.layerCount }
     },
-    vertexShader: fe,
-    fragmentShader: pe,
+    vertexShader: he,
+    fragmentShader: de,
     side: t.DoubleSide
   }), y = new t.Mesh(a, _);
   let v = null;
   if (i.bbox) {
-    const { min: c, max: d } = i.bbox, u = new t.Vector3((c[0] + d[0]) / 2, (c[1] + d[1]) / 2, (c[2] + d[2]) / 2), f = Math.hypot(d[0] - c[0], d[1] - c[1], d[2] - c[2]) / 2 + 2;
-    v = new t.Sphere(u, f);
+    const { min: c, max: d } = i.bbox, p = new t.Vector3((c[0] + d[0]) / 2, (c[1] + d[1]) / 2, (c[2] + d[2]) / 2), f = Math.hypot(d[0] - c[0], d[1] - c[1], d[2] - c[2]) / 2 + 2;
+    v = new t.Sphere(p, f);
   }
   y.frustumCulled = !!v, v && (a.boundingSphere = v);
   const r = new t.Matrix4(), x = new t.Vector3();
-  y.onBeforeRender = (c, d, u) => {
-    _.uniforms.projection_matrix.value.copy(u.projectionMatrix), _.uniforms.view_matrix.value.multiplyMatrices(u.matrixWorldInverse, y.matrixWorld), r.copy(y.matrixWorld).invert(), u.getWorldPosition(x).applyMatrix4(r), _.uniforms.camera_position.value.copy(x);
+  y.onBeforeRender = (c, d, p) => {
+    _.uniforms.projection_matrix.value.copy(p.projectionMatrix), _.uniforms.view_matrix.value.multiplyMatrices(p.matrixWorldInverse, y.matrixWorld), r.copy(y.matrixWorld).invert(), p.getWorldPosition(x).applyMatrix4(r), _.uniforms.camera_position.value.copy(x);
   };
   const b = new t.BufferGeometry();
   b.setAttribute("position", new t.BufferAttribute(i.travelPos, 3)), b.setDrawRange(0, 0);
   const A = new t.LineSegments(b, new t.LineBasicMaterial({ color: 7041658 }));
   A.frustumCulled = !!v, A.visible = !1, v && (b.boundingSphere = v);
   let M = !1, L = 0, P = i.layerCount - 1;
-  const k = () => {
+  const D = () => {
     const c = i.travelPrefix[L], d = i.travelPrefix[P + 1];
     b.setDrawRange(M ? c * 2 : 0, M ? (d - c) * 2 : 0);
   }, W = (c, d) => {
-    const u = i.layerCount;
-    L = Math.max(0, Math.min(u - 1, c | 0)), P = Math.max(L, Math.min(u - 1, d | 0)), _.uniforms.layer_lo.value = L, _.uniforms.layer_hi.value = P, a.instanceCount = i.layerSegPrefix[P + 1], k();
+    const p = i.layerCount;
+    L = Math.max(0, Math.min(p - 1, c | 0)), P = Math.max(L, Math.min(p - 1, d | 0)), _.uniforms.layer_lo.value = L, _.uniforms.layer_hi.value = P, a.instanceCount = i.layerSegPrefix[P + 1], D();
   };
   return { mesh: y, travLines: A, setVisibleLayers: (c) => W(0, (c | 0) - 1), setLayerRange: W, setTravelVisible: (c) => {
-    M = !!c, A.visible = M, k();
+    M = !!c, A.visible = M, D();
   }, setColors: (c) => {
-    const d = l.image.data, u = Math.min(c.length, d.length) / 4;
-    for (let f = 0; f < u; f++) d[f * 4 + 3] = c[f * 4];
+    const d = l.image.data, p = Math.min(c.length, d.length) / 4;
+    for (let f = 0; f < p; f++) d[f * 4 + 3] = c[f * 4];
     l.needsUpdate = !0;
   }, dispose: () => {
     a.dispose(), _.dispose(), n.dispose(), l.dispose(), b.dispose(), A.material.dispose();
   }, nSeg: i.nSeg, layerCount: i.layerCount };
 }
+const ae = [
+  { key: "feature", label: "Feature type", cont: !1, unit: "" },
+  { key: "speed", label: "Speed", cont: !0, unit: "mm/s" },
+  { key: "height", label: "Layer Height", cont: !0, unit: "mm" },
+  { key: "width", label: "Line Width", cont: !0, unit: "mm" },
+  { key: "fan", label: "Fan Speed", cont: !0, unit: "%" },
+  { key: "temp", label: "Temperature", cont: !0, unit: "°C" }
+];
+function ue(t, i, s, n) {
+  const l = i.vType[s], a = i.vLayer[s], h = a === 0;
+  switch (t) {
+    case "height":
+      return i.vHeight[s];
+    case "width":
+      return i.vWidth[s];
+    case "speed":
+      return h ? n.firstLayerSpeed : n.speedByType[l] ?? n.speedByType[1];
+    case "fan":
+      return a < n.closeFanLayers ? 0 : l === 9 ? 100 : n.fanNormal;
+    case "temp":
+      return h ? n.tempFirst : n.tempNormal;
+    default:
+      return 0;
+  }
+}
+function me(t, i, s) {
+  const { meta: n, nV: l } = t, a = new Float32Array(l * 4), h = ae.find((r) => r.key === i) || ae[0];
+  if (!h.cont) {
+    for (let r = 0; r < l; r++) a[r * 4] = ie(U[n.vType[r]] || U[1]);
+    return { color: a, min: 0, max: 0, viewType: i, label: h.label, unit: h.unit, cont: !1 };
+  }
+  let _ = 1 / 0, y = -1 / 0;
+  const v = new Float32Array(l);
+  for (let r = 0; r < l; r++) {
+    const x = ue(i, n, r, s);
+    v[r] = x, x < _ && (_ = x), x > y && (y = x);
+  }
+  Number.isFinite(_) || (_ = 0, y = 1);
+  for (let r = 0; r < l; r++) {
+    const x = ce(v[r], _, y, _e);
+    a[r * 4] = ie(x);
+  }
+  return { color: a, min: _, max: y, viewType: i, label: h.label, unit: h.unit, cont: !0 };
+}
 export {
-  ce as DEFAULT_RANGES_COLORS,
+  _e as DEFAULT_RANGES_COLORS,
   U as TYPE_COLOR,
-  _e as TYPE_LABEL,
-  le as VERTEX_DATA,
+  le as TYPE_LABEL,
+  fe as VERTEX_DATA,
   ae as VIEW_TYPES,
-  ue as buildSegmentData,
-  ge as computeColors,
-  me as makeToolpath,
+  pe as buildSegmentData,
+  me as computeColors,
+  ge as makeToolpath,
   ve as roleRatios
 };

package/viewer/styles.css

@@ -1,14 +1,14 @@
-/* Shadow DOM 격리(shadow_host.jsx) — 이 파일은 ?inline 으로 번들에 문자열로 내장돼
-   shadow root 에 주입된다. 외부 리셋(*{box-sizing} 등)이 닿지 않으므로 여기서 명시한다. */
+/* Shadow DOM isolation (shadow_host.jsx) — this file is inlined into the bundle as a string via ?inline
+   and injected into the shadow root. Outside resets (*{box-sizing}, …) cannot reach it, so they are spelled out here. */
 :host { display: contents; }
 * { box-sizing: border-box; }
 
-/* ===== 27단계: 데스크톱형 셸 (상단바 · 좌측 레일 · 중앙 뷰포트 · 우측 사이드바) ===== */
+/* ===== Stage 27: desktop-style shell (top bar · left rail · center viewport · right sidebar) ===== */
 .app-shell { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0e1216; color: #cdd6dd;
   font: 14px/1.5 -apple-system, "Segoe UI", sans-serif; }
 .app-body { flex: 1 1 auto; display: flex; min-height: 0; }
 
-/* S1 상단바 */
+/* S1 top bar */
 .topbar { flex: 0 0 44px; height: 44px; display: flex; align-items: center; padding: 0 12px; gap: 10px;
   background: #161b21; border-bottom: 1px solid #262d35; }
 .topbar .tb-left, .topbar .tb-right { flex: 1 1 0; display: flex; align-items: center; gap: 8px; }
@@ -25,7 +25,7 @@
 .tb-tabs button:disabled { color: #5a6570; cursor: not-allowed; }
 .tb-icon { width: 28px; height: 28px; border: 1px solid #2c353d; background: #20272f; color: #7d8b96; border-radius: 6px; font-size: 15px; cursor: not-allowed; }
 
-/* S3 좌측 기즈모 레일 */
+/* S3 left gizmo rail */
 .left-rail { flex: 0 0 48px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 0;
   background: #12171c; border-right: 1px solid #232a31; }
 .left-rail button { width: 36px; height: 36px; border: 1px solid transparent; border-radius: 8px; background: transparent;
@@ -36,12 +36,12 @@
 .left-rail button.on img { opacity: 1; filter: brightness(1.6); }
 .rail-sep { width: 26px; height: 1px; background: #2a323a; margin: 3px 0; }
 
-/* 중앙 뷰포트 칼럼 */
+/* Center viewport column */
 .viewport-col { position: relative; flex: 1 1 auto; min-width: 0; background: #161a1e; }
 .vp-top-toolbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center;
   gap: 3px; background: rgba(18,23,28,.85); padding: 4px; border-radius: 9px; border: 1px solid #2a323a; z-index: 3;
-  /* 33단계: 버튼이 늘어남. flex-wrap 은 절대배치 박스의 shrink-to-fit 폭을 붕괴시켜(실측 848→424px)
-     내용이 다 들어가는데도 2줄로 접힌다. 한 줄을 유지하고, 좁은 뷰포트에서만 가로 스크롤로 흘린다. */
+  /* Stage 33: more buttons. flex-wrap collapses the shrink-to-fit width of an absolutely positioned box (measured 848 -> 424px),
+     folding into two rows even when everything fits. Keep one row and let narrow viewports scroll horizontally instead. */
   max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; }
 .vp-top-toolbar::-webkit-scrollbar { display: none; }
 .vp-top-toolbar > * { flex: 0 0 auto; }
@@ -52,7 +52,7 @@
 .vp-top-toolbar button:disabled { opacity: .32; cursor: not-allowed; }
 .vtt-sep { width: 1px; align-self: stretch; background: #333c45; margin: 3px 3px; }
 
-/* 29단계-2: 플레이트 탭바 + 슬라이스 드롭다운 */
+/* Stage 29-2: plate tab bar + slice dropdown */
 .plate-bar { position: absolute; right: 14px; bottom: 30px; display: flex; align-items: center; gap: 4px; z-index: 3;
   background: rgba(18,23,28,.85); border: 1px solid #2a323a; border-radius: 9px; padding: 4px; }
 .plate-bar button { min-width: 26px; height: 26px; border: 1px solid #2c353d; background: #1a2027; color: #9fb3c0;
@@ -68,7 +68,7 @@
   color: #24282e; cursor: pointer; font-size: 13px; }
 .slice-menu button:hover { background: #eef7f1; }
 
-/* 페인팅 플로팅 패널 */
+/* Floating painting panel */
 .brush-panel { position: absolute; top: 58px; left: 14px; width: 214px; background: rgba(22,27,33,.95);
   border: 1px solid #2c353d; border-radius: 10px; padding: 10px; z-index: 4; box-shadow: 0 3px 14px rgba(0,0,0,.45); }
 .bp-title { font-weight: 600; margin-bottom: 6px; color: #cdd6dd; }
@@ -80,12 +80,12 @@
 .bp-radius input { width: 100%; }
 .bp-counts { margin-top: 6px; font-size: 11px; }
 
-/* Preview 좌하단 stats 카드 */
+/* Preview stats card, bottom left */
 .stats-card { position: absolute; left: 14px; bottom: 32px; background: rgba(22,27,33,.93); border: 1px solid #2c353d;
   border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.7; z-index: 2; color: #cdd6dd; }
 .stats-card b { color: #9fe3bd; }
 
-/* S4 우측 사이드바 (라이트) */
+/* S4 right sidebar (light) */
 .sidebar { flex: 0 0 384px; width: 384px; display: flex; flex-direction: column; background: #eef0f2; color: #24282e;
   border-left: 1px solid #d5d8dd; min-height: 0; }
 .sidebar-scroll { flex: 1 1 auto; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
@@ -114,12 +114,12 @@
 .obj-del { border: 0; background: #fbe9ec; color: #d0435a; border-radius: 5px; cursor: pointer; padding: 0 6px; }
 .side-card .slice-support { color: #444; font-size: 12px; margin: 5px 0 0; }
 
-/* 프로세스 카드 = 설정 패널 임베드 (라이트, 전폭) */
+/* Process card = embedded settings panel (light, full width) */
 .process-card { padding: 8px; }
-/* 임베드된 SettingsPanel 의 폭·테두리 오버라이드는 이제 패널 자신의 shadow 안 규칙
-   (:host(.sp-embedded), components/styles.css) — 여기서는 경계 너머라 닿지 않는다. */
+/* Width/border overrides for the embedded SettingsPanel now live in the panel's own shadow rules
+   (:host(.sp-embedded), components/styles.css) — they are across the boundary and unreachable from here. */
 
-/* Preview 컨트롤(라이트 카드 내부) 오버라이드 */
+/* Preview control overrides (inside the light card) */
 .side-card .view-type-row { color: #444; }
 .side-card .view-type-row select, .side-card .obj-ext { background: #fff; color: #222; border: 1px solid #ccd0d5; }
 .side-card .slice-layer label { color: #444; font-size: 12px; }
@@ -128,9 +128,11 @@
 .side-card .layer-ctl button { background: #f1f2f4; color: #333; border: 1px solid #d3d6db; }
 .side-card .layer-ctl button.on { background: #00ae42; color: #fff; border-color: #00ae42; }
 
-/* ⑤ 하단 고정 버튼 바 */
+/* (5) Fixed bottom button bar */
 .side-bottom { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px; border-top: 1px solid #dcdfe3; background: #e6e9ec; }
 .side-bottom .slice-btn { flex: 1.4; margin: 0; }
+.auto-slice { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #444; cursor: pointer; white-space: nowrap; user-select: none; }
+.auto-slice input { margin: 0; }
 .export-btn { flex: 1; text-align: center; padding: 9px; border-radius: 8px; background: #dfe6ea; color: #1f6feb;
   border: 1px solid #c7d2da; text-decoration: none; font-weight: 600; cursor: pointer; font-size: 13px; }
 .export-btn:hover { background: #d3dee4; }
@@ -143,7 +145,7 @@
 .vp-status { position: absolute; bottom: 8px; left: 12px; right: 12px; z-index: 1;
   font-size: 11.5px; color: #9fe3bd; font-family: ui-monospace, monospace;
   text-shadow: 0 1px 2px #000; pointer-events: none; }
-/* ---- Slice 상태 표시 (뷰포트 오버레이) ---- */
+/* ---- Slice status display (viewport overlay) ---- */
 .slice-warn { color: #f0c060; margin: 4px 0; }
 .slice-btn { width: 100%; margin-top: 6px; padding: 7px; border: 0; border-radius: 7px;
   background: #00ae42; color: #fff; font-weight: 700; cursor: pointer; }
@@ -155,7 +157,7 @@
 .slice-layer input[type=range] { width: 100%; }
 .slice-travel { color: #aebcc6; display: flex; align-items: center; gap: 4px; }
 
-/* 25단계 S6: 뷰 타입 셀렉트 · 이중 슬라이더 · 그라디언트 범례 */
+/* Stage 25 S6: view type select · dual slider · gradient legend */
 .view-type-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #aebcc6; }
 .view-type-row select { flex: 1; background: #10141a; color: #eee; border: 1px solid #2c353d; border-radius: 4px; padding: 2px 4px; }
 .dual-slider { position: relative; height: 22px; }
@@ -176,7 +178,7 @@
 .role-item i { width: 10px; height: 6px; border-radius: 2px; display: inline-block; }
 .role-item b { color: #cdd6dd; }
 
-/* 26단계: 빈 씬 안내 + 드래그앤드롭 오버레이 */
+/* Stage 26: empty scene hint + drag-and-drop overlay */
 .vp-canvas.drag-over { outline: 3px dashed #00ae42; outline-offset: -6px; }
 .empty-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
   gap: 8px; pointer-events: none; color: #9fb3c0; text-align: center; }
@@ -190,12 +192,12 @@
   background: rgba(0,174,66,.14); color: #d7f7e3; font-size: 18px; font-weight: 700; pointer-events: none;
   border: 3px dashed #00ae42; box-sizing: border-box; }
 
-/* 오브젝트 분리 버튼 */
+/* Split objects button */
 .obj-split { border: 0; background: transparent; cursor: pointer; padding: 0 3px; line-height: 0; }
 .obj-split img { width: 13px; height: 13px; opacity: .6; }
 .obj-split:hover img { opacity: 1; }
 
-/* 우클릭 컨텍스트 메뉴 */
+/* Right-click context menu */
 .ctx-scrim { position: absolute; inset: 0; z-index: 24; }
 .ctx-menu { position: absolute; z-index: 25; min-width: 168px; padding: 4px;
   background: #1b2027; border: 1px solid #2f3944; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
@@ -208,7 +210,7 @@
 .ctx-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid #2f3944; }
 .ctx-key { color: #7d8b96; font-family: ui-monospace, monospace; font-size: 11px; }
 
-/* 단축키 도움말 오버레이 ('?') */
+/* Keyboard shortcut help overlay ('?') */
 .help-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
   background: rgba(8,12,16,.72); z-index: 20; }
 .help-card { background: #1b2027; color: #dfe6ee; border: 1px solid #2f3944; border-radius: 10px;
@@ -220,12 +222,12 @@
 .help-card dt { color: #9fb0c2; font-family: ui-monospace, monospace; white-space: nowrap; }
 .help-card dd { margin: 0; }
 
-/* 멀티 오브젝트 목록 / 서포트 토글 (3단계) */
+/* Multi-object list / support toggle (stage 3) */
 .slice-support { display: flex; align-items: center; gap: 5px; margin: 6px 0; color: #cdd6dd; font-size: 12px; }
 
 .slice-support .muted { font-size: 10px; }
 
-/* 프린터 카드 — 베드 폭×깊이 인라인 편집 */
+/* Printer card — inline editing of bed width x depth */
 .sc-bed { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #222; }
 .sc-bed input { width: 54px; padding: 1px 4px; font-size: 12px; font-weight: 600; text-align: right;
   border: 1px solid #ccd0d5; border-radius: 5px; background: #fff; color: #222; }