@plotwork.official/viewer 0.0.0-stage → 0.1.1

package/dist/index.js

@@ -0,0 +1,3 @@
+export { definePlotworkDiagram, TAG_NAME } from './element/define.js';
+export { DEFAULT_LABELS } from './element/copy.js';
+export { fingerprintOf, isFingerprint, readEmbeddedSource, readTraceMap } from './core/index.js';

package/dist/react/index.d.ts

@@ -0,0 +1,39 @@
+import type { CSSProperties } from 'react';
+import type { ViewerLabels } from '../element/copy.js';
+import type { ChangeDetail, DrillDetail, ErrorDetail, LoadDetail, TraceDetail } from '../element/events.js';
+import type { PlotworkDiagramElement } from '../element/plotwork-diagram.js';
+import type { ThemeChoice } from '../core/picture-scheme.js';
+/**
+ * `<PlotworkDiagram>`: the `<plotwork-diagram>` element for React. It registers the element on first render, passes plain values as
+ * attributes, sets `svg` and `labels` as properties, and turns the element's events into callbacks. React is a peer dependency;
+ * nothing else is imported. The ref is the element itself, with `fit()`, `zoomIn()`, `zoomOut()`, `reload()` and `source()`.
+ */
+export interface PlotworkDiagramProps {
+    /** The picture's address: a file beside the page, a hosted picture, a stable link, or an organisation embed link. */
+    src?: string | undefined;
+    /** The picture's text, for a picture the page already holds (a `.diagram` import). It wins over `src`. */
+    svg?: string | null | undefined;
+    theme?: ThemeChoice | undefined;
+    /** Check for a new version and show it without a reload. */
+    live?: boolean | undefined;
+    /** Seconds between checks for a live picture: 60 when left out, never below 15. */
+    interval?: number | undefined;
+    /** Show the picture only when its fingerprint is this one (`sha256-<hex>`). A pinned picture is never live. */
+    fingerprint?: string | undefined;
+    /** `zoom` when the viewer is the page and a plain wheel zooms; `modifier` (the default) leaves the wheel to the page. */
+    wheel?: 'zoom' | 'modifier' | undefined;
+    /** `none` hides the toolbar. */
+    controls?: 'none' | undefined;
+    /** What the diagram shows, for a screen reader. */
+    label?: string | undefined;
+    labels?: Partial<ViewerLabels> | undefined;
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
+    onLoad?: ((detail: LoadDetail) => void) | undefined;
+    onChange?: ((detail: ChangeDetail) => void) | undefined;
+    onError?: ((detail: ErrorDetail) => void) | undefined;
+    onDrill?: ((detail: DrillDetail) => void) | undefined;
+    onTrace?: ((detail: TraceDetail) => void) | undefined;
+}
+export declare const PlotworkDiagram: import("react").ForwardRefExoticComponent<PlotworkDiagramProps & import("react").RefAttributes<PlotworkDiagramElement>>;
+export type { PlotworkDiagramElement } from '../element/plotwork-diagram.js';

package/dist/react/index.js

@@ -0,0 +1,52 @@
+import { createElement, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';
+import { definePlotworkDiagram, TAG_NAME } from '../element/define.js';
+const EVENTS = { 'plotwork-load': 'onLoad', 'plotwork-change': 'onChange', 'plotwork-error': 'onError', 'plotwork-drill': 'onDrill', 'plotwork-trace': 'onTrace' };
+const useClientLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+function PlotworkDiagramInner(props, ref) {
+    const element = useRef(null);
+    const latest = useRef(props);
+    latest.current = props;
+    useImperativeHandle(ref, () => element.current, []);
+    useClientLayoutEffect(() => {
+        definePlotworkDiagram();
+    }, []);
+    useClientLayoutEffect(() => {
+        const node = element.current;
+        if (node === null)
+            return;
+        node.labels = props.labels;
+        node.svg = props.svg ?? null;
+    }, [props.svg, props.labels]);
+    useEffect(() => {
+        const node = element.current;
+        if (node === null)
+            return undefined;
+        const listeners = Object.entries(EVENTS).map(([type, prop]) => {
+            const listener = (event) => {
+                const handler = latest.current[prop];
+                handler?.(event.detail);
+            };
+            node.addEventListener(type, listener);
+            return () => node.removeEventListener(type, listener);
+        });
+        return () => {
+            for (const remove of listeners)
+                remove();
+        };
+    }, []);
+    return createElement(TAG_NAME, {
+        ref: element,
+        src: props.src,
+        theme: props.theme,
+        live: props.live === true ? '' : undefined,
+        interval: props.interval,
+        fingerprint: props.fingerprint,
+        wheel: props.wheel,
+        controls: props.controls,
+        label: props.label,
+        class: props.className,
+        style: props.style,
+    });
+}
+export const PlotworkDiagram = forwardRef(PlotworkDiagramInner);
+PlotworkDiagram.displayName = 'PlotworkDiagram';

package/dist/register.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/register.js

@@ -0,0 +1,6 @@
+/**
+ * The side-effect entry: `import '@plotwork.official/viewer/register'` registers `<plotwork-diagram>`. It is the only module of the
+ * package with a side effect, and `sideEffects` in package.json names it, so a bundler keeps it and tree-shakes the rest.
+ */
+import { definePlotworkDiagram } from './element/define.js';
+definePlotworkDiagram();

package/package.json

@@ -1,6 +1,76 @@
 {
   "name": "@plotwork.official/viewer",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Embed interactive Plotwork diagrams in any page: a <plotwork-diagram> web component and a React component, with no runtime dependencies.",
+  "license": "MIT",
+  "type": "module",
+  "homepage": "https://docs.plotwork.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/plotwork-official/plotwork-sdk.git",
+    "directory": "packages/viewer"
+  },
+  "keywords": [
+    "plotwork",
+    "diagram",
+    "viewer",
+    "web-component",
+    "react",
+    "svg"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./register": {
+      "types": "./dist/register.d.ts",
+      "default": "./dist/register.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "default": "./dist/core/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "!dist/**/__tests__",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "./dist/register.js"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.2.3",
+    "jsdom": "30.1.1",
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}