@lucablockltd/ultimate-packaging 1.4.0 → 1.5.0

package/dist/index.js

@@ -5,6 +5,45 @@ var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/model/tuck-end-boxes/becf-1010a/index.tsx
 
+// src/utils/debugDieline.ts
+var DEBUG_PALETTE = [
+  "#e74c3c",
+  "#3498db",
+  "#2ecc71",
+  "#9b59b6",
+  "#f39c12",
+  "#1abc9c",
+  "#e67e22",
+  "#c0392b",
+  "#2980b9",
+  "#8e44ad",
+  "#16a085",
+  "#d35400",
+  "#27ae60",
+  "#2c3e50",
+  "#f1c40f"
+];
+function parseSvgPoints(d) {
+  const points = [];
+  const regex = /([MLA])\s*([-\d.]+)\s+([-\d.]+)(?:\s+([-\d.]+)\s+([-\d.]+)\s+([-\d.]+)\s+([-\d.]+)\s+([-\d.]+))?/gi;
+  let match;
+  while ((match = regex.exec(d)) !== null) {
+    const cmd = match[1].toUpperCase();
+    if (cmd === "M" || cmd === "L") {
+      points.push({ x: parseFloat(match[2]), y: parseFloat(match[3]) });
+    } else if (cmd === "A") {
+      const arcRegex = /A\s*[-\d.]+\s+[-\d.]+\s+[-\d.]+\s+[-\d.]+\s+[-\d.]+\s+([-\d.]+)\s+([-\d.]+)/i;
+      const arcMatch = arcRegex.exec(d.slice(match.index));
+      if (arcMatch) {
+        points.push({ x: parseFloat(arcMatch[1]), y: parseFloat(arcMatch[2]) });
+      }
+    }
+  }
+  return points.filter(
+    (p, i, arr) => i === 0 || p.x !== arr[i - 1].x || p.y !== arr[i - 1].y
+  );
+}
+
 // src/components/dieline/tuck-end-boxes/becf-1010a/generate.ts
 var MT = 0.5;
 var ARC_R = 5;
@@ -154,6 +193,47 @@ function bottomDustFlaps(xSide1, xFront, xSide2, xEnd, yBody2, dustFlap, dfCorne
     dustFlapPath(xSide2, xEnd, yBody2, 1, dustFlap, dfCorner, dfInset, dfVertical, false, false)
   ];
 }
+function generateBecf1010aDebugSections(attr) {
+  const { length, width, height, glueArea, dustFlap, tuckFlap } = attr;
+  const glueTaper = glueArea * GLUE_TAPER_RATIO;
+  const tabWidth = 8;
+  const tabStep = 1;
+  const dfInset = Math.min(dustFlap / 3, width * 0.2);
+  const dfCorner = Math.min(dustFlap * 0.2, dfInset * 0.6);
+  const dfVertical = Math.min(dustFlap * 0.4, dustFlap - dfCorner);
+  const xRear = glueArea;
+  const xSide1 = glueArea + length;
+  const xFront = glueArea + length + width;
+  const xSide2 = glueArea + length + width + length;
+  const xEnd = glueArea + 2 * length + 2 * width;
+  const yTop = 0;
+  const yFold1 = tuckFlap;
+  const yBody1 = tuckFlap + width;
+  const yBody2 = tuckFlap + width + height;
+  const yFold2 = tuckFlap + width + height + width;
+  const yBot = tuckFlap + 2 * width + height + tuckFlap;
+  const totalWidth = xEnd;
+  const totalHeight = yBot;
+  const crease = [];
+  crease.push(
+    ...verticalCreases(xRear, xSide1, xFront, xSide2, yBody1, yBody2),
+    ...horizontalCreases(xRear, xSide1, xFront, xSide2, xEnd, yBody1, yBody2),
+    tuckFoldCrease(xRear, xSide1, tabWidth, yFold1),
+    tuckFoldCrease(xFront, xSide2, tabWidth, yFold2)
+  );
+  let ci = 0;
+  const sections = [
+    { name: "Right Edge", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [line(xEnd, yBody1, xEnd, yBody2)] },
+    { name: "Glue Area", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [glueAreaPath(xRear, yBody1, yBody2, glueTaper, glueArea)] },
+    { name: "Rear Bottom Edge", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [line(xSide1, yBody2, xRear, yBody2)] },
+    { name: "Top Tuck", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [...topTuckStructure(xRear, xSide1, yBody1, yFold1, yTop, tabWidth, tabStep), ...topTuckTip(xRear, xSide1, yFold1, yTop, tabStep)] },
+    { name: "Bottom Tuck", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [...bottomTuckStructure(xFront, xSide2, yBody2, yFold2, yBot, tabWidth, tabStep), ...bottomTuckTip(xFront, xSide2, yFold2, yBot, tabStep)] },
+    { name: "Front Top Edge", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [line(xFront, yBody1, xSide2, yBody1), line(xFront - MT, yBody1, xFront, yBody1), line(xSide2, yBody1, xSide2 + MT, yBody1)] },
+    { name: "Top Dust Flaps", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: topDustFlaps(xSide1, xFront, xSide2, xEnd, yBody1, dustFlap, dfCorner, dfInset, dfVertical) },
+    { name: "Bottom Dust Flaps", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: bottomDustFlaps(xSide1, xFront, xSide2, xEnd, yBody2, dustFlap, dfCorner, dfInset, dfVertical) }
+  ];
+  return { sections, crease, viewBox: { width: totalWidth, height: totalHeight } };
+}
 function generateOuterContour(attr) {
   const { length, width, height, glueArea, dustFlap, tuckFlap } = attr;
   const glueTaper = glueArea * GLUE_TAPER_RATIO;
@@ -1008,6 +1088,79 @@ async function exportDimensionPdf(params) {
   const arrayBuffer = doc.output("arraybuffer");
   return new Blob([arrayBuffer], { type: "application/pdf" });
 }
+function DebugOverlay({ data, fontSize }) {
+  const ptR = fontSize * 0.3;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("g", { id: "debug-crease", children: data.crease.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d,
+        fill: "none",
+        stroke: "#aaa",
+        strokeWidth: 0.3,
+        strokeDasharray: "2,1"
+      },
+      `dc-${i}`
+    )) }),
+    data.sections.map((section, si) => {
+      let pointCounter = 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { id: `debug-${section.name}`, children: [
+        section.paths.map((d, pi) => {
+          const pts = parseSvgPoints(d);
+          const startIdx = pointCounter;
+          pointCounter += pts.length;
+          return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d,
+                fill: "none",
+                stroke: section.color,
+                strokeWidth: 1
+              }
+            ),
+            pts.map((p, idx) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: p.x, cy: p.y, r: ptR, fill: section.color }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "text",
+                {
+                  x: p.x + ptR + 0.5,
+                  y: p.y - ptR,
+                  fontSize: fontSize * 0.6,
+                  fontFamily: "monospace",
+                  fontWeight: "bold",
+                  fill: section.color,
+                  children: startIdx + idx + 1
+                }
+              )
+            ] }, `pt-${si}-${pi}-${idx}`))
+          ] }, `dp-${si}-${pi}`);
+        }),
+        (() => {
+          const allPts = section.paths.flatMap(parseSvgPoints);
+          if (allPts.length === 0) return null;
+          const cx = allPts.reduce((s, p) => s + p.x, 0) / allPts.length;
+          const cy = allPts.reduce((s, p) => s + p.y, 0) / allPts.length;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: cx,
+              y: cy,
+              textAnchor: "middle",
+              dominantBaseline: "central",
+              fontSize,
+              fontFamily: "sans-serif",
+              fontWeight: "bold",
+              fill: section.color,
+              opacity: 0.8,
+              children: section.name
+            }
+          );
+        })()
+      ] }, `ds-${si}`);
+    })
+  ] });
+}
 var MODEL_ID = "BECF-1010A";
 var UNIT_FACTOR = {
   mm: 1,
@@ -1066,7 +1219,8 @@ var DIE_LINE_BECF_1010A = react.forwardRef(
     attributes,
     unit = "mm",
     isShowDimensions = false,
-    renderAs = "svg"
+    renderAs = "svg",
+    debug = false
   }, ref) => {
     const theme = react.useMemo(
       () => getModelTheme(),
@@ -1153,12 +1307,17 @@ var DIE_LINE_BECF_1010A = react.forwardRef(
       }),
       [attributes, dieline, factor, unit, serializeSvg, theme]
     );
+    const debugData = react.useMemo(
+      () => debug ? generateBecf1010aDebugSections(attributes) : null,
+      [attributes, debug]
+    );
     const padding = isShowDimensions ? 15 : 0;
     const vbX = -padding;
     const vbY = -padding;
     const vbW = dieline.viewBox.width + padding * 2;
     const vbH = dieline.viewBox.height + padding * 2;
-    const svgChildren = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    const debugFontSize = Math.max(3, dieline.viewBox.width / 80);
+    const svgChildren = debug && debugData ? /* @__PURE__ */ jsxRuntime.jsx(DebugOverlay, { data: debugData, fontSize: debugFontSize }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "crease", children: dieline.crease.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorFoldLine, strokeWidth: 0.5, strokeDasharray: "2,1" }, `c-${i}`)) }),
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "cut", children: dieline.cut.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorDieLine, strokeWidth: 0.5 }, `t-${i}`)) }),
       isShowDimensions && /* @__PURE__ */ jsxRuntime.jsx("g", { id: "dimensions", children: dimensions.map((d, i) => renderDimension(d, i, getFontDimensionSize())) })
@@ -1419,6 +1578,45 @@ function bottomDustFlaps2(xSide1, xFront, xSide2, xEnd, yBody2, dustFlap, dfCorn
     dustFlapPath2(xSide2, xEnd, yBody2, 1, dustFlap, dfCorner, dfInset, dfVertical, true, false)
   ];
 }
+function generateBecf1030aDebugSections(attr) {
+  const { length, width, height, glueArea, dustFlap, tuckFlap } = attr;
+  const glueTaper = glueArea * GLUE_TAPER_RATIO2;
+  const tabWidth = 9;
+  const tabStep = 1;
+  const dfInset = Math.min(dustFlap * 0.2, width * 0.2);
+  const dfCorner = Math.min(dustFlap * 0.12, dfInset * 0.6);
+  const dfVertical = Math.min(dustFlap * 0.28, dustFlap - dfCorner);
+  const xRear = glueArea;
+  const xSide1 = glueArea + length;
+  const xFront = glueArea + length + width;
+  const xSide2 = glueArea + length + width + length;
+  const xEnd = glueArea + 2 * length + 2 * width;
+  const yTop = 0;
+  const yFold1 = tuckFlap;
+  const yBody1 = tuckFlap + width;
+  const yBody2 = tuckFlap + width + height;
+  const yFold2 = tuckFlap + width + height + width;
+  const yBot = tuckFlap + 2 * width + height + tuckFlap;
+  const totalWidth = xEnd;
+  const totalHeight = yBot;
+  const crease = [];
+  crease.push(
+    ...verticalCreases2(xRear, xSide1, xFront, xSide2, yBody1, yBody2),
+    ...horizontalCreases2(xRear, xSide1, xFront, xSide2, xEnd, yBody1, yBody2, tabWidth, yFold1, yFold2, tabStep)
+  );
+  let ci = 0;
+  const sections = [
+    { name: "Right Edge", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [line2(xEnd, yBody1, xEnd, yBody2)] },
+    { name: "Glue Area", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [glueAreaPath2(xRear, yBody1, yBody2, glueTaper, glueArea)] },
+    { name: "Front Top Edge", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [line2(xFront, yBody1, xSide2, yBody1), line2(xFront - MT2, yBody1, xFront, yBody1), line2(xSide2, yBody1, xSide2 + MT2, yBody1)] },
+    { name: "Front Bottom Edge", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [line2(xFront, yBody2, xSide2, yBody2), line2(xFront - MT2, yBody2, xFront, yBody2), line2(xSide2, yBody2, xSide2 + MT2, yBody2)] },
+    { name: "Top Tuck", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [...topTuckStructure2(xRear, xSide1, yBody1, yFold1, tabWidth, tabStep), ...topTuckTip2(xRear, xSide1, yFold1, yTop)] },
+    { name: "Bottom Tuck", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [...bottomTuckStructure2(xRear, xSide1, yBody2, yFold2, tabWidth, tabStep), ...bottomTuckTip2(xRear, xSide1, yFold2, yBot)] },
+    { name: "Top Dust Flaps", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: topDustFlaps2(xSide1, xFront, xSide2, xEnd, yBody1, dustFlap, dfCorner, dfInset, dfVertical) },
+    { name: "Bottom Dust Flaps", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: bottomDustFlaps2(xSide1, xFront, xSide2, xEnd, yBody2, dustFlap, dfCorner, dfInset, dfVertical) }
+  ];
+  return { sections, crease, viewBox: { width: totalWidth, height: totalHeight } };
+}
 function generateOuterContour2(attr) {
   const { length, width, height, glueArea, dustFlap, tuckFlap } = attr;
   const glueTaper = glueArea * GLUE_TAPER_RATIO2;
@@ -1714,7 +1912,8 @@ var DIE_LINE_BECF_1030A = react.forwardRef(
     attributes,
     unit = "mm",
     isShowDimensions = false,
-    renderAs = "svg"
+    renderAs = "svg",
+    debug = false
   }, ref) => {
     const theme = react.useMemo(
       () => getModelTheme(),
@@ -1801,12 +2000,17 @@ var DIE_LINE_BECF_1030A = react.forwardRef(
       }),
       [attributes, dieline, factor, unit, serializeSvg, theme]
     );
