create-ncblock 0.0.1

package/templates/table-view/src/index.tsx

@@ -0,0 +1,1814 @@
+import {
+	type ColumnDef,
+	flexRender,
+	getCoreRowModel,
+	getSortedRowModel,
+	type SortingState,
+	useReactTable,
+} from "@tanstack/react-table"
+import {
+	NotionCustomBlock,
+	type NotionDataSource,
+	type NotionPagePropertyInputMap,
+	type NotionPagePropertyInputValue,
+	type NotionPropertySchema,
+	pages,
+	useDataSource,
+	useDataSourceDefinitions,
+	useTheme,
+} from "ncblock"
+import React from "react"
+import ReactDOM from "react-dom/client"
+
+import "./index.css"
+import {
+	type ColumnConfig,
+	type ColumnKind,
+	compareValues,
+	formatDateValue,
+	formatNumberValue,
+	getColumnConfigs,
+	getColumnWidth,
+	getPrimaryColumnId,
+	getRelationDisplay,
+	getRowProperty,
+	getSearchText,
+	humanizeKey,
+	isDateValue,
+	isRelationArray,
+	isStringArray,
+	SAMPLE_ITEMS,
+	type TableRow,
+} from "./table-model"
+
+function TextValue(props: { value: string }) {
+	const { value } = props
+
+	if (value.length === 0) {
+		return <span className="text-(--muted)">&mdash;</span>
+	}
+
+	const linkClass =
+		"break-all underline decoration-(--line-strong) underline-offset-[3px] transition-colors hover:decoration-(--accent)"
+
+	if (/^https?:\/\//i.test(value)) {
+		return (
+			<a href={value} target="_blank" rel="noreferrer" className={linkClass}>
+				{value}
+			</a>
+		)
+	}
+
+	if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+		return (
+			<a href={`mailto:${value}`} className={linkClass}>
+				{value}
+			</a>
+		)
+	}
+
+	if (/^\+?[0-9().\s-]{7,}$/.test(value)) {
+		return (
+			<a href={`tel:${value.replace(/[^\d+]/g, "")}`} className={linkClass}>
+				{value}
+			</a>
+		)
+	}
+
+	return <span className="break-words whitespace-pre-wrap">{value}</span>
+}
+
+const EMPTY_VALUE = <span className="cell-body text-(--muted)">&mdash;</span>
+
+const CHIP_CLASS =
+	"inline-flex items-center rounded-sm px-1.5 py-[2px] text-[11.5px] leading-4 text-(--foreground)"
+
+type EditablePropertySchema = Extract<
+	NotionPropertySchema,
+	{
+		type:
+			| "title"
+			| "rich_text"
+			| "number"
+			| "checkbox"
+			| "url"
+			| "email"
+			| "phone_number"
+			| "select"
+			| "status"
+			| "multi_select"
+			| "date"
+	}
+>
+
+type UpdateStatus =
+	| { type: "idle" }
+	| { type: "saving" }
+	| { type: "success"; message: string }
+	| { type: "error"; message: string }
+
+type EditingRow = {
+	row: TableRow
+	draftByKey: Record<string, string>
+}
+
+type WritableColumn = {
+	config: ColumnConfig
+	schema: EditablePropertySchema
+}
+
+function isEditablePropertySchema(
+	schema: NotionPropertySchema | undefined,
+): schema is EditablePropertySchema {
+	if (schema === undefined) {
+		return false
+	}
+
+	switch (schema.type) {
+		case "title":
+		case "rich_text":
+		case "number":
+		case "checkbox":
+		case "url":
+		case "email":
+		case "phone_number":
+		case "select":
+		case "status":
+		case "multi_select":
+		case "date":
+			return true
+		default:
+			return false
+	}
+}
+
+function getEditableSchemaForColumn(args: {
+	config: ColumnConfig
+	propertySchemasById: { [key: string]: NotionPropertySchema | undefined }
+	isPrimary: boolean
+}): EditablePropertySchema | undefined {
+	const schema = args.propertySchemasById[args.config.key]
+	if (isEditablePropertySchema(schema)) {
+		return schema
+	}
+	if (schema !== undefined) {
+		return undefined
+	}
+	return inferEditableSchemaFromColumn({
+		config: args.config,
+		isPrimary: args.isPrimary,
+	})
+}
+
+function inferEditableSchemaFromColumn(args: {
+	config: ColumnConfig
+	isPrimary: boolean
+}): EditablePropertySchema | undefined {
+	const { config, isPrimary } = args
+	const name = humanizeKey(config.key)
+	switch (config.kind) {
+		case "text":
+			return isPrimary ? { name, type: "title" } : { name, type: "rich_text" }
+		case "number":
+			return { name, type: "number" }
+		case "boolean":
+			return { name, type: "checkbox" }
+		case "date":
+			return { name, type: "date" }
+		case "list":
+			return { name, type: "multi_select", options: [] }
+		case "empty":
+			return isPrimary ? { name, type: "title" } : { name, type: "rich_text" }
+		default:
+			return undefined
+	}
+}
+
+function plainTextPropertyItem(content: string): Record<string, unknown> {
+	return {
+		type: "text",
+		text: { content },
+	}
+}
+
+function textDraftFromValue(value: unknown): string {
+	if (value === undefined || value === null) {
+		return ""
+	}
+	if (typeof value === "string") {
+		return value
+	}
+	if (typeof value === "number" || typeof value === "boolean") {
+		return String(value)
+	}
+	if (isStringArray(value)) {
+		return value.join(", ")
+	}
+	if (isDateValue(value)) {
+		return value.start_date
+	}
+	return getSearchText(value)
+}
+
+function makeDraftByKey(args: {
+	row: TableRow
+	writableColumns: WritableColumn[]
+}): Record<string, string> {
+	const { row, writableColumns } = args
+	const draftByKey: Record<string, string> = {}
+	for (const { config } of writableColumns) {
+		draftByKey[config.key] = textDraftFromValue(getRowProperty(row, config.key))
+	}
+	return draftByKey
+}
+
+function propertyValueFromDraft(args: {
+	key: string
+	schema: EditablePropertySchema
+	draft: string
+}): NotionPagePropertyInputValue {
+	const { key, schema, draft } = args
+	const trimmed = draft.trim()
+
+	switch (schema.type) {
+		case "title":
+			return { type: "title", title: [plainTextPropertyItem(draft)] }
+		case "rich_text":
+			return {
+				type: "rich_text",
+				rich_text: [plainTextPropertyItem(draft)],
+			}
+		case "number": {
+			if (trimmed.length === 0) {
+				return { type: "number", number: null }
+			}
+			const parsed = Number(trimmed)
+			if (!Number.isFinite(parsed)) {
+				throw new Error(`${humanizeKey(key)} must be a valid number.`)
+			}
+			return { type: "number", number: parsed }
+		}
+		case "checkbox":
+			return { type: "checkbox", checkbox: trimmed === "true" }
+		case "url":
+			return { type: "url", url: trimmed.length > 0 ? trimmed : null }
+		case "email":
+			return {
+				type: "email",
+				email: trimmed.length > 0 ? trimmed : null,
+			}
+		case "phone_number":
+			return {
+				type: "phone_number",
+				phone_number: trimmed.length > 0 ? trimmed : null,
+			}
+		case "select":
+			return {
+				type: "select",
+				select: trimmed.length > 0 ? { name: trimmed } : null,
+			}
+		case "status":
+			return {
+				type: "status",
+				status: trimmed.length > 0 ? { name: trimmed } : null,
+			}
+		case "multi_select":
+			return {
+				type: "multi_select",
+				multi_select: draft
+					.split(",")
+					.map(part => part.trim())
+					.filter(Boolean)
+					.map(name => ({ name })),
+			}
+		case "date":
+			return {
+				type: "date",
+				date: trimmed.length > 0 ? { start: trimmed } : null,
+			}
+	}
+}
+
+function emptyDraftByKey(
+	writableColumns: WritableColumn[],
+): Record<string, string> {
+	const draftByKey: Record<string, string> = {}
+	for (const { config, schema } of writableColumns) {
+		draftByKey[config.key] = schema.type === "checkbox" ? "false" : ""
+	}
+	return draftByKey
+}
+
+function PropertyValue(props: {
+	value: unknown
+	kind: ColumnKind
+	isPrimary: boolean
+}) {
+	const { value, kind, isPrimary } = props
+
+	if (value === undefined || value === null) {
+		return EMPTY_VALUE
+	}
+
+	if (typeof value === "string") {
+		if (isPrimary) {
+			if (value.length === 0) {
+				return EMPTY_VALUE
+			}
+			return (
+				<span
+					className="ff-display cell-primary text-(--foreground)"
+					style={{ fontVariationSettings: '"SOFT" 50, "opsz" 72' }}
+				>
+					{value}
+				</span>
+			)
+		}
+
+		if (kind === "id") {
+			if (value.length === 0) {
+				return EMPTY_VALUE
+			}
+			return (
+				<span className="ff-mono cell-mono text-(--muted-strong)">{value}</span>
+			)
+		}
+
+		return (
+			<span className="cell-body text-(--foreground)">
+				<TextValue value={value} />
+			</span>
+		)
+	}
+
+	if (typeof value === "number") {
+		return (
+			<span className="ff-mono cell-body text-(--foreground)">
+				{formatNumberValue(value)}
+			</span>
+		)
+	}
+
+	if (typeof value === "boolean") {
+		return (
+			<span
+				className="inline-flex items-center gap-1.5"
+				aria-label={value ? "True" : "False"}
+			>
+				<span
+					aria-hidden="true"
+					className="h-1.5 w-1.5 rounded-full"
+					style={{
+						background: value ? "var(--accent)" : "var(--line-strong)",
+					}}
+				/>
+				<span className="cell-body text-(--foreground)">
+					{value ? "Yes" : "No"}
+				</span>
+			</span>
+		)
+	}
+
+	if (isDateValue(value)) {
+		const formatted = formatDateValue(value)
+		return (
+			<div className="flex flex-col gap-0.5">
+				<span className="cell-body text-(--foreground)">
+					{formatted.primary}
+				</span>
+				{formatted.secondary ? (
+					<span className="ff-mono cell-fine text-(--muted)">
+						{formatted.secondary}
+					</span>
+				) : null}
+			</div>
+		)
+	}
+
+	if (isStringArray(value)) {
+		if (value.length === 0) {
+			return EMPTY_VALUE
+		}
+
+		return (
+			<div className="flex flex-wrap gap-1">
+				{value.map(entry => (
+					<span
+						key={entry}
+						className={CHIP_CLASS}
+						style={{ background: "var(--chip-bg)" }}
+					>
+						{entry}
+					</span>
+				))}
+			</div>
+		)
+	}
+
+	if (isRelationArray(value)) {
+		return (
+			<div className="flex flex-wrap gap-1">
+				{value.map(entry => {
+					const relation = getRelationDisplay(entry)
+					return (
+						<span
+							key={relation.id ?? relation.label}
+							title={
+								relation.id && relation.id !== relation.label
+									? relation.id
+									: undefined
+							}
+							className={`${CHIP_CLASS} gap-1`}
+							style={{ background: "var(--chip-bg)" }}
+						>
+							<span
+								aria-hidden="true"
+								className="h-1 w-1 rounded-full bg-(--muted)"
+							/>
+							{relation.label}
+						</span>
+					)
+				})}
+			</div>
+		)
+	}
+
+	if (Array.isArray(value) && value.length === 0) {
+		return EMPTY_VALUE
+	}
+
+	return (
+		<code className="ff-mono cell-fine break-all text-(--muted)">
+			{JSON.stringify(value)}
+		</code>
+	)
+}
+
+function EmptyState(props: {
+	title: string
+	description: string
+	action?: React.ReactNode
+}) {
+	const { title, description, action } = props
+
+	return (
+		<div className="grid place-items-center px-6 py-16">
+			<div className="max-w-[420px] text-center">
+				<div
+					aria-hidden="true"
+					className="mx-auto mb-4 h-px w-10"
+					style={{ background: "var(--line-strong)" }}
+				/>
+				<div className="ff-display text-xl leading-tight text-(--foreground)">
+					{title}
+				</div>
+				<p className="mt-2 text-xs leading-5 text-(--muted)">{description}</p>
+				{action ? <div className="mt-5">{action}</div> : null}
+			</div>
+		</div>
+	)
+}
+
+type RowEditorMode = { type: "update"; rowId: string } | { type: "create" }
+
+function RowEditorPanel(props: {
+	mode: RowEditorMode
+	draftByKey: Record<string, string>
+	writableColumns: WritableColumn[]
+	status: UpdateStatus
+	onDraftChange: (key: string, value: string) => void
+	onCancel: () => void
+	onSubmit: () => void
+}) {
+	const {
+		mode,
+		draftByKey,
+		writableColumns,
+		status,
+		onDraftChange,
+		onCancel,
+		onSubmit,
+	} = props
+
+	const isSaving = status.type === "saving"
+	const eyebrow = mode.type === "create" ? "New row" : "Update row"
+	const submitLabel =
+		mode.type === "create"
+			? isSaving
+				? "Creating..."
+				: "Create page"
+			: isSaving
+				? "Updating..."
+				: "Update page"
+
+	return (
+		<form
+			onSubmit={event => {
+				event.preventDefault()
+				onSubmit()
+			}}
+			className="rounded-lg border border-(--line) bg-(--surface-bg) p-3 shadow-[0_10px_30px_-18px_rgb(0_0_0_/_0.25)]"
+		>
+			<div className="mb-3 flex flex-wrap items-start justify-between gap-2">
+				<div>
+					<div className="eyebrow">{eyebrow}</div>
+					{mode.type === "update" ? (
+						<div className="ff-mono mt-1 text-[11px] break-all text-(--muted)">
+							{mode.rowId}
+						</div>
+					) : null}
+				</div>
+				<button
+					type="button"
+					onClick={onCancel}
+					disabled={isSaving}
+					className="text-xs text-(--muted) transition-colors hover:text-(--foreground) disabled:opacity-50"
+				>
+					Cancel
+				</button>
+			</div>
+
+			<div className="grid gap-3 md:grid-cols-2">
+				{writableColumns.map(({ config, schema }) => {
+					const value = draftByKey[config.key] ?? ""
+					const label = config.label
+					const baseInputClass =
+						"field-control min-h-9 w-full rounded-md border border-(--line) bg-(--surface-bg) px-2 text-sm text-(--foreground) outline-none hover:border-(--line-strong)"
+
+					return (
+						<label key={config.key} className="block min-w-0">
+							<span className="mb-1.5 flex items-baseline gap-2">
+								<span className="text-xs font-medium text-(--foreground)">
+									{label}
+								</span>
+								<span className="ff-mono text-[9.5px] tracking-widest text-(--muted) uppercase">
+									{schema.type}
+								</span>
+							</span>
+
+							{schema.type === "checkbox" ? (
+								<select
+									value={value === "true" ? "true" : "false"}
+									onChange={event =>
+										onDraftChange(config.key, event.target.value)
+									}
+									disabled={isSaving}
+									className={baseInputClass}
+								>
+									<option value="true">Checked</option>
+									<option value="false">Unchecked</option>
+								</select>
+							) : schema.type === "select" || schema.type === "status" ? (
+								<select
+									value={value}
+									onChange={event =>
+										onDraftChange(config.key, event.target.value)
+									}
+									disabled={isSaving}
+									className={baseInputClass}
+								>
+									<option value="">Clear</option>
+									{schema.options.map(option => (
+										<option key={option.id} value={option.name}>
+											{option.name}
+										</option>
+									))}
+								</select>
+							) : (
+								<input
+									type={
+										schema.type === "number"
+											? "number"
+											: schema.type === "date"
+												? "date"
+												: "text"
+									}
+									value={value}
+									onChange={event =>
+										onDraftChange(config.key, event.target.value)
+									}
+									disabled={isSaving}
+									placeholder={
+										schema.type === "multi_select"
+											? "Comma-separated option names"
+											: undefined
+									}
+									className={baseInputClass}
+								/>
+							)}
+						</label>
+					)
+				})}
+			</div>
+
+			<div className="mt-3 flex flex-wrap items-center justify-between gap-2">
+				<div className="min-h-5 text-xs" aria-live="polite">
+					{status.type === "success" ? (
+						<span className="text-(--muted-strong)">{status.message}</span>
+					) : status.type === "error" ? (
+						<span className="text-red-500">{status.message}</span>
+					) : null}
+				</div>
+				<button
+					type="submit"
+					disabled={isSaving}
+					className="field-control min-h-9 rounded-md border border-(--line) bg-(--foreground) px-3 text-sm text-(--app-bg) transition-opacity disabled:cursor-progress disabled:opacity-70"
+				>
+					{submitLabel}
+				</button>
+			</div>
+		</form>
+	)
+}
+
+function GearIcon() {
+	return (
+		<svg
+			aria-hidden="true"
+			viewBox="0 0 16 16"
+			className="h-4 w-4"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<circle cx="8" cy="8" r="2" />
+			<path d="M8 1.5v1.8M8 12.7v1.8M1.5 8h1.8M12.7 8h1.8M3.4 3.4l1.3 1.3M11.3 11.3l1.3 1.3M3.4 12.6l1.3-1.3M11.3 4.7l1.3-1.3" />
+		</svg>
+	)
+}
+
+function GripIcon() {
+	return (
+		<svg
+			aria-hidden="true"
+			viewBox="0 0 16 16"
+			className="h-3.5 w-3.5"
+			fill="currentColor"
+		>
+			<circle cx="6" cy="3.5" r="1" />
+			<circle cx="10" cy="3.5" r="1" />
+			<circle cx="6" cy="8" r="1" />
+			<circle cx="10" cy="8" r="1" />
+			<circle cx="6" cy="12.5" r="1" />
+			<circle cx="10" cy="12.5" r="1" />
+		</svg>
+	)
+}
+
+function ColumnSettings(props: {
+	allColumnConfigs: ColumnConfig[]
+	columnOrder: string[]
+	hiddenColumns: Set<string>
+	onColumnOrderChange: (next: string[]) => void
+	onHiddenColumnsChange: (next: Set<string>) => void
+}) {
+	const {
+		allColumnConfigs,
+		columnOrder,
+		hiddenColumns,
+		onColumnOrderChange,
+		onHiddenColumnsChange,
+	} = props
+
+	const [isOpen, setIsOpen] = React.useState(false)
+	const [draggingKey, setDraggingKey] = React.useState<string | null>(null)
+	const [dragOverKey, setDragOverKey] = React.useState<string | null>(null)
+	const buttonRef = React.useRef<HTMLButtonElement>(null)
+	const panelRef = React.useRef<HTMLDivElement>(null)
+
+	const configByKey = React.useMemo(
+		() => new Map(allColumnConfigs.map(config => [config.key, config])),
+		[allColumnConfigs],
+	)
+
+	const effectiveOrder = React.useMemo(() => {
+		const known = new Set<string>()
+		const ordered: string[] = []
+		for (const key of columnOrder) {
+			if (configByKey.has(key) && !known.has(key)) {
+				known.add(key)
+				ordered.push(key)
+			}
+		}
+		for (const config of allColumnConfigs) {
+			if (!known.has(config.key)) {
+				known.add(config.key)
+				ordered.push(config.key)
+			}
+		}
+		return ordered
+	}, [allColumnConfigs, columnOrder, configByKey])
+
+	const visibleCount = effectiveOrder.filter(
+		key => !hiddenColumns.has(key),
+	).length
+
+	React.useEffect(() => {
+		if (!isOpen) {
+			return
+		}
+		const handlePointer = (event: MouseEvent | TouchEvent) => {
+			const target = event.target
+			if (!(target instanceof Node)) {
+				return
+			}
+			if (panelRef.current?.contains(target)) {
+				return
+			}
+			if (buttonRef.current?.contains(target)) {
+				return
+			}
+			setIsOpen(false)
+		}
+		const handleKey = (event: KeyboardEvent) => {
+			if (event.key === "Escape") {
+				setIsOpen(false)
+				buttonRef.current?.focus()
+			}
+		}
+		document.addEventListener("mousedown", handlePointer)
+		document.addEventListener("touchstart", handlePointer, { passive: true })
+		document.addEventListener("keydown", handleKey)
+		return () => {
+			document.removeEventListener("mousedown", handlePointer)
+			document.removeEventListener("touchstart", handlePointer)
+			document.removeEventListener("keydown", handleKey)
+		}
+	}, [isOpen])
+
+	const moveKey = (fromKey: string, toKey: string, placeAfter = false) => {
+		if (fromKey === toKey) {
+			return
+		}
+		const next = effectiveOrder.slice()
+		const fromIndex = next.indexOf(fromKey)
+		if (fromIndex === -1) {
+			return
+		}
+		next.splice(fromIndex, 1)
+		let toIndex = next.indexOf(toKey)
+		if (toIndex === -1) {
+			return
+		}
+		if (placeAfter) {
+			toIndex += 1
+		}
+		next.splice(toIndex, 0, fromKey)
+		onColumnOrderChange(next)
+	}
+
+	const moveByStep = (key: string, direction: -1 | 1) => {
+		const index = effectiveOrder.indexOf(key)
+		const target = index + direction
+		if (index === -1 || target < 0 || target >= effectiveOrder.length) {
+			return
+		}
+		const next = effectiveOrder.slice()
+		next.splice(index, 1)
+		next.splice(target, 0, key)
+		onColumnOrderChange(next)
+	}
+
+	const toggleColumn = (key: string) => {
+		const next = new Set(hiddenColumns)
+		if (next.has(key)) {
+			next.delete(key)
+		} else {
+			next.add(key)
+		}
+		onHiddenColumnsChange(next)
+	}
+
+	const showAll = () => onHiddenColumnsChange(new Set())
+	const hideAll = () => onHiddenColumnsChange(new Set(effectiveOrder))
+	const resetOrder = () =>
+		onColumnOrderChange(allColumnConfigs.map(config => config.key))
+
+	return (
+		<div className="relative">
+			<button
+				ref={buttonRef}
+				type="button"
+				onClick={() => setIsOpen(open => !open)}
+				aria-label="Configure columns"
+				aria-expanded={isOpen}
+				aria-haspopup="dialog"
+				className="field-control inline-flex min-h-9 items-center gap-2 rounded-md border border-(--line) bg-(--surface-bg) px-2.5 text-sm text-(--foreground) hover:border-(--line-strong) hover:bg-(--chip-bg)"
+			>
+				<GearIcon />
+				<span className="ff-mono text-[11px] text-(--muted-strong)">
+					{String(visibleCount).padStart(2, "0")}
+					<span className="mx-0.5 text-(--line-strong)">/</span>
+					{String(effectiveOrder.length).padStart(2, "0")}
+				</span>
+			</button>
+
+			{isOpen ? (
+				<div
+					ref={panelRef}
+					role="dialog"
+					aria-label="Column settings"
+					className="absolute top-[calc(100%+6px)] right-0 z-40 w-[320px] overflow-hidden rounded-lg border border-(--line) bg-(--surface-bg) shadow-[0_10px_40px_-12px_rgb(0_0_0_/_0.18),0_2px_8px_-2px_rgb(0_0_0_/_0.06)]"
+				>
+					<div className="flex items-center justify-between border-b border-(--line) px-3 py-2.5">
+						<span className="eyebrow">Columns</span>
+						<div className="flex items-center gap-2">
+							<button
+								type="button"
+								onClick={showAll}
+								className="text-[11px] text-(--muted) transition-colors hover:text-(--foreground)"
+							>
+								Show all
+							</button>
+							<span className="text-[11px] text-(--line-strong)">·</span>
+							<button
+								type="button"
+								onClick={hideAll}
+								className="text-[11px] text-(--muted) transition-colors hover:text-(--foreground)"
+							>
+								Hide all
+							</button>
+						</div>
+					</div>
+
+					<ul
+						className="table-view-scroll max-h-[320px] overflow-auto py-1"
+						onDragOver={event => {
+							if (draggingKey) {
+								event.preventDefault()
+							}
+						}}
+					>
+						{effectiveOrder.map(key => {
+							const config = configByKey.get(key)
+							if (!config) {
+								return null
+							}
+							const isHidden = hiddenColumns.has(key)
+							const isDragging = draggingKey === key
+							const isDragTarget =
+								dragOverKey === key && draggingKey !== null && !isDragging
+							const label = config.label
+							return (
+								<li
+									key={key}
+									draggable
+									onDragStart={event => {
+										setDraggingKey(key)
+										event.dataTransfer.effectAllowed = "move"
+										event.dataTransfer.setData("text/plain", key)
+									}}
+									onDragEnd={() => {
+										setDraggingKey(null)
+										setDragOverKey(null)
+									}}
+									onDragOver={event => {
+										if (!draggingKey || draggingKey === key) {
+											return
+										}
+										event.preventDefault()
+										event.dataTransfer.dropEffect = "move"
+										setDragOverKey(key)
+									}}
+									onDragLeave={event => {
+										const related = event.relatedTarget
+										if (
+											related instanceof Node &&
+											event.currentTarget.contains(related)
+										) {
+											return
+										}
+										if (dragOverKey === key) {
+											setDragOverKey(null)
+										}
+									}}
+									onDrop={event => {
+										event.preventDefault()
+										const source =
+											event.dataTransfer.getData("text/plain") || draggingKey
+										if (source) {
+											moveKey(source, key)
+										}
+										setDraggingKey(null)
+										setDragOverKey(null)
+									}}
+									className={`relative flex items-center gap-1.5 px-2 py-1 ${
+										isDragging ? "opacity-40" : ""
+									}`}
+								>
+									{isDragTarget ? (
+										<span
+											aria-hidden="true"
+											className="absolute top-0 right-2 left-2 h-px bg-(--foreground)"
+										/>
+									) : null}
+									<span
+										className="flex h-7 w-4 shrink-0 cursor-grab items-center justify-center text-(--muted) active:cursor-grabbing"
+										title="Drag to reorder"
+										aria-hidden="true"
+									>
+										<GripIcon />
+									</span>
+									<label className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 py-1">
+										<input
+											type="checkbox"
+											checked={!isHidden}
+											onChange={() => toggleColumn(key)}
+											aria-label={`Show ${label} column`}
+											className="h-3.5 w-3.5 shrink-0 accent-(--accent)"
+										/>
+										<span
+											className={`min-w-0 flex-1 truncate text-sm ${isHidden ? "text-(--muted)" : "text-(--foreground)"}`}
+										>
+											{label}
+										</span>
+										<span className="ff-mono shrink-0 text-[9.5px] tracking-widest text-(--muted) uppercase">
+											{config.kind}
+										</span>
+									</label>
+									<div className="flex shrink-0 items-center gap-0.5">
+										<button
+											type="button"
+											onClick={() => moveByStep(key, -1)}
+											disabled={effectiveOrder.indexOf(key) === 0}
+											aria-label={`Move ${label} up`}
+											className="flex h-6 w-6 items-center justify-center rounded text-(--muted) hover:bg-(--chip-bg) hover:text-(--foreground) disabled:opacity-30 disabled:hover:bg-transparent"
+										>
+											<svg
+												aria-hidden="true"
+												viewBox="0 0 12 12"
+												className="h-3 w-3"
+												fill="none"
+												stroke="currentColor"
+												strokeWidth="1.75"
+												strokeLinecap="round"
+												strokeLinejoin="round"
+											>
+												<path d="m3 7 3-3 3 3" />
+											</svg>
+										</button>
+										<button
+											type="button"
+											onClick={() => moveByStep(key, 1)}
+											disabled={
+												effectiveOrder.indexOf(key) ===
+												effectiveOrder.length - 1
+											}
+											aria-label={`Move ${label} down`}
+											className="flex h-6 w-6 items-center justify-center rounded text-(--muted) hover:bg-(--chip-bg) hover:text-(--foreground) disabled:opacity-30 disabled:hover:bg-transparent"
+										>
+											<svg
+												aria-hidden="true"
+												viewBox="0 0 12 12"
+												className="h-3 w-3"
+												fill="none"
+												stroke="currentColor"
+												strokeWidth="1.75"
+												strokeLinecap="round"
+												strokeLinejoin="round"
+											>
+												<path d="m3 5 3 3 3-3" />
+											</svg>
+										</button>
+									</div>
+								</li>
+							)
+						})}
+					</ul>
+
+					<div className="flex items-center justify-between border-t border-(--line) bg-(--surface-sunken) px-3 py-1.5">
+						<span className="text-[11px] text-(--muted)">Drag to reorder</span>
+						<button
+							type="button"
+							onClick={resetOrder}
+							className="text-[11px] text-(--muted) transition-colors hover:text-(--foreground)"
+						>
+							Reset order
+						</button>
+					</div>
+				</div>
+			) : null}
+		</div>
+	)
+}
+
+function DataWorkspace(props: {
+	items: TableRow[]
+	columnConfigs: ColumnConfig[]
+	allColumnConfigs: ColumnConfig[]
+	propertySchemasById: { [key: string]: NotionPropertySchema | undefined }
+	columnOrder: string[]
+	hiddenColumns: Set<string>
+	onColumnOrderChange: (next: string[]) => void
+	onHiddenColumnsChange: (next: Set<string>) => void
+	activeDataSourceKey: string
+	dataSources: NotionDataSource[]
+	onSelectDataSource: (key: string) => void
+	hasMore: boolean
+	isLoading: boolean
+	onFetchMore: () => void
+	isUsingFallbackData: boolean
+	isCollectionEmpty: boolean
+	queryError?: string
+}) {
+	const {
+		items,
+		columnConfigs,
+		allColumnConfigs,
+		propertySchemasById,
+		columnOrder,
+		hiddenColumns,
+		onColumnOrderChange,
+		onHiddenColumnsChange,
+		activeDataSourceKey,
+		dataSources,
+		onSelectDataSource,
+		hasMore,
+		isLoading,
+		onFetchMore,
+		isUsingFallbackData,
+		isCollectionEmpty,
+		queryError,
+	} = props
+
+	const [sorting, setSorting] = React.useState<SortingState>([])
+	const [search, setSearch] = React.useState("")
+	const [editingRow, setEditingRow] = React.useState<EditingRow | undefined>()
+	const [updateStatus, setUpdateStatus] = React.useState<UpdateStatus>({
+		type: "idle",
+	})
+	const [creatingDraft, setCreatingDraft] = React.useState<
+		Record<string, string> | undefined
+	>()
+	const [createStatus, setCreateStatus] = React.useState<UpdateStatus>({
+		type: "idle",
+	})
+	const searchInputRef = React.useRef<HTMLInputElement>(null)
+
+	React.useEffect(() => {
+		const handleKey = (event: KeyboardEvent) => {
+			if (
+				event.key !== "/" ||
+				event.defaultPrevented ||
+				event.metaKey ||
+				event.ctrlKey
+			) {
+				return
+			}
+			const target = event.target as HTMLElement | null
+			if (
+				target &&
+				(target.tagName === "INPUT" ||
+					target.tagName === "TEXTAREA" ||
+					target.isContentEditable)
+			) {
+				return
+			}
+			event.preventDefault()
+			searchInputRef.current?.focus()
+			searchInputRef.current?.select()
+		}
+		window.addEventListener("keydown", handleKey)
+		return () => window.removeEventListener("keydown", handleKey)
+	}, [])
+
+	const primaryColumnId = React.useMemo(
+		() => getPrimaryColumnId(columnConfigs),
+		[columnConfigs],
+	)
+
+	const writableColumns = React.useMemo(() => {
+		const columns: WritableColumn[] = []
+		for (const config of allColumnConfigs) {
+			if (config.key === "id") {
+				continue
+			}
+			const schema = getEditableSchemaForColumn({
+				config,
+				propertySchemasById,
+				isPrimary: config.key === primaryColumnId,
+			})
+			if (schema) {
+				columns.push({ config, schema })
+			}
+		}
+		return columns
+	}, [allColumnConfigs, propertySchemasById, primaryColumnId])
+
+	const openEditorForRow = React.useCallback(
+		(row: TableRow) => {
+			setCreatingDraft(undefined)
+			setCreateStatus({ type: "idle" })
+			setEditingRow({
+				row,
+				draftByKey: makeDraftByKey({ row, writableColumns }),
+			})
+			setUpdateStatus({ type: "idle" })
+		},
+		[writableColumns],
+	)
+
+	const closeEditor = React.useCallback(() => {
+		setEditingRow(undefined)
+		setUpdateStatus({ type: "idle" })
+	}, [])
+
+	const updateDraft = React.useCallback((key: string, value: string) => {
+		setEditingRow(previous => {
+			if (!previous) {
+				return previous
+			}
+			return {
+				...previous,
+				draftByKey: {
+					...previous.draftByKey,
+					[key]: value,
+				},
+			}
+		})
+	}, [])
+
+	const buildPropertiesFromDraft = React.useCallback(
+		(draftByKey: Record<string, string>): NotionPagePropertyInputMap => {
+			const properties: NotionPagePropertyInputMap = {}
+			for (const { config, schema } of writableColumns) {
+				properties[config.key] = propertyValueFromDraft({
+					key: config.key,
+					schema,
+					draft: draftByKey[config.key] ?? "",
+				})
+			}
+			return properties
+		},
+		[writableColumns],
+	)
+
+	const submitUpdate = React.useCallback(async () => {
+		if (!editingRow) {
+			return
+		}
+
+		try {
+			const properties = buildPropertiesFromDraft(editingRow.draftByKey)
+			setUpdateStatus({ type: "saving" })
+			const result = await editingRow.row.update({ properties })
+			if (result.status === "success") {
+				setUpdateStatus({
+					type: "success",
+					message: "Page updated.",
+				})
+				return
+			}
+			setUpdateStatus({ type: "error", message: result.error })
+		} catch (error) {
+			setUpdateStatus({
+				type: "error",
+				message: error instanceof Error ? error.message : "Update failed.",
+			})
+		}
+	}, [editingRow, buildPropertiesFromDraft])
+
+	const openCreateRow = React.useCallback(() => {
+		setEditingRow(undefined)
+		setUpdateStatus({ type: "idle" })
+		setCreatingDraft(emptyDraftByKey(writableColumns))
+		setCreateStatus({ type: "idle" })
+	}, [writableColumns])
+
+	const closeCreateRow = React.useCallback(() => {
+		setCreatingDraft(undefined)
+		setCreateStatus({ type: "idle" })
+	}, [])
+
+	const updateCreateDraft = React.useCallback((key: string, value: string) => {
+		setCreatingDraft(previous => {
+			if (!previous) {
+				return previous
+			}
+			return { ...previous, [key]: value }
+		})
+	}, [])
+
+	const submitCreate = React.useCallback(async () => {
+		if (!creatingDraft) {
+			return
+		}
+
+		try {
+			const properties = buildPropertiesFromDraft(creatingDraft)
+			setCreateStatus({ type: "saving" })
+			const result = await pages.create({
+				parent: { type: "data_source_key", key: activeDataSourceKey },
+				properties,
+			})
+			if (result.status === "success") {
+				setCreateStatus({
+					type: "success",
+					message: `Page created (${result.page.id}).`,
+				})
+				setCreatingDraft(emptyDraftByKey(writableColumns))
+				return
+			}
+			setCreateStatus({ type: "error", message: result.error })
+		} catch (error) {
+			setCreateStatus({
+				type: "error",
+				message: error instanceof Error ? error.message : "Create failed.",
+			})
+		}
+	}, [
+		creatingDraft,
+		buildPropertiesFromDraft,
+		activeDataSourceKey,
+		writableColumns,
+	])
+
+	const filteredItems = React.useMemo(() => {
+		const trimmed = search.trim().toLowerCase()
+		if (trimmed.length === 0) {
+			return items
+		}
+
+		return items.filter(item =>
+			columnConfigs.some(config => {
+				const value =
+					config.key === "id" ? item.id : getRowProperty(item, config.key)
+				return getSearchText(value).toLowerCase().includes(trimmed)
+			}),
+		)
+	}, [columnConfigs, items, search])
+
+	const columns = React.useMemo<ColumnDef<TableRow>[]>(
+		() =>
+			columnConfigs.map(config => ({
+				id: config.key,
+				accessorFn: row =>
+					config.key === "id" ? row.id : getRowProperty(row, config.key),
+				enableSorting: config.kind !== "empty",
+				size: getColumnWidth(config.kind),
+				meta: { kind: config.kind },
+				sortingFn: (left, right) =>
+					compareValues(
+						config.key === "id"
+							? left.original.id
+							: getRowProperty(left.original, config.key),
+						config.key === "id"
+							? right.original.id
+							: getRowProperty(right.original, config.key),
+					),
+				header: ({ column }) => {
+					const sortState = column.getIsSorted()
+					const canSort = column.getCanSort()
+					const isNumeric = config.kind === "number"
+
+					return (
+						<button
+							type="button"
+							onClick={column.getToggleSortingHandler()}
+							disabled={!canSort}
+							title={canSort ? `Sort by ${config.label}` : undefined}
+							aria-sort={
+								sortState === "asc"
+									? "ascending"
+									: sortState === "desc"
+										? "descending"
+										: canSort
+											? "none"
+											: undefined
+							}
+							className={`group/sort inline-flex items-center gap-1.5 disabled:cursor-default ${isNumeric ? "flex-row-reverse" : ""}`}
+						>
+							<span
+								className={`eyebrow truncate ${sortState ? "text-(--foreground)" : ""}`}
+							>
+								{config.label}
+							</span>
+							{canSort ? (
+								<span
+									aria-hidden="true"
+									data-state={sortState || "none"}
+									className={`sort-indicator flex h-3 w-3 shrink-0 items-center justify-center ${
+										sortState
+											? "text-(--accent) opacity-100"
+											: "text-(--muted) opacity-0 group-hover/sort:opacity-70"
+									}`}
+								>
+									<svg
+										viewBox="0 0 12 12"
+										className="h-3 w-3"
+										fill="none"
+										stroke="currentColor"
+										strokeWidth="1.75"
+										strokeLinecap="round"
+										strokeLinejoin="round"
+									>
+										<path d="m3 7 3-3 3 3" />
+									</svg>
+								</span>
+							) : null}
+						</button>
+					)
+				},
+				cell: context => (
+					<PropertyValue
+						value={context.getValue()}
+						kind={config.kind}
+						isPrimary={config.key === primaryColumnId}
+					/>
+				),
+			})),
+		[columnConfigs, primaryColumnId],
+	)
+
+	const table = useReactTable({
+		data: filteredItems,
+		columns,
+		state: { sorting },
+		onSortingChange: setSorting,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+	})
+
+	const hasActiveSearch = search.trim().length > 0
+	const noSearchResults = items.length > 0 && filteredItems.length === 0
+
+	const allColumnsHidden =
+		columnConfigs.length === 0 && allColumnConfigs.length > 0
+
+	const totalCount = items.length
+	const shownCount = filteredItems.length
+	const canUpdateRows = !isUsingFallbackData && writableColumns.length > 0
+
+	return (
+		<section className="flex flex-col gap-3">
+			<div className="stage-toolbar flex flex-wrap items-center gap-2">
+				<div className="field-control relative flex min-w-[220px] flex-1 items-center rounded-md border border-(--line) bg-(--surface-bg) hover:border-(--line-strong)">
+					<svg
+						aria-hidden="true"
+						viewBox="0 0 20 20"
+						className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-(--muted)"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="1.75"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="9" cy="9" r="6" />
+						<path d="m17 17-3.8-3.8" />
+					</svg>
+					<input
+						ref={searchInputRef}
+						type="text"
+						value={search}
+						onChange={event => setSearch(event.target.value)}
+						onKeyDown={event => {
+							if (event.key === "Escape" && search) {
+								event.preventDefault()
+								setSearch("")
+							}
+						}}
+						placeholder="Search rows"
+						aria-label="Search rows"
+						className="min-h-9 w-full bg-transparent pr-20 pl-9 text-sm text-(--foreground) outline-none placeholder:text-(--muted)"
+					/>
+					{hasActiveSearch ? (
+						<button
+							type="button"
+							onClick={() => {
+								setSearch("")
+								searchInputRef.current?.focus()
+							}}
+							aria-label="Clear search"
+							className="absolute top-1/2 right-2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded text-(--muted) transition-colors hover:bg-(--chip-bg) hover:text-(--foreground)"
+						>
+							<svg
+								aria-hidden="true"
+								viewBox="0 0 16 16"
+								className="h-3 w-3"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="1.75"
+								strokeLinecap="round"
+							>
+								<path d="m4 4 8 8M12 4l-8 8" />
+							</svg>
+						</button>
+					) : (
+						<span
+							aria-hidden="true"
+							className="pointer-events-none absolute top-1/2 right-2 -translate-y-1/2"
+						>
+							<span className="kbd">/</span>
+						</span>
+					)}
+				</div>
+
+				<div
+					className="ff-mono hidden items-baseline gap-1 px-1 text-[11px] text-(--muted) tabular-nums sm:inline-flex"
+					aria-live="polite"
+				>
+					<span className="text-(--foreground)">
+						{shownCount.toLocaleString()}
+					</span>
+					<span className="text-(--line-strong)">/</span>
+					<span>{totalCount.toLocaleString()}</span>
+					<span className="eyebrow ml-1.5">rows</span>
+				</div>
+
+				{dataSources.length > 1 ? (
+					<label className="block">
+						<span className="sr-only">Choose data source</span>
+						<select
+							value={activeDataSourceKey}
+							onChange={event => onSelectDataSource(event.target.value)}
+							className="field-control min-h-9 w-full rounded-md border border-(--line) bg-(--surface-bg) px-2 text-sm text-(--foreground) outline-none hover:border-(--line-strong)"
+						>
+							{dataSources.map(dataSource => (
+								<option key={dataSource.key} value={dataSource.key}>
+									{dataSource.key}
+								</option>
+							))}
+						</select>
+					</label>
+				) : null}
+
+				{hasMore ? (
+					<button
+						type="button"
+						onClick={onFetchMore}
+						disabled={isLoading}
+						title={isLoading ? "Loading more rows" : "Fetch more rows"}
+						aria-label={isLoading ? "Loading more rows" : "Fetch more rows"}
+						className="field-control inline-flex h-9 w-9 items-center justify-center rounded-md border border-(--line) bg-(--surface-bg) text-(--muted-strong) transition-colors hover:bg-(--chip-bg) hover:text-(--foreground) disabled:cursor-progress disabled:opacity-80"
+					>
+						{isLoading ? (
+							<svg
+								aria-hidden="true"
+								viewBox="0 0 16 16"
+								className="h-3.5 w-3.5 animate-spin"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="1.75"
+								strokeLinecap="round"
+							>
+								<circle cx="8" cy="8" r="6" strokeOpacity="0.25" />
+								<path d="M14 8a6 6 0 0 0-6-6" />
+							</svg>
+						) : (
+							<svg
+								aria-hidden="true"
+								viewBox="0 0 16 16"
+								className="h-3.5 w-3.5"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="1.75"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+							>
+								<path d="M8 3v10M3 9l5 4 5-4" />
+							</svg>
+						)}
+					</button>
+				) : null}
+
+				{canUpdateRows ? (
+					<button
+						type="button"
+						onClick={openCreateRow}
+						disabled={creatingDraft !== undefined}
+						className="field-control inline-flex min-h-9 items-center gap-1.5 rounded-md border border-(--line) bg-(--surface-bg) px-2.5 text-sm text-(--foreground) hover:border-(--line-strong) hover:bg-(--chip-bg) disabled:cursor-default disabled:opacity-60"
+					>
+						<svg
+							aria-hidden="true"
+							viewBox="0 0 16 16"
+							className="h-3.5 w-3.5"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="1.75"
+							strokeLinecap="round"
+						>
+							<path d="M8 3v10M3 8h10" />
+						</svg>
+						<span>New row</span>
+					</button>
+				) : null}
+
+				<ColumnSettings
+					allColumnConfigs={allColumnConfigs}
+					columnOrder={columnOrder}
+					hiddenColumns={hiddenColumns}
+					onColumnOrderChange={onColumnOrderChange}
+					onHiddenColumnsChange={onHiddenColumnsChange}
+				/>
+			</div>
+
+			{canUpdateRows && creatingDraft ? (
+				<RowEditorPanel
+					mode={{ type: "create" }}
+					draftByKey={creatingDraft}
+					writableColumns={writableColumns}
+					status={createStatus}
+					onDraftChange={updateCreateDraft}
+					onCancel={closeCreateRow}
+					onSubmit={submitCreate}
+				/>
+			) : null}
+
+			{canUpdateRows && editingRow ? (
+				<RowEditorPanel
+					mode={{ type: "update", rowId: editingRow.row.id }}
+					draftByKey={editingRow.draftByKey}
+					writableColumns={writableColumns}
+					status={updateStatus}
+					onDraftChange={updateDraft}
+					onCancel={closeEditor}
+					onSubmit={submitUpdate}
+				/>
+			) : !isUsingFallbackData && writableColumns.length === 0 ? (
+				<p className="flex items-baseline gap-2 text-xs text-(--muted)">
+					<span className="eyebrow">Update</span>
+					<span>
+						No host-provided writable property schemas are available for this
+						data source.
+					</span>
+				</p>
+			) : null}
+
+			{isUsingFallbackData ? (
+				<p className="flex items-baseline gap-2 text-xs text-(--muted)">
+					<span className="eyebrow">Preview</span>
+					<span>
+						Showing sample rows until a data source is mapped for &ldquo;
+						<span className="ff-mono text-(--muted-strong)">
+							{activeDataSourceKey}
+						</span>
+						&rdquo;.
+					</span>
+				</p>
+			) : null}
+			{queryError ? (
+				<p className="flex items-baseline gap-2 text-xs text-(--muted)">
+					<span className="eyebrow">Note</span>
+					<span>{queryError}</span>
+				</p>
+			) : null}
+
+			{isLoading && items.length === 0 ? (
+				<EmptyState
+					title="Loading rows"
+					description="Waiting for the mapped collection to return its first page."
+				/>
+			) : isCollectionEmpty ? (
+				<EmptyState
+					title="No rows yet"
+					description="Add a row in Notion and it will appear here."
+				/>
+			) : allColumnsHidden ? (
+				<EmptyState
+					title="All columns hidden"
+					description="Open the columns menu to show at least one."
+					action={
+						<button
+							type="button"
+							onClick={() => onHiddenColumnsChange(new Set())}
+							className="field-control min-h-9 rounded-md border border-(--line) bg-(--surface-bg) px-3 text-sm text-(--foreground) transition-colors hover:bg-(--chip-bg)"
+						>
+							Show all columns
+						</button>
+					}
+				/>
+			) : noSearchResults ? (
+				<EmptyState
+					title="No matching rows"
+					description={`No values matched "${search}".`}
+					action={
+						<button
+							type="button"
+							onClick={() => setSearch("")}
+							className="field-control min-h-9 rounded-md border border-(--line) bg-(--surface-bg) px-3 text-sm text-(--foreground) transition-colors hover:bg-(--chip-bg)"
+						>
+							Clear search
+						</button>
+					}
+				/>
+			) : (
+				<div className="stage-table table-view-scroll overflow-auto rounded-md border border-(--line) bg-(--surface-bg)">
+					<table className="min-w-full border-separate border-spacing-0">
+						<thead>
+							{table.getHeaderGroups().map(headerGroup => (
+								<tr key={headerGroup.id}>
+									{headerGroup.headers.map(header => {
+										const kind = (
+											header.column.columnDef as { meta?: { kind: ColumnKind } }
+										).meta?.kind
+										const isNumeric = kind === "number"
+										return (
+											<th
+												key={header.id}
+												scope="col"
+												className={`table-head-cell sticky top-0 z-10 border-b border-(--line) px-3 py-2.5 align-middle ${isNumeric ? "text-right" : "text-left"}`}
+												style={{
+													width: header.getSize(),
+													minWidth: header.getSize(),
+												}}
+											>
+												{header.isPlaceholder
+													? null
+													: flexRender(
+															header.column.columnDef.header,
+															header.getContext(),
+														)}
+											</th>
+										)
+									})}
+									{canUpdateRows ? (
+										<th
+											scope="col"
+											className="table-head-cell sticky top-0 z-10 w-[92px] border-b border-(--line) px-3 py-2.5 text-right align-middle"
+										>
+											<span className="eyebrow">Update</span>
+										</th>
+									) : null}
+								</tr>
+							))}
+						</thead>
+
+						<tbody>
+							{table.getRowModel().rows.map(row => (
+								<tr key={row.id} className="data-row group/row">
+									{row.getVisibleCells().map(cell => {
+										const kind = (
+											cell.column.columnDef as { meta?: { kind: ColumnKind } }
+										).meta?.kind
+										const isNumeric = kind === "number"
+										return (
+											<td
+												key={cell.id}
+												className={`border-b border-(--line) px-3 py-2.5 align-middle ${isNumeric ? "text-right" : "text-left"}`}
+												style={{
+													width: cell.column.getSize(),
+													minWidth: cell.column.getSize(),
+												}}
+											>
+												{flexRender(
+													cell.column.columnDef.cell,
+													cell.getContext(),
+												)}
+											</td>
+										)
+									})}
+									{canUpdateRows ? (
+										<td className="w-[92px] border-b border-(--line) px-3 py-2.5 text-right align-middle">
+											<button
+												type="button"
+												onClick={() => openEditorForRow(row.original)}
+												className="field-control rounded-md border border-(--line) bg-(--surface-bg) px-2 py-1 text-xs text-(--foreground) opacity-80 transition-opacity hover:bg-(--chip-bg) hover:opacity-100"
+											>
+												Edit
+											</button>
+										</td>
+									) : null}
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			)}
+		</section>
+	)
+}
+
+function App() {
+	const theme = useTheme()
+	const dataSources = useDataSourceDefinitions()
+	const [activeDataSourceKey, setActiveDataSourceKey] = React.useState(
+		dataSources[0]?.key ?? "default",
+	)
+
+	React.useEffect(() => {
+		if (dataSources.length === 0) {
+			setActiveDataSourceKey("default")
+			return
+		}
+
+		if (
+			!dataSources.some(dataSource => dataSource.key === activeDataSourceKey)
+		) {
+			setActiveDataSourceKey(dataSources[0].key)
+		}
+	}, [activeDataSourceKey, dataSources])
+
+	const queryKey = dataSources.length === 0 ? "default" : activeDataSourceKey
+	const query = useDataSource(queryKey)
+	const colorTheme = theme === "dark" ? "dark" : "light"
+
+	const mappedItems = query.items as TableRow[]
+	const isUsingFallbackData = dataSources.length === 0
+	const isCollectionEmpty =
+		!isUsingFallbackData && !query.isLoading && mappedItems.length === 0
+	const items = isUsingFallbackData ? SAMPLE_ITEMS : mappedItems
+
+	const allColumnConfigs = React.useMemo(
+		() => getColumnConfigs(items, query.propertySchemasById),
+		[items, query.propertySchemasById],
+	)
+
+	const [columnOrder, setColumnOrder] = React.useState<string[]>([])
+	const [hiddenColumns, setHiddenColumns] = React.useState<Set<string>>(
+		() => new Set(),
+	)
+	const seededForKey = React.useRef<string | null>(null)
+
+	React.useEffect(() => {
+		if (seededForKey.current === queryKey) {
+			return
+		}
+		if (allColumnConfigs.length === 0) {
+			return
+		}
+		seededForKey.current = queryKey
+		setColumnOrder(allColumnConfigs.map(config => config.key))
+		setHiddenColumns(new Set())
+	}, [queryKey, allColumnConfigs])
+
+	React.useEffect(() => {
+		setColumnOrder(previous => {
+			if (previous.length === 0) {
+				return previous
+			}
+			const known = new Set(previous)
+			const additions = allColumnConfigs
+				.map(config => config.key)
+				.filter(key => !known.has(key))
+			if (additions.length === 0) {
+				return previous
+			}
+			return [...previous, ...additions]
+		})
+	}, [allColumnConfigs])
+
+	const visibleColumnConfigs = React.useMemo(() => {
+		if (allColumnConfigs.length === 0) {
+			return allColumnConfigs
+		}
+		const byKey = new Map(
+			allColumnConfigs.map(config => [config.key, config] as const),
+		)
+		const seen = new Set<string>()
+		const ordered: ColumnConfig[] = []
+		for (const key of columnOrder) {
+			const config = byKey.get(key)
+			if (!config || seen.has(key)) {
+				continue
+			}
+			seen.add(key)
+			if (!hiddenColumns.has(key)) {
+				ordered.push(config)
+			}
+		}
+		for (const config of allColumnConfigs) {
+			if (seen.has(config.key)) {
+				continue
+			}
+			seen.add(config.key)
+			if (!hiddenColumns.has(config.key)) {
+				ordered.push(config)
+			}
+		}
+		return ordered
+	}, [allColumnConfigs, columnOrder, hiddenColumns])
+
+	return (
+		<div data-theme={colorTheme} className="table-view-shell">
+			<div className="p-4">
+				<DataWorkspace
+					items={items}
+					columnConfigs={visibleColumnConfigs}
+					allColumnConfigs={allColumnConfigs}
+					propertySchemasById={query.propertySchemasById}
+					columnOrder={columnOrder}
+					hiddenColumns={hiddenColumns}
+					onColumnOrderChange={setColumnOrder}
+					onHiddenColumnsChange={setHiddenColumns}
+					activeDataSourceKey={queryKey}
+					dataSources={dataSources}
+					onSelectDataSource={setActiveDataSourceKey}
+					hasMore={query.hasMore}
+					isLoading={query.isLoading}
+					onFetchMore={query.fetchMore}
+					isUsingFallbackData={isUsingFallbackData}
+					isCollectionEmpty={isCollectionEmpty}
+					queryError={query.error}
+				/>
+			</div>
+		</div>
+	)
+}
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+	<NotionCustomBlock>
+		<App />
+	</NotionCustomBlock>,
+)