code.js

"use strict";
(() => {
  var __defProp = Object.defineProperty;
  var __defProps = Object.defineProperties;
  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
  var __hasOwnProp = Object.prototype.hasOwnProperty;
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
  var __spreadValues = (a, b) => {
    for (var prop in b || (b = {}))
      if (__hasOwnProp.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    if (__getOwnPropSymbols)
      for (var prop of __getOwnPropSymbols(b)) {
        if (__propIsEnum.call(b, prop))
          __defNormalProp(a, prop, b[prop]);
      }
    return a;
  };
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));

  // widget-src/code.tsx
  var { widget } = figma;
  var { AutoLayout, Text, Input, SVG, useSyncedState, useEffect } = widget;
  var DEFAULT_COLUMNS = [
    { id: "col-epic", name: "Epic", type: "text", options: [], width: 160 },
    { id: "col-item", name: "Item", type: "text", options: [], width: 160 },
    { id: "col-desc", name: "Description", type: "text", options: [], width: 380 },
    {
      id: "col-phase",
      name: "Phase",
      type: "dropdown",
      options: ["Beta", "Version 1", "Version 2"],
      width: 110
    },
    {
      id: "col-priority",
      name: "Priority",
      type: "dropdown",
      options: ["Critical", "High", "Medium", "Low"],
      width: 110
    },
    {
      id: "col-status",
      name: "Status",
      type: "dropdown",
      options: ["Not Started", "In Concept", "In Progress", "In Review", "Complete"],
      width: 130
    }
  ];
  var DEFAULT_ROWS = [
    { id: "row-def-1", cells: {} },
    { id: "row-def-2", cells: {} },
    { id: "row-def-3", cells: {} }
  ];
  var CHIP_PALETTE = [
    { bg: "#FFE566", text: "#1E293B" },
    // yellow
    { bg: "#FFB347", text: "#1E293B" },
    // orange
    { bg: "#FF8888", text: "#1E293B" },
    // red
    { bg: "#FFB3D9", text: "#1E293B" },
    // pink
    { bg: "#C8A8F5", text: "#1E293B" },
    // purple
    { bg: "#93C5FD", text: "#1E293B" },
    // blue
    { bg: "#67E8F9", text: "#1E293B" },
    // cyan
    { bg: "#86EFAC", text: "#1E293B" },
    // green
    { bg: "#D9F99D", text: "#1E293B" },
    // lime
    { bg: "#E2E8F0", text: "#1E293B" }
    // gray
  ];
  var CHIP_OVERRIDES = {
    "Critical": { bg: "#FFEDD5", text: "#9A3412" }
    // orange
  };
  function relativeLuminance(hex) {
    const r = parseInt(hex.slice(1, 3), 16) / 255;
    const g = parseInt(hex.slice(3, 5), 16) / 255;
    const b = parseInt(hex.slice(5, 7), 16) / 255;
    const toLinear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
    return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
  }
  function textColorFor(bg) {
    return relativeLuminance(bg) > 0.35 ? "#1E293B" : "#FFFFFF";
  }
  function chipColor(col, val) {
    var _a;
    const i = col.options.indexOf(val);
    const custom = i !== -1 ? (_a = col.optionColors) == null ? void 0 : _a[i] : void 0;
    if (custom)
      return { bg: custom, text: textColorFor(custom) };
    if (CHIP_OVERRIDES[val])
      return CHIP_OVERRIDES[val];
    return i === -1 ? CHIP_PALETTE[0] : CHIP_PALETTE[i % CHIP_PALETTE.length];
  }
  function uid() {
    return "id" + Math.random().toString(36).substr(2, 8);
  }
  var ICON_SETTINGS = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#c)"><path d="M5.99951 7.22675C6.67719 7.22675 7.22654 6.67737 7.22654 5.9997C7.22654 5.32202 6.67719 4.77267 5.99951 4.77267C5.32184 4.77267 4.77246 5.32202 4.77246 5.9997C4.77246 6.67737 5.32181 7.22675 5.99951 7.22675Z" fill="#CBD5E1"/><path d="M11.481 7.12488L11.469 7.11515L10.6621 6.4824C10.611 6.442 10.5703 6.39003 10.5431 6.33078C10.516 6.27155 10.5034 6.20673 10.5062 6.14165V5.8461C10.5036 5.78143 10.5164 5.71708 10.5436 5.65833C10.5708 5.59955 10.6115 5.54808 10.6624 5.50813L11.469 4.87515L11.481 4.8654C11.6054 4.7618 11.6889 4.6173 11.7165 4.45778C11.7441 4.29825 11.7141 4.1341 11.6318 3.99468L10.5399 2.1054C10.5387 2.1036 10.5376 2.10175 10.5366 2.09978C10.4539 1.96228 10.3256 1.8581 10.1741 1.80533C10.0225 1.75255 9.85723 1.75453 9.70701 1.8109L9.69806 1.81423L8.74958 2.1959C8.68973 2.22013 8.62496 2.22975 8.56066 2.224C8.49633 2.21828 8.43433 2.19733 8.37966 2.16293C8.29578 2.11008 8.21061 2.06015 8.12398 2.0131C8.06791 1.98268 8.01968 1.93948 7.98331 1.88698C7.94693 1.83448 7.92343 1.77418 7.91463 1.71093L7.77173 0.698803L7.76863 0.680403C7.73756 0.523628 7.65343 0.382353 7.53043 0.280303C7.40743 0.178253 7.25306 0.121653 7.09321 0.120003H4.90688C4.74481 0.120528 4.58811 0.178228 4.46446 0.282928C4.34073 0.387653 4.25796 0.532653 4.23066 0.692403L4.22838 0.706728L4.08596 1.7209C4.07726 1.78398 4.05393 1.84413 4.01783 1.8966C3.98173 1.94905 3.93391 1.99238 3.87811 2.02308C3.79068 2.07013 3.70531 2.11998 3.62248 2.17188C3.56796 2.20608 3.50608 2.22685 3.44193 2.2325C3.37783 2.23815 3.31328 2.2285 3.25358 2.20433L2.30433 1.82085L2.29541 1.81728C2.14493 1.76085 1.97946 1.75895 1.82773 1.81193C1.67603 1.8649 1.54768 1.96938 1.46503 2.1072L1.46171 2.11283L0.368282 4.00335C0.285882 4.14293 0.255807 4.30725 0.283432 4.467C0.311057 4.6267 0.394607 4.77135 0.519132 4.87515L0.531132 4.88485L1.33798 5.5176C1.38908 5.55803 1.42986 5.61 1.45696 5.66923C1.48408 5.72845 1.49673 5.7933 1.49393 5.85838V6.15393C1.49648 6.2186 1.48366 6.28293 1.45651 6.3417C1.42936 6.40048 1.38863 6.45193 1.33773 6.49188L0.531132 7.1249L0.519132 7.1346C0.394732 7.2382 0.311257 7.3827 0.283632 7.54223C0.255982 7.70175 0.286007 7.86593 0.368282 8.00535L1.46018 9.89463C1.46143 9.89643 1.46256 9.89828 1.46351 9.90023C1.54623 10.0377 1.67453 10.1419 1.82606 10.1947C1.97761 10.2475 2.14286 10.2455 2.29308 10.1891L2.30203 10.1858L3.24973 9.8041C3.30963 9.7799 3.37436 9.77028 3.43868 9.77603C3.50303 9.78175 3.56503 9.8027 3.61966 9.8371C3.70351 9.8901 3.78876 9.94005 3.87531 9.9869C3.93146 10.0174 3.97963 10.0606 4.01603 10.1131C4.05241 10.1655 4.07593 10.2258 4.08468 10.2891L4.22683 11.3012L4.22991 11.3196C4.26111 11.4767 4.34543 11.6181 4.46876 11.7202C4.59208 11.8223 4.74681 11.8787 4.90688 11.88H7.09321C7.25531 11.8795 7.41198 11.8218 7.53568 11.7171C7.65938 11.6124 7.74216 11.4674 7.76941 11.3076L7.77171 11.2933L7.91413 10.2791C7.92301 10.2159 7.94651 10.1557 7.98283 10.1032C8.01916 10.0508 8.06723 10.0075 8.12323 9.97695C8.21066 9.9299 8.29606 9.88005 8.37888 9.82813C8.43346 9.79393 8.49531 9.77315 8.55946 9.76755C8.62358 9.76188 8.68813 9.77153 8.74778 9.79568L9.69703 10.1779L9.70598 10.1815C9.85643 10.238 10.022 10.2399 10.1737 10.187C10.3254 10.134 10.4538 10.0295 10.5363 9.89153C10.5374 9.88963 10.5385 9.88775 10.5397 9.88593L11.6316 7.9969C11.7141 7.85733 11.7443 7.69295 11.7167 7.53318C11.6892 7.3734 11.6056 7.22865 11.481 7.12488ZM8.04298 6.09613C8.02436 6.49203 7.89111 6.87398 7.65943 7.19558C7.42776 7.5171 7.10766 7.76448 6.73801 7.90748C6.36838 8.05048 5.96516 8.08305 5.57736 8.00113C5.18961 7.91923 4.83396 7.72643 4.55373 7.44615C4.27351 7.16588 4.08073 6.81025 3.99886 6.42245C3.91703 6.03468 3.94961 5.63143 4.09268 5.26183C4.23573 4.89223 4.48311 4.57215 4.80471 4.3405C5.12628 4.10885 5.50828 3.97565 5.90416 3.95708C6.18841 3.94458 6.47213 3.99135 6.73728 4.09443C7.00248 4.19748 7.24328 4.3546 7.44446 4.55583C7.64558 4.75698 7.80271 4.99783 7.90576 5.263C8.00878 5.52818 8.05551 5.8119 8.04298 6.09613Z" fill="#CBD5E1"/></g><defs><clipPath id="c"><rect width="12" height="12" fill="white"/></clipPath></defs></svg>`;
  var ICON_ARROW_UP = `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.03345 1.5C4.26678 1.5 4.46678 1.6 4.60011 1.76667L7.83345 5.43333C8.06678 5.66667 8.03345 6.06667 7.80011 6.3C7.56678 6.53333 7.16678 6.5 6.93345 6.26667L6.90011 6.23333L4.06678 3.03333C4.03345 3 4.00011 3 3.93345 3.03333L1.10011 6.23333C0.86678 6.5 0.500113 6.53333 0.233446 6.3C-0.0332203 6.06667 -0.0665536 5.7 0.16678 5.43333L0.200113 5.4L3.43345 1.73333C3.60011 1.6 3.80011 1.5 4.03345 1.5Z" fill="#64748B"/></svg>`;
  var ICON_ARROW_DOWN = `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.96948 6.45923C3.73615 6.45923 3.53615 6.35923 3.40282 6.19256L0.169483 2.5259C-0.0638507 2.29256 -0.0305173 1.89256 0.202816 1.65923C0.436149 1.4259 0.836149 1.45923 1.06948 1.69256L1.10282 1.7259L3.93615 4.9259C3.96948 4.95923 4.00282 4.95923 4.06948 4.9259L6.90282 1.72589C7.13615 1.45923 7.50282 1.4259 7.76948 1.65923C8.03615 1.89256 8.06948 2.25923 7.83615 2.5259L7.80282 2.55923L4.56948 6.2259C4.40282 6.35923 4.20282 6.45923 3.96948 6.45923Z" fill="#64748B"/></svg>`;
  var ICON_CLOSE = `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#d)"><path d="M4.97808 4.00004L7.71546 1.2626C7.84536 1.13294 7.91845 0.956935 7.9186 0.773385C7.9188 0.589785 7.84601 0.413669 7.71633 0.283785C7.58663 0.153868 7.41063 0.0807685 7.22706 0.0806185C7.04351 0.0804685 6.86739 0.153219 6.73749 0.282918L4.00008 3.02032L1.26268 0.282918C1.13276 0.153002 0.956545 0.0800018 0.772845 0.0800018C0.589061 0.0800018 0.412895 0.153002 0.282961 0.282918C0.153045 0.412819 0.0800781 0.589019 0.0800781 0.772769C0.0800781 0.956502 0.153045 1.13269 0.282961 1.2626L3.0204 4.00004L0.282961 6.73742C0.153045 6.86732 0.0800781 7.04352 0.0800781 7.22727C0.0800781 7.411 0.153045 7.58722 0.282961 7.71714C0.412895 7.84704 0.589061 7.92 0.772845 7.92C0.956545 7.92 1.13276 7.84704 1.26268 7.71714L4.00008 4.97972L6.73749 7.71714C6.86739 7.84704 7.04361 7.92 7.22735 7.92C7.41106 7.92 7.58726 7.84704 7.71718 7.71714C7.84708 7.58722 7.92008 7.411 7.92008 7.22727C7.92008 7.04352 7.84708 6.86732 7.71718 6.73742L4.97808 4.00004Z" fill="#EF4444"/></g><defs><clipPath id="d"><rect width="8" height="8" fill="white"/></clipPath></defs></svg>`;
  function Widget() {
    const [columns, setColumns] = useSyncedState("columns", DEFAULT_COLUMNS);
    const [rows, setRows] = useSyncedState("rows", DEFAULT_ROWS);
    const [title, setTitle] = useSyncedState("title", "Status Table");
    const addRow = () => setRows([...rows, { id: uid(), cells: {} }]);
    const deleteRow = (id) => setRows(rows.filter((r) => r.id !== id));
    const moveRow = (i, dir) => {
      const j = i + dir;
      if (j < 0 || j >= rows.length)
        return;
      const r = [...rows];
      [r[i], r[j]] = [r[j], r[i]];
      setRows(r);
    };
    const updateCell = (rowId, colId, val) => setRows(rows.map((r) => r.id === rowId ? __spreadProps(__spreadValues({}, r), { cells: __spreadProps(__spreadValues({}, r.cells), { [colId]: val }) }) : r));
    const cycleOption = (rowId, col) => {
      var _a, _b;
      const cur = (_b = (_a = rows.find((r) => r.id === rowId)) == null ? void 0 : _a.cells[col.id]) != null ? _b : "";
      const i = col.options.indexOf(cur);
      const next = (i + 1) % (col.options.length + 1);
      updateCell(rowId, col.id, next === col.options.length ? "" : col.options[next]);
    };
    const openManageUI = () => new Promise((resolve) => {
      figma.showUI(`<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
      font-size: 13px;
      color: #1e293b;
      background: #f8fafc;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* \u2500\u2500 Header \u2500\u2500 */
    .header {
      background: #1e293b;
      color: white;
      padding: 16px 18px 14px;
      flex-shrink: 0;
    }
    .header h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
    .header p { font-size: 12px; color: #94a3b8; margin-top: 3px; }

    /* \u2500\u2500 Column list (scrollable) \u2500\u2500 */
    .columns-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* \u2500\u2500 Column card \u2500\u2500 */
    .col-card {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0; /* prevent cards from collapsing in flex scroll container */
    }

    .col-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
    }

    .reorder-btns {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex-shrink: 0;
    }

    .reorder-btn {
      width: 20px;
      height: 16px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 3px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      color: #64748b;
      transition: background 0.1s;
    }
    .reorder-btn:hover { background: #e2e8f0; }

    .col-name-input {
      flex: 1;
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      border: 1px solid transparent;
      border-radius: 5px;
      padding: 5px 8px;
      background: transparent;
      outline: none;
      transition: border-color 0.15s, background 0.15s;
    }
    .col-name-input:hover { background: #f8fafc; border-color: #e2e8f0; }
    .col-name-input:focus { background: #fff; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }

    .col-type-select {
      font-size: 12px;
      color: #475569;
      border: 1px solid #e2e8f0;
      border-radius: 5px;
      padding: 5px 8px;
      background: #f8fafc;
      outline: none;
      cursor: pointer;
      transition: border-color 0.15s;
    }
    .col-type-select:focus { border-color: #3b82f6; }

    .col-width-input {
      width: 64px;
      font-size: 12px;
      color: #475569;
      border: 1px solid #e2e8f0;
      border-radius: 5px;
      padding: 5px 6px;
      background: #f8fafc;
      outline: none;
      text-align: center;
      transition: border-color 0.15s;
    }
    .col-width-input:focus { border-color: #3b82f6; }
    .width-label { font-size: 11px; color: #94a3b8; flex-shrink: 0; }

    .col-delete-btn {
      width: 28px;
      height: 28px;
      border: none;
      background: transparent;
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #cbd5e1;
      transition: background 0.1s, color 0.1s;
      flex-shrink: 0;
    }
    .col-delete-btn:hover { background: #fef2f2; color: #ef4444; }

    /* \u2500\u2500 Dropdown options section \u2500\u2500 */
    .options-section {
      border-top: 1px solid #f1f5f9;
      padding: 10px 12px 12px;
      background: #fafafa;
    }

    .options-label {
      font-size: 11px;
      font-weight: 600;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }

    .options-list {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 8px;
    }

    .option-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .option-swatch {
      width: 22px;
      height: 22px;
      border-radius: 5px;
      flex-shrink: 0;
      cursor: pointer;
      padding: 0;
      border-style: solid;
    }
    .option-swatch:hover {
      outline: 2px solid #3b82f6;
      outline-offset: 1px;
    }

    .option-input {
      flex: 1;
      font-size: 12px;
      color: #1e293b;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 5px 8px;
      background: white;
      outline: none;
      transition: border-color 0.15s;
    }
    .option-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.1); }

    .option-move-up,
    .option-move-down {
      width: 22px;
      height: 22px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 4px;
      cursor: pointer;
      font-size: 8px;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .option-move-up:hover, .option-move-down:hover { background: #e2e8f0; }

    .option-del-btn {
      width: 22px;
      height: 22px;
      border: none;
      background: transparent;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      color: #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.1s, color 0.1s;
    }
    .option-del-btn:hover { background: #fef2f2; color: #ef4444; }

    .add-option-btn {
      font-size: 12px;
      color: #3b82f6;
      font-weight: 500;
      background: none;
      border: 1px dashed #bfdbfe;
      border-radius: 5px;
      padding: 5px 10px;
      cursor: pointer;
      width: 100%;
      text-align: left;
      transition: background 0.1s, border-color 0.1s;
    }
    .add-option-btn:hover { background: #eff6ff; border-color: #93c5fd; }

    /* \u2500\u2500 Add column button \u2500\u2500 */
    .add-col-wrap {
      padding: 0 14px 10px;
      flex-shrink: 0;
    }
    .add-col-btn {
      width: 100%;
      font-size: 13px;
      color: #3b82f6;
      font-weight: 600;
      background: white;
      border: 1px dashed #bfdbfe;
      border-radius: 8px;
      padding: 10px;
      cursor: pointer;
      text-align: center;
      transition: background 0.1s, border-color 0.1s;
    }
    .add-col-btn:hover { background: #eff6ff; border-color: #93c5fd; }

    /* \u2500\u2500 Footer \u2500\u2500 */
    .footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding: 12px 14px;
      border-top: 1px solid #e2e8f0;
      background: white;
      flex-shrink: 0;
    }

    .btn-cancel {
      font-size: 13px;
      font-weight: 500;
      color: #64748b;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 8px 16px;
      cursor: pointer;
      transition: background 0.1s;
    }
    .btn-cancel:hover { background: #f8fafc; }

    .btn-save {
      font-size: 13px;
      font-weight: 600;
      color: white;
      background: #3b82f6;
      border: none;
      border-radius: 6px;
      padding: 8px 20px;
      cursor: pointer;
      transition: background 0.1s;
    }
    .btn-save:hover { background: #2563eb; }

    /* \u2500\u2500 Chip palette preview dots \u2500\u2500 */
    .chip-dots {
      display: flex;
      gap: 3px;
      margin-top: 2px;
    }
  </style>
</head>
<body>

  <div class="header">
    <h2>Manage Columns</h2>
    <p>Edit names, types, widths, and dropdown options. Click Save to apply.</p>
  </div>

  <div class="columns-scroll" id="columns-list"></div>

  <div class="add-col-wrap">
    <button class="add-col-btn" onclick="addColumn()">+ Add Column</button>
  </div>

  <div class="footer">
    <button class="btn-cancel" onclick="cancel()">Cancel</button>
    <button class="btn-save" onclick="save()">Save Changes</button>
  </div>

  <script>
    // \u2500\u2500 Chip palette (must match code.tsx) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
    const CHIP_PALETTE = [
      { bg: '#FFE566', text: '#1E293B' }, // yellow
      { bg: '#FFB347', text: '#1E293B' }, // orange
      { bg: '#FF8888', text: '#1E293B' }, // red
      { bg: '#FFB3D9', text: '#1E293B' }, // pink
      { bg: '#C8A8F5', text: '#1E293B' }, // purple
      { bg: '#93C5FD', text: '#1E293B' }, // blue
      { bg: '#67E8F9', text: '#1E293B' }, // cyan
      { bg: '#86EFAC', text: '#1E293B' }, // green
      { bg: '#D9F99D', text: '#1E293B' }, // lime
      { bg: '#E2E8F0', text: '#1E293B' }, // gray
    ]

    const CHIP_OVERRIDES = {
      'Critical': '#FFEDD5',
    }

    const FIGJAM_PALETTE = [
      '#FFE566', '#FFB347', '#FF8888', '#FFB3D9', '#C8A8F5',
      '#93C5FD', '#67E8F9', '#86EFAC', '#D9F99D', '#E2E8F0',
    ]

    let columns = []

    let openPickerKey = null // \`\${colId}-\${oi}\` when a picker is open, null otherwise

    // \u2500\u2500 Receive initial data \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
    window.onmessage = (event) => {
      const msg = event.data.pluginMessage
      if (!msg) return
      if (msg.type === 'init') {
        columns = JSON.parse(JSON.stringify(msg.columns))
        render()
      }
    }

    // \u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
    function uid() {
      return 'c' + Math.random().toString(36).substr(2, 8)
    }

    function defaultWidthForType(type) {
      return { 'text': 160, 'dropdown': 130, 'checkbox': 80 }[type] || 130
    }

    function relativeLuminance(hex) {
      const r = parseInt(hex.slice(1, 3), 16) / 255
      const g = parseInt(hex.slice(3, 5), 16) / 255
      const b = parseInt(hex.slice(5, 7), 16) / 255
      const toLinear = c => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
      return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b)
    }

    function textColorForHex(hex) {
      return relativeLuminance(hex) > 0.35 ? '#1E293B' : '#FFFFFF'
    }

    function togglePicker(colId, oi) {
      const key = colId + '-' + oi
      openPickerKey = openPickerKey === key ? null : key
      render()
    }

    function setOptionColor(colId, oi, hex) {
      const col = columns.find(c => c.id === colId)
      if (!col) return
      col.optionColors = col.optionColors || []
      while (col.optionColors.length <= oi) col.optionColors.push('')
      col.optionColors[oi] = hex
    }

    function buildPicker(col, oi, optLabel, currentColor) {
      const wrap = document.createElement('div')
      wrap.style.cssText = 'margin-left:28px;margin-top:4px;'

      const panel = document.createElement('div')
      panel.style.cssText = 'background:white;border:1px solid #e2e8f0;border-radius:7px;padding:10px;box-shadow:0 4px 12px rgba(0,0,0,0.08);display:inline-flex;flex-direction:column;gap:8px;width:fit-content;'

      const paletteLabel = document.createElement('div')
      paletteLabel.style.cssText = 'font-size:11px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.5px;'
      paletteLabel.textContent = 'Palette'
      panel.appendChild(paletteLabel)

      const grid = document.createElement('div')
      grid.style.cssText = 'display:grid;grid-template-columns:repeat(5,26px);grid-template-rows:repeat(2,26px);gap:5px;'
      FIGJAM_PALETTE.forEach(hex => {
        const btn = document.createElement('button')
        const selected = currentColor === hex
        btn.style.cssText = 'width:26px;height:26px;border-radius:5px;cursor:pointer;padding:0;background:' + hex + ';border:' + (selected ? '2px solid #3b82f6' : '1px solid rgba(0,0,0,0.1)') + ';'
        btn.title = hex
        btn.onclick = () => { setOptionColor(col.id, oi, hex); openPickerKey = null; render() }
        grid.appendChild(btn)
      })
      panel.appendChild(grid)

      const hexLabel = document.createElement('div')
      hexLabel.style.cssText = 'font-size:11px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.5px;'
      hexLabel.textContent = 'Custom hex'
      panel.appendChild(hexLabel)

      const hexRow = document.createElement('div')
      hexRow.style.cssText = 'display:flex;align-items:center;gap:6px;'

      const previewSwatch = document.createElement('div')
      previewSwatch.style.cssText = 'width:26px;height:26px;border-radius:5px;border:1px solid rgba(0,0,0,0.1);flex-shrink:0;background:' + currentColor + ';'

      const hexInput = document.createElement('input')
      hexInput.style.cssText = 'font-size:12px;font-family:monospace;border:1px solid #e2e8f0;border-radius:4px;padding:4px 8px;width:90px;color:#1e293b;outline:none;'
      hexInput.value = currentColor
      hexInput.placeholder = '#RRGGBB'

      const previewChipLabel = document.createElement('span')
      previewChipLabel.style.cssText = 'font-size:11px;color:#94a3b8;'
      previewChipLabel.textContent = 'Preview:'

      const chipPreview = document.createElement('span')
      chipPreview.style.cssText = 'font-size:11px;font-weight:500;padding:3px 8px;border-radius:4px;background:' + currentColor + ';color:' + textColorForHex(currentColor) + ';'
      chipPreview.textContent = optLabel

      hexInput.addEventListener('input', function () {
        const v = this.value.trim()
        if (/^#[0-9a-fA-F]{6}$/.test(v)) {
          previewSwatch.style.background = v
          chipPreview.style.background = v
          chipPreview.style.color = textColorForHex(v)
        }
      })
      hexInput.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') {
          const v = this.value.trim()
          if (/^#[0-9a-fA-F]{6}$/.test(v)) {
            this._committed = true
            setOptionColor(col.id, oi, v)
            openPickerKey = null
            render()
          }
        }
      })
      hexInput.addEventListener('blur', function () {
        if (this._committed) return
        const v = this.value.trim()
        if (/^#[0-9a-fA-F]{6}$/.test(v)) {
          setOptionColor(col.id, oi, v)
          openPickerKey = null
          render()
        }
      })

      hexRow.append(previewSwatch, hexInput, previewChipLabel, chipPreview)
      panel.appendChild(hexRow)
      wrap.appendChild(panel)
      return wrap
    }

    // \u2500\u2500 Column mutations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
    function addColumn() {
      columns.push({
        id: uid(), name: 'New Column', type: 'text-small', options: [], optionColors: [], width: 160,
      })
      render()
      // Scroll to bottom
      setTimeout(() => {
        const list = document.getElementById('columns-list')
        list.scrollTop = list.scrollHeight
      }, 50)
    }

    function deleteColumn(id) {
      if (columns.length === 1) return
      columns = columns.filter(c => c.id !== id)
      render()
    }

    function moveColumn(id, dir) {
      const i = columns.findIndex(c => c.id === id)
      const j = i + dir
      if (j < 0 || j >= columns.length) return;
      [columns[i], columns[j]] = [columns[j], columns[i]]
      render()
    }

    function updateColumnField(id, field, value) {
      const col = columns.find(c => c.id === id)
      if (!col) return
      col[field] = value
      if (field === 'type' && value !== 'dropdown') {
        col.options = []
        col.optionColors = []
      }
      if (field === 'type') col.width = defaultWidthForType(value)
      render()
    }

    // \u2500\u2500 Option mutations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
    function addOption(colId) {
      const col = columns.find(c => c.id === colId)
      if (!col) return
      col.options.push('Option ' + (col.options.length + 1))
      col.optionColors = col.optionColors || []
      col.optionColors.push('')
      openPickerKey = null
      render()
    }

    function deleteOption(colId, idx) {
      const col = columns.find(c => c.id === colId)
      if (!col) return
      col.options.splice(idx, 1)
      if (col.optionColors) {
        while (col.optionColors.length < col.options.length + 1) col.optionColors.push('')
        col.optionColors.splice(idx, 1)
      }
      openPickerKey = null
      render()
    }

    function moveOption(colId, idx, dir) {
      const col = columns.find(c => c.id === colId)
      if (!col) return
      const j = idx + dir
      if (j < 0 || j >= col.options.length) return
      ;[col.options[idx], col.options[j]] = [col.options[j], col.options[idx]]
      if (col.optionColors) {
        while (col.optionColors.length < col.options.length) col.optionColors.push('')
        ;[col.optionColors[idx], col.optionColors[j]] = [col.optionColors[j], col.optionColors[idx]]
      }
      openPickerKey = null
      render()
    }

    function updateOption(colId, idx, value) {
      const col = columns.find(c => c.id === colId)
      if (!col) return
      col.options[idx] = value
    }

    function updateColumnName(id, value) {
      const col = columns.find(c => c.id === id)
      if (!col) return
      col.name = value
    }

    function updateColumnWidth(id, value) {
      const col = columns.find(c => c.id === id)
      if (!col) return
      const w = parseInt(value, 10)
      if (!isNaN(w) && w >= 40 && w <= 1200) col.width = w
    }

    // \u2500\u2500 Save / cancel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
    function save() {
      parent.postMessage({ pluginMessage: { type: 'save', columns } }, '*')
    }

    function cancel() {
      parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
    }

    // \u2500\u2500 Render \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
    function render() {
      const list = document.getElementById('columns-list')
      const scrollTop = list.scrollTop

      list.innerHTML = ''

      columns.forEach((col, ci) => {
        const card = document.createElement('div')
        card.className = 'col-card'

        // \u2500\u2500 Card header row \u2500\u2500
        const header = document.createElement('div')
        header.className = 'col-header'

        // Reorder buttons
        const reorder = document.createElement('div')
        reorder.className = 'reorder-btns'

        const upBtn = document.createElement('button')
        upBtn.className = 'reorder-btn'
        upBtn.textContent = '\u25B2'
        upBtn.title = 'Move up'
        upBtn.disabled = ci === 0
        upBtn.onclick = () => moveColumn(col.id, -1)

        const downBtn = document.createElement('button')
        downBtn.className = 'reorder-btn'
        downBtn.textContent = '\u25BC'
        downBtn.title = 'Move down'
        downBtn.disabled = ci === columns.length - 1
        downBtn.onclick = () => moveColumn(col.id, 1)

        reorder.append(upBtn, downBtn)

        // Name input
        const nameInput = document.createElement('input')
        nameInput.className = 'col-name-input'
        nameInput.value = col.name
        nameInput.placeholder = 'Column name'
        nameInput.addEventListener('input', function() { updateColumnName(col.id, this.value) })
        nameInput.addEventListener('change', function() { updateColumnName(col.id, this.value) })

        // Type selector
        const typeSelect = document.createElement('select')
        typeSelect.className = 'col-type-select'
        const types = [
          { value: 'text',     label: 'Text' },
          { value: 'dropdown', label: 'Dropdown' },
          { value: 'checkbox', label: 'Checkbox' },
        ]
        types.forEach(t => {
          const opt = document.createElement('option')
          opt.value = t.value
          opt.textContent = t.label
          if (t.value === col.type) opt.selected = true
          typeSelect.appendChild(opt)
        })
        typeSelect.onchange = e => updateColumnField(col.id, 'type', e.target.value)

        // Width input
        const widthLabel = document.createElement('span')
        widthLabel.className = 'width-label'
        widthLabel.textContent = 'W:'

        const widthInput = document.createElement('input')
        widthInput.className = 'col-width-input'
        widthInput.type = 'number'
        widthInput.min = '40'
        widthInput.max = '1200'
        widthInput.value = col.width
        widthInput.oninput = e => updateColumnWidth(col.id, e.target.value)

        // Delete button
        const delBtn = document.createElement('button')
        delBtn.className = 'col-delete-btn'
        delBtn.textContent = '\xD7'
        delBtn.title = 'Delete column'
        delBtn.disabled = columns.length === 1
        delBtn.onclick = () => deleteColumn(col.id)

        header.append(reorder, nameInput, typeSelect, widthLabel, widthInput, delBtn)
        card.appendChild(header)

        // \u2500\u2500 Dropdown options section \u2500\u2500
        if (col.type === 'dropdown') {
          const section = document.createElement('div')
          section.className = 'options-section'

          const label = document.createElement('div')
          label.className = 'options-label'
          label.textContent = 'Dropdown Options'
          section.appendChild(label)

          const optList = document.createElement('div')
          optList.className = 'options-list'

          col.options.forEach((opt, oi) => {
            const key = col.id + '-' + oi
            const currentColor = (col.optionColors && col.optionColors[oi]) || CHIP_OVERRIDES[opt] || CHIP_PALETTE[oi % CHIP_PALETTE.length].bg
            const isOpen = openPickerKey === key

            const container = document.createElement('div')

            const row = document.createElement('div')
            row.className = 'option-row'

            const swatch = document.createElement('button')
            swatch.className = 'option-swatch'
            swatch.style.background = currentColor
            swatch.style.borderColor = isOpen ? '#3b82f6' : 'rgba(0,0,0,0.1)'
            swatch.style.borderWidth = isOpen ? '2px' : '1px'
            swatch.title = 'Change color'
            swatch.onclick = () => togglePicker(col.id, oi)

            const optInput = document.createElement('input')
            optInput.className = 'option-input'
            optInput.type = 'text'
            optInput.value = opt
            optInput.placeholder = 'Option label'
            optInput.addEventListener('input', function () { updateOption(col.id, oi, this.value) })
            optInput.addEventListener('change', function () { updateOption(col.id, oi, this.value) })

            const moveUp = document.createElement('button')
            moveUp.className = 'option-move-up'
            moveUp.textContent = '\u25B2'
            moveUp.disabled = oi === 0
            moveUp.onclick = () => moveOption(col.id, oi, -1)

            const moveDown = document.createElement('button')
            moveDown.className = 'option-move-down'
            moveDown.textContent = '\u25BC'
            moveDown.disabled = oi === col.options.length - 1
            moveDown.onclick = () => moveOption(col.id, oi, 1)

            const delOpt = document.createElement('button')
            delOpt.className = 'option-del-btn'
            delOpt.textContent = '\xD7'
            delOpt.onclick = () => deleteOption(col.id, oi)

            row.append(swatch, optInput, moveUp, moveDown, delOpt)
            container.appendChild(row)

            if (isOpen) {
              container.appendChild(buildPicker(col, oi, opt, currentColor))
            }

            optList.appendChild(container)
          })

          section.appendChild(optList)

          const addOptBtn = document.createElement('button')
          addOptBtn.className = 'add-option-btn'
          addOptBtn.textContent = '+ Add option'
          addOptBtn.onclick = () => addOption(col.id)
          section.appendChild(addOptBtn)

          card.appendChild(section)
        }

        list.appendChild(card)
      })

      // Restore scroll position
      list.scrollTop = scrollTop
    }
  <\/script>
</body>
</html>
`, { width: 560, height: 680, title: "Manage Columns" });
      figma.ui.postMessage({ type: "init", columns });
      figma.ui.onmessage = (msg) => {
        if (msg.type === "save") {
          setColumns(msg.columns);
          figma.closePlugin();
          resolve();
        }
        if (msg.type === "cancel") {
          figma.closePlugin();
          resolve();
        }
      };
    });
    const ROW_NUM_W = 36;
    const ACTIONS_W = 82;
    const totalW = ROW_NUM_W + columns.reduce((s, c) => s + c.width, 0) + ACTIONS_W;
    const C_DARK = "#1E293B";
    const C_MID = "#334155";
    const C_BORDER = "#E2E8F0";
    const C_MUTED = "#94A3B8";
    const C_WHITE = "#FFFFFF";
    const C_OFF = "#F8FAFC";
    const C_BLUE = "#3B82F6";
    return /* @__PURE__ */ figma.widget.h(
      AutoLayout,
      {
        direction: "vertical",
        width: totalW,
        fill: C_WHITE,
        cornerRadius: 10,
        stroke: C_BORDER,
        strokeWidth: 1
      },
      /* @__PURE__ */ figma.widget.h(
        AutoLayout,
        {
          direction: "horizontal",
          width: "fill-parent",
          padding: { top: 13, bottom: 13, left: 16, right: 12 },
          fill: C_DARK,
          cornerRadius: { topLeft: 10, topRight: 10, bottomLeft: 0, bottomRight: 0 },
          verticalAlignItems: "center",
          spacing: "auto"
        },
        /* @__PURE__ */ figma.widget.h(
          Input,
          {
            value: title,
            onTextEditEnd: (e) => setTitle(e.characters),
            fontSize: 15,
            fontWeight: 700,
            fill: C_WHITE,
            width: "fill-parent",
            placeholder: "Widget Title",
            placeholderProps: { fill: "#64748B" }
          }
        ),
        /* @__PURE__ */ figma.widget.h(
          AutoLayout,
          {
            padding: { vertical: 7, horizontal: 12 },
            fill: C_MID,
            cornerRadius: 6,
            onClick: openManageUI,
            spacing: 6,
            verticalAlignItems: "center"
          },
          /* @__PURE__ */ figma.widget.h(SVG, { src: ICON_SETTINGS, width: 12, height: 12 }),
          /* @__PURE__ */ figma.widget.h(Text, { fontSize: 12, fill: "#CBD5E1", fontWeight: 500 }, "Manage Columns")
        )
      ),
      /* @__PURE__ */ figma.widget.h(
        AutoLayout,
        {
          direction: "horizontal",
          width: "fill-parent",
          fill: C_MID,
          spacing: 0
        },
        /* @__PURE__ */ figma.widget.h(
          AutoLayout,
          {
            width: ROW_NUM_W,
            height: 36,
            verticalAlignItems: "center",
            horizontalAlignItems: "center"
          },
          /* @__PURE__ */ figma.widget.h(Text, { fontSize: 10, fontWeight: 700, fill: C_MUTED }, "#")
        ),
        columns.map((col) => /* @__PURE__ */ figma.widget.h(
          AutoLayout,
          {
            key: col.id,
            width: col.width,
            height: 36,
            padding: { horizontal: 10 },
            verticalAlignItems: "center"
          },
          /* @__PURE__ */ figma.widget.h(Text, { fontSize: 10, fontWeight: 700, fill: "#94A3B8", letterSpacing: 0.7 }, col.name.toUpperCase())
        )),
        /* @__PURE__ */ figma.widget.h(AutoLayout, { width: ACTIONS_W, height: 36 })
      ),
      rows.map((row, ri) => /* @__PURE__ */ figma.widget.h(
        AutoLayout,
        {
          key: row.id,
          direction: "horizontal",
          width: "fill-parent",
          fill: ri % 2 === 0 ? C_WHITE : C_OFF,
          spacing: 0,
          stroke: C_BORDER,
          strokeWidth: 1,
          strokeAlign: "inside"
        },
        /* @__PURE__ */ figma.widget.h(
          AutoLayout,
          {
            width: ROW_NUM_W,
            padding: { vertical: 14 },
            verticalAlignItems: "center",
            horizontalAlignItems: "center"
          },
          /* @__PURE__ */ figma.widget.h(Text, { fontSize: 11, fill: C_MUTED }, ri + 1)
        ),
        columns.map((col) => {
          var _a;
          const val = (_a = row.cells[col.id]) != null ? _a : "";
          if (col.type === "checkbox") {
            const on = val === "true";
            return /* @__PURE__ */ figma.widget.h(
              AutoLayout,
              {
                key: col.id,
                width: col.width,
                padding: { horizontal: 10, vertical: 14 },
                verticalAlignItems: "center",
                horizontalAlignItems: "center",
                onClick: () => updateCell(row.id, col.id, on ? "false" : "true")
              },
              /* @__PURE__ */ figma.widget.h(
                AutoLayout,
                {
                  width: 18,
                  height: 18,
                  cornerRadius: 4,
                  fill: on ? C_BLUE : C_WHITE,
                  stroke: on ? C_BLUE : "#CBD5E1",
                  strokeWidth: 2,
                  horizontalAlignItems: "center",
                  verticalAlignItems: "center"
                },
                on && /* @__PURE__ */ figma.widget.h(Text, { fontSize: 12, fill: C_WHITE, fontWeight: 700 }, "\u2713")
              )
            );
          }
          if (col.type === "dropdown") {
            const chip = val ? chipColor(col, val) : null;
            return /* @__PURE__ */ figma.widget.h(
              AutoLayout,
              {
                key: col.id,
                width: col.width,
                padding: { horizontal: 8, vertical: 12 },
                verticalAlignItems: "center",
                onClick: () => cycleOption(row.id, col)
              },
              chip ? /* @__PURE__ */ figma.widget.h(
                AutoLayout,
                {
                  padding: { vertical: 4, horizontal: 8 },
                  fill: chip.bg,
                  cornerRadius: 4,
                  verticalAlignItems: "center"
                },
                /* @__PURE__ */ figma.widget.h(Text, { fontSize: 11, fill: chip.text, fontWeight: 500 }, val)
              ) : /* @__PURE__ */ figma.widget.h(Text, { fontSize: 11, fill: "#64748B", italic: true }, "Select...")
            );
          }
          return /* @__PURE__ */ figma.widget.h(
            AutoLayout,
            {
              key: col.id,
              width: col.width,
              padding: { horizontal: 10, vertical: 12 },
              verticalAlignItems: "start"
            },
            /* @__PURE__ */ figma.widget.h(
              Input,
              {
                value: val,
                onTextEditEnd: (e) => updateCell(row.id, col.id, e.characters),
                fontSize: 12,
                fill: C_DARK,
                width: "fill-parent",
                placeholder: col.name + "...",
                placeholderProps: { fill: "#94A3B8" },
                inputBehavior: "multiline"
              }
            )
          );
        }),
        /* @__PURE__ */ figma.widget.h(
          AutoLayout,
          {
            width: ACTIONS_W,
            padding: { horizontal: 8, vertical: 12 },
            spacing: 4,
            verticalAlignItems: "center",
            horizontalAlignItems: "center"
          },
          /* @__PURE__ */ figma.widget.h(
            AutoLayout,
            {
              width: 22,
              height: 22,
              cornerRadius: 4,
              fill: "#F1F5F9",
              horizontalAlignItems: "center",
              verticalAlignItems: "center",
              onClick: () => moveRow(ri, -1)
            },
            /* @__PURE__ */ figma.widget.h(SVG, { src: ICON_ARROW_UP, width: 8, height: 8 })
          ),
          /* @__PURE__ */ figma.widget.h(
            AutoLayout,
            {
              width: 22,
              height: 22,
              cornerRadius: 4,
              fill: "#F1F5F9",
              horizontalAlignItems: "center",
              verticalAlignItems: "center",
              onClick: () => moveRow(ri, 1)
            },
            /* @__PURE__ */ figma.widget.h(SVG, { src: ICON_ARROW_DOWN, width: 8, height: 8 })
          ),
          /* @__PURE__ */ figma.widget.h(
            AutoLayout,
            {
              width: 22,
              height: 22,
              cornerRadius: 4,
              fill: "#FEF2F2",
              horizontalAlignItems: "center",
              verticalAlignItems: "center",
              onClick: () => deleteRow(row.id)
            },
            /* @__PURE__ */ figma.widget.h(SVG, { src: ICON_CLOSE, width: 8, height: 8 })
          )
        )
      )),
      /* @__PURE__ */ figma.widget.h(
        AutoLayout,
        {
          direction: "horizontal",
          width: "fill-parent",
          padding: { vertical: 12, horizontal: 16 },
          fill: C_OFF,
          cornerRadius: { topLeft: 0, topRight: 0, bottomLeft: 10, bottomRight: 10 },
          verticalAlignItems: "center",
          onClick: addRow
        },
        /* @__PURE__ */ figma.widget.h(Text, { fontSize: 13, fill: C_BLUE, fontWeight: 600 }, "+ Add Row")
      )
    );
  }
  widget.register(Widget);
})();