@joshuagraber/digital-poetics

React components and utilities for interactive digital-poetry experiments.

The package currently includes two experiments:

• Wheel Poem: distributes text across concentric rotatable wheels to create combinatorial readings.
• Mathews' Algorithm: builds a table of equivalent elements, applies Harry Mathews' cyclic shift operations, and reads the resulting sets.

Installation

npm install @joshuagraber/digital-poetics

React and React DOM are peer dependencies:

npm install react react-dom

Import the package styles once in your app:

import '@joshuagraber/digital-poetics/styles';

Mathews' Algorithm

The Mathews workbench defaults to a 4 by 4 table. It supports:

• Equal-sized set tables from 2 by 2 through 10 by 10.
• Shift-left and read-down output.
• Shift-right and read-up output.
• Multiple shift passes.
• A heterogeneity guideline indicator using Mathews' n^2 - (n - 2) rule.
• Programmatic export and restoration of session data.

import {
  MathewsAlgorithmWorkbench,
  useMathewsAlgorithm,
  restoreSessionData,
  type MathewsSessionData,
} from '@joshuagraber/digital-poetics';

export function MathewsDemo() {
  return <MathewsAlgorithmWorkbench />;
}

Session restoration can be handled outside the interface:

const saved = window.localStorage.getItem('mathews-session');
const initialSession = saved
  ? restoreSessionData(JSON.parse(saved) as MathewsSessionData) ?? undefined
  : undefined;

<MathewsAlgorithmWorkbench
  initialSession={initialSession}
  onSessionChange={(session) => {
    window.localStorage.setItem('mathews-session', JSON.stringify(session));
  }}
/>;

For lower-level use, import the algorithm helpers directly:

import { computeMathewsOutputs } from '@joshuagraber/digital-poetics';

const outputs = computeMathewsOutputs([
  ['Truth', 'made', 'you', 'listen'],
  ['Love', 'left', 'her', 'quiet'],
  ['Work', 'kept', 'him', 'steady'],
  ['Wealth', 'tuned', 'me', 'awake'],
]);

Wheel Poem

Wheel Poem exposes a state hook plus focused UI components:

import {
  WheelPoem,
  WheelPoemControls,
  WheelPoemTextInput,
  WheelPoemTextPreview,
  useWheelState,
} from '@joshuagraber/digital-poetics';

export function WheelPoemDemo() {
  const wheelState = useWheelState();

  return (
    <>
      <WheelPoemTextInput
        {...wheelState}
        onTextProcessed={() => undefined}
      />
      <WheelPoem {...wheelState} />
      <WheelPoemTextPreview
        text={wheelState.currentPoemText}
        isVisible={!!wheelState.textDistribution}
      />
      <WheelPoemControls
        textDistribution={wheelState.textDistribution}
        resetRotations={wheelState.resetRotations}
        randomizeRotations={wheelState.randomizeRotations}
      />
    </>
  );
}

Development

npm install
npm run dev

The example app runs in Vite examples mode and includes routes for both experiments:

• /wheel-poem
• /mathews-algorithm

Useful commands:

npm run lint
npm run build
npm run build:examples
npm run preview

npm run build produces the library package in dist. npm run preview rebuilds and serves the demo app from dist-examples.

Package Contents

Published packages include:

• dist
• README.md

Source, examples, context files, local PDFs, and development config are excluded from the npm package.

License

MIT