@draftably/solid 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/solid`
 
-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 Solid. `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/solid
+```
+
+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,23 @@
+/** `<DraftEditor>` for Solid: drag boxes and lines, and get the `.draft` source back. */
+import type { DraftEditorElement } from '@draftably/editor/element';
+import { type JSX } from 'solid-js';
+export type { DraftEditorElement };
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'draft-editor': JSX.HTMLAttributes<DraftEditorElement> & {
+                source?: string;
+            };
+        }
+    }
+}
+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;
+    ref?: (element: DraftEditorElement) => void;
+    class?: string;
+    style?: JSX.CSSProperties | string;
+}
+export declare function DraftEditor(props: DraftEditorProps): JSX.Element;

package/dist/editor.jsx

@@ -0,0 +1,19 @@
+import { createEffect, onCleanup, onMount } from 'solid-js';
+export function DraftEditor(props) {
+    let el;
+    // The editor loads in the browser only, so server rendering and viewer-only pages skip it.
+    onMount(() => void import('@draftably/editor/element'));
+    createEffect(() => {
+        const node = el;
+        const onChange = props.onChange;
+        if (!node || !onChange)
+            return;
+        const listen = (event) => onChange(event.detail);
+        node.addEventListener('draft-change', listen);
+        onCleanup(() => node.removeEventListener('draft-change', listen));
+    });
+    return (<draft-editor ref={(node) => {
+            el = node;
+            props.ref?.(node);
+        }} source={props.source} class={props.class} style={props.style}/>);
+}

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+/** `<DraftDiagram>` for Solid: the `<draft-diagram>` element with Solid 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 JSX } from 'solid-js';
+export type { DraftDiagramElement, UpdateResult, ViewerOptions };
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'draft-diagram': JSX.HTMLAttributes<DraftDiagramElement> & {
+                source?: string;
+                state?: string;
+                label?: string;
+            };
+        }
+    }
+}
+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;
+    ref?: (element: DraftDiagramElement) => void;
+    class?: string;
+    style?: JSX.CSSProperties | string;
+}
+export declare function DraftDiagram(props: DraftDiagramProps): JSX.Element;

package/dist/index.jsx

@@ -0,0 +1,25 @@
+/** `<DraftDiagram>` for Solid: the `<draft-diagram>` element with Solid props, a ref and `onUpdate`. */
+import '@draftably/runtime/element';
+import { createEffect, onCleanup, Show } from 'solid-js';
+export function DraftDiagram(props) {
+    let el;
+    createEffect(() => {
+        if (el && props.options)
+            el.options = props.options;
+    });
+    createEffect(() => {
+        const node = el;
+        const onUpdate = props.onUpdate;
+        if (!node || !onUpdate)
+            return;
+        const listen = (event) => onUpdate(event.detail);
+        node.addEventListener('draft-update', listen);
+        onCleanup(() => node.removeEventListener('draft-update', listen));
+    });
+    return (<draft-diagram ref={(node) => {
+            el = node;
+            props.ref?.(node);
+        }} source={props.source} state={props.state ?? undefined} label={props.label} class={props.class} style={props.style}>
+      <Show when={props.svg}>{svg => <div innerHTML={svg()}/>}</Show>
+    </draft-diagram>);
+}

package/package.json

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