@things-factory/board-ai 10.0.0-beta.108

package/dist-server/service/styling/color-utils.js

@@ -0,0 +1,210 @@
+"use strict";
+/**
+ * Color 파싱 / 정규화 유틸 — styling tool 들이 공통으로 사용.
+ *
+ * AI 가 자연어로 색상 표현하는 다양한 형태를 받아 표준 hex 또는 rgba 로 변환.
+ *
+ * 지원 입력:
+ *   - hex 6자리:  '#ff0000', '#FF0000'
+ *   - hex 3자리:  '#f00'  (→ '#ff0000')
+ *   - hex 8자리:  '#ff0000ff' (alpha 포함)
+ *   - rgb / rgba: 'rgb(255,0,0)', 'rgba(255,0,0,0.5)'
+ *   - CSS named: 'red', 'transparent', ...
+ *   - 시맨틱 alias: 'warm-red', 'forest-green', ...
+ *
+ * 출력 형태:
+ *   - normalizeColor(): 표준 hex (#rrggbb), opacity 는 별개로 분리 반환
+ *   - validateColor():  유효성만 체크 (boolean + 에러 메시지)
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseColor = parseColor;
+exports.validateColor = validateColor;
+exports.normalizeColor = normalizeColor;
+/** CSS named colors → hex (자주 쓰는 것만, 필요 시 확장) */
+const NAMED_COLORS = {
+    // 무채
+    white: '#ffffff',
+    black: '#000000',
+    gray: '#808080',
+    grey: '#808080',
+    silver: '#c0c0c0',
+    // 기본 컬러
+    red: '#ff0000',
+    green: '#008000',
+    blue: '#0000ff',
+    yellow: '#ffff00',
+    cyan: '#00ffff',
+    magenta: '#ff00ff',
+    orange: '#ffa500',
+    purple: '#800080',
+    pink: '#ffc0cb',
+    brown: '#a52a2a',
+    // 자주 쓰는 변형
+    navy: '#000080',
+    teal: '#008080',
+    lime: '#00ff00',
+    olive: '#808000',
+    maroon: '#800000',
+    // 투명
+    transparent: 'transparent'
+};
+/**
+ * 시맨틱 컬러 alias — AI 가 자연어 표현 사용 가능.
+ * Material 3 기반 톤 (brightness 적당, saturation 풍부).
+ */
+const SEMANTIC_COLORS = {
+    // warm reds
+    'warm-red': '#e74c3c',
+    'soft-red': '#ef4444',
+    'deep-red': '#b91c1c',
+    'dark-red': '#7f1d1d',
+    // greens
+    'forest-green': '#228b22',
+    'mint-green': '#10b981',
+    'olive-green': '#65a30d',
+    'lime-green': '#84cc16',
+    // blues
+    'sky-blue': '#0ea5e9',
+    'navy-blue': '#1e40af',
+    'royal-blue': '#3b82f6',
+    'powder-blue': '#bfdbfe',
+    // yellows / oranges
+    'amber': '#f59e0b',
+    'sunset-orange': '#f97316',
+    'gold': '#eab308',
+    'mustard': '#ca8a04',
+    // purples
+    'violet': '#7c3aed',
+    'lavender': '#c4b5fd',
+    // grays
+    'slate': '#64748b',
+    'charcoal': '#374151',
+    'cool-gray': '#6b7280',
+    'warm-gray': '#78716c',
+    // 시맨틱 의도
+    success: '#22c55e',
+    warning: '#f59e0b',
+    error: '#ef4444',
+    info: '#3b82f6'
+};
+/**
+ * 색상 입력을 정규 hex + alpha 로 변환.
+ * 잘못된 입력은 null — 호출자가 에러 처리.
+ */
+function parseColor(input) {
+    if (typeof input !== 'string')
+        return null;
+    const s = input.trim().toLowerCase();
+    if (s.length === 0)
+        return null;
+    // transparent
+    if (s === 'transparent' || s === 'none') {
+        return { hex: 'transparent', alpha: 0 };
+    }
+    // hex
+    if (s.startsWith('#')) {
+        return parseHex(s);
+    }
+    // rgb / rgba
+    const rgbMatch = s.match(/^rgba?\s*\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+    if (rgbMatch) {
+        const r = clampByte(rgbMatch[1]);
+        const g = clampByte(rgbMatch[2]);
+        const b = clampByte(rgbMatch[3]);
+        const a = rgbMatch[4] !== undefined ? clampUnit(rgbMatch[4]) : 1;
+        if (r === null || g === null || b === null || a === null)
+            return null;
+        return { hex: rgbToHex(r, g, b), alpha: a };
+    }
+    // CSS named
+    if (NAMED_COLORS[s]) {
+        return parseHex(NAMED_COLORS[s]);
+    }
+    // 시맨틱 alias
+    if (SEMANTIC_COLORS[s]) {
+        return parseHex(SEMANTIC_COLORS[s]);
+    }
+    return null;
+}
+function parseHex(s) {
+    const hex = s.startsWith('#') ? s.slice(1) : s;
+    if (hex === 'transparent')
+        return { hex: 'transparent', alpha: 0 };
+    if (!/^[0-9a-f]+$/i.test(hex))
+        return null;
+    if (hex.length === 3) {
+        // #abc → #aabbcc
+        const r = hex[0] + hex[0];
+        const g = hex[1] + hex[1];
+        const b = hex[2] + hex[2];
+        return { hex: `#${r}${g}${b}`.toLowerCase(), alpha: 1 };
+    }
+    if (hex.length === 4) {
+        // #abcd → #aabbccdd
+        const r = hex[0] + hex[0];
+        const g = hex[1] + hex[1];
+        const b = hex[2] + hex[2];
+        const a = parseInt(hex[3] + hex[3], 16) / 255;
+        return { hex: `#${r}${g}${b}`.toLowerCase(), alpha: round3(a) };
+    }
+    if (hex.length === 6) {
+        return { hex: `#${hex}`.toLowerCase(), alpha: 1 };
+    }
+    if (hex.length === 8) {
+        const rgb = hex.slice(0, 6);
+        const a = parseInt(hex.slice(6, 8), 16) / 255;
+        return { hex: `#${rgb}`.toLowerCase(), alpha: round3(a) };
+    }
+    return null;
+}
+function clampByte(s) {
+    const n = Number(s);
+    if (!Number.isFinite(n) || n < 0 || n > 255)
+        return null;
+    return Math.round(n);
+}
+function clampUnit(s) {
+    const n = Number(s);
+    if (!Number.isFinite(n) || n < 0 || n > 1)
+        return null;
+    return n;
+}
+function rgbToHex(r, g, b) {
+    const h = (n) => n.toString(16).padStart(2, '0');
+    return `#${h(r)}${h(g)}${h(b)}`;
+}
+function round3(n) {
+    return Math.round(n * 1000) / 1000;
+}
+/**
+ * 단순 검증 — 정규화 가능 여부만.
+ * 에러 메시지에 정정 제안 포함 가능.
+ */
+function validateColor(input) {
+    if (typeof input !== 'string') {
+        return { valid: false, error: 'Color must be a string.' };
+    }
+    const parsed = parseColor(input);
+    if (parsed)
+        return { valid: true };
+    // 비슷한 named color 추천
+    const lower = input.trim().toLowerCase();
+    const allKnown = [...Object.keys(NAMED_COLORS), ...Object.keys(SEMANTIC_COLORS)];
+    const close = allKnown.find(k => k.includes(lower) || lower.includes(k));
+    return {
+        valid: false,
+        error: `Invalid color: '${input}'. Use hex (#ff0000), rgb(255,0,0), or named (red, warm-red, ...).`,
+        suggestion: close
+    };
+}
+/**
+ * 색상을 hex 문자열로 정규화 (저장용).
+ * 실패 시 null.
+ */
+function normalizeColor(input) {
+    const parsed = parseColor(input);
+    if (!parsed)
+        return null;
+    return parsed.hex;
+}
+//# sourceMappingURL=color-utils.js.map

package/dist-server/service/styling/color-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-utils.js","sourceRoot":"","sources":["../../../server/service/styling/color-utils.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;GAgBG;;AAmFH,gCAqCC;AA2DD,sCAoBC;AAMD,wCAIC;AA/MD,iDAAiD;AACjD,MAAM,YAAY,GAA2B;IAC3C,KAAK;IACL,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,QAAQ;IACR,GAAG,EAAE,SAAS;IACd,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,WAAW;IACX,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,KAAK;IACL,WAAW,EAAE,aAAa;CAC3B,CAAA;AAED;;;GAGG;AACH,MAAM,eAAe,GAA2B;IAC9C,YAAY;IACZ,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,SAAS;IACT,cAAc,EAAE,SAAS;IACzB,YAAY,EAAE,SAAS;IACvB,aAAa,EAAE,SAAS;IACxB,YAAY,EAAE,SAAS;IACvB,QAAQ;IACR,UAAU,EAAE,SAAS;IACrB,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,SAAS;IACvB,aAAa,EAAE,SAAS;IACxB,oBAAoB;IACpB,OAAO,EAAE,SAAS;IAClB,eAAe,EAAE,SAAS;IAC1B,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,SAAS;IACpB,UAAU;IACV,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,SAAS;IACrB,QAAQ;IACR,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,SAAS;IACrB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,SAAS;IACT,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;CAChB,CAAA;AAUD;;;GAGG;AACH,SAAgB,UAAU,CAAC,KAAgC;IACzD,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAA;IAC1C,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAA;IACpC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAE/B,cAAc;IACd,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC,KAAK,MAAM,EAAE,CAAC;QACxC,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,EAAE,CAAA;IACzC,CAAC;IAED,MAAM;IACN,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;QACtB,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAA;IACpB,CAAC;IAED,aAAa;IACb,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,gFAAgF,CAAC,CAAA;IAC1G,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,CAAC,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;QAChC,MAAM,CAAC,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;QAChC,MAAM,CAAC,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;QAChC,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAChE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,IAAI;YAAE,OAAO,IAAI,CAAA;QACrE,OAAO,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAA;IAC7C,CAAC;IAED,YAAY;IACZ,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QACpB,OAAO,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAA;IAClC,CAAC;IAED,YAAY;IACZ,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;QACvB,OAAO,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAA;IACrC,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC;AAED,SAAS,QAAQ,CAAC,CAAS;IACzB,MAAM,GAAG,GAAG,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC9C,IAAI,GAAG,KAAK,aAAa;QAAE,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,EAAE,CAAA;IAElE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;QAAE,OAAO,IAAI,CAAA;IAE1C,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACrB,iBAAiB;QACjB,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;QACzB,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;QACzB,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;QACzB,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAA;IACzD,CAAC;IACD,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACrB,oBAAoB;QACpB,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;QACzB,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;QACzB,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;QACzB,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAA;QAC7C,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;IACjE,CAAC;IACD,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACrB,OAAO,EAAE,GAAG,EAAE,IAAI,GAAG,EAAE,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAA;IACnD,CAAC;IACD,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACrB,MAAM,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAC3B,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAA;QAC7C,OAAO,EAAE,GAAG,EAAE,IAAI,GAAG,EAAE,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;IAC3D,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC;AAED,SAAS,SAAS,CAAC,CAAS;IAC1B,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IACnB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG;QAAE,OAAO,IAAI,CAAA;IACxD,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;AACtB,CAAC;AAED,SAAS,SAAS,CAAC,CAAS;IAC1B,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IACnB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;QAAE,OAAO,IAAI,CAAA;IACtD,OAAO,CAAC,CAAA;AACV,CAAC;AAED,SAAS,QAAQ,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS;IAC/C,MAAM,CAAC,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;IACxD,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;AACjC,CAAC;AAED,SAAS,MAAM,CAAC,CAAS;IACvB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;AACpC,CAAC;AAED;;;GAGG;AACH,SAAgB,aAAa,CAAC,KAAgC;IAK5D,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,yBAAyB,EAAE,CAAA;IAC3D,CAAC;IACD,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IAChC,IAAI,MAAM;QAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA;IAElC,qBAAqB;IACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAA;IACxC,MAAM,QAAQ,GAAG,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAA;IAChF,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;IACxE,OAAO;QACL,KAAK,EAAE,KAAK;QACZ,KAAK,EAAE,mBAAmB,KAAK,oEAAoE;QACnG,UAAU,EAAE,KAAK;KAClB,CAAA;AACH,CAAC;AAED;;;GAGG;AACH,SAAgB,cAAc,CAAC,KAAgC;IAC7D,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IAChC,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAA;IACxB,OAAO,MAAM,CAAC,GAAG,CAAA;AACnB,CAAC","sourcesContent":["/**\n * Color 파싱 / 정규화 유틸 — styling tool 들이 공통으로 사용.\n *\n * AI 가 자연어로 색상 표현하는 다양한 형태를 받아 표준 hex 또는 rgba 로 변환.\n *\n * 지원 입력:\n *   - hex 6자리:  '#ff0000', '#FF0000'\n *   - hex 3자리:  '#f00'  (→ '#ff0000')\n *   - hex 8자리:  '#ff0000ff' (alpha 포함)\n *   - rgb / rgba: 'rgb(255,0,0)', 'rgba(255,0,0,0.5)'\n *   - CSS named: 'red', 'transparent', ...\n *   - 시맨틱 alias: 'warm-red', 'forest-green', ...\n *\n * 출력 형태:\n *   - normalizeColor(): 표준 hex (#rrggbb), opacity 는 별개로 분리 반환\n *   - validateColor():  유효성만 체크 (boolean + 에러 메시지)\n */\n\n/** CSS named colors → hex (자주 쓰는 것만, 필요 시 확장) */\nconst NAMED_COLORS: Record<string, string> = {\n  // 무채\n  white: '#ffffff',\n  black: '#000000',\n  gray: '#808080',\n  grey: '#808080',\n  silver: '#c0c0c0',\n  // 기본 컬러\n  red: '#ff0000',\n  green: '#008000',\n  blue: '#0000ff',\n  yellow: '#ffff00',\n  cyan: '#00ffff',\n  magenta: '#ff00ff',\n  orange: '#ffa500',\n  purple: '#800080',\n  pink: '#ffc0cb',\n  brown: '#a52a2a',\n  // 자주 쓰는 변형\n  navy: '#000080',\n  teal: '#008080',\n  lime: '#00ff00',\n  olive: '#808000',\n  maroon: '#800000',\n  // 투명\n  transparent: 'transparent'\n}\n\n/**\n * 시맨틱 컬러 alias — AI 가 자연어 표현 사용 가능.\n * Material 3 기반 톤 (brightness 적당, saturation 풍부).\n */\nconst SEMANTIC_COLORS: Record<string, string> = {\n  // warm reds\n  'warm-red': '#e74c3c',\n  'soft-red': '#ef4444',\n  'deep-red': '#b91c1c',\n  'dark-red': '#7f1d1d',\n  // greens\n  'forest-green': '#228b22',\n  'mint-green': '#10b981',\n  'olive-green': '#65a30d',\n  'lime-green': '#84cc16',\n  // blues\n  'sky-blue': '#0ea5e9',\n  'navy-blue': '#1e40af',\n  'royal-blue': '#3b82f6',\n  'powder-blue': '#bfdbfe',\n  // yellows / oranges\n  'amber': '#f59e0b',\n  'sunset-orange': '#f97316',\n  'gold': '#eab308',\n  'mustard': '#ca8a04',\n  // purples\n  'violet': '#7c3aed',\n  'lavender': '#c4b5fd',\n  // grays\n  'slate': '#64748b',\n  'charcoal': '#374151',\n  'cool-gray': '#6b7280',\n  'warm-gray': '#78716c',\n  // 시맨틱 의도\n  success: '#22c55e',\n  warning: '#f59e0b',\n  error: '#ef4444',\n  info: '#3b82f6'\n}\n\n/** Parse 결과 — color 와 alpha 분리. alpha 는 0..1. */\nexport interface ParsedColor {\n  /** 표준 hex (#rrggbb, 소문자) 또는 'transparent' */\n  hex: string\n  /** Alpha 채널 0..1. transparent 면 0, 명시 alpha 없으면 1. */\n  alpha: number\n}\n\n/**\n * 색상 입력을 정규 hex + alpha 로 변환.\n * 잘못된 입력은 null — 호출자가 에러 처리.\n */\nexport function parseColor(input: string | null | undefined): ParsedColor | null {\n  if (typeof input !== 'string') return null\n  const s = input.trim().toLowerCase()\n  if (s.length === 0) return null\n\n  // transparent\n  if (s === 'transparent' || s === 'none') {\n    return { hex: 'transparent', alpha: 0 }\n  }\n\n  // hex\n  if (s.startsWith('#')) {\n    return parseHex(s)\n  }\n\n  // rgb / rgba\n  const rgbMatch = s.match(/^rgba?\\s*\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*(?:,\\s*([\\d.]+)\\s*)?\\)$/)\n  if (rgbMatch) {\n    const r = clampByte(rgbMatch[1])\n    const g = clampByte(rgbMatch[2])\n    const b = clampByte(rgbMatch[3])\n    const a = rgbMatch[4] !== undefined ? clampUnit(rgbMatch[4]) : 1\n    if (r === null || g === null || b === null || a === null) return null\n    return { hex: rgbToHex(r, g, b), alpha: a }\n  }\n\n  // CSS named\n  if (NAMED_COLORS[s]) {\n    return parseHex(NAMED_COLORS[s])\n  }\n\n  // 시맨틱 alias\n  if (SEMANTIC_COLORS[s]) {\n    return parseHex(SEMANTIC_COLORS[s])\n  }\n\n  return null\n}\n\nfunction parseHex(s: string): ParsedColor | null {\n  const hex = s.startsWith('#') ? s.slice(1) : s\n  if (hex === 'transparent') return { hex: 'transparent', alpha: 0 }\n\n  if (!/^[0-9a-f]+$/i.test(hex)) return null\n\n  if (hex.length === 3) {\n    // #abc → #aabbcc\n    const r = hex[0] + hex[0]\n    const g = hex[1] + hex[1]\n    const b = hex[2] + hex[2]\n    return { hex: `#${r}${g}${b}`.toLowerCase(), alpha: 1 }\n  }\n  if (hex.length === 4) {\n    // #abcd → #aabbccdd\n    const r = hex[0] + hex[0]\n    const g = hex[1] + hex[1]\n    const b = hex[2] + hex[2]\n    const a = parseInt(hex[3] + hex[3], 16) / 255\n    return { hex: `#${r}${g}${b}`.toLowerCase(), alpha: round3(a) }\n  }\n  if (hex.length === 6) {\n    return { hex: `#${hex}`.toLowerCase(), alpha: 1 }\n  }\n  if (hex.length === 8) {\n    const rgb = hex.slice(0, 6)\n    const a = parseInt(hex.slice(6, 8), 16) / 255\n    return { hex: `#${rgb}`.toLowerCase(), alpha: round3(a) }\n  }\n  return null\n}\n\nfunction clampByte(s: string): number | null {\n  const n = Number(s)\n  if (!Number.isFinite(n) || n < 0 || n > 255) return null\n  return Math.round(n)\n}\n\nfunction clampUnit(s: string): number | null {\n  const n = Number(s)\n  if (!Number.isFinite(n) || n < 0 || n > 1) return null\n  return n\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const h = (n: number) => n.toString(16).padStart(2, '0')\n  return `#${h(r)}${h(g)}${h(b)}`\n}\n\nfunction round3(n: number): number {\n  return Math.round(n * 1000) / 1000\n}\n\n/**\n * 단순 검증 — 정규화 가능 여부만.\n * 에러 메시지에 정정 제안 포함 가능.\n */\nexport function validateColor(input: string | null | undefined): {\n  valid: boolean\n  error?: string\n  suggestion?: string\n} {\n  if (typeof input !== 'string') {\n    return { valid: false, error: 'Color must be a string.' }\n  }\n  const parsed = parseColor(input)\n  if (parsed) return { valid: true }\n\n  // 비슷한 named color 추천\n  const lower = input.trim().toLowerCase()\n  const allKnown = [...Object.keys(NAMED_COLORS), ...Object.keys(SEMANTIC_COLORS)]\n  const close = allKnown.find(k => k.includes(lower) || lower.includes(k))\n  return {\n    valid: false,\n    error: `Invalid color: '${input}'. Use hex (#ff0000), rgb(255,0,0), or named (red, warm-red, ...).`,\n    suggestion: close\n  }\n}\n\n/**\n * 색상을 hex 문자열로 정규화 (저장용).\n * 실패 시 null.\n */\nexport function normalizeColor(input: string | null | undefined): string | null {\n  const parsed = parseColor(input)\n  if (!parsed) return null\n  return parsed.hex\n}\n"]}

package/dist-server/service/styling/copy-tools.d.ts

@@ -0,0 +1,27 @@
+/**
+ * copyStyle — 한 컴포넌트의 styling 을 다른 컴포넌트들에 복사.
+ *
+ * 자주 쓰는 패턴: "MOTOR1 처럼 다른 모터들도 같게 만들어줘"
+ *   AI: getComponentByRefid(MOTOR1) 또는 getComponentStyle(MOTOR1) → copyStyle(...)
+ *
+ * aspects 인자로 어느 styling 영역만 복사할지 선택 가능 — 부분 통일 (예: 색만 통일).
+ *
+ * 입력 — sourceRefid 의 실제 styling 값을 미리 알 필요 없음. server 가 components
+ * 에서 source 찾아 styling 추출 후 target 들에 patch 생성.
+ */
+import type { BoardEditOp } from '../types';
+export interface CopyStyleInput {
+    sourceRefid: number;
+    targetRefids: number[];
+    aspects?: Array<'fill' | 'stroke' | 'shadow' | 'material' | 'font' | 'opacity' | 'visibility'>;
+}
+export interface OpsResult {
+    ops: BoardEditOp[];
+    errors: string[];
+}
+/**
+ * input + components 배열 → BoardEditOp[].
+ *
+ * components 는 board 의 모든 컴포넌트 (caller 가 전달). source 찾아 styling 추출.
+ */
+export declare function buildCopyStyleOps(input: CopyStyleInput, components: ReadonlyArray<any>): OpsResult;

package/dist-server/service/styling/copy-tools.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildCopyStyleOps = buildCopyStyleOps;
+const ASPECT_FIELDS = {
+    fill: ['fillStyle'],
+    stroke: ['strokeStyle'],
+    shadow: ['shadow'],
+    material: ['material3d'],
+    font: [
+        'fontFamily',
+        'fontSize',
+        'fontWeight',
+        'fontStyle',
+        'fontColor',
+        'textAlign',
+        'textBaseline',
+        'lineHeight'
+    ],
+    opacity: ['alpha'],
+    visibility: ['hidden']
+};
+const DEFAULT_ASPECTS = [
+    'fill',
+    'stroke',
+    'shadow',
+    'material',
+    'font',
+    'opacity'
+    // visibility 는 default 에서 제외 — 의도 없이 hidden 복사 위험
+];
+/**
+ * input + components 배열 → BoardEditOp[].
+ *
+ * components 는 board 의 모든 컴포넌트 (caller 가 전달). source 찾아 styling 추출.
+ */
+function buildCopyStyleOps(input, components) {
+    if (typeof input.sourceRefid !== 'number') {
+        return { ops: [], errors: ['sourceRefid (number) required'] };
+    }
+    if (!Array.isArray(input.targetRefids) || input.targetRefids.length === 0) {
+        return { ops: [], errors: ['targetRefids must be a non-empty array'] };
+    }
+    const targets = input.targetRefids.filter(n => typeof n === 'number' && Number.isFinite(n) && n !== input.sourceRefid);
+    if (targets.length === 0) {
+        return { ops: [], errors: ['No valid target refids (excluding source)'] };
+    }
+    const source = components.find(c => c && typeof c.refid === 'number' && c.refid === input.sourceRefid);
+    if (!source) {
+        return {
+            ops: [],
+            errors: [`Source component refid=${input.sourceRefid} not found`]
+        };
+    }
+    const aspects = input.aspects && input.aspects.length > 0 ? input.aspects : DEFAULT_ASPECTS;
+    const validAspects = Object.keys(ASPECT_FIELDS);
+    const unknown = aspects.filter(a => !validAspects.includes(a));
+    if (unknown.length > 0) {
+        return {
+            ops: [],
+            errors: [`Unknown aspect(s): ${unknown.join(', ')}. Valid: ${validAspects.join('/')}`]
+        };
+    }
+    // source 에서 aspect 별 필드 추출 → patch 합치기
+    const patch = {};
+    for (const aspect of aspects) {
+        const fields = ASPECT_FIELDS[aspect];
+        for (const field of fields) {
+            if (source[field] !== undefined) {
+                patch[field] = source[field];
+            }
+        }
+    }
+    if (Object.keys(patch).length === 0) {
+        return { ops: [], errors: ['Source has no styling for the requested aspects'] };
+    }
+    return {
+        ops: targets.map(refid => ({ op: 'modify', refid, patch })),
+        errors: []
+    };
+}
+//# sourceMappingURL=copy-tools.js.map

package/dist-server/service/styling/copy-tools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-tools.js","sourceRoot":"","sources":["../../../server/service/styling/copy-tools.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * copyStyle — 한 컴포넌트의 styling 을 다른 컴포넌트들에 복사.\n *\n * 자주 쓰는 패턴: \"MOTOR1 처럼 다른 모터들도 같게 만들어줘\"\n *   AI: getComponentByRefid(MOTOR1) 또는 getComponentStyle(MOTOR1) → copyStyle(...)\n *\n * aspects 인자로 어느 styling 영역만 복사할지 선택 가능 — 부분 통일 (예: 색만 통일).\n *\n * 입력 — sourceRefid 의 실제 styling 값을 미리 알 필요 없음. server 가 components\n * 에서 source 찾아 styling 추출 후 target 들에 patch 생성.\n */\nimport type { BoardEditOp } from '../types'\n\nexport interface CopyStyleInput {\n  sourceRefid: number\n  targetRefids: number[]\n  aspects?: Array<'fill' | 'stroke' | 'shadow' | 'material' | 'font' | 'opacity' | 'visibility'>\n}\n\nexport interface OpsResult {\n  ops: BoardEditOp[]\n  errors: string[]\n}\n\nconst ASPECT_FIELDS: Record<string, string[]> = {\n  fill: ['fillStyle'],\n  stroke: ['strokeStyle'],\n  shadow: ['shadow'],\n  material: ['material3d'],\n  font: [\n    'fontFamily',\n    'fontSize',\n    'fontWeight',\n    'fontStyle',\n    'fontColor',\n    'textAlign',\n    'textBaseline',\n    'lineHeight'\n  ],\n  opacity: ['alpha'],\n  visibility: ['hidden']\n}\n\nconst DEFAULT_ASPECTS: Array<keyof typeof ASPECT_FIELDS> = [\n  'fill',\n  'stroke',\n  'shadow',\n  'material',\n  'font',\n  'opacity'\n  // visibility 는 default 에서 제외 — 의도 없이 hidden 복사 위험\n]\n\n/**\n * input + components 배열 → BoardEditOp[].\n *\n * components 는 board 의 모든 컴포넌트 (caller 가 전달). source 찾아 styling 추출.\n */\nexport function buildCopyStyleOps(\n  input: CopyStyleInput,\n  components: ReadonlyArray<any>\n): OpsResult {\n  if (typeof input.sourceRefid !== 'number') {\n    return { ops: [], errors: ['sourceRefid (number) required'] }\n  }\n  if (!Array.isArray(input.targetRefids) || input.targetRefids.length === 0) {\n    return { ops: [], errors: ['targetRefids must be a non-empty array'] }\n  }\n  const targets = input.targetRefids.filter(\n    n => typeof n === 'number' && Number.isFinite(n) && n !== input.sourceRefid\n  )\n  if (targets.length === 0) {\n    return { ops: [], errors: ['No valid target refids (excluding source)'] }\n  }\n\n  const source = components.find(\n    c => c && typeof c.refid === 'number' && c.refid === input.sourceRefid\n  )\n  if (!source) {\n    return {\n      ops: [],\n      errors: [`Source component refid=${input.sourceRefid} not found`]\n    }\n  }\n\n  const aspects = input.aspects && input.aspects.length > 0 ? input.aspects : DEFAULT_ASPECTS\n  const validAspects = Object.keys(ASPECT_FIELDS)\n  const unknown = aspects.filter(a => !validAspects.includes(a))\n  if (unknown.length > 0) {\n    return {\n      ops: [],\n      errors: [`Unknown aspect(s): ${unknown.join(', ')}. Valid: ${validAspects.join('/')}`]\n    }\n  }\n\n  // source 에서 aspect 별 필드 추출 → patch 합치기\n  const patch: any = {}\n  for (const aspect of aspects) {\n    const fields = ASPECT_FIELDS[aspect]\n    for (const field of fields) {\n      if (source[field] !== undefined) {\n        patch[field] = source[field]\n      }\n    }\n  }\n\n  if (Object.keys(patch).length === 0) {\n    return { ops: [], errors: ['Source has no styling for the requested aspects'] }\n  }\n\n  return {\n    ops: targets.map(refid => ({ op: 'modify', refid, patch })),\n    errors: []\n  }\n}\n"]}

