Wire the app to the shared Supabase catalog (public catalog read integration)

Moves port/cable/category/device-template data from per-diagram embedded
storage to the global public/private catalog backed by Supabase, per
organized-ideas.md's "live reference, not snapshot" decision.

- domain/types.ts, project.ts, compatibility.ts, bom.ts: lookup functions
  now take an explicit Catalog parameter instead of deriving data from
  Project — Project is reduced to just diagram-scoped fields.
- New CatalogRepository/SupabaseCatalogRepository (mirrors the
  DiagramRepository pattern) and catalogStore.ts, replacing the
  catalog-related actions that used to live in projectStore.
- device_templates gets a plain-text manufacturer column for now (the
  normalized manufacturer catalog from organized-ideas.md §3 is its own
  future pass, not blocking this one).
- domain/library.ts is no longer imported by the app — it's now only the
  source scripts/generate-seed.mjs reads to produce supabase/seed.sql.
- Swept every UI call site via tsc -b until clean; oxlint clean; 23/23
  pgTAP RLS tests still passing after a `supabase db reset`.

src/components/bom/BomPanel.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { computeBom } from '../../domain/bom'
+import { useCatalogStore } from '../../state/catalogStore'
 import { useProjectStore } from '../../state/projectStore'
 
 function formatCost(value: number): string {
@@ -8,7 +9,8 @@ function formatCost(value: number): string {
 
 export default function BomPanel() {
   const project = useProjectStore((s) => s.project)
-  const bom = useMemo(() => computeBom(project), [project])
+  const catalog = useCatalogStore((s) => s.catalog)
+  const bom = useMemo(() => computeBom(project, catalog), [project, catalog])
 
   const hasMissingCost =
     bom.devices.some((line) => line.devicesMissingCost > 0) || bom.cables.some((line) => line.connectionsMissingCost > 0)

src/components/canvas/FlowCanvas.tsx

@@ -16,6 +16,7 @@ import '@xyflow/react/dist/style.css'
 import { useCallback, useMemo } from 'react'
 import { validateConnection } from '../../domain/compatibility'
 import { allCableTypes, allPortTypes, cableTypesForConnection, deviceCategoryName, getPortType } from '../../domain/project'
+import { useCatalogStore } from '../../state/catalogStore'
 import { useProjectStore } from '../../state/projectStore'
 import CableEdge, { type CableFlowEdge } from './CableEdge'
 import DeviceNode, { type DeviceFlowNode, type PortInfo } from './DeviceNode'
@@ -38,9 +39,10 @@ function FlowCanvasInner() {
   const selectDevice = useProjectStore((s) => s.selectDevice)
   const selectConnection = useProjectStore((s) => s.selectConnection)
   const { screenToFlowPosition } = useReactFlow()
+  const catalog = useCatalogStore((s) => s.catalog)
 
-  const portTypes = useMemo(() => allPortTypes(project), [project])
-  const cableTypes = useMemo(() => allCableTypes(project), [project])
+  const portTypes = useMemo(() => allPortTypes(catalog), [catalog])
+  const cableTypes = useMemo(() => allCableTypes(catalog), [catalog])
 
   const nodes: DeviceFlowNode[] = useMemo(
     () =>
@@ -58,10 +60,10 @@ function FlowCanvasInner() {
           type: 'device',
           position: device.position,
           selected: device.id === selectedDeviceId,
-          data: { device, categoryName: deviceCategoryName(project, device.category), portInfos },
+          data: { device, categoryName: deviceCategoryName(catalog, device.category), portInfos },
         }
       }),
-    [project, portTypes, selectedDeviceId],
+    [project, catalog, portTypes, selectedDeviceId],
   )
 
   const edges: CableFlowEdge[] = useMemo(
@@ -92,14 +94,14 @@ function FlowCanvasInner() {
       const sourcePortId = parsePortId(c.sourceHandle)
       const targetPortId = parsePortId(c.targetHandle)
       if (!c.source || !c.target || !sourcePortId || !targetPortId) return false
-      return validateConnection(project, {
+      return validateConnection(project, catalog, {
         sourceDeviceId: c.source,
         sourcePortId,
         targetDeviceId: c.target,
         targetPortId,
       }).valid
     },
-    [project],
+    [project, catalog],
   )
 
   const onConnect = useCallback(
@@ -111,12 +113,12 @@ function FlowCanvasInner() {
       const targetDevice = project.devices.find((d) => d.id === connection.target)
       const sourcePort = sourceDevice?.ports.find((p) => p.id === sourcePortId)
       const targetPort = targetDevice?.ports.find((p) => p.id === targetPortId)
-      const sourcePortType = sourcePort && getPortType(project, sourcePort.portTypeId)
-      const targetPortType = targetPort && getPortType(project, targetPort.portTypeId)
+      const sourcePortType = sourcePort && getPortType(catalog, sourcePort.portTypeId)
+      const targetPortType = targetPort && getPortType(catalog, targetPort.portTypeId)
       const defaultCableType =
-        sourcePortType && targetPortType && cableTypesForConnection(project, sourcePortType, targetPortType)[0]
+        sourcePortType && targetPortType && cableTypesForConnection(catalog, sourcePortType, targetPortType)[0]
       if (!defaultCableType) return
-      addConnection({
+      addConnection(catalog, {
         sourceDeviceId: connection.source,
         sourcePortId,
         targetDeviceId: connection.target,
@@ -124,7 +126,7 @@ function FlowCanvasInner() {
         cableTypeId: defaultCableType.id,
       })
     },
-    [project, addConnection],
+    [project, catalog, addConnection],
   )
 
   const onNodesChange = useCallback(
@@ -161,9 +163,9 @@ function FlowCanvasInner() {
       if (!templateId) return
       event.preventDefault()
       const position = screenToFlowPosition({ x: event.clientX, y: event.clientY })
-      addDeviceFromTemplate(templateId, position)
+      addDeviceFromTemplate(catalog, templateId, position)
     },
-    [screenToFlowPosition, addDeviceFromTemplate],
+    [screenToFlowPosition, catalog, addDeviceFromTemplate],
   )
 
   return (

src/components/common/CategorySelect.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react'
 import { allDeviceCategories } from '../../domain/project'
-import { useProjectStore } from '../../state/projectStore'
+import { useCatalogStore } from '../../state/catalogStore'
 
 const NEW_CATEGORY_VALUE = '__new__'
 
@@ -16,20 +16,20 @@ export default function CategorySelect({
   onChange: (categoryId: string) => void
   className?: string
 }) {
-  const project = useProjectStore((s) => s.project)
-  const addCustomDeviceCategory = useProjectStore((s) => s.addCustomDeviceCategory)
+  const catalog = useCatalogStore((s) => s.catalog)
+  const addCustomDeviceCategory = useCatalogStore((s) => s.addCustomDeviceCategory)
   const [creating, setCreating] = useState(false)
   const [draftName, setDraftName] = useState('')
 
   const categories = useMemo(
-    () => [...allDeviceCategories(project)].sort((a, b) => a.name.localeCompare(b.name)),
-    [project],
+    () => [...allDeviceCategories(catalog)].sort((a, b) => a.name.localeCompare(b.name)),
+    [catalog],
   )
 
-  const commitNewCategory = () => {
+  const commitNewCategory = async () => {
     const trimmed = draftName.trim()
     if (trimmed) {
-      onChange(addCustomDeviceCategory(trimmed))
+      onChange(await addCustomDeviceCategory(trimmed))
     }
     setCreating(false)
     setDraftName('')

src/components/inspector/ConnectionInspector.tsx

@@ -1,9 +1,11 @@
 import { useMemo } from 'react'
 import { cableTypesForConnection, getPortType } from '../../domain/project'
+import { useCatalogStore } from '../../state/catalogStore'
 import { useProjectStore } from '../../state/projectStore'
 
 export default function ConnectionInspector({ connectionId }: { connectionId: string }) {
   const project = useProjectStore((s) => s.project)
+  const catalog = useCatalogStore((s) => s.catalog)
   const updateConnection = useProjectStore((s) => s.updateConnection)
   const removeConnection = useProjectStore((s) => s.removeConnection)
 
@@ -15,10 +17,10 @@ export default function ConnectionInspector({ connectionId }: { connectionId: st
 
   const availableCableTypes = useMemo(() => {
     if (!sourcePort || !targetPort) return []
-    const sourcePortType = getPortType(project, sourcePort.portTypeId)
-    const targetPortType = getPortType(project, targetPort.portTypeId)
-    return sourcePortType && targetPortType ? cableTypesForConnection(project, sourcePortType, targetPortType) : []
-  }, [project, sourcePort, targetPort])
+    const sourcePortType = getPortType(catalog, sourcePort.portTypeId)
+    const targetPortType = getPortType(catalog, targetPort.portTypeId)
+    return sourcePortType && targetPortType ? cableTypesForConnection(catalog, sourcePortType, targetPortType) : []
+  }, [catalog, sourcePort, targetPort])
 
   const cableCostPerUnit = availableCableTypes.find((ct) => ct.id === connection?.cableTypeId)?.costPerUnit
 

src/components/inspector/DeviceInspector.tsx

@@ -2,11 +2,13 @@ import { useMemo, useState } from 'react'
 import { PORT_DIRECTIONS } from '../../domain/constants'
 import { allPortTypes } from '../../domain/project'
 import type { PortDirection } from '../../domain/types'
+import { useCatalogStore } from '../../state/catalogStore'
 import { useProjectStore } from '../../state/projectStore'
 import CategorySelect from '../common/CategorySelect'
 
 export default function DeviceInspector({ deviceId }: { deviceId: string }) {
   const project = useProjectStore((s) => s.project)
+  const catalog = useCatalogStore((s) => s.catalog)
   const updateDevice = useProjectStore((s) => s.updateDevice)
   const removeDevice = useProjectStore((s) => s.removeDevice)
   const addPort = useProjectStore((s) => s.addPort)
@@ -17,8 +19,8 @@ export default function DeviceInspector({ deviceId }: { deviceId: string }) {
 
   const device = project.devices.find((d) => d.id === deviceId)
   const portTypes = useMemo(
-    () => [...allPortTypes(project)].sort((a, b) => a.name.localeCompare(b.name)),
-    [project],
+    () => [...allPortTypes(catalog)].sort((a, b) => a.name.localeCompare(b.name)),
+    [catalog],
   )
 
   if (!device) return null

src/components/layout/AppShell.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+import { useCatalogStore } from '../../state/catalogStore'
 import { useProjectStore } from '../../state/projectStore'
 import FlowCanvas from '../canvas/FlowCanvas'
 import DevicePalette from '../palette/DevicePalette'
@@ -9,12 +10,15 @@ import TopBar from './TopBar'
 export default function AppShell() {
   const isLoaded = useProjectStore((s) => s.isLoaded)
   const loadInitialDiagram = useProjectStore((s) => s.loadInitialDiagram)
+  const isCatalogLoaded = useCatalogStore((s) => s.isLoaded)
+  const loadCatalog = useCatalogStore((s) => s.loadCatalog)
 
   useEffect(() => {
     loadInitialDiagram()
-  }, [loadInitialDiagram])
+    loadCatalog()
+  }, [loadInitialDiagram, loadCatalog])
 
-  if (!isLoaded) {
+  if (!isLoaded || !isCatalogLoaded) {
     return <div className="flex h-screen items-center justify-center text-sm text-slate-400">Loading…</div>
   }
 

src/components/palette/CableTypeManager.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react'
 import { allCableTypes, allPortTypes } from '../../domain/project'
 import type { CableType, PortType } from '../../domain/types'
-import { useProjectStore } from '../../state/projectStore'
+import { useCatalogStore } from '../../state/catalogStore'
 
 const UNITS: CableType['unit'][] = ['ft', 'm']
 
@@ -129,19 +129,19 @@ function CableTypeForm({
 }
 
 export default function CableTypesPanel() {
-  const project = useProjectStore((s) => s.project)
-  const addCustomCableType = useProjectStore((s) => s.addCustomCableType)
-  const updateCustomCableType = useProjectStore((s) => s.updateCustomCableType)
+  const catalog = useCatalogStore((s) => s.catalog)
+  const addCustomCableType = useCatalogStore((s) => s.addCustomCableType)
+  const updateCustomCableType = useCatalogStore((s) => s.updateCustomCableType)
   const [creating, setCreating] = useState(false)
   const [editingId, setEditingId] = useState<string | null>(null)
 
   const portTypes = useMemo(
-    () => [...allPortTypes(project)].sort((a, b) => a.name.localeCompare(b.name)),
-    [project],
+    () => [...allPortTypes(catalog)].sort((a, b) => a.name.localeCompare(b.name)),
+    [catalog],
   )
   const allTypes = useMemo(
-    () => [...allCableTypes(project)].sort((a, b) => a.name.localeCompare(b.name)),
-    [project],
+    () => [...allCableTypes(catalog)].sort((a, b) => a.name.localeCompare(b.name)),
+    [catalog],
   )
   const customTypes = useMemo(() => allTypes.filter((ct) => ct.custom), [allTypes])
   const builtInTypes = useMemo(() => allTypes.filter((ct) => !ct.custom), [allTypes])

src/components/palette/DevicePalette.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react'
-import { allDeviceCategories, allDeviceTemplates, hiddenBuiltInDeviceTemplates } from '../../domain/project'
+import { allDeviceCategories, allDeviceTemplates, hiddenDeviceTemplates } from '../../domain/project'
 import type { DeviceTemplate } from '../../domain/types'
+import { useCatalogStore } from '../../state/catalogStore'
 import { useProjectStore } from '../../state/projectStore'
 import { TEMPLATE_DRAG_MIME } from '../canvas/FlowCanvas'
 import Chevron from '../common/Chevron'
@@ -10,9 +11,11 @@ import DeviceTemplateEditor from './DeviceTemplateEditor'
 export default function DevicePalette() {
   const project = useProjectStore((s) => s.project)
   const addDeviceFromTemplate = useProjectStore((s) => s.addDeviceFromTemplate)
-  const removeCustomDeviceTemplate = useProjectStore((s) => s.removeCustomDeviceTemplate)
-  const hideBuiltInDeviceTemplate = useProjectStore((s) => s.hideBuiltInDeviceTemplate)
-  const restoreBuiltInDeviceTemplate = useProjectStore((s) => s.restoreBuiltInDeviceTemplate)
+  const catalog = useCatalogStore((s) => s.catalog)
+  const hiddenPublicIds = useCatalogStore((s) => s.hiddenPublicDeviceTemplateIds)
+  const removeCustomDeviceTemplate = useCatalogStore((s) => s.removeCustomDeviceTemplate)
+  const hidePublicDeviceTemplate = useCatalogStore((s) => s.hidePublicDeviceTemplate)
+  const restorePublicDeviceTemplate = useCatalogStore((s) => s.restorePublicDeviceTemplate)
   const [editorTarget, setEditorTarget] = useState<'new' | DeviceTemplate | null>(null)
   const [portTypesOpen, setPortTypesOpen] = useState(false)
   const [hiddenListOpen, setHiddenListOpen] = useState(false)
@@ -21,10 +24,10 @@ export default function DevicePalette() {
   const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set())
 
   const groups = useMemo(() => {
-    const categories = allDeviceCategories(project)
+    const categories = allDeviceCategories(catalog)
     const categoryName = (id: string) => categories.find((c) => c.id === id)?.name ?? id
     const byCategory = new Map<string, DeviceTemplate[]>()
-    for (const template of allDeviceTemplates(project)) {
+    for (const template of allDeviceTemplates(catalog, hiddenPublicIds)) {
       const list = byCategory.get(template.category) ?? []
       list.push(template)
       byCategory.set(template.category, list)
@@ -36,7 +39,7 @@ export default function DevicePalette() {
         templates: templates.sort((a, b) => a.name.localeCompare(b.name)),
       }))
       .sort((a, b) => a.categoryName.localeCompare(b.categoryName))
-  }, [project])
+  }, [catalog, hiddenPublicIds])
 
   const toggleCategory = (categoryId: string) => {
     setExpandedCategories((prev) => {
@@ -59,15 +62,15 @@ export default function DevicePalette() {
   const handleQuickAdd = (template: DeviceTemplate) => {
     // Cascade placement so repeated quick-adds don't stack exactly on top of each other.
     const offset = (project.devices.length % 8) * 24
-    addDeviceFromTemplate(template.id, { x: 80 + offset, y: 80 + offset })
+    addDeviceFromTemplate(catalog, template.id, { x: 80 + offset, y: 80 + offset })
   }
 
   const handleDelete = (template: DeviceTemplate) => {
-    if (template.builtIn) {
+    if (!template.custom) {
       const confirmed = window.confirm(
-        `Hide "${template.name}" from your device library? It's a built-in default, so you can bring it back later from "Show hidden defaults" at the bottom of this panel. Devices already placed on the canvas from it won't be affected.`,
+        `Hide "${template.name}" from your device library? It's a public default, so you can bring it back later from "Show hidden defaults" at the bottom of this panel. Devices already placed on the canvas from it won't be affected.`,
       )
-      if (confirmed) hideBuiltInDeviceTemplate(template.id)
+      if (confirmed) hidePublicDeviceTemplate(template.id)
       return
     }
     const confirmed = window.confirm(
@@ -76,7 +79,7 @@ export default function DevicePalette() {
     if (confirmed) removeCustomDeviceTemplate(template.id)
   }
 
-  const hiddenDefaults = useMemo(() => hiddenBuiltInDeviceTemplates(project), [project])
+  const hiddenDefaults = useMemo(() => hiddenDeviceTemplates(catalog, hiddenPublicIds), [catalog, hiddenPublicIds])
 
   return (
     <aside className="flex h-full w-64 shrink-0 flex-col border-r border-slate-200 bg-slate-50">
@@ -129,11 +132,11 @@ export default function DevicePalette() {
                           <div className="truncate font-medium text-slate-700">{template.name}</div>
                           <div className="truncate text-[10px] text-slate-400">
                             {template.ports.length} port{template.ports.length === 1 ? '' : 's'}
-                            {!template.builtIn ? ' · custom' : ''}
+                            {template.custom ? ' · custom' : ''}
                           </div>
                         </div>
                         <div className="ml-2 flex shrink-0 items-center gap-1 opacity-0 group-hover:opacity-100">
-                          {!template.builtIn && (
+                          {template.custom && (
                             <button
                               onClick={() => setEditorTarget(template)}
                               title="Edit this device"
@@ -144,7 +147,7 @@ export default function DevicePalette() {
                           )}
                           <button
                             onClick={() => handleDelete(template)}
-                            title={template.builtIn ? 'Hide this default device' : 'Delete from library'}
+                            title={template.custom ? 'Delete from library' : 'Hide this default device'}
                             className="rounded bg-slate-100 px-1.5 py-0.5 text-slate-500 hover:bg-red-50 hover:text-red-600"
                           >
                             ✕
@@ -183,7 +186,7 @@ export default function DevicePalette() {
                 <li key={template.id} className="flex items-center justify-between rounded bg-white px-2 py-1 text-xs">
                   <span className="truncate text-slate-600">{template.name}</span>
                   <button
-                    onClick={() => restoreBuiltInDeviceTemplate(template.id)}
+                    onClick={() => restorePublicDeviceTemplate(template.id)}
                     className="shrink-0 rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-600 hover:bg-indigo-100 hover:text-indigo-700"
                   >
                     Restore

src/components/palette/DeviceTemplateEditor.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react'
 import { PORT_CATEGORIES, PORT_DIRECTIONS } from '../../domain/constants'
 import { allPortTypes, expandCompatibleFamilyIds, incrementPortName } from '../../domain/project'
 import type { DeviceTemplate, PortDirection } from '../../domain/types'
-import { useProjectStore } from '../../state/projectStore'
+import { useCatalogStore } from '../../state/catalogStore'
 import CategorySelect from '../common/CategorySelect'
 import Modal from '../common/Modal'
 
@@ -31,14 +31,14 @@ export default function DeviceTemplateEditor({
    *  palette can expand that category and reveal what was just created/edited. */
   onSaved?: (categoryId: string) => void
 }) {
-  const project = useProjectStore((s) => s.project)
-  const addCustomDeviceTemplate = useProjectStore((s) => s.addCustomDeviceTemplate)
-  const updateCustomDeviceTemplate = useProjectStore((s) => s.updateCustomDeviceTemplate)
-  const addCustomPortType = useProjectStore((s) => s.addCustomPortType)
+  const catalog = useCatalogStore((s) => s.catalog)
+  const addCustomDeviceTemplate = useCatalogStore((s) => s.addCustomDeviceTemplate)
+  const updateCustomDeviceTemplate = useCatalogStore((s) => s.updateCustomDeviceTemplate)
+  const addCustomPortType = useCatalogStore((s) => s.addCustomPortType)
 
   const portTypes = useMemo(
-    () => [...allPortTypes(project)].sort((a, b) => a.name.localeCompare(b.name)),
-    [project],
+    () => [...allPortTypes(catalog)].sort((a, b) => a.name.localeCompare(b.name)),
+    [catalog],
   )
 
   const [name, setName] = useState(template?.name ?? '')

src/components/palette/PortTypeManager.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react'
 import { PORT_CATEGORIES } from '../../domain/constants'
 import { allPortTypes, expandCompatibleFamilyIds } from '../../domain/project'
 import type { PortType } from '../../domain/types'
-import { useProjectStore } from '../../state/projectStore'
+import { useCatalogStore } from '../../state/catalogStore'
 
 function EditCustomPortTypeForm({
   portType,
@@ -13,7 +13,7 @@ function EditCustomPortTypeForm({
   allTypes: PortType[]
   onCancel: () => void
 }) {
-  const updateCustomPortType = useProjectStore((s) => s.updateCustomPortType)
+  const updateCustomPortType = useCatalogStore((s) => s.updateCustomPortType)
   const [name, setName] = useState(portType.name)
   const [category, setCategory] = useState<(typeof PORT_CATEGORIES)[number]['value']>(portType.category)
   const [family, setFamily] = useState(portType.family)
@@ -100,12 +100,12 @@ function EditCustomPortTypeForm({
 }
 
 export default function PortTypesPanel() {
-  const project = useProjectStore((s) => s.project)
+  const catalog = useCatalogStore((s) => s.catalog)
   const [editingId, setEditingId] = useState<string | null>(null)
 
   const allTypes = useMemo(
-    () => [...allPortTypes(project)].sort((a, b) => a.name.localeCompare(b.name)),
-    [project],
+    () => [...allPortTypes(catalog)].sort((a, b) => a.name.localeCompare(b.name)),
+    [catalog],
   )
   const customTypes = useMemo(() => allTypes.filter((pt) => pt.custom), [allTypes])
   const builtInTypes = useMemo(() => allTypes.filter((pt) => !pt.custom), [allTypes])

src/data/CatalogRepository.ts

@@ -0,0 +1,30 @@
+import type { Catalog, CableType, DeviceCategoryDef, DeviceTemplate, PortType } from '../domain/types'
+
+/**
+ * Storage abstraction for the global port/cable/category/device-template
+ * catalog — mirrors DiagramRepository's role, but for catalog data instead
+ * of diagrams. Fetching returns everything the current user can see (public
+ * entries plus their own private ones); RLS does that filtering server-side,
+ * so implementations don't need to filter client-side.
+ *
+ * Only covers the "read + manage your own private entries" surface for now.
+ * Submitting a private entry for public review/promotion is a separate,
+ * not-yet-built workflow (organized-ideas.md §3/§9) — these `add*`/`update*`
+ * methods always create or edit is_public = false rows you own.
+ */
+export interface CatalogRepository {
+  /** Everything visible to the current user: public entries plus their own private ones. */
+  load(): Promise<Catalog>
+
+  addDeviceCategory(name: string): Promise<DeviceCategoryDef>
+
+  addPortType(portType: Omit<PortType, 'id' | 'custom'>): Promise<PortType>
+  updatePortType(id: string, patch: Partial<Omit<PortType, 'id' | 'custom'>>): Promise<void>
+
+  addCableType(cableType: Omit<CableType, 'id' | 'custom'>): Promise<CableType>
+  updateCableType(id: string, patch: Partial<Omit<CableType, 'id' | 'custom'>>): Promise<void>
+
+  addDeviceTemplate(template: Omit<DeviceTemplate, 'id' | 'custom'>): Promise<DeviceTemplate>
+  updateDeviceTemplate(id: string, patch: Partial<Omit<DeviceTemplate, 'id' | 'custom'>>): Promise<void>
+  removeDeviceTemplate(id: string): Promise<void>
+}

src/data/SupabaseCatalogRepository.ts

@@ -0,0 +1,284 @@
+import { v4 as uuid } from 'uuid'
+import type { Catalog, CableType, DeviceCategoryDef, DeviceTemplate, Port, PortType } from '../domain/types'
+import type { CatalogRepository } from './CatalogRepository'
+import { supabase } from './supabaseClient'
+
+interface DeviceCategoryRow {
+  id: string
+  name: string
+  is_public: boolean
+}
+
+interface PortTypeRow {
+  id: string
+  name: string
+  category: PortType['category']
+  family: string
+  compatible_family_ids: string[]
+  max_connections: number | null
+  is_public: boolean
+}
+
+interface CableTypeRow {
+  id: string
+  name: string
+  family: string
+  family2: string | null
+  unit: CableType['unit']
+  cost_per_unit: number | null
+  is_public: boolean
+}
+
+interface DeviceTemplateRow {
+  id: string
+  name: string
+  category_id: string
+  manufacturer: string | null
+  model: string | null
+  cost: number | null
+  is_public: boolean
+}
+
+interface DeviceTemplatePortRow {
+  id: string
+  device_template_id: string
+  name: string
+  direction: Port['direction']
+  port_type_id: string
+  sort_order: number
+}
+
+function toDeviceCategory(row: DeviceCategoryRow): DeviceCategoryDef {
+  return { id: row.id, name: row.name, custom: !row.is_public }
+}
+
+function toPortType(row: PortTypeRow): PortType {
+  return {
+    id: row.id,
+    name: row.name,
+    category: row.category,
+    family: row.family,
+    compatibleFamilyIds: row.compatible_family_ids.length > 0 ? row.compatible_family_ids : undefined,
+    maxConnections: row.max_connections ?? undefined,
+    custom: !row.is_public,
+  }
+}
+
+function toCableType(row: CableTypeRow): CableType {
+  return {
+    id: row.id,
+    name: row.name,
+    family: row.family,
+    family2: row.family2 ?? undefined,
+    unit: row.unit,
+    costPerUnit: row.cost_per_unit ?? undefined,
+    custom: !row.is_public,
+  }
+}
+
+function toDeviceTemplate(row: DeviceTemplateRow, portRows: DeviceTemplatePortRow[]): DeviceTemplate {
+  return {
+    id: row.id,
+    name: row.name,
+    category: row.category_id,
+    manufacturer: row.manufacturer ?? undefined,
+    model: row.model ?? undefined,
+    cost: row.cost ?? undefined,
+    ports: portRows
+      .filter((p) => p.device_template_id === row.id)
+      .sort((a, b) => a.sort_order - b.sort_order)
+      .map((p) => ({ id: p.id, name: p.name, direction: p.direction, portTypeId: p.port_type_id })),
+    custom: !row.is_public,
+  }
+}
+
+/**
+ * Backs the app with the shared Supabase catalog tables instead of the
+ * per-diagram embedded custom-type arrays the app used before this pass.
+ * RLS scopes every select to what the current user can see (all public
+ * entries, plus their own private ones) — see the `*_select` policies in
+ * the init schema migration. Every write here creates or edits a private
+ * (is_public = false) row owned by the current user; there is no public
+ * write path yet (that's the submission workflow, organized-ideas.md §3).
+ */
+export class SupabaseCatalogRepository implements CatalogRepository {
+  async load(): Promise<Catalog> {
+    const [categories, portTypes, cableTypes, templates, templatePorts] = await Promise.all([
+      supabase.from('device_categories').select('id, name, is_public').order('name'),
+      supabase
+        .from('port_types')
+        .select('id, name, category, family, compatible_family_ids, max_connections, is_public')
+        .order('name'),
+      supabase
+        .from('cable_types')
+        .select('id, name, family, family2, unit, cost_per_unit, is_public')
+        .order('name'),
+      supabase.from('device_templates').select('id, name, category_id, manufacturer, model, cost, is_public').order('name'),
+      supabase.from('device_template_ports').select('id, device_template_id, name, direction, port_type_id, sort_order'),
+    ])
+
+    for (const [label, result] of [
+      ['device categories', categories],
+      ['port types', portTypes],
+      ['cable types', cableTypes],
+      ['device templates', templates],
+      ['device template ports', templatePorts],
+    ] as const) {
+      if (result.error) console.error(`Failed to load ${label} from Supabase`, result.error)
+    }
+
+    const portRows = (templatePorts.data ?? []) as DeviceTemplatePortRow[]
+    return {
+      deviceCategories: ((categories.data ?? []) as DeviceCategoryRow[]).map(toDeviceCategory),
+      portTypes: ((portTypes.data ?? []) as PortTypeRow[]).map(toPortType),
+      cableTypes: ((cableTypes.data ?? []) as CableTypeRow[]).map(toCableType),
+      deviceTemplates: ((templates.data ?? []) as DeviceTemplateRow[]).map((row) => toDeviceTemplate(row, portRows)),
+    }
+  }
+
+  private async currentUserId(): Promise<string | null> {
+    const {
+      data: { user },
+    } = await supabase.auth.getUser()
+    return user?.id ?? null
+  }
+
+  async addDeviceCategory(name: string): Promise<DeviceCategoryDef> {
+    const ownerId = await this.currentUserId()
+    const id = uuid()
+    const { error } = await supabase
+      .from('device_categories')
+      .insert({ id, name, is_public: false, owner_id: ownerId })
+    if (error) console.error('Failed to add device category to Supabase', error)
+    return { id, name, custom: true }
+  }
+
+  async addPortType(portType: Omit<PortType, 'id' | 'custom'>): Promise<PortType> {
+    const ownerId = await this.currentUserId()
+    const id = uuid()
+    const { error } = await supabase.from('port_types').insert({
+      id,
+      name: portType.name,
+      category: portType.category,
+      family: portType.family,
+      compatible_family_ids: portType.compatibleFamilyIds ?? [],
+      max_connections: portType.maxConnections ?? null,
+      is_public: false,
+      owner_id: ownerId,
+    })
+    if (error) console.error('Failed to add port type to Supabase', error)
+    return { ...portType, id, custom: true }
+  }
+
+  async updatePortType(id: string, patch: Partial<Omit<PortType, 'id' | 'custom'>>): Promise<void> {
+    const payload: Record<string, unknown> = {}
+    if (patch.name !== undefined) payload.name = patch.name
+    if (patch.category !== undefined) payload.category = patch.category
+    if (patch.family !== undefined) payload.family = patch.family
+    if (patch.compatibleFamilyIds !== undefined) payload.compatible_family_ids = patch.compatibleFamilyIds
+    if (patch.maxConnections !== undefined) payload.max_connections = patch.maxConnections
+    const { error } = await supabase.from('port_types').update(payload).eq('id', id)
+    if (error) console.error('Failed to update port type in Supabase', error)
+  }
+
+  async addCableType(cableType: Omit<CableType, 'id' | 'custom'>): Promise<CableType> {
+    const ownerId = await this.currentUserId()
+    const id = uuid()
+    const { error } = await supabase.from('cable_types').insert({
+      id,
+      name: cableType.name,
+      family: cableType.family,
+      family2: cableType.family2 ?? null,
+      unit: cableType.unit,
+      cost_per_unit: cableType.costPerUnit ?? null,
+      is_public: false,
+      owner_id: ownerId,
+    })
+    if (error) console.error('Failed to add cable type to Supabase', error)
+    return { ...cableType, id, custom: true }
+  }
+
+  async updateCableType(id: string, patch: Partial<Omit<CableType, 'id' | 'custom'>>): Promise<void> {
+    const payload: Record<string, unknown> = {}
+    if (patch.name !== undefined) payload.name = patch.name
+    if (patch.family !== undefined) payload.family = patch.family
+    if (patch.family2 !== undefined) payload.family2 = patch.family2
+    if (patch.unit !== undefined) payload.unit = patch.unit
+    if (patch.costPerUnit !== undefined) payload.cost_per_unit = patch.costPerUnit
+    const { error } = await supabase.from('cable_types').update(payload).eq('id', id)
+    if (error) console.error('Failed to update cable type in Supabase', error)
+  }
+
+  async addDeviceTemplate(template: Omit<DeviceTemplate, 'id' | 'custom'>): Promise<DeviceTemplate> {
+    const ownerId = await this.currentUserId()
+    const id = uuid()
+    const { error } = await supabase.from('device_templates').insert({
+      id,
+      name: template.name,
+      category_id: template.category,
+      manufacturer: template.manufacturer ?? null,
+      model: template.model ?? null,
+      cost: template.cost ?? null,
+      is_public: false,
+      owner_id: ownerId,
+    })
+    if (error) {
+      console.error('Failed to add device template to Supabase', error)
+      return { ...template, id, custom: true }
+    }
+    const ports = template.ports.map((port, index) => ({ ...port, id: uuid(), sortOrder: index }))
+    if (ports.length > 0) {
+      const { error: portsError } = await supabase.from('device_template_ports').insert(
+        ports.map((port) => ({
+          id: port.id,
+          device_template_id: id,
+          name: port.name,
+          direction: port.direction,
+          port_type_id: port.portTypeId,
+          sort_order: port.sortOrder,
+        })),
+      )
+      if (portsError) console.error('Failed to add device template ports to Supabase', portsError)
+    }
+    return { ...template, id, ports, custom: true }
+  }
+
+  async updateDeviceTemplate(id: string, patch: Partial<Omit<DeviceTemplate, 'id' | 'custom'>>): Promise<void> {
+    const payload: Record<string, unknown> = {}
+    if (patch.name !== undefined) payload.name = patch.name
+    if (patch.category !== undefined) payload.category_id = patch.category
+    if (patch.manufacturer !== undefined) payload.manufacturer = patch.manufacturer
+    if (patch.model !== undefined) payload.model = patch.model
+    if (patch.cost !== undefined) payload.cost = patch.cost
+    if (Object.keys(payload).length > 0) {
+      const { error } = await supabase.from('device_templates').update(payload).eq('id', id)
+      if (error) console.error('Failed to update device template in Supabase', error)
+    }
+
+    if (patch.ports !== undefined) {
+      // Simplest correct approach: replace the whole port set rather than
+      // diffing. Templates are edited as a whole in the UI (DeviceTemplateEditor),
+      // so there's no risk of clobbering a concurrent partial edit.
+      const { error: deleteError } = await supabase.from('device_template_ports').delete().eq('device_template_id', id)
+      if (deleteError) console.error('Failed to clear device template ports in Supabase', deleteError)
+      if (patch.ports.length > 0) {
+        const { error: insertError } = await supabase.from('device_template_ports').insert(
+          patch.ports.map((port, index) => ({
+            id: uuid(),
+            device_template_id: id,
+            name: port.name,
+            direction: port.direction,
+            port_type_id: port.portTypeId,
+            sort_order: index,
+          })),
+        )
+        if (insertError) console.error('Failed to replace device template ports in Supabase', insertError)
+      }
+    }
+  }
+
+  async removeDeviceTemplate(id: string): Promise<void> {
+    const { error } = await supabase.from('device_templates').delete().eq('id', id)
+    if (error) console.error('Failed to remove device template from Supabase', error)
+  }
+}

src/data/exportImport.ts

@@ -47,18 +47,15 @@ export async function readProjectFile(file: File): Promise<Project> {
   return normalizeProject(parsed)
 }
 
-/** Fills in collections added after a project may have been saved/exported,
- *  so older data (from localStorage or an older export file) doesn't crash
- *  code that expects these arrays to always exist. */
+/** Strips any legacy per-project catalog fields (customDeviceTemplates,
+ *  customPortTypes, etc.) that might still be present in an older export
+ *  file or a localStorage diagram saved before the catalog moved to
+ *  Supabase (see state/catalogStore.ts) — that data now lives in the shared
+ *  catalog, not the diagram, so it's just discarded here rather than
+ *  crashing on an unexpected shape. */
 export function normalizeProject(project: Project): Project {
-  return {
-    ...project,
-    customDeviceTemplates: project.customDeviceTemplates ?? [],
-    customPortTypes: project.customPortTypes ?? [],
-    customCableTypes: project.customCableTypes ?? [],
-    customDeviceCategories: project.customDeviceCategories ?? [],
-    hiddenBuiltInDeviceTemplateIds: project.hiddenBuiltInDeviceTemplateIds ?? [],
-  }
+  const { id, name, createdAt, updatedAt, devices, connections } = project
+  return { id, name, createdAt, updatedAt, devices, connections }
 }
 
 export { ProjectImportError }

src/domain/bom.ts

@@ -1,5 +1,5 @@
 import { allCableTypes } from './project'
-import type { CableType, Connection, Device, Project } from './types'
+import type { CableType, Catalog, Connection, Device, Project } from './types'
 
 export interface BomCableLine {
   cableTypeId: string
@@ -66,8 +66,8 @@ function connectionCost(connection: Connection, cableType: CableType | undefined
   return undefined
 }
 
-export function computeBom(project: Project): Bom {
-  const cableTypes = new Map(allCableTypes(project).map((ct) => [ct.id, ct]))
+export function computeBom(project: Project, catalog: Catalog): Bom {
+  const cableTypes = new Map(allCableTypes(catalog).map((ct) => [ct.id, ct]))
 
   const cableLines = new Map<string, BomCableLine>()
   for (const connection of project.connections) {

src/domain/compatibility.ts

@@ -1,5 +1,5 @@
 import { acceptedFamilies, getPortType, hasBridgingCableType } from './project'
-import type { Connection, Device, PortType, Project } from './types'
+import type { Catalog, Connection, Device, PortType, Project } from './types'
 
 /**
  * Two ports connect if the sets of families they each accept (their own
@@ -37,6 +37,7 @@ export interface ConnectionValidation {
  */
 export function validateConnection(
   project: Project,
+  catalog: Catalog,
   candidate: ConnectionCandidate,
   existingConnections: Connection[] = project.connections,
 ): ConnectionValidation {
@@ -62,15 +63,15 @@ export function validateConnection(
     return { valid: false, reason: 'Cannot connect two output ports.' }
   }
 
-  const sourcePortType = getPortType(project, sourcePort.portTypeId)
-  const targetPortType = getPortType(project, targetPort.portTypeId)
+  const sourcePortType = getPortType(catalog, sourcePort.portTypeId)
+  const targetPortType = getPortType(catalog, targetPort.portTypeId)
   if (!sourcePortType || !targetPortType) {
     return { valid: false, reason: 'Unknown port type.' }
   }
   // Directly compatible port types, or bridgeable by a specific adapter
   // cable (different connectors on each end, e.g. XLR-to-TRS) even when the
   // port types themselves declare no general compatibility.
-  if (!portTypesCompatible(sourcePortType, targetPortType) && !hasBridgingCableType(project, sourcePortType, targetPortType)) {
+  if (!portTypesCompatible(sourcePortType, targetPortType) && !hasBridgingCableType(catalog, sourcePortType, targetPortType)) {
     return {
       valid: false,
       reason: `${sourcePortType.name} is not compatible with ${targetPortType.name}.`,

src/domain/library.ts

@@ -1,9 +1,11 @@
 import type { CableType, DeviceCategoryDef, DeviceTemplate, PortType } from './types'
 
 /**
- * Built-in connector/cable/device libraries. These ship read-only
- * (`builtIn`/`custom: false`-ish via omission) and are merged with each
- * project's custom entries at lookup time — see `domain/project.ts`.
+ * Built-in connector/cable/device libraries — the source of truth for the
+ * public catalog's seed data. Not imported by the app itself anymore (the
+ * catalog is fetched from Supabase at runtime, see state/catalogStore.ts);
+ * this file is read only by scripts/generate-seed.mjs, which turns it into
+ * supabase/seed.sql. Re-run that script after editing anything here.
  */
 
 export const BUILT_IN_DEVICE_CATEGORIES: DeviceCategoryDef[] = [
@@ -162,7 +164,6 @@ export const BUILT_IN_DEVICE_TEMPLATES: DeviceTemplate[] = [
     id: 'dt-display',
     name: 'Display (TV / Projector)',
     category: 'display',
-    builtIn: true,
     ports: [
       { id: 'p1', name: 'HDMI In 1', direction: 'input', portTypeId: 'pt-hdmi' },
       { id: 'p2', name: 'HDMI In 2', direction: 'input', portTypeId: 'pt-hdmi' },
@@ -173,7 +174,6 @@ export const BUILT_IN_DEVICE_TEMPLATES: DeviceTemplate[] = [
     id: 'dt-media-player',
     name: 'Media Player / Streamer',
     category: 'video-source',
-    builtIn: true,
     ports: [
       { id: 'p1', name: 'HDMI Out', direction: 'output', portTypeId: 'pt-hdmi' },
       { id: 'p2', name: 'Power In', direction: 'input', portTypeId: 'pt-nema-power' },
@@ -183,7 +183,6 @@ export const BUILT_IN_DEVICE_TEMPLATES: DeviceTemplate[] = [
     id: 'dt-avr',
     name: 'AV Receiver',
     category: 'amplifier',
-    builtIn: true,
     ports: [
       { id: 'p1', name: 'HDMI In 1', direction: 'input', portTypeId: 'pt-hdmi' },
       { id: 'p2', name: 'HDMI In 2', direction: 'input', portTypeId: 'pt-hdmi' },
@@ -198,14 +197,12 @@ export const BUILT_IN_DEVICE_TEMPLATES: DeviceTemplate[] = [
     id: 'dt-speaker',
     name: 'Speaker (Passive)',
     category: 'speaker',
-    builtIn: true,
     ports: [{ id: 'p1', name: 'Speaker In', direction: 'input', portTypeId: 'pt-speaker-wire' }],
   },
   {
     id: 'dt-switch',
     name: 'Network Switch',
     category: 'network',
-    builtIn: true,
     ports: [
       { id: 'p1', name: 'Port 1', direction: 'bidirectional', portTypeId: 'pt-cat-rj45' },
       { id: 'p2', name: 'Port 2', direction: 'bidirectional', portTypeId: 'pt-cat-rj45' },
@@ -218,7 +215,6 @@ export const BUILT_IN_DEVICE_TEMPLATES: DeviceTemplate[] = [
     id: 'dt-camera',
     name: 'PTZ Camera',
     category: 'camera',
-    builtIn: true,
     ports: [
       { id: 'p1', name: 'SDI Out', direction: 'output', portTypeId: 'pt-sdi' },
       { id: 'p2', name: 'Control (RJ45)', direction: 'bidirectional', portTypeId: 'pt-cat-rj45' },
@@ -229,7 +225,6 @@ export const BUILT_IN_DEVICE_TEMPLATES: DeviceTemplate[] = [
     id: 'dt-computer',
     name: 'Computer / Laptop',
     category: 'computer',
-    builtIn: true,
     ports: [
       { id: 'p1', name: 'HDMI Out', direction: 'output', portTypeId: 'pt-hdmi' },
       { id: 'p2', name: 'USB-C', direction: 'bidirectional', portTypeId: 'pt-usb-c' },
@@ -245,7 +240,6 @@ export const BUILT_IN_DEVICE_TEMPLATES: DeviceTemplate[] = [
     id: 'dt-adapter-midi-trs-a-to-din',
     name: '3.5mm-to-DIN MIDI Adapter (Type A)',
     category: 'adapter',
-    builtIn: true,
     ports: [
       { id: 'p1', name: '3.5mm In (from MIDI Out)', direction: 'input', portTypeId: 'pt-midi-trs-a' },
       { id: 'p2', name: 'DIN Out (to MIDI In)', direction: 'output', portTypeId: 'pt-midi-din' },
@@ -255,7 +249,6 @@ export const BUILT_IN_DEVICE_TEMPLATES: DeviceTemplate[] = [
     id: 'dt-adapter-midi-trs-b-to-din',
     name: '3.5mm-to-DIN MIDI Adapter (Type B)',
     category: 'adapter',
-    builtIn: true,
     ports: [
       { id: 'p1', name: '3.5mm In (from MIDI Out)', direction: 'input', portTypeId: 'pt-midi-trs-b' },
       { id: 'p2', name: 'DIN Out (to MIDI In)', direction: 'output', portTypeId: 'pt-midi-din' },

src/domain/project.ts

@@ -1,58 +1,46 @@
 import { v4 as uuid } from 'uuid'
-import { BUILT_IN_CABLE_TYPES, BUILT_IN_DEVICE_CATEGORIES, BUILT_IN_DEVICE_TEMPLATES, BUILT_IN_PORT_TYPES } from './library'
-import type { CableType, Device, DeviceCategoryDef, DeviceTemplate, Port, PortType, Project } from './types'
+import type { CableType, Catalog, Device, DeviceCategoryDef, DeviceTemplate, PortType, Project } from './types'
 
-/** Merges built-in + project-custom entries. Custom entries with a matching
- *  id win, so a project could in principle override a built-in (not exposed
- *  in the UI today, but keeps the merge rule simple and predictable). */
-function mergeById<T extends { id: string }>(builtIns: T[], custom: T[]): T[] {
-  const byId = new Map(builtIns.map((item) => [item.id, item]))
-  for (const item of custom) byId.set(item.id, item)
-  return [...byId.values()]
+export function allPortTypes(catalog: Catalog): PortType[] {
+  return catalog.portTypes
 }
 
-export function allPortTypes(project: Project): PortType[] {
-  return mergeById(BUILT_IN_PORT_TYPES, project.customPortTypes)
+export function allCableTypes(catalog: Catalog): CableType[] {
+  return catalog.cableTypes
 }
 
-export function allCableTypes(project: Project): CableType[] {
-  return mergeById(BUILT_IN_CABLE_TYPES, project.customCableTypes)
+/** `hiddenPublicIds` is a per-user UI preference (see state/catalogStore.ts),
+ *  not part of the catalog data itself — you can hide any public template
+ *  from your own palette without affecting anyone else or the shared entry. */
+export function allDeviceTemplates(catalog: Catalog, hiddenPublicIds: ReadonlySet<string> = new Set()): DeviceTemplate[] {
+  return catalog.deviceTemplates.filter((t) => t.custom || !hiddenPublicIds.has(t.id))
 }
 
-export function allDeviceTemplates(project: Project): DeviceTemplate[] {
-  const merged = mergeById(BUILT_IN_DEVICE_TEMPLATES, project.customDeviceTemplates)
-  const hidden = new Set(project.hiddenBuiltInDeviceTemplateIds)
-  return merged.filter((t) => !(t.builtIn && hidden.has(t.id)))
+/** Public templates the user has hidden, for a "restore" list. */
+export function hiddenDeviceTemplates(catalog: Catalog, hiddenPublicIds: ReadonlySet<string>): DeviceTemplate[] {
+  return catalog.deviceTemplates.filter((t) => !t.custom && hiddenPublicIds.has(t.id))
 }
 
-/** Built-in templates the user has hidden, for a "restore" list — deleting a
- *  custom template is permanent, but hiding a built-in one isn't, since the
- *  built-in still exists in code and can always be shown again. */
-export function hiddenBuiltInDeviceTemplates(project: Project): DeviceTemplate[] {
-  const hidden = new Set(project.hiddenBuiltInDeviceTemplateIds)
-  return BUILT_IN_DEVICE_TEMPLATES.filter((t) => hidden.has(t.id))
+export function allDeviceCategories(catalog: Catalog): DeviceCategoryDef[] {
+  return catalog.deviceCategories
 }
 
-export function allDeviceCategories(project: Project): DeviceCategoryDef[] {
-  return mergeById(BUILT_IN_DEVICE_CATEGORIES, project.customDeviceCategories)
-}
-
-export function getDeviceCategory(project: Project, categoryId: string): DeviceCategoryDef | undefined {
-  return allDeviceCategories(project).find((c) => c.id === categoryId)
+export function getDeviceCategory(catalog: Catalog, categoryId: string): DeviceCategoryDef | undefined {
+  return allDeviceCategories(catalog).find((c) => c.id === categoryId)
 }
 
 /** Friendly label for a category id, falling back to the raw id if it's
  *  somehow unknown (e.g. data from an older export) rather than crashing. */
-export function deviceCategoryName(project: Project, categoryId: string): string {
-  return getDeviceCategory(project, categoryId)?.name ?? categoryId
+export function deviceCategoryName(catalog: Catalog, categoryId: string): string {
+  return getDeviceCategory(catalog, categoryId)?.name ?? categoryId
 }
 
-export function getPortType(project: Project, portTypeId: string): PortType | undefined {
-  return allPortTypes(project).find((pt) => pt.id === portTypeId)
+export function getPortType(catalog: Catalog, portTypeId: string): PortType | undefined {
+  return allPortTypes(catalog).find((pt) => pt.id === portTypeId)
 }
 
-export function getCableType(project: Project, cableTypeId: string): CableType | undefined {
-  return allCableTypes(project).find((ct) => ct.id === cableTypeId)
+export function getCableType(catalog: Catalog, cableTypeId: string): CableType | undefined {
+  return allCableTypes(catalog).find((ct) => ct.id === cableTypeId)
 }
 
 /** The set of connector families a port type will mate with: its own family
@@ -82,9 +70,9 @@ function cableFits(cableType: CableType, sourceFamilies: Set<string>, targetFami
 /** Cable types usable with the given port type at (at least) one end — for
  *  a plain cable that means its family matches; for an adapter cable it's
  *  enough that either end matches. */
-export function cableTypesForPortType(project: Project, portType: PortType): CableType[] {
+export function cableTypesForPortType(catalog: Catalog, portType: PortType): CableType[] {
   const families = acceptedFamilies(portType)
-  return allCableTypes(project).filter((ct) => {
+  return allCableTypes(catalog).filter((ct) => {
     const [endA, endB] = cableEnds(ct)
     return families.has(endA) || families.has(endB)
   })
@@ -102,21 +90,17 @@ export function cableTypesForPortType(project: Project, portType: PortType): Cab
  * aren't declared generally compatible still be wired with the right cable,
  * without changing either port type's own compatibility rules.
  */
-export function cableTypesForConnection(
-  project: Project,
-  sourcePortType: PortType,
-  targetPortType: PortType,
-): CableType[] {
+export function cableTypesForConnection(catalog: Catalog, sourcePortType: PortType, targetPortType: PortType): CableType[] {
   const sourceFamilies = acceptedFamilies(sourcePortType)
   const targetFamilies = acceptedFamilies(targetPortType)
-  return allCableTypes(project).filter((ct) => cableFits(ct, sourceFamilies, targetFamilies))
+  return allCableTypes(catalog).filter((ct) => cableFits(ct, sourceFamilies, targetFamilies))
 }
 
 /** Whether any cable type (built-in or custom) could bridge these two port
  *  types — used to allow a connection even when the port types aren't
  *  declared directly compatible, as long as a specific adapter cable exists. */
-export function hasBridgingCableType(project: Project, sourcePortType: PortType, targetPortType: PortType): boolean {
-  return cableTypesForConnection(project, sourcePortType, targetPortType).length > 0
+export function hasBridgingCableType(catalog: Catalog, sourcePortType: PortType, targetPortType: PortType): boolean {
+  return cableTypesForConnection(catalog, sourcePortType, targetPortType).length > 0
 }
 
 /**
@@ -150,20 +134,12 @@ export function createEmptyProject(name = 'Untitled Project'): Project {
     updatedAt: now,
     devices: [],
     connections: [],
-    customDeviceTemplates: [],
-    customPortTypes: [],
-    customCableTypes: [],
-    customDeviceCategories: [],
-    hiddenBuiltInDeviceTemplateIds: [],
   }
 }
 
 /** Instantiates a device on the canvas from a template, deep-copying ports
  *  (with fresh ids) so editing the instance never mutates the template. */
-export function createDeviceFromTemplate(
-  template: DeviceTemplate,
-  position: { x: number; y: number },
-): Device {
+export function createDeviceFromTemplate(template: DeviceTemplate, position: { x: number; y: number }): Device {
   return {
     id: uuid(),
     name: template.name,
@@ -177,15 +153,6 @@ export function createDeviceFromTemplate(
   }
 }
 
-export function createBlankPort(overrides: Partial<Port> = {}): Port {
-  return {
-    id: uuid(),
-    name: overrides.name ?? 'New Port',
-    direction: overrides.direction ?? 'output',
-    portTypeId: overrides.portTypeId ?? BUILT_IN_PORT_TYPES[0].id,
-  }
-}
-
 /** "CV Out 1" -> "CV Out 2", "Port 3" -> "Port 4", "Gate In" -> "Gate In 2".
  *  Only increments a number that's the very last thing in the name (trailing
  *  whitespace aside), so labels like `1/4" TS In` aren't misread as ending

src/domain/types.ts

@@ -66,7 +66,12 @@ export interface DeviceTemplate {
   /** Suggested default cost, copied onto each placed Device at creation time
    *  (same as ports) and independently editable per instance afterward. */
   cost?: number
-  builtIn?: boolean
+  /** True for your own private template (is_public = false, owner = you).
+   *  Absent/false for anything public — whether an original seeded default
+   *  or a user submission that's since been approved — since both behave
+   *  the same way for you: not directly editable, only hideable from your
+   *  own palette (see catalogStore's hidePublicDeviceTemplate). */
+  custom?: boolean
 }
 
 /** A device placed on the canvas. Ports are copied from the template at
@@ -136,13 +141,19 @@ export interface Project {
   updatedAt: string
   devices: Device[]
   connections: Connection[]
-  /** User-defined additions to the built-in libraries, scoped to this project. */
-  customDeviceTemplates: DeviceTemplate[]
-  customPortTypes: PortType[]
-  customCableTypes: CableType[]
-  customDeviceCategories: DeviceCategoryDef[]
-  /** Built-in device template ids the user has removed from their palette.
-   *  Hidden rather than deleted since built-ins are shared code, not
-   *  per-project data — this lets them be restored later. */
-  hiddenBuiltInDeviceTemplateIds: string[]
+}
+
+/**
+ * The full set of port types / cable types / device categories / device
+ * templates visible to the current user — public entries plus their own
+ * private ones, already merged (by Postgres RLS, at fetch time — see
+ * state/catalogStore.ts), not scoped to any one diagram. Devices/ports/
+ * connections reference these by id (a live reference, not a copy — see
+ * organized-ideas.md §1/§3 for why that's the deliberate choice).
+ */
+export interface Catalog {
+  portTypes: PortType[]
+  cableTypes: CableType[]
+  deviceCategories: DeviceCategoryDef[]
+  deviceTemplates: DeviceTemplate[]
 }

src/state/catalogStore.ts

@@ -0,0 +1,135 @@
+import { create } from 'zustand'
+import type { CableType, Catalog, DeviceTemplate, PortType } from '../domain/types'
+import type { CatalogRepository } from '../data/CatalogRepository'
+import { SupabaseCatalogRepository } from '../data/SupabaseCatalogRepository'
+
+const repository: CatalogRepository = new SupabaseCatalogRepository()
+
+// Which public device templates you've hidden from your own palette — a
+// per-user UI preference, not catalog data, so it's not a Supabase row: hiding
+// a public entry only affects your view of it (see domain/project.ts's
+// allDeviceTemplates/hiddenDeviceTemplates), never the shared entry itself.
+const HIDDEN_PUBLIC_TEMPLATES_KEY = 'av-planner:hiddenPublicDeviceTemplateIds'
+function loadHiddenPublicIds(): Set<string> {
+  try {
+    const raw = window.localStorage.getItem(HIDDEN_PUBLIC_TEMPLATES_KEY)
+    return raw ? new Set(JSON.parse(raw)) : new Set()
+  } catch {
+    return new Set()
+  }
+}
+function saveHiddenPublicIds(ids: Set<string>): void {
+  try {
+    window.localStorage.setItem(HIDDEN_PUBLIC_TEMPLATES_KEY, JSON.stringify([...ids]))
+  } catch {
+    // Not essential — worst case a hidden template reappears next launch.
+  }
+}
+
+const emptyCatalog: Catalog = { portTypes: [], cableTypes: [], deviceCategories: [], deviceTemplates: [] }
+
+interface CatalogStoreState {
+  catalog: Catalog
+  isLoaded: boolean
+  hiddenPublicDeviceTemplateIds: Set<string>
+
+  loadCatalog: () => Promise<void>
+
+  addCustomDeviceCategory: (name: string) => Promise<string>
+
+  addCustomPortType: (portType: Omit<PortType, 'id' | 'custom'>) => Promise<void>
+  updateCustomPortType: (id: string, patch: Partial<Omit<PortType, 'id' | 'custom'>>) => Promise<void>
+
+  addCustomCableType: (cableType: Omit<CableType, 'id' | 'custom'>) => Promise<void>
+  updateCustomCableType: (id: string, patch: Partial<Omit<CableType, 'id' | 'custom'>>) => Promise<void>
+
+  addCustomDeviceTemplate: (template: Omit<DeviceTemplate, 'id' | 'custom'>) => Promise<void>
+  updateCustomDeviceTemplate: (id: string, patch: Partial<Omit<DeviceTemplate, 'id' | 'custom'>>) => Promise<void>
+  removeCustomDeviceTemplate: (id: string) => Promise<void>
+
+  hidePublicDeviceTemplate: (id: string) => void
+  restorePublicDeviceTemplate: (id: string) => void
+}
+
+export const useCatalogStore = create<CatalogStoreState>((set, get) => ({
+  catalog: emptyCatalog,
+  isLoaded: false,
+  hiddenPublicDeviceTemplateIds: loadHiddenPublicIds(),
+
+  loadCatalog: async () => {
+    const catalog = await repository.load()
+    set({ catalog, isLoaded: true })
+  },
+
+  addCustomDeviceCategory: async (name) => {
+    const category = await repository.addDeviceCategory(name)
+    set((state) => ({ catalog: { ...state.catalog, deviceCategories: [...state.catalog.deviceCategories, category] } }))
+    return category.id
+  },
+
+  addCustomPortType: async (portType) => {
+    const created = await repository.addPortType(portType)
+    set((state) => ({ catalog: { ...state.catalog, portTypes: [...state.catalog.portTypes, created] } }))
+  },
+
+  updateCustomPortType: async (id, patch) => {
+    await repository.updatePortType(id, patch)
+    set((state) => ({
+      catalog: {
+        ...state.catalog,
+        portTypes: state.catalog.portTypes.map((pt) => (pt.id === id ? { ...pt, ...patch } : pt)),
+      },
+    }))
+  },
+
+  addCustomCableType: async (cableType) => {
+    const created = await repository.addCableType(cableType)
+    set((state) => ({ catalog: { ...state.catalog, cableTypes: [...state.catalog.cableTypes, created] } }))
+  },
+
+  updateCustomCableType: async (id, patch) => {
+    await repository.updateCableType(id, patch)
+    set((state) => ({
+      catalog: {
+        ...state.catalog,
+        cableTypes: state.catalog.cableTypes.map((ct) => (ct.id === id ? { ...ct, ...patch } : ct)),
+      },
+    }))
+  },
+
+  addCustomDeviceTemplate: async (template) => {
+    const created = await repository.addDeviceTemplate(template)
+    set((state) => ({ catalog: { ...state.catalog, deviceTemplates: [...state.catalog.deviceTemplates, created] } }))
+  },
+
+  updateCustomDeviceTemplate: async (id, patch) => {
+    await repository.updateDeviceTemplate(id, patch)
+    set((state) => ({
+      catalog: {
+        ...state.catalog,
+        deviceTemplates: state.catalog.deviceTemplates.map((t) => (t.id === id ? { ...t, ...patch } : t)),
+      },
+    }))
+  },
+
+  removeCustomDeviceTemplate: async (id) => {
+    await repository.removeDeviceTemplate(id)
+    set((state) => ({
+      catalog: { ...state.catalog, deviceTemplates: state.catalog.deviceTemplates.filter((t) => t.id !== id) },
+    }))
+  },
+
+  hidePublicDeviceTemplate: (id) => {
+    const next = new Set(get().hiddenPublicDeviceTemplateIds)
+    next.add(id)
+    saveHiddenPublicIds(next)
+    set({ hiddenPublicDeviceTemplateIds: next })
+  },
+
+  restorePublicDeviceTemplate: (id) => {
+    const next = new Set(get().hiddenPublicDeviceTemplateIds)
+    next.delete(id)
+    saveHiddenPublicIds(next)
+    set({ hiddenPublicDeviceTemplateIds: next })
+  },
+}))

src/state/projectStore.ts

@@ -2,7 +2,7 @@ import { v4 as uuid } from 'uuid'
 import { create } from 'zustand'
 import { validateConnection } from '../domain/compatibility'
 import { allDeviceTemplates, createDeviceFromTemplate, createEmptyProject, incrementPortName } from '../domain/project'
-import type { CableType, Connection, Device, DeviceCategory, DeviceTemplate, Port, PortType, Project } from '../domain/types'
+import type { Catalog, Connection, Device, DeviceCategory, Port, Project } from '../domain/types'
 import type { DiagramRepository, DiagramSummary } from '../data/DiagramRepository'
 import { SupabaseDiagramRepository } from '../data/SupabaseDiagramRepository'
 
@@ -74,7 +74,7 @@ interface ProjectStoreState {
   selectDevice: (id: string | null) => void
   selectConnection: (id: string | null) => void
 
-  addDeviceFromTemplate: (templateId: string, position: { x: number; y: number }) => void
+  addDeviceFromTemplate: (catalog: Catalog, templateId: string, position: { x: number; y: number }) => void
   updateDevicePosition: (id: string, position: { x: number; y: number }) => void
   updateDevice: (
     id: string,
@@ -90,31 +90,21 @@ interface ProjectStoreState {
   updatePort: (deviceId: string, portId: string, patch: Partial<Omit<Port, 'id'>>) => void
   removePort: (deviceId: string, portId: string) => void
 
-  addConnection: (params: {
-    sourceDeviceId: string
-    sourcePortId: string
-    targetDeviceId: string
-    targetPortId: string
-    cableTypeId: string
-  }) => boolean
+  addConnection: (
+    catalog: Catalog,
+    params: {
+      sourceDeviceId: string
+      sourcePortId: string
+      targetDeviceId: string
+      targetPortId: string
+      cableTypeId: string
+    },
+  ) => boolean
   updateConnection: (
     id: string,
     patch: Partial<Pick<Connection, 'cableTypeId' | 'distance' | 'cost' | 'label' | 'notes'>>,
   ) => void
   removeConnection: (id: string) => void
-
-  addCustomDeviceTemplate: (template: Omit<DeviceTemplate, 'id' | 'builtIn'>) => void
-  updateCustomDeviceTemplate: (id: string, patch: Partial<Omit<DeviceTemplate, 'id' | 'builtIn'>>) => void
-  removeCustomDeviceTemplate: (id: string) => void
-  hideBuiltInDeviceTemplate: (id: string) => void
-  restoreBuiltInDeviceTemplate: (id: string) => void
-  addCustomPortType: (portType: Omit<PortType, 'id' | 'custom'>) => void
-  updateCustomPortType: (id: string, patch: Partial<Omit<PortType, 'id' | 'custom'>>) => void
-  addCustomCableType: (cableType: Omit<CableType, 'id' | 'custom'>) => void
-  updateCustomCableType: (id: string, patch: Partial<Omit<CableType, 'id' | 'custom'>>) => void
-
-  /** Returns the new category's id, so the caller can select it immediately. */
-  addCustomDeviceCategory: (name: string) => string
 }
 
 function touch(project: Project): Project {
@@ -185,9 +175,9 @@ export const useProjectStore = create<ProjectStoreState>((set, get) => ({
   selectDevice: (id) => set({ selectedDeviceId: id, selectedConnectionId: null }),
   selectConnection: (id) => set({ selectedConnectionId: id, selectedDeviceId: null }),
 
-  addDeviceFromTemplate: (templateId, position) => {
+  addDeviceFromTemplate: (catalog, templateId, position) => {
     const { project } = get()
-    const template = allDeviceTemplates(project).find((t) => t.id === templateId)
+    const template = allDeviceTemplates(catalog).find((t) => t.id === templateId)
     if (!template) return
     const device = createDeviceFromTemplate(template, position)
     set({ project: touch({ ...project, devices: [...project.devices, device] }), selectedDeviceId: device.id })
@@ -282,9 +272,9 @@ export const useProjectStore = create<ProjectStoreState>((set, get) => ({
     }))
   },
 
-  addConnection: ({ sourceDeviceId, sourcePortId, targetDeviceId, targetPortId, cableTypeId }) => {
+  addConnection: (catalog, { sourceDeviceId, sourcePortId, targetDeviceId, targetPortId, cableTypeId }) => {
     const { project } = get()
-    const validation = validateConnection(project, {
+    const validation = validateConnection(project, catalog, {
       sourceDeviceId,
       sourcePortId,
       targetDeviceId,
@@ -330,107 +320,6 @@ export const useProjectStore = create<ProjectStoreState>((set, get) => ({
     }))
   },
 
-  addCustomDeviceTemplate: (template) => {
-    set((state) => ({
-      project: touch({
-        ...state.project,
-        customDeviceTemplates: [
-          ...state.project.customDeviceTemplates,
-          { ...template, id: uuid() },
-        ],
-      }),
-    }))
-  },
-
-  updateCustomDeviceTemplate: (id, patch) => {
-    set((state) => ({
-      project: touch({
-        ...state.project,
-        customDeviceTemplates: state.project.customDeviceTemplates.map((t) =>
-          t.id === id ? { ...t, ...patch } : t,
-        ),
-      }),
-    }))
-  },
-
-  removeCustomDeviceTemplate: (id) => {
-    set((state) => ({
-      project: touch({
-        ...state.project,
-        customDeviceTemplates: state.project.customDeviceTemplates.filter((t) => t.id !== id),
-      }),
-    }))
-  },
-
-  hideBuiltInDeviceTemplate: (id) => {
-    set((state) => ({
-      project: touch({
-        ...state.project,
-        hiddenBuiltInDeviceTemplateIds: state.project.hiddenBuiltInDeviceTemplateIds.includes(id)
-          ? state.project.hiddenBuiltInDeviceTemplateIds
-          : [...state.project.hiddenBuiltInDeviceTemplateIds, id],
-      }),
-    }))
-  },
-
-  restoreBuiltInDeviceTemplate: (id) => {
-    set((state) => ({
-      project: touch({
-        ...state.project,
-        hiddenBuiltInDeviceTemplateIds: state.project.hiddenBuiltInDeviceTemplateIds.filter((h) => h !== id),
-      }),
-    }))
-  },
-
-  addCustomPortType: (portType) => {
-    set((state) => ({
-      project: touch({
-        ...state.project,
-        customPortTypes: [...state.project.customPortTypes, { ...portType, id: uuid(), custom: true }],
-      }),
-    }))
-  },
-
-  updateCustomPortType: (id, patch) => {
-    set((state) => ({
-      project: touch({
-        ...state.project,
-        customPortTypes: state.project.customPortTypes.map((pt) => (pt.id === id ? { ...pt, ...patch } : pt)),
-      }),
-    }))
-  },
-
-  addCustomCableType: (cableType) => {
-    set((state) => ({
-      project: touch({
-        ...state.project,
-        customCableTypes: [...state.project.customCableTypes, { ...cableType, id: uuid(), custom: true }],
-      }),
-    }))
-  },
-
-  updateCustomCableType: (id, patch) => {
-    set((state) => ({
-      project: touch({
-        ...state.project,
-        customCableTypes: state.project.customCableTypes.map((ct) => (ct.id === id ? { ...ct, ...patch } : ct)),
-      }),
-    }))
-  },
-
-  addCustomDeviceCategory: (name) => {
-    const newId = uuid()
-    set((state) => ({
-      project: touch({
-        ...state.project,
-        customDeviceCategories: [
-          ...state.project.customDeviceCategories,
-          { id: newId, name, custom: true },
-        ],
-      }),
-    }))
-    return newId
-  },
 }))
 
 // Debounced autosave: fires whenever `project` changes (skipped until the