@dxos/plugin-kanban 0.8.4-main.fcfe5033a5 → 0.8.4-staging.60fe92afc8

package/src/components/KanbanBoard/KanbanBoard.stories.tsx

@@ -6,8 +6,7 @@ import { Atom, RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
-import { Filter, JsonSchema, Obj, Query } from '@dxos/echo';
-import { type View } from '@dxos/echo';
+import { Filter, JsonSchema, Obj, Query, type View } from '@dxos/echo';
 import { random } from '@dxos/random';
 import { withMosaic } from '@dxos/react-ui-mosaic/testing';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
@@ -17,9 +16,9 @@ import { Organization } from '@dxos/types';
 
 import { createEchoChangeCallback as createKanbanChangeCallback } from '#hooks';
 import { KanbanCardTileSimple } from '#testing';
+import { translations } from '#translations';
 import { Kanban } from '#types';
 
-import { translations } from '../../translations';
 import { KanbanBoard } from './KanbanBoard';
 
 random.seed(1);
@@ -48,7 +47,7 @@ const DefaultStory = () => {
 
   useEffect(() => {
     const view = ViewModel.make({
-      query: Query.select(Filter.typename(Organization.Organization.typename)),
+      query: Query.select(Filter.type(Organization.Organization)),
       jsonSchema: JsonSchema.toJsonSchema(Organization.Organization),
       pivotFieldName: 'status',
     });
@@ -79,7 +78,9 @@ const DefaultStory = () => {
 
   const handleCardAdd = useCallback(
     (columnValue: string | undefined) => {
-      if (!state || !columnFieldPath || !registry) return undefined;
+      if (!state || !columnFieldPath || !registry) {
+        return undefined;
+      }
       const card = Obj.make(Organization.Organization, {
         ...createOrg(),
         ...(columnFieldPath ? { [columnFieldPath]: columnValue } : {}),
@@ -93,7 +94,9 @@ const DefaultStory = () => {
 
   const handleCardRemove = useCallback(
     (card: Obj.Unknown) => {
-      if (!registry) return;
+      if (!registry) {
+        return;
+      }
       const current = registry.get(items) ?? [];
       registry.set(
         items,

package/src/components/KanbanBoard/KanbanBoard.tsx

@@ -3,64 +3,30 @@
 //
 
 import { type Atom, RegistryContext } from '@effect-atom/atom-react';
-import { createContext } from '@radix-ui/react-context';
-import React, {
-  type ComponentPropsWithoutRef,
-  type ComponentType,
-  type PropsWithChildren,
-  useCallback,
-  useContext,
-  useMemo,
-} from 'react';
+import React, { type ComponentPropsWithoutRef, type PropsWithChildren, useCallback, useContext, useMemo } from 'react';
 
 import { Obj } from '@dxos/echo';
 import { useTranslation } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/react-ui';
 import { Board, useBoard } from '@dxos/react-ui-mosaic';
 import type { ProjectionModel } from '@dxos/schema';
-import { composable, composableProps } from '@dxos/ui-theme';
 
 import { useKanbanBoardModel, useKanbanColumnEventHandler } from '#hooks';
 import { meta } from '#meta';
-import { type Kanban, type KanbanChangeCallback, UNCATEGORIZED_ATTRIBUTES, UNCATEGORIZED_VALUE } from '#types';
-
-import { KanbanCard, type KanbanCardProps } from './KanbanCard';
-import { KanbanColumn, type KanbanColumnProps } from './KanbanColumn';
+import { type Kanban, UNCATEGORIZED_ATTRIBUTES, UNCATEGORIZED_VALUE } from '#types';
+
+import {
+  KanbanBoardContext,
+  type KanbanBoardContextValue,
+  type KanbanCardProps,
+  type KanbanColumnProps,
+  useKanbanBoard,
+} from './context';
+import { KanbanCard } from './KanbanCard';
+import { KanbanColumn } from './KanbanColumn';
 
 // TODO(burdon): Rename Kanban.
 
-//
-// Context
-//
-
-const KANBAN_BOARD_NAME = 'KanbanBoard.Context';
-
-/**
- * Context value for the Kanban board.
- * Items are Echo objects (Obj.Unknown).
- */
-type KanbanBoardContextValue = {
-  kanbanId: string;
-  projection: ProjectionModel | undefined;
-  columnFieldPath: string | undefined;
-  change: KanbanChangeCallback<Obj.Unknown>;
-  pivotFieldId: string | undefined;
-  getPivotAttributes: (columnValue: string) => { title: string; color: string };
-  itemTile?: ComponentType<KanbanCardProps>; // TODO(burdon): Prop.
-  onCardAdd?: (columnValue: string | undefined) => string | undefined;
-  onCardRemove?: (card: Obj.Unknown) => void;
-};
-
-const [KanbanBoardContext, useKanbanBoard] = createContext<KanbanBoardContextValue>(KANBAN_BOARD_NAME, {
-  kanbanId: 'never',
-  projection: undefined,
-  columnFieldPath: undefined,
-  change: { kanban: () => {}, setItemField: () => {} },
-  pivotFieldId: undefined,
-  getPivotAttributes: (id: string) =>
-    id === UNCATEGORIZED_VALUE ? UNCATEGORIZED_ATTRIBUTES : { title: id, color: 'neutral' },
-  itemTile: (() => null) as ComponentType<KanbanCardProps>,
-});
-
 //
 // Root
 //
@@ -94,15 +60,20 @@ export const KanbanBoardRoot = ({
   const { t } = useTranslation(meta.id);
   const model = useKanbanBoardModel(kanban, projection, items, registry);
   const columns = model?.getColumns?.() ?? [];
-  const view = kanban?.view?.target;
+  const view = kanban?.spec.kind === 'view' ? kanban.spec.view.target : undefined;
   const pivotFieldId = view?.projection?.pivotFieldId;
   const columnFieldPath = useMemo(() => {
+    // Items-variant kanbans use the property name itself as the pivot field
+    // (no view/projection translation layer).
+    if (kanban?.spec.kind === 'items') {
+      return kanban.spec.pivotField;
+    }
     if (pivotFieldId === undefined || !projection) {
       return undefined;
     }
 
     return projection.tryGetFieldProjection(pivotFieldId)?.props.property;
-  }, [projection, pivotFieldId]);
+  }, [kanban?.spec, projection, pivotFieldId]);
 
   const getPivotAttributes = useCallback<KanbanBoardContextValue['getPivotAttributes']>(
     (columnValue) => {
@@ -119,7 +90,7 @@ export const KanbanBoardRoot = ({
 
   if (columns.length === 0) {
     return (
-      <div role='none' className='flex flex-1 items-center justify-center p-8 text-center text-description'>
+      <div className='flex flex-1 items-center justify-center p-8 text-center text-description'>
         {t('select-pivot.placeholder')}
       </div>
     );
@@ -127,7 +98,7 @@ export const KanbanBoardRoot = ({
 
   return (
     <KanbanBoardContext
-      kanbanId={Obj.getDXN(kanban).toString()}
+      kanbanId={Obj.getURI(kanban)}
       projection={projection}
       columnFieldPath={columnFieldPath}
       pivotFieldId={pivotFieldId}

package/src/components/KanbanBoard/KanbanCard.tsx

@@ -9,78 +9,93 @@ import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { Card, Toolbar, useTranslation } from '@dxos/react-ui';
 import { Menu, createMenuAction } from '@dxos/react-ui-menu';
-import { Focus, Mosaic, type MosaicTileProps, useBoard } from '@dxos/react-ui-mosaic';
+import { Focus, Mosaic, useBoard } from '@dxos/react-ui-mosaic';
 
 import { meta } from '#meta';
 
-import { useKanbanBoard } from './KanbanBoard';
+import { type KanbanCardProps, useKanbanBoard } from './context';
 
-const KANBAN_CARD_TILE_NAME = 'KanbanBoard.Card';
+export { type KanbanCardProps };
 
-export type KanbanCardProps = Pick<MosaicTileProps<Obj.Unknown>, 'location' | 'data' | 'debug'>;
+const KANBAN_CARD_TILE_NAME = 'KanbanBoard.Card';
 
 /**
  * Mosaic Tile for Kanban card.
  * Uses Surface for content; requires plugin manager context.
  */
-export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(({ data, location, debug }, forwardedRef) => {
-  const { t } = useTranslation(meta.id);
-  const { model } = useBoard(KANBAN_CARD_TILE_NAME);
-  const { projection, onCardRemove } = useKanbanBoard(KANBAN_CARD_TILE_NAME);
-  const [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);
-  const dragHandleRef = useCallback((el: HTMLButtonElement | null) => setDragHandle(el), []);
+export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(
+  ({ data, location, debug, draggable }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const { model } = useBoard(KANBAN_CARD_TILE_NAME);
+    const { projection, columnFieldPath, onCardRemove } = useKanbanBoard(KANBAN_CARD_TILE_NAME);
+    const [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);
+    const dragHandleRef = useCallback((el: HTMLButtonElement | null) => setDragHandle(el), []);
 
-  const objectMenuItems = useObjectMenuItems(data);
+    const objectMenuItems = useObjectMenuItems(data);
 
-  const menuItems = useMemo(
-    () => [
-      ...objectMenuItems,
-      ...(onCardRemove
-        ? [
-            createMenuAction('remove', () => onCardRemove(data), {
-              label: t('remove-card.label'),
-              icon: 'ph--trash--regular',
-            }),
-          ]
-        : []),
-    ],
-    [objectMenuItems, onCardRemove, data, t],
-  );
+    const menuItems = useMemo(
+      () => [
+        ...objectMenuItems,
+        ...(onCardRemove
+          ? [
+              createMenuAction('remove', () => onCardRemove(data), {
+                label: t('remove-card.label'),
+                icon: 'ph--trash--regular',
+              }),
+            ]
+          : []),
+      ],
+      [objectMenuItems, onCardRemove, data, t],
+    );
 
-  return (
-    <Menu.Root>
-      <Mosaic.Tile
-        asChild
-        id={model.getItemId(data)}
-        data={data}
-        location={location}
-        debug={debug}
-        dragHandle={dragHandle}
-      >
-        <Focus.Item asChild>
-          <Card.Root ref={forwardedRef} data-testid='board-item'>
-            <Card.Toolbar>
-              <Card.DragHandle ref={dragHandleRef} testId='mosaicBoard.cardDragHandle' />
-              <Card.Title data-testid='mosaicBoard.cardTitle'>{Obj.getLabel(data)}</Card.Title>
-              {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
-              <Menu.Trigger asChild disabled={!menuItems?.length}>
-                <Toolbar.IconButton
-                  iconOnly
-                  variant='ghost'
-                  icon='ph--dots-three-vertical--regular'
-                  label={t('action-menu.label')}
-                />
-              </Menu.Trigger>
-              <Menu.Content items={menuItems} />
-            </Card.Toolbar>
-            <Card.Content>
-              {projection && <Surface.Surface type={AppSurface.Card} limit={1} data={{ subject: data, projection }} />}
-            </Card.Content>
-          </Card.Root>
-        </Focus.Item>
-      </Mosaic.Tile>
-    </Menu.Root>
-  );
-});
+    return (
+      <Menu.Root>
+        <Mosaic.Tile
+          asChild
+          id={model.getItemId(data)}
+          data={data}
+          location={location}
+          debug={debug}
+          draggable={draggable}
+          dragHandle={dragHandle}
+        >
+          <Focus.Item asChild>
+            <Card.Root ref={forwardedRef} data-testid='board-item'>
+              <Card.Header>
+                <Card.DragHandle ref={dragHandleRef} testId='mosaicBoard.cardDragHandle' />
+                <Card.Title data-testid='mosaicBoard.cardTitle'>{Obj.getLabel(data)}</Card.Title>
+                {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
+                <Menu.Trigger asChild disabled={!menuItems?.length}>
+                  <Toolbar.IconButton
+                    iconOnly
+                    variant='ghost'
+                    icon='ph--dots-three-vertical--regular'
+                    label={t('action-menu.label')}
+                  />
+                </Menu.Trigger>
+                <Menu.Content items={menuItems} />
+              </Card.Header>
+              <Card.Body>
+                {projection && (
+                  <Surface.Surface
+                    type={AppSurface.Card}
+                    limit={1}
+                    data={{
+                      subject: data,
+                      projection,
+                      // Hide the pivot field: its value is already conveyed by
+                      // which column the card sits in.
+                      ignorePaths: columnFieldPath ? [columnFieldPath] : undefined,
+                    }}
+                  />
+                )}
+              </Card.Body>
+            </Card.Root>
+          </Focus.Item>
+        </Mosaic.Tile>
+      </Menu.Root>
+    );
+  },
+);
 
 KanbanCard.displayName = KANBAN_CARD_TILE_NAME;

package/src/components/KanbanBoard/KanbanColumn.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { FC, forwardRef, RefObject, useRef } from 'react';
+import React, { FC, forwardRef, useState } from 'react';
 
 import type { Obj } from '@dxos/echo';
 import { Board, type MosaicTileProps, useBoard } from '@dxos/react-ui-mosaic';
@@ -10,23 +10,23 @@ import { Board, type MosaicTileProps, useBoard } from '@dxos/react-ui-mosaic';
 import { useKanbanItemEventHandler } from '#hooks';
 import { type ColumnStructure, UNCATEGORIZED_VALUE } from '#types';
 
-import { useKanbanBoard } from './KanbanBoard';
+import { type KanbanColumnProps, useKanbanBoard } from './context';
 
-const KANBAN_COLUMN_NAME = 'KanbanBoard.Column';
+export { type KanbanColumnProps };
 
-export type KanbanColumnProps = Pick<MosaicTileProps<ColumnStructure>, 'location' | 'data' | 'debug'>;
+const KANBAN_COLUMN_NAME = 'KanbanBoard.Column';
 
 /**
  * Mosaic Tile for Kanban column.
  */
 export const KanbanColumn = forwardRef<HTMLDivElement, KanbanColumnProps>(
-  ({ data: column, location, debug }, forwardedRef) => {
+  ({ data: column, location, debug, draggable }, forwardedRef) => {
     const { model } = useBoard<ColumnStructure, Obj.Unknown>(KANBAN_COLUMN_NAME);
     const { columnFieldPath, change, onCardAdd, getPivotAttributes, itemTile } = useKanbanBoard(KANBAN_COLUMN_NAME);
 
     const { title } = getPivotAttributes(column.columnValue);
     const uncategorized = column.columnValue === UNCATEGORIZED_VALUE;
-    const dragHandleRef = useRef<HTMLButtonElement | null>(null);
+    const [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);
 
     const eventHandler = useKanbanItemEventHandler({
       column,
@@ -41,7 +41,8 @@ export const KanbanColumn = forwardRef<HTMLDivElement, KanbanColumnProps>(
         location={location}
         classNames='grid grid-rows-[var(--dx-rail-action)_1fr_var(--dx-rail-action)]'
         debug={debug}
-        dragHandleRef={dragHandleRef}
+        draggable={draggable}
+        dragHandle={dragHandle}
         ref={forwardedRef}
       >
         {uncategorized ? (
@@ -49,18 +50,20 @@ export const KanbanColumn = forwardRef<HTMLDivElement, KanbanColumnProps>(
             <span className='font-medium'>{title}</span>
           </div>
         ) : (
-          <Board.Column.Header label={title} dragHandleRef={dragHandleRef as RefObject<HTMLButtonElement>} />
+          <Board.Column.Header label={title} dragHandleRef={setDragHandle} />
         )}
         <Board.Column.Body
           data={column}
           eventHandler={eventHandler}
           Tile={itemTile as FC<MosaicTileProps<Obj.Unknown>>}
         />
-        {onCardAdd && (
-          <Board.Column.Footer
-            onAdd={() => onCardAdd(column.columnValue === UNCATEGORIZED_VALUE ? undefined : column.columnValue)}
-          />
-        )}
+        <Board.Column.Footer
+          onAdd={
+            onCardAdd
+              ? () => onCardAdd(column.columnValue === UNCATEGORIZED_VALUE ? undefined : column.columnValue)
+              : undefined
+          }
+        />
       </Board.Column.Root>
     );
   },

package/src/components/KanbanBoard/context.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { type ComponentType } from 'react';
+
+import { type Obj } from '@dxos/echo';
+import { type MosaicTileProps } from '@dxos/react-ui-mosaic';
+import { type ProjectionModel } from '@dxos/schema';
+
+import { type ColumnStructure, type KanbanChangeCallback, UNCATEGORIZED_ATTRIBUTES, UNCATEGORIZED_VALUE } from '#types';
+
+const KANBAN_BOARD_NAME = 'KanbanBoard.Context';
+
+/**
+ * Card tile props. Defined here (rather than in `KanbanCard.tsx`) so the
+ * context type can reference it without forming a cycle through that
+ * module's runtime exports — webkit treats the resulting TDZ as a hard
+ * error while other engines are lenient.
+ */
+export type KanbanCardProps = Pick<MosaicTileProps<Obj.Unknown>, 'location' | 'data' | 'debug' | 'draggable'>;
+
+/**
+ * Column tile props. See note on {@link KanbanCardProps}.
+ */
+export type KanbanColumnProps = Pick<MosaicTileProps<ColumnStructure>, 'location' | 'data' | 'debug' | 'draggable'>;
+
+/**
+ * Context value for the Kanban board.
+ * Items are Echo objects (Obj.Unknown).
+ */
+export type KanbanBoardContextValue = {
+  kanbanId: string;
+  projection: ProjectionModel | undefined;
+  columnFieldPath: string | undefined;
+  change: KanbanChangeCallback<Obj.Unknown>;
+  pivotFieldId: string | undefined;
+  getPivotAttributes: (columnValue: string) => { title: string; color: string };
+  itemTile?: ComponentType<KanbanCardProps>; // TODO(burdon): Prop.
+  onCardAdd?: (columnValue: string | undefined) => string | undefined;
+  onCardRemove?: (card: Obj.Unknown) => void;
+};
+
+export const [KanbanBoardContext, useKanbanBoard] = createContext<KanbanBoardContextValue>(KANBAN_BOARD_NAME, {
+  kanbanId: 'never',
+  projection: undefined,
+  columnFieldPath: undefined,
+  change: { kanban: () => {}, setItemField: () => {} },
+  pivotFieldId: undefined,
+  getPivotAttributes: (id: string) =>
+    id === UNCATEGORIZED_VALUE ? UNCATEGORIZED_ATTRIBUTES : { title: id, color: 'neutral' },
+  itemTile: (() => null) as ComponentType<KanbanCardProps>,
+});

package/src/containers/{KanbanContainer/KanbanContainer.stories.tsx → KanbanArticle/KanbanArticle.stories.tsx}

@@ -11,29 +11,30 @@ import { expect, waitFor, within } from 'storybook/test';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Surface } from '@dxos/app-framework/ui';
 import { AppSurface } from '@dxos/app-toolkit/ui';
-import { Obj, type QueryAST, Type } from '@dxos/echo';
-import { View } from '@dxos/echo';
-import { type Mutable } from '@dxos/echo/internal';
+import { Filter, Obj, type QueryAST, Type, View } from '@dxos/echo';
+import { type Mutable } from '@dxos/echo/Obj';
 import { invariant } from '@dxos/invariant';
-import { ClientPlugin } from '@dxos/plugin-client';
+// `/plugin` entrypoints used here for the same reason as `corePlugins()` —
+// see `@dxos/plugin-testing/src/core.ts` for the rationale.
+import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
-import { PreviewPlugin } from '@dxos/plugin-preview';
-import { SpacePlugin } from '@dxos/plugin-space';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
+import { SpacePlugin } from '@dxos/plugin-space/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
-import { Filter, type Space, useQuery, useSchema, useSpaces } from '@dxos/react-client/echo';
+import { type Space, useQuery, useType, useSpaces } from '@dxos/react-client/echo';
 import { ViewEditor } from '@dxos/react-ui-form';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
 import { withLayout } from '@dxos/react-ui/testing';
-import { ViewModel, getTypenameFromQuery } from '@dxos/schema';
+import { ViewModel, getTypeURIFromQuery } from '@dxos/schema';
 // TODO(wittjosiah): Replace with echo/testing.
 import { Organization, Person } from '@dxos/types';
 
 import { useProjectionModel } from '#hooks';
+import { translations } from '#translations';
 import { Kanban } from '#types';
 
 import { KanbanPlugin } from '../../KanbanPlugin';
-import { translations } from '../../translations';
 
 random.seed(0);
 
@@ -56,7 +57,7 @@ type ClientSetupOptions = {
 
 /**
  * Creates the standard plugin manager decorator with client configuration.
- * Includes KanbanPlugin so the Surface resolves to KanbanContainer.
+ * Includes KanbanPlugin so the Surface resolves to KanbanArticle.
  */
 const withKanbanPlugins = ({ types = [], onSpaceCreated }: ClientSetupOptions): Decorator =>
   withPluginManager({
@@ -80,7 +81,7 @@ const withKanbanPlugins = ({ types = [], onSpaceCreated }: ClientSetupOptions):
   });
 
 /**
- * Renders the first Kanban in the space via Surface (resolves to KanbanContainer),
+ * Renders the first Kanban in the space via Surface (resolves to KanbanArticle),
  * with a sidebar containing ViewEditor and Json filter.
  */
 const DefaultComponent = () => {
@@ -88,36 +89,37 @@ const DefaultComponent = () => {
   const spaces = useSpaces();
   const space = spaces[spaces.length - 1];
   const [kanban] = useQuery(space?.db, Filter.type(Kanban.Kanban));
-  const typename = kanban?.view.target?.query ? getTypenameFromQuery(kanban.view.target.query.ast) : undefined;
-  const schema = useSchema(space?.db, typename);
-  const projection = useProjectionModel(schema, kanban, registry);
+  const viewRef = kanban && kanban.spec.kind === 'view' ? kanban.spec.view : undefined;
+  const view = viewRef?.target;
+  const typeUri = view?.query ? getTypeURIFromQuery(view.query.ast) : undefined;
+  const type = useType(space?.db, typeUri);
+  const projection = useProjectionModel(type, kanban, registry);
 
   const data = useMemo(() => (kanban ? { subject: kanban, attendableId: 'story' } : undefined), [kanban]);
 
   const handleUpdateQuery = useCallback(
     (newQuery: QueryAST.Query) => {
-      invariant(schema);
-      invariant(kanban?.view.target);
-      if (Type.isMutable(schema)) {
-        schema.updateTypename(getTypenameFromQuery(newQuery));
-      }
-      Obj.change(kanban.view.target, (view) => {
+      invariant(type);
+      invariant(view);
+      // NOTE: persisted Type.Type typename is immutable; only the view's
+      // query is updated here.
+      Obj.update(view, (view) => {
         view.query.ast = newQuery as Mutable<QueryAST.Query>;
       });
     },
-    [kanban, schema],
+    [view, type],
   );
 
   const handleDeleteField = useCallback(
     (fieldId: string) => {
-      if (schema && Type.isMutable(schema) && projection) {
+      if (type && Type.getDatabase(type) != null && projection) {
         projection.deleteFieldProjection(fieldId);
       }
     },
-    [schema, projection],
+    [type, projection],
   );
 
-  if (!schema || !kanban?.view.target) {
+  if (!type || !view) {
     return null;
   }
 
@@ -126,18 +128,20 @@ const DefaultComponent = () => {
       <Surface.Surface type={AppSurface.Article} data={data} limit={1} />
       <div className='flex flex-col h-full overflow-hidden border-l border-separator'>
         <ViewEditor
-          registry={space?.db.schemaRegistry}
-          schema={schema}
-          view={kanban.view.target}
+          registry={space?.db.graph.registry}
+          type={type}
+          view={view}
           onQueryChanged={handleUpdateQuery}
-          onDelete={schema && Type.isMutable(schema) ? handleDeleteField : undefined}
+          onDelete={type && Type.getDatabase(type) != null ? handleDeleteField : undefined}
         />
-        <Json.Root data={{ view: kanban.view.target, schema }}>
-          <Json.Content>
-            <Json.Filter />
-            <Json.Data classNames='text-xs' />
-          </Json.Content>
-        </Json.Root>
+        <Syntax.Root data={{ view, schema: Type.getSchema(type) }}>
+          <Syntax.Content>
+            <Syntax.Filter />
+            <Syntax.Viewport>
+              <Syntax.Code classNames='text-xs' />
+            </Syntax.Viewport>
+          </Syntax.Content>
+        </Syntax.Root>
       </div>
     </div>
   );
@@ -173,7 +177,7 @@ export const Default: Story = {
       onSpaceCreated: async (space) => {
         const { view } = await ViewModel.makeFromDatabase({
           db: space.db,
-          typename: Organization.Organization.typename,
+          typename: Type.getTypename(Organization.Organization),
           pivotFieldName: 'status',
         });
         const kanban = Kanban.make({ view });
@@ -217,7 +221,7 @@ export const Default: Story = {
     await expect(activeCards.length).toBeGreaterThan(0);
     await expect(prospectCards.length).toBeGreaterThan(0);
 
-    // Verify cards have drag handles (Card.Toolbar includes drag handle).
+    // Verify cards have drag handles (Card.Header includes drag handle).
     const firstActiveCard = activeCards[0];
     const buttons = firstActiveCard.querySelectorAll('button');
     await expect(buttons.length).toBeGreaterThan(0);
@@ -234,7 +238,7 @@ export const Default: Story = {
 };
 
 /**
- * Story variant that uses a mutable database schema (EchoSchema).
+ * Story variant that uses a database-stored Type.Type entity (mutable schema).
  * This allows testing schema mutations like adding/removing fields.
  */
 // TODO(wittjosiah): Card previews (e.g., OrganizationCard) are type-specific and hard-coded.
@@ -245,12 +249,14 @@ export const MutableSchema: Story = {
   decorators: [
     withKanbanPlugins({
       onSpaceCreated: async (space) => {
-        // Register schema in the database to make it mutable (EchoSchema).
-        const [schema] = await space.db.schemaRegistry.register([Organization.Organization]);
+        // Persist the schema in the database to make it mutable (stored Type.Type).
+        const type = await space.db.addType(Organization.Organization);
 
         const { view } = await ViewModel.makeFromDatabase({
           db: space.db,
-          typename: schema.typename,
+          // `db.addType` returns a persisted `Type.Type` entity; its typename lives in the
+          // type metadata, so read it via `Type.getTypename` rather than a `.typename` prop.
+          typename: Type.getTypename(type),
           pivotFieldName: 'status',
         });
         const kanban = Kanban.make({ view });
@@ -264,7 +270,7 @@ export const MutableSchema: Story = {
           ...Array.from({ length: 1 }, () => createOrg('commit')),
           ...Array.from({ length: 1 }, () => createOrg('reject')),
         ];
-        requiredOrgs.forEach((org) => space.db.add(Obj.make(schema, org)));
+        requiredOrgs.forEach((org) => space.db.add(Obj.make(type, org)));
       },
     }),
   ],