+    const debugData = react.useMemo(
+      () => debug ? generateBecf1030aDebugSections(attributes) : null,
+      [attributes, debug]
+    );
     const padding = isShowDimensions ? 15 : 0;
     const vbX = -padding;
     const vbY = -padding;
     const vbW = dieline.viewBox.width + padding * 2;
     const vbH = dieline.viewBox.height + padding * 2;
-    const svgChildren = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    const debugFontSize = Math.max(3, dieline.viewBox.width / 80);
+    const svgChildren = debug && debugData ? /* @__PURE__ */ jsxRuntime.jsx(DebugOverlay, { data: debugData, fontSize: debugFontSize }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "crease", children: dieline.crease.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorFoldLine, strokeWidth: 0.5, strokeDasharray: "2,1" }, `c-${i}`)) }),
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "cut", children: dieline.cut.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorDieLine, strokeWidth: 0.5 }, `t-${i}`)) }),
       isShowDimensions && /* @__PURE__ */ jsxRuntime.jsx("g", { id: "dimensions", children: dimensions.map((d, i) => renderDimension2(d, i, getFontDimensionSize())) })
@@ -2071,6 +2275,44 @@ function bottomDustFlaps3(xSide1, xFront, xSide2, xEnd, yBody2, dustFlap, dfCorn
     dustFlapPath3(xSide2, xEnd, yBody2, 1, dustFlap, dfCorner, dfInset, dfVertical, "none", "edge")
   ];
 }
+function generateBecf1040aDebugSections(attr) {
+  const { length, width, height, glueArea, dustFlap, tuckFlap } = attr;
+  const glueTaper = glueArea * GLUE_TAPER_RATIO3;
+  const tabWidth = 7;
+  const tabStep = 1;
+  const dfInset = Math.min(dustFlap / 6, width * 0.2);
+  const dfCorner = Math.min(dustFlap * 0.1, dfInset * 0.6);
+  const dfVertical = Math.min(dustFlap / 6, dustFlap - dfCorner);
+  const xRear = glueArea;
+  const xSide1 = glueArea + length;
+  const xFront = glueArea + length + width;
+  const xSide2 = glueArea + length + width + length;
+  const xEnd = glueArea + 2 * length + 2 * width;
+  const yFold1 = tuckFlap;
+  const yBody1 = tuckFlap + width;
+  const yBody2 = tuckFlap + width + height;
+  const yFold2 = tuckFlap + width + height + width;
+  const yBot = tuckFlap + 2 * width + height + tuckFlap;
+  const totalWidth = xEnd;
+  const totalHeight = yBot;
+  const crease = [];
+  crease.push(
+    ...verticalCreases3(xRear, xSide1, xFront, xSide2, yBody1, yBody2),
+    ...horizontalCreases3(xSide1, xFront, xSide2, xEnd, yBody1, yBody2, tabWidth, yFold1, yFold2, tabStep)
+  );
+  let ci = 0;
+  const sections = [
+    { name: "Right Edge", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [line3(xEnd, yBody1, xEnd, yBody2)] },
+    { name: "Glue Area", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [glueAreaPath3(xRear, yBody1, yBody2, glueTaper, glueArea)] },
+    { name: "Rear Top Edge", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [line3(xSide1, yBody1, xRear, yBody1), line3(xSide1, yBody1, xSide1 + MT3, yBody1)] },
+    { name: "Rear Bottom Edge", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [line3(xSide1, yBody2, xRear, yBody2), line3(xSide1, yBody2, xSide1 + MT3, yBody2)] },
+    { name: "Top Tuck", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [...topTuckStructure3(xFront, xSide2, yBody1, yFold1, tabWidth, tabStep), ...topTuckTip3(xFront, xSide2, yFold1, 0)] },
+    { name: "Bottom Tuck", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: [...bottomTuckStructure3(xFront, xSide2, yBody2, yFold2, tabWidth, tabStep), ...bottomTuckTip3(xFront, xSide2, yFold2, yBot)] },
+    { name: "Top Dust Flaps", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: topDustFlaps3(xSide1, xFront, xSide2, xEnd, yBody1, dustFlap, dfCorner, dfInset, dfVertical) },
+    { name: "Bottom Dust Flaps", color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length], paths: bottomDustFlaps3(xSide1, xFront, xSide2, xEnd, yBody2, dustFlap, dfCorner, dfInset, dfVertical) }
+  ];
+  return { sections, crease, viewBox: { width: totalWidth, height: totalHeight } };
+}
 function generateOuterContour3(attr) {
   const { length, width, height, glueArea, dustFlap, tuckFlap } = attr;
   const glueTaper = glueArea * GLUE_TAPER_RATIO3;
@@ -2365,7 +2607,8 @@ var DIE_LINE_BECF_1040A = react.forwardRef(
     attributes,
     unit = "mm",
     isShowDimensions = false,
-    renderAs = "svg"
+    renderAs = "svg",
+    debug = false
   }, ref) => {
     const theme = react.useMemo(
       () => getModelTheme(),
@@ -2452,12 +2695,17 @@ var DIE_LINE_BECF_1040A = react.forwardRef(
       }),
       [attributes, dieline, factor, unit, serializeSvg, theme]
     );
+    const debugData = react.useMemo(
+      () => debug ? generateBecf1040aDebugSections(attributes) : null,
+      [attributes, debug]
+    );
     const padding = isShowDimensions ? 15 : 0;
     const vbX = -padding;
     const vbY = -padding;
     const vbW = dieline.viewBox.width + padding * 2;
     const vbH = dieline.viewBox.height + padding * 2;
-    const svgChildren = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    const debugFontSize = Math.max(3, dieline.viewBox.width / 80);
+    const svgChildren = debug && debugData ? /* @__PURE__ */ jsxRuntime.jsx(DebugOverlay, { data: debugData, fontSize: debugFontSize }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "crease", children: dieline.crease.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorFoldLine, strokeWidth: 0.5, strokeDasharray: "2,1" }, `c-${i}`)) }),
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "cut", children: dieline.cut.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorDieLine, strokeWidth: 0.5 }, `t-${i}`)) }),
       isShowDimensions && /* @__PURE__ */ jsxRuntime.jsx("g", { id: "dimensions", children: dimensions.map((d, i) => renderDimension3(d, i, getFontDimensionSize())) })
@@ -2870,6 +3118,149 @@ function generateDimensions4(attr, unit) {
     }
   ];
 }
+function generateBecf11d01DebugSections(attr) {
+  const { length, width, height, flapHeight, glueArea } = attr;
+  const glueTaper = glueArea * GLUE_TAPER_RATIO4;
+  const xRear = glueArea;
+  const xSide1 = glueArea + length;
+  const xFront = glueArea + length + width;
+  const xSide2 = glueArea + length + width + length;
+  const xEnd = glueArea + 2 * length + 2 * width;
+  const yTop = 0;
+  const yBody1 = flapHeight;
+  const yBody2 = flapHeight + height;
+  const yBot = 2 * flapHeight + height;
+  const totalWidth = xEnd;
+  const totalHeight = yBot;
+  const crease = [];
+  crease.push(
+    line4(xRear, yBody1, xRear, yBody2),
+    line4(xSide1, yBody1, xSide1, yBody2),
+    line4(xFront, yBody1, xFront, yBody2),
+    line4(xSide2, yBody1, xSide2, yBody2)
+  );
+  crease.push(line4(xRear + FLAP_INSET, yBody1 + MT4, xSide1 - FLAP_INSET, yBody1 + MT4));
+  crease.push(line4(xSide1, yBody1, xFront, yBody1));
+  crease.push(line4(xFront + FLAP_INSET, yBody1 + MT4, xSide2 - FLAP_INSET, yBody1 + MT4));
+  crease.push(line4(xSide2, yBody1, xEnd, yBody1));
+  crease.push(line4(xRear + FLAP_INSET, yBody2 - MT4, xSide1 - FLAP_INSET, yBody2 - MT4));
+  crease.push(line4(xSide1, yBody2, xFront, yBody2));
+  crease.push(line4(xFront + FLAP_INSET, yBody2 - MT4, xSide2 - FLAP_INSET, yBody2 - MT4));
+  crease.push(line4(xSide2, yBody2, xEnd, yBody2));
+  const sections = [];
+  let colorIdx = 0;
+  sections.push({
+    name: "Glue Area",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [glueAreaPath4(xRear, yBody1, yBody2, glueTaper, glueArea)]
+  });
+  sections.push({
+    name: "Right Edge",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [line4(xEnd, yBody1, xEnd, yBody2)]
+  });
+  {
+    const rL = xRear + FLAP_INSET;
+    const rR = xSide1 - FLAP_INSET;
+    sections.push({
+      name: "Top Rear Dust Flap",
+      color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+      paths: [
+        line4(rL, yBody1, rL, yTop),
+        line4(rL, yTop, rR, yTop),
+        line4(rR, yTop, rR, yBody1),
+        line4(xRear, yBody1, rL, yBody1),
+        line4(rR, yBody1, xSide1, yBody1)
+      ]
+    });
+  }
+  sections.push({
+    name: "Top Side1 Flap",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line4(xSide1, yBody1, xSide1, yTop),
+      line4(xSide1, yTop, xFront, yTop),
+      line4(xFront, yTop, xFront, yBody1)
+    ]
+  });
+  {
+    const fL = xFront + FLAP_INSET;
+    const fR = xSide2 - FLAP_INSET;
+    sections.push({
+      name: "Top Front Dust Flap",
+      color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+      paths: [
+        line4(fL, yBody1, fL, yTop),
+        line4(fL, yTop, fR, yTop),
+        line4(fR, yTop, fR, yBody1),
+        line4(xFront, yBody1, fL, yBody1),
+        line4(fR, yBody1, xSide2, yBody1)
+      ]
+    });
+  }
+  sections.push({
+    name: "Top Side2 Flap",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line4(xSide2, yBody1, xSide2, yTop),
+      line4(xSide2, yTop, xEnd, yTop),
+      line4(xEnd, yTop, xEnd, yBody1)
+    ]
+  });
+  {
+    const rL = xRear + FLAP_INSET;
+    const rR = xSide1 - FLAP_INSET;
+    sections.push({
+      name: "Bottom Rear Dust Flap",
+      color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+      paths: [
+        line4(rL, yBody2, rL, yBot),
+        line4(rL, yBot, rR, yBot),
+        line4(rR, yBot, rR, yBody2),
+        line4(xRear, yBody2, rL, yBody2),
+        line4(rR, yBody2, xSide1, yBody2)
+      ]
+    });
+  }
+  sections.push({
+    name: "Bottom Side1 Flap",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line4(xSide1, yBody2, xSide1, yBot),
+      line4(xSide1, yBot, xFront, yBot),
+      line4(xFront, yBot, xFront, yBody2)
+    ]
+  });
+  {
+    const fL = xFront + FLAP_INSET;
+    const fR = xSide2 - FLAP_INSET;
+    sections.push({
+      name: "Bottom Front Dust Flap",
+      color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+      paths: [
+        line4(fL, yBody2, fL, yBot),
+        line4(fL, yBot, fR, yBot),
+        line4(fR, yBot, fR, yBody2),
+        line4(xFront, yBody2, fL, yBody2),
+        line4(fR, yBody2, xSide2, yBody2)
+      ]
+    });
+  }
+  sections.push({
+    name: "Bottom Side2 Flap",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line4(xSide2, yBody2, xSide2, yBot),
+      line4(xSide2, yBot, xEnd, yBot),
+      line4(xEnd, yBot, xEnd, yBody2)
+    ]
+  });
+  return {
+    sections,
+    crease,
+    viewBox: { width: totalWidth, height: totalHeight }
+  };
+}
 var MODEL_ID4 = "BECF-11D01";
 var UNIT_FACTOR4 = {
   mm: 1,
@@ -2928,7 +3319,8 @@ var DIE_LINE_BECF_11D01 = react.forwardRef(
     attributes,
     unit = "mm",
     isShowDimensions = false,
-    renderAs = "svg"
+    renderAs = "svg",
+    debug = false
   }, ref) => {
     const theme = react.useMemo(
       () => getModelTheme(),
@@ -2940,6 +3332,10 @@ var DIE_LINE_BECF_11D01 = react.forwardRef(
       () => generateDimensions4(attributes, unit),
       [attributes, unit]
     );
+    const debugData = react.useMemo(
+      () => debug ? generateBecf11d01DebugSections(attributes) : null,
+      [attributes, debug]
+    );
     const factor = UNIT_FACTOR4[unit] ?? 1;
     const serializeSvg = react.useCallback(
       (showDimensions) => {
@@ -3019,7 +3415,8 @@ var DIE_LINE_BECF_11D01 = react.forwardRef(
     const vbY = -padding;
     const vbW = dieline.viewBox.width + padding * 2;
     const vbH = dieline.viewBox.height + padding * 2;
-    const svgChildren = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    const debugFontSize = Math.max(3, dieline.viewBox.width / 80);
+    const svgChildren = debug && debugData ? /* @__PURE__ */ jsxRuntime.jsx(DebugOverlay, { data: debugData, fontSize: debugFontSize }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "crease", children: dieline.crease.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorFoldLine, strokeWidth: 0.5, strokeDasharray: "2,1" }, `c-${i}`)) }),
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "cut", children: dieline.cut.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorDieLine, strokeWidth: 0.5 }, `t-${i}`)) }),
       isShowDimensions && /* @__PURE__ */ jsxRuntime.jsx("g", { id: "dimensions", children: dimensions.map((d, i) => renderDimension4(d, i, getFontDimensionSize())) })
