@kyro-cms/admin 0.3.1 → 0.3.4

package/dist/EditorClient-XEUOVAAC.js

@@ -0,0 +1,466 @@
+import { LuUndo, LuRedo, LuLink, LuX, LuExternalLink, LuChevronDown, LuList, LuListOrdered, LuBold, LuItalic, LuUnderline, LuStrikethrough, LuCode } from './chunk-7KPIUCGT.js';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { EditorProvider, PortableTextEditable, useEditor } from '@portabletext/editor';
+import { defineSchema } from '@portabletext/schema';
+import { EventListenerPlugin } from '@portabletext/editor/plugins';
+import { useHistoryButtons, useToolbarSchema, useDecoratorButton, useListButton, useAnnotationButton, useAnnotationPopover, useStyleSelector } from '@portabletext/toolbar';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function sanitizeInitialValue(value) {
+  if (!value || !Array.isArray(value))
+    return [];
+  return value.filter((block) => {
+    if (!block || typeof block !== "object")
+      return false;
+    if (!("_type" in block))
+      return false;
+    if (block._type === "block" && Array.isArray(block.children)) {
+      block.children = block.children.map((child) => ({
+        ...child,
+        _type: child._type || "span",
+        text: typeof child.text === "string" ? child.text : ""
+      }));
+    }
+    return true;
+  });
+}
+var schemaDefinition = defineSchema({
+  decorators: [
+    { name: "strong", title: "Bold" },
+    { name: "em", title: "Italic" },
+    { name: "underline", title: "Underline" },
+    { name: "strikeThrough", title: "Strikethrough" },
+    { name: "code", title: "Code" }
+  ],
+  styles: [
+    { name: "normal", title: "Normal" },
+    { name: "h1", title: "H1" },
+    { name: "h2", title: "H2" },
+    { name: "h3", title: "H3" },
+    { name: "blockquote", title: "Quote" }
+  ],
+  lists: [
+    { name: "bullet", title: "Bullet" },
+    { name: "number", title: "Number" }
+  ],
+  annotations: [
+    {
+      name: "link",
+      title: "Link",
+      fields: [{ name: "href", type: "string", title: "URL" }]
+    }
+  ],
+  inlineObjects: [],
+  blockObjects: []
+});
+var renderStyle = (props) => {
+  if (props.schemaType.value === "h1") {
+    return /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mb-2", children: props.children });
+  }
+  if (props.schemaType.value === "h2") {
+    return /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold mb-2", children: props.children });
+  }
+  if (props.schemaType.value === "h3") {
+    return /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-1", children: props.children });
+  }
+  if (props.schemaType.value === "blockquote") {
+    return /* @__PURE__ */ jsx("blockquote", { className: "border-l-2 border-[var(--kyro-primary)] pl-4 italic text-[var(--kyro-text-muted)] my-2", children: props.children });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: props.children });
+};
+var renderDecorator = (props) => {
+  if (props.value === "strong") {
+    return /* @__PURE__ */ jsx("strong", { children: props.children });
+  }
+  if (props.value === "em") {
+    return /* @__PURE__ */ jsx("em", { children: props.children });
+  }
+  if (props.value === "underline") {
+    return /* @__PURE__ */ jsx("u", { children: props.children });
+  }
+  if (props.value === "strikeThrough") {
+    return /* @__PURE__ */ jsx("s", { children: props.children });
+  }
+  if (props.value === "code") {
+    return /* @__PURE__ */ jsx("code", { className: "px-1 py-0.5 rounded bg-[var(--kyro-surface-accent)] text-[var(--kyro-primary)] text-sm font-mono", children: props.children });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: props.children });
+};
+var renderBlock = (props) => {
+  return /* @__PURE__ */ jsx("div", { children: props.children });
+};
+var renderListItem = (props) => {
+  if (props.schemaType.value === "bullet") {
+    return /* @__PURE__ */ jsx("li", { className: "list-disc ml-4", children: props.children });
+  }
+  if (props.schemaType.value === "number") {
+    return /* @__PURE__ */ jsx("li", { className: "list-decimal ml-4", children: props.children });
+  }
+  return /* @__PURE__ */ jsx("li", { children: props.children });
+};
+var renderAnnotation = (props) => {
+  if (props.schemaType.name === "link") {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: props.value.href,
+        className: "text-[var(--kyro-primary)] underline hover:opacity-80",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: props.children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: props.children });
+};
+function FocusRestoringButton({
+  onClick,
+  children,
+  ...props
+}) {
+  const editor = useEditor();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        onClick?.(e);
+        editor.send({ type: "focus" });
+      },
+      ...props,
+      children
+    }
+  );
+}
+var decoratorIcons = {
+  strong: LuBold,
+  em: LuItalic,
+  underline: LuUnderline,
+  strikeThrough: LuStrikethrough,
+  code: LuCode
+};
+var DecoratorButton = ({
+  name,
+  title
+}) => {
+  const schema = useToolbarSchema({});
+  const decoratorSchema = schema.decorators?.find((d) => d.name === name);
+  if (!decoratorSchema)
+    return null;
+  const { snapshot, send } = useDecoratorButton({
+    schemaType: decoratorSchema
+  });
+  const Icon = decoratorIcons[name];
+  const isActive = snapshot.matches({ enabled: "active" }) || snapshot.matches({ disabled: "active" });
+  const isEnabled = snapshot.matches("enabled");
+  return /* @__PURE__ */ jsx(
+    FocusRestoringButton,
+    {
+      disabled: !isEnabled,
+      "data-state": isActive ? "on" : "off",
+      onClick: () => send({ type: "toggle" }),
+      title,
+      className: "p-1.5 rounded transition-colors disabled:opacity-30 hover:bg-[var(--kyro-surface-accent)] data-[state=on]:bg-[var(--kyro-primary)] data-[state=on]:text-[var(--kyro-sidebar-text-active)]",
+      children: Icon && /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4" })
+    }
+  );
+};
+var ListButton = ({
+  name,
+  title
+}) => {
+  const schema = useToolbarSchema({});
+  const listSchema = schema.lists?.find((l) => l.name === name);
+  if (!listSchema)
+    return null;
+  const { snapshot, send } = useListButton({ schemaType: listSchema });
+  const Icon = name === "bullet" ? LuList : LuListOrdered;
+  const isActive = snapshot.matches({ enabled: "active" }) || snapshot.matches({ disabled: "active" });
+  const isEnabled = snapshot.matches("enabled");
+  return /* @__PURE__ */ jsx(
+    FocusRestoringButton,
+    {
+      disabled: !isEnabled,
+      "data-state": isActive ? "on" : "off",
+      onClick: () => send({ type: "toggle" }),
+      title,
+      className: "p-1.5 rounded transition-colors disabled:opacity-30 hover:bg-[var(--kyro-surface-accent)] data-[state=on]:bg-[var(--kyro-primary)] data-[state=on]:text-[var(--kyro-sidebar-text-active)]",
+      children: Icon && /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4" })
+    }
+  );
+};
+var AnnotationButton = ({
+  name,
+  title
+}) => {
+  const schema = useToolbarSchema({});
+  const annotationSchema = schema.annotations?.find((a) => a.name === name);
+  if (!annotationSchema)
+    return null;
+  const { snapshot, send } = useAnnotationButton({
+    schemaType: annotationSchema
+  });
+  const isActive = snapshot.matches({ enabled: "active" }) || snapshot.matches({ disabled: "active" });
+  const isEnabled = snapshot.matches("enabled");
+  const isShowingDialog = snapshot.matches({
+    enabled: { inactive: "showing dialog" }
+  });
+  return /* @__PURE__ */ jsx(
+    FocusRestoringButton,
+    {
+      disabled: !isEnabled,
+      "data-state": isActive ? "on" : "off",
+      onClick: () => send({
+        type: isShowingDialog ? "close dialog" : "open dialog"
+      }),
+      title,
+      className: "p-1.5 rounded transition-colors disabled:opacity-30 hover:bg-[var(--kyro-surface-accent)] data-[state=on]:bg-[var(--kyro-primary)] data-[state=on]:text-[var(--kyro-sidebar-text-active)]",
+      children: name === "link" && /* @__PURE__ */ jsx(LuLink, { className: "w-4 h-4" })
+    }
+  );
+};
+var LinkDialog = () => {
+  const schema = useToolbarSchema({});
+  const popover = useAnnotationPopover({
+    schemaTypes: schema.annotations || []
+  });
+  const dialogRef = useRef(null);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (popover.snapshot.matches({ enabled: "active" }) && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [popover.snapshot]);
+  if (!popover.snapshot.matches({ enabled: "active" }))
+    return null;
+  const activeAnnotations = popover.snapshot.context.annotations || [];
+  const activeLink = activeAnnotations.find(
+    (a) => a.schemaType.name === "link"
+  );
+  const currentHref = activeLink?.value?.href;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const href = formData.get("href");
+    if (activeLink) {
+      if (href.trim()) {
+        popover.send({
+          type: "edit",
+          at: activeLink.at,
+          props: { href: href.trim() }
+        });
+      } else {
+        popover.send({
+          type: "remove",
+          schemaType: activeLink.schemaType
+        });
+      }
+    } else {
+      if (href.trim()) {
+        popover.send({
+          type: "edit",
+          at: [],
+          props: { href: href.trim() }
+        });
+      }
+    }
+    popover.send({ type: "close" });
+  };
+  const handleRemove = () => {
+    if (activeLink) {
+      popover.send({
+        type: "remove",
+        schemaType: activeLink.schemaType
+      });
+    }
+    popover.send({ type: "close" });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: dialogRef,
+      className: "absolute top-full left-0 z-50 mt-1 w-72 p-3 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-bg-primary)] shadow-lg",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--kyro-text-primary)]", children: "Link" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => popover.send({ type: "close" }),
+              className: "p-1 rounded hover:bg-[var(--kyro-surface-accent)]",
+              children: /* @__PURE__ */ jsx(LuX, { className: "w-3.5 h-3.5 text-[var(--kyro-text-muted)]" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                name: "href",
+                type: "url",
+                defaultValue: currentHref || "https://",
+                placeholder: "Enter URL...",
+                className: "flex-1 px-2.5 py-1.5 text-sm rounded border border-[var(--kyro-border)] bg-transparent text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-primary)]"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "submit",
+                className: "px-2.5 py-1.5 text-sm rounded bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90",
+                children: activeLink ? "Update" : "Add"
+              }
+            )
+          ] }),
+          activeLink && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleRemove,
+              className: "w-full text-xs text-[var(--kyro-error)] hover:opacity-80 flex items-center justify-center gap-1 py-1",
+              children: [
+                /* @__PURE__ */ jsx(LuExternalLink, { className: "w-3 h-3" }),
+                "Remove link"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var StyleSelector = () => {
+  const schema = useToolbarSchema({});
+  const editor = useEditor();
+  const { snapshot, send } = useStyleSelector({
+    schemaTypes: schema.styles || []
+  });
+  if (!snapshot.matches("enabled"))
+    return null;
+  const activeStyle = snapshot.context.activeStyle || "normal";
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        value: activeStyle,
+        onChange: (e) => {
+          send({ type: "toggle", style: e.target.value });
+          editor.send({ type: "focus" });
+        },
+        className: "appearance-none bg-transparent text-sm pr-6 pl-2 py-1 rounded hover:bg-[var(--kyro-surface-accent)] cursor-pointer focus:outline-none focus:ring-1 focus:ring-[var(--kyro-primary)]",
+        children: schema.styles?.map((s) => /* @__PURE__ */ jsx("option", { value: s.name, children: s.title }, s.name))
+      }
+    ),
+    /* @__PURE__ */ jsx(LuChevronDown, { className: "w-3 h-3 absolute right-1.5 top-1/2 -translate-y-1/2 pointer-events-none text-[var(--kyro-text-muted)]" })
+  ] });
+};
+var Toolbar = () => {
+  const { snapshot: historySnapshot, send: historySend } = useHistoryButtons();
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-0.5 p-1.5 border-b border-[var(--kyro-border)]", children: [
+    /* @__PURE__ */ jsx(
+      FocusRestoringButton,
+      {
+        disabled: !historySnapshot.matches("enabled"),
+        onClick: () => historySend({ type: "history.undo" }),
+        title: "Undo",
+        className: "p-1.5 rounded transition-colors hover:bg-[var(--kyro-surface-accent)] disabled:opacity-30",
+        children: /* @__PURE__ */ jsx(LuUndo, { className: "w-4 h-4 text-[var(--kyro-text-secondary)]" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FocusRestoringButton,
+      {
+        disabled: !historySnapshot.matches("enabled"),
+        onClick: () => historySend({ type: "history.redo" }),
+        title: "Redo",
+        className: "p-1.5 rounded transition-colors hover:bg-[var(--kyro-surface-accent)] disabled:opacity-30",
+        children: /* @__PURE__ */ jsx(LuRedo, { className: "w-4 h-4 text-[var(--kyro-text-secondary)]" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-[var(--kyro-border)] mx-1" }),
+    /* @__PURE__ */ jsx(StyleSelector, {}),
+    /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-[var(--kyro-border)] mx-1" }),
+    /* @__PURE__ */ jsx(DecoratorButton, { name: "strong", title: "Bold" }),
+    /* @__PURE__ */ jsx(DecoratorButton, { name: "em", title: "Italic" }),
+    /* @__PURE__ */ jsx(DecoratorButton, { name: "underline", title: "Underline" }),
+    /* @__PURE__ */ jsx(DecoratorButton, { name: "strikeThrough", title: "Strikethrough" }),
+    /* @__PURE__ */ jsx(DecoratorButton, { name: "code", title: "Code" }),
+    /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-[var(--kyro-border)] mx-1" }),
+    /* @__PURE__ */ jsx(AnnotationButton, { name: "link", title: "Link" }),
+    /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-[var(--kyro-border)] mx-1" }),
+    /* @__PURE__ */ jsx(ListButton, { name: "bullet", title: "Bullet List" }),
+    /* @__PURE__ */ jsx(ListButton, { name: "number", title: "Numbered List" }),
+    /* @__PURE__ */ jsx(LinkDialog, {})
+  ] });
+};
+var EditorInner = ({ onChange, disabled }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Toolbar, {}),
+    /* @__PURE__ */ jsx(
+      PortableTextEditable,
+      {
+        className: "min-h-[200px] p-4 focus:outline-none text-[var(--kyro-text-primary)]",
+        placeholder: "Start typing...",
+        readOnly: disabled,
+        renderStyle,
+        renderDecorator,
+        renderBlock,
+        renderListItem,
+        renderAnnotation
+      }
+    )
+  ] });
+};
+var EditorClient = ({
+  initialValue,
+  onChange,
+  disabled
+}) => {
+  const [value, setValue] = useState(() => sanitizeInitialValue(initialValue));
+  const prevInitialValueRef = useRef(initialValue);
+  useEffect(() => {
+    const sanitized = sanitizeInitialValue(initialValue);
+    const prevSanitized = sanitizeInitialValue(prevInitialValueRef.current);
+    if (JSON.stringify(sanitized) !== JSON.stringify(prevSanitized)) {
+      setValue(sanitized);
+      prevInitialValueRef.current = initialValue;
+    }
+  }, [initialValue]);
+  const handleChange = useCallback(
+    (newValue) => {
+      setValue(newValue);
+      onChange(newValue);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs(
+    EditorProvider,
+    {
+      initialConfig: {
+        schemaDefinition,
+        initialValue: value
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          EventListenerPlugin,
+          {
+            on: (event) => {
+              if (event.type === "mutation" && event.value) {
+                handleChange(event.value);
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(EditorInner, { onChange: handleChange, disabled })
+      ]
+    },
+    JSON.stringify(value)
+  );
+};
+
+export { EditorClient };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=EditorClient-XEUOVAAC.js.map

package/dist/EditorClient-XEUOVAAC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/fields/EditorClient.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  useMemo,\n} from \"react\";\nimport {\n  EditorProvider,\n  PortableTextEditable,\n  useEditor,\n  type RenderStyleFunction,\n  type RenderDecoratorFunction,\n  type RenderBlockFunction,\n  type RenderListItemFunction,\n  type RenderAnnotationFunction,\n} from \"@portabletext/editor\";\nimport { defineSchema } from \"@portabletext/schema\";\nimport { EventListenerPlugin } from \"@portabletext/editor/plugins\";\nimport {\n  useToolbarSchema,\n  useDecoratorButton,\n  useListButton,\n  useStyleSelector,\n  useHistoryButtons,\n  useAnnotationButton,\n  useAnnotationPopover,\n} from \"@portabletext/toolbar\";\nimport {\n  Bold,\n  Italic,\n  Underline,\n  Strikethrough,\n  Code,\n  Link,\n  List,\n  ListOrdered,\n  Undo,\n  Redo,\n  ChevronDown,\n  X,\n  ExternalLink,\n} from \"../ui/icons\";\n\ninterface EditorClientProps {\n  initialValue: Record<string, unknown>[];\n  onChange: (blocks: Record<string, unknown>[]) => void;\n  disabled?: boolean;\n}\n\nfunction sanitizeInitialValue(value: unknown): Record<string, unknown>[] {\n  if (!value || !Array.isArray(value)) return [];\n  return (value as Record<string, unknown>[]).filter((block) => {\n    if (!block || typeof block !== \"object\") return false;\n    if (!(\"_type\" in block)) return false;\n    if ((block as { _type?: string })._type === \"block\" && Array.isArray((block as { children?: unknown[] }).children)) {\n      (block as { children: Record<string, unknown>[] }).children = (block.children as Record<string, unknown>[]).map((child) => ({\n        ...child,\n        _type: (child as { _type?: string })._type || \"span\",\n        text: typeof (child as { text?: unknown }).text === \"string\" ? child.text : \"\",\n      }));\n    }\n    return true;\n  });\n}\n\nconst schemaDefinition = defineSchema({\n  decorators: [\n    { name: \"strong\", title: \"Bold\" },\n    { name: \"em\", title: \"Italic\" },\n    { name: \"underline\", title: \"Underline\" },\n    { name: \"strikeThrough\", title: \"Strikethrough\" },\n    { name: \"code\", title: \"Code\" },\n  ],\n  styles: [\n    { name: \"normal\", title: \"Normal\" },\n    { name: \"h1\", title: \"H1\" },\n    { name: \"h2\", title: \"H2\" },\n    { name: \"h3\", title: \"H3\" },\n    { name: \"blockquote\", title: \"Quote\" },\n  ],\n  lists: [\n    { name: \"bullet\", title: \"Bullet\" },\n    { name: \"number\", title: \"Number\" },\n  ],\n  annotations: [\n    {\n      name: \"link\",\n      title: \"Link\",\n      fields: [{ name: \"href\", type: \"string\", title: \"URL\" }],\n    },\n  ],\n  inlineObjects: [],\n  blockObjects: [],\n});\n\nconst renderStyle: RenderStyleFunction = (props) => {\n  if (props.schemaType.value === \"h1\") {\n    return <h1 className=\"text-2xl font-bold mb-2\">{props.children}</h1>;\n  }\n  if (props.schemaType.value === \"h2\") {\n    return <h2 className=\"text-xl font-bold mb-2\">{props.children}</h2>;\n  }\n  if (props.schemaType.value === \"h3\") {\n    return <h3 className=\"text-lg font-semibold mb-1\">{props.children}</h3>;\n  }\n  if (props.schemaType.value === \"blockquote\") {\n    return (\n      <blockquote className=\"border-l-2 border-[var(--kyro-primary)] pl-4 italic text-[var(--kyro-text-muted)] my-2\">\n        {props.children}\n      </blockquote>\n    );\n  }\n  return <>{props.children}</>;\n};\n\nconst renderDecorator: RenderDecoratorFunction = (props) => {\n  if (props.value === \"strong\") {\n    return <strong>{props.children}</strong>;\n  }\n  if (props.value === \"em\") {\n    return <em>{props.children}</em>;\n  }\n  if (props.value === \"underline\") {\n    return <u>{props.children}</u>;\n  }\n  if (props.value === \"strikeThrough\") {\n    return <s>{props.children}</s>;\n  }\n  if (props.value === \"code\") {\n    return (\n      <code className=\"px-1 py-0.5 rounded bg-[var(--kyro-surface-accent)] text-[var(--kyro-primary)] text-sm font-mono\">\n        {props.children}\n      </code>\n    );\n  }\n  return <>{props.children}</>;\n};\n\nconst renderBlock: RenderBlockFunction = (props) => {\n  return <div>{props.children}</div>;\n};\n\nconst renderListItem: RenderListItemFunction = (props) => {\n  if (props.schemaType.value === \"bullet\") {\n    return <li className=\"list-disc ml-4\">{props.children}</li>;\n  }\n  if (props.schemaType.value === \"number\") {\n    return <li className=\"list-decimal ml-4\">{props.children}</li>;\n  }\n  return <li>{props.children}</li>;\n};\n\nconst renderAnnotation: RenderAnnotationFunction = (props) => {\n  if (props.schemaType.name === \"link\") {\n    return (\n      <a\n        href={props.value.href as string}\n        className=\"text-[var(--kyro-primary)] underline hover:opacity-80\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        {props.children}\n      </a>\n    );\n  }\n  return <>{props.children}</>;\n};\n\nfunction FocusRestoringButton({\n  onClick,\n  children,\n  ...props\n}: React.ButtonHTMLAttributes<HTMLButtonElement>) {\n  const editor = useEditor();\n  return (\n    <button\n      type=\"button\"\n      onClick={(e) => {\n        onClick?.(e);\n        editor.send({ type: \"focus\" });\n      }}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nconst decoratorIcons: Record<\n  string,\n  React.ComponentType<{ className?: string }>\n> = {\n  strong: Bold,\n  em: Italic,\n  underline: Underline,\n  strikeThrough: Strikethrough,\n  code: Code,\n};\n\nconst DecoratorButton: React.FC<{ name: string; title: string }> = ({\n  name,\n  title,\n}) => {\n  const schema = useToolbarSchema({});\n  const decoratorSchema = schema.decorators?.find((d) => d.name === name);\n  if (!decoratorSchema) return null;\n  const { snapshot, send } = useDecoratorButton({\n    schemaType: decoratorSchema,\n  });\n  const Icon = decoratorIcons[name];\n  const isActive =\n    snapshot.matches({ enabled: \"active\" }) ||\n    snapshot.matches({ disabled: \"active\" });\n  const isEnabled = snapshot.matches(\"enabled\");\n\n  return (\n    <FocusRestoringButton\n      disabled={!isEnabled}\n      data-state={isActive ? \"on\" : \"off\"}\n      onClick={() => send({ type: \"toggle\" })}\n      title={title}\n      className=\"p-1.5 rounded transition-colors disabled:opacity-30 hover:bg-[var(--kyro-surface-accent)] data-[state=on]:bg-[var(--kyro-primary)] data-[state=on]:text-[var(--kyro-sidebar-text-active)]\"\n    >\n      {Icon && <Icon className=\"w-4 h-4\" />}\n    </FocusRestoringButton>\n  );\n};\n\nconst ListButton: React.FC<{ name: string; title: string }> = ({\n  name,\n  title,\n}) => {\n  const schema = useToolbarSchema({});\n  const listSchema = schema.lists?.find((l) => l.name === name);\n  if (!listSchema) return null;\n  const { snapshot, send } = useListButton({ schemaType: listSchema });\n  const Icon = name === \"bullet\" ? List : ListOrdered;\n  const isActive =\n    snapshot.matches({ enabled: \"active\" }) ||\n    snapshot.matches({ disabled: \"active\" });\n  const isEnabled = snapshot.matches(\"enabled\");\n\n  return (\n    <FocusRestoringButton\n      disabled={!isEnabled}\n      data-state={isActive ? \"on\" : \"off\"}\n      onClick={() => send({ type: \"toggle\" })}\n      title={title}\n      className=\"p-1.5 rounded transition-colors disabled:opacity-30 hover:bg-[var(--kyro-surface-accent)] data-[state=on]:bg-[var(--kyro-primary)] data-[state=on]:text-[var(--kyro-sidebar-text-active)]\"\n    >\n      {Icon && <Icon className=\"w-4 h-4\" />}\n    </FocusRestoringButton>\n  );\n};\n\nconst AnnotationButton: React.FC<{ name: string; title: string }> = ({\n  name,\n  title,\n}) => {\n  const schema = useToolbarSchema({});\n  const annotationSchema = schema.annotations?.find((a) => a.name === name);\n  if (!annotationSchema) return null;\n  const { snapshot, send } = useAnnotationButton({\n    schemaType: annotationSchema,\n  });\n  const isActive =\n    snapshot.matches({ enabled: \"active\" }) ||\n    snapshot.matches({ disabled: \"active\" });\n  const isEnabled = snapshot.matches(\"enabled\");\n  const isShowingDialog = snapshot.matches({\n    enabled: { inactive: \"showing dialog\" },\n  });\n\n  return (\n    <FocusRestoringButton\n      disabled={!isEnabled}\n      data-state={isActive ? \"on\" : \"off\"}\n      onClick={() =>\n        send({\n          type: isShowingDialog ? \"close dialog\" : \"open dialog\",\n        })\n      }\n      title={title}\n      className=\"p-1.5 rounded transition-colors disabled:opacity-30 hover:bg-[var(--kyro-surface-accent)] data-[state=on]:bg-[var(--kyro-primary)] data-[state=on]:text-[var(--kyro-sidebar-text-active)]\"\n    >\n      {name === \"link\" && <Link className=\"w-4 h-4\" />}\n    </FocusRestoringButton>\n  );\n};\n\nconst LinkDialog: React.FC = () => {\n  const schema = useToolbarSchema({});\n  const popover = useAnnotationPopover({\n    schemaTypes: schema.annotations || [],\n  });\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (popover.snapshot.matches({ enabled: \"active\" }) && inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, [popover.snapshot]);\n\n  if (!popover.snapshot.matches({ enabled: \"active\" })) return null;\n\n  const activeAnnotations = popover.snapshot.context.annotations || [];\n  const activeLink = activeAnnotations.find(\n    (a) => a.schemaType.name === \"link\",\n  );\n  const currentHref = activeLink?.value?.href as string | undefined;\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    const formData = new FormData(e.target as HTMLFormElement);\n    const href = formData.get(\"href\") as string;\n\n    if (activeLink) {\n      if (href.trim()) {\n        popover.send({\n          type: \"edit\",\n          at: activeLink.at,\n          props: { href: href.trim() },\n        });\n      } else {\n        popover.send({\n          type: \"remove\",\n          schemaType: activeLink.schemaType,\n        });\n      }\n    } else {\n      if (href.trim()) {\n        popover.send({\n          type: \"edit\",\n          at: [] as string[],\n          props: { href: href.trim() },\n        });\n      }\n    }\n    popover.send({ type: \"close\" });\n  };\n\n  const handleRemove = () => {\n    if (activeLink) {\n      popover.send({\n        type: \"remove\",\n        schemaType: activeLink.schemaType,\n      });\n    }\n    popover.send({ type: \"close\" });\n  };\n\n  return (\n    <div\n      ref={dialogRef}\n      className=\"absolute top-full left-0 z-50 mt-1 w-72 p-3 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-bg-primary)] shadow-lg\"\n    >\n      <div className=\"flex items-center justify-between mb-2\">\n        <span className=\"text-sm font-medium text-[var(--kyro-text-primary)]\">\n          Link\n        </span>\n        <button\n          type=\"button\"\n          onClick={() => popover.send({ type: \"close\" })}\n          className=\"p-1 rounded hover:bg-[var(--kyro-surface-accent)]\"\n        >\n          <X className=\"w-3.5 h-3.5 text-[var(--kyro-text-muted)]\" />\n        </button>\n      </div>\n      <form onSubmit={handleSubmit} className=\"space-y-2\">\n        <div className=\"flex gap-1.5\">\n          <input\n            ref={inputRef}\n            name=\"href\"\n            type=\"url\"\n            defaultValue={currentHref || \"https://\"}\n            placeholder=\"Enter URL...\"\n            className=\"flex-1 px-2.5 py-1.5 text-sm rounded border border-[var(--kyro-border)] bg-transparent text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-primary)]\"\n          />\n          <button\n            type=\"submit\"\n            className=\"px-2.5 py-1.5 text-sm rounded bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90\"\n          >\n            {activeLink ? \"Update\" : \"Add\"}\n          </button>\n        </div>\n        {activeLink && (\n          <button\n            type=\"button\"\n            onClick={handleRemove}\n            className=\"w-full text-xs text-[var(--kyro-error)] hover:opacity-80 flex items-center justify-center gap-1 py-1\"\n          >\n            <ExternalLink className=\"w-3 h-3\" />\n            Remove link\n          </button>\n        )}\n      </form>\n    </div>\n  );\n};\n\nconst StyleSelector: React.FC = () => {\n  const schema = useToolbarSchema({});\n  const editor = useEditor();\n  const { snapshot, send } = useStyleSelector({\n    schemaTypes: schema.styles || [],\n  });\n  if (!snapshot.matches(\"enabled\")) return null;\n  const activeStyle = snapshot.context.activeStyle || \"normal\";\n\n  return (\n    <div className=\"relative\">\n      <select\n        value={activeStyle}\n        onChange={(e) => {\n          send({ type: \"toggle\", style: e.target.value as string });\n          editor.send({ type: \"focus\" });\n        }}\n        className=\"appearance-none bg-transparent text-sm pr-6 pl-2 py-1 rounded hover:bg-[var(--kyro-surface-accent)] cursor-pointer focus:outline-none focus:ring-1 focus:ring-[var(--kyro-primary)]\"\n      >\n        {schema.styles?.map((s) => (\n          <option key={s.name} value={s.name}>\n            {s.title}\n          </option>\n        ))}\n      </select>\n      <ChevronDown className=\"w-3 h-3 absolute right-1.5 top-1/2 -translate-y-1/2 pointer-events-none text-[var(--kyro-text-muted)]\" />\n    </div>\n  );\n};\n\nconst Toolbar: React.FC = () => {\n  const { snapshot: historySnapshot, send: historySend } = useHistoryButtons();\n  return (\n    <div className=\"relative flex items-center gap-0.5 p-1.5 border-b border-[var(--kyro-border)]\">\n      <FocusRestoringButton\n        disabled={!historySnapshot.matches(\"enabled\")}\n        onClick={() => historySend({ type: \"history.undo\" })}\n        title=\"Undo\"\n        className=\"p-1.5 rounded transition-colors hover:bg-[var(--kyro-surface-accent)] disabled:opacity-30\"\n      >\n        <Undo className=\"w-4 h-4 text-[var(--kyro-text-secondary)]\" />\n      </FocusRestoringButton>\n      <FocusRestoringButton\n        disabled={!historySnapshot.matches(\"enabled\")}\n        onClick={() => historySend({ type: \"history.redo\" })}\n        title=\"Redo\"\n        className=\"p-1.5 rounded transition-colors hover:bg-[var(--kyro-surface-accent)] disabled:opacity-30\"\n      >\n        <Redo className=\"w-4 h-4 text-[var(--kyro-text-secondary)]\" />\n      </FocusRestoringButton>\n      <div className=\"w-px h-5 bg-[var(--kyro-border)] mx-1\" />\n      <StyleSelector />\n      <div className=\"w-px h-5 bg-[var(--kyro-border)] mx-1\" />\n      <DecoratorButton name=\"strong\" title=\"Bold\" />\n      <DecoratorButton name=\"em\" title=\"Italic\" />\n      <DecoratorButton name=\"underline\" title=\"Underline\" />\n      <DecoratorButton name=\"strikeThrough\" title=\"Strikethrough\" />\n      <DecoratorButton name=\"code\" title=\"Code\" />\n      <div className=\"w-px h-5 bg-[var(--kyro-border)] mx-1\" />\n      <AnnotationButton name=\"link\" title=\"Link\" />\n      <div className=\"w-px h-5 bg-[var(--kyro-border)] mx-1\" />\n      <ListButton name=\"bullet\" title=\"Bullet List\" />\n      <ListButton name=\"number\" title=\"Numbered List\" />\n      <LinkDialog />\n    </div>\n  );\n};\n\nconst EditorInner: React.FC<{\n  onChange: (blocks: Record<string, unknown>[]) => void;\n  disabled?: boolean;\n}> = ({ onChange, disabled }) => {\n  return (\n    <>\n      <Toolbar />\n      <PortableTextEditable\n        className=\"min-h-[200px] p-4 focus:outline-none text-[var(--kyro-text-primary)]\"\n        placeholder=\"Start typing...\"\n        readOnly={disabled}\n        renderStyle={renderStyle}\n        renderDecorator={renderDecorator}\n        renderBlock={renderBlock}\n        renderListItem={renderListItem}\n        renderAnnotation={renderAnnotation}\n      />\n    </>\n  );\n};\n\nexport const EditorClient: React.FC<EditorClientProps> = ({\n  initialValue,\n  onChange,\n  disabled,\n}) => {\n  const [value, setValue] = useState(() => sanitizeInitialValue(initialValue));\n  const prevInitialValueRef = useRef(initialValue);\n\n  useEffect(() => {\n    const sanitized = sanitizeInitialValue(initialValue);\n    const prevSanitized = sanitizeInitialValue(prevInitialValueRef.current);\n    if (JSON.stringify(sanitized) !== JSON.stringify(prevSanitized)) {\n      setValue(sanitized);\n      prevInitialValueRef.current = initialValue;\n    }\n  }, [initialValue]);\n\nconst handleChange = useCallback(\n     (newValue: Record<string, unknown>[]) => {\n       setValue(newValue);\n       onChange(newValue);\n     },\n     [onChange],\n   );\n\n  return (\n    <EditorProvider\n      key={JSON.stringify(value)}\n      initialConfig={{\n        schemaDefinition: schemaDefinition as Record<string, unknown>,\n        initialValue: value,\n      }}\n    >\n      <EventListenerPlugin\n        on={(event: Record<string, unknown>) => {\n          if (event.type === \"mutation\" && event.value) {\n            handleChange(event.value as Record<string, unknown>);\n          }\n        }}\n      />\n<EditorInner onChange={handleChange} disabled={disabled} />\n  </EditorProvider>\n);\n};\n"]}