@ankhorage/zora 25.5.0 → 25.6.2

package/src/features/registry/createEventCapabilities.ts

@@ -0,0 +1,108 @@
+import { areCapabilitiesEqual, isCapabilityId } from '@ankhorage/capability';
+import type { Capability } from '@ankhorage/contracts/capability';
+import type { DataSchema } from '@ankhorage/contracts/data';
+
+import type {
+  ZoraComponentEventMeta,
+  ZoraComponentEventPayloadFieldMeta,
+} from '../../types/authoring';
+import { ZORA_COMPONENT_META } from './componentMeta';
+
+/*** Projects direct-manifest ZORA event metadata into unique portable event capabilities. */
+export function createEventCapabilities(): readonly Capability[] {
+  const capabilitiesById = Object.values(ZORA_COMPONENT_META)
+    .filter((component) => component.directManifestNode)
+    .flatMap((component) => Object.values(component.events ?? {}))
+    .reduce<ReadonlyMap<Capability['id'], Capability>>(
+      (capabilities, event) => addEventCapability(capabilities, event),
+      new Map(),
+    );
+
+  return [...capabilitiesById.values()].sort((left, right) => left.id.localeCompare(right.id));
+}
+
+/*** Adds one namespaced metadata event while rejecting conflicting duplicate identities. */
+function addEventCapability(
+  capabilities: ReadonlyMap<Capability['id'], Capability>,
+  event: ZoraComponentEventMeta,
+): ReadonlyMap<Capability['id'], Capability> {
+  if (!isCapabilityId(event.eventType)) return capabilities;
+
+  const capability = createEventCapability(event);
+  const existing = capabilities.get(capability.id);
+  if (existing !== undefined && !areCapabilitiesEqual(existing, capability)) {
+    throw new Error(`ZORA event metadata defines conflicting capability "${capability.id}".`);
+  }
+
+  return new Map([...capabilities, [capability.id, capability]]);
+}
+
+/*** Converts one emitted component event into its serializable canonical descriptor. */
+function createEventCapability(event: ZoraComponentEventMeta): Capability {
+  if (!isCapabilityId(event.eventType)) {
+    throw new Error(
+      `ZORA event metadata must use a namespaced capability id: "${event.eventType}".`,
+    );
+  }
+
+  return {
+    id: event.eventType,
+    owner: '@ankhorage/zora',
+    access: ['emit'],
+    binding: { kind: 'event', bindableAs: ['source'] },
+    label: event.label,
+    ...(event.description === undefined ? {} : { description: event.description }),
+    output: { schema: createEventPayloadSchema(event.payloadFields ?? []) },
+  };
+}
+
+/*** Projects the documented event payload fields into an open object schema. */
+function createEventPayloadSchema(
+  fields: readonly ZoraComponentEventPayloadFieldMeta[],
+): DataSchema {
+  return {
+    type: 'object',
+    properties: fields.reduce<Readonly<Record<string, DataSchema>>>(addPayloadField, {}),
+  };
+}
+
+/*** Adds one dotted metadata path to an immutable object-schema property map. */
+function addPayloadField(
+  properties: Readonly<Record<string, DataSchema>>,
+  field: ZoraComponentEventPayloadFieldMeta,
+): Readonly<Record<string, DataSchema>> {
+  return addPayloadFieldAtPath(properties, field.path.split('.'), createPayloadFieldSchema(field));
+}
+
+/*** Recursively embeds a leaf schema below its documented object-property path. */
+function addPayloadFieldAtPath(
+  properties: Readonly<Record<string, DataSchema>>,
+  path: readonly string[],
+  schema: DataSchema,
+): Readonly<Record<string, DataSchema>> {
+  const [key, ...remainingPath] = path;
+  if (key === undefined || key === '') return properties;
+  if (remainingPath.length === 0) return { ...properties, [key]: schema };
+
+  const current = Object.entries(properties).find(([propertyKey]) => propertyKey === key)?.[1];
+  const nestedProperties = addPayloadFieldAtPath(current?.properties ?? {}, remainingPath, schema);
+  return {
+    ...properties,
+    [key]: { ...current, type: 'object', properties: nestedProperties },
+  };
+}
+
+/*** Maps one authoring payload-field type and annotations to its portable data schema. */
+function createPayloadFieldSchema(field: ZoraComponentEventPayloadFieldMeta): DataSchema {
+  return {
+    ...(field.type === 'object'
+      ? { type: 'object' as const }
+      : field.type === 'record'
+        ? { type: 'object' as const, additionalProperties: true }
+        : field.type === 'unknown'
+          ? {}
+          : { type: field.type }),
+    ...(field.label === undefined ? {} : { title: field.label }),
+    ...(field.description === undefined ? {} : { description: field.description }),
+  };
+}

