indas-ui 0.0.1 → 0.1.0

package/dist/cjs/lib/vision/dieline-extractor.js

@@ -0,0 +1,321 @@
+'use client';
+"use strict";
+/**
+ * Vision LLM dieline extractor — reads L/W/H + content type from a dieline image.
+ *
+ * Two-pass extraction grounded in real keyline geometry:
+ *   Pass 1 (triage): user image + composite reference grid of all known
+ *                    content-type keylines → model returns top-5 candidates
+ *                    + L/W/H read from the user's labels.
+ *   Pass 2 (refine): user image + only the top-5 individual thumbnails →
+ *                    model picks the single best match with confidence.
+ *
+ * The reference grid is built once client-side from real DB keyline data
+ * (see reference-grid.ts), cached in IndexedDB. Per-type rendered thumbnails
+ * come from that same grid build, so pass 2 reuses already-rendered images.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clearReferenceGridCache = void 0;
+exports.extractDielineSpecs = extractDielineSpecs;
+const client_1 = __importDefault(require("../api/core/client.js"));
+const reference_grid_1 = require("./reference-grid.js");
+/* ───────────────────── Prompts ───────────────────── */
+const TRIAGE_SYSTEM_PROMPT = `You are a packaging-carton expert helping extract specifications from a dieline (keyline) image.
+
+You will receive TWO images:
+  1. USER IMAGE — a dieline the user uploaded. It shows the flat unfolded carton with dimension labels in mm.
+  2. REFERENCE GRID — a labeled grid of all known carton TYPES, each drawn as a 2D keyline using identical reference dimensions. Treat this as ground truth for what each named type looks like.
+
+## Dimension extraction approach
+
+DO NOT try to figure out which label is L, W, or H based on the panel structure — visual judgment of which panel has a tuck flap vs dust ear is unreliable at small image scales.
+
+Instead, read the dimension labels and report:
+- The VERTICAL label (the one with a vertical double-headed arrow, measuring the central strip's height) → this is H.
+- The two HORIZONTAL labels → report them BOTH, in order from LEFT TO RIGHT as they appear in the image. Call them horizontalLeft and horizontalRight.
+
+The downstream pipeline will assign L vs W based on the matched content type's geometry. You only need to do accurate OCR of label values and their positions.
+
+## Your job (pass 1 — triage)
+1. Read every visible dimension label on the USER IMAGE.
+2. Identify the vertical label (vertical arrow on the central strip) → H.
+3. Identify the two horizontal labels → record their values AND their left/right order in the image.
+4. Compare the USER IMAGE's overall shape (flap layout, dust ears, glue tab position, lock features) against EVERY tile in the REFERENCE GRID.
+5. Return the FIVE most visually-similar reference types in ranked order.
+
+## Output
+Return STRICT JSON only, no prose, no markdown fences:
+{
+  "H": number | null,
+  "horizontalLeft": number | null,
+  "horizontalRight": number | null,
+  "candidates": [string, string, string, string, string],
+  "notes": "short note on label readings and why these candidates"
+}
+Every value in candidates MUST be an exact label visible in the REFERENCE GRID.
+horizontalLeft is the horizontal label nearest the LEFT side of the image (closer to the glue tab). horizontalRight is the one further right.`;
+const REFINE_SYSTEM_PROMPT = `You are picking the SINGLE best matching carton type for a dieline image.
+
+You will receive:
+  1. USER IMAGE — the dieline the user uploaded.
+  2. CANDIDATE THUMBNAILS — N labeled 2D keyline thumbnails of candidate types drawn with identical reference dimensions.
+
+## How to compare (work through each step IN ORDER, do not skip)
+
+Step 1 — TUCK FLAP DIRECTION (most discriminating feature)
+Look at the top and bottom of the central panel strip in the USER IMAGE. Find the small rectangular tuck flaps.
+  • REVERSE TUCK (ReverseTuckIn, ReverseTuckAndTongue): the TOP tuck flap is on the OPPOSITE SIDE of the panel strip from the BOTTOM tuck flap. They point in opposite directions (one extends up from the left half of the strip, the other extends down from the right half — or vice versa).
+  • STRAIGHT TUCK (StandardStraightTuckIn, StandardStraightTuckInNested, StandardStraightTuckInHang, etc.): the TOP and BOTTOM tuck flaps are on the SAME SIDE — both extend from the same panels (both above the front panel, or both above the back panel).
+  Eliminate any candidate whose tuck direction disagrees with the USER IMAGE.
+
+Step 2 — HANGING / SLOT FEATURES
+Check for hanging-tab cutouts (small rectangular or shaped slots) at the top of the dieline:
+  • If the USER IMAGE has a hanging tab/slot → prefer types with "Hang" in the name.
+  • If the USER IMAGE has NO hanging tab → eliminate candidates with "Hang" in the name.
+
+Step 3 — BOTTOM CONSTRUCTION
+  • Crash-lock cartons (CrashLockWithPasting, CrashLockWithoutPasting, CrashLockBottomTuckEndFoldingCarton): the bottom flaps are large interlocking trapezoidal shapes, not simple rectangles.
+  • Auto-bottom / web-locking: distinctive angled cuts.
+  • Plain tuck-in: simple rectangular bottom flap.
+
+Step 4 — GLUE TAB & SPECIAL FEATURES
+  • Glue/pasting tab (PF) is the narrow strip on the FAR LEFT of every flat layout. Its presence is universal — not discriminating.
+  • Pizza / Cake / Gadget / FourCorner / SixCorner box types have distinctive non-rectangular outer shapes — only pick these if the USER IMAGE has clearly unusual geometry.
+
+## After working through the steps
+Pick the SINGLE candidate that survives all eliminations. If two candidates tie, prefer the simpler one (e.g. ReverseTuckIn over a "Nested" or "Tongue" variant unless those features are clearly present).
+
+Return STRICT JSON only:
+{
+  "contentType": string,
+  "confidence": "high" | "medium" | "low",
+  "reason": "one short sentence citing the tuck direction + any other discriminating feature you used"
+}
+contentType MUST be one of the candidate labels exactly.`;
+function triageUserPrompt(types) {
+    return `The REFERENCE GRID contains these types (read the labels under each tile):
+${types.map(t => `- ${t}`).join('\n')}
+
+Extract L, W, H from the USER IMAGE labels, then return the 5 most visually-similar reference types.`;
+}
+function refineUserPrompt(candidates) {
+    return `Candidate types to choose from (in the thumbnails, in order):
+${candidates.map((t, i) => `${i + 1}. ${t}`).join('\n')}
+
+Pick the single best visual match for the USER IMAGE.`;
+}
+/* ───────────────────── File helpers ───────────────────── */
+async function fileToBase64(file) {
+    const buf = await file.arrayBuffer();
+    const bytes = new Uint8Array(buf);
+    let binary = '';
+    const chunk = 0x8000;
+    for (let i = 0; i < bytes.length; i += chunk) {
+        binary += String.fromCharCode.apply(null, Array.from(bytes.subarray(i, i + chunk)));
+    }
+    return { data: btoa(binary), mediaType: file.type || 'image/png' };
+}
+function dataUrlToBase64(dataUrl) {
+    const m = dataUrl.match(/^data:([^;]+);base64,(.+)$/);
+    if (!m)
+        throw new Error('Invalid data URL');
+    return { mediaType: m[1], data: m[2] };
+}
+function parseJsonLoose(text) {
+    const trimmed = (text || '').trim();
+    try {
+        return JSON.parse(trimmed);
+    }
+    catch { }
+    const fence = trimmed.match(/```(?:json)?\s*([\s\S]*?)```/i);
+    if (fence) {
+        try {
+            return JSON.parse(fence[1].trim());
+        }
+        catch { }
+    }
+    const match = trimmed.match(/\{[\s\S]*\}/);
+    if (match) {
+        try {
+            return JSON.parse(match[0]);
+        }
+        catch { }
+    }
+    throw new Error(`Model did not return valid JSON. Raw: ${trimmed.slice(0, 200)}`);
+}
+function fuzzyMatchType(raw, allowed) {
+    if (!raw)
+        return null;
+    const exact = allowed.find(a => a === raw);
+    if (exact)
+        return exact;
+    const norm = (s) => s.toLowerCase().replace(/[^a-z0-9]/g, '');
+    const target = norm(raw);
+    return allowed.find(a => norm(a) === target) || null;
+}
+async function callBackendVision(p) {
+    const resp = await client_1.default.post('/api/vision/extract-dieline', {
+        images: p.images,
+        systemPrompt: p.systemPrompt,
+        userPrompt: p.userPrompt,
+    }, p.session);
+    if (!resp.success)
+        throw new Error(resp.error || 'Backend vision call failed');
+    // Backend returns the model's raw text in resp.data.rawText so we can parse JSON ourselves.
+    const rawText = (resp.data && (resp.data.rawText || resp.data.RawText)) || '';
+    if (!rawText)
+        throw new Error('Backend returned no model text');
+    return parseJsonLoose(rawText);
+}
+/* ───────────────────── Claude direct dispatch (browser-direct) ───────────────────── */
+async function callClaudeVision(p) {
+    const content = [];
+    for (const img of p.images) {
+        if (img.caption)
+            content.push({ type: 'text', text: img.caption });
+        content.push({ type: 'image', source: { type: 'base64', media_type: img.mediaType, data: img.base64 } });
+    }
+    content.push({ type: 'text', text: p.userPrompt });
+    const resp = await fetch('https://api.anthropic.com/v1/messages', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'x-api-key': p.apiKey,
+            'anthropic-version': '2023-06-01',
+            'anthropic-dangerous-direct-browser-access': 'true',
+        },
+        body: JSON.stringify({
+            model: 'claude-sonnet-4-6',
+            max_tokens: 2048,
+            system: p.systemPrompt,
+            messages: [{ role: 'user', content }],
+        }),
+    });
+    if (!resp.ok) {
+        const errText = await resp.text();
+        throw new Error(`Claude API ${resp.status}: ${errText.slice(0, 300)}`);
+    }
+    const json = await resp.json();
+    const text = json?.content?.[0]?.text;
+    if (!text)
+        throw new Error('Claude returned no text content');
+    return parseJsonLoose(text);
+}
+async function callVision(p, req) {
+    if (req.provider === 'claude') {
+        if (!req.apiKey)
+            throw new Error('Claude API key required for browser-direct mode');
+        return callClaudeVision({ ...p, apiKey: req.apiKey });
+    }
+    return callBackendVision(p);
+}
+/* ───────────────────── Two-pass orchestration ───────────────────── */
+async function extractTwoPass(req, grid) {
+    const userImgRaw = await fileToBase64(req.file);
+    const gridImgRaw = dataUrlToBase64(grid.dataUrl);
+    const userImg = { base64: userImgRaw.data, mediaType: userImgRaw.mediaType };
+    const gridImg = { base64: gridImgRaw.data, mediaType: gridImgRaw.mediaType };
+    // Pass 1 — triage: user image + reference grid → top-5 candidates + L/W/H
+    const triage = await callVision({
+        images: [
+            { ...userImg, caption: 'USER IMAGE — the dieline to extract specs from:' },
+            { ...gridImg, caption: 'REFERENCE GRID — all known types, labeled. Match against these:' },
+        ],
+        systemPrompt: TRIAGE_SYSTEM_PROMPT,
+        userPrompt: triageUserPrompt(req.contentTypes),
+        session: req.session,
+    }, req);
+    const rawCandidates = Array.isArray(triage.candidates) ? triage.candidates : [];
+    // Snap each candidate string to a real allow-list entry; drop anything we can't match.
+    const candidates = rawCandidates
+        .map(c => fuzzyMatchType(typeof c === 'string' ? c : null, req.contentTypes))
+        .filter((c) => !!c);
+    // Assign L/W from the horizontal labels by position. Convention from the
+    // keyline formulas (PF → L → W → L → W): the leftmost horizontal panel
+    // after the glue tab is L (front face); the next one is W (side wall).
+    // If the model returns horizontalLeft/horizontalRight, use them; otherwise
+    // fall back to legacy L/W keys for backwards compat with old prompts.
+    const horizontalLeft = numOrNull(triage.horizontalLeft);
+    const horizontalRight = numOrNull(triage.horizontalRight);
+    const L = horizontalLeft != null ? horizontalLeft : numOrNull(triage.L);
+    const W = horizontalRight != null ? horizontalRight : numOrNull(triage.W);
+    // If triage gave us nothing usable, return what we have without a final type.
+    if (candidates.length === 0) {
+        return {
+            L,
+            W,
+            H: numOrNull(triage.H),
+            contentType: null,
+            notes: (triage.notes || '') + ' [no usable candidates from triage]',
+            candidates: [],
+        };
+    }
+    // Pass 2 — refine: user image + only the candidate thumbnails
+    const candidateThumbs = candidates.map((c, i) => {
+        const dataUrl = grid.thumbs[c];
+        if (!dataUrl)
+            return null;
+        const { data, mediaType } = dataUrlToBase64(dataUrl);
+        return { base64: data, mediaType, caption: `Candidate ${i + 1}: ${c}` };
+    }).filter((x) => !!x);
+    let finalType = candidates[0]; // fallback if pass 2 fails
+    let confidence = 'low';
+    let reason = '';
+    try {
+        const refine = await callVision({
+            images: [
+                { ...userImg, caption: 'USER IMAGE — pick which candidate visually matches:' },
+                ...candidateThumbs,
+            ],
+            systemPrompt: REFINE_SYSTEM_PROMPT,
+            userPrompt: refineUserPrompt(candidates),
+            session: req.session,
+        }, req);
+        const picked = fuzzyMatchType(typeof refine.contentType === 'string' ? refine.contentType : null, candidates);
+        if (picked)
+            finalType = picked;
+        if (typeof refine.confidence === 'string')
+            confidence = refine.confidence;
+        if (typeof refine.reason === 'string')
+            reason = refine.reason;
+    }
+    catch (e) {
+        // Pass 2 failure shouldn't kill the whole extraction — fall back to triage's #1.
+        reason = `Pass 2 failed: ${e?.message || e}. Using triage top candidate.`;
+    }
+    const triageNotes = typeof triage.notes === 'string' ? triage.notes : '';
+    const combinedNotes = [triageNotes, reason && `[match ${confidence}] ${reason}`]
+        .filter(Boolean).join(' · ');
+    return {
+        L,
+        W,
+        H: numOrNull(triage.H),
+        contentType: finalType,
+        notes: combinedNotes || undefined,
+        candidates,
+    };
+}
+function numOrNull(v) {
+    if (v === null || v === undefined)
+        return null;
+    const n = typeof v === 'string' ? parseFloat(v) : Number(v);
+    return Number.isFinite(n) ? n : null;
+}
+/* ───────────────────── Public entry ───────────────────── */
+async function extractDielineSpecs(req) {
+    if (!req.file)
+        throw new Error('No image provided');
+    if (!req.contentTypes?.length)
+        throw new Error('contentTypes allow-list is empty');
+    if (!req.session)
+        throw new Error('Session is required (used for keyline fetch and backend call)');
+    // Build (or hit cache for) the reference grid. This is the slow path on first run.
+    const grid = await (0, reference_grid_1.getReferenceGrid)(req.contentTypes, req.grain || 'With Grain', req.session);
+    return extractTwoPass(req, grid);
+}
+/** Re-export so the UI can offer a "rebuild reference grid" button. */
+var reference_grid_2 = require("./reference-grid.js");
+Object.defineProperty(exports, "clearReferenceGridCache", { enumerable: true, get: function () { return reference_grid_2.clearReferenceGridCache; } });

