{
  "comment": "sirsoft-basic 45개 draggable 전수 capability. propControls(속성 탭, controls.json propValue 참조) + styleControls(스타일 탭) + events(동작) + nodeEditor(구조 에디터 슬롯, 단계 2/3 핸들러). no-editable 0. 부록2 1:1.",
  "Div": {
    "label": "$t:editor.component.div",
    "coreProps": ["id", "dataKey"],
    "styleControls": [
      "paddingAll",
      "marginAll",
      "width",
      "height",
      "textAlign",
      "backgroundColor",
      "backgroundImage",
      "textColor",
      "boxShadow",
      "borderStyle",
      "borderColor",
      "borderRadius",
      "opacity",
      "overflow"
    ],
    "advanced": [
      "permissions",
      "blur_until_loaded",
      "comment"
    ],
    "flexEditor": "auto"
  },
  "Span": {
    "label": "$t:editor.component.span",
    "styleControls": [
      "fontSize",
      "fontWeight",
      "textColor",
      "fontItalic",
      "textUnderline",
      "whitespace"
    ]
  },
  "P": {
    "label": "$t:editor.component.p",
    "styleControls": [
      "textAlign",
      "fontSize",
      "fontWeight",
      "lineHeight",
      "textColor",
      "marginAll",
      "paddingAll",
      "fontItalic",
      "textUnderline",
      "whitespace"
    ]
  },
  "H1": {
    "label": "$t:editor.component.h1",
    "styleControls": [
      "textAlign",
      "fontSize",
      "fontWeight",
      "textColor",
      "marginAll",
      "fontItalic",
      "textUnderline",
      "whitespace",
      "letterSpacing",
      "lineHeight"
    ]
  },
  "H2": {
    "label": "$t:editor.component.h2",
    "styleControls": [
      "textAlign",
      "fontSize",
      "fontWeight",
      "textColor",
      "marginAll",
      "fontItalic",
      "textUnderline",
      "whitespace",
      "letterSpacing",
      "lineHeight"
    ]
  },
  "H3": {
    "label": "$t:editor.component.h3",
    "styleControls": [
      "textAlign",
      "fontSize",
      "fontWeight",
      "textColor",
      "marginAll",
      "fontItalic",
      "textUnderline",
      "whitespace"
    ]
  },
  "H4": {
    "label": "$t:editor.component.h4",
    "styleControls": [
      "textAlign",
      "fontSize",
      "fontWeight",
      "textColor",
      "marginAll",
      "fontItalic",
      "textUnderline",
      "whitespace"
    ]
  },
  "A": {
    "label": "$t:editor.component.a",
    "propControls": [
      "linkHref",
      "linkTarget"
    ],
    "styleControls": [
      "fontSize",
      "fontWeight",
      "textColor",
      "fontItalic",
      "textUnderline",
      "whitespace"
    ],
    "advanced": [
      "permissions"
    ],
    "events": [
      "onClick"
    ]
  },
  "Button": {
    "label": "$t:editor.component.button",
    "propControls": [
      "componentDisabled"
    ],
    "styleControls": [
      "width",
      "height",
      "paddingAll",
      "marginAll",
      "textColor",
      "backgroundColor",
      "selfAlign",
      "fontBold",
      "fontItalic",
      "textUnderline",
      "whitespace"
    ],
    "advanced": [
      "permissions",
      "lifecycle"
    ],
    "events": [
      "onClick",
      "onHover"
    ]
  },
  "Img": {
    "label": "$t:editor.component.img",
    "propControls": [
      "imgSrc",
      "imgAlt"
    ],
    "styleControls": [
      "width",
      "height",
      "marginAll",
      "selfAlign"
    ]
  },
  "Icon": {
    "label": "$t:editor.component.icon",
    "propControls": [
      "iconName"
    ],
    "styleControls": [
      "fontSize",
      "textColor",
      "marginAll",
      "selfAlign"
    ]
  },
  "Hr": {
    "label": "$t:editor.component.hr",
    "styleControls": [
      "marginAll",
      "borderStyle",
      "borderColor",
      "opacity"
    ]
  },
  "Ul": {
    "label": "$t:editor.component.ul",
    "styleControls": [
      "paddingAll",
      "marginAll",
      "textColor",
      "fontSize"
    ],
    "nodeEditor": {
      "kind": "children",
      "params": {
        "childComponent": "Li"
      }
    }
  },
  "Li": {
    "label": "$t:editor.component.li",
    "styleControls": [
      "paddingAll",
      "marginAll",
      "textColor",
      "fontSize",
      "fontWeight",
      "fontItalic",
      "textUnderline"
    ],
    "nodeEditor": {
      "kind": "children",
      "params": {
        "childComponent": "Span"
      }
    }
  },
  "Nav": {
    "label": "$t:editor.component.nav",
    "styleControls": [
      "paddingAll",
      "marginAll",
      "width",
      "backgroundColor",
      "textColor",
      "boxShadow",
      "borderStyle",
      "borderColor",
      "borderRadius",
      "opacity",
      "overflow"
    ],
    "flexEditor": "auto",
    "nodeEditor": {
      "kind": "children",
      "params": {
        "childComponent": "A"
      }
    }
  },
  "Container": {
    "label": "$t:editor.component.container",
    "coreProps": ["id", "dataKey"],
    "styleControls": [
      "paddingAll",
      "marginAll",
      "width",
      "backgroundColor",
      "backgroundImage",
      "textColor",
      "boxShadow",
      "borderStyle",
      "borderColor",
      "borderRadius",
      "opacity",
      "overflow"
    ],
    "advanced": [
      "permissions"
    ],
    "flexEditor": "auto"
  },
  "Flex": {
    "label": "$t:editor.component.flex",
    "styleControls": [
      "paddingAll",
      "marginAll",
      "width",
      "height",
      "backgroundColor",
      "textColor",
      "boxShadow",
      "borderStyle",
      "borderColor",
      "borderRadius",
      "opacity",
      "overflow"
    ],
    "flexEditor": "container",
    "events": [
      "onClick"
    ]
  },
  "Grid": {
    "label": "$t:editor.component.grid",
    "propControls": [
      "gridCols",
      "gridGap"
    ],
    "styleControls": [
      "paddingAll",
      "marginAll",
      "width",
      "backgroundColor",
      "textColor",
      "boxShadow",
      "borderStyle",
      "borderColor",
      "borderRadius",
      "opacity",
      "overflow"
    ],
    "events": [
      "onClick"
    ]
  },
  "SectionLayout": {
    "label": "$t:editor.component.section_layout",
    "styleControls": [
      "paddingAll",
      "marginAll",
      "backgroundColor",
      "backgroundImage",
      "textColor",
      "boxShadow",
      "borderStyle",
      "borderColor",
      "borderRadius",
      "opacity",
      "overflow"
    ],
    "advanced": [
      "permissions"
    ],
    "events": [
      "onClick"
    ]
  },
  "ThreeColumnLayout": {
    "label": "$t:editor.component.three_column_layout",
    "propControls": [
      "tclLeftWidth",
      "tclRightWidth"
    ],
    "styleControls": [
      "paddingAll",
      "marginAll",
      "width",
      "overflow"
    ]
  },
  "ProductCard": {
    "label": "$t:editor.component.product_card",
    "propControls": [
      "pcShopBase"
    ],
    "styleControls": [
      "paddingAll",
      "marginAll",
      "width",
      "height",
      "backgroundColor",
      "textColor",
      "boxShadow",
      "borderStyle",
      "borderColor",
      "borderRadius",
      "opacity",
      "overflow"
    ],
    "events": [
      "onClick"
    ],
    "dataProps": [
      {
        "propKey": "product",
        "shape": "object",
        "label": "$t:editor.data_prop.product",
        "itemFields": [
          "id",
          "name",
          "name_localized",
          "name_highlighted",
          "description_highlighted",
          "short_description",
          "thumbnail_url",
          "primary_category",
          "brand_name",
          "selling_price",
          "selling_price_formatted",
          "list_price",
          "list_price_formatted",
          "discount_rate",
          "multi_currency_selling_price",
          "multi_currency_list_price",
          "sales_status",
          "sales_status_label",
          "labels",
          "rating_avg",
          "review_count"
        ],
        "required": true
      }
    ]
  },
  "ImageGallery": {
    "label": "$t:editor.component.image_gallery",
    "coreProps": true,
    "propControls": [
      "igEnableZoom",
      "igEnableSlideshow",
      "igEnableFullscreen",
      "igShowCounter",
      "igShowDownload",
      "igShowThumbnails"
    ],
    "styleControls": [
      "marginAll",
      "paddingAll",
      "width",
      "selfAlign"
    ],
    "events": [
      "onClose"
    ],
    "dataProps": [
      {
        "propKey": "images",
        "shape": "array",
        "label": "$t:editor.data_prop.images",
        "itemFields": [
          "src",
          "title",
          "thumbnail"
        ],
        "required": true
      }
    ]
  },
  "Pagination": {
    "label": "$t:editor.component.pagination",
    "propControls": [
      "pgMaxVisible",
      "pgShowFirstLast",
      "pgPrevText",
      "pgNextText"
    ],
    "styleControls": [
      "marginAll",
      "paddingAll",
      "width",
      "selfAlign"
    ],
    "events": [
      "onPageChange"
    ]
  },
  "SearchBar": {
    "label": "$t:editor.component.search_bar",
    "propControls": [
      "sbPlaceholder",
      "sbShowButton",
      "sbShowSuggestions",
      "inputName"
    ],
    "styleControls": [
      "marginAll",
      "paddingAll",
      "width",
      "selfAlign"
    ],
    "events": [
      "onChange",
      "onSubmit"
    ],
    "dataProps": [
      {
        "propKey": "suggestions",
        "shape": "array",
        "label": "$t:editor.data_prop.suggestions",
        "itemFields": [
          "id",
          "text"
        ]
      },
      {
        "propKey": "value",
        "shape": "scalar",
        "label": "$t:editor.data_prop.value"
      }
    ]
  },
  "Avatar": {
    "label": "$t:editor.component.avatar",
    "propControls": [
      "avName",
      "avAvatar",
      "avSize",
      "avText",
      "avWithdrawn",
      "avGuest"
    ],
    "styleControls": [
      "marginAll",
      "width"
    ],
    "dataProps": [
      {
        "propKey": "author",
        "shape": "object",
        "label": "$t:editor.data_prop.author",
        "itemFields": [
          "id",
          "name",
          "avatar"
        ]
      }
    ]
  },
  "UserInfo": {
    "label": "$t:editor.component.user_info",
    "propControls": [
      "uiName",
      "uiUserId",
      "uiSubText",
      "uiSubTitle",
      "uiGuest",
      "uiWithdrawn",
      "uiShowDropdown",
      "uiClickable",
      "uiProfilePath",
      "uiLayout",
      "uiText",
      "uiStopProp"
    ],
    "styleControls": [
      "marginAll",
      "width"
    ],
    "events": [
      "onClick"
    ],
    "dataProps": [
      {
        "propKey": "author",
        "shape": "object",
        "label": "$t:editor.data_prop.author",
        "itemFields": [
          "id",
          "name",
          "avatar"
        ]
      }
    ]
  },
  "HtmlContent": {
    "label": "$t:editor.component.html_content",
    "propControls": [
      "hcIsHtml"
    ],
    "styleControls": [
      "marginAll",
      "paddingAll",
      "textColor",
      "fontSize"
    ]
  },
  "HtmlEditor": {
    "label": "$t:editor.component.html_editor",
    "propControls": [
      "hePlaceholder",
      "heLabel",
      "heRows",
      "heName",
      "heReadOnly",
      "heMultilingual",
      "heIsHtml",
      "heShowHtmlToggle",
      "heHtmlFieldName"
    ],
    "styleControls": [
      "marginAll",
      "paddingAll",
      "width",
      "selfAlign"
    ],
    "events": [
      "onChange"
    ]
  },
  "RichTextEditor": {
    "label": "$t:editor.component.rich_text_editor",
    "propControls": [
      "rteName",
      "rteInitialValue",
      "rtePlaceholder",
      "rteImageUploadUrl",
      "rteMinHeight",
      "rteDisabled"
    ],
    "styleControls": [
      "marginAll",
      "paddingAll",
      "width",
      "selfAlign"
    ],
    "events": [
      "onChange"
    ]
  },
  "ExpandableContent": {
    "label": "$t:editor.component.expandable_content",
    "propControls": [
      "ecMaxHeight",
      "ecExpandText",
      "ecCollapseText"
    ],
    "styleControls": [
      "marginAll",
      "paddingAll",
      "width"
    ]
  },
  "TabNavigation": {
    "label": "$t:editor.component.tab_navigation",
    "propControls": [
      "tnActiveTabId",
      "tnVariant",
      "tnMobileBreakpoint"
    ],
    "styleControls": [
      "marginAll",
      "paddingAll",
      "width",
      "selfAlign"
    ],
    "events": [
      "onTabChange"
    ],
    "nodeEditor": {
      "kind": "array",
      "params": {
        "arrayProp": "tabs",
        "itemLabel": "$t:editor.array_item.tab",
        "newItem": {
          "id": "",
          "label": ""
        },
        "fields": [
          {
            "key": "label",
            "widget": "i18n-text",
            "label": "$t:editor.array_field.label",
            "primary": true
          },
          {
            "key": "id",
            "widget": "text",
            "label": "$t:editor.array_field.id"
          },
          {
            "key": "iconName",
            "widget": "icon",
            "label": "$t:editor.array_field.icon"
          },
          {
            "key": "badge",
            "widget": "i18n-text",
            "label": "$t:editor.array_field.badge"
          },
          {
            "key": "disabled",
            "widget": "boolean",
            "label": "$t:editor.array_field.disabled"
          }
        ]
      }
    }
  },
  "QuantitySelector": {
    "label": "$t:editor.component.quantity_selector",
    "propControls": [
      "qsValue",
      "qsMin",
      "qsMax",
      "qsSize",
      "qsDisabled"
    ],
    "styleControls": [
      "marginAll",
      "width"
    ],
    "events": [
      "onChange"
    ],
    "dataProps": [
      {
        "propKey": "value",
        "shape": "scalar",
        "label": "$t:editor.data_prop.value"
      }
    ]
  },
  "ProductImageViewer": {
    "label": "$t:editor.component.product_image_viewer",
    "styleControls": [
      "width",
      "height",
      "marginAll",
      "borderRadius",
      "overflow"
    ],
    "events": [
      "onClick"
    ],
    "dataProps": [
      {
        "propKey": "images",
        "shape": "array",
        "label": "$t:editor.data_prop.images",
        "itemFields": [
          "id",
          "url",
          "alt_text_current"
        ],
        "required": true
      }
    ]
  },
  "FileUploader": {
    "label": "$t:editor.component.file_uploader",
    "propControls": [
      "fuType",
      "fuCollection",
      "fuMaxFiles",
      "fuMaxSize",
      "fuAccept",
      "fuAutoUpload",
      "inputDisabled",
      "fuConfirmRemove",
      "fuPrimarySel"
    ],
    "styleControls": [
      "marginAll",
      "paddingAll",
      "width",
      "selfAlign"
    ],
    "events": [
      "onFilesChange"
    ]
  },
  "AvatarUploader": {
    "label": "$t:editor.component.avatar_uploader",
    "propControls": [
      "auSrc",
      "auFallback",
      "auSize",
      "auUploadEndpoint",
      "auDeleteEndpoint",
      "auAccept",
      "auMaxSize",
      "auUploadBtn",
      "auDeleteBtn",
      "auReadOnly",
      "auConfirmDelete",
      "auDeleteConfirmMsg",
      "auConfirmUpload",
      "auUploadConfirmMsg",
      "auShowDelete"
    ],
    "styleControls": [
      "marginAll",
      "width"
    ],
    "events": [
      "onUploadSuccess",
      "onUploadError"
    ]
  },
  "SocialLoginButtons": {
    "label": "$t:editor.component.social_login_buttons",
    "propControls": [
      "slbMode",
      "slbVariant"
    ],
    "styleControls": [
      "marginAll",
      "paddingAll",
      "width",
      "selfAlign"
    ],
    "events": [
      "onClick"
    ],
    "nodeEditor": {
      "kind": "array",
      "params": {
        "arrayProp": "providers",
        "itemLabel": "$t:editor.array_item.provider",
        "newItem": "google",
        "fields": [
          {
            "key": "value",
            "widget": "select",
            "label": "$t:editor.array_field.provider",
            "primary": true,
            "options": [
              { "value": "google", "label": "Google" },
              { "value": "naver", "label": "$t:editor.provider.naver" },
              { "value": "kakao", "label": "$t:editor.provider.kakao" },
              { "value": "facebook", "label": "Facebook" },
              { "value": "apple", "label": "Apple" }
            ]
          }
        ]
      }
    }
  },
  "PostReactions": {
    "label": "$t:editor.component.post_reactions",
    "propControls": [
      "prUserReaction",
      "prPostId",
      "prSize"
    ],
    "styleControls": [
      "marginAll",
      "width"
    ],
    "events": [
      "onReact"
    ],
    "dataProps": [
      {
        "propKey": "reactions",
        "shape": "array",
        "label": "$t:editor.data_prop.reactions",
        "itemFields": [
          "type",
          "count"
        ],
        "required": true
      }
    ]
  },
  "Input": {
    "label": "$t:editor.component.input",
    "propControls": [
      "inputType",
      "inputPlaceholder",
      "inputName",
      "inputRequired",
      "inputDisabled"
    ],
    "styleControls": [
      "width",
      "marginAll"
    ],
    "events": [
      "onChange"
    ],
    "dataProps": [
      {
        "propKey": "value",
        "shape": "scalar",
        "label": "$t:editor.data_prop.value"
      }
    ]
  },
  "Textarea": {
    "label": "$t:editor.component.textarea",
    "propControls": [
      "textareaRows",
      "inputPlaceholder",
      "inputName",
      "inputDisabled"
    ],
    "styleControls": [
      "width",
      "marginAll"
    ],
    "events": [
      "onChange"
    ],
    "dataProps": [
      {
        "propKey": "value",
        "shape": "scalar",
        "label": "$t:editor.data_prop.value"
      }
    ]
  },
  "Select": {
    "label": "$t:editor.component.select",
    "propControls": [
      "selectPlaceholder",
      "selectOptions",
      "inputDisabled"
    ],
    "styleControls": [
      "width",
      "marginAll"
    ],
    "events": [
      "onChange"
    ],
    "dataProps": [
      {
        "propKey": "value",
        "shape": "scalar",
        "label": "$t:editor.data_prop.value"
      },
      {
        "propKey": "options",
        "shape": "array",
        "label": "$t:editor.data_prop.options",
        "itemFields": [
          "value",
          "label",
          "disabled"
        ]
      }
    ]
  },
  "Checkbox": {
    "label": "$t:editor.component.checkbox",
    "propControls": [
      "inputDisabled"
    ],
    "styleControls": [
      "marginAll"
    ],
    "events": [
      "onChange"
    ]
  },
  "PasswordInput": {
    "label": "$t:editor.component.password_input",
    "propControls": [
      "piError",
      "piShowToggle",
      "piShowValidation",
      "piWrapperClass",
      "piIsConfirm",
      "piConfirmTarget"
    ],
    "styleControls": [
      "width",
      "marginAll"
    ],
    "events": [
      "onChange"
    ],
    "dataProps": [
      {
        "propKey": "value",
        "shape": "scalar",
        "label": "$t:editor.data_prop.value"
      }
    ]
  },
  "Label": {
    "label": "$t:editor.component.label",
    "propControls": [
      "htmlFor"
    ],
    "styleControls": [
      "fontSize",
      "fontWeight",
      "textColor",
      "fontItalic",
      "textUnderline",
      "whitespace",
      "marginAll"
    ]
  },
  "Form": {
    "label": "$t:editor.component.form",
    "coreProps": ["id", "dataKey"],
    "styleControls": [
      "paddingAll",
      "marginAll",
      "width",
      "backgroundColor",
      "textColor",
      "boxShadow",
      "borderStyle",
      "borderColor",
      "borderRadius",
      "opacity",
      "overflow"
    ],
    "events": [
      "onSubmit"
    ],
    "nodeEditor": {
      "kind": "children",
      "params": {
        "childComponent": "Input",
        "childLabel": "$t:layout_editor.palette.input.label",
        "childTemplate": {
          "type": "basic",
          "name": "Div",
          "children": [
            {
              "type": "basic",
              "name": "Label",
              "props": {
                "className": "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
              },
              "children": [
                {
                  "type": "basic",
                  "name": "Span",
                  "text": ""
                }
              ]
            },
            {
              "type": "basic",
              "name": "Input",
              "props": {
                "type": "text",
                "placeholder": "$t:layout_editor.palette.input.default_placeholder",
                "className": "w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
              }
            }
          ]
        },
        "itemFields": [
          {
            "kind": "text",
            "label": "$t:layout_editor.list_editor.item_label"
          },
          {
            "kind": "prop",
            "prop": "placeholder",
            "label": "$t:layout_editor.list_editor.item_placeholder"
          }
        ]
      }
    }
  },
  "Table": {
    "label": "$t:editor.component.table",
    "styleControls": [
      "width",
      "height",
      "marginAll",
      "backgroundColor",
      "textColor",
      "boxShadow",
      "borderStyle",
      "borderColor",
      "borderRadius",
      "opacity",
      "overflow"
    ],
    "nodeEditor": {
      "kind": "table",
      "params": {
        "rowContainer": "Tbody",
        "row": "Tr",
        "cell": "Td",
        "headerCell": "Th",
        "colSpanProp": "colSpan",
        "rowSpanProp": "rowSpan",
        "cellBorder": {
          "sides": [
            {
              "value": "all",
              "label": "$t:editor.cell_border.side_all",
              "prefix": "border"
            },
            {
              "value": "top",
              "label": "$t:editor.cell_border.side_top",
              "prefix": "border-t"
            },
            {
              "value": "bottom",
              "label": "$t:editor.cell_border.side_bottom",
              "prefix": "border-b"
            },
            {
              "value": "left",
              "label": "$t:editor.cell_border.side_left",
              "prefix": "border-l"
            },
            {
              "value": "right",
              "label": "$t:editor.cell_border.side_right",
              "prefix": "border-r"
            }
          ],
          "widths": [
            {
              "value": "none",
              "label": "$t:editor.cell_border.width_none"
            },
            {
              "value": "thin",
              "label": "$t:editor.cell_border.width_thin",
              "suffix": ""
            },
            {
              "value": "medium",
              "label": "$t:editor.cell_border.width_medium",
              "suffix": "-2"
            },
            {
              "value": "thick",
              "label": "$t:editor.cell_border.width_thick",
              "suffix": "-4"
            }
          ],
          "colors": [
            {
              "value": "gray-300",
              "label": "$t:editor.cell_border.color_gray",
              "swatch": "#d1d5db",
              "token": "border-gray-300"
            },
            {
              "value": "gray-500",
              "label": "$t:editor.cell_border.color_gray_dark",
              "swatch": "#6b7280",
              "token": "border-gray-500"
            },
            {
              "value": "slate-800",
              "label": "$t:editor.cell_border.color_dark",
              "swatch": "#1e293b",
              "token": "border-slate-800"
            },
            {
              "value": "blue-500",
              "label": "$t:editor.cell_border.color_blue",
              "swatch": "#3b82f6",
              "token": "border-blue-500"
            },
            {
              "value": "red-500",
              "label": "$t:editor.cell_border.color_red",
              "swatch": "#ef4444",
              "token": "border-red-500"
            }
          ]
        },
        "cellBackground": {
          "colors": [
            {
              "value": "white",
              "label": "$t:editor.cell_fill.color_white",
              "swatch": "#ffffff",
              "token": "bg-white"
            },
            {
              "value": "gray-100",
              "label": "$t:editor.cell_fill.color_gray",
              "swatch": "#f3f4f6",
              "token": "bg-gray-100"
            },
            {
              "value": "gray-200",
              "label": "$t:editor.cell_fill.color_gray_dark",
              "swatch": "#e5e7eb",
              "token": "bg-gray-200"
            },
            {
              "value": "yellow-100",
              "label": "$t:editor.cell_fill.color_yellow",
              "swatch": "#fef9c3",
              "token": "bg-yellow-100"
            },
            {
              "value": "blue-100",
              "label": "$t:editor.cell_fill.color_blue",
              "swatch": "#dbeafe",
              "token": "bg-blue-100"
            },
            {
              "value": "green-100",
              "label": "$t:editor.cell_fill.color_green",
              "swatch": "#dcfce7",
              "token": "bg-green-100"
            },
            {
              "value": "red-100",
              "label": "$t:editor.cell_fill.color_red",
              "swatch": "#fee2e2",
              "token": "bg-red-100"
            }
          ]
        },
        "cellPadding": {
          "steps": [
            {
              "value": "none",
              "label": "$t:editor.cell_padding.step_none"
            },
            {
              "value": "narrow",
              "label": "$t:editor.cell_padding.step_narrow",
              "px": 4
            },
            {
              "value": "normal",
              "label": "$t:editor.cell_padding.step_normal",
              "px": 8
            },
            {
              "value": "wide",
              "label": "$t:editor.cell_padding.step_wide",
              "px": 16
            }
          ]
        }
      }
    },
    "canvasOverlay": {
      "kind": "table",
      "params": {
        "rowContainer": "Tbody",
        "row": "Tr",
        "cell": "Td",
        "headerCell": "Th",
        "colSpanProp": "colSpan",
        "rowSpanProp": "rowSpan",
        "cellBorder": {
          "sides": [
            {
              "value": "all",
              "label": "$t:editor.cell_border.side_all",
              "prefix": "border"
            },
            {
              "value": "top",
              "label": "$t:editor.cell_border.side_top",
              "prefix": "border-t"
            },
            {
              "value": "bottom",
              "label": "$t:editor.cell_border.side_bottom",
              "prefix": "border-b"
            },
            {
              "value": "left",
              "label": "$t:editor.cell_border.side_left",
              "prefix": "border-l"
            },
            {
              "value": "right",
              "label": "$t:editor.cell_border.side_right",
              "prefix": "border-r"
            }
          ],
          "widths": [
            {
              "value": "none",
              "label": "$t:editor.cell_border.width_none"
            },
            {
              "value": "thin",
              "label": "$t:editor.cell_border.width_thin",
              "suffix": ""
            },
            {
              "value": "medium",
              "label": "$t:editor.cell_border.width_medium",
              "suffix": "-2"
            },
            {
              "value": "thick",
              "label": "$t:editor.cell_border.width_thick",
              "suffix": "-4"
            }
          ],
          "colors": [
            {
              "value": "gray-300",
              "label": "$t:editor.cell_border.color_gray",
              "swatch": "#d1d5db",
              "token": "border-gray-300"
            },
            {
              "value": "gray-500",
              "label": "$t:editor.cell_border.color_gray_dark",
              "swatch": "#6b7280",
              "token": "border-gray-500"
            },
            {
              "value": "slate-800",
              "label": "$t:editor.cell_border.color_dark",
              "swatch": "#1e293b",
              "token": "border-slate-800"
            },
            {
              "value": "blue-500",
              "label": "$t:editor.cell_border.color_blue",
              "swatch": "#3b82f6",
              "token": "border-blue-500"
            },
            {
              "value": "red-500",
              "label": "$t:editor.cell_border.color_red",
              "swatch": "#ef4444",
              "token": "border-red-500"
            }
          ]
        },
        "cellBackground": {
          "colors": [
            {
              "value": "white",
              "label": "$t:editor.cell_fill.color_white",
              "swatch": "#ffffff",
              "token": "bg-white"
            },
            {
              "value": "gray-100",
              "label": "$t:editor.cell_fill.color_gray",
              "swatch": "#f3f4f6",
              "token": "bg-gray-100"
            },
            {
              "value": "gray-200",
              "label": "$t:editor.cell_fill.color_gray_dark",
              "swatch": "#e5e7eb",
              "token": "bg-gray-200"
            },
            {
              "value": "yellow-100",
              "label": "$t:editor.cell_fill.color_yellow",
              "swatch": "#fef9c3",
              "token": "bg-yellow-100"
            },
            {
              "value": "blue-100",
              "label": "$t:editor.cell_fill.color_blue",
              "swatch": "#dbeafe",
              "token": "bg-blue-100"
            },
            {
              "value": "green-100",
              "label": "$t:editor.cell_fill.color_green",
              "swatch": "#dcfce7",
              "token": "bg-green-100"
            },
            {
              "value": "red-100",
              "label": "$t:editor.cell_fill.color_red",
              "swatch": "#fee2e2",
              "token": "bg-red-100"
            }
          ]
        },
        "cellPadding": {
          "steps": [
            {
              "value": "none",
              "label": "$t:editor.cell_padding.step_none"
            },
            {
              "value": "narrow",
              "label": "$t:editor.cell_padding.step_narrow",
              "px": 4
            },
            {
              "value": "normal",
              "label": "$t:editor.cell_padding.step_normal",
              "px": 8
            },
            {
              "value": "wide",
              "label": "$t:editor.cell_padding.step_wide",
              "px": 16
            }
          ]
        }
      }
    }
  },
  "Td": {
    "label": "$t:editor.component.td",
    "styleControls": [
      "fontBold",
      "fontItalic",
      "textUnderline",
      "textAlign",
      "fontSize",
      "textColor"
    ]
  },
  "Th": {
    "label": "$t:editor.component.th",
    "styleControls": [
      "fontBold",
      "fontItalic",
      "textUnderline",
      "textAlign",
      "fontSize",
      "textColor"
    ]
  },
  "Header": {
    "label": "$t:editor.component.header",
    "coreProps": ["id"],
    "propControls": [
      "hdrSiteName",
      "hdrLogo",
      "hdrShopBase",
      "hdrMaxBoards",
      "hdrCurrentLocale",
      "hdrNotifTitle",
      "hdrNotifEmpty",
      "hdrNotifMarkAllRead",
      "hdrNotifDeleteAll",
      "hdrNotifUnreadOnly"
    ],
    "styleControls": [
      "marginAll",
      "paddingAll",
      "backgroundColor",
      "textColor",
      "boxShadow",
      "borderStyle",
      "borderColor",
      "width"
    ],
    "dataProps": [
      {
        "propKey": "user",
        "shape": "object",
        "label": "$t:editor.data_prop.header_user",
        "itemFields": ["uuid", "name", "nickname", "avatar_url"]
      },
      {
        "propKey": "boards",
        "shape": "array",
        "label": "$t:editor.data_prop.header_boards",
        "itemFields": ["id", "table_id", "subject", "name"]
      },
      {
        "propKey": "notifications",
        "shape": "array",
        "label": "$t:editor.data_prop.header_notifications",
        "itemFields": ["id", "title", "message", "read_at"]
      },
      {
        "propKey": "availableLocales",
        "shape": "scalar",
        "label": "$t:editor.data_prop.header_available_locales"
      },
      {
        "propKey": "cartCount",
        "shape": "scalar",
        "label": "$t:editor.data_prop.header_cart_count"
      },
      {
        "propKey": "notificationCount",
        "shape": "scalar",
        "label": "$t:editor.data_prop.header_notification_count"
      }
    ]
  },
  "Footer": {
    "label": "$t:editor.component.footer",
    "coreProps": ["id"],
    "propControls": [
      "ftSiteName",
      "ftSiteDescription",
      "ftCopyrightText"
    ],
    "styleControls": [
      "marginAll",
      "paddingAll",
      "backgroundColor",
      "textColor"
    ],
    "dataProps": [
      {
        "propKey": "socialLinks",
        "shape": "object",
        "label": "$t:editor.data_prop.footer_social_links"
      },
      {
        "propKey": "linkGroups",
        "shape": "array",
        "label": "$t:editor.data_prop.footer_link_groups",
        "itemFields": ["title", "links"]
      }
    ]
  },
  "ThemeToggle": {
    "label": "$t:editor.component.theme_toggle",
    "coreProps": ["id"],
    "propControls": [
      "ttAutoText",
      "ttLightText",
      "ttDarkText"
    ],
    "styleControls": [
      "marginAll"
    ]
  },
  "NotificationCenter": {
    "label": "$t:editor.component.notification_center",
    "coreProps": ["id"],
    "propControls": [
      "ncTitleText",
      "ncEmptyText",
      "ncMarkAllReadText",
      "ncDeleteAllText",
      "ncUnreadOnlyText",
      "ncUnreadOnly",
      "ncDropdownAlign"
    ],
    "styleControls": [
      "marginAll"
    ],
    "dataProps": [
      {
        "propKey": "notifications",
        "shape": "array",
        "label": "$t:editor.data_prop.notification_items",
        "itemFields": ["id", "title", "message", "read", "created_at"]
      },
      {
        "propKey": "unreadCount",
        "shape": "scalar",
        "label": "$t:editor.data_prop.notification_unread_count"
      }
    ]
  }
}