package/src/features/time-grid/adapters/inbound/TimeGrid.test.tsx

@@ -105,22 +105,49 @@ test('keeps mounted interval and virtualized variable-height lane labels synchro
     expect(arrowDown.defaultPrevented).toBe(true);
     expect(focusedIds).toEqual(['strings']);
 
-    const verticalScroller = Array.from(host.querySelectorAll<HTMLElement>('div')).find(
-      (element) =>
-        element.getAttribute('style') === 'width: 200px; height: 30px;' &&
-        Array.from(element.querySelectorAll('div')).some(
-          (child) => child.getAttribute('style') === 'width: 200px; height: 180px;',
-        ),
+    const verticalScroller = host.querySelector<HTMLElement>(
+      '[data-testid="time-grid-viewport-vertical-scroll"]',
     );
     if (!verticalScroller) throw new Error('Missing GridView vertical scroller');
-    Object.defineProperty(verticalScroller, 'scrollTop', { configurable: true, value: 60 });
+    verticalScroller.scrollTop = 60;
     void act(() => verticalScroller.dispatchEvent(new browser.Event('scroll', { bubbles: true })));
 
-    expect(viewportOffsets).toContain(30);
+    expect(viewportOffsets).toEqual([30]);
     expect(host.querySelector('[data-testid="time-grid-lane-label-drums"]')).toBeNull();
     expect(
       host.querySelector('[data-testid="time-grid-lane-label-bass"]')?.getAttribute('style'),
     ).toContain('top: -20px');
+
+    act(() => {
+      root.render(
+        <TimeGrid
+          contentWidth={100}
+          focusedIntervalId="strings"
+          height={30}
+          intervals={[
+            { extent: 10, id: 'drums', laneId: 'drums', start: 0 },
+            { extent: 10, id: 'strings', laneId: 'strings', start: 0 },
+          ]}
+          lanes={[
+            { height: 20, id: 'drums' },
+            { height: 40, id: 'bass' },
+            { height: 30, id: 'strings' },
+          ]}
+          onFocusedIntervalIdChange={(id) => focusedIds.push(id)}
+          onViewportChange={(viewport) => viewportOffsets.push(viewport.offsetY)}
+          overscanPixels={0}
+          renderInterval={(interval, selected) => (
+            <span data-selected={selected}>{interval.id}</span>
+          )}
+          renderLaneLabel={(lane) => <span>{lane.id}</span>}
+          selectedIntervalIds={['strings']}
+          testID="time-grid"
+          width={100}
+          zoom={2}
+        />,
+      );
+    });
+    expect(viewportOffsets).toEqual([30, 56]);
     await new Promise((resolve) => setTimeout(resolve, 100));
   } finally {
     act(() => root.unmount());

package/src/index.ts

@@ -314,6 +314,8 @@ export type {
 } from './features/list/public';
 export { FlatList, SectionList } from './features/list/public';
 export { List, ListItem, ListSection } from './features/list/public';
+export type { MatrixGridProps } from './features/matrix-grid/public';
+export { MatrixGrid } from './features/matrix-grid/public';
 export { MissingElement, type MissingElementProps } from './features/missing-element/public';
 export { Pagination, type PaginationProps } from './features/pagination/public';
 export type { PaletteItemProps } from './features/palette-item/public';

package/src/structureOwnership.test.ts

@@ -63,4 +63,9 @@ describe('src ownership', () => {
       expect(existsSync(path), path).toBe(false);
     }
   });
+
+  test('keeps event capability projection with the registry metadata owner', () => {
+    expect(existsSync('src/features/registry/createEventCapabilities.ts')).toBe(true);
+    expect(existsSync('src/capabilities/createEventCapabilities.ts')).toBe(false);
+  });
 });