package/dist-server/service/styling/effect-tools.d.ts

@@ -0,0 +1,45 @@
+/**
+ * setShadow / setOpacity / setVisible — 효과 / 가시성 / 투명도.
+ *
+ * setShadow: state.shadow (color/blur/offsetX/offsetY)
+ * setOpacity: state.alpha (컴포넌트 전체 알파, 0..1)
+ * setVisible: state.hidden 토글 (true → 숨김)
+ */
+import type { BoardEditOp } from '../types';
+export interface SetShadowInput {
+    refids: number[];
+    /** synthetic — false 면 blur=0 + color=transparent 매핑 (drawer 가 안 그림). 모델에 enabled 필드 없음. */
+    enabled?: boolean;
+    /** state.shadow.color */
+    color?: string;
+    /** Blur radius (CSS box-shadow 의 blur-radius, Canvas 의 shadowBlur). state.shadow.blur. */
+    blur?: number;
+    /** Horizontal offset (CSS box-shadow 의 offset-x, Canvas 의 shadowOffsetX). state.shadow.offsetX. */
+    offsetX?: number;
+    /** Vertical offset (CSS box-shadow 의 offset-y, Canvas 의 shadowOffsetY). state.shadow.offsetY. */
+    offsetY?: number;
+}
+export interface SetOpacityInput {
+    refids: number[];
+    /** state.alpha 의 canonical 이름. 0..1. */
+    alpha: number;
+}
+export interface SetVisibleInput {
+    refids: number[];
+    visible: boolean;
+}
+export interface OpsResult {
+    ops: BoardEditOp[];
+    errors: string[];
+}
+/**
+ * setShadow — CSS box-shadow / Canvas API 표준 이름 (color/offsetX/offsetY/blur) 그대로
+ * state.shadow 에 set. things-scene drawer 는 옛 이름 (left/top/blurSize) 도
+ * backwards-compat 으로 읽지만 (effect/shadow.ts:36-47), 새 모델은 canonical 만 사용.
+ *
+ * synthetic enabled=false → blur 0 + transparent 매핑 (drawer 가 안 그림).
+ * 모델에 enabled 필드는 없음.
+ */
+export declare function buildSetShadowOps(input: SetShadowInput): OpsResult;
+export declare function buildSetOpacityOps(input: SetOpacityInput): OpsResult;
+export declare function buildSetVisibleOps(input: SetVisibleInput): OpsResult;

