@agent-native/toolkit 0.4.10 → 0.5.0

package/dist/editor.css

@@ -0,0 +1,510 @@
+.an-rich-md-wrapper {
+  min-height: 100%;
+  position: relative;
+  cursor: text;
+}
+
+.an-rich-md-wrapper--readonly {
+  cursor: default;
+}
+
+.an-rich-md-loading {
+  min-height: 7rem;
+}
+
+.an-rich-md-prose {
+  outline: none;
+  color: hsl(var(--foreground));
+  line-height: 1.65;
+  font-size: 0.95rem;
+  min-height: 1.65em;
+  text-align: start;
+}
+
+.an-rich-md-prose > *:first-child {
+  margin-top: 0;
+}
+
+.an-rich-md-prose h1 {
+  font-size: 1.85em;
+  font-weight: 700;
+  margin: 1em 0 0.3em;
+  line-height: 1.18;
+}
+
+.an-rich-md-prose h2 {
+  font-size: 1.45em;
+  font-weight: 650;
+  margin: 0.9em 0 0.25em;
+  line-height: 1.25;
+}
+
+.an-rich-md-prose h3 {
+  font-size: 1.18em;
+  font-weight: 650;
+  margin: 0.75em 0 0.2em;
+  line-height: 1.32;
+}
+
+.an-rich-md-prose h4 {
+  font-size: 1em;
+  font-weight: 650;
+  margin: 0.65em 0 0.15em;
+  line-height: 1.35;
+}
+
+.an-rich-md-prose p {
+  margin: 0.45em 0;
+  min-height: 1.65em;
+}
+
+.an-rich-md-prose ul:not(.an-rich-md-task-list),
+.an-rich-md-prose ol {
+  padding-inline-start: 1.45em;
+  margin: 0.35em 0;
+}
+
+.an-rich-md-prose ul:not(.an-rich-md-task-list) {
+  list-style-type: disc;
+}
+
+.an-rich-md-prose ol {
+  list-style-type: decimal;
+}
+
+.an-rich-md-prose li {
+  margin: 0.12em 0;
+}
+
+.an-rich-md-prose li p {
+  margin: 0;
+}
+
+.an-rich-md-task-list {
+  list-style: none;
+  margin: 0.35em 0;
+  padding-inline-start: 0;
+}
+
+.an-rich-md-task-list li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.45em;
+  margin: 0.18em 0;
+}
+
+.an-rich-md-task-list li label {
+  display: inline-flex;
+  align-items: center;
+  height: 1.65em;
+}
+
+.an-rich-md-task-list li input[type="checkbox"] {
+  width: 0.95em;
+  height: 0.95em;
+  accent-color: hsl(var(--primary));
+}
+
+.an-rich-md-task-list li > div {
+  flex: 1;
+}
+
+.an-rich-md-prose blockquote {
+  border-inline-start: 2px solid hsl(var(--border));
+  padding-inline-start: 0.9em;
+  margin: 0.45em 0;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-rich-md-prose code {
+  unicode-bidi: isolate;
+  font-family:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.88em;
+  background: hsl(var(--muted));
+  padding: 0.12em 0.32em;
+  border-radius: 4px;
+}
+
+.an-rich-md-prose :not(pre) > code {
+  direction: ltr;
+}
+
+.an-rich-md-prose pre {
+  font-family:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.86em;
+  /* Theme-aware code surface: follows the app's muted/foreground/border tokens
+     so block code respects light and dark mode (the token palette below is
+     tuned to read on a muted surface in both). */
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+  border: 1px solid hsl(var(--border));
+  border-radius: 6px;
+  padding: 0.8em 1em;
+  margin: 0.55em 0;
+  overflow-x: auto;
+  line-height: 1.5;
+}
+
+.an-rich-md-prose pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
+/* highlight.js (lowlight) token palette. Scoped to block code so inline `code`
+   keeps its own background. No highlight.js base theme is imported; these rules
+   are the entire theme, tuned (mid-lightness HSL) to read on the muted surface
+   above in both light and dark mode. */
+.an-rich-md-prose pre code .hljs-comment,
+.an-rich-md-prose pre code .hljs-quote {
+  color: hsl(var(--muted-foreground));
+  font-style: italic;
+}
+.an-rich-md-prose pre code .hljs-keyword,
+.an-rich-md-prose pre code .hljs-selector-tag,
+.an-rich-md-prose pre code .hljs-literal,
+.an-rich-md-prose pre code .hljs-doctag {
+  color: hsl(280 60% 58%);
+}
+.an-rich-md-prose pre code .hljs-string,
+.an-rich-md-prose pre code .hljs-regexp,
+.an-rich-md-prose pre code .hljs-addition {
+  color: hsl(140 52% 40%);
+}
+.an-rich-md-prose pre code .hljs-number,
+.an-rich-md-prose pre code .hljs-symbol,
+.an-rich-md-prose pre code .hljs-literal {
+  color: hsl(28 78% 48%);
+}
+.an-rich-md-prose pre code .hljs-meta {
+  color: hsl(var(--muted-foreground));
+}
+.an-rich-md-prose pre code .hljs-title,
+.an-rich-md-prose pre code .hljs-title.function_,
+.an-rich-md-prose pre code .hljs-section {
+  color: hsl(210 72% 52%);
+}
+.an-rich-md-prose pre code .hljs-built_in,
+.an-rich-md-prose pre code .hljs-type,
+.an-rich-md-prose pre code .hljs-title.class_,
+.an-rich-md-prose pre code .hljs-variable.language_ {
+  color: hsl(190 64% 40%);
+}
+.an-rich-md-prose pre code .hljs-attr,
+.an-rich-md-prose pre code .hljs-attribute,
+.an-rich-md-prose pre code .hljs-property,
+.an-rich-md-prose pre code .hljs-params {
+  color: hsl(35 68% 46%);
+}
+.an-rich-md-prose pre code .hljs-name,
+.an-rich-md-prose pre code .hljs-tag,
+.an-rich-md-prose pre code .hljs-selector-id,
+.an-rich-md-prose pre code .hljs-selector-class {
+  color: hsl(350 62% 52%);
+}
+.an-rich-md-prose pre code .hljs-deletion {
+  color: hsl(0 62% 52%);
+}
+.an-rich-md-prose pre code .hljs-emphasis {
+  font-style: italic;
+}
+.an-rich-md-prose pre code .hljs-strong {
+  font-weight: 600;
+}
+
+/* In dark mode, lift the token lightness for contrast on the dark muted surface. */
+.dark .an-rich-md-prose pre code .hljs-keyword,
+.dark .an-rich-md-prose pre code .hljs-selector-tag,
+.dark .an-rich-md-prose pre code .hljs-literal,
+.dark .an-rich-md-prose pre code .hljs-doctag {
+  color: hsl(280 72% 72%);
+}
+.dark .an-rich-md-prose pre code .hljs-string,
+.dark .an-rich-md-prose pre code .hljs-regexp,
+.dark .an-rich-md-prose pre code .hljs-addition {
+  color: hsl(140 48% 62%);
+}
+.dark .an-rich-md-prose pre code .hljs-number,
+.dark .an-rich-md-prose pre code .hljs-symbol,
+.dark .an-rich-md-prose pre code .hljs-literal {
+  color: hsl(30 85% 65%);
+}
+.dark .an-rich-md-prose pre code .hljs-title,
+.dark .an-rich-md-prose pre code .hljs-title.function_,
+.dark .an-rich-md-prose pre code .hljs-section {
+  color: hsl(210 80% 70%);
+}
+.dark .an-rich-md-prose pre code .hljs-built_in,
+.dark .an-rich-md-prose pre code .hljs-type,
+.dark .an-rich-md-prose pre code .hljs-title.class_,
+.dark .an-rich-md-prose pre code .hljs-variable.language_ {
+  color: hsl(190 70% 62%);
+}
+.dark .an-rich-md-prose pre code .hljs-attr,
+.dark .an-rich-md-prose pre code .hljs-attribute,
+.dark .an-rich-md-prose pre code .hljs-property,
+.dark .an-rich-md-prose pre code .hljs-params {
+  color: hsl(40 78% 66%);
+}
+.dark .an-rich-md-prose pre code .hljs-name,
+.dark .an-rich-md-prose pre code .hljs-tag,
+.dark .an-rich-md-prose pre code .hljs-selector-id,
+.dark .an-rich-md-prose pre code .hljs-selector-class {
+  color: hsl(350 72% 68%);
+}
+
+.an-rich-md-prose hr {
+  border: none;
+  border-top: 1px solid hsl(var(--border));
+  margin: 1.1em 0;
+}
+
+.an-rich-md-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.7em 0;
+  table-layout: fixed;
+}
+
+.an-rich-md-table td,
+.an-rich-md-table th {
+  border: 1px solid hsl(var(--border));
+  padding: 0.45em 0.55em;
+  vertical-align: top;
+}
+
+.an-rich-md-table th {
+  background: hsl(var(--muted) / 0.6);
+  font-weight: 650;
+}
+
+.an-rich-md-table p {
+  margin: 0;
+}
+
+.an-rich-md-prose strong {
+  font-weight: 650;
+}
+
+.an-rich-md-prose em {
+  font-style: italic;
+}
+
+.an-rich-md-prose s {
+  text-decoration: line-through;
+}
+
+.an-rich-md-link {
+  color: hsl(var(--foreground));
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: hsl(var(--muted-foreground));
+  cursor: pointer;
+}
+
+.an-rich-md-link:hover {
+  text-decoration-color: hsl(var(--foreground));
+}
+
+.an-rich-md-prose p.is-editor-empty:first-child::before,
+.an-rich-md-prose p.is-empty::before,
+.an-rich-md-prose h1.is-empty::before,
+.an-rich-md-prose h2.is-empty::before,
+.an-rich-md-prose h3.is-empty::before,
+.an-rich-md-prose h4.is-empty::before {
+  content: attr(data-placeholder);
+  float: inline-start;
+  color: hsl(var(--muted-foreground));
+  opacity: 0.55;
+  pointer-events: none;
+  height: 0;
+}
+
+.an-rich-md-prose ::selection {
+  background: hsl(var(--ring) / 0.22);
+}
+
+.an-rich-md-bubble-toolbar {
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  padding: 3px;
+  box-shadow:
+    0 4px 16px rgb(0 0 0 / 0.25),
+    0 0 0 1px hsl(var(--border));
+}
+
+.an-rich-md-bubble-items,
+.an-rich-md-link-editor {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.an-rich-md-bubble-button {
+  padding: 3px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: hsl(var(--popover-foreground) / 0.76);
+  background: none;
+  border: none;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.an-rich-md-bubble-button:hover {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.an-rich-md-bubble-button--active {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.an-rich-md-bubble-divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 2px;
+  background: hsl(var(--border));
+}
+
+.an-rich-md-link-editor {
+  padding: 4px;
+}
+
+.an-rich-md-link-editor input {
+  width: 10rem;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: hsl(var(--popover-foreground));
+  font-size: 12px;
+  padding: 2px 4px;
+}
+
+.an-rich-md-link-editor button {
+  border: none;
+  background: none;
+  color: hsl(var(--primary));
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 6px;
+}
+
+.an-rich-md-slash-menu {
+  z-index: 9999;
+  width: min(420px, calc(100vw - 24px));
+  min-width: 230px;
+  max-height: 320px;
+  overflow-y: auto;
+  color: hsl(var(--foreground));
+  background: hsl(var(--popover));
+  border: 1px solid hsl(var(--border));
+  border-radius: 7px;
+  box-shadow:
+    0 4px 20px rgb(0 0 0 / 0.12),
+    0 0 0 1px rgb(0 0 0 / 0.04);
+  padding: 4px 0;
+}
+
+.an-rich-md-slash-heading {
+  padding: 4px 10px;
+  font-size: 10px;
+  font-weight: 650;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-rich-md-slash-item {
+  width: 100%;
+  min-width: 0;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  text-align: start;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: hsl(var(--foreground));
+  font-size: 13px;
+}
+
+.an-rich-md-slash-item:hover,
+.an-rich-md-slash-item--active {
+  background: hsl(var(--accent));
+}
+
+.an-rich-md-slash-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  font-size: 11px;
+  font-weight: 650;
+  color: hsl(var(--muted-foreground));
+  flex-shrink: 0;
+}
+
+.an-rich-md-slash-copy {
+  display: block;
+  min-width: 0;
+  flex: 1;
+}
+
+.an-rich-md-slash-title {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.an-rich-md-slash-description {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Shared block-level image node (the editor's `.an-rich-md-image` and the
+   read-only markdown renderer's <img>). Constrained to the prose width and
+   responsive; a still-uploading placeholder (empty src) shows a subtle frame. */
+.an-rich-md-prose img,
+.an-rich-md-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 12px 0;
+  border-radius: 8px;
+}
+
+.an-rich-md-image[src=""],
+.an-rich-md-image:not([src]) {
+  min-height: 64px;
+  background: hsl(var(--muted));
+  border: 1px dashed hsl(var(--border));
+}
+
+.ProseMirror-selectednode.an-rich-md-image {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.4.10",
+  "version": "0.5.0",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -17,6 +17,9 @@
     "README.md"
   ],
   "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -55,6 +58,34 @@
       "import": "./dist/collab-ui/*.js",
       "default": "./dist/collab-ui/*.js"
     },
+    "./context-ui": {
+      "types": "./dist/context-ui/index.d.ts",
+      "browser": "./dist/context-ui/index.js",
+      "development": "./dist/context-ui/index.js",
+      "import": "./dist/context-ui/index.js",
+      "default": "./dist/context-ui/index.js"
+    },
+    "./design-tweaks": {
+      "types": "./dist/design-tweaks/index.d.ts",
+      "browser": "./dist/design-tweaks/index.js",
+      "development": "./dist/design-tweaks/index.js",
+      "import": "./dist/design-tweaks/index.js",
+      "default": "./dist/design-tweaks/index.js"
+    },
+    "./editor": {
+      "types": "./dist/editor/index.d.ts",
+      "browser": "./dist/editor/index.js",
+      "development": "./dist/editor/index.js",
+      "import": "./dist/editor/index.js",
+      "default": "./dist/editor/index.js"
+    },
+    "./editor/*": {
+      "types": "./dist/editor/*.d.ts",
+      "browser": "./dist/editor/*.js",
+      "development": "./dist/editor/*.js",
+      "import": "./dist/editor/*.js",
+      "default": "./dist/editor/*.js"
+    },
     "./hooks": {
       "types": "./dist/hooks/index.d.ts",
       "browser": "./dist/hooks/index.js",
@@ -125,7 +156,8 @@
       "import": "./dist/utils.js",
       "default": "./dist/utils.js"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./editor.css": "./dist/editor.css"
   },
   "publishConfig": {
     "access": "public",
@@ -139,17 +171,17 @@
     "@radix-ui/react-checkbox": "^1.3.6",
     "@radix-ui/react-collapsible": "^1.1.15",
     "@radix-ui/react-context-menu": "^2.3.2",
-    "@radix-ui/react-dialog": "^1.1.18",
-    "@radix-ui/react-dropdown-menu": "^2.1.19",
-    "@radix-ui/react-hover-card": "^1.1.18",
+    "@radix-ui/react-dialog": "^1.1.19",
+    "@radix-ui/react-dropdown-menu": "^2.1.20",
+    "@radix-ui/react-hover-card": "^1.1.19",
     "@radix-ui/react-label": "^2.1.11",
     "@radix-ui/react-menubar": "^1.1.19",
     "@radix-ui/react-navigation-menu": "^1.2.17",
-    "@radix-ui/react-popover": "^1.1.18",
+    "@radix-ui/react-popover": "^1.1.19",
     "@radix-ui/react-progress": "^1.1.11",
     "@radix-ui/react-radio-group": "^1.4.2",
     "@radix-ui/react-scroll-area": "^1.2.13",
-    "@radix-ui/react-select": "^2.3.2",
+    "@radix-ui/react-select": "^2.3.3",
     "@radix-ui/react-separator": "^1.1.11",
     "@radix-ui/react-slider": "^1.4.2",
     "@radix-ui/react-slot": "^1.3.0",
@@ -158,14 +190,33 @@
     "@radix-ui/react-toast": "^1.2.18",
     "@radix-ui/react-toggle": "^1.1.13",
     "@radix-ui/react-toggle-group": "^1.1.14",
-    "@radix-ui/react-tooltip": "^1.2.11",
+    "@radix-ui/react-tooltip": "^1.2.12",
     "@tabler/icons-react": "^3.41.1",
+    "@tiptap/core": "3.28.0",
+    "@tiptap/extension-code-block-lowlight": "3.28.0",
+    "@tiptap/extension-collaboration": "3.28.0",
+    "@tiptap/extension-collaboration-caret": "3.28.0",
+    "@tiptap/extension-image": "3.28.0",
+    "@tiptap/extension-link": "3.28.0",
+    "@tiptap/extension-placeholder": "3.28.0",
+    "@tiptap/extension-table": "3.28.0",
+    "@tiptap/extension-table-cell": "3.28.0",
+    "@tiptap/extension-table-header": "3.28.0",
+    "@tiptap/extension-table-row": "3.28.0",
+    "@tiptap/extension-task-item": "3.28.0",
+    "@tiptap/extension-task-list": "3.28.0",
+    "@tiptap/pm": "3.28.0",
+    "@tiptap/react": "3.28.0",
+    "@tiptap/starter-kit": "3.28.0",
+    "@tiptap/y-tiptap": "3.0.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
+    "highlight.js": "^11.11.1",
     "input-otp": "^1.4.2",
+    "lowlight": "^3.3.0",
     "next-themes": "^0.4.6",
     "react-day-picker": "^10.0.1",
     "react-hook-form": "^7.80.0",
@@ -173,7 +224,10 @@
     "recharts": "^3.9.2",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "vaul": "^1.1.2"
+    "tiptap-markdown": "^0.9.0",
+    "vaul": "^1.1.2",
+    "y-protocols": "^1.0.7",
+    "yjs": "^13.6.31"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",