create-ncblock 0.0.1

package/templates/table-view/package.json

@@ -0,0 +1,31 @@
+{
+	"name": "table-view",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"notionCustomTemplate": {
+		"title": "Table View",
+		"description": "A generic table powered by TanStack Table that renders every supported custom-sdk property shape.",
+		"recommended": false
+	},
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"typecheck": "tsc --noEmit"
+	},
+	"dependencies": {
+		"ncblock": "workspace:*",
+		"@tanstack/react-table": "^8.21.3",
+		"react": "^19.2.5",
+		"react-dom": "^19.2.5"
+	},
+	"devDependencies": {
+		"@tailwindcss/vite": "^4.2.4",
+		"@types/react": "^19.2.14",
+		"@types/react-dom": "^19.2.3",
+		"@vitejs/plugin-react": "^6.0.1",
+		"tailwindcss": "^4.2.4",
+		"typescript": "^6.0.3",
+		"vite": "^8.0.10"
+	}
+}

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

@@ -0,0 +1,256 @@
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400..600,0..100&family=Geist+Mono:wght@400;500;600&display=swap");
+@import "tailwindcss";
+
+:root {
+	--font-sans:
+		ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
+		Arial, sans-serif;
+	--font-display: "Fraunces", ui-serif, "Iowan Old Style", Georgia, serif;
+	--font-mono:
+		"Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
+
+	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+	font-family: var(--font-sans);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root,
+[data-theme="light"] {
+	color-scheme: light;
+	--app-bg: rgb(255, 255, 255);
+	--surface-bg: rgb(255, 255, 255);
+	--surface-sunken: rgb(247, 246, 243);
+	--foreground: rgb(55, 53, 47);
+	--muted: rgba(55, 53, 47, 0.55);
+	--muted-strong: rgba(55, 53, 47, 0.75);
+	--line: rgba(55, 53, 47, 0.09);
+	--line-strong: rgba(55, 53, 47, 0.2);
+	--chip-bg: rgba(55, 53, 47, 0.05);
+	--focus-ring: oklch(0.55 0.14 40 / 0.55);
+	--scroll-thumb: rgba(55, 53, 47, 0.2);
+	--accent: oklch(0.55 0.14 40);
+	--accent-soft: oklch(0.55 0.14 40 / 0.1);
+	--row-hover: rgba(55, 53, 47, 0.04);
+}
+
+[data-theme="dark"] {
+	color-scheme: dark;
+	--app-bg: rgb(25, 25, 25);
+	--surface-bg: rgb(32, 32, 32);
+	--surface-sunken: rgb(22, 22, 22);
+	--foreground: rgba(255, 255, 255, 0.9);
+	--muted: rgba(255, 255, 255, 0.46);
+	--muted-strong: rgba(255, 255, 255, 0.72);
+	--line: rgba(255, 255, 255, 0.094);
+	--line-strong: rgba(255, 255, 255, 0.18);
+	--chip-bg: rgba(255, 255, 255, 0.055);
+	--focus-ring: oklch(0.78 0.13 65 / 0.55);
+	--scroll-thumb: rgba(255, 255, 255, 0.18);
+	--accent: oklch(0.8 0.13 70);
+	--accent-soft: oklch(0.8 0.13 70 / 0.13);
+	--row-hover: rgba(255, 255, 255, 0.035);
+}
+
+body {
+	margin: 0;
+	font-family: var(--font-sans);
+}
+
+.table-view-shell {
+	min-height: 100vh;
+	background: var(--app-bg);
+	color: var(--foreground);
+}
+
+.ff-display {
+	font-family: var(--font-display);
+	font-optical-sizing: auto;
+	font-variation-settings: "SOFT" 30;
+	letter-spacing: -0.01em;
+}
+
+.ff-mono {
+	font-family: var(--font-mono);
+	font-variant-numeric: tabular-nums;
+}
+
+.tnum {
+	font-variant-numeric: tabular-nums;
+}
+
+/*
+ *  Cell type scale — use these everywhere inside the table body.
+ *  Only three sizes: primary display, body, fine print.
+ */
+.cell-primary {
+	font-size: 15px;
+	line-height: 20px;
+	font-weight: 500;
+	letter-spacing: -0.01em;
+}
+
+.cell-body {
+	font-size: 13px;
+	line-height: 20px;
+}
+
+.cell-mono {
+	font-size: 13px;
+	line-height: 20px;
+}
+
+.cell-fine {
+	font-size: 11.5px;
+	line-height: 16px;
+}
+
+.eyebrow {
+	font-family: var(--font-mono);
+	font-size: 10px;
+	font-weight: 500;
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
+	color: var(--muted);
+}
+
+.kbd {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 18px;
+	height: 18px;
+	padding: 0 5px;
+	font-family: var(--font-mono);
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1;
+	border-radius: 4px;
+	border: 1px solid var(--line);
+	background: var(--surface-bg);
+	color: var(--muted-strong);
+	box-shadow: 0 1px 0 var(--line);
+	display: inline-flex;
+	align-items: center;
+	min-width: 18px;
+	justify-content: center;
+}
+
+.data-row > td {
+	transition:
+		background-color 150ms var(--ease-out),
+		box-shadow 150ms var(--ease-out);
+}
+
+@media (hover: hover) {
+	.data-row:hover > td {
+		background: var(--row-hover);
+	}
+	.data-row:hover > td:first-child {
+		box-shadow: inset 2px 0 0 var(--accent);
+	}
+}
+
+.sort-indicator {
+	transition:
+		transform 180ms var(--ease-out),
+		opacity 150ms var(--ease-out),
+		color 150ms var(--ease-out);
+}
+
+.sort-indicator[data-state="desc"] {
+	transform: rotate(180deg);
+}
+
+.table-head-cell {
+	background: var(--surface-bg);
+}
+
+.field-control {
+	transition:
+		border-color 150ms var(--ease-out),
+		background-color 150ms var(--ease-out),
+		box-shadow 150ms var(--ease-out);
+}
+
+.field-control:focus-visible,
+.field-control:focus-within {
+	outline: none;
+	border-color: var(--accent);
+	box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.table-view-scroll {
+	scrollbar-width: thin;
+	scrollbar-color: var(--scroll-thumb) transparent;
+}
+
+.table-view-scroll > table {
+	table-layout: fixed;
+}
+
+.table-view-scroll::-webkit-scrollbar {
+	height: 10px;
+	width: 10px;
+}
+
+.table-view-scroll::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.table-view-scroll::-webkit-scrollbar-thumb {
+	border: 2px solid transparent;
+	border-radius: 999px;
+	background: var(--scroll-thumb);
+	background-clip: padding-box;
+}
+
+/*
+ * ─────────────────────────────────────────────────────────
+ *  MOUNT STORYBOARD
+ *
+ *    0ms   shell visible, background gradient settles
+ *   80ms   toolbar fades in (12px → 0 translate)
+ *  220ms   table container fades in (8px → 0 translate)
+ * ─────────────────────────────────────────────────────────
+ */
+
+.stage-toolbar {
+	position: relative;
+	z-index: 2;
+	opacity: 0;
+	transform: translateY(12px);
+	animation: stageReveal 420ms var(--ease-out) 80ms forwards;
+}
+
+.stage-table {
+	position: relative;
+	z-index: 1;
+	opacity: 0;
+	transform: translateY(8px);
+	animation: stageReveal 520ms var(--ease-out) 220ms forwards;
+}
+
+@keyframes stageReveal {
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.stage-toolbar,
+	.stage-table {
+		opacity: 1;
+		transform: none;
+		animation: none;
+	}
+	.sort-indicator,
+	.data-row > td,
+	.field-control {
+		transition: none;
+	}
+}