docblocks-react-ui 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,101 @@
 {
   "name": "docblocks-react-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "React rendering + editing layer for docblocks: hooks, block renderers, caret/selection, keyboard, clipboard.",
+  "type": "module",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "!dist/.tmp",
+    "theme.css",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "dist/pdf/index.mjs"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./mermaid": {
+      "types": "./dist/mermaid/index.d.mts",
+      "import": "./dist/mermaid/index.mjs"
+    },
+    "./pdf": {
+      "types": "./dist/pdf/index.d.mts",
+      "import": "./dist/pdf/index.mjs"
+    },
+    "./motion": {
+      "types": "./dist/motion/index.d.mts",
+      "import": "./dist/motion/index.mjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./theme.css": "./theme.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "docblocks-core": "*",
+    "framer-motion": "^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
+    "mermaid": "^12.0.0",
+    "pdfjs-dist": "^6.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "framer-motion": {
+      "optional": true
+    },
+    "mermaid": {
+      "optional": true
+    },
+    "pdfjs-dist": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-tabs": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
+    "highlight.js": "^11.12.0",
+    "react-day-picker": "^10.0.2",
+    "tailwind-merge": "^3.7.0",
+    "zustand": "^5.0.15"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.3.3",
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^26.6.4",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "docblocks-core": "*",
+    "framer-motion": "^14.1.0",
+    "jsdom": "^30.1.2",
+    "mermaid": "12.2.0",
+    "pdfjs-dist": "6.4.299",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0"
+  },
+  "scripts": {
+    "build": "tsdown && tailwindcss -i ui.entry.css -o dist/.tmp/ui-layer.css && node scripts/assemble-styles.mjs && node scripts/copy-pdf-worker.mjs",
+    "prepack": "npm run build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "engines": {
+    "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+  }
+}

package/theme.css

@@ -0,0 +1,128 @@
+/*
+ * Standard (shadcn) theme token seed — plain CSS, no build-tool syntax.
+ *
+ * The editor (styles.css) reads these tokens as optional inputs: when they
+ * are defined, the editor follows the theme (the dark set flips under the
+ * `dark` class on <html> or any ancestor); when they are not, the shipped
+ * literals in styles.css stand. This file also feeds the shipped
+ * stylesheet (dist/styles.css: the assemble script appends it after the
+ * utility layer), so the standard tokens ship with the default import.
+ * Import it standalone for the pure seed (without the utility layer), or
+ * skip it and define the same tokens in your own theme (a Tailwind v4 app
+ * typically carries them in its `@theme`/global stylesheet, in which case
+ * this file is not needed).
+ *
+ * The tokens the editor reads: --foreground, --primary,
+ * --primary-foreground, --muted, --muted-foreground, --accent,
+ * --destructive, --border, --card, --popover, --radius, --font-sans,
+ * --font-mono. The remaining standard tokens are shipped so a consumer
+ * without a theme has the full set.
+ * The `--radius-*` scale (the radius steps around `--radius`) stands real
+ * CSS variables: the shared primitives (the Calendar's cell radius) read
+ * them with `var(--radius-…)`. The `--docblocks-palette-*` set (the color
+ * palette's pastel tokens) stands here too — on `:root` / `.dark`, not the
+ * editor root, so it cascades to the portaled palette popovers (the toolbar
+ * palettes portal to `document.body`, outside the editor root).
+ */
+
+:root {
+  --radius: 0.625rem;
+  --radius-xs: calc(var(--radius) - 6px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  /* The color palette's pastel tokens (the shared palette primitive's
+     default swatches): the light set stands over the dark set (the `.dark`
+     values' same OKLCH hues, raised lightness + raised chroma — a bit
+     more saturated, not just lighter), so the swatch stands visibly more
+     saturated on the light theme and more muted on the dark. The eighth
+     swatch is the theme's own background token (`--background`), not part
+     of this set. */
+  --docblocks-palette-red: #ff8e8e;
+  --docblocks-palette-orange: #ffbc6c;
+  --docblocks-palette-yellow: #ffe765;
+  --docblocks-palette-green: #7eeea2;
+  --docblocks-palette-cyan: #73dbff;
+  --docblocks-palette-blue: #88b2ff;
+  --docblocks-palette-violet: #c9a1ff;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.922 0 0);
+  --sidebar-primary-foreground: oklch(0.205 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+
+  /* The color palette's pastel tokens, dark set (more muted than the light
+     set — the same hues at lower lightness and lower chroma, still legible
+     over the dark popover). */
+  --docblocks-palette-red: #c96a6a;
+  --docblocks-palette-orange: #cf9155;
+  --docblocks-palette-yellow: #cdb755;
+  --docblocks-palette-green: #63b87e;
+  --docblocks-palette-cyan: #5aa8cd;
+  --docblocks-palette-blue: #6585cd;
+  --docblocks-palette-violet: #9779cd;
+}