npm - @lucablockltd/ultimate-packaging - Versions diffs - 1.0.1 → 1.0.3 - Mend

@lucablockltd/ultimate-packaging 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md CHANGED Viewed

@@ -1,1021 +1,3 @@
 # @lucablockltd/ultimate-packaging
-React library สำหรับสร้าง packaging dieline (แบบแผ่นกล่อง) และจัดวาง auto-layout บนแผ่นกระดาษ ใช้ได้กับ React และ Next.js
-**[Demo](https://PinitS.github.io/ultimate-packaging/)** — ทดลองใช้งานออนไลน์
-## ติดตั้ง
-```bash
-npm install @lucablockltd/ultimate-packaging
-```
-ต้องมี `react` >= 18.0.0 และ `react-dom` >= 18.0.0 เป็น peer dependency
----
-## สารบัญ
-- [Components](#components)
-  - [DIE_LINE_LAYOUT](#die_line_layout) — Wrapper component เลือก model อัตโนมัติจาก `modelId` (แนะนำ)
-  - [MODEL_BECF_1010A](#model_becf_1010a) — Tuck End Box ฝาเสียบด้านเดียว
-  - [MODEL_BECF_1030A](#model_becf_1030a) — Tuck End Box ฝาเสียบสองด้าน
-  - [MODEL_BECF_1040A](#model_becf_1040a) — Tuck End Box ฝาเสียบสองด้าน (แบบ B)
-  - [MODEL_BECF_11D01](#model_becf_11d01) — Standard Box กล่องมาตรฐาน
-  - [AUTO_LAYOUT](#auto_layout) — จัดวาง dieline บนแผ่นกระดาษอัตโนมัติ
-- [Types ทั้งหมด](#types-ทั้งหมด)
-  - [TuckEndBoxAttributes](#tuckendboxattributes) — ขนาดกล่อง Tuck End
-  - [StandardBoxAttributes](#standardboxattributes) — ขนาดกล่อง Standard
-  - [AutoLayoutConfig](#autolayoutconfig) — ตั้งค่า auto-layout
-  - [AutoLayoutResult](#autolayoutresult) — ผลลัพธ์การจัดวาง
-  - [AutoLayoutPaperResult](#autolayoutpaperresult) — ผลลัพธ์แต่ละกระดาษ
-- [configurePackaging](#configurepackaging) — ตั้งค่า theme กลาง
-- [Constants (ค่าคงที่)](#constants-คาคงที)
-- [Utilities (ฟังก์ชันช่วย)](#utilities-ฟังก์ชันช่วย)
-- [ตัวอย่างการใช้งาน](#ตัวอย่างการใช้งาน)
-- [โครงสร้างโปรเจกต์](#โครงสร้างโปรเจกต์)
----
-## Components
-### `DIE_LINE_LAYOUT`
-Wrapper component ที่เลือก model อัตโนมัติจาก `modelId` ไม่ต้อง switch case เอง — **แนะนำให้ใช้ตัวนี้แทน MODEL_* components โดยตรง**
-```tsx
-import { DIE_LINE_LAYOUT, modelList } from "@lucablockltd/ultimate-packaging";
-import type { DieLineLayoutRef } from "@lucablockltd/ultimate-packaging";
-const ref = useRef<DieLineLayoutRef>(null);
-<DIE_LINE_LAYOUT
-  ref={ref}
-  modelId="BECF-1010A"
-  attributes={{ length: 60, width: 25, height: 100, glueArea: 15, dustFlap: 15, tuckFlap: 15 }}
-  unit="mm"
-  mode="DIE_LINE"
-  isShowDimensions={true}
-/>
-```
-**Props:**
-| Prop | Type | Default | คำอธิบาย |
-|------|------|---------|----------|
-| `modelId` | `string` | *จำเป็น* | รหัส model เช่น `"BECF-1010A"`, `"BECF-1030A"`, `"BECF-11D01"` |
-| `attributes` | `Record<string, number>` | *จำเป็น* | ขนาดกล่อง (ใช้ `modelList` เพื่อดูค่า default แต่ละ model) |
-| `unit` | `"mm" \| "cm" \| "in"` | `"mm"` | หน่วยวัด |
-| `mode` | `ModelMode` | `"DIE_LINE"` | โหมดการแสดงผล |
-| `isShowDimensions` | `boolean` | `false` | แสดงเส้นบอกขนาด |
-**Ref methods (`DieLineLayoutRef`):**
-| Method | Return | คำอธิบาย |
-|--------|--------|----------|
-| `getAttributes()` | `Record<string, unknown>` | ดึงค่า attributes ปัจจุบัน |
-| `exportImage(options?)` | `Promise<Blob>` | Export เป็น PNG |
-| `exportDimension()` | `Promise<Blob>` | Export dimension เป็น PDF |
-**รองรับ model:** `BECF-1010A`, `BECF-1030A`, `BECF-1040A`, `BECF-11D01`
----
-### `MODEL_BECF_1010A`
-Component สำหรับแสดง dieline กล่อง Tuck End Box รุ่น BECF-1010A พร้อม canvas ที่ zoom/pan ได้
-```tsx
-import { MODEL_BECF_1010A } from "@lucablockltd/ultimate-packaging";
-import type { ModelBecf1010aRef, TuckEndBoxAttributes } from "@lucablockltd/ultimate-packaging";
-const ref = useRef<ModelBecf1010aRef>(null);
-<MODEL_BECF_1010A
-  ref={ref}
-  attributes={{
-    length: 60,       // ความยาวกล่อง (mm)
-    width: 25,        // ความกว้างกล่อง (mm)
-    height: 100,      // ความสูงกล่อง (mm)
-    closurePanel: 25, // แผ่นปิดฝา (mm)
-    glueArea: 15,     // พื้นที่ทากาว (mm)
-    dustFlap: 15,     // ปีกกันฝุ่น (mm)
-    tuckFlap: 15,     // ปีกเสียบ (mm)
-  }}
-  unit="mm"
-  mode="DIE_LINE"
-  isShowDimensions={true}
-/>
-```
-**Props:**
-| Prop | Type | Default | คำอธิบาย |
-|------|------|---------|----------|
-| `attributes` | `TuckEndBoxAttributes` | *จำเป็น* | ขนาดกล่องทั้ง 7 ค่า (ดู [TuckEndBoxAttributes](#tuckendboxattributes)) |
-| `unit` | `"mm" \| "cm" \| "in"` | `"mm"` | หน่วยวัดที่แสดงบนเส้นบอกขนาด |
-| `mode` | `ModelMode` | `"DIE_LINE"` | โหมดการแสดงผล (`"DIE_LINE"` = แสดงแบบแผ่น, `"AUTO_LAYOUT"` = SVG ตรงๆ ไม่มี canvas) |
-| `isShowDimensions` | `boolean` | `false` | แสดงเส้นบอกขนาดหรือไม่ |
-**Ref methods (`ModelBecf1010aRef`):**
-| Method | Return | คำอธิบาย |
-|--------|--------|----------|
-| `getAttributes()` | `GetAttributesResult` | ดึงข้อมูลขนาดกล่องทั้งหมด รวม `overallWidth` / `overallHeight` ของ dieline |
-| `exportImage(options)` | `Promise<Blob>` | Export เป็นรูปภาพ PNG (ส่ง `{ isShowDimension: boolean, originalSize: boolean }`) |
-| `exportDimension()` | `Promise<Blob>` | Export เส้นบอกขนาดเป็น PDF |
-| `resetView()` | `void` | รีเซ็ต zoom/pan กลับตำแหน่งเริ่มต้น |
-| `fitView()` | `void` | ปรับ zoom ให้ dieline พอดีหน้าจอ |
----
-### `MODEL_BECF_1030A`
-Component สำหรับแสดง dieline กล่อง Tuck End Box รุ่น BECF-1030A ใช้งานเหมือน `MODEL_BECF_1010A` ทุกประการ
-```tsx
-import { MODEL_BECF_1030A } from "@lucablockltd/ultimate-packaging";
-import type { ModelBecf1030aRef } from "@lucablockltd/ultimate-packaging";
-const ref = useRef<ModelBecf1030aRef>(null);
-<MODEL_BECF_1030A
-  ref={ref}
-  attributes={{
-    length: 105,
-    width: 50,
-    height: 155,
-    closurePanel: 50,
-    glueArea: 15,
-    dustFlap: 25,
-    tuckFlap: 14,
-  }}
-  unit="mm"
-  mode="DIE_LINE"
-  isShowDimensions={true}
-/>
-```
-Props และ Ref methods เหมือน [MODEL_BECF_1010A](#model_becf_1010a) ทุกประการ
----
-### `MODEL_BECF_1040A`
-Component สำหรับแสดง dieline กล่อง Tuck End Box รุ่น BECF-1040A ใช้งานเหมือน `MODEL_BECF_1010A` ทุกประการ
-```tsx
-import { MODEL_BECF_1040A } from "@lucablockltd/ultimate-packaging";
-import type { ModelBecf1040aRef } from "@lucablockltd/ultimate-packaging";
-const ref = useRef<ModelBecf1040aRef>(null);
-<MODEL_BECF_1040A
-  ref={ref}
-  attributes={{
-    length: 56,
-    width: 56,
-    height: 150,
-    closurePanel: 56,
-    glueArea: 15,
-    dustFlap: 30,
-    tuckFlap: 14,
-  }}
-  unit="mm"
-  mode="DIE_LINE"
-  isShowDimensions={true}
-/>
-```
-Props และ Ref methods เหมือน [MODEL_BECF_1010A](#model_becf_1010a) ทุกประการ
----
-### `MODEL_BECF_11D01`
-Component สำหรับแสดง dieline กล่อง Standard Box รุ่น BECF-11D01 (กล่องมาตรฐาน 4 ฝา)
-```tsx
-import { MODEL_BECF_11D01 } from "@lucablockltd/ultimate-packaging";
-import type { ModelBecf11d01Ref, StandardBoxAttributes } from "@lucablockltd/ultimate-packaging";
-const ref = useRef<ModelBecf11d01Ref>(null);
-<MODEL_BECF_11D01
-  ref={ref}
-  attributes={{
-    length: 100,    // ความยาวกล่อง (mm)
-    width: 50,      // ความกว้างกล่อง (mm)
-    height: 150,    // ความสูงกล่อง (mm)
-    flapHeight: 50, // ความสูงฝากล่อง (mm)
-    glueArea: 13,   // พื้นที่ทากาว (mm)
-  }}
-  unit="mm"
-  mode="DIE_LINE"
-  isShowDimensions={true}
-/>
-```
-**Props:**
-| Prop | Type | Default | คำอธิบาย |
-|------|------|---------|----------|
-| `attributes` | `StandardBoxAttributes` | *จำเป็น* | ขนาดกล่องทั้ง 5 ค่า (ดู [StandardBoxAttributes](#standardboxattributes)) |
-| `unit` | `"mm" \| "cm" \| "in"` | `"mm"` | หน่วยวัดที่แสดงบนเส้นบอกขนาด |
-| `mode` | `ModelMode` | `"DIE_LINE"` | โหมดการแสดงผล |
-| `isShowDimensions` | `boolean` | `false` | แสดงเส้นบอกขนาดหรือไม่ |
-**Ref methods (`ModelBecf11d01Ref`):**
-| Method | Return | คำอธิบาย |
-|--------|--------|----------|
-| `getAttributes()` | `GetAttributesResult` | ดึงข้อมูลขนาดกล่องทั้งหมด |
-| `exportImage(options)` | `Promise<Blob>` | Export เป็นรูปภาพ PNG |
-| `exportDimension()` | `Promise<Blob>` | Export เส้นบอกขนาดเป็น PDF |
-| `resetView()` | `void` | รีเซ็ต zoom/pan กลับตำแหน่งเริ่มต้น |
-| `fitView()` | `void` | ปรับ zoom ให้ dieline พอดีหน้าจอ |
----
-### `AUTO_LAYOUT`
-Component สำหรับจัดวาง dieline บนแผ่นกระดาษอัตโนมัติ รองรับหลายขนาดกระดาษ หลาย model คำนวณการจัดวางที่ประหยัดกระดาษที่สุด พร้อม export เป็น PNG หรือ PDF
-```tsx
-import { AUTO_LAYOUT } from "@lucablockltd/ultimate-packaging";
-import type { AutoLayoutRef, AutoLayoutConfig } from "@lucablockltd/ultimate-packaging";
-const layoutRef = useRef<AutoLayoutRef>(null);
-const [config, setConfig] = useState<AutoLayoutConfig | null>(null);
-const [result, setResult] = useState<AutoLayoutResult | null>(null);
-<AUTO_LAYOUT
-  ref={layoutRef}
-  config={config}
-  onResult={setResult}
-/>
-```
-**Props:**
-| Prop | Type | Default | คำอธิบาย |
-|------|------|---------|----------|
-| `config` | `AutoLayoutConfig \| null` | *จำเป็น* | การตั้งค่าทั้งหมด (กระดาษ, model, จำนวน, spacing ฯลฯ) — เมื่อเปลี่ยนค่า component จะคำนวณใหม่อัตโนมัติ |
-| `onResult` | `(result: AutoLayoutResult \| null) => void` | - | callback ที่ถูกเรียกเมื่อคำนวณเสร็จ ส่ง result กลับให้ parent |
-| `onModifiedPapers` | `(papers: AutoLayoutPaperResult[]) => void` | - | callback ที่ถูกเรียกเมื่อ user submit layout ที่แก้ไขด้วยมือ ส่ง modified papers กลับให้ parent |
-**Ref methods (`AutoLayoutRef`):**
-| Method | Return | คำอธิบาย |
-|--------|--------|----------|
-| `getResult()` | `AutoLayoutResult \| null` | ดึงผลลัพธ์การคำนวณล่าสุด |
-| `exportImage(paperIndex)` | `Promise<Blob>` | Export กระดาษตาม index เป็น PNG (ได้ Blob กลับมา ส่งไป API ได้) |
-| `exportPdf(paperIndex)` | `Promise<Blob>` | Export กระดาษตาม index เป็น PDF (ได้ Blob กลับมา ส่งไป API ได้) |
-**Modify Layout (จัดวางด้วยมือ):**
-- ลาก-วาง dieline ไปตำแหน่งที่ต้องการ
-- หมุน 0° / 90° / 270°
-- เพิ่ม/ลบชิ้นงาน
-- ตรวจจับการชนแบบ real-time — ชิ้นที่ชนแสดงสีแดง
-- กด Submit → สร้างหน้ากระดาษใหม่ `modify-[ชื่อกระดาษ]`
----
-## Types ทั้งหมด
-### `TuckEndBoxAttributes`
-ขนาดกล่อง Tuck End Box ทุก model (BECF-1010A, BECF-1030A, BECF-1040A) ใช้ type เดียวกัน หน่วยเป็น mm
-```tsx
-import type { TuckEndBoxAttributes } from "@lucablockltd/ultimate-packaging";
-```
-| ตัวแปร | Type | คำอธิบาย |
-|--------|------|----------|
-| `length` | `number` | ความยาวกล่อง (ด้านยาวของฐานกล่อง) |
-| `width` | `number` | ความกว้างกล่อง (ด้านสั้นของฐานกล่อง) |
-| `height` | `number` | ความสูงกล่อง (จากฐานถึงฝา) |
-| `closurePanel` | `number` | ความยาวแผ่นปิดฝา (ส่วนที่พับลงมาปิดฝากล่อง) |
-| `glueArea` | `number` | ความกว้างพื้นที่ทากาว (ขอบสำหรับติดกาว) |
-| `dustFlap` | `number` | ความยาวปีกกันฝุ่น (ปีกข้างที่พับเข้าด้านใน) |
-| `tuckFlap` | `number` | ความยาวปีกเสียบ (ปีกที่เสียบเข้าไปในกล่องเพื่อล็อคฝา) |
----
-### `StandardBoxAttributes`
-ขนาดกล่อง Standard Box (BECF-11D01) หน่วยเป็น mm
-```tsx
-import type { StandardBoxAttributes } from "@lucablockltd/ultimate-packaging";
-```
-| ตัวแปร | Type | คำอธิบาย |
-|--------|------|----------|
-| `length` | `number` | ความยาวกล่อง |
-| `width` | `number` | ความกว้างกล่อง |
-| `height` | `number` | ความสูงกล่อง |
-| `flapHeight` | `number` | ความสูงฝากล่อง |
-| `glueArea` | `number` | ความกว้างพื้นที่ทากาว |
----
-### `AutoLayoutConfig`
-การตั้งค่าทั้งหมดสำหรับ `AUTO_LAYOUT` component
-```tsx
-import type { AutoLayoutConfig } from "@lucablockltd/ultimate-packaging";
-```
-| ตัวแปร | Type | คำอธิบาย |
-|--------|------|----------|
-| `papers` | `AutoLayoutPaper[]` | รายการกระดาษที่ต้องการเปรียบเทียบ (ส่งได้หลายขนาด) |
-| `model` | `AutoLayoutModel` | model กล่องที่จะจัดวาง (ระบุ modelId + attributes) |
-| `quantity` | `number` | จำนวนกล่องที่ต้องการผลิต |
-| `layoutDistance` | `number` | ระยะห่างระหว่าง dieline แต่ละชิ้น (mm) |
-| `spacing` | `number` | ระยะห่างขอบกระดาษซ้าย-ขวา (mm) |
-| `griper` | `number` | ความกว้าง gripper — พื้นที่ที่แท่นพิมพ์จับกระดาษ (mm) |
-| `colorbarHeight` | `number` | ความสูง colorbar — แถบสีสำหรับตรวจสอบคุณภาพการพิมพ์ (mm) |
-| `isShowColorbar` | `boolean` | แสดง colorbar หรือไม่ |
----
-### `AutoLayoutPaper`
-ข้อมูลกระดาษแต่ละแผ่นที่ส่งเข้า config
-```tsx
-import type { AutoLayoutPaper } from "@lucablockltd/ultimate-packaging";
-```
-| ตัวแปร | Type | คำอธิบาย |
-|--------|------|----------|
-| `paperId` | `string` | ID ของกระดาษ (ใช้สำหรับ key ต้องไม่ซ้ำ) |
-| `paperName` | `string` | ชื่อกระดาษ เช่น `"A3"`, `"A4"` |
-| `paperWidth` | `number` | ความกว้างกระดาษ (mm) |
-| `paperHeight` | `number` | ความสูงกระดาษ (mm) |
----
-### `AutoLayoutModel`
-ระบุ model กล่องที่จะจัดวาง
-```tsx
-import type { AutoLayoutModel } from "@lucablockltd/ultimate-packaging";
-```
-| ตัวแปร | Type | คำอธิบาย |
-|--------|------|----------|
-| `modelId` | `string` | ID ของ model เช่น `"BECF-1010A"`, `"BECF-11D01"` |
-| `attributes` | `Record<string, number>` | ขนาดกล่อง |
----
-### `AutoLayoutResult`
-ผลลัพธ์รวมจากการคำนวณ auto-layout
-```tsx
-import type { AutoLayoutResult } from "@lucablockltd/ultimate-packaging";
-```
-| ตัวแปร | Type | คำอธิบาย |
-|--------|------|----------|
-| `papers` | `AutoLayoutPaperResult[]` | ผลลัพธ์แต่ละกระดาษ (เรียงจากประหยัดที่สุดไปน้อยสุด) |
-| `totalProduced` | `number` | จำนวนกล่องที่ผลิตได้ทั้งหมด |
-| `totalSheets` | `number` | จำนวนแผ่นกระดาษที่ต้องใช้ทั้งหมด |
-| `remainingNeeded` | `number` | จำนวนกล่องที่ยังขาดอยู่ |
-| `recommendedPaperId` | `string \| null` | paperId ของกระดาษที่แนะนำ (ประหยัดที่สุด) |
----
-### `AutoLayoutPaperResult`
-ผลลัพธ์การจัดวางบนกระดาษแต่ละแผ่น
-```tsx
-import type { AutoLayoutPaperResult } from "@lucablockltd/ultimate-packaging";
-```
-| ตัวแปร | Type | คำอธิบาย |
-|--------|------|----------|
-| `paperId` | `string` | ID ของกระดาษ |
-| `paperName` | `string` | ชื่อกระดาษ |
-| `paperWidth` | `number` | ความกว้างกระดาษ (mm) |
-| `paperHeight` | `number` | ความสูงกระดาษ (mm) |
-| `perSheet` | `number` | จำนวนกล่องที่วางได้ต่อแผ่น |
-| `totalSheets` | `number` | จำนวนแผ่นที่ต้องใช้ |
-| `totalProduced` | `number` | จำนวนกล่องที่ผลิตได้ทั้งหมด |
-| `excessCount` | `number` | จำนวนกล่องที่เกิน (ผลิตเกินจากที่สั่ง) |
-| `wastePercent` | `number` | เปอร์เซ็นต์เศษกระดาษเหลือทิ้ง |
-| `independentSheets` | `number` | จำนวนแผ่นที่ต้องใช้ (คำนวณแยกเฉพาะกระดาษขนาดนี้) |
-| `independentTotalArea` | `number` | พื้นที่กระดาษทั้งหมดที่ใช้ (mm²) |
-| `placements` | `AutoLayoutPlacement[]` | ตำแหน่งวาง dieline แต่ละชิ้นบนกระดาษ |
-| `gripperSide` | `GripperSide` | ด้านที่ gripper จับ |
----
-### `AutoLayoutPlacement`
-ตำแหน่งวาง dieline ชิ้นหนึ่งบนกระดาษ
-```tsx
-import type { AutoLayoutPlacement } from "@lucablockltd/ultimate-packaging";
-```
-| ตัวแปร | Type | คำอธิบาย |
-|--------|------|----------|
-| `x` | `number` | ตำแหน่ง x บนกระดาษ (mm) |
-| `y` | `number` | ตำแหน่ง y บนกระดาษ (mm) |
-| `rotation` | `number` | องศาหมุน (0, 90, 180, 270) |
----
-### `GetAttributesResult`
-ผลลัพธ์จาก `ref.getAttributes()` ของ MODEL component
-```tsx
-import type { GetAttributesResult } from "@lucablockltd/ultimate-packaging";
-```
-| ตัวแปร | Type | คำอธิบาย |
-|--------|------|----------|
-| `modelId` | `string` | ID ของ model |
-| `overallWidth` | `number` | ความกว้างรวมของ dieline ทั้งแผ่น (mm) |
-| `overallHeight` | `number` | ความสูงรวมของ dieline ทั้งแผ่น (mm) |
-| `...attributes` | `number` | ค่า attributes ทั้งหมดของ model นั้นๆ |
----
-### `ExportImageOptions`
-ตัวเลือกสำหรับ export รูปภาพจาก MODEL component
-```tsx
-import type { ExportImageOptions } from "@lucablockltd/ultimate-packaging";
-```
-| ตัวแปร | Type | คำอธิบาย |
-|--------|------|----------|
-| `isShowDimension` | `boolean` | แสดงเส้นบอกขนาดในรูปที่ export หรือไม่ |
-| `originalSize` | `boolean` | export ขนาดจริง (true) หรือขนาดตามหน้าจอ (false) |
----
-### `ModelThemeConfig`
-ปรับแต่งสี dieline สำหรับ MODEL component
-```tsx
-import type { ModelThemeConfig } from "@lucablockltd/ultimate-packaging";
-```
-| ตัวแปร | Type | ค่าเริ่มต้น | คำอธิบาย |
-|--------|------|-------------|----------|
-| `colorBackground` | `string` | `"#FAFAFA"` | สีพื้นหลัง canvas |
-| `colorDieLine` | `string` | `"#FF0000"` | สีเส้นตัด (cut line) |
-| `colorFoldLine` | `string` | `"#00FF00"` | สีเส้นพับ (crease line) |
----
-### `AutoLayoutThemeConfig`
-ปรับแต่งสีสำหรับ AUTO_LAYOUT component
-```tsx
-import type { AutoLayoutThemeConfig } from "@lucablockltd/ultimate-packaging";
-```
-| ตัวแปร | Type | ค่าเริ่มต้น | คำอธิบาย |
-|--------|------|-------------|----------|
-| `colorBackground` | `string` | `"#F5F5F5"` | สีพื้นหลัง canvas |
-| `colorPaperFill` | `string` | `"#FFFFFF"` | สีพื้นกระดาษ |
-| `colorPaperStroke` | `string` | `"#999999"` | สีขอบกระดาษ |
-| `colorGriper` | `string` | `"#228B22"` | สีพื้นที่ gripper |
-| `colorSpacing` | `string` | `"#f54278"` | สีพื้นที่ spacing ซ้าย-ขวา |
-| `colorDistanceLine` | `string` | `"#0088FF"` | สีเส้นระยะห่างระหว่าง dieline |
-| `colorDieLine` | `string` | `"#FF0000"` | สีเส้นตัด |
-| `colorFoldLine` | `string` | `"#00FF00"` | สีเส้นพับ |
-| `colorLabel` | `string` | `"#333333"` | สีข้อความ label |
----
-### `ModelMode`
-โหมดการแสดงผลของ MODEL component
-| ค่า | คำอธิบาย |
-|-----|----------|
-| `"DIE_LINE"` | แสดง dieline แบบมี canvas (zoom/pan ได้) |
-| `"3D"` | แสดงแบบ 3 มิติ (ยังไม่พร้อมใช้งาน) |
-| `"AUTO_LAYOUT"` | แสดง dieline แบบ SVG ตรงๆ ไม่มี canvas |
----
-### `GripperSide`
-ด้านที่ gripper จับกระดาษ
-| ค่า | คำอธิบาย |
-|-----|----------|
-| `"top"` | ด้านบน |
-| `"bottom"` | ด้านล่าง |
-| `"left"` | ด้านซ้าย |
-| `"right"` | ด้านขวา |
----
-### `PackagingModel`
-ข้อมูล model กล่องจาก `modelList`
-| ตัวแปร | Type | คำอธิบาย |
-|--------|------|----------|
-| `id` | `string` | ID ของ model เช่น `"BECF-1010A"` |
-| `name` | `string` | ชื่อ model เช่น `"Tuck End Box BECF-1010A"` |
-| `dimension` | `ModelMode[]` | โหมดที่ model รองรับ |
-| `attributes` | `Record<string, number>` | ค่าเริ่มต้นของขนาดกล่อง |
----
-## `configurePackaging`
-ตั้งค่า theme กลางที่เดียว ทุก component จะใช้ค่าจากที่นี่โดยอัตโนมัติ
-```tsx
-import { configurePackaging } from "@lucablockltd/ultimate-packaging";
-configurePackaging({
-  modelTheme: {
-    colorBackground: "#FFFFFF",
-    colorDieLine: "#0000FF",
-    colorFoldLine: "#00AA00",
-  },
-  autoLayoutTheme: {
-    colorBackground: "#EEEEEE",
-    colorPaperFill: "#FFFFFF",
-    colorGriper: "#336633",
-  },
-});
-```
-- เรียกครั้งเดียวตอน app เริ่มต้น (เช่นใน `App.tsx` หรือ `layout.tsx`)
-- ใส่แค่บาง property ก็ได้ — property ที่ไม่ใส่จะใช้ค่าเริ่มต้น
-- ไม่เรียก `configurePackaging()` เลยก็ได้ — ทุกอย่างใช้ค่าเริ่มต้น
-- รองรับ Next.js (ไม่ใช้ DOM/browser API)
----
-## Constants (ค่าคงที่)
-### `modelList`
-รายการ model ทั้งหมดที่ library รองรับ
-```tsx
-import { modelList } from "@lucablockltd/ultimate-packaging";
-// [
-//   { id: "BECF-1010A", name: "Tuck End Box BECF-1010A", ... },
-//   { id: "BECF-1030A", name: "Tuck End Box BECF-1030A", ... },
-//   { id: "BECF-1040A", name: "Tuck End Box BECF-1040A", ... },
-//   { id: "BECF-11D01", name: "Standard Box BECF-11D01", ... },
-// ]
-```
-### `BECF_1010A_DEFAULT_ATTRIBUTES`
-```tsx
-import { BECF_1010A_DEFAULT_ATTRIBUTES } from "@lucablockltd/ultimate-packaging";
-// { length: 60, width: 25, height: 100, closurePanel: 25, glueArea: 15, dustFlap: 15, tuckFlap: 15 }
-```
-### `BECF_1030A_DEFAULT_ATTRIBUTES`
-```tsx
-import { BECF_1030A_DEFAULT_ATTRIBUTES } from "@lucablockltd/ultimate-packaging";
-// { length: 105, width: 50, height: 155, closurePanel: 50, glueArea: 15, dustFlap: 25, tuckFlap: 14 }
-```
-### `BECF_1040A_DEFAULT_ATTRIBUTES`
-```tsx
-import { BECF_1040A_DEFAULT_ATTRIBUTES } from "@lucablockltd/ultimate-packaging";
-// { length: 56, width: 56, height: 150, closurePanel: 56, glueArea: 15, dustFlap: 30, tuckFlap: 14 }
-```
-### `BECF_11D01_DEFAULT_ATTRIBUTES`
-```tsx
-import { BECF_11D01_DEFAULT_ATTRIBUTES } from "@lucablockltd/ultimate-packaging";
-// { length: 100, width: 50, height: 150, flapHeight: 50, glueArea: 13 }
-```
-### `MODEL_THEME_CONFIG`
-```tsx
-import { MODEL_THEME_CONFIG } from "@lucablockltd/ultimate-packaging";
-// { colorBackground: "#FAFAFA", colorDieLine: "#FF0000", colorFoldLine: "#00FF00" }
-```
-### `AUTO_LAYOUT_THEME_CONFIG`
-```tsx
-import { AUTO_LAYOUT_THEME_CONFIG } from "@lucablockltd/ultimate-packaging";
-// { colorBackground: "#F5F5F5", colorPaperFill: "#FFFFFF", colorPaperStroke: "#999999", ... }
-```
----
-## Utilities (ฟังก์ชันช่วย)
-### `calculateAutoLayout`
-คำนวณการจัดวาง dieline บนกระดาษ — เป็น pure function เรียกใช้ได้โดยไม่ต้องมี component
-```tsx
-import { calculateAutoLayout } from "@lucablockltd/ultimate-packaging";
-import type { AutoLayoutConfig, AutoLayoutResult } from "@lucablockltd/ultimate-packaging";
-const config: AutoLayoutConfig = {
-  papers: [
-    { paperId: "1", paperName: "A3", paperWidth: 420, paperHeight: 297 },
-  ],
-  model: {
-    modelId: "BECF-1010A",
-    attributes: { length: 60, width: 25, height: 100, closurePanel: 25, glueArea: 15, dustFlap: 15, tuckFlap: 15 },
-  },
-  quantity: 100,
-  layoutDistance: 3,
-  spacing: 5,
-  griper: 10,
-  colorbarHeight: 5,
-  isShowColorbar: false,
-};
-const result: AutoLayoutResult = calculateAutoLayout(config);
-console.log(result.papers[0].perSheet);        // จำนวนต่อแผ่น
-console.log(result.papers[0].independentSheets); // จำนวนแผ่นที่ต้องใช้
-console.log(result.papers[0].wastePercent);      // เปอร์เซ็นต์เศษเหลือ
-```
----
-## ตัวอย่างการใช้งาน
-### ตัวอย่าง 1: แสดง Dieline อย่างเดียว
-```tsx
-import { useRef, useState } from "react";
-import { MODEL_BECF_1010A, BECF_1010A_DEFAULT_ATTRIBUTES } from "@lucablockltd/ultimate-packaging";
-import type { ModelBecf1010aRef, TuckEndBoxAttributes } from "@lucablockltd/ultimate-packaging";
-function DielinePage() {
-  const modelRef = useRef<ModelBecf1010aRef>(null);
-  const [attributes, setAttributes] = useState<TuckEndBoxAttributes>({
-    ...BECF_1010A_DEFAULT_ATTRIBUTES,
-  });
-  const handleExport = async () => {
-    if (!modelRef.current) return;
-    const blob = await modelRef.current.exportImage({
-      isShowDimension: true,
-      originalSize: true,
-    });
-    const url = URL.createObjectURL(blob);
-    window.open(url);
-  };
-  return (
-    <div>
-      <MODEL_BECF_1010A
-        ref={modelRef}
-        attributes={attributes}
-        unit="mm"
-        mode="DIE_LINE"
-        isShowDimensions={true}
-      />
-      <button onClick={handleExport}>Export รูป</button>
-      <button onClick={() => modelRef.current?.fitView()}>Fit View</button>
-    </div>
-  );
-}
-```
-### ตัวอย่าง 2: Standard Box
-```tsx
-import { useRef } from "react";
-import { MODEL_BECF_11D01, BECF_11D01_DEFAULT_ATTRIBUTES } from "@lucablockltd/ultimate-packaging";
-import type { ModelBecf11d01Ref } from "@lucablockltd/ultimate-packaging";
-function StandardBoxPage() {
-  const modelRef = useRef<ModelBecf11d01Ref>(null);
-  return (
-    <MODEL_BECF_11D01
-      ref={modelRef}
-      attributes={{ ...BECF_11D01_DEFAULT_ATTRIBUTES }}
-      unit="mm"
-      mode="DIE_LINE"
-      isShowDimensions={true}
-    />
-  );
-}
-```
-### ตัวอย่าง 3: Auto Layout จัดวางบนกระดาษ
-```tsx
-import { useRef, useState } from "react";
-import { AUTO_LAYOUT, BECF_1010A_DEFAULT_ATTRIBUTES } from "@lucablockltd/ultimate-packaging";
-import type { AutoLayoutRef, AutoLayoutConfig, AutoLayoutResult, AutoLayoutPaperResult } from "@lucablockltd/ultimate-packaging";
-function AutoLayoutPage() {
-  const layoutRef = useRef<AutoLayoutRef>(null);
-  const [config, setConfig] = useState<AutoLayoutConfig | null>(null);
-  const [result, setResult] = useState<AutoLayoutResult | null>(null);
-  const [modifiedPapers, setModifiedPapers] = useState<AutoLayoutPaperResult[]>([]);
-  const handleCalculate = () => {
-    setConfig({
-      papers: [
-        { paperId: "a3", paperName: "A3", paperWidth: 420, paperHeight: 297 },
-        { paperId: "a4", paperName: "A4", paperWidth: 210, paperHeight: 297 },
-      ],
-      model: {
-        modelId: "BECF-1010A",
-        attributes: { ...BECF_1010A_DEFAULT_ATTRIBUTES },
-      },
-      quantity: 100,
-      layoutDistance: 3,
-      spacing: 5,
-      griper: 10,
-      colorbarHeight: 5,
-      isShowColorbar: false,
-    });
-  };
-  return (
-    <div>
-      <button onClick={handleCalculate}>คำนวณ</button>
-      {result && result.papers.map((paper) => (
-        <div key={paper.paperId}>
-          <strong>{paper.paperName}</strong>
-          <span>{paper.perSheet} ชิ้น/แผ่น · {paper.independentSheets} แผ่น · เศษ {paper.wastePercent}%</span>
-        </div>
-      ))}
-      <AUTO_LAYOUT
-        ref={layoutRef}
-        config={config}
-        onResult={setResult}
-        onModifiedPapers={setModifiedPapers}
-      />
-    </div>
-  );
-}
-```
----
-## โครงสร้างโปรเจกต์
-```
-ultimate-packaging/
-├── src/                        # Source code (library)
-│   ├── components/             # React components
-│   │   ├── dieline/            # Dieline rendering (pure SVG generation + React)
-│   │   │   ├── tuck-end-boxes/ # BECF-1010A, 1030A, 1040A
-│   │   │   └── standard-boxes/ # BECF-11D01
-│   │   ├── model/              # Model wrappers (mode switching)
-│   │   ├── auto-layout/        # Auto-layout per model
-│   │   └── shared/             # Shared components (auto-layout engine, colorbar, gripper)
-│   ├── statics/                # Default attributes, model list, theme configs
-│   ├── types/                  # TypeScript type definitions
-│   ├── utils/                  # Utility functions (calculateAutoLayout, exportDimension)
-│   └── index.ts                # Main export
-├── demo/                       # Demo app (Vite + React) — ไม่รวมใน lib
-├── references/                 # Reference files (SVG/PDF/DXF templates, inspector images) — ไม่รวมใน lib
-├── tools/                      # Standalone tools
-│   └── playwright-inspector/   # Playwright-based dieline inspector (แยก dependencies)
-├── dist/                       # Built output (auto-generated)
-├── package.json
-├── tsconfig.json
-└── tsup.config.ts
-```
----
-## Model ที่รองรับ
-| Model ID | ชื่อ | ประเภท | คำอธิบาย |
-|----------|------|--------|----------|
-| `BECF-1010A` | Tuck End Box BECF-1010A | Tuck End | กล่อง tuck end box มาตรฐาน ฝาเสียบด้านเดียว |
-| `BECF-1030A` | Tuck End Box BECF-1030A | Tuck End | กล่อง tuck end box ฝาเสียบทั้งสองด้าน |
-| `BECF-1040A` | Tuck End Box BECF-1040A | Tuck End | กล่อง tuck end box ฝาเสียบทั้งสองด้าน (แบบ B) |
-| `BECF-11D01` | Standard Box BECF-11D01 | Standard | กล่องมาตรฐาน 4 ฝา |
----
-## สำหรับนักพัฒนา (Developer Guide)
-### Prerequisites
-- Node.js >= 18
-- npm >= 9
-### เริ่มต้นพัฒนา
-```bash
-# 1. Clone repo
-git clone https://github.com/Omadar/ULTIMATE-PACKAGING.git
-cd ULTIMATE-PACKAGING
-# 2. ติดตั้ง dependencies
-npm install
-# 3. Build library
-npm run build
-# 4. รัน demo app (Vite + React)
-cd demo && npm install && cd ..
-npm run demo
-```
-Demo app จะเปิดที่ `http://localhost:5173` — import ตรงจาก `src/` ผ่าน Vite alias ไม่ต้อง build ใหม่ทุกครั้ง
-### Scripts ที่มี
-| Script | คำอธิบาย |
-|--------|----------|
-| `npm run build` | Build library ด้วย tsup → output ไปที่ `dist/` |
-| `npm run dev` | Build แบบ watch mode (rebuild อัตโนมัติเมื่อแก้ไฟล์) |
-| `npm run demo` | รัน demo app (Vite dev server) |
-| `npm run typecheck` | ตรวจสอบ TypeScript ไม่ build |
-| `npm run lint` | ตรวจสอบ code style ด้วย ESLint |
-| `npm run clean` | ลบ `dist/` folder |
-### Architecture Pattern
-ทุก model กล่องใช้โครงสร้างเดียวกัน แบ่งเป็น 4 layers:
-```
-src/
-├── components/dieline/<box-type>/<model-id>/
-│   ├── generate.ts       ← Pure TypeScript (ไม่มี React)
-│   │                       คำนวณ SVG path, contour, dimensions ทั้งหมด
-│   └── index.tsx          ← React component
-│                            Render SVG, จัดการ ref methods, theme
-├── components/model/<box-type>/<model-id>/
-│   └── index.tsx          ← Model wrapper (thin layer)
-│                            สลับ mode: DIE_LINE / 3D / AUTO_LAYOUT
-└── statics/<box-type>/<model-id>/
-    └── DEFAULT_ATTRIBUTES.ts  ← ค่าเริ่มต้นของขนาดกล่อง
-```
-**หลักการสำคัญ:**
-- `generate.ts` = Pure function ไม่พึ่ง React → ทดสอบง่าย, reuse ได้ใน auto-layout
-- `index.tsx` (dieline) = React component ที่ render SVG + จัดการ ref methods (`getAttributes`, `exportImage`, `exportDimension`)
-- `index.tsx` (model) = Thin wrapper ทำหน้าที่สลับ mode เท่านั้น
-- เส้นตัด (cut) = สีแดง `#FF0000`, เส้นทึบ
-- เส้นพับ (crease) = สีเขียว `#00FF00`, เส้นประ
-- เส้นบอกขนาด (dimension) = สีดำ, พร้อมข้อความ
-### วิธีเพิ่ม Model ใหม่
-#### ใช้ Claude Code Skills (แนะนำ)
-โปรเจกต์นี้มี Claude Code Skills สำหรับสร้าง model ใหม่โดยอัตโนมัติ:
-| Skill | คำอธิบาย |
-|-------|----------|
-| `/create-tuck-end-box-packaging` | สร้างกล่อง Tuck End Box ใหม่ — ระบุ model ID และ dimensions |
-| `/create-standard-box-packaging` | สร้างกล่อง Standard Box ใหม่ |
-| `/create-auto-layout` | เพิ่ม auto-layout สำหรับ model ที่มีอยู่ |
-| `/inspect-packaging` | ตรวจสอบ packaging ที่มีอยู่ — route ไปสกิลที่ถูกต้อง |
-| `/playwright-inspector-boxes` | Inspect dieline จาก URL ด้วย Playwright แล้วสร้างสกิลใหม่อัตโนมัติ |
-**ตัวอย่าง:** พิมพ์ `/create-tuck-end-box-packaging` ใน Claude Code แล้วระบุ model ID กับค่า default → สร้างไฟล์ทั้งหมดให้อัตโนมัติ
-#### เพิ่มเอง (Manual)
-1. **สร้างไฟล์ตาม pattern:**
-   ```
-   src/components/dieline/<box-type>/<model-id>/generate.ts
-   src/components/dieline/<box-type>/<model-id>/index.tsx
-   src/components/model/<box-type>/<model-id>/index.tsx
-   src/statics/<box-type>/<model-id>/DEFAULT_ATTRIBUTES.ts
-   ```
-2. **Export จาก `src/components/index.ts`:**
-   ```tsx
-   export { MODEL_<MODEL_ID> } from "./model/<box-type>/<model-id>";
-   export type { Model<ModelId>Ref, Model<ModelId>Props } from "./model/<box-type>/<model-id>";
-   ```
-3. **Export default attributes จาก `src/index.ts`:**
-   ```tsx
-   export { <MODEL_ID>_DEFAULT_ATTRIBUTES } from "./statics/<box-type>/<model-id>/DEFAULT_ATTRIBUTES";
-   ```
-4. **เพิ่มใน `src/statics/modelList.ts`:**
-   ```tsx
-   {
-     id: "<MODEL-ID>",
-     name: "<Box Type> <MODEL-ID>",
-     dimension: ["DIE_LINE"],
-     attributes: { ...<MODEL_ID>_DEFAULT_ATTRIBUTES },
-   }
-   ```
-5. **(ถ้าต้องการ auto-layout)** สร้างไฟล์ใน `src/components/auto-layout/<box-type>/<model-id>/` แล้ว export เพิ่ม
-### Playwright Inspector (เครื่องมือ inspect dieline)
-ใช้ Playwright เปิดเว็บที่มี dieline แล้วดึงข้อมูล SVG มาวิเคราะห์ — แยก dependencies ออกจาก lib
-```bash
-# ติดตั้ง (ครั้งแรกเท่านั้น)
-cd tools/playwright-inspector
-npm install
-# ใช้งานผ่าน Claude Code skill
-# พิมพ์ /playwright-inspector-boxes แล้วระบุ URL
-```
-**Output:** ไฟล์ทั้งหมดจะอยู่ใน `tools/playwright-inspector/output/` — screenshots, JSON data, scripts
-### การ Build และ Publish
-Library build ด้วย [tsup](https://tsup.egoist.dev/) — output ทั้ง CommonJS (`.cjs`) และ ESM (`.mjs`) พร้อม TypeScript declarations
-```bash
-npm run build
-```
-**Output ใน `dist/`:**
-| ไฟล์ | Format | คำอธิบาย |
-|------|--------|----------|
-| `index.cjs` | CommonJS | สำหรับ `require()` |
-| `index.mjs` | ESM | สำหรับ `import` |
-| `index.d.ts` | Types (CJS) | TypeScript definitions |
-| `index.d.mts` | Types (ESM) | TypeScript definitions |
-| `*.map` | Source maps | สำหรับ debugging |
-**External dependencies** (ไม่ bundle เข้า lib):
-- `react`, `react-dom` — peer dependency
-- `jspdf` — runtime dependency
-### ติดตั้ง lib จาก GitHub
-ผู้ใช้ lib ติดตั้งด้วย:
-```bash
-npm install @lucablockltd/ultimate-packaging
-```
-`prepare` script จะรัน `tsup` อัตโนมัติหลัง install เพื่อ build `dist/`
-> **หมายเหตุ:** ฝั่งผู้ใช้ต้องมี devDependencies ของ tsup ในเครื่อง หรือ commit `dist/` ขึ้น git เพื่อให้ใช้ได้โดยไม่ต้อง build — ดูหัวข้อถัดไป
-### ทางเลือก: Commit dist/ ขึ้น git
-ถ้าไม่ต้องการให้ฝั่งผู้ใช้ build เอง สามารถ commit `dist/` ขึ้น git ได้:
-```bash
-# ลบ dist ออกจาก .gitignore (ถ้ามี)
-# แล้ว commit dist/
-git add dist/
-git commit -m "chore: include built dist for GitHub install"
-```
-จากนั้นลบ `prepare` script ออกจาก package.json เพื่อไม่ให้ build ซ้ำ
-### โฟลเดอร์ที่ไม่รวมใน lib
-| โฟลเดอร์ | คำอธิบาย |
-|-----------|----------|
-| `demo/` | Demo app สำหรับทดสอบ component ตอน dev |
-| `references/diecut-templates/` | ไฟล์ SVG/PDF/DXF ต้นแบบสำหรับอ้างอิง |
-| `references/inspector/` | รูปภาพ reference สำหรับ inspector |
-| `tools/playwright-inspector/` | Playwright tool แยก dependencies |
-| `.claude/skills/` | Claude Code skills สำหรับ automation |
----
-## License
-MIT
+Proprietary software. All rights reserved.