papyr-react 1.0.0

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export type { WebReadyNote, NoteGraph, SearchResult, FolderNode, Slug, GraphOptions, IndexOptions, SearchOptions } from 'papyr-core/runtime';

package/dist/utils/graphUtils.d.ts

@@ -0,0 +1,18 @@
+import { NoteGraph } from 'papyr-core/runtime';
+
+export interface ForceGraphNode {
+    id: string;
+    label: string;
+    group?: string;
+    value?: number;
+}
+export interface ForceGraphLink {
+    source: string;
+    target: string;
+    value?: number;
+}
+export interface ForceGraphData {
+    nodes: ForceGraphNode[];
+    links: ForceGraphLink[];
+}
+export declare function toForceGraphData(graph: NoteGraph | null): ForceGraphData;

package/dist/utils/hydration.d.ts

@@ -0,0 +1,8 @@
+import { SearchIndex, SerializedSearchIndex } from 'papyr-core/runtime';
+
+/**
+ * Ensure a search index is ready for runtime usage.
+ * Accepts either the hydrated SearchIndex returned by papyr-core or the
+ * serialized JSON emitted during the build, and always returns a usable index.
+ */
+export declare function hydrateSearchIndex(value: SearchIndex | SerializedSearchIndex): SearchIndex;

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './graphUtils';
+export * from './linkUtils';
+export * from './hydration';

package/dist/utils/linkUtils.d.ts

@@ -0,0 +1,10 @@
+import { WebReadyNote } from 'papyr-core/runtime';
+
+export declare function buildWikiLink(slug: string): string;
+export declare function findNoteBySlug(notes: WebReadyNote[], slug: string): WebReadyNote | undefined;
+export interface ParsedHashInfo {
+    slug: string | null;
+    anchor: string | null;
+}
+export declare function parseNoteHash(hash: string): ParsedHashInfo;
+export declare function updateHashWithAnchor(anchor: string): void;

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "papyr-react",
+  "version": "1.0.0",
+  "description": "React components, hooks, and utilities for building Papyr knowledge experiences",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./style.css",
+    "./styles/theme.css": "./src/styles/theme.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "style.css",
+    "src/styles"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest --run",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest --coverage --run",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "pnpm run clean && pnpm run build"
+  },
+  "keywords": [
+    "papyr",
+    "react",
+    "knowledge-base",
+    "markdown",
+    "graph",
+    "wiki-links"
+  ],
+  "author": "Ray Kong",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ray-kong/papyr-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Ray-kong/papyr-react/issues"
+  },
+  "homepage": "https://github.com/Ray-kong/papyr-react#readme",
+  "peerDependencies": {
+    "papyr-core": "^1.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.27.16",
+    "clsx": "^2.1.1",
+    "d3-drag": "^3.0.0",
+    "d3-force": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0"
+  },
+  "optionalDependencies": {
+    "react-force-graph-2d": "^1.29.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^15.0.0",
+    "@types/d3-drag": "^3.0.7",
+    "@types/d3-force": "^3.0.10",
+    "@types/d3-selection": "^3.0.11",
+    "@types/d3-zoom": "^3.0.8",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "jsdom": "^27.0.1",
+    "papyr-core": "^1.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0",
+    "vitest": "^1.6.1"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "packageManager": "pnpm@10.13.1"
+}

package/src/styles/index.ts

@@ -0,0 +1,2 @@
+// Re-export styles for programmatic access if needed
+// Main usage: import 'papyr-react/styles/theme.css'

package/src/styles/theme.css

