@petrarca/sonnet-ui 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@petrarca/sonnet-ui",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "UI primitives, data components, and table schema system for the Petrarca Sonnet component library",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -18,59 +18,76 @@
       "import": "./dist/json-editor/index.js",
       "types": "./dist/json-editor/index.d.ts"
     },
+    "./markdown": {
+      "import": "./dist/markdown/index.js",
+      "types": "./dist/markdown/index.d.ts"
+    },
+    "./code-editor": {
+      "import": "./dist/code-editor/index.js",
+      "types": "./dist/code-editor/index.d.ts"
+    },
     "./styles.css": "./styles.css",
-    "./tailwind-preset": "./tailwind-preset.js"
+    "./tailwind-preset": "./tailwind-preset.js",
+    "./tailwind-content": "./tailwind-content.cjs"
   },
   "files": [
     "dist",
     "styles.css",
-    "tailwind-preset.js"
+    "tailwind-preset.js",
+    "tailwind-content.cjs"
   ],
   "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-select": "^2.3.3",
-    "@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",
+    "@radix-ui/react-avatar": "^1.3.1",
+    "@radix-ui/react-checkbox": "^1.4.1",
+    "@radix-ui/react-collapsible": "^1.2.1",
+    "@radix-ui/react-dialog": "^1.3.1",
+    "@radix-ui/react-dropdown-menu": "^2.2.1",
+    "@radix-ui/react-label": "^2.1.17",
+    "@radix-ui/react-popover": "^1.3.1",
+    "@radix-ui/react-scroll-area": "^1.4.0",
+    "@radix-ui/react-select": "^2.4.1",
+    "@radix-ui/react-separator": "^1.2.0",
+    "@radix-ui/react-slot": "^1.5.0",
+    "@radix-ui/react-tabs": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.4.1",
     "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.14.25",
     "class-variance-authority": "^0.7.1",
     "cmdk": "^1.1.1",
     "lucide-react": "^0.553.0",
-    "radix-ui": "^1.4.3",
+    "radix-ui": "^1.8.1",
     "react-json-tree": "0.20.0",
+    "rehype-slug": "^6.0.0",
     "zustand": "5.0.8",
-    "@petrarca/sonnet-core": "0.7.0"
+    "@petrarca/sonnet-core": "0.9.0"
   },
   "peerDependencies": {
     "@codemirror/lang-json": ">=6",
+    "@codemirror/language": ">=6",
+    "@codemirror/language-data": ">=6",
     "@codemirror/state": ">=6",
     "@codemirror/view": ">=6",
+    "@lezer/highlight": ">=1",
     "@tailwindcss/typography": ">=0.5",
     "@uiw/react-codemirror": ">=4",
+    "mermaid": ">=11",
     "react": ">=19",
     "react-dom": ">=19",
+    "streamdown": ">=2",
     "tailwindcss": ">=3",
     "tailwindcss-animate": ">=1"
   },
   "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "tsup": "^8.4.0",
-    "typescript": "^5.9.2"
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "tsup": "^9.0.0",
+    "typescript": "^5.9.3"
   },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run",
+    "test": "vitest run --config ../../vitest.config.ts",
     "clean": "rm -rf dist *.tsbuildinfo"
   }
 }

package/styles.css

@@ -59,6 +59,29 @@
 
     /* Layout */
     --radius: 0.5rem;
+
+    /* JSON syntax highlighting (sonnet-core formatJsonValue) */
+    --json-key: #2563eb;
+    --json-string: #16a34a;
+    --json-number: #ea580c;
+    --json-boolean: #2563eb;
+    --json-null: #64748b;
+    --json-punctuation: #475569;
+    --json-fallback: #6b7280;
+
+    /* Code syntax highlighting (CodeEditor) */
+    --code-keyword: #7c3aed;
+    --code-string: #16a34a;
+    --code-number: #ea580c;
+    --code-comment: #6b7280;
+    --code-function: #2563eb;
+    --code-type: #0891b2;
+    --code-property: #1d4ed8;
+    --code-operator: #475569;
+    --code-meta: #9333ea;
+    --code-heading: #1e40af;
+    --code-link: #2563eb;
+    --code-invalid: #dc2626;
   }
 
   /* ── Design tokens: dark theme ───────────────────────────────────── */
@@ -102,6 +125,29 @@
 
     /* Focus */
     --ring: 218 65% 58%;
+
+    /* JSON syntax highlighting */
+    --json-key: #60a5fa;
+    --json-string: #4ade80;
+    --json-number: #fb923c;
+    --json-boolean: #60a5fa;
+    --json-null: #94a3b8;
+    --json-punctuation: #94a3b8;
+    --json-fallback: #9ca3af;
+
+    /* Code syntax highlighting */
+    --code-keyword: #c084fc;
+    --code-string: #4ade80;
+    --code-number: #fb923c;
+    --code-comment: #94a3b8;
+    --code-function: #60a5fa;
+    --code-type: #22d3ee;
+    --code-property: #93c5fd;
+    --code-operator: #cbd5e1;
+    --code-meta: #e879f9;
+    --code-heading: #93c5fd;
+    --code-link: #60a5fa;
+    --code-invalid: #f87171;
   }
 }
 

package/tailwind-content.cjs

@@ -0,0 +1,30 @@
+// @petrarca/sonnet-ui -- Tailwind content for the packages sonnet-ui renders
+// with. Tailwind does not merge `content` from a preset, so an app adds these
+// to its own:
+//
+//   module.exports = {
+//     presets: [require("@petrarca/sonnet-ui/tailwind-preset")],
+//     content: [
+//       "./src/**/*.{ts,tsx}",
+//       "./node_modules/@petrarca/sonnet-*/dist/**/*.js",
+//       ...require("@petrarca/sonnet-ui/tailwind-content"),
+//     ],
+//   };
+//
+// Today: Streamdown, which the MarkdownViewer (./markdown) renders with and
+// which styles itself with Tailwind classes. Each package is found from here,
+// wherever the package manager put it; one that is not installed is left out.
+
+const path = require("path");
+
+// A package's built files, found through a file it exports.
+function distOf(pkg, exportedFile) {
+  try {
+    const root = path.dirname(require.resolve(`${pkg}/${exportedFile}`));
+    return path.join(root, "dist", "**", "*.js");
+  } catch {
+    return null;
+  }
+}
+
+module.exports = [distOf("streamdown", "styles.css")].filter(Boolean);