package/dist/cjs/lib/vision/reference-grid.js

@@ -0,0 +1,245 @@
+'use client';
+"use strict";
+/**
+ * Builds a composite "reference grid" image of all content-type keylines so
+ * the LLM can pick by visual match against ground truth rather than guessing
+ * from training-data memory.
+ *
+ * Strategy:
+ *   1. Fetch keyline-coordinate rows for every content type in parallel
+ *   2. Evaluate each row's formulas with a fixed reference Dims so panel
+ *      proportions are comparable across types
+ *   3. Render each type's segments to an offscreen canvas tile
+ *   4. Pack the tiles into one labeled grid PNG
+ *
+ * Caching:
+ *   - The grid is deterministic given (types[], referenceDims). We hash those
+ *     and store the resulting PNG (+ tile metadata) in IndexedDB.
+ *   - Stale entries are auto-evicted when the hash changes (e.g. user adds a
+ *     new content type).
+ *
+ * The cached grid is reused across every Extract call — generated once per
+ * type-list change, never recomputed unnecessarily.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getReferenceGrid = getReferenceGrid;
+exports.clearReferenceGridCache = clearReferenceGridCache;
+const keyline3D_1 = require("@/app/(main)/costing/estimation/components/keyline3D");
+const planning_1 = require("../api/estimation/planning.js");
+// Reference dimensions chosen so L, W, H are all visually distinct on every
+// type's panel layout. Don't change these without bumping the cache key.
+const REFERENCE_DIMS = {
+    L: 200, W: 100, H: 150,
+    OF: 30, PF: 12, BF: 30, FH: 25, TH: 20,
+};
+const TILE_SIZE = 400; // each thumbnail is TILE_SIZE × TILE_SIZE px — bigger so flap-tuck direction is visible
+const LABEL_HEIGHT = 28; // pixels for the type name underneath
+const GRID_COLS = 6; // columns in the composite
+const TILE_PADDING = 8; // pixels between tiles
+const IDB_NAME = 'vision-reference-cache';
+const IDB_STORE = 'grids';
+/* ───────────────────────── IndexedDB helpers ───────────────────────── */
+function openDb() {
+    return new Promise((resolve, reject) => {
+        const req = indexedDB.open(IDB_NAME, 1);
+        req.onupgradeneeded = () => {
+            const db = req.result;
+            if (!db.objectStoreNames.contains(IDB_STORE))
+                db.createObjectStore(IDB_STORE);
+        };
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+    });
+}
+async function idbGet(key) {
+    try {
+        const db = await openDb();
+        return await new Promise((resolve, reject) => {
+            const tx = db.transaction(IDB_STORE, 'readonly');
+            const req = tx.objectStore(IDB_STORE).get(key);
+            req.onsuccess = () => resolve(req.result || null);
+            req.onerror = () => reject(req.error);
+        });
+    }
+    catch {
+        return null;
+    }
+}
+async function idbSet(key, value) {
+    try {
+        const db = await openDb();
+        await new Promise((resolve, reject) => {
+            const tx = db.transaction(IDB_STORE, 'readwrite');
+            tx.objectStore(IDB_STORE).put(value, key);
+            tx.oncomplete = () => resolve();
+            tx.onerror = () => reject(tx.error);
+        });
+    }
+    catch {
+        // Best-effort caching — if IndexedDB fails (private mode etc.) we just regenerate next time.
+    }
+}
+/* ───────────────────────── Hash (cache key) ───────────────────────── */
+async function hashInputs(types, dims) {
+    // Tile config is part of the cache key so changes invalidate stale grids
+    // automatically without needing a manual "clear cache" action.
+    const payload = JSON.stringify({
+        types: [...types].sort(),
+        dims,
+        tile: { size: TILE_SIZE, label: LABEL_HEIGHT, cols: GRID_COLS, pad: TILE_PADDING },
+    });
+    const buf = new TextEncoder().encode(payload);
+    const digest = await crypto.subtle.digest('SHA-256', buf);
+    return Array.from(new Uint8Array(digest)).map(b => b.toString(16).padStart(2, '0')).join('').slice(0, 16);
+}
+/* ───────────────────────── Tile renderer ───────────────────────── */
+function renderTileToCanvas(segments, label) {
+    const canvas = document.createElement('canvas');
+    canvas.width = TILE_SIZE;
+    canvas.height = TILE_SIZE + LABEL_HEIGHT;
+    const ctx = canvas.getContext('2d');
+    // White background so the LLM sees high contrast.
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    // Label at the bottom — type name, monospace, dark.
+    ctx.fillStyle = '#111111';
+    ctx.font = 'bold 11px monospace';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(label, TILE_SIZE / 2, TILE_SIZE + LABEL_HEIGHT / 2, TILE_SIZE - 4);
+    if (segments.length === 0) {
+        ctx.fillStyle = '#999999';
+        ctx.font = '12px sans-serif';
+        ctx.fillText('(no keyline)', TILE_SIZE / 2, TILE_SIZE / 2);
+        return canvas;
+    }
+    // Compute bbox of all segment endpoints so we can scale-to-fit.
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const s of segments) {
+        minX = Math.min(minX, s.x1, s.x2);
+        minY = Math.min(minY, s.y1, s.y2);
+        maxX = Math.max(maxX, s.x1, s.x2);
+        maxY = Math.max(maxY, s.y1, s.y2);
+    }
+    const w = maxX - minX, h = maxY - minY;
+    if (w <= 0 || h <= 0)
+        return canvas;
+    const pad = 8;
+    const scale = Math.min((TILE_SIZE - 2 * pad) / w, (TILE_SIZE - 2 * pad) / h);
+    const offsetX = (TILE_SIZE - w * scale) / 2 - minX * scale;
+    const offsetY = (TILE_SIZE - h * scale) / 2 - minY * scale;
+    const tx = (x) => x * scale + offsetX;
+    const ty = (y) => y * scale + offsetY;
+    ctx.lineWidth = 1.2;
+    for (const s of segments) {
+        const isCurve = s.shape === 'Curve';
+        const isCircle = s.shape === 'Circle';
+        ctx.strokeStyle = isCurve || isCircle ? '#dc2626' : (s.isDashed ? '#2563eb' : '#111111');
+        ctx.setLineDash(s.isDashed ? [4, 3] : []);
+        ctx.beginPath();
+        if (isCurve) {
+            ctx.moveTo(tx(s.x1), ty(s.y1));
+            ctx.quadraticCurveTo(tx(s.x1), ty(s.y2), tx(s.x2), ty(s.y2));
+        }
+        else if (isCircle) {
+            const r = Math.sqrt((s.x2 - s.x1) ** 2 + (s.y2 - s.y1) ** 2) / 2 * scale;
+            ctx.moveTo(tx(s.x1), ty(s.y1));
+            ctx.arc(tx((s.x1 + s.x2) / 2), ty((s.y1 + s.y2) / 2), r, 0, Math.PI * 2);
+        }
+        else {
+            ctx.moveTo(tx(s.x1), ty(s.y1));
+            ctx.lineTo(tx(s.x2), ty(s.y2));
+        }
+        ctx.stroke();
+    }
+    return canvas;
+}
+/* ───────────────────────── Composite assembler ───────────────────────── */
+function compositeTiles(tiles) {
+    const rows = Math.ceil(tiles.length / GRID_COLS);
+    const tileTotalH = TILE_SIZE + LABEL_HEIGHT;
+    const compW = GRID_COLS * TILE_SIZE + (GRID_COLS + 1) * TILE_PADDING;
+    const compH = rows * tileTotalH + (rows + 1) * TILE_PADDING;
+    const canvas = document.createElement('canvas');
+    canvas.width = compW;
+    canvas.height = compH;
+    const ctx = canvas.getContext('2d');
+    // Light background so cell boundaries don't visually merge.
+    ctx.fillStyle = '#f3f4f6';
+    ctx.fillRect(0, 0, compW, compH);
+    const meta = [];
+    tiles.forEach((t, i) => {
+        const col = i % GRID_COLS;
+        const row = Math.floor(i / GRID_COLS);
+        const x = TILE_PADDING + col * (TILE_SIZE + TILE_PADDING);
+        const y = TILE_PADDING + row * (tileTotalH + TILE_PADDING);
+        // White card under each tile so the label area has contrast.
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(x, y, TILE_SIZE, tileTotalH);
+        ctx.drawImage(t.canvas, x, y);
+        meta.push({ type: t.type, col, row, x, y });
+    });
+    return { canvas, meta };
+}
+/* ───────────────────────── Public API ───────────────────────── */
+/**
+ * Get a reference grid for the given content types, building it if necessary.
+ * Fetches all keyline rows in parallel and renders the composite client-side.
+ *
+ * @param types  Content type names (from the page's CONTENT_TYPE_OPTIONS)
+ * @param grain  Grain orientation for the keyline fetch (usually 'With Grain')
+ * @param session  NextAuth session for the keyline API calls
+ */
+async function getReferenceGrid(types, grain, session) {
+    const hash = await hashInputs(types, REFERENCE_DIMS);
+    const cached = await idbGet(hash);
+    if (cached)
+        return cached;
+    // Fetch all types in parallel — individual failures don't abort the build.
+    const fetched = await Promise.all(types.map(async (type) => {
+        try {
+            const resp = await planning_1.PlanWindowAPI.getKeylineCoordinates(type, grain, session);
+            if (resp.success && Array.isArray(resp.data) && resp.data.length > 0) {
+                return { type, rows: resp.data };
+            }
+            return { type, rows: [] };
+        }
+        catch {
+            return { type, rows: [] };
+        }
+    }));
+    // Render every type's tile; capture individual thumbs for pass-2 use.
+    const tileCanvases = [];
+    const thumbs = {};
+    for (const { type, rows } of fetched) {
+        let segments = [];
+        try {
+            segments = (0, keyline3D_1.rowsToSegments)(rows, REFERENCE_DIMS);
+        }
+        catch { /* leave empty */ }
+        const tile = renderTileToCanvas(segments, type);
+        tileCanvases.push({ type, canvas: tile });
+        thumbs[type] = tile.toDataURL('image/png');
+    }
+    const { canvas: comp, meta } = compositeTiles(tileCanvases);
+    const dataUrl = comp.toDataURL('image/png');
+    const base64 = dataUrl.split(',', 2)[1] || '';
+    const grid = { dataUrl, base64, tiles: meta, thumbs, hash };
+    await idbSet(hash, grid);
+    return grid;
+}
+/** Invalidate any cached grids — useful for a manual "rebuild reference" UI button. */
+async function clearReferenceGridCache() {
+    try {
+        const db = await openDb();
+        await new Promise((resolve, reject) => {
+            const tx = db.transaction(IDB_STORE, 'readwrite');
+            tx.objectStore(IDB_STORE).clear();
+            tx.oncomplete = () => resolve();
+            tx.onerror = () => reject(tx.error);
+        });
+    }
+    catch {
+        /* ignore */
+    }
+}