@@ -3224,6 +3621,89 @@ function generateBecf12101(attr) {
   crease.push(line5(xSide2Mid, yFoldBottomStart, xEnd, D + C - 2));
   return { cut, crease, viewBox: { width: totalWidth, height: totalHeight } };
 }
+function generateBecf12101DebugSections(attr) {
+  const { length: A, width: B, height: C, glueArea } = attr;
+  const D = calcD(C, B);
+  const kulak = glueArea ?? calcKulak(B);
+  const X = calcX(A);
+  const xFront = kulak;
+  const xSide1 = kulak + A;
+  const xSide1Mid = kulak + A + B / 2;
+  const xBack = kulak + A + B;
+  const xSide2 = kulak + 2 * A + B;
+  const xSide2Mid = kulak + 2 * A + B + B / 2;
+  const xEnd = kulak + 2 * A + 2 * B - 2;
+  const yFoldTop = D;
+  const yFoldBottomStart = D + C - B / 2;
+  const yFoldBottom = D + C;
+  const yBottomFlap = D + C + B / 2;
+  const yEnd = D + C + B / 2 + DIP;
+  const totalWidth = xEnd;
+  const totalHeight = yEnd;
+  const crease = [];
+  crease.push(line5(0, yFoldTop, totalWidth, yFoldTop));
+  crease.push(line5(0, yFoldBottomStart, totalWidth, yFoldBottomStart));
+  crease.push(line5(0, yFoldBottom, totalWidth, yFoldBottom));
+  crease.push(line5(xFront, 0, xFront, totalHeight));
+  crease.push(line5(xSide1, 0, xSide1, totalHeight));
+  crease.push(line5(xSide1Mid, 0, xSide1Mid, totalHeight));
+  crease.push(line5(xBack, 0, xBack, totalHeight));
+  crease.push(line5(xSide2, 0, xSide2, totalHeight));
+  crease.push(line5(xSide2Mid, 0, xSide2Mid, totalHeight));
+  crease.push(line5(0, yFoldBottom - kulak, kulak + B / 2, yBottomFlap));
+  crease.push(line5(kulak + A - B / 2, yBottomFlap, xSide1Mid, yFoldBottomStart));
+  crease.push(line5(xSide1Mid, yFoldBottomStart, kulak + A + B + B / 2, yBottomFlap));
+  crease.push(line5(kulak + 2 * A + B - B / 2, yBottomFlap, xSide2Mid, yFoldBottomStart));
+  crease.push(line5(xSide2Mid, yFoldBottomStart, xEnd, D + C - 2));
+  const frontCx = kulak + A / 2;
+  const backCx = kulak + A + B + A / 2;
+  const ropeTopY = yFoldTop - ROPE_Y;
+  const ropeBotY = yFoldTop + ROPE_Y;
+  let ci = 0;
+  const sections = [
+    {
+      name: "Outer Rect",
+      color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length],
+      paths: [
+        line5(0, 0, totalWidth, 0),
+        line5(totalWidth, 0, totalWidth, totalHeight),
+        line5(totalWidth, totalHeight, 0, totalHeight),
+        line5(0, totalHeight, 0, 0)
+      ]
+    },
+    {
+      name: "Bottom Zone Cuts",
+      color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length],
+      paths: [
+        line5(kulak + B / 2, yBottomFlap, kulak + B / 2, yEnd),
+        line5(kulak + A - B / 2, yBottomFlap, kulak + A - B / 2, yEnd),
+        line5(kulak + A + B + B / 2, yBottomFlap, kulak + A + B + B / 2, yEnd),
+        line5(kulak + 2 * A + B - B / 2, yBottomFlap, kulak + 2 * A + B - B / 2, yEnd)
+      ]
+    },
+    {
+      name: "Front Rope Holes",
+      color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length],
+      paths: [
+        circlePath(frontCx - X / 2, ropeTopY, ROPE_R),
+        circlePath(frontCx - X / 2, ropeBotY, ROPE_R),
+        circlePath(frontCx + X / 2, ropeTopY, ROPE_R),
+        circlePath(frontCx + X / 2, ropeBotY, ROPE_R)
+      ]
+    },
+    {
+      name: "Back Rope Holes",
+      color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length],
+      paths: [
+        circlePath(backCx - X / 2, ropeTopY, ROPE_R),
+        circlePath(backCx - X / 2, ropeBotY, ROPE_R),
+        circlePath(backCx + X / 2, ropeTopY, ROPE_R),
+        circlePath(backCx + X / 2, ropeBotY, ROPE_R)
+      ]
+    }
+  ];
+  return { sections, crease, viewBox: { width: totalWidth, height: totalHeight } };
+}
 function generateOuterContour5(attr) {
   const { length: A, width: B, height: C, glueArea } = attr;
   const D = calcD(C, B);
@@ -3438,7 +3918,8 @@ var DIE_LINE_BECF_12101 = react.forwardRef(
     attributes,
     unit = "mm",
     isShowDimensions = false,
-    renderAs = "svg"
+    renderAs = "svg",
+    debug = false
   }, ref) => {
     const theme = react.useMemo(
       () => getModelTheme(),
@@ -3446,6 +3927,10 @@ var DIE_LINE_BECF_12101 = react.forwardRef(
     );
     const svgRef = react.useRef(null);
     const dieline = react.useMemo(() => generateBecf12101(attributes), [attributes]);
+    const debugData = react.useMemo(
+      () => debug ? generateBecf12101DebugSections(attributes) : null,
+      [attributes, debug]
+    );
     const dimensions = react.useMemo(
       () => generateDimensions5(attributes, unit),
       [attributes, unit]
@@ -3537,7 +4022,8 @@ var DIE_LINE_BECF_12101 = react.forwardRef(
     const vbY = -padding;
     const vbW = dieline.viewBox.width + padding * 2;
     const vbH = dieline.viewBox.height + padding * 2;
-    const svgChildren = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    const debugFontSize = Math.max(3, dieline.viewBox.width / 80);
+    const svgChildren = debug && debugData ? /* @__PURE__ */ jsxRuntime.jsx(DebugOverlay, { data: debugData, fontSize: debugFontSize }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "crease", children: dieline.crease.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorFoldLine, strokeWidth: 0.5, strokeDasharray: "2,1" }, `c-${i}`)) }),
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "cut", children: dieline.cut.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorDieLine, strokeWidth: 0.5 }, `t-${i}`)) }),
       isShowDimensions && /* @__PURE__ */ jsxRuntime.jsx("g", { id: "dimensions", children: dimensions.map((d, i) => renderDimension5(d, i, getFontDimensionSize())) })
@@ -3757,6 +4243,114 @@ function generateBecf12109(attr) {
   crease.push(line6(xSide2Mid, yFoldBottomStart, xEnd, D + C - 2));
   return { cut, crease, viewBox: { width: totalWidth, height: totalHeight } };
 }
+function generateBecf12109DebugSections(attr) {
+  const { length: A, width: B, height: C, glueArea } = attr;
+  const D = calcD2(C, B);
+  const kulak = glueArea ?? calcKulak2(B);
+  const X = calcX2(A);
+  const xFront = kulak;
+  const xSide1 = kulak + A;
+  const xBack = kulak + A + B;
+  const xSide2 = kulak + 2 * A + B;
+  const xSide1Mid = kulak + A + B / 2;
+  const xSide2Mid = kulak + 2 * A + B + B / 2;
+  const xEnd = kulak + 2 * A + 2 * B - 2;
+  const yFoldTop = D;
+  const yFoldBottomStart = D + C - B / 2;
+  const yFoldBottom = D + C;
+  const yNotchStart = yFoldBottom + NOTCH_Y;
+  const yEnd = D + C + B / 2 + DIP2;
+  const totalWidth = xEnd;
+  const totalHeight = yEnd;
+  const crease = [];
+  crease.push(line6(0, yFoldTop, totalWidth, yFoldTop));
+  crease.push(line6(0, yFoldBottomStart, totalWidth, yFoldBottomStart));
+  crease.push(line6(kulak, yFoldBottom, xEnd, yFoldBottom));
+  crease.push(line6(xFront, 0, xFront, yFoldBottom));
+  crease.push(line6(xSide1, 0, xSide1, yFoldBottom));
+  crease.push(line6(xBack, 0, xBack, yFoldBottom));
+  crease.push(line6(xSide2, 0, xSide2, yFoldBottom));
+  crease.push(line6(xSide1Mid, 0, xSide1Mid, totalHeight));
+  crease.push(line6(xSide2Mid, 0, xSide2Mid, totalHeight));
+  crease.push(line6(xBack, yFoldBottom, xSide1Mid, yFoldBottomStart));
+  crease.push(line6(xSide1Mid, yFoldBottomStart, xSide1, yFoldBottom));
+  crease.push(line6(xSide2Mid, yFoldBottomStart, xSide2, yFoldBottom));
+  crease.push(line6(xSide2Mid, yFoldBottomStart, xEnd, D + C - 2));
+  const frontCx = kulak + A / 2;
+  const backCx = kulak + A + B + A / 2;
+  const ropeTopY = yFoldTop - ROPE_Y2;
+  const ropeBotY = yFoldTop + ROPE_Y2;
+  const boundaries = [xFront, xSide1, xBack, xSide2, xEnd];
+  const vNotchPaths = [];
+  for (let i = 0; i < boundaries.length; i++) {
+    const xb = boundaries[i];
+    const isFirst = i === 0;
+    const isLast = i === boundaries.length - 1;
+    if (!isFirst) {
+      vNotchPaths.push(line6(xb - NOTCH_X, yNotchStart, xb - NOTCH_X, totalHeight));
+      vNotchPaths.push(line6(xb - NOTCH_X, yNotchStart, xb, yFoldBottom));
+    }
+    if (!isLast) {
+      vNotchPaths.push(line6(xb + NOTCH_X, yNotchStart, xb + NOTCH_X, totalHeight));
+      vNotchPaths.push(line6(xb + NOTCH_X, yNotchStart, xb, yFoldBottom));
+    }
+  }
+  let ci = 0;
+  const sections = [
+    {
+      name: "Partial Outer Edges",
+      color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length],
+      paths: [
+        line6(0, 0, 0, yFoldBottom - kulak),
+        line6(0, 0, totalWidth, 0),
+        line6(totalWidth, 0, totalWidth, yFoldBottom)
+      ]
+    },
+    {
+      name: "Glue Flap Diagonal",
+      color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length],
+      paths: [
+        line6(0, yFoldBottom - kulak, kulak, yFoldBottom)
+      ]
+    },
+    {
+      name: "V-Notch Cuts",
+      color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length],
+      paths: vNotchPaths
+    },
+    {
+      name: "Bottom Segments",
+      color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length],
+      paths: [
+        line6(xFront + NOTCH_X, totalHeight, xSide1 - NOTCH_X, totalHeight),
+        line6(xSide1 + NOTCH_X, totalHeight, xBack - NOTCH_X, totalHeight),
+        line6(xBack + NOTCH_X, totalHeight, xSide2 - NOTCH_X, totalHeight),
+        line6(xSide2 + NOTCH_X, totalHeight, xEnd - NOTCH_X, totalHeight)
+      ]
+    },
+    {
+      name: "Front Rope Holes",
+      color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length],
+      paths: [
+        circlePath2(frontCx - X / 2, ropeTopY, ROPE_R2),
+        circlePath2(frontCx - X / 2, ropeBotY, ROPE_R2),
+        circlePath2(frontCx + X / 2, ropeTopY, ROPE_R2),
+        circlePath2(frontCx + X / 2, ropeBotY, ROPE_R2)
+      ]
+    },
+    {
+      name: "Back Rope Holes",
+      color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length],
+      paths: [
+        circlePath2(backCx - X / 2, ropeTopY, ROPE_R2),
+        circlePath2(backCx - X / 2, ropeBotY, ROPE_R2),
+        circlePath2(backCx + X / 2, ropeTopY, ROPE_R2),
+        circlePath2(backCx + X / 2, ropeBotY, ROPE_R2)
+      ]
+    }
+  ];
+  return { sections, crease, viewBox: { width: totalWidth, height: totalHeight } };
+}
 function generateOuterContour6(attr) {
   const { length: A, width: B, height: C, glueArea } = attr;
   const D = calcD2(C, B);
@@ -4006,7 +4600,8 @@ var DIE_LINE_BECF_12109 = react.forwardRef(
     attributes,
     unit = "mm",
     isShowDimensions = false,
-    renderAs = "svg"
+    renderAs = "svg",
+    debug = false
   }, ref) => {
     const theme = react.useMemo(
       () => getModelTheme(),
@@ -4014,6 +4609,10 @@ var DIE_LINE_BECF_12109 = react.forwardRef(
     );
     const svgRef = react.useRef(null);
     const dieline = react.useMemo(() => generateBecf12109(attributes), [attributes]);
+    const debugData = react.useMemo(
+      () => debug ? generateBecf12109DebugSections(attributes) : null,
+      [attributes, debug]
+    );
     const dimensions = react.useMemo(
       () => generateDimensions6(attributes, unit),
       [attributes, unit]
@@ -4105,7 +4704,8 @@ var DIE_LINE_BECF_12109 = react.forwardRef(
     const vbY = -padding;
     const vbW = dieline.viewBox.width + padding * 2;
     const vbH = dieline.viewBox.height + padding * 2;
-    const svgChildren = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    const debugFontSize = Math.max(3, dieline.viewBox.width / 80);
+    const svgChildren = debug && debugData ? /* @__PURE__ */ jsxRuntime.jsx(DebugOverlay, { data: debugData, fontSize: debugFontSize }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "crease", children: dieline.crease.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorFoldLine, strokeWidth: 0.5, strokeDasharray: "2,1" }, `c-${i}`)) }),
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "cut", children: dieline.cut.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorDieLine, strokeWidth: 0.5 }, `t-${i}`)) }),
       isShowDimensions && /* @__PURE__ */ jsxRuntime.jsx("g", { id: "dimensions", children: dimensions.map((d, i) => renderDimension6(d, i, getFontDimensionSize())) })
