@draftably/react 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Byron Wall
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,12 @@
-# Temporary Holding Version
+# `@draftably/react`
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Draftably diagrams in React. `DraftDiagram` wraps the `<draft-diagram>` element from
+`@draftably/runtime`, so every framework gets the same viewer: zoom, pan, keyboard outline, and
+cleanup when it unmounts. Any number of diagrams can share a page.
+
+```sh
+pnpm add @draftably/react
+```
+
+See [Use with your framework](https://draftably.dev/docs/frameworks) for the component, server
+rendering with the `svg` prop, and a complete example.

package/dist/editor.d.ts

@@ -0,0 +1,13 @@
+/** `<DraftEditor>` for React 19: drag boxes and lines, and get the `.draft` source back. */
+import type { DraftEditorElement } from '@draftably/editor/element';
+import { type CSSProperties } from 'react';
+export type { DraftEditorElement };
+export interface DraftEditorProps {
+    /** `.draft` source. Passing back the text from `onChange` does not redraw. */
+    source: string;
+    /** Receives the new source after every kept edit, undo and redo. */
+    onChange?: (source: string) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const DraftEditor: import("react").ForwardRefExoticComponent<DraftEditorProps & import("react").RefAttributes<DraftEditorElement | null>>;

package/dist/editor.js

@@ -0,0 +1,17 @@
+'use client';
+import { createElement, forwardRef, useEffect, useImperativeHandle, useRef, } from 'react';
+export const DraftEditor = forwardRef(function DraftEditor({ source, onChange, className, style }, ref) {
+    const el = useRef(null);
+    useImperativeHandle(ref, () => el.current, []);
+    // The editor loads in the browser only, so server rendering and viewer-only pages skip it.
+    useEffect(() => void import('@draftably/editor/element'), []);
+    useEffect(() => {
+        const node = el.current;
+        if (!node || !onChange)
+            return;
+        const listen = (event) => onChange(event.detail);
+        node.addEventListener('draft-change', listen);
+        return () => node.removeEventListener('draft-change', listen);
+    }, [onChange]);
+    return createElement('draft-editor', { ref: el, source, className, style });
+});

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+/** `<DraftDiagram>` for React 19: the `<draft-diagram>` element with React props, a ref and `onUpdate`. */
+import '@draftably/runtime/element';
+import type { DraftDiagramElement } from '@draftably/runtime/element';
+import type { UpdateResult, ViewerOptions } from '@draftably/runtime/viewer';
+import { type CSSProperties } from 'react';
+export type { DraftDiagramElement, UpdateResult, ViewerOptions };
+export interface DraftDiagramProps {
+    /** `.draft` source. A change redraws the diagram and keeps the camera. */
+    source: string;
+    /** A declared emphasis state to show. */
+    state?: string | null;
+    /** The accessible name. */
+    label?: string;
+    /**
+     * Static SVG from `renderSvg(source, { target: 'inline', idPrefix })`, shown until the viewer
+     * draws. Server rendering and readers without JavaScript see it.
+     */
+    svg?: string;
+    options?: ViewerOptions;
+    onUpdate?: (result: UpdateResult) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const DraftDiagram: import("react").ForwardRefExoticComponent<DraftDiagramProps & import("react").RefAttributes<DraftDiagramElement | null>>;

package/dist/index.js

@@ -0,0 +1,21 @@
+'use client';
+/** `<DraftDiagram>` for React 19: the `<draft-diagram>` element with React props, a ref and `onUpdate`. */
+import '@draftably/runtime/element';
+import { createElement, forwardRef, useEffect, useImperativeHandle, useRef, } from 'react';
+export const DraftDiagram = forwardRef(function DraftDiagram({ source, state, label, svg, options, onUpdate, className, style }, ref) {
+    const el = useRef(null);
+    useImperativeHandle(ref, () => el.current, []);
+    useEffect(() => {
+        if (el.current && options)
+            el.current.options = options;
+    }, [options]);
+    useEffect(() => {
+        const node = el.current;
+        if (!node || !onUpdate)
+            return;
+        const listen = (event) => onUpdate(event.detail);
+        node.addEventListener('draft-update', listen);
+        return () => node.removeEventListener('draft-update', listen);
+    }, [onUpdate]);
+    return createElement('draft-diagram', { ref: el, source, state: state ?? undefined, label, className, style }, svg ? createElement('div', { dangerouslySetInnerHTML: { __html: svg } }) : null);
+});

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "@draftably/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "React components for Draftably diagrams.",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./editor": {
+      "types": "./dist/editor.d.ts",
+      "import": "./dist/editor.js",
+      "default": "./dist/editor.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@draftably/runtime": "0.1.0",
+    "@draftably/editor": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "engines": {
+    "node": ">=22.21.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/byronwall/draftably.git",
+    "directory": "packages/react"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build-frameworks.ts"
+  }
 }