@samba425/diagramforge-react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,191 @@
+import { applySourceToCanvas } from '../services/sourceEditor';
+import { ArrowStyle } from '../types';
+import { buildShareUrl } from '../services/share/urlShare';
+import { Camera } from '../types';
+import { createEdge } from '../models/factory';
+import { createLayer } from '../models/factory';
+import { createPage } from '../models/factory';
+import { createProject } from '../models/factory';
+import { createShape } from '../models/factory';
+import { CSSProperties } from 'react';
+import { decodeShareHash } from '../services/share/urlShare';
+import { DIAGRAM_TEMPLATES } from '../templates';
+import { DiagramFile } from '../services/project/fileFormat';
+import { DiagramTemplate } from '../templates';
+import { Edge } from '../types';
+import { EdgeEndpoint } from '../types';
+import { EdgeRouter } from '../types';
+import { encodeShareHash } from '../services/share/urlShare';
+import { ExportFormat } from '../services/export';
+import { exportJson } from '../services/export';
+import { exportPdf } from '../services/export';
+import { exportPng } from '../services/export';
+import { exportSvg } from '../services/export';
+import { exportZip } from '../services/export';
+import { FILE_SIGNATURE } from '../services/project/fileFormat';
+import { Layer } from '../types';
+import { loadTemplate } from '../templates';
+import { Page } from '../types';
+import { parseProject } from '../services/project/fileFormat';
+import { Plugin as Plugin_2 } from '../plugins/types';
+import { pluginManager } from '../plugins/registry';
+import { Point } from '../types';
+import { Project } from '../types';
+import { projectToSourceText } from '../services/sourceEditor';
+import { RasterExportOptions } from '../services/export';
+import { Rect } from '../types';
+import { serializeProject } from '../services/project/fileFormat';
+import { Shape } from '../types';
+import { ShareLoadResult } from '../services/share/urlShare';
+import { SourceFormat } from '../services/sourceEditor';
+import { ThemeMode } from '../types';
+import { ToolId } from '../types';
+
+export { applySourceToCanvas }
+
+export { ArrowStyle }
+
+export { buildShareUrl }
+
+export { Camera }
+
+export { createEdge }
+
+export { createLayer }
+
+export { createPage }
+
+export { createProject }
+
+export { createShape }
+
+export { decodeShareHash }
+
+export { DIAGRAM_TEMPLATES }
+
+/**
+ * Full DiagramForge editor as a React component.
+ *
+ * @example
+ * ```tsx
+ * import { DiagramEditor } from '@samba425/diagramforge-react';
+ * import '@samba425/diagramforge-react/styles.css';
+ *
+ * export function Page() {
+ *   return (
+ *     <DiagramEditor
+ *       height="80vh"
+ *       onChange={(project) => console.log('saved', project.id)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function DiagramEditor({ initialProject, onChange, readOnly, apiBaseUrl, features, themeMode, height, width, style, className, standalone, }: DiagramEditorProps): React.JSX.Element;
+
+/** Feature flags for embedded / standalone editor instances. */
+export declare interface DiagramEditorFeatures {
+    /** Show AI generation panel. Default: true. */
+    ai?: boolean;
+    /** Enable F5 presentation mode. Default: true. */
+    presentation?: boolean;
+    /** JSON / YAML / Mermaid source editor. Default: true. */
+    sourceEditor?: boolean;
+    /** Canvas minimap. Default: true. */
+    minimap?: boolean;
+    /** Welcome / recovery dialog on startup. Default: false in embed, true in standalone. */
+    welcome?: boolean;
+    /** Autosave to IndexedDB. Default: false in embed, true in standalone. */
+    persistence?: boolean;
+}
+
+/** Props for {@link DiagramEditor}. */
+export declare interface DiagramEditorProps {
+    /** Initial diagram document. Updates when the prop reference changes. */
+    initialProject?: Project;
+    /** Called whenever the document changes (debounced by React batching). */
+    onChange?: (project: Project) => void;
+    /** View-only mode — pan/zoom only. */
+    readOnly?: boolean;
+    /** Backend base URL for AI generation (overrides `VITE_API_BASE_URL`). */
+    apiBaseUrl?: string;
+    /** Feature toggles. Unlisted features default to enabled except welcome/persistence in embed mode. */
+    features?: DiagramEditorFeatures;
+    /** Color theme. Default: `system`. */
+    themeMode?: ThemeMode;
+    /** Container height. Default: `100%`. */
+    height?: CSSProperties['height'];
+    /** Container width. Default: `100%`. */
+    width?: CSSProperties['width'];
+    /** Additional wrapper styles. */
+    style?: CSSProperties;
+    /** Optional CSS class on the root wrapper. */
+    className?: string;
+    /**
+     * Standalone app mode — enables welcome dialog and IndexedDB autosave.
+     * Used by the first-party SPA; embed consumers usually leave this false.
+     */
+    standalone?: boolean;
+}
+
+export { DiagramFile }
+
+export { DiagramTemplate }
+
+export { Edge }
+
+export { EdgeEndpoint }
+
+export { EdgeRouter }
+
+export { encodeShareHash }
+
+export { ExportFormat }
+
+export { exportJson }
+
+export { exportPdf }
+
+export { exportPng }
+
+export { exportSvg }
+
+export { exportZip }
+
+export { FILE_SIGNATURE }
+
+export { Layer }
+
+export { loadTemplate }
+
+export { Page }
+
+export { parseProject }
+
+export { Plugin_2 as Plugin }
+
+export { pluginManager }
+
+export { Point }
+
+export { Project }
+
+export { projectToSourceText }
+
+export { RasterExportOptions }
+
+export { Rect }
+
+export { serializeProject }
+
+export { Shape }
+
+export { ShareLoadResult }
+
+export { SourceFormat }
+
+export { ThemeMode }
+
+export { ToolId }
+
+export { }

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@samba425/diagramforge-react",
+  "private": false,
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "description": "Embeddable offline-first diagram editor for React — a draw.io alternative.",
+  "author": "samba425 <asiva325@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/samba425/Udraw.git",
+    "directory": "frontend"
+  },
+  "keywords": [
+    "diagram",
+    "flowchart",
+    "drawio",
+    "react",
+    "svg",
+    "editor",
+    "whiteboard"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/diagramforge.js",
+      "require": "./dist/diagramforge.umd.cjs"
+    },
+    "./styles.css": "./dist/diagramforge.css"
+  },
+  "main": "./dist/diagramforge.umd.cjs",
+  "module": "./dist/diagramforge.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/diagramforge.js",
+    "dist/diagramforge.umd.cjs",
+    "dist/diagramforge.css",
+    "dist/index.d.ts"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "build:all": "npm run build && npm run build:lib",
+    "preview": "vite preview --host",
+    "lint": "eslint .",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "typecheck": "tsc -b --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test"
+  },
+  "dependencies": {
+    "idb": "^8.0.0",
+    "js-yaml": "^5.2.1",
+    "jspdf": "^4.2.1",
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.469.0",
+    "motion": "^11.15.0",
+    "nanoid": "^5.0.9",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-router-dom": "^7.1.1",
+    "zustand": "^5.0.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@playwright/test": "^1.49.1",
+    "@tailwindcss/vite": "^4.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "jsdom": "^25.0.1",
+    "prettier": "^3.4.2",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.1",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-pwa": "^1.3.0",
+    "vitest": "^3.0.0"
+  }
+}