@x12i/io-matrix-view

React component for viewing and editing an Object–Property I/O Matrix.

Install

pnpm add @x12i/io-matrix-view @x12i/io-matrix-schema

Usage

import { useState } from 'react';
import { ObjectPropertyIOMatrix, PRESET_READONLY_VIEWER } from '@x12i/io-matrix-view';
import '@x12i/io-matrix-view/style.css';
import type { Matrix } from '@x12i/io-matrix-schema';

export function App({ initial }: { initial: Matrix }) {
  const [matrix, setMatrix] = useState(initial);
  const [mode, setMode] = useState<'readonly' | 'edit'>('readonly');

  return (
    <ObjectPropertyIOMatrix
      matrix={matrix}
      onChange={setMatrix}
      mode={mode}
      onModeChange={setMode}
      config={PRESET_READONLY_VIEWER} // or omit for full editor features
    />
  );
}

Important: this package ships no sample business data. Pass a matrix (or defaultMatrix) from your app. The monorepo demo loads fixtures from /data.

Surfaces

| View | Purpose | |------|---------| | Matrix | Classic step × property I/O table | | Map | Atlas-style swimlanes / ribbons | | Abstracts | Assign abstract names to raw object properties | | Transforms | Declarative step input→output ops + step abstract I/O | | Try | Playground: sample input → computed output + validation |

Matrix and Map share a Raw / Abstract naming lens. Abstracts / Transforms / Try keep their own focused chrome.

Props

| Prop | Type | Description | |------|------|-------------| | matrix | Matrix | Controlled matrix value | | defaultMatrix | Matrix | Uncontrolled initial value | | onChange | (m: Matrix) => void | Called when the matrix changes in edit mode | | mode | 'readonly' \| 'edit' | Controlled mode | | defaultMode | 'readonly' \| 'edit' | Uncontrolled initial mode | | onModeChange | (m) => void | Mode change callback | | config | MatrixViewConfig | Feature flags + filters | | title | string | Optional title (used in nested / export) | | memorix | MemorixClientConfig | Optional remote load/save (hidden when absent) |

Configuration presets

• PRESET_UI_ONLY — only ui steps
• PRESET_CONNECTORS_ONLY — connector + target-connector
• PRESET_READONLY_VIEWER — no editing / promote-demote

interface MatrixViewConfig {
  initialMode?: 'readonly' | 'edit';
  allowModeToggle?: boolean;
  visibleKinds?: StepKind[] | 'all';
  visibleObjectTypeKeys?: string[] | 'all';
  features?: {
    importExport?: boolean;
    subMatrixPromoteDemote?: boolean;
    structuralEditing?: boolean;
    cellEditing?: boolean;
    collapsedFlowView?: boolean;
    issuesPanel?: boolean;
    mapView?: boolean;
    abstractMapping?: boolean;
    transformMapping?: boolean;
    playground?: boolean;
  };
}

Import / export

• Import: JSON only (full document via parseDocument)
• Export JSON: always the full underlying matrix (object types, abstracts, transforms, examples)
• Export Markdown / PNG / PDF: reflect the current visible filtered view
• Memorix (optional): memorix-record/2 envelope, object type io-matrices, content type matrix holding the full IoMatrixDocument. Configure via the memorix prop or VITE_MEMORIX_* env vars.

Styling

Import the built CSS once in your app entry:

import '@x12i/io-matrix-view/style.css';

The component is Tailwind-based; the published style.css is precompiled so consumers do not need Tailwind.