feat(library): render crow's-foot entities as structured column tables

A crow's-foot / Information-Engineering ER entity is a table whose columns
each carry a name, data type and key role — the layout Mermaid `erDiagram`,
DBML and physical-ER tools all use. The previous implementation reused the
class diagram's single free-text row, so type/PK/FK were just typing
conventions baked into one opaque string.

Model each column as { name, type?, keys?: (PK|FK|UK)[] } and render the
entity as a real table: a key gutter (PK/FK/UK), a name column with the
primary key underlined, and a right-aligned data-type column. Replace the
reused class attribute editor with a structured column editor (name + type
inputs and a PK/FK/UK selector, drag to reorder).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: FelixTJDietrich

library/lib/components/popovers/erDiagram/ErCfColumnList.tsx

@@ -0,0 +1,208 @@
+import { KeyboardEvent, useState } from "react"
+import { Box, ToggleButton, ToggleButtonGroup } from "@mui/material"
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core"
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import { TextField, Typography, PrimaryButton } from "@/components/ui"
+import { DeleteIcon, DragHandleIcon } from "@/components/Icon"
+import { useDiagramStore } from "@/store"
+import { useShallow } from "zustand/shallow"
+import { generateUUID } from "@/utils"
+import { ErCfColumn, ErCfColumnKey, ErCfEntityProps } from "@/types"
+import { LAYOUT } from "@/constants"
+
+const KEY_OPTIONS: ErCfColumnKey[] = ["PK", "FK", "UK"]
+
+interface RowProps {
+  column: ErCfColumn
+  onChange: (id: string, patch: Partial<ErCfColumn>) => void
+  onDelete: (id: string) => void
+}
+
+const SortableColumnRow: React.FC<RowProps> = ({
+  column,
+  onChange,
+  onDelete,
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: column.id })
+
+  return (
+    <Box
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.4 : 1,
+      }}
+      sx={{ display: "flex", gap: 0.5, alignItems: "center" }}
+    >
+      <Box
+        {...attributes}
+        {...listeners}
+        sx={{ cursor: "grab", display: "flex", color: "text.secondary" }}
+      >
+        <DragHandleIcon width={16} height={16} />
+      </Box>
+      <TextField
+        size="small"
+        placeholder="name"
+        value={column.name}
+        onChange={(e) => onChange(column.id, { name: e.target.value })}
+        sx={{ flex: 2 }}
+      />
+      <TextField
+        size="small"
+        placeholder="type"
+        value={column.type ?? ""}
+        onChange={(e) => onChange(column.id, { type: e.target.value })}
+        sx={{ flex: 1 }}
+      />
+      <ToggleButtonGroup
+        size="small"
+        value={column.keys ?? []}
+        onChange={(_, keys: ErCfColumnKey[]) => onChange(column.id, { keys })}
+      >
+        {KEY_OPTIONS.map((k) => (
+          <ToggleButton key={k} value={k} sx={{ px: 0.75 }}>
+            {k}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+      <DeleteIcon
+        width={16}
+        height={16}
+        style={{ cursor: "pointer", flexShrink: 0 }}
+        onClick={() => onDelete(column.id)}
+      />
+    </Box>
+  )
+}
+
+// Editor for a crow's-foot entity's columns: name + data type + key role(s),
+// with drag-to-reorder. Replaces the class diagram's single-name editor.
+export const ErCfColumnList: React.FC<{ nodeId: string }> = ({ nodeId }) => {
+  const { nodes, setNodes } = useDiagramStore(
+    useShallow((state) => ({ setNodes: state.setNodes, nodes: state.nodes }))
+  )
+  const [newName, setNewName] = useState("")
+
+  const data = nodes.find((n) => n.id === nodeId)?.data as
+    | ErCfEntityProps
+    | undefined
+  const columns = data?.attributes ?? []
+
+  const patch = (next: ErCfColumn[], heightDelta = 0) =>
+    setNodes((nodes) =>
+      nodes.map((node) =>
+        node.id === nodeId
+          ? {
+              ...node,
+              data: { ...node.data, attributes: next },
+              ...(heightDelta
+                ? {
+                    height: (node.height ?? 0) + heightDelta,
+                    measured: {
+                      ...node.measured,
+                      height: (node.height ?? 0) + heightDelta,
+                    },
+                  }
+                : {}),
+            }
+          : node
+      )
+    )
+
+  const onChange = (id: string, fields: Partial<ErCfColumn>) =>
+    patch(columns.map((c) => (c.id === id ? { ...c, ...fields } : c)))
+
+  const onDelete = (id: string) =>
+    patch(
+      columns.filter((c) => c.id !== id),
+      -LAYOUT.DEFAULT_ATTRIBUTE_HEIGHT
+    )
+
+  const onAdd = () => {
+    if (newName.trim() === "") return
+    patch(
+      [...columns, { id: generateUUID(), name: newName.trim(), keys: [] }],
+      LAYOUT.DEFAULT_ATTRIBUTE_HEIGHT
+    )
+    setNewName("")
+  }
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  )
+  const onDragEnd = ({ active, over }: DragEndEvent) => {
+    if (!over || active.id === over.id) return
+    patch(
+      arrayMove(
+        columns,
+        columns.findIndex((c) => c.id === active.id),
+        columns.findIndex((c) => c.id === over.id)
+      )
+    )
+  }
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
+      <Typography variant="h6">Columns</Typography>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={onDragEnd}
+      >
+        <SortableContext
+          items={columns.map((c) => c.id)}
+          strategy={verticalListSortingStrategy}
+        >
+          {columns.map((column) => (
+            <SortableColumnRow
+              key={column.id}
+              column={column}
+              onChange={onChange}
+              onDelete={onDelete}
+            />
+          ))}
+        </SortableContext>
+      </DndContext>
+      <Box sx={{ display: "flex", gap: 0.5, mt: 0.5 }}>
+        <TextField
+          size="small"
+          placeholder="new column"
+          value={newName}
+          onChange={(e) => setNewName(e.target.value)}
+          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) =>
+            e.key === "Enter" && onAdd()
+          }
+          fullWidth
+        />
+        <PrimaryButton isSelected={false} onClick={onAdd}>
+          Add
+        </PrimaryButton>
+      </Box>
+    </Box>
+  )
+}