@@ -4458,6 +5058,99 @@ function generateDimensions7(attr, unit) {
     }
   ];
 }
+function generateBecfC12101DebugSections(attr) {
+  const { length: A, width: B, height: C, glueArea } = attr;
+  const D = calcD3(C, B);
+  const kulak = glueArea ?? calcKulak3(B);
+  const X = calcX3(A);
+  const xFront = kulak;
+  const xSide1 = kulak + A;
+  const xSide1Mid = kulak + A + B / 2;
+  const xBack = kulak + A + B;
+  const xSide2 = kulak + 2 * A + B;
+  const xSide2Mid = kulak + 2 * A + B + B / 2;
+  const xEnd = kulak + 2 * A + 2 * B - 2;
+  const yFoldTop = D;
+  const yFoldBottomStart = D + C - B / 2;
+  const yFoldBottom = D + C;
+  const yBottomFlap = D + C + B / 2;
+  const yEnd = D + C + B / 2 + DIP3;
+  const totalWidth = xEnd;
+  const totalHeight = yEnd;
+  const crease = [];
+  crease.push(line7(0, yFoldTop, totalWidth, yFoldTop));
+  crease.push(line7(0, yFoldBottomStart, totalWidth, yFoldBottomStart));
+  crease.push(line7(0, yFoldBottom, totalWidth, yFoldBottom));
+  crease.push(line7(xFront, 0, xFront, totalHeight));
+  crease.push(line7(xSide1, 0, xSide1, totalHeight));
+  crease.push(line7(xSide1Mid, 0, xSide1Mid, totalHeight));
+  crease.push(line7(xBack, 0, xBack, totalHeight));
+  crease.push(line7(xSide2, 0, xSide2, totalHeight));
+  crease.push(line7(xSide2Mid, 0, xSide2Mid, totalHeight));
+  crease.push(line7(0, yFoldBottom - kulak, kulak + B / 2, yBottomFlap));
+  crease.push(line7(kulak + A - B / 2, yBottomFlap, xSide1Mid, yFoldBottomStart));
+  crease.push(line7(xSide1Mid, yFoldBottomStart, kulak + A + B + B / 2, yBottomFlap));
+  crease.push(line7(kulak + 2 * A + B - B / 2, yBottomFlap, xSide2Mid, yFoldBottomStart));
+  crease.push(line7(xSide2Mid, yFoldBottomStart, xEnd, D + C - 2));
+  const sections = [];
+  let colorIdx = 0;
+  sections.push({
+    name: "Outer Rectangle",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line7(0, 0, totalWidth, 0),
+      line7(totalWidth, 0, totalWidth, totalHeight),
+      line7(totalWidth, totalHeight, 0, totalHeight),
+      line7(0, totalHeight, 0, 0)
+    ]
+  });
+  sections.push({
+    name: "Bottom Zone Verticals",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line7(kulak + B / 2, yBottomFlap, kulak + B / 2, yEnd),
+      line7(kulak + A - B / 2, yBottomFlap, kulak + A - B / 2, yEnd),
+      line7(kulak + A + B + B / 2, yBottomFlap, kulak + A + B + B / 2, yEnd),
+      line7(kulak + 2 * A + B - B / 2, yBottomFlap, kulak + 2 * A + B - B / 2, yEnd)
+    ]
+  });
+  const frontCx = kulak + A / 2;
+  const yNotchTop = yFoldTop - RIBBON_DY / 2;
+  const yNotchBot = yFoldTop + RIBBON_DY / 2;
+  function ribbonNotchPaths(cx) {
+    return [
+      line7(cx - RIBBON_HALF_W, yNotchBot, cx + RIBBON_HALF_W, yNotchBot),
+      line7(cx - RIBBON_HALF_W - RIBBON_DX, yNotchTop, cx - RIBBON_HALF_W, yNotchBot),
+      line7(cx + RIBBON_HALF_W + RIBBON_DX, yNotchTop, cx + RIBBON_HALF_W, yNotchBot)
+    ];
+  }
+  sections.push({
+    name: "Front Left Ribbon",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: ribbonNotchPaths(frontCx - X / 2)
+  });
+  sections.push({
+    name: "Front Right Ribbon",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: ribbonNotchPaths(frontCx + X / 2)
+  });
+  const backCx = kulak + A + B + A / 2;
+  sections.push({
+    name: "Back Left Ribbon",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: ribbonNotchPaths(backCx - X / 2)
+  });
+  sections.push({
+    name: "Back Right Ribbon",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: ribbonNotchPaths(backCx + X / 2)
+  });
+  return {
+    sections,
+    crease,
+    viewBox: { width: totalWidth, height: totalHeight }
+  };
+}
 var MODEL_ID7 = "BECF-C-12101";
 var UNIT_FACTOR7 = {
   mm: 1,
@@ -4516,7 +5209,8 @@ var DIE_LINE_BECF_C_12101 = react.forwardRef(
     attributes,
     unit = "mm",
     isShowDimensions = false,
-    renderAs = "svg"
+    renderAs = "svg",
+    debug = false
   }, ref) => {
     const theme = react.useMemo(
       () => getModelTheme(),
@@ -4528,6 +5222,10 @@ var DIE_LINE_BECF_C_12101 = react.forwardRef(
       () => generateDimensions7(attributes, unit),
       [attributes, unit]
     );
+    const debugData = react.useMemo(
+      () => debug ? generateBecfC12101DebugSections(attributes) : null,
+      [attributes, debug]
+    );
     const factor = UNIT_FACTOR7[unit] ?? 1;
     const serializeSvg = react.useCallback(
       (showDimensions) => {
@@ -4616,7 +5314,8 @@ var DIE_LINE_BECF_C_12101 = react.forwardRef(
     const vbY = -padding;
     const vbW = dieline.viewBox.width + padding * 2;
     const vbH = dieline.viewBox.height + padding * 2;
-    const svgChildren = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    const debugFontSize = Math.max(3, dieline.viewBox.width / 80);
+    const svgChildren = debug && debugData ? /* @__PURE__ */ jsxRuntime.jsx(DebugOverlay, { data: debugData, fontSize: debugFontSize }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "crease", children: dieline.crease.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorFoldLine, strokeWidth: 0.5, strokeDasharray: "2,1" }, `c-${i}`)) }),
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "cut", children: dieline.cut.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorDieLine, strokeWidth: 0.5 }, `t-${i}`)) }),
       isShowDimensions && /* @__PURE__ */ jsxRuntime.jsx("g", { id: "dimensions", children: dimensions.map((d, i) => renderDimension7(d, i, getFontDimensionSize())) })
@@ -5010,6 +5709,148 @@ function generateDimensions8(attr, unit) {
     }
   ];
 }
+function generateBecfC12109DebugSections(attr) {
+  const { length: A, width: B, height: C, glueArea } = attr;
+  const D = calcD4(C, B);
+  const kulak = glueArea ?? calcKulak4(B);
+  const X = calcX4(A);
+  const xFront = kulak;
+  const xSide1 = kulak + A;
+  const xSide1Mid = kulak + A + B / 2;
+  const xBack = kulak + A + B;
+  const xSide2 = kulak + 2 * A + B;
+  const xSide2Mid = kulak + 2 * A + B + B / 2;
+  const xEnd = kulak + 2 * A + 2 * B - 2;
+  const yFoldTop = D;
+  const yFoldBottomStart = D + C - B / 2;
+  const yFoldBottom = D + C;
+  const yNotchStart = yFoldBottom + NOTCH_Y2;
+  const yEnd = D + C + B / 2 + DIP4;
+  const totalWidth = xEnd;
+  const totalHeight = yEnd;
+  const crease = [];
+  crease.push(line8(0, yFoldTop, totalWidth, yFoldTop));
+  crease.push(line8(0, yFoldBottomStart, totalWidth, yFoldBottomStart));
+  crease.push(line8(kulak, yFoldBottom, xEnd, yFoldBottom));
+  crease.push(line8(xFront, 0, xFront, yFoldBottom));
+  crease.push(line8(xSide1, 0, xSide1, yFoldBottom));
+  crease.push(line8(xBack, 0, xBack, yFoldBottom));
+  crease.push(line8(xSide2, 0, xSide2, yFoldBottom));
+  crease.push(line8(xSide1Mid, 0, xSide1Mid, totalHeight));
+  crease.push(line8(xSide2Mid, 0, xSide2Mid, totalHeight));
+  crease.push(line8(xBack, yFoldBottom, xSide1Mid, yFoldBottomStart));
+  crease.push(line8(xSide1Mid, yFoldBottomStart, xSide1, yFoldBottom));
+  crease.push(line8(xSide2Mid, yFoldBottomStart, xSide2, yFoldBottom));
+  crease.push(line8(xSide2Mid, yFoldBottomStart, xEnd, D + C - 2));
+  const sections = [];
+  let colorIdx = 0;
+  sections.push({
+    name: "Outer Edges",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line8(0, 0, totalWidth, 0),
+      line8(0, 0, 0, yFoldBottom - kulak),
+      line8(totalWidth, 0, totalWidth, yFoldBottom)
+    ]
+  });
+  sections.push({
+    name: "Glue Flap Diagonal",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [line8(0, yFoldBottom - kulak, kulak, yFoldBottom)]
+  });
+  sections.push({
+    name: "V-Notch Front",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line8(xFront + NOTCH_X2, yNotchStart, xFront + NOTCH_X2, totalHeight),
+      line8(xFront + NOTCH_X2, yNotchStart, xFront, yFoldBottom)
+    ]
+  });
+  sections.push({
+    name: "V-Notch Side1",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line8(xSide1 - NOTCH_X2, yNotchStart, xSide1 - NOTCH_X2, totalHeight),
+      line8(xSide1 - NOTCH_X2, yNotchStart, xSide1, yFoldBottom),
+      line8(xSide1 + NOTCH_X2, yNotchStart, xSide1 + NOTCH_X2, totalHeight),
+      line8(xSide1 + NOTCH_X2, yNotchStart, xSide1, yFoldBottom)
+    ]
+  });
+  sections.push({
+    name: "V-Notch Back",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line8(xBack - NOTCH_X2, yNotchStart, xBack - NOTCH_X2, totalHeight),
+      line8(xBack - NOTCH_X2, yNotchStart, xBack, yFoldBottom),
+      line8(xBack + NOTCH_X2, yNotchStart, xBack + NOTCH_X2, totalHeight),
+      line8(xBack + NOTCH_X2, yNotchStart, xBack, yFoldBottom)
+    ]
+  });
+  sections.push({
+    name: "V-Notch Side2",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line8(xSide2 - NOTCH_X2, yNotchStart, xSide2 - NOTCH_X2, totalHeight),
+      line8(xSide2 - NOTCH_X2, yNotchStart, xSide2, yFoldBottom),
+      line8(xSide2 + NOTCH_X2, yNotchStart, xSide2 + NOTCH_X2, totalHeight),
+      line8(xSide2 + NOTCH_X2, yNotchStart, xSide2, yFoldBottom)
+    ]
+  });
+  sections.push({
+    name: "V-Notch End",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line8(xEnd - NOTCH_X2, yNotchStart, xEnd - NOTCH_X2, totalHeight),
+      line8(xEnd - NOTCH_X2, yNotchStart, xEnd, yFoldBottom)
+    ]
+  });
+  sections.push({
+    name: "Bottom Segments",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line8(xFront + NOTCH_X2, totalHeight, xSide1 - NOTCH_X2, totalHeight),
+      line8(xSide1 + NOTCH_X2, totalHeight, xBack - NOTCH_X2, totalHeight),
+      line8(xBack + NOTCH_X2, totalHeight, xSide2 - NOTCH_X2, totalHeight),
+      line8(xSide2 + NOTCH_X2, totalHeight, xEnd - NOTCH_X2, totalHeight)
+    ]
+  });
+  const frontCx = kulak + A / 2;
+  const backCx = kulak + A + B + A / 2;
+  const yRibbonTop = yFoldTop - RIBBON_DY2 / 2;
+  const yRibbonBot = yFoldTop + RIBBON_DY2 / 2;
+  function ribbonNotchPaths(cx) {
+    return [
+      line8(cx - RIBBON_HALF_W2, yRibbonBot, cx + RIBBON_HALF_W2, yRibbonBot),
+      line8(cx - RIBBON_HALF_W2 - RIBBON_DX2, yRibbonTop, cx - RIBBON_HALF_W2, yRibbonBot),
+      line8(cx + RIBBON_HALF_W2 + RIBBON_DX2, yRibbonTop, cx + RIBBON_HALF_W2, yRibbonBot)
+    ];
+  }
+  sections.push({
+    name: "Front Left Ribbon",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: ribbonNotchPaths(frontCx - X / 2)
+  });
+  sections.push({
+    name: "Front Right Ribbon",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: ribbonNotchPaths(frontCx + X / 2)
+  });
+  sections.push({
+    name: "Back Left Ribbon",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: ribbonNotchPaths(backCx - X / 2)
+  });
+  sections.push({
+    name: "Back Right Ribbon",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: ribbonNotchPaths(backCx + X / 2)
+  });
+  return {
+    sections,
+    crease,
+    viewBox: { width: totalWidth, height: totalHeight }
+  };
+}
 var MODEL_ID8 = "BECF-C-12109";
 var UNIT_FACTOR8 = {
   mm: 1,
@@ -5068,7 +5909,8 @@ var DIE_LINE_BECF_C_12109 = react.forwardRef(
     attributes,
     unit = "mm",
     isShowDimensions = false,
-    renderAs = "svg"
+    renderAs = "svg",
+    debug = false
   }, ref) => {
     const theme = react.useMemo(
       () => getModelTheme(),
@@ -5080,6 +5922,10 @@ var DIE_LINE_BECF_C_12109 = react.forwardRef(
       () => generateDimensions8(attributes, unit),
       [attributes, unit]
     );
+    const debugData = react.useMemo(
+      () => debug ? generateBecfC12109DebugSections(attributes) : null,
+      [attributes, debug]
+    );
     const factor = UNIT_FACTOR8[unit] ?? 1;
     const serializeSvg = react.useCallback(
       (showDimensions) => {
@@ -5168,7 +6014,8 @@ var DIE_LINE_BECF_C_12109 = react.forwardRef(
     const vbY = -padding;
     const vbW = dieline.viewBox.width + padding * 2;
     const vbH = dieline.viewBox.height + padding * 2;
-    const svgChildren = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    const debugFontSize = Math.max(3, dieline.viewBox.width / 80);
+    const svgChildren = debug && debugData ? /* @__PURE__ */ jsxRuntime.jsx(DebugOverlay, { data: debugData, fontSize: debugFontSize }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "crease", children: dieline.crease.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorFoldLine, strokeWidth: 0.5, strokeDasharray: "2,1" }, `c-${i}`)) }),
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "cut", children: dieline.cut.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorDieLine, strokeWidth: 0.5 }, `t-${i}`)) }),
       isShowDimensions && /* @__PURE__ */ jsxRuntime.jsx("g", { id: "dimensions", children: dimensions.map((d, i) => renderDimension8(d, i, getFontDimensionSize())) })