package/dist-server/service/styling/effect-tools.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildSetShadowOps = buildSetShadowOps;
+exports.buildSetOpacityOps = buildSetOpacityOps;
+exports.buildSetVisibleOps = buildSetVisibleOps;
+const color_utils_1 = require("./color-utils");
+/**
+ * setShadow — CSS box-shadow / Canvas API 표준 이름 (color/offsetX/offsetY/blur) 그대로
+ * state.shadow 에 set. things-scene drawer 는 옛 이름 (left/top/blurSize) 도
+ * backwards-compat 으로 읽지만 (effect/shadow.ts:36-47), 새 모델은 canonical 만 사용.
+ *
+ * synthetic enabled=false → blur 0 + transparent 매핑 (drawer 가 안 그림).
+ * 모델에 enabled 필드는 없음.
+ */
+function buildSetShadowOps(input) {
+    if (!Array.isArray(input.refids) || input.refids.length === 0) {
+        return { ops: [], errors: ['refids must be a non-empty array'] };
+    }
+    const refids = input.refids.filter(n => typeof n === 'number' && Number.isFinite(n));
+    if (refids.length === 0)
+        return { ops: [], errors: ['No valid numeric refids'] };
+    const noOp = input.enabled === undefined &&
+        input.color === undefined &&
+        input.blur === undefined &&
+        input.offsetX === undefined &&
+        input.offsetY === undefined;
+    if (noOp)
+        return { ops: [], errors: ['No shadow changes specified'] };
+    if (input.enabled === false) {
+        // synthetic — false 면 blur 0 + transparent 으로 변환 (drawer 가 안 그림)
+        const patch = { shadow: { blur: 0, color: 'transparent' } };
+        return { ops: refids.map(refid => ({ op: 'modify', refid, patch })), errors: [] };
+    }
+    if (input.color !== undefined) {
+        const v = (0, color_utils_1.validateColor)(input.color);
+        if (!v.valid)
+            return { ops: [], errors: [v.error ?? 'Invalid shadow color'] };
+    }
+    if (input.blur !== undefined && (input.blur < 0 || !Number.isFinite(input.blur))) {
+        return { ops: [], errors: [`Invalid blur: ${input.blur}`] };
+    }
+    if (input.offsetX !== undefined && !Number.isFinite(input.offsetX)) {
+        return { ops: [], errors: [`Invalid offsetX: ${input.offsetX}`] };
+    }
+    if (input.offsetY !== undefined && !Number.isFinite(input.offsetY)) {
+        return { ops: [], errors: [`Invalid offsetY: ${input.offsetY}`] };
+    }
+    // CSS / Canvas 표준 canonical 이름 — rename 없음
+    const sh = {};
+    // validateColor 가 통과한 색만 도달 — normalizeColor 가 여기서 null 반환 안 함
+    if (input.color !== undefined)
+        sh.color = (0, color_utils_1.normalizeColor)(input.color);
+    if (input.blur !== undefined)
+        sh.blur = input.blur;
+    if (input.offsetX !== undefined)
+        sh.offsetX = input.offsetX;
+    if (input.offsetY !== undefined)
+        sh.offsetY = input.offsetY;
+    const patch = { shadow: sh };
+    return { ops: refids.map(refid => ({ op: 'modify', refid, patch })), errors: [] };
+}
+function buildSetOpacityOps(input) {
+    if (!Array.isArray(input.refids) || input.refids.length === 0) {
+        return { ops: [], errors: ['refids must be a non-empty array'] };
+    }
+    if (typeof input.alpha !== 'number' || input.alpha < 0 || input.alpha > 1) {
+        return { ops: [], errors: [`alpha must be 0..1: ${input.alpha}`] };
+    }
+    const refids = input.refids.filter(n => typeof n === 'number' && Number.isFinite(n));
+    if (refids.length === 0)
+        return { ops: [], errors: ['No valid numeric refids'] };
+    // canonical 이름 그대로
+    const patch = { alpha: input.alpha };
+    return { ops: refids.map(refid => ({ op: 'modify', refid, patch })), errors: [] };
+}
+function buildSetVisibleOps(input) {
+    if (!Array.isArray(input.refids) || input.refids.length === 0) {
+        return { ops: [], errors: ['refids must be a non-empty array'] };
+    }
+    if (typeof input.visible !== 'boolean') {
+        return { ops: [], errors: ['visible must be a boolean'] };
+    }
+    const refids = input.refids.filter(n => typeof n === 'number' && Number.isFinite(n));
+    if (refids.length === 0)
+        return { ops: [], errors: ['No valid numeric refids'] };
+    // hidden 은 visible 의 inverse
+    const patch = { hidden: !input.visible };
+    return { ops: refids.map(refid => ({ op: 'modify', refid, patch })), errors: [] };
+}
+//# sourceMappingURL=effect-tools.js.map