@@ -0,0 +1,184 @@
+/**
+ * Papyr Default Theme
+ *
+ * Import this file once in your app to get all styling working out of the box:
+ *
+ * import 'papyr-react/styles/theme.css'
+ *
+ * This provides:
+ * - Dark theme by default
+ * - Light theme via [data-theme="light"] or @media (prefers-color-scheme: light)
+ * - All required CSS variables
+ * - Base resets for full-height layout
+ */
+
+/* Base resets for full-height app */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+/* Dark theme (default) */
+:root {
+  /* Core colors */
+  --papyr-foreground: #e0e0e0;
+  --papyr-background: #1e1e1e;
+  --papyr-muted-foreground: rgba(255, 255, 255, 0.6);
+  --papyr-border: rgba(255, 255, 255, 0.1);
+
+  /* Surfaces */
+  --papyr-surface: #252525;
+  --papyr-surface-muted: rgba(255, 255, 255, 0.04);
+  --papyr-surface-hover: rgba(255, 255, 255, 0.08);
+  --papyr-sidebar-background: #1a1a1a;
+  --papyr-surface-sidebar: #1a1a1a;
+
+  /* Input styling */
+  --papyr-input-bg: rgba(255, 255, 255, 0.06);
+  --papyr-input-bg-focus: rgba(255, 255, 255, 0.1);
+  --papyr-border-focus: rgba(99, 102, 241, 0.5);
+  --papyr-focus-ring: rgba(99, 102, 241, 0.3);
+
+  /* Primary/accent colors */
+  --papyr-primary: #6366f1;
+  --papyr-primary-soft: rgba(99, 102, 241, 0.15);
+  --papyr-link: #818cf8;
+
+  /* Tags */
+  --papyr-tag-background: rgba(99, 102, 241, 0.2);
+  --papyr-tag-foreground: #a5b4fc;
+
+  /* Interactive states */
+  --papyr-hover: rgba(255, 255, 255, 0.08);
+  --papyr-active: rgba(99, 102, 241, 0.25);
+  --papyr-active-foreground: #ffffff;
+  --papyr-active-foreground-muted: rgba(255, 255, 255, 0.7);
+  --papyr-active-item: #6366f1;
+  --papyr-active-item-hover: #818cf8;
+  --papyr-active-background: rgba(99, 102, 241, 0.15);
+
+  /* Toast */
+  --papyr-toast-background: rgba(28, 36, 52, 0.95);
+  --papyr-toast-foreground: #f9fafb;
+
+  /* Code blocks */
+  --papyr-code-surface: linear-gradient(135deg, #1e293b, #0f172a);
+  --papyr-code-foreground: #e2e8f0;
+  --papyr-code-header: rgba(15, 23, 42, 0.8);
+  --papyr-code-label: rgba(148, 163, 184, 0.9);
+
+  /* Counts/badges */
+  --papyr-count-foreground: #a5b4fc;
+  --papyr-count-background: rgba(99, 102, 241, 0.2);
+
+  /* Typography */
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  color: var(--papyr-foreground);
+  background: var(--papyr-background);
+}
+
+/* Light theme - activated by data attribute or system preference */
+[data-theme="light"],
+:root:has([data-theme="light"]) {
+  /* Core colors */
+  --papyr-foreground: #1f2937;
+  --papyr-background: #ffffff;
+  --papyr-muted-foreground: #6b7280;
+  --papyr-border: rgba(0, 0, 0, 0.1);
+
+  /* Surfaces */
+  --papyr-surface: #ffffff;
+  --papyr-surface-muted: rgba(0, 0, 0, 0.04);
+  --papyr-surface-hover: rgba(0, 0, 0, 0.06);
+  --papyr-sidebar-background: #f8fafc;
+  --papyr-surface-sidebar: #f8fafc;
+
+  /* Input styling */
+  --papyr-input-bg: #ffffff;
+  --papyr-input-bg-focus: #ffffff;
+  --papyr-border-focus: rgba(99, 102, 241, 0.5);
+  --papyr-focus-ring: rgba(99, 102, 241, 0.2);
+
+  /* Primary/accent colors */
+  --papyr-primary: #6366f1;
+  --papyr-primary-soft: rgba(99, 102, 241, 0.12);
+  --papyr-link: #4f46e5;
+
+  /* Tags */
+  --papyr-tag-background: rgba(99, 102, 241, 0.1);
+  --papyr-tag-foreground: #4f46e5;
+
+  /* Interactive states */
+  --papyr-hover: #374151;
+  --papyr-active: #1f2937;
+  --papyr-active-item: #6366f1;
+  --papyr-active-item-hover: #4f46e5;
+  --papyr-active-background: rgba(99, 102, 241, 0.1);
+
+  /* Toast */
+  --papyr-toast-background: rgba(31, 41, 55, 0.95);
+  --papyr-toast-foreground: #f9fafb;
+
+  /* Code blocks - keep dark for contrast */
+  --papyr-code-surface: linear-gradient(135deg, #1e293b, #0f172a);
+  --papyr-code-foreground: #e2e8f0;
+  --papyr-code-header: rgba(15, 23, 42, 0.8);
+  --papyr-code-label: rgba(148, 163, 184, 0.9);
+
+  /* Counts/badges */
+  --papyr-count-foreground: #4f46e5;
+  --papyr-count-background: rgba(99, 102, 241, 0.1);
+}
+
+/* System preference based light theme */
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) {
+    /* Core colors */
+    --papyr-foreground: #1f2937;
+    --papyr-background: #ffffff;
+    --papyr-muted-foreground: #6b7280;
+    --papyr-border: rgba(0, 0, 0, 0.1);
+
+    /* Surfaces */
+    --papyr-surface: #ffffff;
+    --papyr-surface-muted: rgba(0, 0, 0, 0.04);
+    --papyr-surface-hover: rgba(0, 0, 0, 0.06);
+    --papyr-sidebar-background: #f8fafc;
+    --papyr-surface-sidebar: #f8fafc;
+
+    /* Input styling */
+    --papyr-input-bg: #ffffff;
+    --papyr-input-bg-focus: #ffffff;
+    --papyr-border-focus: rgba(99, 102, 241, 0.5);
+    --papyr-focus-ring: rgba(99, 102, 241, 0.2);
+
+    /* Primary/accent colors */
+    --papyr-primary: #6366f1;
+    --papyr-primary-soft: rgba(99, 102, 241, 0.12);
+    --papyr-link: #4f46e5;
+
+    /* Tags */
+    --papyr-tag-background: rgba(99, 102, 241, 0.1);
+    --papyr-tag-foreground: #4f46e5;
+
+    /* Interactive states */
+    --papyr-hover: #374151;
+    --papyr-active: #1f2937;
+    --papyr-active-item: #6366f1;
+    --papyr-active-item-hover: #4f46e5;
+    --papyr-active-background: rgba(99, 102, 241, 0.1);
+
+    /* Toast */
+    --papyr-toast-background: rgba(31, 41, 55, 0.95);
+    --papyr-toast-foreground: #f9fafb;
+
+    /* Counts/badges */
+    --papyr-count-foreground: #4f46e5;
+    --papyr-count-background: rgba(99, 102, 241, 0.1);
+  }
+}

package/style.css

@@ -0,0 +1 @@
+@import './dist/style.css';