@@ -5343,6 +6190,61 @@ function generateBecfB12101(attr) {
   crease.push(line9(xSide2Mid, yFoldBottomStart, xEnd, C - 2));
   return { cut, crease, viewBox: { width: totalWidth, height: totalHeight } };
 }
+function generateBecfB12101DebugSections(attr) {
+  const { length: A, width: B, height: C, glueArea } = attr;
+  const kulak = glueArea ?? calcKulak5(B);
+  const xFront = kulak;
+  const xSide1 = kulak + A;
+  const xSide1Mid = kulak + A + B / 2;
+  const xBack = kulak + A + B;
+  const xSide2 = kulak + 2 * A + B;
+  const xSide2Mid = kulak + 2 * A + B + B / 2;
+  const xEnd = kulak + 2 * A + 2 * B - 2;
+  const yFoldBottomStart = C - B / 2;
+  const yFoldBottom = C;
+  const yBottomFlap = C + B / 2;
+  const yEnd = C + B / 2 + DIP5;
+  const totalWidth = xEnd;
+  const totalHeight = yEnd;
+  const crease = [];
+  crease.push(line9(0, yFoldBottomStart, totalWidth, yFoldBottomStart));
+  crease.push(line9(0, yFoldBottom, totalWidth, yFoldBottom));
+  crease.push(line9(xFront, 0, xFront, totalHeight));
+  crease.push(line9(xSide1, 0, xSide1, totalHeight));
+  crease.push(line9(xSide1Mid, 0, xSide1Mid, totalHeight));
+  crease.push(line9(xBack, 0, xBack, totalHeight));
+  crease.push(line9(xSide2, 0, xSide2, totalHeight));
+  crease.push(line9(xSide2Mid, 0, xSide2Mid, totalHeight));
+  crease.push(line9(0, yFoldBottom - kulak, kulak + B / 2, yBottomFlap));
+  crease.push(line9(kulak + A - B / 2, yBottomFlap, xSide1Mid, yFoldBottomStart));
+  crease.push(line9(xSide1Mid, yFoldBottomStart, kulak + A + B + B / 2, yBottomFlap));
+  crease.push(line9(kulak + 2 * A + B - B / 2, yBottomFlap, xSide2Mid, yFoldBottomStart));
+  crease.push(line9(xSide2Mid, yFoldBottomStart, xEnd, C - 2));
+  let ci = 0;
+  const sections = [
+    {
+      name: "Outer Rect",
+      color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length],
+      paths: [
+        line9(0, 0, totalWidth, 0),
+        line9(totalWidth, 0, totalWidth, totalHeight),
+        line9(totalWidth, totalHeight, 0, totalHeight),
+        line9(0, totalHeight, 0, 0)
+      ]
+    },
+    {
+      name: "Bottom Zone Cuts",
+      color: DEBUG_PALETTE[ci++ % DEBUG_PALETTE.length],
+      paths: [
+        line9(kulak + B / 2, yBottomFlap, kulak + B / 2, yEnd),
+        line9(kulak + A - B / 2, yBottomFlap, kulak + A - B / 2, yEnd),
+        line9(kulak + A + B + B / 2, yBottomFlap, kulak + A + B + B / 2, yEnd),
+        line9(kulak + 2 * A + B - B / 2, yBottomFlap, kulak + 2 * A + B - B / 2, yEnd)
+      ]
+    }
+  ];
+  return { sections, crease, viewBox: { width: totalWidth, height: totalHeight } };
+}
 function generateOuterContour9(attr) {
   const { length: A, width: B, height: C, glueArea } = attr;
   const kulak = glueArea ?? calcKulak5(B);
@@ -5515,10 +6417,14 @@ function renderDimension9(dim, i, fs) {
   ] }, `dim-${i}`);
 }
 var DIE_LINE_BECF_B_12101 = react.forwardRef(
-  ({ attributes, unit = "mm", isShowDimensions = false, renderAs = "svg" }, ref) => {
+  ({ attributes, unit = "mm", isShowDimensions = false, renderAs = "svg", debug = false }, ref) => {
     const theme = react.useMemo(() => getModelTheme(), []);
     const svgRef = react.useRef(null);
     const dieline = react.useMemo(() => generateBecfB12101(attributes), [attributes]);
+    const debugData = react.useMemo(
+      () => debug ? generateBecfB12101DebugSections(attributes) : null,
+      [attributes, debug]
+    );
     const dimensions = react.useMemo(() => generateDimensions9(attributes, unit), [attributes, unit]);
     const factor = UNIT_FACTOR9[unit] ?? 1;
     const serializeSvg = react.useCallback((showDimensions) => {
@@ -5582,7 +6488,8 @@ var DIE_LINE_BECF_B_12101 = react.forwardRef(
     const vbY = -padding;
     const vbW = dieline.viewBox.width + padding * 2;
     const vbH = dieline.viewBox.height + padding * 2;
-    const svgChildren = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    const debugFontSize = Math.max(3, dieline.viewBox.width / 80);
+    const svgChildren = debug && debugData ? /* @__PURE__ */ jsxRuntime.jsx(DebugOverlay, { data: debugData, fontSize: debugFontSize }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "crease", children: dieline.crease.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorFoldLine, strokeWidth: 0.5, strokeDasharray: "2,1" }, `c-${i}`)) }),
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "cut", children: dieline.cut.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorDieLine, strokeWidth: 0.5 }, `t-${i}`)) }),
       isShowDimensions && /* @__PURE__ */ jsxRuntime.jsx("g", { id: "dimensions", children: dimensions.map((d, i) => renderDimension9(d, i, getFontDimensionSize())) })
@@ -5898,6 +6805,113 @@ function generateDimensions10(attr, unit) {
     }
   ];
 }
+function generateBecfB12109DebugSections(attr) {
+  const { length: A, width: B, height: C, glueArea } = attr;
+  const kulak = glueArea ?? calcKulak6(B);
+  const xFront = kulak;
+  const xSide1 = kulak + A;
+  const xSide1Mid = kulak + A + B / 2;
+  const xBack = kulak + A + B;
+  const xSide2 = kulak + 2 * A + B;
+  const xSide2Mid = kulak + 2 * A + B + B / 2;
+  const xEnd = kulak + 2 * A + 2 * B - 2;
+  const yFoldBottomStart = C - B / 2;
+  const yFoldBottom = C;
+  const yNotchStart = yFoldBottom + NOTCH_Y3;
+  const yEnd = C + B / 2 + DIP6;
+  const totalWidth = xEnd;
+  const totalHeight = yEnd;
+  const crease = [];
+  crease.push(line10(0, yFoldBottomStart, totalWidth, yFoldBottomStart));
+  crease.push(line10(kulak, yFoldBottom, xEnd, yFoldBottom));
+  crease.push(line10(xFront, 0, xFront, yFoldBottom));
+  crease.push(line10(xSide1, 0, xSide1, yFoldBottom));
+  crease.push(line10(xBack, 0, xBack, yFoldBottom));
+  crease.push(line10(xSide2, 0, xSide2, yFoldBottom));
+  crease.push(line10(xSide1Mid, 0, xSide1Mid, totalHeight));
+  crease.push(line10(xSide2Mid, 0, xSide2Mid, totalHeight));
+  crease.push(line10(xBack, yFoldBottom, xSide1Mid, yFoldBottomStart));
+  crease.push(line10(xSide1Mid, yFoldBottomStart, xSide1, yFoldBottom));
+  crease.push(line10(xSide2Mid, yFoldBottomStart, xSide2, yFoldBottom));
+  crease.push(line10(xSide2Mid, yFoldBottomStart, xEnd, C - 2));
+  const sections = [];
+  let colorIdx = 0;
+  sections.push({
+    name: "Outer Edges",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line10(0, 0, totalWidth, 0),
+      line10(0, 0, 0, yFoldBottom - kulak),
+      line10(totalWidth, 0, totalWidth, yFoldBottom)
+    ]
+  });
+  sections.push({
+    name: "Glue Flap Diagonal",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [line10(0, yFoldBottom - kulak, kulak, yFoldBottom)]
+  });
+  sections.push({
+    name: "V-Notch Front",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line10(xFront + NOTCH_X3, yNotchStart, xFront + NOTCH_X3, totalHeight),
+      line10(xFront + NOTCH_X3, yNotchStart, xFront, yFoldBottom)
+    ]
+  });
+  sections.push({
+    name: "V-Notch Side1",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line10(xSide1 - NOTCH_X3, yNotchStart, xSide1 - NOTCH_X3, totalHeight),
+      line10(xSide1 - NOTCH_X3, yNotchStart, xSide1, yFoldBottom),
+      line10(xSide1 + NOTCH_X3, yNotchStart, xSide1 + NOTCH_X3, totalHeight),
+      line10(xSide1 + NOTCH_X3, yNotchStart, xSide1, yFoldBottom)
+    ]
+  });
+  sections.push({
+    name: "V-Notch Back",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line10(xBack - NOTCH_X3, yNotchStart, xBack - NOTCH_X3, totalHeight),
+      line10(xBack - NOTCH_X3, yNotchStart, xBack, yFoldBottom),
+      line10(xBack + NOTCH_X3, yNotchStart, xBack + NOTCH_X3, totalHeight),
+      line10(xBack + NOTCH_X3, yNotchStart, xBack, yFoldBottom)
+    ]
+  });
+  sections.push({
+    name: "V-Notch Side2",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line10(xSide2 - NOTCH_X3, yNotchStart, xSide2 - NOTCH_X3, totalHeight),
+      line10(xSide2 - NOTCH_X3, yNotchStart, xSide2, yFoldBottom),
+      line10(xSide2 + NOTCH_X3, yNotchStart, xSide2 + NOTCH_X3, totalHeight),
+      line10(xSide2 + NOTCH_X3, yNotchStart, xSide2, yFoldBottom)
+    ]
+  });
+  sections.push({
+    name: "V-Notch End",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line10(xEnd - NOTCH_X3, yNotchStart, xEnd - NOTCH_X3, totalHeight),
+      line10(xEnd - NOTCH_X3, yNotchStart, xEnd, yFoldBottom)
+    ]
+  });
+  sections.push({
+    name: "Bottom Segments",
+    color: DEBUG_PALETTE[colorIdx++ % DEBUG_PALETTE.length],
+    paths: [
+      line10(xFront + NOTCH_X3, totalHeight, xSide1 - NOTCH_X3, totalHeight),
+      line10(xSide1 + NOTCH_X3, totalHeight, xBack - NOTCH_X3, totalHeight),
+      line10(xBack + NOTCH_X3, totalHeight, xSide2 - NOTCH_X3, totalHeight),
+      line10(xSide2 + NOTCH_X3, totalHeight, xEnd - NOTCH_X3, totalHeight)
+    ]
+  });
+  return {
+    sections,
+    crease,
+    viewBox: { width: totalWidth, height: totalHeight }
+  };
+}
 var MODEL_ID10 = "BECF-B-12109";
 var UNIT_FACTOR10 = {
   mm: 1,
@@ -5928,11 +6942,15 @@ function renderDimension10(dim, i, fs) {
   ] }, `dim-${i}`);
 }
 var DIE_LINE_BECF_B_12109 = react.forwardRef(
-  ({ attributes, unit = "mm", isShowDimensions = false, renderAs = "svg" }, ref) => {
+  ({ attributes, unit = "mm", isShowDimensions = false, renderAs = "svg", debug = false }, ref) => {
     const theme = react.useMemo(() => getModelTheme(), []);
     const svgRef = react.useRef(null);
     const dieline = react.useMemo(() => generateBecfB12109(attributes), [attributes]);
     const dimensions = react.useMemo(() => generateDimensions10(attributes, unit), [attributes, unit]);
+    const debugData = react.useMemo(
+      () => debug ? generateBecfB12109DebugSections(attributes) : null,
+      [attributes, debug]
+    );
     const factor = UNIT_FACTOR10[unit] ?? 1;
     const serializeSvg = react.useCallback((showDimensions) => {
       const svg = svgRef.current;
@@ -5995,7 +7013,8 @@ var DIE_LINE_BECF_B_12109 = react.forwardRef(
     const vbY = -padding;
     const vbW = dieline.viewBox.width + padding * 2;
     const vbH = dieline.viewBox.height + padding * 2;
-    const svgChildren = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    const debugFontSize = Math.max(3, dieline.viewBox.width / 80);
+    const svgChildren = debug && debugData ? /* @__PURE__ */ jsxRuntime.jsx(DebugOverlay, { data: debugData, fontSize: debugFontSize }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "crease", children: dieline.crease.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorFoldLine, strokeWidth: 0.5, strokeDasharray: "2,1" }, `c-${i}`)) }),
       /* @__PURE__ */ jsxRuntime.jsx("g", { id: "cut", children: dieline.cut.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorDieLine, strokeWidth: 0.5 }, `t-${i}`)) }),
       isShowDimensions && /* @__PURE__ */ jsxRuntime.jsx("g", { id: "dimensions", children: dimensions.map((d, i) => renderDimension10(d, i, getFontDimensionSize())) })