package/dist-server/service/styling/effect-tools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"effect-tools.js","sourceRoot":"","sources":["../../../server/service/styling/effect-tools.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * setShadow / setOpacity / setVisible — 효과 / 가시성 / 투명도.\n *\n * setShadow: state.shadow (color/blur/offsetX/offsetY)\n * setOpacity: state.alpha (컴포넌트 전체 알파, 0..1)\n * setVisible: state.hidden 토글 (true → 숨김)\n */\nimport type { BoardEditOp } from '../types'\nimport { normalizeColor, validateColor } from './color-utils'\n\nexport interface SetShadowInput {\n  refids: number[]\n  /** synthetic — false 면 blur=0 + color=transparent 매핑 (drawer 가 안 그림). 모델에 enabled 필드 없음. */\n  enabled?: boolean\n  /** state.shadow.color */\n  color?: string\n  /** Blur radius (CSS box-shadow 의 blur-radius, Canvas 의 shadowBlur). state.shadow.blur. */\n  blur?: number\n  /** Horizontal offset (CSS box-shadow 의 offset-x, Canvas 의 shadowOffsetX). state.shadow.offsetX. */\n  offsetX?: number\n  /** Vertical offset (CSS box-shadow 의 offset-y, Canvas 의 shadowOffsetY). state.shadow.offsetY. */\n  offsetY?: number\n}\n\nexport interface SetOpacityInput {\n  refids: number[]\n  /** state.alpha 의 canonical 이름. 0..1. */\n  alpha: number\n}\n\nexport interface SetVisibleInput {\n  refids: number[]\n  visible: boolean\n}\n\nexport interface OpsResult {\n  ops: BoardEditOp[]\n  errors: string[]\n}\n\n/**\n * setShadow — CSS box-shadow / Canvas API 표준 이름 (color/offsetX/offsetY/blur) 그대로\n * state.shadow 에 set. things-scene drawer 는 옛 이름 (left/top/blurSize) 도\n * backwards-compat 으로 읽지만 (effect/shadow.ts:36-47), 새 모델은 canonical 만 사용.\n *\n * synthetic enabled=false → blur 0 + transparent 매핑 (drawer 가 안 그림).\n * 모델에 enabled 필드는 없음.\n */\nexport function buildSetShadowOps(input: SetShadowInput): OpsResult {\n  if (!Array.isArray(input.refids) || input.refids.length === 0) {\n    return { ops: [], errors: ['refids must be a non-empty array'] }\n  }\n  const refids = input.refids.filter(n => typeof n === 'number' && Number.isFinite(n))\n  if (refids.length === 0) return { ops: [], errors: ['No valid numeric refids'] }\n\n  const noOp =\n    input.enabled === undefined &&\n    input.color === undefined &&\n    input.blur === undefined &&\n    input.offsetX === undefined &&\n    input.offsetY === undefined\n  if (noOp) return { ops: [], errors: ['No shadow changes specified'] }\n\n  if (input.enabled === false) {\n    // synthetic — false 면 blur 0 + transparent 으로 변환 (drawer 가 안 그림)\n    const patch = { shadow: { blur: 0, color: 'transparent' } }\n    return { ops: refids.map(refid => ({ op: 'modify', refid, patch })), errors: [] }\n  }\n\n  if (input.color !== undefined) {\n    const v = validateColor(input.color)\n    if (!v.valid) return { ops: [], errors: [v.error ?? 'Invalid shadow color'] }\n  }\n  if (input.blur !== undefined && (input.blur < 0 || !Number.isFinite(input.blur))) {\n    return { ops: [], errors: [`Invalid blur: ${input.blur}`] }\n  }\n  if (input.offsetX !== undefined && !Number.isFinite(input.offsetX)) {\n    return { ops: [], errors: [`Invalid offsetX: ${input.offsetX}`] }\n  }\n  if (input.offsetY !== undefined && !Number.isFinite(input.offsetY)) {\n    return { ops: [], errors: [`Invalid offsetY: ${input.offsetY}`] }\n  }\n\n  // CSS / Canvas 표준 canonical 이름 — rename 없음\n  const sh: Record<string, number | string> = {}\n  // validateColor 가 통과한 색만 도달 — normalizeColor 가 여기서 null 반환 안 함\n  if (input.color !== undefined) sh.color = normalizeColor(input.color)!\n  if (input.blur !== undefined) sh.blur = input.blur\n  if (input.offsetX !== undefined) sh.offsetX = input.offsetX\n  if (input.offsetY !== undefined) sh.offsetY = input.offsetY\n\n  const patch = { shadow: sh }\n  return { ops: refids.map(refid => ({ op: 'modify', refid, patch })), errors: [] }\n}\n\nexport function buildSetOpacityOps(input: SetOpacityInput): OpsResult {\n  if (!Array.isArray(input.refids) || input.refids.length === 0) {\n    return { ops: [], errors: ['refids must be a non-empty array'] }\n  }\n  if (typeof input.alpha !== 'number' || input.alpha < 0 || input.alpha > 1) {\n    return { ops: [], errors: [`alpha must be 0..1: ${input.alpha}`] }\n  }\n  const refids = input.refids.filter(n => typeof n === 'number' && Number.isFinite(n))\n  if (refids.length === 0) return { ops: [], errors: ['No valid numeric refids'] }\n\n  // canonical 이름 그대로\n  const patch = { alpha: input.alpha }\n  return { ops: refids.map(refid => ({ op: 'modify', refid, patch })), errors: [] }\n}\n\nexport function buildSetVisibleOps(input: SetVisibleInput): OpsResult {\n  if (!Array.isArray(input.refids) || input.refids.length === 0) {\n    return { ops: [], errors: ['refids must be a non-empty array'] }\n  }\n  if (typeof input.visible !== 'boolean') {\n    return { ops: [], errors: ['visible must be a boolean'] }\n  }\n  const refids = input.refids.filter(n => typeof n === 'number' && Number.isFinite(n))\n  if (refids.length === 0) return { ops: [], errors: ['No valid numeric refids'] }\n\n  // hidden 은 visible 의 inverse\n  const patch = { hidden: !input.visible }\n  return { ops: refids.map(refid => ({ op: 'modify', refid, patch })), errors: [] }\n}\n"]}

