@bendyline/docblocks-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bendyline
+
+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

@@ -0,0 +1,70 @@
+# @bendyline/docblocks-react
+
+React components for DocBlocks — file explorer, workspace picker, editor shell, and export controls.
+
+## Installation
+
+```bash
+npm install @bendyline/docblocks-react
+```
+
+**Peer dependencies:** React 18 or 19, plus `@bendyline/docblocks` (core) and `@bendyline/squisq-editor-react`.
+
+## Usage
+
+```tsx
+import { DocBlocksShell } from '@bendyline/docblocks-react';
+import '@bendyline/docblocks-react/styles';
+
+function App() {
+  return <DocBlocksShell theme="light" />;
+}
+```
+
+## Components
+
+### DocBlocksShell
+
+The main application shell — combines the file explorer, workspace picker, and squisq editor into a complete document editing experience.
+
+```tsx
+<DocBlocksShell theme="light" logoUrl="/logo.png" />
+```
+
+### FileExplorer
+
+File tree browser with create, rename, delete, and drag-and-drop support.
+
+### WorkspacePicker
+
+Dropdown for switching between workspaces (IndexedDB or native filesystem handles).
+
+### AppMenu
+
+Top menu bar with branding and about dialog.
+
+### ExportToolbarControls / ExportDialog
+
+Export functionality supporting DOCX, PDF, PPTX, HTML, and Markdown output formats with theme and transform options.
+
+## Hooks
+
+### `useAutoSave(content, save, delay?)`
+
+Debounced auto-save hook (default 500ms delay).
+
+### `useFileTree(provider)`
+
+File tree state management — returns the tree structure, selected file, and mutation functions.
+
+## Styles
+
+Import the stylesheet to get the default DocBlocks styling:
+
+```ts
+import '@bendyline/docblocks-react/styles';
+```
+
+## License
+
+MIT

package/dist/AppMenu/AppMenu.d.ts

@@ -0,0 +1,11 @@
+/**
+ * AppMenu — top-left dropdown with workspace actions and app links.
+ */
+export interface AppMenuProps {
+    /** URL for the about page. */
+    aboutUrl?: string;
+    /** Optional logo image URL to display instead of the text label. */
+    logoUrl?: string;
+}
+export declare function AppMenu({ aboutUrl: _aboutUrl, logoUrl }: AppMenuProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AppMenu.d.ts.map

package/dist/AppMenu/AppMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppMenu.d.ts","sourceRoot":"","sources":["../../src/AppMenu/AppMenu.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAIH,MAAM,WAAW,YAAY;IAC3B,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAoB,EAAE,OAAO,EAAE,EAAE,YAAY,2CA8GhF"}

package/dist/AppMenu/AppMenu.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * AppMenu — top-left dropdown with workspace actions and app links.
+ */
+import { useState, useCallback, useRef, useEffect } from 'react';
+export function AppMenu({ aboutUrl: _aboutUrl = '#about', logoUrl }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [showAbout, setShowAbout] = useState(false);
+    const menuRef = useRef(null);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        function handleOutsideClick(e) {
+            if (menuRef.current && !menuRef.current.contains(e.target)) {
+                setIsOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleOutsideClick);
+        return () => document.removeEventListener('mousedown', handleOutsideClick);
+    }, [isOpen]);
+    const handleAction = useCallback((action) => {
+        setIsOpen(false);
+        action();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: menuRef, className: "db-app-menu", children: [_jsxs("button", { className: "db-app-menu-btn", onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, "aria-haspopup": "true", children: [logoUrl ? (_jsx("img", { src: logoUrl, alt: "docblocks", className: "db-app-menu-logo" })) : (_jsx("span", { className: "db-app-menu-label", children: "docblocks" })), _jsx("span", { className: `db-app-menu-caret${isOpen ? ' db-app-menu-caret--open' : ''}`, children: '\u25BE' })] }), isOpen && (_jsx("div", { className: "db-app-menu-dropdown", role: "menu", children: _jsx("button", { className: "db-app-menu-item", role: "menuitem", onClick: () => handleAction(() => setShowAbout(true)), children: "About" }) }))] }), showAbout && (_jsx("div", { className: "db-dialog-overlay", onClick: () => setShowAbout(false), children: _jsxs("div", { className: "db-dialog", role: "dialog", "aria-label": "About DocBlocks", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "db-dialog-header", children: [_jsx("h2", { className: "db-dialog-title", children: "About DocBlocks" }), _jsx("button", { className: "db-dialog-close", onClick: () => setShowAbout(false), "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { className: "db-dialog-body", children: [_jsxs("p", { children: [_jsx("strong", { children: "DocBlocks" }), " is a markdown document editor that runs entirely in your browser. Your files stay on your device."] }), _jsxs("p", { children: ["Built on", ' ', _jsx("a", { href: "https://github.com/nicoth-in/squisq", target: "_blank", rel: "noopener noreferrer", children: "squisq" }), ' ', "by Bendyline."] }), _jsxs("p", { className: "db-dialog-links", children: [_jsx("a", { href: "https://github.com/bendyline/docblocks", target: "_blank", rel: "noopener noreferrer", children: "GitHub" }), _jsx("span", { className: "db-dialog-sep", children: "\u00B7" }), _jsx("a", { href: "https://github.com/bendyline/docblocks/blob/main/LICENSE", target: "_blank", rel: "noopener noreferrer", children: "License (MIT)" })] })] })] }) }))] }));
+}
+//# sourceMappingURL=AppMenu.js.map

package/dist/AppMenu/AppMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppMenu.js","sourceRoot":"","sources":["../../src/AppMenu/AppMenu.tsx"],"names":[],"mappings":"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"}

package/dist/AppMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { AppMenu } from './AppMenu.js';
+export type { AppMenuProps } from './AppMenu.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/AppMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AppMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC"}

package/dist/AppMenu/index.js

@@ -0,0 +1,2 @@
+export { AppMenu } from './AppMenu.js';
+//# sourceMappingURL=index.js.map

package/dist/AppMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/AppMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/DocBlocksShell/DocBlocksShell.d.ts

@@ -0,0 +1,16 @@
+/**
+ * DocBlocksShell — top-level layout component.
+ *
+ * Composes the left sidebar (WorkspacePicker + FileExplorer) with
+ * the center editor area (squisq EditorShell).
+ */
+import type { EditorTheme } from '@bendyline/squisq-editor-react';
+import '@bendyline/squisq-editor-react/styles';
+export interface DocBlocksShellProps {
+    /** Optional theme override. Omit or pass 'auto' to follow OS preference. */
+    theme?: EditorTheme | 'auto';
+    /** Optional logo image URL for the app menu. */
+    logoUrl?: string;
+}
+export declare function DocBlocksShell({ theme, logoUrl }: DocBlocksShellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DocBlocksShell.d.ts.map

package/dist/DocBlocksShell/DocBlocksShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocBlocksShell.d.ts","sourceRoot":"","sources":["../../src/DocBlocksShell/DocBlocksShell.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAc,MAAM,gCAAgC,CAAC;AAC9E,OAAO,uCAAuC,CAAC;AA4B/C,MAAM,WAAW,mBAAmB;IAClC,4EAA4E;IAC5E,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC7B,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAoDD,wBAAgB,cAAc,CAAC,EAAE,KAAc,EAAE,OAAO,EAAE,EAAE,mBAAmB,2CAsjB9E"}