{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-node",
  "title": "Table Element",
  "description": "A table component with floating toolbar and border customization.",
  "dependencies": [
    "@platejs/table",
    "@radix-ui/react-popover"
  ],
  "registryDependencies": [
    "dropdown-menu",
    "popover",
    "https://platejs.org/r/resize-handle.json",
    "https://platejs.org/r/block-selection.json",
    "https://platejs.org/r/toolbar.json",
    "https://platejs.org/r/tailwind-scrollbar-hide.json",
    "https://platejs.org/r/font-color-toolbar-button.json"
  ],
  "files": [
    {
      "path": "src/registry/ui/table-node.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { useDraggable, useDropLine } from '@platejs/dnd';\nimport {\n  BlockSelectionPlugin,\n  useBlockSelected,\n} from '@platejs/selection/react';\nimport { resizeLengthClampStatic } from '@platejs/resizable';\nimport {\n  getTableColumnCount,\n  setCellBackground,\n  setTableColSize,\n  setTableMarginLeft,\n  setTableRowSize,\n} from '@platejs/table';\nimport {\n  TablePlugin,\n  TableProvider,\n  roundCellSizeToStep,\n  useCellIndices,\n  useOverrideColSize,\n  useOverrideMarginLeft,\n  useOverrideRowSize,\n  useTableCellBorders,\n  useTableBordersDropdownMenuContentState,\n  useTableColSizes,\n  useTableElement,\n  useTableMergeState,\n  useTableSelectionDom,\n  useTableValue,\n} from '@platejs/table/react';\nimport {\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  CombineIcon,\n  EraserIcon,\n  Grid2X2Icon,\n  GripVertical,\n  PaintBucketIcon,\n  SquareSplitHorizontalIcon,\n  Trash2Icon,\n  XIcon,\n} from 'lucide-react';\nimport {\n  type TElement,\n  type TTableCellElement,\n  type TTableElement,\n  type TTableRowElement,\n  KEYS,\n  PathApi,\n} from 'platejs';\nimport {\n  type PlateElementProps,\n  PlateElement,\n  useComposedRef,\n  useEditorPlugin,\n  useEditorRef,\n  useEditorSelector,\n  useElement,\n  useFocusedLast,\n  usePluginOption,\n  useReadOnly,\n  useRemoveNodeButton,\n  useSelected,\n  withHOC,\n} from 'platejs/react';\nimport { useElementSelector } from 'platejs/react';\n\nimport { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n} from '@/components/ui/popover';\nimport { cn } from '@/lib/utils';\n\nimport { blockSelectionVariants } from './block-selection';\nimport {\n  ColorDropdownMenuItems,\n  DEFAULT_COLORS,\n} from './font-color-toolbar-button';\nimport {\n  BorderAllIcon,\n  BorderBottomIcon,\n  BorderLeftIcon,\n  BorderNoneIcon,\n  BorderRightIcon,\n  BorderTopIcon,\n} from './table-icons';\nimport {\n  Toolbar,\n  ToolbarButton,\n  ToolbarGroup,\n  ToolbarMenuGroup,\n} from './toolbar';\n\ntype TableResizeDirection = 'bottom' | 'left' | 'right';\n\ntype TableResizeStartOptions = {\n  colIndex: number;\n  direction: TableResizeDirection;\n  handleKey: string;\n  rowIndex: number;\n};\n\ntype TableResizeDragState = {\n  colIndex: number;\n  direction: TableResizeDirection;\n  initialPosition: number;\n  initialSize: number;\n  marginLeft: number;\n  rowIndex: number;\n};\n\ntype TableResizeContextValue = {\n  disableMarginLeft: boolean;\n  clearResizePreview: (handleKey: string) => void;\n  setResizePreview: (\n    event: React.PointerEvent<HTMLDivElement>,\n    options: TableResizeStartOptions\n  ) => void;\n  startResize: (\n    event: React.PointerEvent<HTMLDivElement>,\n    options: TableResizeStartOptions\n  ) => void;\n};\n\nconst TABLE_CONTROL_COLUMN_WIDTH = 8;\nconst TABLE_DEFAULT_COLUMN_WIDTH = 120;\nconst TABLE_DEFERRED_COLUMN_RESIZE_CELL_COUNT = 1200;\nconst TABLE_MULTI_SELECTION_TOOLBAR_DELAY_MS = 150;\n\nconst TableResizeContext = React.createContext<TableResizeContextValue | null>(\n  null\n);\n\nfunction useTableResizeContext() {\n  const context = React.useContext(TableResizeContext);\n\n  if (!context) {\n    throw new Error('TableResizeContext is missing');\n  }\n\n  return context;\n}\n\nfunction useTableResizeController({\n  deferColumnResize,\n  dragIndicatorRef,\n  hoverIndicatorRef,\n  marginLeft,\n  controlColumnWidth,\n  tablePath,\n  tableRef,\n  wrapperRef,\n}: {\n  deferColumnResize: boolean;\n  dragIndicatorRef: React.RefObject<HTMLDivElement | null>;\n  hoverIndicatorRef: React.RefObject<HTMLDivElement | null>;\n  marginLeft: number;\n  controlColumnWidth: number;\n  tablePath: number[];\n  tableRef: React.RefObject<HTMLTableElement | null>;\n  wrapperRef: React.RefObject<HTMLDivElement | null>;\n}) {\n  const { editor, getOptions } = useEditorPlugin(TablePlugin);\n  const { disableMarginLeft = false, minColumnWidth = 0 } = getOptions();\n  const colSizes = useTableColSizes({\n    disableOverrides: true,\n  });\n  const effectiveColSizes = React.useMemo(\n    () => colSizes.map((colSize) => colSize || TABLE_DEFAULT_COLUMN_WIDTH),\n    [colSizes]\n  );\n  const effectiveColSizesRef = React.useRef(effectiveColSizes);\n  const activeHandleKeyRef = React.useRef<string | null>(null);\n  const activeRowElementRef = React.useRef<HTMLTableRowElement | null>(null);\n  const cleanupListenersRef = React.useRef<(() => void) | null>(null);\n  const marginLeftRef = React.useRef(marginLeft);\n  const dragStateRef = React.useRef<TableResizeDragState | null>(null);\n  const frozenRowIndicesRef = React.useRef<number[] | null>(null);\n  const previewHandleKeyRef = React.useRef<string | null>(null);\n  const overrideColSize = useOverrideColSize();\n  const overrideMarginLeft = useOverrideMarginLeft();\n  const overrideRowSize = useOverrideRowSize();\n\n  React.useEffect(() => {\n    effectiveColSizesRef.current = effectiveColSizes;\n  }, [effectiveColSizes]);\n\n  React.useEffect(() => {\n    marginLeftRef.current = marginLeft;\n  }, [marginLeft]);\n\n  const hideDeferredResizeIndicator = React.useCallback(() => {\n    const indicator = dragIndicatorRef.current;\n\n    if (!indicator) return;\n\n    indicator.style.display = 'none';\n    indicator.style.removeProperty('left');\n  }, [dragIndicatorRef]);\n\n  const showDeferredResizeIndicator = React.useCallback(\n    (offset: number) => {\n      const indicator = dragIndicatorRef.current;\n\n      if (!indicator) return;\n\n      indicator.style.display = 'block';\n      indicator.style.left = `${offset}px`;\n    },\n    [dragIndicatorRef]\n  );\n\n  const hideResizeIndicator = React.useCallback(() => {\n    const indicator = hoverIndicatorRef.current;\n\n    if (!indicator) return;\n\n    indicator.style.display = 'none';\n    indicator.style.removeProperty('left');\n  }, [hoverIndicatorRef]);\n\n  const clearFrozenRowHeights = React.useCallback(() => {\n    const frozenRowIndices = frozenRowIndicesRef.current;\n\n    if (!frozenRowIndices) return;\n\n    frozenRowIndicesRef.current = null;\n\n    frozenRowIndices.forEach((rowIndex) => {\n      overrideRowSize(rowIndex, null);\n    });\n  }, [overrideRowSize]);\n\n  const freezeRowHeights = React.useCallback(() => {\n    const table = tableRef.current;\n\n    if (!table || deferColumnResize) return;\n\n    clearFrozenRowHeights();\n\n    const frozenRowIndices: number[] = [];\n\n    Array.from(table.rows).forEach((row, rowIndex) => {\n      const height = row.getBoundingClientRect().height;\n\n      if (!height) return;\n\n      overrideRowSize(rowIndex, height);\n      frozenRowIndices.push(rowIndex);\n    });\n\n    frozenRowIndicesRef.current = frozenRowIndices;\n  }, [clearFrozenRowHeights, deferColumnResize, overrideRowSize, tableRef]);\n\n  const showResizeIndicatorAtOffset = React.useCallback(\n    (offset: number) => {\n      const indicator = hoverIndicatorRef.current;\n\n      if (!indicator) return;\n\n      indicator.style.display = 'block';\n      indicator.style.left = `${offset}px`;\n    },\n    [hoverIndicatorRef]\n  );\n\n  const showResizeIndicator = React.useCallback(\n    ({\n      event,\n      direction,\n    }: Pick<TableResizeStartOptions, 'direction'> & {\n      event: React.PointerEvent<HTMLDivElement>;\n    }) => {\n      if (direction === 'bottom') return;\n\n      const wrapper = wrapperRef.current;\n\n      if (!wrapper) return;\n\n      const handleRect = event.currentTarget.getBoundingClientRect();\n      const wrapperRect = wrapper.getBoundingClientRect();\n      const boundaryOffset =\n        handleRect.left - wrapperRect.left + handleRect.width / 2;\n\n      showResizeIndicatorAtOffset(boundaryOffset);\n    },\n    [showResizeIndicatorAtOffset, wrapperRef]\n  );\n\n  const setResizePreview = React.useCallback(\n    (\n      event: React.PointerEvent<HTMLDivElement>,\n      options: TableResizeStartOptions\n    ) => {\n      if (activeHandleKeyRef.current) return;\n\n      previewHandleKeyRef.current = options.handleKey;\n      showResizeIndicator({ ...options, event });\n    },\n    [showResizeIndicator]\n  );\n\n  const clearResizePreview = React.useCallback(\n    (handleKey: string) => {\n      if (activeHandleKeyRef.current) return;\n      if (previewHandleKeyRef.current !== handleKey) return;\n\n      previewHandleKeyRef.current = null;\n      hideResizeIndicator();\n    },\n    [hideResizeIndicator]\n  );\n\n  const commitColSize = React.useCallback(\n    (colIndex: number, width: number) => {\n      setTableColSize(editor, { colIndex, width }, { at: tablePath });\n      setTimeout(() => overrideColSize(colIndex, null), 0);\n    },\n    [editor, overrideColSize, tablePath]\n  );\n\n  const commitRowSize = React.useCallback(\n    (rowIndex: number, height: number) => {\n      setTableRowSize(editor, { height, rowIndex }, { at: tablePath });\n      setTimeout(() => overrideRowSize(rowIndex, null), 0);\n    },\n    [editor, overrideRowSize, tablePath]\n  );\n\n  const commitMarginLeft = React.useCallback(\n    (nextMarginLeft: number) => {\n      setTableMarginLeft(\n        editor,\n        { marginLeft: nextMarginLeft },\n        { at: tablePath }\n      );\n      setTimeout(() => overrideMarginLeft(null), 0);\n    },\n    [editor, overrideMarginLeft, tablePath]\n  );\n\n  const getColumnBoundaryOffset = React.useCallback(\n    (colIndex: number, currentWidth: number) =>\n      controlColumnWidth +\n      effectiveColSizesRef.current\n        .slice(0, colIndex)\n        .reduce((total, colSize) => total + colSize, 0) +\n      currentWidth,\n    [controlColumnWidth]\n  );\n\n  const applyResize = React.useCallback(\n    (event: PointerEvent, finished: boolean) => {\n      const dragState = dragStateRef.current;\n\n      if (!dragState) return;\n\n      const currentPosition =\n        dragState.direction === 'bottom' ? event.clientY : event.clientX;\n      const delta = currentPosition - dragState.initialPosition;\n\n      if (dragState.direction === 'bottom') {\n        const newHeight = roundCellSizeToStep(\n          dragState.initialSize + delta,\n          undefined\n        );\n\n        if (finished) {\n          commitRowSize(dragState.rowIndex, newHeight);\n        } else {\n          overrideRowSize(dragState.rowIndex, newHeight);\n        }\n\n        return;\n      }\n\n      if (dragState.direction === 'left') {\n        const initial =\n          effectiveColSizesRef.current[dragState.colIndex] ??\n          dragState.initialSize;\n        const complement = (width: number) =>\n          initial + dragState.marginLeft - width;\n        const nextMarginLeft = roundCellSizeToStep(\n          resizeLengthClampStatic(dragState.marginLeft + delta, {\n            max: complement(minColumnWidth),\n            min: 0,\n          }),\n          undefined\n        );\n        const nextWidth = complement(nextMarginLeft);\n\n        if (finished) {\n          commitMarginLeft(nextMarginLeft);\n          commitColSize(dragState.colIndex, nextWidth);\n        } else if (deferColumnResize) {\n          showDeferredResizeIndicator(\n            controlColumnWidth + (nextMarginLeft - dragState.marginLeft)\n          );\n        } else {\n          showResizeIndicatorAtOffset(\n            controlColumnWidth + (nextMarginLeft - dragState.marginLeft)\n          );\n          overrideMarginLeft(nextMarginLeft);\n          overrideColSize(dragState.colIndex, nextWidth);\n        }\n\n        return;\n      }\n\n      const currentInitial =\n        effectiveColSizesRef.current[dragState.colIndex] ??\n        dragState.initialSize;\n      const nextInitial = effectiveColSizesRef.current[dragState.colIndex + 1];\n      const complement = (width: number) =>\n        currentInitial + nextInitial - width;\n      const currentWidth = roundCellSizeToStep(\n        resizeLengthClampStatic(currentInitial + delta, {\n          max: nextInitial ? complement(minColumnWidth) : undefined,\n          min: minColumnWidth,\n        }),\n        undefined\n      );\n      const nextWidth = nextInitial ? complement(currentWidth) : undefined;\n\n      if (finished) {\n        commitColSize(dragState.colIndex, currentWidth);\n\n        if (nextWidth !== undefined) {\n          commitColSize(dragState.colIndex + 1, nextWidth);\n        }\n      } else if (deferColumnResize) {\n        showDeferredResizeIndicator(\n          getColumnBoundaryOffset(dragState.colIndex, currentWidth)\n        );\n      } else {\n        showResizeIndicatorAtOffset(\n          getColumnBoundaryOffset(dragState.colIndex, currentWidth)\n        );\n        overrideColSize(dragState.colIndex, currentWidth);\n\n        if (nextWidth !== undefined) {\n          overrideColSize(dragState.colIndex + 1, nextWidth);\n        }\n      }\n    },\n    [\n      commitColSize,\n      commitMarginLeft,\n      commitRowSize,\n      controlColumnWidth,\n      deferColumnResize,\n      getColumnBoundaryOffset,\n      showDeferredResizeIndicator,\n      showResizeIndicatorAtOffset,\n      minColumnWidth,\n      overrideColSize,\n      overrideMarginLeft,\n      overrideRowSize,\n    ]\n  );\n\n  const stopResize = React.useCallback(() => {\n    cleanupListenersRef.current?.();\n    cleanupListenersRef.current = null;\n    activeHandleKeyRef.current = null;\n    previewHandleKeyRef.current = null;\n    dragStateRef.current = null;\n\n    if (activeRowElementRef.current) {\n      delete activeRowElementRef.current.dataset.tableResizing;\n      activeRowElementRef.current = null;\n    }\n\n    hideDeferredResizeIndicator();\n    hideResizeIndicator();\n    clearFrozenRowHeights();\n  }, [clearFrozenRowHeights, hideDeferredResizeIndicator, hideResizeIndicator]);\n\n  React.useEffect(() => stopResize, [stopResize]);\n\n  const startResize = React.useCallback(\n    (\n      event: React.PointerEvent<HTMLDivElement>,\n      { colIndex, direction, handleKey, rowIndex }: TableResizeStartOptions\n    ) => {\n      const rowHeight =\n        tableRef.current?.rows.item(rowIndex)?.getBoundingClientRect().height ??\n        0;\n\n      dragStateRef.current = {\n        colIndex,\n        direction,\n        initialPosition: direction === 'bottom' ? event.clientY : event.clientX,\n        initialSize:\n          direction === 'bottom'\n            ? rowHeight\n            : (effectiveColSizesRef.current[colIndex] ??\n              TABLE_DEFAULT_COLUMN_WIDTH),\n        marginLeft: marginLeftRef.current,\n        rowIndex,\n      };\n      activeHandleKeyRef.current = handleKey;\n      previewHandleKeyRef.current = null;\n\n      const rowElement = tableRef.current?.rows.item(rowIndex) ?? null;\n\n      if (\n        activeRowElementRef.current &&\n        activeRowElementRef.current !== rowElement\n      ) {\n        delete activeRowElementRef.current.dataset.tableResizing;\n      }\n\n      activeRowElementRef.current = rowElement;\n\n      if (rowElement) {\n        rowElement.dataset.tableResizing = 'true';\n      }\n\n      cleanupListenersRef.current?.();\n\n      if (direction !== 'bottom') {\n        freezeRowHeights();\n      }\n\n      const handlePointerMove = (pointerEvent: PointerEvent) => {\n        applyResize(pointerEvent, false);\n      };\n\n      const handlePointerEnd = (pointerEvent: PointerEvent) => {\n        applyResize(pointerEvent, true);\n        stopResize();\n      };\n\n      window.addEventListener('pointermove', handlePointerMove);\n      window.addEventListener('pointerup', handlePointerEnd);\n      window.addEventListener('pointercancel', handlePointerEnd);\n\n      cleanupListenersRef.current = () => {\n        window.removeEventListener('pointermove', handlePointerMove);\n        window.removeEventListener('pointerup', handlePointerEnd);\n        window.removeEventListener('pointercancel', handlePointerEnd);\n      };\n\n      if (deferColumnResize && direction !== 'bottom') {\n        hideResizeIndicator();\n        showDeferredResizeIndicator(\n          direction === 'left'\n            ? controlColumnWidth\n            : getColumnBoundaryOffset(\n                colIndex,\n                effectiveColSizesRef.current[colIndex] ??\n                  TABLE_DEFAULT_COLUMN_WIDTH\n              )\n        );\n      } else {\n        showResizeIndicator({ direction, event });\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [\n      controlColumnWidth,\n      deferColumnResize,\n      getColumnBoundaryOffset,\n      hideResizeIndicator,\n      showDeferredResizeIndicator,\n      showResizeIndicator,\n      stopResize,\n      tableRef,\n      applyResize,\n      freezeRowHeights,\n    ]\n  );\n\n  return React.useMemo(\n    () => ({\n      clearResizePreview,\n      disableMarginLeft,\n      setResizePreview,\n      startResize,\n    }),\n    [clearResizePreview, disableMarginLeft, setResizePreview, startResize]\n  );\n}\n\nexport const TableElement = withHOC(\n  TableProvider,\n  function TableElement({\n    children,\n    ...props\n  }: PlateElementProps<TTableElement>) {\n    const readOnly = useReadOnly();\n    const isSelectionAreaVisible = usePluginOption(\n      BlockSelectionPlugin,\n      'isSelectionAreaVisible'\n    );\n    const hasControls = !readOnly && !isSelectionAreaVisible;\n    const { marginLeft, props: tableProps } = useTableElement();\n    const colSizes = useTableColSizes();\n    const controlColumnWidth = hasControls ? TABLE_CONTROL_COLUMN_WIDTH : 0;\n    const dragIndicatorRef = React.useRef<HTMLDivElement>(null);\n    const hoverIndicatorRef = React.useRef<HTMLDivElement>(null);\n    const deferColumnResize =\n      colSizes.length * props.element.children.length >\n      TABLE_DEFERRED_COLUMN_RESIZE_CELL_COUNT;\n    const tablePath = useElementSelector(([, path]) => path, [], {\n      key: KEYS.table,\n    });\n    const tableRef = React.useRef<HTMLTableElement>(null);\n    const wrapperRef = React.useRef<HTMLDivElement>(null);\n    useTableSelectionDom(tableRef);\n    const resizeController = useTableResizeController({\n      controlColumnWidth,\n      deferColumnResize,\n      dragIndicatorRef,\n      hoverIndicatorRef,\n      marginLeft,\n      tablePath,\n      tableRef,\n      wrapperRef,\n    });\n    const resolvedColSizes = React.useMemo(() => {\n      if (colSizes.length > 0) {\n        return colSizes.map((colSize) => colSize || TABLE_DEFAULT_COLUMN_WIDTH);\n      }\n\n      return Array.from(\n        { length: getTableColumnCount(props.element) },\n        () => TABLE_DEFAULT_COLUMN_WIDTH\n      );\n    }, [colSizes, props.element]);\n    const tableVariableStyle = React.useMemo(() => {\n      if (resolvedColSizes.length === 0) {\n        return;\n      }\n\n      return {\n        ...Object.fromEntries(\n          resolvedColSizes.map((colSize, index) => [\n            `--table-col-${index}`,\n            `${colSize}px`,\n          ])\n        ),\n      } as React.CSSProperties;\n    }, [resolvedColSizes]);\n    const tableStyle = React.useMemo(\n      () =>\n        ({\n          width: `${\n            resolvedColSizes.reduce((total, colSize) => total + colSize, 0) +\n            controlColumnWidth\n          }px`,\n        }) as React.CSSProperties,\n      [controlColumnWidth, resolvedColSizes]\n    );\n\n    const isSelectingTable = useBlockSelected(props.element.id as string);\n\n    const content = (\n      <PlateElement\n        {...props}\n        className={cn(\n          'overflow-x-auto py-5',\n          hasControls && '-ml-2 *:data-[slot=block-selection]:left-2'\n        )}\n        style={{ paddingLeft: marginLeft }}\n      >\n        <TableResizeContext.Provider value={resizeController}>\n          <div\n            ref={wrapperRef}\n            className=\"group/table relative w-fit\"\n            style={tableVariableStyle}\n          >\n            <div\n              ref={dragIndicatorRef}\n              className=\"-translate-x-[1.5px] pointer-events-none absolute inset-y-0 z-36 hidden w-[3px] bg-ring/70\"\n              contentEditable={false}\n            />\n            <div\n              ref={hoverIndicatorRef}\n              className=\"-translate-x-[1.5px] pointer-events-none absolute inset-y-0 z-35 hidden w-[3px] bg-ring/80\"\n              contentEditable={false}\n            />\n            <table\n              ref={tableRef}\n              className={cn(\n                'mr-0 ml-px table h-px table-fixed border-collapse',\n                'data-[table-selecting=true]:[&_*::selection]:!bg-transparent',\n                'data-[table-selecting=true]:[&_*::selection]:!text-inherit',\n                'data-[table-selecting=true]:[&_*::-moz-selection]:!bg-transparent',\n                'data-[table-selecting=true]:[&_*::-moz-selection]:!text-inherit',\n                'data-[table-selecting=true]:[&_*]:!caret-transparent'\n              )}\n              style={tableStyle}\n              {...tableProps}\n            >\n              {resolvedColSizes.length > 0 && (\n                <colgroup>\n                  {hasControls && (\n                    <col\n                      style={{\n                        maxWidth: TABLE_CONTROL_COLUMN_WIDTH,\n                        minWidth: TABLE_CONTROL_COLUMN_WIDTH,\n                        width: TABLE_CONTROL_COLUMN_WIDTH,\n                      }}\n                    />\n                  )}\n                  {resolvedColSizes.map((colSize, index) => (\n                    <col\n                      key={index}\n                      style={{\n                        maxWidth: colSize,\n                        minWidth: colSize,\n                        width: colSize,\n                      }}\n                    />\n                  ))}\n                </colgroup>\n              )}\n              <tbody className=\"min-w-full\">{children}</tbody>\n            </table>\n\n            {isSelectingTable && (\n              <div\n                className={blockSelectionVariants()}\n                contentEditable={false}\n              />\n            )}\n          </div>\n        </TableResizeContext.Provider>\n      </PlateElement>\n    );\n\n    if (readOnly) {\n      return content;\n    }\n\n    return <TableFloatingToolbar>{content}</TableFloatingToolbar>;\n  }\n);\n\nfunction TableFloatingToolbar({\n  children,\n  ...props\n}: React.ComponentProps<typeof PopoverContent>) {\n  const selectedCellCount = useEditorSelector(\n    (editor) =>\n      editor.getApi(TablePlugin).table.getSelectedCellIds()?.length ?? 0,\n    []\n  );\n  const selected = useSelected();\n  const isFocusedLast = useFocusedLast();\n  const [isExpandedSelectionToolbarReady, setIsExpandedSelectionToolbarReady] =\n    React.useState(false);\n  // `getSelectedCellIds` only reports cells once a range spans more than one\n  // cell, so a count of zero means the selection (a caret or an expanded\n  // range) is confined to a single cell. Gating on it instead of\n  // `editor.api.isCollapsed()` keeps the row/column controls available while a\n  // cell's content is fully selected (e.g. select-all inside a cell), not just\n  // while the caret is collapsed in it.\n  const isSingleCellToolbarOpen =\n    isFocusedLast && selected && selectedCellCount === 0;\n  const isExpandedSelectionPending = isFocusedLast && selectedCellCount > 1;\n\n  React.useEffect(() => {\n    if (!isExpandedSelectionPending) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Reset the delayed toolbar gate when selection is no longer expanded.\n      setIsExpandedSelectionToolbarReady(false);\n\n      return;\n    }\n\n    const timeoutId = window.setTimeout(() => {\n      setIsExpandedSelectionToolbarReady(true);\n    }, TABLE_MULTI_SELECTION_TOOLBAR_DELAY_MS);\n\n    return () => {\n      window.clearTimeout(timeoutId);\n    };\n  }, [isExpandedSelectionPending]);\n\n  const shouldRenderExpandedSelectionToolbar =\n    isExpandedSelectionToolbarReady && isExpandedSelectionPending;\n  const isToolbarOpen =\n    isSingleCellToolbarOpen || shouldRenderExpandedSelectionToolbar;\n\n  return (\n    <Popover open={isToolbarOpen} modal={false}>\n      <PopoverAnchor asChild>{children}</PopoverAnchor>\n      {isSingleCellToolbarOpen && (\n        <SingleCellTableFloatingToolbarContent {...props} />\n      )}\n      {shouldRenderExpandedSelectionToolbar && (\n        <ExpandedSelectionTableFloatingToolbarContent {...props} />\n      )}\n    </Popover>\n  );\n}\n\nfunction ExpandedSelectionTableFloatingToolbarContent(\n  props: React.ComponentProps<typeof PopoverContent>\n) {\n  const { tf } = useEditorPlugin(TablePlugin);\n  const { canMerge, canSplit } = useTableMergeState();\n\n  if (!canMerge && !canSplit) return null;\n\n  return (\n    <TableFloatingToolbarContent\n      canMerge={canMerge}\n      canSplit={canSplit}\n      onMerge={() => tf.table.merge()}\n      onSplit={() => tf.table.split()}\n      {...props}\n    />\n  );\n}\n\nfunction SingleCellTableFloatingToolbarContent(\n  props: React.ComponentProps<typeof PopoverContent>\n) {\n  const { tf } = useEditorPlugin(TablePlugin);\n  const element = useElement<TTableElement>();\n  const { props: buttonProps } = useRemoveNodeButton({ element });\n  const { canSplit } = useTableMergeState();\n\n  return (\n    <TableFloatingToolbarContent\n      buttonProps={buttonProps}\n      canSplit={canSplit}\n      singleCellMode\n      onDeleteColumn={() => {\n        tf.remove.tableColumn();\n      }}\n      onDeleteRow={() => {\n        tf.remove.tableRow();\n      }}\n      onInsertColumnAfter={() => {\n        tf.insert.tableColumn();\n      }}\n      onInsertColumnBefore={() => {\n        tf.insert.tableColumn({ before: true });\n      }}\n      onInsertRowAfter={() => {\n        tf.insert.tableRow();\n      }}\n      onInsertRowBefore={() => {\n        tf.insert.tableRow({ before: true });\n      }}\n      onSplit={() => tf.table.split()}\n      {...props}\n    />\n  );\n}\n\nfunction TableFloatingToolbarContent({\n  buttonProps,\n  canMerge = false,\n  canSplit = false,\n  singleCellMode = false,\n  onDeleteColumn,\n  onDeleteRow,\n  onInsertColumnAfter,\n  onInsertColumnBefore,\n  onInsertRowAfter,\n  onInsertRowBefore,\n  onMerge,\n  onSplit,\n  ...props\n}: React.ComponentProps<typeof PopoverContent> & {\n  buttonProps?: React.ComponentProps<typeof ToolbarButton>;\n  canMerge?: boolean;\n  canSplit?: boolean;\n  singleCellMode?: boolean;\n  onDeleteColumn?: () => void;\n  onDeleteRow?: () => void;\n  onInsertColumnAfter?: () => void;\n  onInsertColumnBefore?: () => void;\n  onInsertRowAfter?: () => void;\n  onInsertRowBefore?: () => void;\n  onMerge?: () => void;\n  onSplit?: () => void;\n}) {\n  return (\n    <PopoverContent\n      asChild\n      onOpenAutoFocus={(e) => e.preventDefault()}\n      contentEditable={false}\n      {...props}\n    >\n      <Toolbar\n        className=\"scrollbar-hide flex w-auto max-w-[80vw] flex-row overflow-x-auto rounded-md border bg-popover p-1 shadow-md print:hidden\"\n        contentEditable={false}\n      >\n        <ToolbarGroup>\n          <ColorDropdownMenu tooltip=\"Background color\">\n            <PaintBucketIcon />\n          </ColorDropdownMenu>\n          {canMerge && onMerge && (\n            <ToolbarButton\n              onClick={onMerge}\n              onMouseDown={(e) => e.preventDefault()}\n              tooltip=\"Merge cells\"\n            >\n              <CombineIcon />\n            </ToolbarButton>\n          )}\n          {canSplit && onSplit && (\n            <ToolbarButton\n              onClick={onSplit}\n              onMouseDown={(e) => e.preventDefault()}\n              tooltip=\"Split cell\"\n            >\n              <SquareSplitHorizontalIcon />\n            </ToolbarButton>\n          )}\n\n          <DropdownMenu modal={false}>\n            <DropdownMenuTrigger asChild>\n              <ToolbarButton tooltip=\"Cell borders\">\n                <Grid2X2Icon />\n              </ToolbarButton>\n            </DropdownMenuTrigger>\n\n            <DropdownMenuPortal>\n              <TableBordersDropdownMenuContent />\n            </DropdownMenuPortal>\n          </DropdownMenu>\n\n          {singleCellMode && (\n            <ToolbarGroup>\n              <ToolbarButton tooltip=\"Delete table\" {...buttonProps}>\n                <Trash2Icon />\n              </ToolbarButton>\n            </ToolbarGroup>\n          )}\n        </ToolbarGroup>\n\n        {singleCellMode && (\n          <ToolbarGroup>\n            <ToolbarButton\n              onClick={onInsertRowBefore}\n              onMouseDown={(e) => e.preventDefault()}\n              tooltip=\"Insert row before\"\n            >\n              <ArrowUp />\n            </ToolbarButton>\n            <ToolbarButton\n              onClick={onInsertRowAfter}\n              onMouseDown={(e) => e.preventDefault()}\n              tooltip=\"Insert row after\"\n            >\n              <ArrowDown />\n            </ToolbarButton>\n            <ToolbarButton\n              onClick={onDeleteRow}\n              onMouseDown={(e) => e.preventDefault()}\n              tooltip=\"Delete row\"\n            >\n              <XIcon />\n            </ToolbarButton>\n          </ToolbarGroup>\n        )}\n\n        {singleCellMode && (\n          <ToolbarGroup>\n            <ToolbarButton\n              onClick={onInsertColumnBefore}\n              onMouseDown={(e) => e.preventDefault()}\n              tooltip=\"Insert column before\"\n            >\n              <ArrowLeft />\n            </ToolbarButton>\n            <ToolbarButton\n              onClick={onInsertColumnAfter}\n              onMouseDown={(e) => e.preventDefault()}\n              tooltip=\"Insert column after\"\n            >\n              <ArrowRight />\n            </ToolbarButton>\n            <ToolbarButton\n              onClick={onDeleteColumn}\n              onMouseDown={(e) => e.preventDefault()}\n              tooltip=\"Delete column\"\n            >\n              <XIcon />\n            </ToolbarButton>\n          </ToolbarGroup>\n        )}\n      </Toolbar>\n    </PopoverContent>\n  );\n}\n\nfunction TableBordersDropdownMenuContent(\n  props: React.ComponentProps<typeof DropdownMenuContent>\n) {\n  const editor = useEditorRef();\n  const {\n    getOnSelectTableBorder,\n    hasBottomBorder,\n    hasLeftBorder,\n    hasNoBorders,\n    hasOuterBorders,\n    hasRightBorder,\n    hasTopBorder,\n  } = useTableBordersDropdownMenuContentState();\n\n  return (\n    <DropdownMenuContent\n      className=\"min-w-[220px]\"\n      onCloseAutoFocus={(e) => {\n        e.preventDefault();\n        editor.tf.focus();\n      }}\n      align=\"start\"\n      side=\"right\"\n      sideOffset={0}\n      {...props}\n    >\n      <DropdownMenuGroup>\n        <DropdownMenuCheckboxItem\n          checked={hasTopBorder}\n          onCheckedChange={getOnSelectTableBorder('top')}\n        >\n          <BorderTopIcon />\n          <div>Top Border</div>\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={hasRightBorder}\n          onCheckedChange={getOnSelectTableBorder('right')}\n        >\n          <BorderRightIcon />\n          <div>Right Border</div>\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={hasBottomBorder}\n          onCheckedChange={getOnSelectTableBorder('bottom')}\n        >\n          <BorderBottomIcon />\n          <div>Bottom Border</div>\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={hasLeftBorder}\n          onCheckedChange={getOnSelectTableBorder('left')}\n        >\n          <BorderLeftIcon />\n          <div>Left Border</div>\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuGroup>\n\n      <DropdownMenuGroup>\n        <DropdownMenuCheckboxItem\n          checked={hasNoBorders}\n          onCheckedChange={getOnSelectTableBorder('none')}\n        >\n          <BorderNoneIcon />\n          <div>No Border</div>\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={hasOuterBorders}\n          onCheckedChange={getOnSelectTableBorder('outer')}\n        >\n          <BorderAllIcon />\n          <div>Outside Borders</div>\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuGroup>\n    </DropdownMenuContent>\n  );\n}\n\nfunction ColorDropdownMenu({\n  children,\n  tooltip,\n}: {\n  children: React.ReactNode;\n  tooltip: string;\n}) {\n  const [open, setOpen] = React.useState(false);\n\n  const editor = useEditorRef();\n\n  const onUpdateColor = React.useCallback(\n    (color: string) => {\n      setOpen(false);\n      setCellBackground(editor, {\n        color,\n        selectedCells:\n          editor.getApi(TablePlugin).table.getSelectedCells() ?? [],\n      });\n    },\n    [editor]\n  );\n\n  const onClearColor = React.useCallback(() => {\n    setOpen(false);\n    setCellBackground(editor, {\n      color: null,\n      selectedCells: editor.getApi(TablePlugin).table.getSelectedCells() ?? [],\n    });\n  }, [editor]);\n\n  return (\n    <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton tooltip={tooltip}>{children}</ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent align=\"start\">\n        <ToolbarMenuGroup label=\"Colors\">\n          <ColorDropdownMenuItems\n            className=\"px-2\"\n            colors={DEFAULT_COLORS}\n            updateColor={onUpdateColor}\n          />\n        </ToolbarMenuGroup>\n        <DropdownMenuGroup>\n          <DropdownMenuItem className=\"p-2\" onClick={onClearColor}>\n            <EraserIcon />\n            <span>Clear</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nexport function TableRowElement({\n  children,\n  ...props\n}: PlateElementProps<TTableRowElement>) {\n  const { element } = props;\n  const readOnly = useReadOnly();\n  const editor = useEditorRef();\n  const rowIndex = useElementSelector(([, path]) => path.at(-1) as number, [], {\n    key: KEYS.tr,\n  });\n  const rowSize = useElementSelector(\n    ([node]) => (node as TTableRowElement).size,\n    [],\n    {\n      key: KEYS.tr,\n    }\n  );\n  const rowSizeOverrides = useTableValue('rowSizeOverrides');\n  const rowMinHeight = rowSizeOverrides.get?.(rowIndex) ?? rowSize;\n  const isSelectionAreaVisible = usePluginOption(\n    BlockSelectionPlugin,\n    'isSelectionAreaVisible'\n  );\n  const hasControls = !readOnly && !isSelectionAreaVisible;\n\n  const { isDragging, nodeRef, previewRef, handleRef } = useDraggable({\n    element,\n    type: element.type,\n    canDropNode: ({ dragEntry, dropEntry }) =>\n      PathApi.equals(\n        PathApi.parent(dragEntry[1]),\n        PathApi.parent(dropEntry[1])\n      ),\n    onDropHandler: (_, { dragItem }) => {\n      const dragElement = (dragItem as { element: TElement }).element;\n\n      if (dragElement) {\n        editor.tf.select(dragElement);\n      }\n    },\n  });\n\n  return (\n    <PlateElement\n      {...props}\n      ref={useComposedRef(props.ref, previewRef, nodeRef)}\n      as=\"tr\"\n      className={cn('group/row', isDragging && 'opacity-50')}\n      style={\n        {\n          ...props.style,\n          '--tableRowMinHeight': rowMinHeight ? `${rowMinHeight}px` : undefined,\n        } as React.CSSProperties\n      }\n    >\n      {hasControls && (\n        <td\n          className=\"w-2 min-w-2 max-w-2 select-none p-0\"\n          contentEditable={false}\n        >\n          <RowDragHandle dragRef={handleRef} />\n          <RowDropLine />\n        </td>\n      )}\n\n      {children}\n    </PlateElement>\n  );\n}\n\nfunction useTableCellPresentation(element: TTableCellElement) {\n  const { api } = useEditorPlugin(TablePlugin);\n  const borders = useTableCellBorders({ element });\n  const { col, row } = useCellIndices();\n\n  const colSpan = api.table.getColSpan(element);\n  const rowSpan = api.table.getRowSpan(element);\n  const width = React.useMemo(() => {\n    const terms = Array.from(\n      { length: colSpan },\n      (_, offset) => `var(--table-col-${col + offset}, 120px)`\n    );\n\n    return terms.length === 1 ? terms[0]! : `calc(${terms.join(' + ')})`;\n  }, [col, colSpan]);\n\n  return {\n    borders,\n    colIndex: col + colSpan - 1,\n    colSpan,\n    rowIndex: row + rowSpan - 1,\n    rowSpan,\n    width,\n  };\n}\n\nfunction RowDragHandle({ dragRef }: { dragRef: React.Ref<any> }) {\n  const editor = useEditorRef();\n  const element = useElement();\n\n  return (\n    <Button\n      ref={dragRef}\n      variant=\"outline\"\n      className={cn(\n        '-translate-y-1/2 absolute top-1/2 left-0 z-51 h-6 w-4 p-0 focus-visible:ring-0 focus-visible:ring-offset-0',\n        'cursor-grab active:cursor-grabbing',\n        'opacity-0 transition-opacity duration-100 group-hover/row:opacity-100 group-data-[table-resizing=true]/row:opacity-0'\n      )}\n      onClick={() => {\n        editor.tf.select(element);\n      }}\n    >\n      <GripVertical className=\"text-muted-foreground\" />\n    </Button>\n  );\n}\n\nfunction RowDropLine() {\n  const { dropLine } = useDropLine();\n\n  if (!dropLine) return null;\n\n  return (\n    <div\n      className={cn(\n        'absolute inset-x-0 left-2 z-50 h-0.5 bg-brand/50',\n        dropLine === 'top' ? '-top-px' : '-bottom-px'\n      )}\n    />\n  );\n}\n\nexport function TableCellElement({\n  isHeader,\n  ...props\n}: PlateElementProps<TTableCellElement> & {\n  isHeader?: boolean;\n}) {\n  const readOnly = useReadOnly();\n  const element = props.element;\n\n  const tableId = useElementSelector(([node]) => node.id as string, [], {\n    key: KEYS.table,\n  });\n  const rowId = useElementSelector(([node]) => node.id as string, [], {\n    key: KEYS.tr,\n  });\n  const isSelectingTable = useBlockSelected(tableId);\n  const isSelectingRow = useBlockSelected(rowId) || isSelectingTable;\n  const isSelectionAreaVisible = usePluginOption(\n    BlockSelectionPlugin,\n    'isSelectionAreaVisible'\n  );\n\n  const { borders, colIndex, colSpan, rowIndex, rowSpan, width } =\n    useTableCellPresentation(element);\n\n  return (\n    <PlateElement\n      {...props}\n      as={isHeader ? 'th' : 'td'}\n      className={cn(\n        'relative h-full overflow-visible border-none bg-background p-0',\n        element.background ? 'bg-(--cellBackground)' : 'bg-background',\n        isHeader && 'text-left *:m-0',\n        'before:size-full',\n        'data-[table-cell-selected=true]:before:z-10',\n        'data-[table-cell-selected=true]:before:bg-brand/5',\n        \"before:absolute before:box-border before:select-none before:content-['']\",\n        borders.bottom?.size && 'before:border-b before:border-b-border',\n        borders.right?.size && 'before:border-r before:border-r-border',\n        borders.left?.size && 'before:border-l before:border-l-border',\n        borders.top?.size && 'before:border-t before:border-t-border'\n      )}\n      style={\n        {\n          '--cellBackground': element.background,\n          maxWidth: width,\n          minWidth: width,\n        } as React.CSSProperties\n      }\n      attributes={{\n        ...props.attributes,\n        colSpan,\n        'data-table-cell-id': element.id,\n        rowSpan,\n      }}\n    >\n      <div\n        className=\"relative z-20 box-border h-full px-3 py-2\"\n        style={\n          rowSpan === 1\n            ? { minHeight: 'var(--tableRowMinHeight, 0px)' }\n            : undefined\n        }\n      >\n        {props.children}\n      </div>\n\n      {!readOnly && !isSelectionAreaVisible && (\n        <TableCellResizeControls colIndex={colIndex} rowIndex={rowIndex} />\n      )}\n\n      {isSelectingRow && (\n        <div className={blockSelectionVariants()} contentEditable={false} />\n      )}\n    </PlateElement>\n  );\n}\n\nexport function TableCellHeaderElement(\n  props: React.ComponentProps<typeof TableCellElement>\n) {\n  return <TableCellElement {...props} isHeader />;\n}\n\nconst TableCellResizeControls = React.memo(function TableCellResizeControls({\n  colIndex,\n  rowIndex,\n}: {\n  colIndex: number;\n  rowIndex: number;\n}) {\n  const {\n    clearResizePreview,\n    disableMarginLeft,\n    setResizePreview,\n    startResize,\n  } = useTableResizeContext();\n  const rightHandleKey = `right:${rowIndex}:${colIndex}`;\n  const bottomHandleKey = `bottom:${rowIndex}:${colIndex}`;\n  const leftHandleKey = `left:${rowIndex}:${colIndex}`;\n  const isLeftHandle = colIndex === 0 && !disableMarginLeft;\n\n  return (\n    <div\n      className=\"group/resize pointer-events-none absolute inset-0 z-30 select-none\"\n      contentEditable={false}\n      suppressContentEditableWarning={true}\n    >\n      <div\n        className=\"-top-2 -right-1 pointer-events-auto absolute z-40 h-[calc(100%_+_8px)] w-2 cursor-col-resize touch-none\"\n        onPointerEnter={(event) => {\n          setResizePreview(event, {\n            colIndex,\n            direction: 'right',\n            handleKey: rightHandleKey,\n            rowIndex,\n          });\n        }}\n        onPointerLeave={() => {\n          clearResizePreview(rightHandleKey);\n        }}\n        onPointerDown={(event) => {\n          startResize(event, {\n            colIndex,\n            direction: 'right',\n            handleKey: rightHandleKey,\n            rowIndex,\n          });\n        }}\n      />\n      <div\n        className=\"-bottom-1 pointer-events-auto absolute left-0 z-40 h-2 w-full cursor-row-resize touch-none\"\n        onPointerEnter={(event) => {\n          setResizePreview(event, {\n            colIndex,\n            direction: 'bottom',\n            handleKey: bottomHandleKey,\n            rowIndex,\n          });\n        }}\n        onPointerLeave={() => {\n          clearResizePreview(bottomHandleKey);\n        }}\n        onPointerDown={(event) => {\n          startResize(event, {\n            colIndex,\n            direction: 'bottom',\n            handleKey: bottomHandleKey,\n            rowIndex,\n          });\n        }}\n      />\n      {isLeftHandle && (\n        <div\n          className=\"-left-1 pointer-events-auto absolute top-0 z-40 h-full w-2 cursor-col-resize touch-none\"\n          onPointerEnter={(event) => {\n            setResizePreview(event, {\n              colIndex,\n              direction: 'left',\n              handleKey: leftHandleKey,\n              rowIndex,\n            });\n          }}\n          onPointerLeave={() => {\n            clearResizePreview(leftHandleKey);\n          }}\n          onPointerDown={(event) => {\n            startResize(event, {\n              colIndex,\n              direction: 'left',\n              handleKey: leftHandleKey,\n              rowIndex,\n            });\n          }}\n        />\n      )}\n    </div>\n  );\n});\n\nTableCellResizeControls.displayName = 'TableCellResizeControls';\n",
      "type": "registry:ui"
    },
    {
      "path": "src/registry/ui/table-icons.tsx",
      "content": "'use client';\n\nimport type { LucideProps } from 'lucide-react';\n\nexport function BorderAllIcon(props: LucideProps) {\n  return (\n    <svg\n      fill=\"none\"\n      height=\"15\"\n      viewBox=\"0 0 15 15\"\n      width=\"15\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <title>Border All</title>\n      <path\n        clipRule=\"evenodd\"\n        d=\"M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25H14C14.4142 0.25 14.75 0.585786 14.75 1V14C14.75 14.4142 14.4142 14.75 14 14.75H1C0.585786 14.75 0.25 14.4142 0.25 14V1ZM1.75 1.75V13.25H13.25V1.75H1.75Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"5\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"3\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"7\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"5\" y=\"7\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"3\" y=\"7\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"9\" y=\"7\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"11\" y=\"7\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"9\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"11\" />\n    </svg>\n  );\n}\n\nexport function BorderBottomIcon(props: LucideProps) {\n  return (\n    <svg\n      fill=\"none\"\n      height=\"15\"\n      viewBox=\"0 0 15 15\"\n      width=\"15\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <title>Border Bottom</title>\n      <path\n        clipRule=\"evenodd\"\n        d=\"M1 13.25L14 13.25V14.75L1 14.75V13.25Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"5\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"13\" y=\"5\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"3\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"13\" y=\"3\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"7\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"1\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"13\" y=\"7\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"13\" y=\"1\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"5\" y=\"7\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"5\" y=\"1\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"3\" y=\"7\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"3\" y=\"1\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"9\" y=\"7\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"9\" y=\"1\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"11\" y=\"7\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"11\" y=\"1\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"9\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"13\" y=\"9\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"11\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"13\" y=\"11\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"1\" y=\"5\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"1\" y=\"3\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"1\" y=\"7\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"1\" y=\"1\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"1\" y=\"9\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"1\" y=\"11\" />\n    </svg>\n  );\n}\n\nexport function BorderLeftIcon(props: LucideProps) {\n  return (\n    <svg\n      fill=\"none\"\n      height=\"15\"\n      viewBox=\"0 0 15 15\"\n      width=\"15\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <title>Border Left</title>\n      <path\n        clipRule=\"evenodd\"\n        d=\"M1.75 1L1.75 14L0.249999 14L0.25 1L1.75 1Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 10 7)\"\n        width=\"1\"\n        x=\"10\"\n        y=\"7\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 10 13)\"\n        width=\"1\"\n        x=\"10\"\n        y=\"13\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 12 7)\"\n        width=\"1\"\n        x=\"12\"\n        y=\"7\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 12 13)\"\n        width=\"1\"\n        x=\"12\"\n        y=\"13\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 8 7)\"\n        width=\"1\"\n        x=\"8\"\n        y=\"7\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 14 7)\"\n        width=\"1\"\n        x=\"14\"\n        y=\"7\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 8 13)\"\n        width=\"1\"\n        x=\"8\"\n        y=\"13\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 14 13)\"\n        width=\"1\"\n        x=\"14\"\n        y=\"13\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 8 5)\"\n        width=\"1\"\n        x=\"8\"\n        y=\"5\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 14 5)\"\n        width=\"1\"\n        x=\"14\"\n        y=\"5\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 8 3)\"\n        width=\"1\"\n        x=\"8\"\n        y=\"3\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 14 3)\"\n        width=\"1\"\n        x=\"14\"\n        y=\"3\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 8 9)\"\n        width=\"1\"\n        x=\"8\"\n        y=\"9\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 14 9)\"\n        width=\"1\"\n        x=\"14\"\n        y=\"9\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 8 11)\"\n        width=\"1\"\n        x=\"8\"\n        y=\"11\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 14 11)\"\n        width=\"1\"\n        x=\"14\"\n        y=\"11\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 6 7)\"\n        width=\"1\"\n        x=\"6\"\n        y=\"7\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 6 13)\"\n        width=\"1\"\n        x=\"6\"\n        y=\"13\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 4 7)\"\n        width=\"1\"\n        x=\"4\"\n        y=\"7\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 4 13)\"\n        width=\"1\"\n        x=\"4\"\n        y=\"13\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 10 1)\"\n        width=\"1\"\n        x=\"10\"\n        y=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 12 1)\"\n        width=\"1\"\n        x=\"12\"\n        y=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 8 1)\"\n        width=\"1\"\n        x=\"8\"\n        y=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 14 1)\"\n        width=\"1\"\n        x=\"14\"\n        y=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 6 1)\"\n        width=\"1\"\n        x=\"6\"\n        y=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(90 4 1)\"\n        width=\"1\"\n        x=\"4\"\n        y=\"1\"\n      />\n    </svg>\n  );\n}\n\nexport function BorderNoneIcon(props: LucideProps) {\n  return (\n    <svg\n      fill=\"none\"\n      height=\"15\"\n      viewBox=\"0 0 15 15\"\n      width=\"15\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <title>Border None</title>\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"5.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"13\" y=\"5.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"3.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"13\" y=\"3.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"7.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"13.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"1.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"13\" y=\"7.025\" />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        width=\"1\"\n        x=\"13\"\n        y=\"13.025\"\n      />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"13\" y=\"1.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"5\" y=\"7.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"5\" y=\"13.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"5\" y=\"1.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"3\" y=\"7.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"3\" y=\"13.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"3\" y=\"1.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"9\" y=\"7.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"9\" y=\"13.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"9\" y=\"1.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"11\" y=\"7.025\" />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        width=\"1\"\n        x=\"11\"\n        y=\"13.025\"\n      />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"11\" y=\"1.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"9.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"13\" y=\"9.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"7\" y=\"11.025\" />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        width=\"1\"\n        x=\"13\"\n        y=\"11.025\"\n      />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"1\" y=\"5.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"1\" y=\"3.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"1\" y=\"7.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"1\" y=\"13.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"1\" y=\"1.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"1\" y=\"9.025\" />\n      <rect fill=\"currentColor\" height=\"1\" rx=\".5\" width=\"1\" x=\"1\" y=\"11.025\" />\n    </svg>\n  );\n}\n\nexport function BorderRightIcon(props: LucideProps) {\n  return (\n    <svg\n      fill=\"none\"\n      height=\"15\"\n      viewBox=\"0 0 15 15\"\n      width=\"15\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <title>Border Right</title>\n      <path\n        clipRule=\"evenodd\"\n        d=\"M13.25 1L13.25 14L14.75 14L14.75 1L13.25 1Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 5 7)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 5 13)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 3 7)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 3 13)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 7 7)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 1 7)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 7 13)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 1 13)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 7 5)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 1 5)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 7 3)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 1 3)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 7 9)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 1 9)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 7 11)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 1 11)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 9 7)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 9 13)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 11 7)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 11 13)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 5 1)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 3 1)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 7 1)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 1 1)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 9 1)\"\n        width=\"1\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"matrix(0 1 1 0 11 1)\"\n        width=\"1\"\n      />\n    </svg>\n  );\n}\n\nexport function BorderTopIcon(props: LucideProps) {\n  return (\n    <svg\n      fill=\"none\"\n      height=\"15\"\n      viewBox=\"0 0 15 15\"\n      width=\"15\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <title>Border Top</title>\n      <path\n        clipRule=\"evenodd\"\n        d=\"M14 1.75L1 1.75L1 0.249999L14 0.25L14 1.75Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 8 10)\"\n        width=\"1\"\n        x=\"8\"\n        y=\"10\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 2 10)\"\n        width=\"1\"\n        x=\"2\"\n        y=\"10\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 8 12)\"\n        width=\"1\"\n        x=\"8\"\n        y=\"12\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 2 12)\"\n        width=\"1\"\n        x=\"2\"\n        y=\"12\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 8 8)\"\n        width=\"1\"\n        x=\"8\"\n        y=\"8\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 8 14)\"\n        width=\"1\"\n        x=\"8\"\n        y=\"14\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 2 8)\"\n        width=\"1\"\n        x=\"2\"\n        y=\"8\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 2 14)\"\n        width=\"1\"\n        x=\"2\"\n        y=\"14\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 10 8)\"\n        width=\"1\"\n        x=\"10\"\n        y=\"8\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 10 14)\"\n        width=\"1\"\n        x=\"10\"\n        y=\"14\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 12 8)\"\n        width=\"1\"\n        x=\"12\"\n        y=\"8\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 12 14)\"\n        width=\"1\"\n        x=\"12\"\n        y=\"14\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 6 8)\"\n        width=\"1\"\n        x=\"6\"\n        y=\"8\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 6 14)\"\n        width=\"1\"\n        x=\"6\"\n        y=\"14\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 4 8)\"\n        width=\"1\"\n        x=\"4\"\n        y=\"8\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 4 14)\"\n        width=\"1\"\n        x=\"4\"\n        y=\"14\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 8 6)\"\n        width=\"1\"\n        x=\"8\"\n        y=\"6\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 2 6)\"\n        width=\"1\"\n        x=\"2\"\n        y=\"6\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 8 4)\"\n        width=\"1\"\n        x=\"8\"\n        y=\"4\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 2 4)\"\n        width=\"1\"\n        x=\"2\"\n        y=\"4\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 14 10)\"\n        width=\"1\"\n        x=\"14\"\n        y=\"10\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 14 12)\"\n        width=\"1\"\n        x=\"14\"\n        y=\"12\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 14 8)\"\n        width=\"1\"\n        x=\"14\"\n        y=\"8\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 14 14)\"\n        width=\"1\"\n        x=\"14\"\n        y=\"14\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 14 6)\"\n        width=\"1\"\n        x=\"14\"\n        y=\"6\"\n      />\n      <rect\n        fill=\"currentColor\"\n        height=\"1\"\n        rx=\".5\"\n        transform=\"rotate(-180 14 4)\"\n        width=\"1\"\n        x=\"14\"\n        y=\"4\"\n      />\n    </svg>\n  );\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "src/registry/ui/table-node-static.tsx",
      "content": "import * as React from 'react';\n\nimport type { TTableCellElement, TTableElement } from 'platejs';\nimport type { SlateElementProps } from 'platejs/static';\n\nimport { BaseTablePlugin } from '@platejs/table';\nimport { SlateElement } from 'platejs/static';\n\nimport { cn } from '@/lib/utils';\n\nexport function TableElementStatic({\n  children,\n  ...props\n}: SlateElementProps<TTableElement>) {\n  const { disableMarginLeft } = props.editor.getOptions(BaseTablePlugin);\n  const marginLeft = disableMarginLeft ? 0 : props.element.marginLeft;\n\n  return (\n    <SlateElement\n      {...props}\n      className=\"overflow-x-auto py-5\"\n      style={{ paddingLeft: marginLeft }}\n    >\n      <div className=\"group/table relative w-fit\">\n        <table\n          className=\"mr-0 ml-px table h-px table-fixed border-collapse\"\n          style={{ borderCollapse: 'collapse', width: '100%' }}\n        >\n          <tbody className=\"min-w-full\">{children}</tbody>\n        </table>\n      </div>\n    </SlateElement>\n  );\n}\n\nexport function TableRowElementStatic(props: SlateElementProps) {\n  return (\n    <SlateElement {...props} as=\"tr\" className=\"h-full\">\n      {props.children}\n    </SlateElement>\n  );\n}\n\nexport function TableCellElementStatic({\n  isHeader,\n  ...props\n}: SlateElementProps<TTableCellElement> & {\n  isHeader?: boolean;\n}) {\n  const { editor, element } = props;\n  const { api } = editor.getPlugin(BaseTablePlugin);\n\n  const { minHeight, width } = api.table.getCellSize({ element });\n  const borders = api.table.getCellBorders({ element });\n\n  return (\n    <SlateElement\n      {...props}\n      as={isHeader ? 'th' : 'td'}\n      className={cn(\n        'h-full overflow-visible border-none bg-background p-0',\n        element.background ? 'bg-(--cellBackground)' : 'bg-background',\n        isHeader && 'text-left font-normal *:m-0',\n        'before:size-full',\n        \"before:absolute before:box-border before:select-none before:content-['']\",\n        borders &&\n          cn(\n            borders.bottom?.size && 'before:border-b before:border-b-border',\n            borders.right?.size && 'before:border-r before:border-r-border',\n            borders.left?.size && 'before:border-l before:border-l-border',\n            borders.top?.size && 'before:border-t before:border-t-border'\n          )\n      )}\n      style={\n        {\n          '--cellBackground': element.background,\n          maxWidth: width || 240,\n          minWidth: width || 120,\n        } as React.CSSProperties\n      }\n      attributes={{\n        ...props.attributes,\n        colSpan: api.table.getColSpan(element),\n        rowSpan: api.table.getRowSpan(element),\n      }}\n    >\n      <div\n        className=\"relative z-20 box-border h-full px-4 py-2\"\n        style={{ minHeight }}\n      >\n        {props.children}\n      </div>\n    </SlateElement>\n  );\n}\n\nexport function TableCellHeaderElementStatic(\n  props: SlateElementProps<TTableCellElement>\n) {\n  return <TableCellElementStatic {...props} isHeader />;\n}\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "docs": [
      {
        "route": "/docs/table"
      },
      {
        "route": "https://pro.platejs.org/docs/components/table-node"
      }
    ],
    "examples": [
      "table-demo"
    ]
  },
  "type": "registry:ui"
}