package/dist-server/service/styling/fill-tools.d.ts

@@ -0,0 +1,60 @@
+/**
+ * setFill — 컴포넌트 배경 (state.fillStyle) 변경.
+ *
+ * 4 modes 지원: none / solid / gradient / pattern.
+ *
+ * 출력 정책 — refid 당 1 op:
+ *   - solid: fillStyle = '#rrggbb' or 'rgba(...)' (string)
+ *   - gradient: fillStyle = { type:'gradient', gradientType, colorStops, rotation, ... }
+ *   - pattern: fillStyle = { type:'pattern', image, ... }
+ *   - none: fillStyle = { type:'none' }
+ *   - mode 미지정 + color 만: 부분 update (string 또는 object 병합)
+ *
+ * things-scene 실제 데이터 형식 (drawer/fill.ts 검증):
+ *   - gradient: { type, gradientType, colorStops: [{position, color}], rotation (라디안) }
+ *   - rotation 은 라디안 — `Math.cos(fRotation)` 직접 사용
+ *
+ * 이전 2-op (null + new) 방식은 중간 null 상태가 onchange / 3D texture
+ * 크래시 유발 → 제거. 정확한 colorStops 출력으로 stale 필드 문제는 자체 해결.
+ */
+import type { BoardEditOp } from '../types';
+export interface SetFillInput {
+    refids: number[];
+    mode?: 'none' | 'solid' | 'gradient' | 'pattern';
+    color?: string;
+    gradientType?: 'linear' | 'radial';
+    /** colorStops — things-scene 의 canonical 필드명 그대로. position 0..1, color hex/rgb/named. */
+    colorStops?: Array<{
+        color: string;
+        position: number;
+    }>;
+    /** 회전 — 입력은 degrees (사용자/AI 친화), 내부 변환 후 things-scene 의 라디안으로 저장. */
+    rotation?: number;
+    image?: string;
+    /** pattern: 영역에 맞춰 비율 조정 (true) vs 원본 크기 사용 (false). */
+    fitPattern?: boolean;
+    /** pattern: 반복 안 함 (true) — 1회만 그림. */
+    noRepeat?: boolean;
+    /** pattern: 정렬. fitPattern=false 일 때만 적용. */
+    align?: 'center' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' | 'left' | 'right' | 'top' | 'bottom';
+    /** pattern: 영역 내 오프셋 (fitPattern=false 일 때). */
+    offsetX?: number;
+    offsetY?: number;
+    /** pattern: 패턴 크기 (기본은 이미지 원본 크기). */
+    patternWidth?: number;
+    patternHeight?: number;
+    opacity?: number;
+}
+export interface SetFillResult {
+    ops: BoardEditOp[];
+    errors: string[];
+}
+/**
+ * setFill 입력 검증 + BoardEditOp[] 생성.
+ *
+ * 기본 정책:
+ *   - refids 비어있거나 mode 도 색도 없으면 에러
+ *   - 색상 입력은 normalizeColor 통과해야 적용
+ *   - mode='gradient' 인데 stops 없으면 자동 생성 (color → 어두운 변형)
+ */
+export declare function buildSetFillOps(input: SetFillInput): SetFillResult;