@@ -6083,31 +7102,22 @@ var TAPER = Math.tan(15 * Math.PI / 180);
 var TAB_W = 8;
 var CORNER = 3;
 var NOTCH = 10;
-function calcKulak7(b) {
-  if (b < 100) return 13;
-  if (b < 250) return 15;
-  if (b < 500) return 20;
-  return 25;
+function calcDil(a, b) {
+  const step = Math.max(0, Math.floor((a + b - 250) / 50));
+  return Math.min(b - 1, 15 + 2.5 * step);
 }
-function calcDil(a, b, c) {
-  const base = Math.max(15, Math.min(30, (a + b + 50) / 20));
-  return Math.max(9, Math.min(a / 2, b - 1, c / 2, base));
+function calcFlap(b, dil) {
+  return Math.min(dil / 2 + b / 2 - 0.5, b / 2);
 }
 function calcDip(b) {
-  if (b <= 22) return 9;
-  if (b <= 28) return Math.floor((b - 4) / 2);
-  if (b <= 77) return 12;
-  if (b <= 120) return Math.floor(b / 6);
-  if (b <= 167) return 20;
-  if (b <= 199) return Math.floor(b / 8);
-  if (b < 300) return 30;
-  if (b < 400) return 35;
-  return 40;
+  if (b < 30) return Math.max(9, b * 0.3 + 3);
+  return Math.max(12, Math.min(20, Math.floor(b / 6)));
 }
 function generateBecf10a0a(attr) {
-  const { length: A, width: B, height: C } = attr;
-  const kulak = calcKulak7(B);
-  const dil = calcDil(A, B, C);
+  const { length: A, width: B, height: C, glueArea } = attr;
+  const kulak = glueArea;
+  const dil = calcDil(A, B);
+  const flap = calcFlap(B, dil);
   const dip = calcDip(B);
   const glueTaper = kulak * TAPER;
   const tuckH = B / 2 + ARC_R4;
@@ -6122,9 +7132,9 @@ function generateBecf10a0a(attr) {
   const yTuckFlapTop = B + dil - 1 - tuckH;
   const yFoldTop = B + dil - 1;
   const yFoldBottom = yFoldTop + C;
-  const yFoldBottomB2 = yFoldBottom + B / 2;
-  const ySideBottom = yFoldBottom + A / 4 + dip + SNAP_R;
-  const yBottom = yFoldBottom + B / 2 + dip + SNAP_R;
+  const yFoldBottomFlap = yFoldBottom + flap;
+  const ySideBottom = yFoldBottom + flap + dip + SNAP_R;
+  const yBottom = yFoldBottom + flap + dip + SNAP_R;
   const totalWidth = xEnd;
   const totalHeight = yBottom;
   const cut = [];
@@ -6163,10 +7173,10 @@ function generateBecf10a0a(attr) {
   cut.push(...lockTab(xBack, xSide2, yTop, yTuckTop, yLockCrease, yFoldTop));
   cut.push(...side1TuckFlap(xSide1, xBack, yFoldTop, yTuckFlapTop, tuckH));
   cut.push(...side2TuckFlap(xSide2, xEnd, yFoldTop, yTuckFlapTop, tuckH));
-  cut.push(...frontPanelBottom(xFront, xSide1, A, yFoldBottom, yFoldBottomB2, yBottom, dip));
-  cut.push(...backPanelBottom(xBack, xSide2, A, yFoldBottom, yFoldBottomB2, yBottom, ySideBottom, dip));
-  cut.push(...side1Bottom(xSide1, xBack, B, A, yFoldBottom, ySideBottom, dip));
-  cut.push(...side2Bottom(xSide2, xEnd, B, A, yFoldBottom, ySideBottom, dip));
+  cut.push(...frontPanelBottom(xFront, xSide1, A, B, yFoldBottom, yFoldBottomFlap, yBottom, dip));
+  cut.push(...backPanelBottom(xBack, xSide2, A, B, yFoldBottom, yFoldBottomFlap, yBottom, ySideBottom, dip));
+  cut.push(...side1Bottom(xSide1, xBack, B, flap, yFoldBottom, ySideBottom, dip));
+  cut.push(...side2Bottom(xSide2, xEnd, B, flap, yFoldBottom, ySideBottom, dip));
   return { cut, crease, viewBox: { width: totalWidth, height: totalHeight } };
 }
 function line11(x1, y1, x2, y2) {
@@ -6209,46 +7219,44 @@ function side2TuckFlap(xSide2, xEnd, yFoldTop, yTuckFlapTop, tuckH) {
   const rightPath = `M${rightTargetX} ${yTuckFlapTop} L${xEnd - CORNER} ${yFoldTop - TAB_W - CORNER} L${xEnd} ${yFoldTop - TAB_W} L${xEnd} ${yFoldTop}`;
   return [leftTop, rightPath];
 }
-function frontPanelBottom(xFront, xSide1, A, yFoldBottom, yFoldBottomB2, yBottom, dip) {
+function frontPanelBottom(xFront, xSide1, _A, B, yFoldBottom, yFoldBottomFlap, yBottom, dip) {
   const paths = [];
   paths.push(line11(xFront, yFoldBottom, xFront, yBottom));
   paths.push(line11(xSide1, yBottom, xSide1, yFoldBottom));
-  const notchHalfTop = A / 4 + MT5;
   const notchTaperH = (dip + SNAP_R) * TAPER;
-  const center = xFront + A / 2;
-  const nlt = center - notchHalfTop;
-  const nrt = center + notchHalfTop;
+  const nlt = xFront + B / 2;
+  const nrt = xSide1 - B / 2;
   const nlb = nlt + notchTaperH;
   const nrb = nrt - notchTaperH;
   paths.push(line11(xFront, yBottom, nlb, yBottom));
-  paths.push(line11(nlb, yBottom, nlt, yFoldBottomB2));
-  paths.push(line11(nlt, yFoldBottomB2, nrt, yFoldBottomB2));
-  paths.push(line11(nrt, yFoldBottomB2, nrb, yBottom));
+  paths.push(line11(nlb, yBottom, nlt, yFoldBottomFlap));
+  paths.push(line11(nlt, yFoldBottomFlap, nrt, yFoldBottomFlap));
+  paths.push(line11(nrt, yFoldBottomFlap, nrb, yBottom));
   paths.push(line11(nrb, yBottom, xSide1, yBottom));
   return paths;
 }
-function backPanelBottom(xBack, xSide2, A, yFoldBottom, yFoldBottomB2, yBottom, ySideBottom, dip) {
+function backPanelBottom(xBack, xSide2, _A, B, yFoldBottom, yFoldBottomFlap, yBottom, ySideBottom, dip) {
   const paths = [];
-  const diagH = A / 4;
+  const diagH = B / 2;
   paths.push(line11(xBack, yFoldBottom, xBack, ySideBottom));
   paths.push(line11(xSide2, ySideBottom, xSide2, yFoldBottom));
-  paths.push(line11(xBack, yFoldBottom, xBack + diagH, yFoldBottomB2));
-  paths.push(line11(xSide2, yFoldBottom, xSide2 - diagH, yFoldBottomB2));
-  paths.push(line11(xBack + diagH, yFoldBottomB2, xBack + diagH, yFoldBottomB2 + dip));
-  paths.push(line11(xSide2 - diagH, yFoldBottomB2 + dip, xSide2 - diagH, yFoldBottomB2));
+  paths.push(line11(xBack, yFoldBottom, xBack + diagH, yFoldBottomFlap));
+  paths.push(line11(xSide2, yFoldBottom, xSide2 - diagH, yFoldBottomFlap));
+  paths.push(line11(xBack + diagH, yFoldBottomFlap, xBack + diagH, yFoldBottomFlap + dip));
+  paths.push(line11(xSide2 - diagH, yFoldBottomFlap + dip, xSide2 - diagH, yFoldBottomFlap));
   paths.push(
-    `M${xBack + diagH} ${yFoldBottomB2 + dip} A${SNAP_R} ${SNAP_R} 0 0 0 ${xBack + diagH + SNAP_R} ${yBottom}`
+    `M${xBack + diagH} ${yFoldBottomFlap + dip} A${SNAP_R} ${SNAP_R} 0 0 0 ${xBack + diagH + SNAP_R} ${yBottom}`
   );
   paths.push(
-    `M${xSide2 - diagH - SNAP_R} ${yBottom} A${SNAP_R} ${SNAP_R} 0 0 0 ${xSide2 - diagH} ${yFoldBottomB2 + dip}`
+    `M${xSide2 - diagH - SNAP_R} ${yBottom} A${SNAP_R} ${SNAP_R} 0 0 0 ${xSide2 - diagH} ${yFoldBottomFlap + dip}`
   );
   paths.push(line11(xBack + diagH + SNAP_R, yBottom, xSide2 - diagH - SNAP_R, yBottom));
   return paths;
 }
-function side1Bottom(xSide1, xBack, B, A, yFoldBottom, ySideBottom, dip) {
+function side1Bottom(xSide1, xBack, B, flap, yFoldBottom, ySideBottom, dip) {
   const paths = [];
   const diagEndX = xSide1 + B / 2;
-  const diagEndY = yFoldBottom + A / 4;
+  const diagEndY = yFoldBottom + flap;
   const taperV = dip + SNAP_R;
   const taperH = taperV * TAPER;
   paths.push(line11(xSide1, yFoldBottom, diagEndX, diagEndY));
@@ -6256,10 +7264,10 @@ function side1Bottom(xSide1, xBack, B, A, yFoldBottom, ySideBottom, dip) {
   paths.push(line11(diagEndX - taperH, ySideBottom, xBack, ySideBottom));
   return paths;
 }
-function side2Bottom(xSide2, xEnd, B, A, yFoldBottom, ySideBottom, dip) {
+function side2Bottom(xSide2, xEnd, B, flap, yFoldBottom, ySideBottom, dip) {
   const paths = [];
   const diagEndX = xSide2 + B / 2;
-  const diagEndY = yFoldBottom + A / 4;
+  const diagEndY = yFoldBottom + flap;
   const taperV = dip + SNAP_R;
   const taperH = taperV * TAPER;
   paths.push(line11(xEnd, yFoldBottom, diagEndX, diagEndY));
@@ -6268,23 +7276,29 @@ function side2Bottom(xSide2, xEnd, B, A, yFoldBottom, ySideBottom, dip) {
   return paths;
 }
 function generateDimensions11(attr, unit) {
-  const { length: A, width: B, height: C } = attr;
-  const kulak = calcKulak7(B);
-  const dil = calcDil(A, B, C);
+  const { length: A, width: B, height: C, glueArea } = attr;
+  const kulak = glueArea;
+  const dil = calcDil(A, B);
+  const flap = calcFlap(B, dil);
   const dip = calcDip(B);
   const xFront = kulak;
   const xSide1 = kulak + A;
+  const xBack = kulak + A + B;
   const xSide2 = kulak + 2 * A + B;
   const xEnd = kulak + 2 * A + 2 * B - 0.5;
+  const yTop = 0;
+  const yTuckTop = dil - 1;
   const yFoldTop = B + dil - 1;
   const yFoldBottom = yFoldTop + C;
-  const yBottom = yFoldBottom + B / 2 + dip + SNAP_R;
+  const yBottom = yFoldBottom + flap + dip + SNAP_R;
   const totalWidth = xEnd;
   const totalHeight = yBottom;
   const factor = unit === "cm" ? 0.1 : unit === "in" ? 1 / 25.4 : 1;
   const suffix = unit;
   const fmt = (v) => `${(v * factor).toFixed(2)} ${suffix}`;
+  const backMidX = (xBack + xSide2) / 2;
   return [
+    // Overall dimensions
     {
       x1: 0,
       y1: 0,
@@ -6303,15 +7317,17 @@ function generateDimensions11(attr, unit) {
       orientation: "horizontal",
       offset: -12
     },
+    // Glue Area (horizontal, same row as A/B at yFoldBottom)
     {
-      x1: xSide2,
-      y1: yFoldTop,
-      x2: xSide2,
+      x1: 0,
+      y1: yFoldBottom,
+      x2: xFront,
       y2: yFoldBottom,
-      label: fmt(C),
-      orientation: "vertical",
-      offset: -14
+      label: fmt(kulak),
+      orientation: "horizontal",
+      offset: -20
     },
+    // A (length)
     {
       x1: xFront,
       y1: yFoldBottom,
@@ -6321,6 +7337,7 @@ function generateDimensions11(attr, unit) {
       orientation: "horizontal",
       offset: -20
     },
+    // B (width)
     {
       x1: xSide1,
       y1: yFoldBottom,
@@ -6329,9 +7346,233 @@ function generateDimensions11(attr, unit) {
       label: fmt(B),
       orientation: "horizontal",
       offset: -20
+    },
+    // Lock Tab height (yTop → yTuckTop)
+    {
+      x1: backMidX,
+      y1: yTop,
+      x2: backMidX,
+      y2: yTuckTop,
+      label: fmt(yTuckTop - yTop),
+      orientation: "vertical",
+      offset: 0
+    },
+    // B / width (yTuckTop → yFoldTop, shows B - 1.5)
+    {
+      x1: backMidX,
+      y1: yTuckTop,
+      x2: backMidX,
+      y2: yFoldTop,
+      label: fmt(B - 1.5),
+      orientation: "vertical",
+      offset: 0
+    },
+    // C / height (yFoldTop → yFoldBottom)
+    {
+      x1: backMidX,
+      y1: yFoldTop,
+      x2: backMidX,
+      y2: yFoldBottom,
+      label: fmt(C),
+      orientation: "vertical",
+      offset: 0
+    },
+    // Back Bottom / Snap Lock (yFoldBottom → yBottom, shows B - 1.5)
+    {
+      x1: backMidX,
+      y1: yFoldBottom,
+      x2: backMidX,
+      y2: yBottom,
+      label: fmt(B - 1.5),
+      orientation: "vertical",
+      offset: 0
     }
   ];
 }
+function generateBecf10a0aDebug(attr) {
+  const { length: A, width: B, height: C, glueArea } = attr;
+  const kulak = glueArea;
+  const dil = calcDil(A, B);
+  const flap = calcFlap(B, dil);
+  const dip = calcDip(B);
+  const glueTaper = kulak * TAPER;
+  const tuckH = B / 2 + ARC_R4;
+  const xFront = kulak;
+  const xSide1 = kulak + A;
+  const xBack = kulak + A + B;
+  const xSide2 = kulak + 2 * A + B;
+  const xEnd = kulak + 2 * A + 2 * B - 0.5;
+  const yTop = 0;
+  const yTuckTop = dil - 1;
+  const yLockCrease = dil;
+  const yTuckFlapTop = B + dil - 1 - tuckH;
+  const yFoldTop = B + dil - 1;
+  const yFoldBottom = yFoldTop + C;
+  const yFoldBottomFlap = yFoldBottom + flap;
+  const ySideBottom = yFoldBottom + flap + dip + SNAP_R;
+  const yBottom = yFoldBottom + flap + dip + SNAP_R;
+  const totalWidth = xEnd;
+  const totalHeight = yBottom;
+  const crease = [];
+  crease.push(
+    line11(xFront, yFoldTop, xFront, yFoldBottom),
+    line11(xSide1, yFoldTop, xSide1, yFoldBottom),
+    line11(xBack, yFoldTop, xBack, yFoldBottom),
+    line11(xSide2, yFoldTop, xSide2, yFoldBottom)
+  );
+  crease.push(
+    line11(xFront, yFoldBottom, xSide1, yFoldBottom),
+    line11(xSide1, yFoldBottom, xBack, yFoldBottom),
+    line11(xBack, yFoldBottom, xSide2, yFoldBottom),
+    line11(xSide2, yFoldBottom, xEnd, yFoldBottom)
+  );
+  crease.push(
+    line11(xBack, yFoldTop, xSide1 + MT5, yFoldTop),
+    line11(xBack, yFoldTop - MT5, xSide2, yFoldTop - MT5),
+    line11(xSide2, yFoldTop, xEnd, yFoldTop)
+  );
+  crease.push(line11(xBack + NOTCH, yLockCrease, xSide2 - NOTCH, yLockCrease));
+  const pt = (id, x, y, color) => ({ id, x, y, color });
+  const groups = [];
+  const notchTaperH = (dip + SNAP_R) * TAPER;
+  const nlt = xFront + B / 2;
+  const nrt = xSide1 - B / 2;
+  const nlb = nlt + notchTaperH;
+  const nrb = nrt - notchTaperH;
+  const diagH = B / 2;
+  const s1DiagEndX = xSide1 + B / 2;
+  const s2DiagEndX = xSide2 + B / 2;
+  const taperV = dip + SNAP_R;
+  const sideTaperH = taperV * TAPER;
+  groups.push({
+    name: "Glue Flap",
+    color: "#e74c3c",
+    paths: [
+      `M${xFront} ${yFoldBottom} L${0} ${yFoldBottom - glueTaper} L${0} ${yFoldTop + glueTaper} L${xFront} ${yFoldTop}`
+    ],
+    points: [],
+    labelX: kulak / 2,
+    labelY: (yFoldTop + yFoldBottom) / 2
+  });
+  groups.push({
+    name: "Front Panel",
+    color: "#3498db",
+    paths: [
+      line11(xSide1, yFoldTop, xFront, yFoldTop),
+      line11(xSide1, yFoldTop, xSide1 + MT5, yFoldTop)
+    ],
+    points: [],
+    labelX: (xFront + xSide1) / 2,
+    labelY: (yFoldTop + yFoldBottom) / 2
+  });
+  groups.push({
+    name: "Side1 Tuck Flap",
+    color: "#2ecc71",
+    paths: side1TuckFlap(xSide1, xBack, yFoldTop, yTuckFlapTop, tuckH),
+    points: [],
+    labelX: (xSide1 + xBack) / 2,
+    labelY: (yTuckFlapTop + yFoldTop) / 2
+  });
+  groups.push({
+    name: "Lock Tab",
+    color: "#9b59b6",
+    paths: lockTab(xBack, xSide2, yTop, yTuckTop, yLockCrease, yFoldTop),
+    points: [],
+    labelX: (xBack + xSide2) / 2,
+    labelY: (yTop + yFoldTop) / 2
+  });
+  groups.push({
+    name: "Back Panel",
+    color: "#f39c12",
+    paths: [],
+    points: [],
+    labelX: (xBack + xSide2) / 2,
+    labelY: (yFoldTop + yFoldBottom) / 2
+  });
+  groups.push({
+    name: "Side2 Tuck Flap",
+    color: "#1abc9c",
+    paths: side2TuckFlap(xSide2, xEnd, yFoldTop, yTuckFlapTop, tuckH),
+    points: [],
+    labelX: (xSide2 + xEnd) / 2,
+    labelY: (yTuckFlapTop + yFoldTop) / 2
+  });
+  groups.push({
+    name: "Side2 Panel",
+    color: "#e67e22",
+    paths: [line11(xEnd, yFoldTop, xEnd, yFoldBottom)],
+    points: [],
+    labelX: (xSide2 + xEnd) / 2,
+    labelY: (yFoldTop + yFoldBottom) / 2
+  });
+  const cF = "#e74c3c";
+  groups.push({
+    name: "Front Bottom",
+    color: cF,
+    paths: frontPanelBottom(xFront, xSide1, A, B, yFoldBottom, yFoldBottomFlap, yBottom, dip),
+    points: [
+      pt("F1", xFront, yFoldBottom, cF),
+      pt("F2", xFront, yBottom, cF),
+      pt("F3", nlb, yBottom, cF),
+      pt("F4", nlt, yFoldBottomFlap, cF),
+      pt("F5", nrt, yFoldBottomFlap, cF),
+      pt("F6", nrb, yBottom, cF),
+      pt("F7", xSide1, yBottom, cF),
+      pt("F8", xSide1, yFoldBottom, cF)
+    ],
+    labelX: (xFront + xSide1) / 2,
+    labelY: (yFoldBottom + yBottom) / 2
+  });
+  const cS1 = "#2ecc71";
+  groups.push({
+    name: "Side1 Bottom",
+    color: cS1,
+    paths: side1Bottom(xSide1, xBack, B, flap, yFoldBottom, ySideBottom, dip),
+    points: [
+      pt("S1-1", xSide1, yFoldBottom, cS1),
+      pt("S1-2", s1DiagEndX, yFoldBottom + flap, cS1),
+      pt("S1-3", s1DiagEndX - sideTaperH, ySideBottom, cS1),
+      pt("S1-4", xBack, ySideBottom, cS1)
+    ],
+    labelX: (xSide1 + xBack) / 2,
+    labelY: (yFoldBottom + ySideBottom) / 2
+  });
+  const cB = "#9b59b6";
+  groups.push({
+    name: "Back Bottom\n(Snap Lock)",
+    color: cB,
+    paths: backPanelBottom(xBack, xSide2, A, B, yFoldBottom, yFoldBottomFlap, yBottom, ySideBottom, dip),
+    points: [
+      pt("B1", xBack, yFoldBottom, cB),
+      pt("B2", xBack, ySideBottom, cB),
+      pt("B3", xBack + diagH, yFoldBottomFlap, cB),
+      pt("B4", xBack + diagH, yFoldBottomFlap + dip, cB),
+      pt("B5", xBack + diagH + SNAP_R, yBottom, cB),
+      pt("B6", xSide2 - diagH - SNAP_R, yBottom, cB),
+      pt("B7", xSide2 - diagH, yFoldBottomFlap + dip, cB),
+      pt("B8", xSide2 - diagH, yFoldBottomFlap, cB),
+      pt("B9", xSide2, ySideBottom, cB),
+      pt("B10", xSide2, yFoldBottom, cB)
+    ],
+    labelX: (xBack + xSide2) / 2,
+    labelY: (yFoldBottom + yBottom) / 2
+  });
+  const cS2 = "#1abc9c";
+  groups.push({
+    name: "Side2 Bottom",
+    color: cS2,
+    paths: side2Bottom(xSide2, xEnd, B, flap, yFoldBottom, ySideBottom, dip),
+    points: [
+      pt("S2-1", xEnd, yFoldBottom, cS2),
+      pt("S2-2", s2DiagEndX, yFoldBottom + flap, cS2),
+      pt("S2-3", s2DiagEndX + sideTaperH, ySideBottom, cS2),
+      pt("S2-4", xSide2, ySideBottom, cS2)
+    ],
+    labelX: (xSide2 + xEnd) / 2,
+    labelY: (yFoldBottom + ySideBottom) / 2
+  });
+  return { groups, crease, viewBox: { width: totalWidth, height: totalHeight } };
+}
 var MODEL_ID11 = "BECF-10A0A";
 var UNIT_FACTOR11 = {
   mm: 1,
@@ -6347,8 +7588,28 @@ function renderDimension11(dim, i, fs) {
     const midX = (x1 + x2) / 2;
     return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("line", { x1, y1: y, x2, y2: y, stroke: "#000", strokeWidth: 0.2 }),
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1, y1: y - tick, x2: x1, y2: y + tick, stroke: "#000", strokeWidth: 0.3 }),
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x2, y1: y - tick, x2, y2: y + tick, stroke: "#000", strokeWidth: 0.3 }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1,
+          y1: y - tick,
+          x2: x1,
+          y2: y + tick,
+          stroke: "#000",
+          strokeWidth: 0.3
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: x2,
+          y1: y - tick,
+          x2,
+          y2: y + tick,
+          stroke: "#000",
+          strokeWidth: 0.3
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "text",
         {
@@ -6367,8 +7628,28 @@ function renderDimension11(dim, i, fs) {
   const midY = (y1 + y2) / 2;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x, y1, x2: x, y2, stroke: "#000", strokeWidth: 0.2 }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x - tick, y1, x2: x + tick, y2: y1, stroke: "#000", strokeWidth: 0.3 }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x - tick, y1: y2, x2: x + tick, y2, stroke: "#000", strokeWidth: 0.3 }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: x - tick,
+        y1,
+        x2: x + tick,
+        y2: y1,
+        stroke: "#000",
+        strokeWidth: 0.3
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: x - tick,
+        y1: y2,
+        x2: x + tick,
+        y2,
+        stroke: "#000",
+        strokeWidth: 0.3
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
@@ -6386,114 +7667,180 @@ function renderDimension11(dim, i, fs) {
   ] }, `dim-${i}`);
 }
 var DIE_LINE_BECF_10A0A = react.forwardRef(
-  ({
-    attributes,
-    unit = "mm",
-    isShowDimensions = false,
-    renderAs = "svg"
-  }, ref) => {
-    const theme = react.useMemo(
-      () => getModelTheme(),
-      []
-    );
+  ({ attributes, unit = "mm", isShowDimensions = false, renderAs = "svg", debug = false }, ref) => {
+    const theme = react.useMemo(() => getModelTheme(), []);
     const svgRef = react.useRef(null);
     const dieline = react.useMemo(() => generateBecf10a0a(attributes), [attributes]);
+    const debugDieline = react.useMemo(
+      () => debug ? generateBecf10a0aDebug(attributes) : null,
+      [attributes, debug]
+    );
     const dimensions = react.useMemo(
       () => generateDimensions11(attributes, unit),
       [attributes, unit]
     );
     const factor = UNIT_FACTOR11[unit] ?? 1;
-    const serializeSvg = react.useCallback(
-      (showDimensions) => {
-        const svg = svgRef.current;
-        if (!svg) throw new Error("SVG not mounted");
-        const clone = svg.cloneNode(true);
-        if (!showDimensions) {
-          const dimGroup = clone.querySelector("#dimensions");
-          dimGroup?.remove();
-        }
-        return new XMLSerializer().serializeToString(clone);
-      },
-      []
-    );
-    react.useImperativeHandle(
-      ref,
-      () => {
-        const { length: A, width: B, height: C } = attributes;
-        const kulak = calcKulak7(B);
-        const dil = calcDil(A, B, C);
-        const dip = calcDip(B);
-        const flap = Math.min(A / 2, B / 2 + dil / 2 - 0.5);
-        return {
-          getAttributes: () => ({
-            modelId: MODEL_ID11,
-            overallWidth: dieline.viewBox.width * factor,
-            overallHeight: dieline.viewBox.height * factor,
-            length: A * factor,
-            width: B * factor,
-            height: C * factor,
-            kulak: kulak * factor,
-            dil: dil * factor,
-            flap: flap * factor,
-            dip: dip * factor
-          }),
-          exportImage: async (options) => {
-            const svgStr = serializeSvg(options.isShowDimension);
-            const blob = new Blob([svgStr], {
-              type: "image/svg+xml;charset=utf-8"
-            });
-            const url = URL.createObjectURL(blob);
-            const img = new Image();
-            await new Promise((resolve, reject) => {
-              img.onload = () => resolve();
-              img.onerror = reject;
-              img.src = url;
-            });
-            const canvas = document.createElement("canvas");
-            if (options.originalSize) {
-              canvas.width = Math.round(dieline.viewBox.width * PX_PER_MM11);
-              canvas.height = Math.round(dieline.viewBox.height * PX_PER_MM11);
-            } else {
-              canvas.width = 1920;
-              canvas.height = 1080;
-            }
-            const ctx = canvas.getContext("2d");
-            ctx.fillStyle = "#ffffff";
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-            URL.revokeObjectURL(url);
-            return new Promise((resolve, reject) => {
-              canvas.toBlob(
-                (b) => b ? resolve(b) : reject(new Error("Export failed")),
-                "image/png"
-              );
-            });
-          },
-          exportDimension: async () => {
-            const dimData = generateDimensions11(attributes, unit);
-            return exportDimensionPdf({
-              modelId: MODEL_ID11,
-              dieline,
-              dimensions: dimData,
-              attributes,
-              unit,
-              factor,
-              theme
-            });
+    const serializeSvg = react.useCallback((showDimensions) => {
+      const svg = svgRef.current;
+      if (!svg) throw new Error("SVG not mounted");
+      const clone = svg.cloneNode(true);
+      if (!showDimensions) {
+        const dimGroup = clone.querySelector("#dimensions");
+        dimGroup?.remove();
+      }
+      return new XMLSerializer().serializeToString(clone);
+    }, []);
+    react.useImperativeHandle(ref, () => {
+      const { length: A, width: B, height: C, glueArea } = attributes;
+      const kulak = glueArea;
+      const dil = calcDil(A, B);
+      const flap = calcFlap(B, dil);
+      const dip = calcDip(B);
+      return {
+        getAttributes: () => ({
+          modelId: MODEL_ID11,
+          overallWidth: dieline.viewBox.width * factor,
+          overallHeight: dieline.viewBox.height * factor,
+          length: A * factor,
+          width: B * factor,
+          height: C * factor,
+          glueArea: glueArea * factor,
+          kulak: kulak * factor,
+          dil: dil * factor,
+          flap: flap * factor,
+          dip: dip * factor
+        }),
+        exportImage: async (options) => {
+          const svgStr = serializeSvg(options.isShowDimension);
+          const blob = new Blob([svgStr], {
+            type: "image/svg+xml;charset=utf-8"
+          });
+          const url = URL.createObjectURL(blob);
+          const img = new Image();
+          await new Promise((resolve, reject) => {
+            img.onload = () => resolve();
+            img.onerror = reject;
+            img.src = url;
+          });
+          const canvas = document.createElement("canvas");
+          if (options.originalSize) {
+            canvas.width = Math.round(dieline.viewBox.width * PX_PER_MM11);
+            canvas.height = Math.round(dieline.viewBox.height * PX_PER_MM11);
+          } else {
+            canvas.width = 1920;
+            canvas.height = 1080;
           }
-        };
-      },
-      [attributes, dieline, factor, unit, serializeSvg, theme]
-    );
+          const ctx = canvas.getContext("2d");
+          ctx.fillStyle = "#ffffff";
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          URL.revokeObjectURL(url);
+          return new Promise((resolve, reject) => {
+            canvas.toBlob(
+              (b) => b ? resolve(b) : reject(new Error("Export failed")),
+              "image/png"
+            );
+          });
+        },
+        exportDimension: async () => {
+          const dimData = generateDimensions11(attributes, unit);
+          return exportDimensionPdf({
+            modelId: MODEL_ID11,
+            dieline,
+            dimensions: dimData,
+            attributes,
+            unit,
+            factor,
+            theme
+          });
+        }
+      };
+    }, [attributes, dieline, factor, unit, serializeSvg, theme]);
     const padding = isShowDimensions ? 15 : 0;
     const vbX = -padding;
     const vbY = -padding;
     const vbW = dieline.viewBox.width + padding * 2;
     const vbH = dieline.viewBox.height + padding * 2;
-    const svgChildren = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("g", { id: "crease", children: dieline.crease.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorFoldLine, strokeWidth: 0.5, strokeDasharray: "2,1" }, `c-${i}`)) }),
-      /* @__PURE__ */ jsxRuntime.jsx("g", { id: "cut", children: dieline.cut.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill: "none", stroke: theme.colorDieLine, strokeWidth: 0.5 }, `t-${i}`)) }),
-      isShowDimensions && /* @__PURE__ */ jsxRuntime.jsx("g", { id: "dimensions", children: dimensions.map((d, i) => renderDimension11(d, i, getFontDimensionSize())) })
+    const debugFontSize = Math.max(3, dieline.viewBox.width / 80);
+    const svgChildren = debug && debugDieline ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("g", { id: "crease", children: debugDieline.crease.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d,
+          fill: "none",
+          stroke: "#999",
+          strokeWidth: 0.3,
+          strokeDasharray: "2,1"
+        },
+        `c-${i}`
+      )) }),
+      debugDieline.groups.map((group, gi) => /* @__PURE__ */ jsxRuntime.jsxs("g", { id: `debug-${group.name}`, children: [
+        group.paths.map((d, pi) => /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: group.color,
+            strokeWidth: 1
+          },
+          `dp-${gi}-${pi}`
+        )),
+        group.name.split("\n").map((ln, li) => /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: group.labelX,
+            y: group.labelY + li * (debugFontSize + 1),
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            fontSize: debugFontSize,
+            fontFamily: "sans-serif",
+            fontWeight: "bold",
+            fill: group.color,
+            children: ln
+          },
+          `label-${gi}-${li}`
+        )),
+        group.points.map((p) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: p.x, cy: p.y, r: 1.2, fill: p.color }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: p.x + 2,
+              y: p.y - 1.5,
+              fontSize: debugFontSize * 0.7,
+              fontFamily: "monospace",
+              fontWeight: "bold",
+              fill: p.color,
+              children: p.id
+            }
+          )
+        ] }, `pt-${p.id}`))
+      ] }, `debug-${gi}`))
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("g", { id: "crease", children: dieline.crease.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d,
+          fill: "none",
+          stroke: theme.colorFoldLine,
+          strokeWidth: 0.5,
+          strokeDasharray: "2,1"
+        },
+        `c-${i}`
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("g", { id: "cut", children: dieline.cut.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d,
+          fill: "none",
+          stroke: theme.colorDieLine,
+          strokeWidth: 0.5
+        },
+        `t-${i}`
+      )) }),
+      isShowDimensions && /* @__PURE__ */ jsxRuntime.jsx("g", { id: "dimensions", children: dimensions.map(
+        (d, i) => renderDimension11(d, i, getFontDimensionSize())
+      ) })
     ] });
     if (renderAs === "group") {
       return /* @__PURE__ */ jsxRuntime.jsx("g", { children: svgChildren });
@@ -6511,41 +7858,41 @@ var DIE_LINE_BECF_10A0A = react.forwardRef(
     );
   }
 );
