@petrarca/sonnet-ui 0.1.0

package/dist/json-editor/index.d.ts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _codemirror_state from '@codemirror/state';
+import { Extension } from '@codemirror/state';
+
+interface JsonEditorProps {
+    /** The JSON string to display and edit. */
+    value: string;
+    /**
+     * JSON Pointer (RFC 6901) paths whose values are editable.
+     * Everything outside these paths is readonly.
+     * Example: ["/metadata", "/definitions/Patient/description"]
+     */
+    editablePaths: string[];
+    /** Called when the document changes (only editable regions can change). */
+    onChange?: (value: string) => void;
+    /** Editor height. Defaults to "400px". */
+    height?: string;
+    /** Additional CSS class on the wrapper. */
+    className?: string;
+    /**
+     * CodeMirror theme extension. Defaults to a built-in theme that reads
+     * CSS variables (--border, --font-mono, --muted) from the host app.
+     * Pass your own Extension to override styling entirely.
+     */
+    theme?: Extension;
+}
+/**
+ * JsonEditor - A JSON text editor with selectively editable regions.
+ *
+ * Pass JSON Pointer paths to `editablePaths` to mark which parts of
+ * the document the user can modify. Everything else is visible but
+ * locked. Changes outside editable regions are silently rejected.
+ *
+ * The default theme reads CSS variables from @petrarca/sonnet-ui/styles.css
+ * (--border, --font-mono, --muted). Pass a custom `theme` extension to
+ * override styling for consumers that do not use sonnet-ui tokens.
+ */
+declare function JsonEditor({ value, editablePaths, onChange, height, className, theme, }: JsonEditorProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Default CodeMirror theme for JsonEditor.
+ *
+ * Reads CSS variables provided by @petrarca/sonnet-ui/styles.css:
+ *   --border, --font-mono, --muted
+ *
+ * Consumers not using sonnet-ui tokens can pass their own Extension
+ * via the JsonEditor `theme` prop to override this entirely.
+ */
+declare const defaultTheme: _codemirror_state.Extension;
+
+export { JsonEditor, type JsonEditorProps, defaultTheme };

package/dist/json-editor/index.js

@@ -0,0 +1,131 @@
+// src/JsonEditor/JsonEditor.tsx
+import { useCallback, useMemo } from "react";
+import CodeMirror from "@uiw/react-codemirror";
+import { json } from "@codemirror/lang-json";
+import { EditorState, StateField } from "@codemirror/state";
+import { EditorView as EditorView2, Decoration } from "@codemirror/view";
+import { resolvePointerRanges } from "@petrarca/sonnet-core";
+
+// src/JsonEditor/defaultTheme.ts
+import { EditorView } from "@codemirror/view";
+var defaultTheme = EditorView.theme({
+  "&": {
+    fontSize: "13px",
+    border: "1px solid var(--border)",
+    borderRadius: "6px"
+  },
+  ".cm-content": {
+    fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)"
+  },
+  ".cm-readonly-region": {
+    backgroundColor: "rgb(219 234 254 / 0.5)",
+    opacity: "0.7"
+  },
+  ".cm-gutters": {
+    backgroundColor: "hsl(var(--muted) / 0.3)",
+    border: "none"
+  },
+  ".cm-activeLine": {
+    backgroundColor: "transparent"
+  },
+  ".cm-activeLineGutter": {
+    backgroundColor: "transparent"
+  }
+});
+
+// src/JsonEditor/JsonEditor.tsx
+import { jsx } from "react/jsx-runtime";
+var readonlyMark = Decoration.mark({ class: "cm-readonly-region" });
+function computeReadonlyRanges(editableRanges, docLength) {
+  const ranges = [];
+  let cursor = 0;
+  for (const range of editableRanges) {
+    if (cursor < range.from) {
+      ranges.push({ from: cursor, to: range.from });
+    }
+    cursor = range.to;
+  }
+  if (cursor < docLength) {
+    ranges.push({ from: cursor, to: docLength });
+  }
+  return ranges;
+}
+function buildEditableExtensions(editablePaths) {
+  const changeFilter = EditorState.changeFilter.of((tr) => {
+    const currentDoc = tr.startState.doc.toString();
+    const editableRanges = resolvePointerRanges(currentDoc, editablePaths);
+    const readonlyRanges = computeReadonlyRanges(
+      editableRanges,
+      tr.startState.doc.length
+    );
+    if (readonlyRanges.length === 0) return true;
+    return readonlyRanges.flatMap((r) => [r.from, r.to]);
+  });
+  const readonlyDecorations = StateField.define({
+    create(state) {
+      const editableRanges = resolvePointerRanges(
+        state.doc.toString(),
+        editablePaths
+      );
+      const ranges = computeReadonlyRanges(editableRanges, state.doc.length);
+      return Decoration.set(
+        ranges.map((r) => readonlyMark.range(r.from, r.to))
+      );
+    },
+    update(deco, tr) {
+      if (!tr.docChanged) return deco;
+      const editableRanges = resolvePointerRanges(
+        tr.state.doc.toString(),
+        editablePaths
+      );
+      const ranges = computeReadonlyRanges(editableRanges, tr.state.doc.length);
+      return Decoration.set(
+        ranges.map((r) => readonlyMark.range(r.from, r.to))
+      );
+    },
+    provide: (field) => EditorView2.decorations.from(field)
+  });
+  return [changeFilter, readonlyDecorations];
+}
+function JsonEditor({
+  value,
+  editablePaths,
+  onChange,
+  height = "400px",
+  className,
+  theme = defaultTheme
+}) {
+  const joinedPaths = editablePaths.join(",");
+  const extensions = useMemo(
+    () => [json(), theme, ...buildEditableExtensions(editablePaths)],
+    [joinedPaths, theme]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const handleChange = useCallback(
+    (val) => {
+      onChange?.(val);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+    CodeMirror,
+    {
+      value,
+      height,
+      extensions,
+      onChange: handleChange,
+      basicSetup: {
+        lineNumbers: true,
+        foldGutter: true,
+        bracketMatching: true,
+        closeBrackets: true,
+        indentOnInput: true
+      }
+    }
+  ) });
+}
+export {
+  JsonEditor,
+  defaultTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/json-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/JsonEditor/JsonEditor.tsx","../../src/JsonEditor/defaultTheme.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport CodeMirror from \"@uiw/react-codemirror\";\nimport { json } from \"@codemirror/lang-json\";\nimport { EditorState, StateField, type Extension } from \"@codemirror/state\";\nimport { EditorView, Decoration, type DecorationSet } from \"@codemirror/view\";\nimport { resolvePointerRanges, type OffsetRange } from \"@petrarca/sonnet-core\";\nimport { defaultTheme } from \"./defaultTheme\";\n\nexport interface JsonEditorProps {\n  /** The JSON string to display and edit. */\n  value: string;\n  /**\n   * JSON Pointer (RFC 6901) paths whose values are editable.\n   * Everything outside these paths is readonly.\n   * Example: [\"/metadata\", \"/definitions/Patient/description\"]\n   */\n  editablePaths: string[];\n  /** Called when the document changes (only editable regions can change). */\n  onChange?: (value: string) => void;\n  /** Editor height. Defaults to \"400px\". */\n  height?: string;\n  /** Additional CSS class on the wrapper. */\n  className?: string;\n  /**\n   * CodeMirror theme extension. Defaults to a built-in theme that reads\n   * CSS variables (--border, --font-mono, --muted) from the host app.\n   * Pass your own Extension to override styling entirely.\n   */\n  theme?: Extension;\n}\n\n// Decoration mark for readonly regions (subtle blue background)\nconst readonlyMark = Decoration.mark({ class: \"cm-readonly-region\" });\n\n/**\n * Compute readonly ranges from editable ranges (inversion against doc length).\n * Used by both the changeFilter and the decoration builder.\n */\nfunction computeReadonlyRanges(\n  editableRanges: OffsetRange[],\n  docLength: number,\n): { from: number; to: number }[] {\n  const ranges: { from: number; to: number }[] = [];\n  let cursor = 0;\n  for (const range of editableRanges) {\n    if (cursor < range.from) {\n      ranges.push({ from: cursor, to: range.from });\n    }\n    cursor = range.to;\n  }\n  if (cursor < docLength) {\n    ranges.push({ from: cursor, to: docLength });\n  }\n  return ranges;\n}\n\n/**\n * Build CodeMirror extensions that enforce editable regions:\n * - changeFilter: suppresses changes outside editable ranges\n * - StateField: decorates readonly regions with a visual style\n */\nfunction buildEditableExtensions(editablePaths: string[]) {\n  // changeFilter: recompute editable ranges from the live document on every\n  // transaction so offsets remain accurate as the user types. Using a snapshot\n  // from mount time would cause ranges to drift and incorrectly block edits.\n  const changeFilter = EditorState.changeFilter.of((tr) => {\n    const currentDoc = tr.startState.doc.toString();\n    const editableRanges = resolvePointerRanges(currentDoc, editablePaths);\n    const readonlyRanges = computeReadonlyRanges(\n      editableRanges,\n      tr.startState.doc.length,\n    );\n    // Empty readonly list means the whole document is editable -- return true\n    // to allow all changes. An empty array would block everything.\n    if (readonlyRanges.length === 0) return true;\n    return readonlyRanges.flatMap((r) => [r.from, r.to]);\n  });\n\n  // Decorations: mark readonly regions with a subtle background.\n  // Recomputed from the live document on every change so highlights stay\n  // accurate as content shifts.\n  const readonlyDecorations = StateField.define<DecorationSet>({\n    create(state) {\n      const editableRanges = resolvePointerRanges(\n        state.doc.toString(),\n        editablePaths,\n      );\n      const ranges = computeReadonlyRanges(editableRanges, state.doc.length);\n      return Decoration.set(\n        ranges.map((r) => readonlyMark.range(r.from, r.to)),\n      );\n    },\n    update(deco, tr) {\n      if (!tr.docChanged) return deco;\n      const editableRanges = resolvePointerRanges(\n        tr.state.doc.toString(),\n        editablePaths,\n      );\n      const ranges = computeReadonlyRanges(editableRanges, tr.state.doc.length);\n      return Decoration.set(\n        ranges.map((r) => readonlyMark.range(r.from, r.to)),\n      );\n    },\n    provide: (field) => EditorView.decorations.from(field),\n  });\n\n  return [changeFilter, readonlyDecorations];\n}\n\n/**\n * JsonEditor - A JSON text editor with selectively editable regions.\n *\n * Pass JSON Pointer paths to `editablePaths` to mark which parts of\n * the document the user can modify. Everything else is visible but\n * locked. Changes outside editable regions are silently rejected.\n *\n * The default theme reads CSS variables from @petrarca/sonnet-ui/styles.css\n * (--border, --font-mono, --muted). Pass a custom `theme` extension to\n * override styling for consumers that do not use sonnet-ui tokens.\n */\nexport default function JsonEditor({\n  value,\n  editablePaths,\n  onChange,\n  height = \"400px\",\n  className,\n  theme = defaultTheme,\n}: JsonEditorProps) {\n  // Ranges are structural: recompute only when the set of editable paths\n  // or the theme changes, not on every keystroke. When paths change, use the\n  // current value so ranges are computed against what is actually in the editor.\n  const joinedPaths = editablePaths.join(\",\");\n\n  const extensions = useMemo(\n    () => [json(), theme, ...buildEditableExtensions(editablePaths)],\n    [joinedPaths, theme], // eslint-disable-line react-hooks/exhaustive-deps\n  );\n\n  const handleChange = useCallback(\n    (val: string) => {\n      onChange?.(val);\n    },\n    [onChange],\n  );\n\n  return (\n    <div className={className}>\n      <CodeMirror\n        value={value}\n        height={height}\n        extensions={extensions}\n        onChange={handleChange}\n        basicSetup={{\n          lineNumbers: true,\n          foldGutter: true,\n          bracketMatching: true,\n          closeBrackets: true,\n          indentOnInput: true,\n        }}\n      />\n    </div>\n  );\n}\n","import { EditorView } from \"@codemirror/view\";\n\n/**\n * Default CodeMirror theme for JsonEditor.\n *\n * Reads CSS variables provided by @petrarca/sonnet-ui/styles.css:\n *   --border, --font-mono, --muted\n *\n * Consumers not using sonnet-ui tokens can pass their own Extension\n * via the JsonEditor `theme` prop to override this entirely.\n */\nexport const defaultTheme = EditorView.theme({\n  \"&\": {\n    fontSize: \"13px\",\n    border: \"1px solid var(--border)\",\n    borderRadius: \"6px\",\n  },\n  \".cm-content\": {\n    fontFamily: \"var(--font-mono, 'JetBrains Mono', monospace)\",\n  },\n  \".cm-readonly-region\": {\n    backgroundColor: \"rgb(219 234 254 / 0.5)\",\n    opacity: \"0.7\",\n  },\n  \".cm-gutters\": {\n    backgroundColor: \"hsl(var(--muted) / 0.3)\",\n    border: \"none\",\n  },\n  \".cm-activeLine\": {\n    backgroundColor: \"transparent\",\n  },\n  \".cm-activeLineGutter\": {\n    backgroundColor: \"transparent\",\n  },\n});\n"],"mappings":"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","names":["EditorView","EditorView"]}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@petrarca/sonnet-ui",
+  "version": "0.1.0",
+  "description": "UI primitives, data components, and table schema system for the Petrarca Sonnet component library",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./json-editor": {
+      "import": "./dist/json-editor/index.js",
+      "types": "./dist/json-editor/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-table": "^8.21.3",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.14",
+    "@uiw/react-codemirror": "^4.25.4",
+    "class-variance-authority": "^0.7.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^0.553.0",
+    "radix-ui": "^1.4.3",
+    "react-json-tree": "0.20.0",
+    "zustand": "5.0.8",
+    "@petrarca/sonnet-core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.9.2"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  }
+}