@bendyline/docblocks-react 0.1.0

package/dist/index.js

@@ -0,0 +1,19 @@
+/**
+ * @bendyline/docblocks-react — React components for DocBlocks
+ */
+// FileExplorer
+export { FileExplorer } from './FileExplorer/index.js';
+export { FileTreeNode } from './FileExplorer/index.js';
+export { useFileTree } from './FileExplorer/index.js';
+// WorkspacePicker
+export { WorkspacePicker } from './WorkspacePicker/index.js';
+// DocBlocksShell
+export { DocBlocksShell } from './DocBlocksShell/index.js';
+// AppMenu
+export { AppMenu } from './AppMenu/index.js';
+// Export
+export { ExportToolbarControls } from './Export/index.js';
+export { ExportDialog } from './Export/index.js';
+// Hooks
+export { useAutoSave } from './hooks/index.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAe;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,kBAAkB;AAClB,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG7D,iBAAiB;AACjB,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3D,UAAU;AACV,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAG7C,SAAS;AACT,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,QAAQ;AACR,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@bendyline/docblocks-react",
+  "version": "0.1.0",
+  "description": "React components for DocBlocks — file explorer, workspace picker, and editor shell",
+  "license": "MIT",
+  "author": "Bendyline",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bendyline/docblocks.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/bendyline/docblocks",
+  "keywords": [
+    "docblocks",
+    "react",
+    "markdown",
+    "file-explorer",
+    "editor"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles": "./src/styles/docblocks.css"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@bendyline/docblocks": "0.1.0",
+    "@bendyline/squisq": "1.2.1",
+    "@bendyline/squisq-editor-react": "1.2.1",
+    "@bendyline/squisq-formats": "1.2.1",
+    "@bendyline/squisq-react": "1.1.1",
+    "@bendyline/squisq-video": "1.0.3",
+    "@bendyline/squisq-video-react": "1.0.3",
+    "monaco-editor": "0.55.1"
+  },
+  "devDependencies": {
+    "@types/react": "18.3.28",
+    "@types/react-dom": "18.3.7",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3"
+  }
+}

package/src/AppMenu/AppMenu.tsx

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

package/src/AppMenu/index.ts

@@ -0,0 +1,2 @@
+export { AppMenu } from './AppMenu.js';
+export type { AppMenuProps } from './AppMenu.js';