library/lib/components/popovers/erDiagram/ErCfEntityEditPopover.tsx

@@ -3,10 +3,10 @@ import { useDiagramStore } from "@/store"
 import { ErCfEntityProps } from "@/types"
 import { useShallow } from "zustand/shallow"
 import { PopoverProps } from "../types"
-import { EditableAttributeList } from "../classDiagram/EditableAttributesList"
+import { ErCfColumnList } from "./ErCfColumnList"
 
-// Crow's-foot entity: a table with editable attribute (column) rows. Reuses the
-// class diagram's attribute list since both store `data.attributes`.
+// Crow's-foot entity: a table whose columns carry a name, data type and key
+// role(s) — edited through the structured column list.
 export const ErCfEntityEditPopover: React.FC<PopoverProps> = ({
   elementId,
 }) => {
@@ -33,7 +33,7 @@ export const ErCfEntityEditPopover: React.FC<PopoverProps> = ({
         nodeData={nodeData}
         handleDataFieldUpdate={handleDataFieldUpdate}
       />
-      <EditableAttributeList nodeId={elementId} />
+      <ErCfColumnList nodeId={elementId} />
     </>
   )
 }

library/lib/components/svgs/nodes/erDiagram/ErCfEntitySVG.tsx

@@ -1,8 +1,8 @@
-import { ClassNodeElement, ErCfEntityProps } from "@/types"
+import { ErCfColumn, ErCfEntityProps } from "@/types"
 import { LAYOUT } from "@/constants"
 import { SeparationLine } from "@/components/svgs/nodes/SeparationLine"
 import { HeaderSection } from "../HeaderSection"
-import { RowBlockSection } from "../RowBlockSection"
+import { ErCfRowSection } from "./ErCfRowSection"
 import { useDiagramStore } from "@/store"
 import { useShallow } from "zustand/shallow"
 import AssessmentIcon from "../../AssessmentIcon"
@@ -33,7 +33,7 @@ export const ErCfEntitySVG = ({
   const padding = LAYOUT.DEFAULT_PADDING
 
   const assessments = useDiagramStore(useShallow((state) => state.assessments))
-  const processedAttributes = attributes.map((el: ClassNodeElement) => ({
+  const processedAttributes = attributes.map((el: ErCfColumn) => ({
     ...el,
     score: assessments[el.id]?.score,
   }))
@@ -79,14 +79,13 @@ export const ErCfEntitySVG = ({
           width={width}
           strokeColor={strokeColor}
         />
-        <RowBlockSection
-          items={processedAttributes}
+        <ErCfRowSection
+          columns={processedAttributes}
           padding={padding}
           itemHeight={attributeHeight}
           width={width}
           offsetFromTop={headerHeight}
           showAssessmentResults={showAssessmentResults}
-          itemElementType="attribute"
         />
 
         {showAssessmentResults && (

library/lib/components/svgs/nodes/erDiagram/ErCfRowSection.tsx

@@ -0,0 +1,118 @@
+import { FC } from "react"
+import { ErCfColumn } from "@/types"
+import { CustomText } from "../CustomText"
+import AssessmentIcon from "../../AssessmentIcon"
+import { FeedbackDropzone } from "@/components/wrapper/FeedbackDropzone"
+import { AssessmentSelectableElement } from "@/components/AssessmentSelectableElement"
+import { getCustomColorsFromData, measureTextWidth } from "@/utils"
+import { DEFAULT_FONT_SIZE, LAYOUT } from "@/constants"
+
+// Width of the leftmost key gutter (holds "PK" / "FK" / "UK"). Matches Mermaid's
+// dedicated key column.
+export const ER_CF_KEY_GUTTER_WIDTH = 34
+
+interface Props {
+  columns: (ErCfColumn & { score?: number })[]
+  padding: number
+  itemHeight: number
+  width: number
+  offsetFromTop: number
+  showAssessmentResults?: boolean
+}
+
+// Renders an entity's columns as structured rows: [key gutter] name [type],
+// the layout Mermaid / DBML / physical ER tools use. Primary-key names are
+// underlined (drawn as an explicit line so it survives PNG/PDF export, unlike
+// CSS text-decoration).
+export const ErCfRowSection: FC<Props> = ({
+  columns,
+  padding,
+  itemHeight,
+  width,
+  offsetFromTop,
+  showAssessmentResults = false,
+}) => {
+  const nameX = padding + ER_CF_KEY_GUTTER_WIDTH
+  const typeX = width - padding
+
+  return (
+    <g transform={`translate(0, ${offsetFromTop})`}>
+      {columns.map((column, index) => {
+        const y = index * itemHeight
+        const centerY = 15 + y
+        const { fillColor, textColor } = getCustomColorsFromData(column)
+        const keys = column.keys ?? []
+        const isPrimary = keys.includes("PK")
+
+        return (
+          <AssessmentSelectableElement
+            key={column.id}
+            elementId={column.id}
+            width={width}
+            itemHeight={itemHeight}
+            yOffset={y}
+          >
+            <FeedbackDropzone elementId={column.id} elementType="attribute">
+              <rect
+                x={LAYOUT.LINE_WIDTH / 2}
+                y={y + LAYOUT.LINE_WIDTH / 2}
+                width={width - LAYOUT.LINE_WIDTH}
+                height={itemHeight - LAYOUT.LINE_WIDTH}
+                fill={fillColor}
+              />
+
+              {keys.length > 0 && (
+                <CustomText
+                  x={padding}
+                  y={centerY}
+                  dominantBaseline="middle"
+                  textAnchor="start"
+                  fontWeight="600"
+                  fill={textColor}
+                >
+                  {keys.join(", ")}
+                </CustomText>
+              )}
+
+              <CustomText
+                x={nameX}
+                y={centerY}
+                dominantBaseline="middle"
+                textAnchor="start"
+                fill={textColor}
+              >
+                {column.name}
+              </CustomText>
+              {isPrimary && column.name && (
+                <line
+                  x1={nameX}
+                  x2={nameX + measureTextWidth(column.name)}
+                  y1={centerY + DEFAULT_FONT_SIZE * 0.6}
+                  y2={centerY + DEFAULT_FONT_SIZE * 0.6}
+                  stroke={textColor}
+                  strokeWidth={1.5}
+                />
+              )}
+
+              {column.type && (
+                <CustomText
+                  x={typeX}
+                  y={centerY}
+                  dominantBaseline="middle"
+                  textAnchor="end"
+                  fill={textColor}
+                  opacity={0.65}
+                >
+                  {column.type}
+                </CustomText>
+              )}
+            </FeedbackDropzone>
+            {showAssessmentResults && typeof column.score === "number" && (
+              <AssessmentIcon score={column.score} x={width - 15} y={y - 12} />
+            )}
+          </AssessmentSelectableElement>
+        )
+      })}
+    </g>
+  )
+}

library/lib/components/svgs/nodes/erDiagram/index.ts

@@ -2,3 +2,4 @@ export * from "./EREntitySVG"
 export * from "./ERRelationshipSVG"
 export * from "./ERAttributeSVG"
 export * from "./ErCfEntitySVG"
+export * from "./ErCfRowSection"