package/dist/cjs/locales/de.json

@@ -0,0 +1,79 @@
+{
+    "Sign in to your account": "Melden Sie sich bei Ihrem Konto an",
+    "Last login:": "Letzte Anmeldung:",
+    "Financial Year": "Geschäftsjahr",
+    "Company Code": "Firmencode",
+    "Enter your company code": "Geben Sie Ihren Firmencode ein",
+    "Username": "Benutzername",
+    "Enter your username": "Geben Sie Ihren Benutzernamen ein",
+    "Password": "Passwort",
+    "Enter your password": "Geben Sie Ihr Passwort ein",
+    "Remember me": "Angemeldet bleiben",
+    "or": "oder",
+    "Signing in...": "Anmelden...",
+    "Sign In": "Anmelden",
+    "Biometric Login": "Biometrische Anmeldung",
+    "Forgot Password?": "Passwort vergessen?",
+    "Password Recovery": "Passwortwiederherstellung",
+    "Password recovery functionality will be implemented in the next version. Please contact your system administrator for assistance.": "Die Funktion zur Passwortwiederherstellung wird in der nächsten Version implementiert. Bitte wenden Sie sich an Ihren Systemadministrator.",
+    "Invalid username or password": "Ungültiger Benutzername oder Passwort",
+    "An error occurred. Please try again.": "Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.",
+    "Settings": "Einstellungen",
+    "Back": "Zurück",
+    "Profile": "Profil",
+    "Notifications": "Benachrichtigungen",
+    "Preferences": "Einstellungen",
+    "Profile Information": "Profilinformationen",
+    "Full Name": "Vollständiger Name",
+    "Enter your full name": "Geben Sie Ihren vollständigen Namen ein",
+    "Email Address": "E-Mail-Adresse",
+    "Enter your email": "Geben Sie Ihre E-Mail ein",
+    "Company": "Firma",
+    "Company name": "Firmenname",
+    "Role": "Rolle",
+    "Save Changes": "Änderungen speichern",
+    "Security Settings": "Sicherheitseinstellungen",
+    "Change Password": "Passwort ändern",
+    "Current password": "Aktuelles Passwort",
+    "New password": "Neues Passwort",
+    "Confirm new password": "Neues Passwort bestätigen",
+    "Two-Factor Authentication": "Zwei-Faktor-Authentifizierung",
+    "Add an extra layer of security to your account": "Fügen Sie Ihrem Konto eine zusätzliche Sicherheitsebene hinzu",
+    "Enable 2FA": "2FA aktivieren",
+    "Choose Profile Picture": "Profilbild wählen",
+    "Notification Preferences": "Benachrichtigungseinstellungen",
+    "Email Notifications": "E-Mail-Benachrichtigungen",
+    "Receive email updates about your account": "Erhalten Sie E-Mail-Updates zu Ihrem Konto",
+    "Push Notifications": "Push-Benachrichtigungen",
+    "Get push notifications in your browser": "Erhalten Sie Push-Benachrichtigungen in Ihrem Browser",
+    "System Updates": "Systemupdates",
+    "Notifications about system maintenance and updates": "Benachrichtigungen über Systemwartung und Updates",
+    "Search Style": "Suchstil",
+    "Choose your preferred search interface": "Wählen Sie Ihre bevorzugte Suchoberfläche",
+    "Advanced": "Erweitert",
+    "Full panel": "Vollständiges Panel",
+    "Modal": "Modal",
+    "Quick search": "Schnellsuche",
+    "No navigation items available": "Keine Navigationselemente verfügbar",
+    "Retry": "Erneut versuchen",
+    "Expand sidebar": "Seitenleiste erweitern",
+    "Collapse sidebar": "Seitenleiste einklappen",
+    "Estimo v3.0": "Estimo v3.0",
+    "Active": "Aktiv",
+    "Default Unit": "Standardeinheit",
+    "Select Unit": "Einheit wählen",
+    "Loading...": "Laden...",
+    "Hello": "Hallo",
+    "(Units unavailable)": "(Einheiten nicht verfügbar)",
+    "Search everything...": "Alles durchsuchen...",
+    "Search Modules": "Module suchen",
+    "No modules found for": "Keine Module gefunden für",
+    "Mark all as read": "Alle als gelesen markieren",
+    "View All Notifications": "Alle Benachrichtigungen anzeigen",
+    "No notifications in this category": "Keine Benachrichtigungen in dieser Kategorie",
+    "Pending": "Ausstehend",
+    "Escalations": "Eskalationen",
+    "Updates": "Updates",
+    "All": "Alle",
+    "Failed to load navigation menu": "Laden des Navigationsmenüs fehlgeschlagen"
+}