-var CANVAS_BECF_10A0A = react.forwardRef(
-  (props, ref) => {
-    const dieLineRef = react.useRef(null);
-    const canvasRef = react.useRef(null);
-    const { attributes } = props;
-    const theme = react.useMemo(
-      () => getModelTheme(),
-      []
-    );
-    const dieline = react.useMemo(() => generateBecf10a0a(attributes), [attributes]);
-    const stablePadding = 15;
-    const viewBox = react.useMemo(
-      () => ({
-        x: -stablePadding,
-        y: -stablePadding,
-        width: dieline.viewBox.width + stablePadding * 2,
-        height: dieline.viewBox.height + stablePadding * 2
-      }),
-      [dieline.viewBox.width, dieline.viewBox.height]
-    );
-    const serializeCanvasSvg = react.useCallback((showDimensions) => {
-      const svg = canvasRef.current?.getSvgElement();
-      if (!svg) throw new Error("SVG not mounted");
-      const clone = svg.cloneNode(true);
-      if (!showDimensions) {
-        const dimGroup = clone.querySelector("#dimensions");
-        dimGroup?.remove();
-      }
-      return new XMLSerializer().serializeToString(clone);
-    }, []);
-    react.useImperativeHandle(ref, () => ({
+var CANVAS_BECF_10A0A = react.forwardRef((props, ref) => {
+  const dieLineRef = react.useRef(null);
+  const canvasRef = react.useRef(null);
+  const { attributes } = props;
+  const theme = react.useMemo(() => getModelTheme(), []);
+  const dieline = react.useMemo(() => generateBecf10a0a(attributes), [attributes]);
+  const stablePadding = 15;
+  const viewBox = react.useMemo(
+    () => ({
+      x: -stablePadding,
+      y: -stablePadding,
+      width: dieline.viewBox.width + stablePadding * 2,
+      height: dieline.viewBox.height + stablePadding * 2
+    }),
+    [dieline.viewBox.width, dieline.viewBox.height]
+  );
+  const serializeCanvasSvg = react.useCallback((showDimensions) => {
+    const svg = canvasRef.current?.getSvgElement();
+    if (!svg) throw new Error("SVG not mounted");
+    const clone = svg.cloneNode(true);
+    if (!showDimensions) {
+      const dimGroup = clone.querySelector("#dimensions");
+      dimGroup?.remove();
+    }
+    return new XMLSerializer().serializeToString(clone);
+  }, []);
+  react.useImperativeHandle(
+    ref,
+    () => ({
       getAttributes: () => dieLineRef.current.getAttributes(),
       exportImage: async (options) => {
         const svgStr = serializeCanvasSvg(options.isShowDimension);
-        const blob = new Blob([svgStr], { type: "image/svg+xml;charset=utf-8" });
+        const blob = new Blob([svgStr], {
+          type: "image/svg+xml;charset=utf-8"
+        });
         const url = URL.createObjectURL(blob);
         const img = new Image();
         await new Promise((resolve, reject) => {
@@ -6576,18 +7923,19 @@ var CANVAS_BECF_10A0A = react.forwardRef(
       exportDimension: () => dieLineRef.current.exportDimension(),
       resetView: () => canvasRef.current?.resetView(),
       fitView: () => canvasRef.current?.fitView()
-    }), [serializeCanvasSvg, dieline.viewBox.width, dieline.viewBox.height]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      BaseCanvas,
-      {
-        ref: canvasRef,
-        viewBox,
-        backgroundColor: theme.colorBackground,
-        children: /* @__PURE__ */ jsxRuntime.jsx(DIE_LINE_BECF_10A0A, { ref: dieLineRef, ...props, renderAs: "group" })
-      }
-    );
-  }
-);
+    }),
+    [serializeCanvasSvg, dieline.viewBox.width, dieline.viewBox.height]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseCanvas,
+    {
+      ref: canvasRef,
+      viewBox,
+      backgroundColor: theme.colorBackground,
+      children: /* @__PURE__ */ jsxRuntime.jsx(DIE_LINE_BECF_10A0A, { ref: dieLineRef, ...props, renderAs: "group" })
+    }
+  );
+});
 var MODEL_BECF_10A0A = react.forwardRef(
   ({ mode = "DIE_LINE", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (() => {
@@ -10468,9 +11816,10 @@ var BECF_B_12109_DEFAULT_ATTRIBUTES = {
 
 // src/statics/snap-lock-boxes/becf-10a0a/DEFAULT_ATTRIBUTES.ts
 var BECF_10A0A_DEFAULT_ATTRIBUTES = {
-  length: 150,
+  length: 100,
   width: 50,
-  height: 150
+  height: 150,
+  glueArea: 13
 };
 
 // src/statics/modelList.ts