package/src/types/grid-view.ts

@@ -1,4 +1,9 @@
-import type { GridRectItem, GridViewport } from '@ankhorage/grid-view';
+import type {
+  GridRectItem,
+  GridViewport,
+  GridViewportConstraints,
+  GridZoomLimits,
+} from '@ankhorage/grid-view';
 import type React from 'react';
 
 import type { ZoraBaseProps } from './base';
@@ -10,6 +15,20 @@ export interface GridViewProps extends ZoraBaseProps {
   contentHeight: number;
   width: number;
   height: number;
+  /**
+   * Canonical controlled world viewport. Supplying this value makes `onViewportChange`
+   * report interaction proposals without mutating renderer-owned state.
+   */
+  viewport?: GridViewport;
+  /** Initial world position and independent axis scales for uncontrolled rendering. */
+  defaultViewport?: Partial<
+    Pick<GridViewport, 'offsetX' | 'offsetY' | 'pixelsPerUnitX' | 'pixelsPerUnitY'>
+  >;
+  /** Finite world bounds and optional overscroll for panning and focused-item reveal. */
+  viewportConstraints?: GridViewportConstraints;
+  /** Independent X/Y scale limits applied to focal-point zoom interactions. */
+  zoomLimits?: GridZoomLimits;
+  /** @deprecated Use `defaultViewport` for new code. */
   zoom?: number;
   overscanPixels?: number;
   /** Stable item identity that must be scrolled into view without duplicating viewport geometry. */
@@ -34,11 +53,18 @@ export interface TileGridProps extends ZoraBaseProps {
   tileSize?: number;
   gap?: number;
   zoom?: number;
+  viewport?: GridViewport;
+  defaultViewport?: Partial<
+    Pick<GridViewport, 'offsetX' | 'offsetY' | 'pixelsPerUnitX' | 'pixelsPerUnitY'>
+  >;
+  viewportConstraints?: GridViewportConstraints;
+  zoomLimits?: GridZoomLimits;
   overscanPixels?: number;
   focusedItemId?: string;
   revealPaddingPixels?: number;
   /** Reports the same measured column count used to position tiles. */
   onColumnsChange?: (columns: number) => void;
+  onViewportChange?: (viewport: GridViewport) => void;
   onVisibleItemIdsChange?: (ids: readonly string[]) => void;
   renderItem: (item: TileGridItem) => React.ReactNode;
 }

package/src/types/matrix-grid.ts

@@ -0,0 +1,29 @@
+import type {
+  GridMatrixCell,
+  GridMatrixCellPlacement,
+  GridMatrixLayout,
+  GridViewport,
+} from '@ankhorage/grid-view';
+import type React from 'react';
+
+import type { ZoraBaseProps } from './base';
+import type { SelectionMode } from './selection';
+
+/** Code-first virtualized sparse-matrix presentation over the published grid-view geometry API. */
+export interface MatrixGridProps extends ZoraBaseProps {
+  readonly layout: GridMatrixLayout;
+  readonly cells: readonly GridMatrixCell[];
+  readonly width: number;
+  readonly height: number;
+  /** A supplied viewport is controlled by the caller, including independent axis zoom. */
+  readonly viewport?: GridViewport;
+  readonly zoomX?: number;
+  readonly zoomY?: number;
+  readonly overscanPixels?: number;
+  readonly selectedCellIds?: readonly string[];
+  readonly selectionMode?: SelectionMode;
+  readonly onSelectionChange?: (ids: readonly string[]) => void;
+  readonly onViewportChange?: (viewport: GridViewport) => void;
+  readonly renderCell: (cell: GridMatrixCellPlacement) => React.ReactNode;
+  readonly accessibilityLabel?: string;
+}

package/web-dist/chunks/{Accordion-d6azgz09.js → Accordion-2r0gqk3x.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   TileGrid2
-} from "./Accordion-gxj5qbpr.js";
+} from "./Accordion-a6551mh4.js";
 import {
   withZoraThemeScope
 } from "./Accordion-42jfy1a1.js";