octocms 0.4.13 → 0.4.16

package/dist/components/{FormRichTextField.js → ui/FormField/FormRichTextField.js}

@@ -2,7 +2,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "../chunk-B5LE2OEC.js";
+} from "../../../chunk-B5LE2OEC.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useRef, useEffect, useMemo, useState } from "react";
 import {
@@ -33,9 +33,9 @@ import {
   InsertCodeBlock
 } from "@mdxeditor/editor";
 import { usePublisher } from "@mdxeditor/gurx";
-import { FileText, GitBranch, ImagePlus, Puzzle, Variable } from "lucide-react";
-import { cn } from "../lib/utils";
-import { FieldHintAndError } from "./FieldHintAndError";
+import { Icon } from "../Icon/Icon";
+import { cn } from "../../../lib/utils";
+import { Field } from "./Field";
 import ComponentEmbedEditor from "./richtext/ComponentEmbedEditor";
 import ConditionEmbedEditor from "./richtext/ConditionEmbedEditor";
 import ImageEmbedEditor from "./richtext/ImageEmbedEditor";
@@ -57,7 +57,7 @@ function InsertCmsImageButton() {
           props: { mediaId: "" }
         });
       },
-      children: /* @__PURE__ */ jsx(ImagePlus, { className: "w-4 h-4" })
+      children: /* @__PURE__ */ jsx(Icon.ImagePlus, { className: "octo-icon-md" })
     }
   );
 }
@@ -76,7 +76,7 @@ function InsertCmsRefButton() {
           props: { id: "", display: "block" }
         });
       },
-      children: /* @__PURE__ */ jsx(FileText, { className: "w-4 h-4" })
+      children: /* @__PURE__ */ jsx(Icon.FileText, { className: "octo-icon-md" })
     }
   );
 }
@@ -96,7 +96,7 @@ function InsertCmsVarButton({ variables }) {
           props: { name: (_a = variables[0]) != null ? _a : "" }
         });
       },
-      children: /* @__PURE__ */ jsx(Variable, { className: "w-4 h-4" })
+      children: /* @__PURE__ */ jsx(Icon.Variable, { className: "octo-icon-md" })
     }
   );
 }
@@ -115,7 +115,7 @@ function InsertCmsConditionButton() {
           props: { field: "" }
         });
       },
-      children: /* @__PURE__ */ jsx(GitBranch, { className: "w-4 h-4" })
+      children: /* @__PURE__ */ jsx(Icon.GitBranch, { className: "octo-icon-md" })
     }
   );
 }
@@ -204,14 +204,14 @@ function InsertCustomComponentButton({ components }) {
             props: defaultProps
           });
         },
-        children: /* @__PURE__ */ jsx(Puzzle, { className: "w-4 h-4" })
+        children: /* @__PURE__ */ jsx(Icon.Puzzle, { className: "octo-icon-md" })
       }
     );
   }
-  return /* @__PURE__ */ jsx("div", { className: "relative inline-block", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "octo-richtext-toolbar-select-wrap", children: /* @__PURE__ */ jsxs(
     "select",
     {
-      className: "mdxeditor-toolbar-button appearance-none bg-transparent text-xs cursor-pointer pr-5 pl-1",
+      className: "mdxeditor-toolbar-button octo-richtext-toolbar-select",
       value: "",
       title: "Insert component",
       onChange: (e) => {
@@ -274,7 +274,7 @@ const FormRichTextField = ({
       key: "h1",
       label: "Heading 1",
       description: "Large section heading",
-      icon: /* @__PURE__ */ jsx("span", { className: "text-xs font-bold", children: "H1" }),
+      icon: /* @__PURE__ */ jsx("span", { className: "octo-u-text-xs octo-u-font-semibold", children: "H1" }),
       action: () => {
         var _a3;
         return (_a3 = editorRef.current) == null ? void 0 : _a3.insertMarkdown("\n# ");
@@ -285,7 +285,7 @@ const FormRichTextField = ({
       key: "h2",
       label: "Heading 2",
       description: "Medium section heading",
-      icon: /* @__PURE__ */ jsx("span", { className: "text-xs font-bold", children: "H2" }),
+      icon: /* @__PURE__ */ jsx("span", { className: "octo-u-text-xs octo-u-font-semibold", children: "H2" }),
       action: () => {
         var _a3;
         return (_a3 = editorRef.current) == null ? void 0 : _a3.insertMarkdown("\n## ");
@@ -296,7 +296,7 @@ const FormRichTextField = ({
       key: "h3",
       label: "Heading 3",
       description: "Small section heading",
-      icon: /* @__PURE__ */ jsx("span", { className: "text-xs font-bold", children: "H3" }),
+      icon: /* @__PURE__ */ jsx("span", { className: "octo-u-text-xs octo-u-font-semibold", children: "H3" }),
       action: () => {
         var _a3;
         return (_a3 = editorRef.current) == null ? void 0 : _a3.insertMarkdown("\n### ");
@@ -306,7 +306,7 @@ const FormRichTextField = ({
     items.push({
       key: "bullet-list",
       label: "Bullet List",
-      icon: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2022" }),
+      icon: /* @__PURE__ */ jsx("span", { className: "octo-u-text-xs", children: "\u2022" }),
       action: () => {
         var _a3;
         return (_a3 = editorRef.current) == null ? void 0 : _a3.insertMarkdown("\n- ");
@@ -316,7 +316,7 @@ const FormRichTextField = ({
     items.push({
       key: "numbered-list",
       label: "Numbered List",
-      icon: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "1." }),
+      icon: /* @__PURE__ */ jsx("span", { className: "octo-u-text-xs", children: "1." }),
       action: () => {
         var _a3;
         return (_a3 = editorRef.current) == null ? void 0 : _a3.insertMarkdown("\n1. ");
@@ -326,7 +326,7 @@ const FormRichTextField = ({
     items.push({
       key: "quote",
       label: "Quote",
-      icon: /* @__PURE__ */ jsx("span", { className: "text-xs", children: ">" }),
+      icon: /* @__PURE__ */ jsx("span", { className: "octo-u-text-xs", children: ">" }),
       action: () => {
         var _a3;
         return (_a3 = editorRef.current) == null ? void 0 : _a3.insertMarkdown("\n> ");
@@ -336,7 +336,7 @@ const FormRichTextField = ({
     items.push({
       key: "code-block",
       label: "Code Block",
-      icon: /* @__PURE__ */ jsx("span", { className: "text-xs font-mono", children: "{}" }),
+      icon: /* @__PURE__ */ jsx("span", { className: "octo-u-text-xs octo-u-mono", children: "{}" }),
       action: () => {
         var _a3;
         return (_a3 = editorRef.current) == null ? void 0 : _a3.insertMarkdown("\n```\n\n```\n");
@@ -346,7 +346,7 @@ const FormRichTextField = ({
     items.push({
       key: "divider",
       label: "Divider",
-      icon: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2014" }),
+      icon: /* @__PURE__ */ jsx("span", { className: "octo-u-text-xs", children: "\u2014" }),
       action: () => {
         var _a3;
         return (_a3 = editorRef.current) == null ? void 0 : _a3.insertMarkdown("\n---\n");
@@ -356,7 +356,7 @@ const FormRichTextField = ({
     items.push({
       key: "table",
       label: "Table",
-      icon: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u229E" }),
+      icon: /* @__PURE__ */ jsx("span", { className: "octo-u-text-xs", children: "\u229E" }),
       action: () => {
         var _a3;
         return (_a3 = editorRef.current) == null ? void 0 : _a3.insertMarkdown("\n| Col 1 | Col 2 |\n| --- | --- |\n| Cell | Cell |\n");
@@ -368,7 +368,7 @@ const FormRichTextField = ({
         key: "cms-image",
         label: "CMS Image",
         description: "Insert from media library",
-        icon: /* @__PURE__ */ jsx(ImagePlus, { className: "w-4 h-4" }),
+        icon: /* @__PURE__ */ jsx(Icon.ImagePlus, { className: "octo-icon-md" }),
         action: () => {
           var _a3;
           return (_a3 = insertJsxRef.current) == null ? void 0 : _a3.call(insertJsxRef, { kind: "flow", name: "CmsImage", props: { mediaId: "" } });
@@ -381,7 +381,7 @@ const FormRichTextField = ({
         key: "cms-ref",
         label: "Entry Reference",
         description: "Embed a content entry",
-        icon: /* @__PURE__ */ jsx(FileText, { className: "w-4 h-4" }),
+        icon: /* @__PURE__ */ jsx(Icon.FileText, { className: "octo-icon-md" }),
         action: () => {
           var _a3;
           return (_a3 = insertJsxRef.current) == null ? void 0 : _a3.call(insertJsxRef, { kind: "flow", name: "CmsRef", props: { id: "", display: "block" } });
@@ -394,7 +394,7 @@ const FormRichTextField = ({
         key: "cms-condition",
         label: "Condition Block",
         description: "A/B content branches",
-        icon: /* @__PURE__ */ jsx(GitBranch, { className: "w-4 h-4" }),
+        icon: /* @__PURE__ */ jsx(Icon.GitBranch, { className: "octo-icon-md" }),
         action: () => {
           var _a3;
           return (_a3 = insertJsxRef.current) == null ? void 0 : _a3.call(insertJsxRef, { kind: "flow", name: "CmsCondition", props: { field: "" } });
@@ -408,7 +408,7 @@ const FormRichTextField = ({
         key: "cms-var",
         label: "Template Variable",
         description: "Dynamic value placeholder",
-        icon: /* @__PURE__ */ jsx(Variable, { className: "w-4 h-4" }),
+        icon: /* @__PURE__ */ jsx(Icon.Variable, { className: "octo-icon-md" }),
         action: () => {
           var _a3, _b3;
           return (_b3 = insertJsxRef.current) == null ? void 0 : _b3.call(insertJsxRef, { kind: "text", name: "CmsVar", props: { name: (_a3 = vars[0]) != null ? _a3 : "" } });
@@ -427,7 +427,7 @@ const FormRichTextField = ({
           key: `component-${cName}`,
           label: def.label,
           description: `Component: ${cName}`,
-          icon: /* @__PURE__ */ jsx(Puzzle, { className: "w-4 h-4" }),
+          icon: /* @__PURE__ */ jsx(Icon.Puzzle, { className: "octo-icon-md" }),
           action: () => {
             var _a3;
             return (_a3 = insertJsxRef.current) == null ? void 0 : _a3.call(insertJsxRef, {
@@ -605,13 +605,9 @@ const FormRichTextField = ({
       showUndoRedo
     ]
   );
-  return /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
-    /* @__PURE__ */ jsxs("div", { className: "block text-xs font-medium text-muted-foreground mb-1.5", children: [
-      label,
-      required ? /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" }) : null
-    ] }),
+  return /* @__PURE__ */ jsxs(Field, { label, schema: "richtext", required, hint, error, className: "octo-ff-richtext", children: [
     /* @__PURE__ */ jsx("input", { type: "hidden", ref: hiddenInputRef, name, defaultValue: value }),
-    /* @__PURE__ */ jsxs("div", { ref: editorWrapRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs("div", { ref: editorWrapRef, className: "octo-ff-richtext__editor-wrap", children: [
       /* @__PURE__ */ jsx(
         MDXEditor,
         {
@@ -633,8 +629,7 @@ const FormRichTextField = ({
           onClose: handleSlashClose
         }
       )
-    ] }),
-    /* @__PURE__ */ jsx(FieldHintAndError, { hint, error })
+    ] })
   ] });
 };
 var FormRichTextField_default = FormRichTextField;

package/dist/components/ui/FormField/FormRichTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../components/ui/FormField/FormRichTextField.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback, useRef, useEffect, useMemo, useState } from 'react';\n\nimport {\n  MDXEditorMethods,\n  MDXEditor,\n  Separator,\n  headingsPlugin,\n  listsPlugin,\n  quotePlugin,\n  thematicBreakPlugin,\n  linkPlugin,\n  linkDialogPlugin,\n  imagePlugin,\n  tablePlugin,\n  codeBlockPlugin,\n  markdownShortcutPlugin,\n  toolbarPlugin,\n  jsxPlugin,\n  insertJsx$,\n  BoldItalicUnderlineToggles,\n  CreateLink,\n  ListsToggle,\n  BlockTypeSelect,\n  InsertTable,\n  InsertThematicBreak,\n  InsertImage,\n  CodeToggle,\n  UndoRedo,\n  InsertCodeBlock,\n} from '@mdxeditor/editor';\nimport type { JsxComponentDescriptor } from '@mdxeditor/editor';\nimport { usePublisher } from '@mdxeditor/gurx';\nimport { Icon } from '../Icon/Icon';\n\nimport { cn } from '../../../lib/utils';\nimport type { RichTextComponentDef, RichTextFieldConfig } from '../../../admin/types';\n\nimport { Field } from './Field';\nimport ComponentEmbedEditor from './richtext/ComponentEmbedEditor';\nimport ConditionEmbedEditor from './richtext/ConditionEmbedEditor';\nimport ImageEmbedEditor from './richtext/ImageEmbedEditor';\nimport ReferenceEmbedEditor from './richtext/ReferenceEmbedEditor';\nimport { SlashMenuOverlay } from './richtext/SlashCommandMenu';\nimport VariableEmbedEditor from './richtext/VariableEmbedEditor';\n\ntype FormRichTextFieldProps = {\n  label: string;\n  name: string;\n  value: string;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  onClearError?: (name: string) => void;\n  richtext?: RichTextFieldConfig;\n};\n\nfunction InsertCmsImageButton() {\n  const insertJsx = usePublisher(insertJsx$);\n  return (\n    <button\n      type=\"button\"\n      title=\"Insert CMS image\"\n      className=\"mdxeditor-toolbar-button\"\n      onClick={() => {\n        insertJsx({\n          kind: 'flow',\n          name: 'CmsImage',\n          props: { mediaId: '' },\n        });\n      }}\n    >\n      <Icon.ImagePlus className=\"octo-icon-md\" />\n    </button>\n  );\n}\n\nfunction InsertCmsRefButton() {\n  const insertJsx = usePublisher(insertJsx$);\n  return (\n    <button\n      type=\"button\"\n      title=\"Insert entry reference\"\n      className=\"mdxeditor-toolbar-button\"\n      onClick={() => {\n        insertJsx({\n          kind: 'flow',\n          name: 'CmsRef',\n          props: { id: '', display: 'block' },\n        });\n      }}\n    >\n      <Icon.FileText className=\"octo-icon-md\" />\n    </button>\n  );\n}\n\nfunction InsertCmsVarButton({ variables }: { variables: string[] }) {\n  const insertJsx = usePublisher(insertJsx$);\n  return (\n    <button\n      type=\"button\"\n      title=\"Insert template variable\"\n      className=\"mdxeditor-toolbar-button\"\n      onClick={() => {\n        insertJsx({\n          kind: 'text',\n          name: 'CmsVar',\n          props: { name: variables[0] ?? '' },\n        });\n      }}\n    >\n      <Icon.Variable className=\"octo-icon-md\" />\n    </button>\n  );\n}\n\nfunction InsertCmsConditionButton() {\n  const insertJsx = usePublisher(insertJsx$);\n  return (\n    <button\n      type=\"button\"\n      title=\"Insert condition block\"\n      className=\"mdxeditor-toolbar-button\"\n      onClick={() => {\n        insertJsx({\n          kind: 'flow',\n          name: 'CmsCondition',\n          props: { field: '' },\n        });\n      }}\n    >\n      <Icon.GitBranch className=\"octo-icon-md\" />\n    </button>\n  );\n}\n\nconst CMS_IMAGE_DESCRIPTOR: JsxComponentDescriptor = {\n  name: 'CmsImage',\n  kind: 'flow',\n  props: [{ name: 'mediaId', type: 'string', required: true }],\n  hasChildren: false,\n  Editor: ImageEmbedEditor,\n};\n\nconst CMS_REFERENCE_DESCRIPTOR: JsxComponentDescriptor = {\n  name: 'CmsRef',\n  kind: 'flow',\n  props: [\n    { name: 'id', type: 'string', required: true },\n    { name: 'display', type: 'string', required: false },\n  ],\n  hasChildren: false,\n  Editor: ReferenceEmbedEditor,\n};\n\nfunction buildCmsVarDescriptor(allowedVariables: string[]): JsxComponentDescriptor {\n  return {\n    name: 'CmsVar',\n    kind: 'text',\n    props: [{ name: 'name', type: 'string', required: true }],\n    hasChildren: false,\n    Editor: (props: any) => <VariableEmbedEditor {...props} allowedVariables={allowedVariables} />,\n  };\n}\n\nfunction buildCustomComponentDescriptor(name: string, def: RichTextComponentDef): JsxComponentDescriptor {\n  return {\n    name,\n    kind: def.kind === 'inline' ? 'text' : 'flow',\n    props: def.props.map((p) => ({ name: p.name, type: 'string', required: p.required })),\n    hasChildren: false,\n    Editor: (props: any) => <ComponentEmbedEditor {...props} componentDef={def} componentName={name} />,\n  };\n}\n\nconst CMS_CONDITION_DESCRIPTOR: JsxComponentDescriptor = {\n  name: 'CmsCondition',\n  kind: 'flow',\n  props: [{ name: 'field', type: 'string', required: true }],\n  hasChildren: true,\n  Editor: ConditionEmbedEditor,\n};\n\nconst CMS_BRANCH_DESCRIPTOR: JsxComponentDescriptor = {\n  name: 'CmsBranch',\n  kind: 'flow',\n  props: [{ name: 'key', type: 'string', required: true }],\n  hasChildren: true,\n  Editor: () => null, // Rendered by the parent CmsCondition editor\n};\n\ntype InsertJsxPayload =\n  | { kind: 'text'; name: string; props: Record<string, string> }\n  | { kind: 'flow'; name: string; props: Record<string, string> };\n\n/** Syncs insertJsx publisher into a ref — must render under MDXEditor (e.g. toolbar) where RealmContext exists. */\nfunction InsertJsxPublisherBridge({\n  targetRef,\n}: {\n  targetRef: React.MutableRefObject<((payload: InsertJsxPayload) => void) | null>;\n}) {\n  const publish = usePublisher(insertJsx$);\n  useEffect(() => {\n    targetRef.current = publish as (payload: InsertJsxPayload) => void;\n    return () => {\n      targetRef.current = null;\n    };\n  }, [publish, targetRef]);\n  return null;\n}\n\nfunction InsertCustomComponentButton({ components }: { components: Record<string, RichTextComponentDef> }) {\n  const insertJsx = usePublisher(insertJsx$);\n  const entries = Object.entries(components);\n  if (entries.length === 0) return null;\n\n  if (entries.length === 1) {\n    const [name, def] = entries[0];\n    const defaultProps: Record<string, string> = {};\n    for (const p of def.props) {\n      defaultProps[p.name] = p.defaultValue != null ? String(p.defaultValue) : '';\n    }\n    return (\n      <button\n        type=\"button\"\n        title={`Insert ${def.label}`}\n        className=\"mdxeditor-toolbar-button\"\n        onClick={() => {\n          insertJsx({\n            kind: def.kind === 'inline' ? 'text' : 'flow',\n            name,\n            props: defaultProps,\n          });\n        }}\n      >\n        <Icon.Puzzle className=\"octo-icon-md\" />\n      </button>\n    );\n  }\n\n  // Multiple components — show a dropdown\n  return (\n    <div className=\"octo-richtext-toolbar-select-wrap\">\n      <select\n        className=\"mdxeditor-toolbar-button octo-richtext-toolbar-select\"\n        value=\"\"\n        title=\"Insert component\"\n        onChange={(e) => {\n          const name = e.target.value;\n          if (!name) return;\n          const def = components[name];\n          if (!def) return;\n          const defaultProps: Record<string, string> = {};\n          for (const p of def.props) {\n            defaultProps[p.name] = p.defaultValue != null ? String(p.defaultValue) : '';\n          }\n          insertJsx({\n            kind: def.kind === 'inline' ? 'text' : 'flow',\n            name,\n            props: defaultProps,\n          });\n          e.target.value = '';\n        }}\n      >\n        <option value=\"\">🧩 Insert…</option>\n        {entries.map(([name, def]) => (\n          <option key={name} value={name}>\n            {def.label}\n          </option>\n        ))}\n      </select>\n    </div>\n  );\n}\n\nconst FormRichTextField = ({\n  label,\n  name,\n  value,\n  required,\n  hint,\n  error,\n  onClearError,\n  richtext,\n}: FormRichTextFieldProps) => {\n  const editorRef = useRef<MDXEditorMethods>(null);\n  const hiddenInputRef = useRef<HTMLInputElement>(null);\n  const editorWrapRef = useRef<HTMLDivElement>(null);\n  const insertJsxRef = useRef<((payload: InsertJsxPayload) => void) | null>(null);\n\n  // Slash command menu state\n  const [slashOpen, setSlashOpen] = useState(false);\n  const [slashFilter, setSlashFilter] = useState('');\n  const [slashPosition, setSlashPosition] = useState<{ top: number; left: number } | null>(null);\n\n  const onChange = () => {\n    const input = hiddenInputRef.current;\n    if (input) {\n      input.value = editorRef.current?.getMarkdown() || '';\n    }\n    onClearError?.(name);\n  };\n\n  useEffect(() => {\n    editorRef.current?.setMarkdown(value);\n  }, [value]);\n\n  // Build slash command items\n  const slashItems = useMemo(() => {\n    type SlashItem = {\n      key: string;\n      label: string;\n      description?: string;\n      icon: React.ReactNode;\n      action: () => void;\n      keywords?: string[];\n    };\n\n    const items: SlashItem[] = [];\n\n    items.push({\n      key: 'h1',\n      label: 'Heading 1',\n      description: 'Large section heading',\n      icon: <span className=\"octo-u-text-xs octo-u-font-semibold\">H1</span>,\n      action: () => editorRef.current?.insertMarkdown('\\n# '),\n      keywords: ['heading', 'title'],\n    });\n    items.push({\n      key: 'h2',\n      label: 'Heading 2',\n      description: 'Medium section heading',\n      icon: <span className=\"octo-u-text-xs octo-u-font-semibold\">H2</span>,\n      action: () => editorRef.current?.insertMarkdown('\\n## '),\n      keywords: ['heading', 'title'],\n    });\n    items.push({\n      key: 'h3',\n      label: 'Heading 3',\n      description: 'Small section heading',\n      icon: <span className=\"octo-u-text-xs octo-u-font-semibold\">H3</span>,\n      action: () => editorRef.current?.insertMarkdown('\\n### '),\n      keywords: ['heading', 'title'],\n    });\n    items.push({\n      key: 'bullet-list',\n      label: 'Bullet List',\n      icon: <span className=\"octo-u-text-xs\">•</span>,\n      action: () => editorRef.current?.insertMarkdown('\\n- '),\n      keywords: ['list', 'bullet', 'unordered'],\n    });\n    items.push({\n      key: 'numbered-list',\n      label: 'Numbered List',\n      icon: <span className=\"octo-u-text-xs\">1.</span>,\n      action: () => editorRef.current?.insertMarkdown('\\n1. '),\n      keywords: ['list', 'numbered', 'ordered'],\n    });\n    items.push({\n      key: 'quote',\n      label: 'Quote',\n      icon: <span className=\"octo-u-text-xs\">&gt;</span>,\n      action: () => editorRef.current?.insertMarkdown('\\n> '),\n      keywords: ['quote', 'blockquote'],\n    });\n    items.push({\n      key: 'code-block',\n      label: 'Code Block',\n      icon: <span className=\"octo-u-text-xs octo-u-mono\">{'{}'}</span>,\n      action: () => editorRef.current?.insertMarkdown('\\n```\\n\\n```\\n'),\n      keywords: ['code', 'block'],\n    });\n    items.push({\n      key: 'divider',\n      label: 'Divider',\n      icon: <span className=\"octo-u-text-xs\">—</span>,\n      action: () => editorRef.current?.insertMarkdown('\\n---\\n'),\n      keywords: ['divider', 'hr', 'horizontal', 'rule'],\n    });\n    items.push({\n      key: 'table',\n      label: 'Table',\n      icon: <span className=\"octo-u-text-xs\">⊞</span>,\n      action: () => editorRef.current?.insertMarkdown('\\n| Col 1 | Col 2 |\\n| --- | --- |\\n| Cell | Cell |\\n'),\n      keywords: ['table', 'grid'],\n    });\n\n    if (richtext?.embeds?.images) {\n      items.push({\n        key: 'cms-image',\n        label: 'CMS Image',\n        description: 'Insert from media library',\n        icon: <Icon.ImagePlus className=\"octo-icon-md\" />,\n        action: () => insertJsxRef.current?.({ kind: 'flow', name: 'CmsImage', props: { mediaId: '' } }),\n        keywords: ['image', 'media', 'picture', 'photo'],\n      });\n    }\n\n    if (richtext?.embeds?.references) {\n      items.push({\n        key: 'cms-ref',\n        label: 'Entry Reference',\n        description: 'Embed a content entry',\n        icon: <Icon.FileText className=\"octo-icon-md\" />,\n        action: () => insertJsxRef.current?.({ kind: 'flow', name: 'CmsRef', props: { id: '', display: 'block' } }),\n        keywords: ['reference', 'entry', 'link', 'embed'],\n      });\n    }\n\n    if (richtext?.embeds?.conditions) {\n      items.push({\n        key: 'cms-condition',\n        label: 'Condition Block',\n        description: 'A/B content branches',\n        icon: <Icon.GitBranch className=\"octo-icon-md\" />,\n        action: () => insertJsxRef.current?.({ kind: 'flow', name: 'CmsCondition', props: { field: '' } }),\n        keywords: ['condition', 'branch', 'ab', 'test'],\n      });\n    }\n\n    const vars = richtext?.embeds?.variables;\n    if (vars && vars.length > 0) {\n      items.push({\n        key: 'cms-var',\n        label: 'Template Variable',\n        description: 'Dynamic value placeholder',\n        icon: <Icon.Variable className=\"octo-icon-md\" />,\n        action: () => insertJsxRef.current?.({ kind: 'text', name: 'CmsVar', props: { name: vars[0] ?? '' } }),\n        keywords: ['variable', 'template', 'dynamic'],\n      });\n    }\n\n    const customComponents = richtext?.embeds?.components;\n    if (customComponents) {\n      for (const [cName, def] of Object.entries(customComponents)) {\n        const defaultProps: Record<string, string> = {};\n        for (const p of def.props) {\n          defaultProps[p.name] = p.defaultValue != null ? String(p.defaultValue) : '';\n        }\n        items.push({\n          key: `component-${cName}`,\n          label: def.label,\n          description: `Component: ${cName}`,\n          icon: <Icon.Puzzle className=\"octo-icon-md\" />,\n          action: () =>\n            insertJsxRef.current?.({\n              kind: def.kind === 'inline' ? 'text' : 'flow',\n              name: cName,\n              props: defaultProps,\n            }),\n          keywords: ['component', cName.toLowerCase(), def.label.toLowerCase()],\n        });\n      }\n    }\n\n    return items;\n  }, [richtext]);\n\n  const filteredSlashItems = slashFilter\n    ? slashItems.filter((item) => {\n        const q = slashFilter.toLowerCase();\n        return (\n          item.label.toLowerCase().includes(q) ||\n          item.description?.toLowerCase().includes(q) ||\n          item.keywords?.some((kw) => kw.includes(q))\n        );\n      })\n    : slashItems;\n\n  // Listen for '/' typed in the editor to open the command menu\n  useEffect(() => {\n    const wrapper = editorWrapRef.current;\n    if (!wrapper) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === '/' && !slashOpen) {\n        const sel = window.getSelection();\n        if (sel && sel.rangeCount > 0) {\n          const range = sel.getRangeAt(0);\n          if (!wrapper.contains(range.commonAncestorContainer)) {\n            return;\n          }\n          e.preventDefault();\n          e.stopPropagation();\n          const rect = range.getBoundingClientRect();\n          setSlashPosition({ top: rect.bottom + 4, left: rect.left });\n          setSlashFilter('');\n          setSlashOpen(true);\n        }\n      } else if (slashOpen) {\n        if (e.key === 'Escape') {\n          setSlashOpen(false);\n        } else if (e.key === 'Backspace') {\n          setSlashFilter((prev) => {\n            if (prev.length === 0) {\n              setSlashOpen(false);\n              return '';\n            }\n            return prev.slice(0, -1);\n          });\n          e.preventDefault();\n        } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {\n          setSlashFilter((prev) => prev + e.key);\n          e.preventDefault();\n        }\n      }\n    };\n\n    wrapper.addEventListener('keydown', handleKeyDown, true);\n    return () => wrapper.removeEventListener('keydown', handleKeyDown, true);\n  }, [slashOpen]);\n\n  const handleSlashSelect = useCallback(\n    (item: (typeof slashItems)[number]) => {\n      setSlashOpen(false);\n      // Remove the '/' and any filter text that was typed\n      const md = editorRef.current?.getMarkdown() ?? '';\n      const slashPrefix = '/' + slashFilter;\n      if (md.endsWith(slashPrefix)) {\n        editorRef.current?.setMarkdown(md.slice(0, -slashPrefix.length));\n      }\n      item.action();\n    },\n    [slashFilter],\n  );\n\n  const handleSlashClose = useCallback(() => {\n    setSlashOpen(false);\n  }, []);\n\n  const allowedVariables = useMemo(() => richtext?.embeds?.variables ?? [], [richtext]);\n\n  const jsxDescriptors = useMemo(() => {\n    const descriptors: JsxComponentDescriptor[] = [];\n    if (richtext?.embeds?.images) {\n      descriptors.push(CMS_IMAGE_DESCRIPTOR);\n    }\n    if (richtext?.embeds?.references) {\n      descriptors.push(CMS_REFERENCE_DESCRIPTOR);\n    }\n    if (allowedVariables.length > 0) {\n      descriptors.push(buildCmsVarDescriptor(allowedVariables));\n    }\n    if (richtext?.embeds?.conditions) {\n      descriptors.push(CMS_CONDITION_DESCRIPTOR);\n      descriptors.push(CMS_BRANCH_DESCRIPTOR);\n    }\n    const customComponents = richtext?.embeds?.components;\n    if (customComponents) {\n      for (const [name, def] of Object.entries(customComponents)) {\n        descriptors.push(buildCustomComponentDescriptor(name, def));\n      }\n    }\n    return descriptors;\n  }, [richtext, allowedVariables]);\n\n  const hasImageEmbeds = richtext?.embeds?.images === true;\n  const hasReferenceEmbeds = !!richtext?.embeds?.references;\n  const hasConditions = richtext?.embeds?.conditions === true;\n  const hasVariables = allowedVariables.length > 0;\n  const customComponents = richtext?.embeds?.components;\n  const hasCustomComponents = !!customComponents && Object.keys(customComponents).length > 0;\n\n  // Toolbar config — all buttons shown by default\n  const tb = richtext?.toolbar;\n  const showFormatting = tb?.formatting !== false;\n  const showHeadings = tb?.headings !== false;\n  const showLists = tb?.lists !== false;\n  const showCode = tb?.code !== false;\n  const showCodeBlock = tb?.codeBlock !== false;\n  const showLinks = tb?.links !== false;\n  const showTables = tb?.tables !== false;\n  const showThematicBreak = tb?.thematicBreak !== false;\n  const showImages = tb?.images !== false;\n  const showUndoRedo = tb?.undoRedo !== false;\n\n  const hasAnyEmbeds = hasImageEmbeds || hasReferenceEmbeds || hasConditions || hasVariables || hasCustomComponents;\n\n  const plugins = useMemo(\n    () => [\n      headingsPlugin(),\n      listsPlugin(),\n      quotePlugin(),\n      thematicBreakPlugin(),\n      linkPlugin(),\n      linkDialogPlugin(),\n      imagePlugin(),\n      tablePlugin(),\n      codeBlockPlugin({ defaultCodeBlockLanguage: '' }),\n      markdownShortcutPlugin(),\n      ...(jsxDescriptors.length > 0 ? [jsxPlugin({ jsxComponentDescriptors: jsxDescriptors })] : []),\n      toolbarPlugin({\n        toolbarContents: () => (\n          <>\n            <InsertJsxPublisherBridge targetRef={insertJsxRef} />\n            {showUndoRedo && <UndoRedo />}\n            {showFormatting && <BoldItalicUnderlineToggles />}\n            {showCode && <CodeToggle />}\n            {showLinks && <CreateLink />}\n            {showLists && <ListsToggle />}\n            {showHeadings && <BlockTypeSelect />}\n            {showTables && <InsertTable />}\n            {showThematicBreak && <InsertThematicBreak />}\n            {showImages && <InsertImage />}\n            {showCodeBlock && <InsertCodeBlock />}\n            {hasAnyEmbeds && <Separator />}\n            {hasImageEmbeds && <InsertCmsImageButton />}\n            {hasReferenceEmbeds && <InsertCmsRefButton />}\n            {hasConditions && <InsertCmsConditionButton />}\n            {hasVariables && <InsertCmsVarButton variables={allowedVariables} />}\n            {hasCustomComponents && <InsertCustomComponentButton components={customComponents!} />}\n          </>\n        ),\n      }),\n    ],\n    [\n      jsxDescriptors,\n      hasImageEmbeds,\n      hasReferenceEmbeds,\n      hasConditions,\n      hasVariables,\n      allowedVariables,\n      hasCustomComponents,\n      customComponents,\n      hasAnyEmbeds,\n      showFormatting,\n      showHeadings,\n      showLists,\n      showCode,\n      showCodeBlock,\n      showLinks,\n      showTables,\n      showThematicBreak,\n      showImages,\n      showUndoRedo,\n    ],\n  );\n\n  return (\n    <Field label={label} schema=\"richtext\" required={required} hint={hint} error={error} className=\"octo-ff-richtext\">\n      <input type=\"hidden\" ref={hiddenInputRef} name={name} defaultValue={value} />\n      <div ref={editorWrapRef} className=\"octo-ff-richtext__editor-wrap\">\n        <MDXEditor\n          markdown={value}\n          plugins={plugins}\n          ref={editorRef}\n          onChange={onChange}\n          className={cn('editor-markdown', error && 'editor-markdown--invalid')}\n        />\n        <SlashMenuOverlay\n          items={filteredSlashItems}\n          open={slashOpen}\n          filter={slashFilter}\n          position={slashPosition}\n          onSelect={handleSlashSelect}\n          onClose={handleSlashClose}\n        />\n      </div>\n    </Field>\n  );\n};\n\nexport default FormRichTextField;\n"],"mappings":"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","names":["_a","_b","_c","_d","customComponents","name"]}

package/dist/components/{FormSelectField.d.ts → ui/FormField/FormSelectField.d.ts}

@@ -1,4 +1,4 @@
-import type { SelectOption } from '../admin/types';
+import type { SelectOption } from '../../../admin/types';
 type FormSelectFieldProps = {
     label: string;
     name: string;

package/dist/components/ui/FormField/FormSelectField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSelectField.d.ts","sourceRoot":"","sources":["../../../../components/ui/FormField/FormSelectField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAsBzD,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,eAAe,GAAI,iFAUtB,oBAAoB,4CA6EtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/{FormSelectField.js → ui/FormField/FormSelectField.js}

@@ -1,10 +1,9 @@
 "use client";
-import "../chunk-B5LE2OEC.js";
+import "../../../chunk-B5LE2OEC.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
-import { FieldHintAndError } from "./FieldHintAndError";
-import { FieldLabel } from "./FieldLabel";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../Select/Select";
+import { Field } from "./Field";
 const EMPTY_VALUE = "__cms_select_none__";
 function normalizeMulti(raw) {
   if (Array.isArray(raw)) {
@@ -44,28 +43,25 @@ const FormSelectField = ({
       onClearError == null ? void 0 : onClearError(name);
       setMulti((prev) => prev.includes(val) ? prev.filter((x) => x !== val) : [...prev, val]);
     };
-    return /* @__PURE__ */ jsxs("div", { className: "mb-5", children: [
-      /* @__PURE__ */ jsx(FieldLabel, { label, type: "select", required }),
+    return /* @__PURE__ */ jsxs(Field, { label, schema: "select", required, hint, error, children: [
       /* @__PURE__ */ jsx("input", { type: "hidden", name, value: JSON.stringify(multi) }),
-      /* @__PURE__ */ jsx("ul", { className: "mt-1 space-y-2 list-none p-0", children: options.map((o) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx("ul", { className: "octo-ff-select__multi", children: options.map((o) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", { className: "octo-ff-select__multi-label", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
             type: "checkbox",
             checked: multi.includes(o.value),
             onChange: () => toggle(o.value),
-            className: "rounded border-border"
+            className: "octo-ff-select__multi-checkbox"
           }
         ),
         /* @__PURE__ */ jsx("span", { children: o.label })
-      ] }) }, o.value)) }),
-      /* @__PURE__ */ jsx(FieldHintAndError, { hint, error })
+      ] }) }, o.value)) })
     ] });
   }
   const allowEmpty = !required;
   const radixValue = allowEmpty ? single === "" ? EMPTY_VALUE : single : single === "" ? void 0 : single;
-  return /* @__PURE__ */ jsxs("div", { className: "mb-5", children: [
-    /* @__PURE__ */ jsx(FieldLabel, { label, type: "select", required }),
+  return /* @__PURE__ */ jsxs(Field, { label, schema: "select", required, hint, error, children: [
     /* @__PURE__ */ jsx("input", { type: "hidden", name, value: single }),
     /* @__PURE__ */ jsxs(
       Select,
@@ -76,22 +72,14 @@ const FormSelectField = ({
           setSingle(v === EMPTY_VALUE ? "" : v);
         },
         children: [
-          /* @__PURE__ */ jsx(
-            SelectTrigger,
-            {
-              className: "field-shell h-10 w-full max-w-md rounded-full border-border bg-card px-4",
-              "aria-invalid": error ? true : void 0,
-              children: /* @__PURE__ */ jsx(SelectValue, { placeholder: allowEmpty ? "\u2014" : "Choose\u2026" })
-            }
-          ),
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "field-shell octo-input octo-input--shell", "aria-invalid": error ? true : void 0, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: allowEmpty ? "\u2014" : "Choose\u2026" }) }),
           /* @__PURE__ */ jsxs(SelectContent, { children: [
-            allowEmpty ? /* @__PURE__ */ jsx(SelectItem, { value: EMPTY_VALUE, children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" }) }) : null,
+            allowEmpty ? /* @__PURE__ */ jsx(SelectItem, { value: EMPTY_VALUE, children: /* @__PURE__ */ jsx("span", { className: "octo-field-hint-error__hint", children: "\u2014" }) }) : null,
             options.map((o) => /* @__PURE__ */ jsx(SelectItem, { value: o.value, children: o.label }, o.value))
           ] })
         ]
       }
-    ),
-    /* @__PURE__ */ jsx(FieldHintAndError, { hint, error })
+    )
   ] });
 };
 var FormSelectField_default = FormSelectField;

package/dist/components/ui/FormField/FormSelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../components/ui/FormField/FormSelectField.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useState } from 'react';\n\nimport type { SelectOption } from '../../../admin/types';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select/Select';\n\nimport { Field } from './Field';\n\nconst EMPTY_VALUE = '__cms_select_none__';\n\nfunction normalizeMulti(raw: unknown): string[] {\n  if (Array.isArray(raw)) {\n    return raw.map(String);\n  }\n  if (typeof raw === 'string') {\n    try {\n      const p = JSON.parse(raw);\n      return Array.isArray(p) ? p.map(String) : [];\n    } catch {\n      return [];\n    }\n  }\n  return [];\n}\n\ntype FormSelectFieldProps = {\n  label: string;\n  name: string;\n  value: unknown;\n  options: readonly SelectOption[];\n  multiple: boolean;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  onClearError?: (fieldName: string) => void;\n};\n\nconst FormSelectField = ({\n  label,\n  name,\n  value,\n  options,\n  multiple,\n  required,\n  hint,\n  error,\n  onClearError,\n}: FormSelectFieldProps) => {\n  const [multi, setMulti] = useState<string[]>(() => normalizeMulti(value));\n  const [single, setSingle] = useState(() => (value == null || value === '' ? '' : String(value)));\n\n  useEffect(() => {\n    setMulti(normalizeMulti(value));\n  }, [value]);\n\n  useEffect(() => {\n    setSingle(value == null || value === '' ? '' : String(value));\n  }, [value]);\n\n  if (multiple) {\n    const toggle = (val: string) => {\n      onClearError?.(name);\n      setMulti((prev) => (prev.includes(val) ? prev.filter((x) => x !== val) : [...prev, val]));\n    };\n\n    return (\n      <Field label={label} schema=\"select\" required={required} hint={hint} error={error}>\n        <input type=\"hidden\" name={name} value={JSON.stringify(multi)} />\n        <ul className=\"octo-ff-select__multi\">\n          {options.map((o) => (\n            <li key={o.value}>\n              <label className=\"octo-ff-select__multi-label\">\n                <input\n                  type=\"checkbox\"\n                  checked={multi.includes(o.value)}\n                  onChange={() => toggle(o.value)}\n                  className=\"octo-ff-select__multi-checkbox\"\n                />\n                <span>{o.label}</span>\n              </label>\n            </li>\n          ))}\n        </ul>\n      </Field>\n    );\n  }\n\n  const allowEmpty = !required;\n  const radixValue: string | undefined = allowEmpty\n    ? single === ''\n      ? EMPTY_VALUE\n      : single\n    : single === ''\n      ? undefined\n      : single;\n\n  return (\n    <Field label={label} schema=\"select\" required={required} hint={hint} error={error}>\n      <input type=\"hidden\" name={name} value={single} />\n      <Select\n        value={radixValue}\n        onValueChange={(v) => {\n          onClearError?.(name);\n          setSingle(v === EMPTY_VALUE ? '' : v);\n        }}\n      >\n        <SelectTrigger className=\"field-shell octo-input octo-input--shell\" aria-invalid={error ? true : undefined}>\n          <SelectValue placeholder={allowEmpty ? '—' : 'Choose…'} />\n        </SelectTrigger>\n        <SelectContent>\n          {allowEmpty ? (\n            <SelectItem value={EMPTY_VALUE}>\n              <span className=\"octo-field-hint-error__hint\">—</span>\n            </SelectItem>\n          ) : null}\n          {options.map((o) => (\n            <SelectItem key={o.value} value={o.value}>\n              {o.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </Field>\n  );\n};\n\nexport default FormSelectField;\n"],"mappings":"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","names":[]}

package/dist/components/ui/FormField/FormSlugField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSlugField.d.ts","sourceRoot":"","sources":["../../../../components/ui/FormField/FormSlugField.tsx"],"names":[],"mappings":"AAUA,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,2EASpB,kBAAkB,4CAoFpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/{FormSlugField.js → ui/FormField/FormSlugField.js}

@@ -1,12 +1,11 @@
 "use client";
-import "../chunk-B5LE2OEC.js";
+import "../../../chunk-B5LE2OEC.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { sanitizeSlugFieldInputValue, slugifyForUrl } from "../lib/slugField";
-import { FieldHintAndError } from "./FieldHintAndError";
-import { FieldLabel } from "./FieldLabel";
+import { sanitizeSlugFieldInputValue, slugifyForUrl } from "../../../lib/slugField";
+import { Button } from "../Button/Button";
+import { Field } from "./Field";
 import { FieldShell, FIELD_INPUT_CLASS } from "./FieldShell";
-import { Button } from "./ui/button";
 const FormSlugField = ({
   label,
   name,
@@ -70,27 +69,23 @@ const FormSlugField = ({
     }
     onClearError == null ? void 0 : onClearError(name);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "mb-5", children: [
-    /* @__PURE__ */ jsx(FieldLabel, { label, htmlFor: name, type: "slug", required }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "min-w-[200px] flex-1", children: /* @__PURE__ */ jsx(FieldShell, { error: !!error, children: /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: inputRef,
-          id: name,
-          className: FIELD_INPUT_CLASS,
-          type: "text",
-          name,
-          defaultValue: value,
-          "aria-invalid": error ? true : void 0,
-          onInput: onSlugInput,
-          onChange: onSlugInput
-        }
-      ) }) }),
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", className: "rounded-full", onClick: onRegenerate, children: "Regenerate from title" })
-    ] }),
-    /* @__PURE__ */ jsx(FieldHintAndError, { hint, error })
-  ] });
+  return /* @__PURE__ */ jsx(Field, { label, htmlFor: name, schema: "slug", required, hint, error, children: /* @__PURE__ */ jsxs("div", { className: "octo-ff-slug__row", children: [
+    /* @__PURE__ */ jsx("div", { className: "octo-ff-slug__input-wrap", children: /* @__PURE__ */ jsx(FieldShell, { error: !!error, children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        id: name,
+        className: FIELD_INPUT_CLASS,
+        type: "text",
+        name,
+        defaultValue: value,
+        "aria-invalid": error ? true : void 0,
+        onInput: onSlugInput,
+        onChange: onSlugInput
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: onRegenerate, children: "Regenerate from title" })
+  ] }) });
 };
 var FormSlugField_default = FormSlugField;
 export {

package/dist/components/ui/FormField/FormSlugField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../components/ui/FormField/FormSlugField.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { sanitizeSlugFieldInputValue, slugifyForUrl } from '../../../lib/slugField';\nimport { Button } from '../Button/Button';\n\nimport { Field } from './Field';\nimport { FieldShell, FIELD_INPUT_CLASS } from './FieldShell';\n\ntype FormSlugFieldProps = {\n  label: string;\n  name: string;\n  value: string;\n  sourceField: string;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  onClearError?: (fieldName: string) => void;\n};\n\nconst FormSlugField = ({\n  label,\n  name,\n  value,\n  sourceField,\n  required,\n  hint,\n  error,\n  onClearError,\n}: FormSlugFieldProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [slugTouched, setSlugTouched] = useState(() => Boolean(value?.trim()));\n\n  const applyFromSource = useCallback(\n    (sourceText: string) => {\n      if (!inputRef.current || slugTouched) {\n        return;\n      }\n      inputRef.current.value = slugifyForUrl(sourceText);\n    },\n    [slugTouched],\n  );\n\n  useEffect(() => {\n    const input = inputRef.current;\n    const form = input?.closest('form');\n    if (!form || !input) {\n      return undefined;\n    }\n\n    const onFormInput = (e: Event) => {\n      const t = e.target;\n      if (!(t instanceof HTMLInputElement) && !(t instanceof HTMLTextAreaElement)) {\n        return;\n      }\n      if (t.name !== sourceField) {\n        return;\n      }\n      applyFromSource(t.value);\n    };\n\n    form.addEventListener('input', onFormInput);\n    return () => form.removeEventListener('input', onFormInput);\n  }, [sourceField, applyFromSource]);\n\n  const onSlugInput = (e: React.FormEvent<HTMLInputElement>) => {\n    const el = e.currentTarget;\n    const next = sanitizeSlugFieldInputValue(el.value);\n    if (el.value !== next) {\n      el.value = next;\n    }\n    setSlugTouched(true);\n    onClearError?.(name);\n  };\n\n  const onRegenerate = () => {\n    const form = inputRef.current?.closest('form');\n    if (!form) {\n      return;\n    }\n    const source = form.elements.namedItem(sourceField);\n    const raw = source instanceof HTMLInputElement || source instanceof HTMLTextAreaElement ? source.value : '';\n    setSlugTouched(false);\n    if (inputRef.current) {\n      inputRef.current.value = slugifyForUrl(raw);\n    }\n    onClearError?.(name);\n  };\n\n  return (\n    <Field label={label} htmlFor={name} schema=\"slug\" required={required} hint={hint} error={error}>\n      <div className=\"octo-ff-slug__row\">\n        <div className=\"octo-ff-slug__input-wrap\">\n          <FieldShell error={!!error}>\n            <input\n              ref={inputRef}\n              id={name}\n              className={FIELD_INPUT_CLASS}\n              type=\"text\"\n              name={name}\n              defaultValue={value}\n              aria-invalid={error ? true : undefined}\n              onInput={onSlugInput}\n              onChange={onSlugInput}\n            />\n          </FieldShell>\n        </div>\n        <Button type=\"button\" variant=\"outline\" onClick={onRegenerate}>\n          Regenerate from title\n        </Button>\n      </div>\n    </Field>\n  );\n};\n\nexport default FormSlugField;\n"],"mappings":";;AA4FM,SAGM,KAHN;AA1FN,SAAgB,aAAa,WAAW,QAAQ,gBAAgB;AAEhE,SAAS,6BAA6B,qBAAqB;AAC3D,SAAS,cAAc;AAEvB,SAAS,aAAa;AACtB,SAAS,YAAY,yBAAyB;AAa9C,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,MAAM,QAAQ,+BAAO,MAAM,CAAC;AAE3E,QAAM,kBAAkB;AAAA,IACtB,CAAC,eAAuB;AACtB,UAAI,CAAC,SAAS,WAAW,aAAa;AACpC;AAAA,MACF;AACA,eAAS,QAAQ,QAAQ,cAAc,UAAU;AAAA,IACnD;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,UAAM,OAAO,+BAAO,QAAQ;AAC5B,QAAI,CAAC,QAAQ,CAAC,OAAO;AACnB,aAAO;AAAA,IACT;AAEA,UAAM,cAAc,CAAC,MAAa;AAChC,YAAM,IAAI,EAAE;AACZ,UAAI,EAAE,aAAa,qBAAqB,EAAE,aAAa,sBAAsB;AAC3E;AAAA,MACF;AACA,UAAI,EAAE,SAAS,aAAa;AAC1B;AAAA,MACF;AACA,sBAAgB,EAAE,KAAK;AAAA,IACzB;AAEA,SAAK,iBAAiB,SAAS,WAAW;AAC1C,WAAO,MAAM,KAAK,oBAAoB,SAAS,WAAW;AAAA,EAC5D,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,QAAM,cAAc,CAAC,MAAyC;AAC5D,UAAM,KAAK,EAAE;AACb,UAAM,OAAO,4BAA4B,GAAG,KAAK;AACjD,QAAI,GAAG,UAAU,MAAM;AACrB,SAAG,QAAQ;AAAA,IACb;AACA,mBAAe,IAAI;AACnB,iDAAe;AAAA,EACjB;AAEA,QAAM,eAAe,MAAM;AA5E7B;AA6EI,UAAM,QAAO,cAAS,YAAT,mBAAkB,QAAQ;AACvC,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AACA,UAAM,SAAS,KAAK,SAAS,UAAU,WAAW;AAClD,UAAM,MAAM,kBAAkB,oBAAoB,kBAAkB,sBAAsB,OAAO,QAAQ;AACzG,mBAAe,KAAK;AACpB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,cAAc,GAAG;AAAA,IAC5C;AACA,iDAAe;AAAA,EACjB;AAEA,SACE,oBAAC,SAAM,OAAc,SAAS,MAAM,QAAO,QAAO,UAAoB,MAAY,OAChF,+BAAC,SAAI,WAAU,qBACb;AAAA,wBAAC,SAAI,WAAU,4BACb,8BAAC,cAAW,OAAO,CAAC,CAAC,OACnB;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,MAAK;AAAA,QACL;AAAA,QACA,cAAc;AAAA,QACd,gBAAc,QAAQ,OAAO;AAAA,QAC7B,SAAS;AAAA,QACT,UAAU;AAAA;AAAA,IACZ,GACF,GACF;AAAA,IACA,oBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,SAAS,cAAc,mCAE/D;AAAA,KACF,GACF;AAEJ;AAEA,IAAO,wBAAQ;","names":[]}

package/dist/components/ui/FormField/FormStringField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormStringField.d.ts","sourceRoot":"","sources":["../../../../components/ui/FormField/FormStringField.tsx"],"names":[],"mappings":"AAOA,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,eAAe,GAAI,+CAA+C,oBAAoB,4CAe3F,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/ui/FormField/FormStringField.js

@@ -0,0 +1,23 @@
+"use client";
+import "../../../chunk-B5LE2OEC.js";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "./Field";
+import { FieldShell, FIELD_INPUT_CLASS } from "./FieldShell";
+const FormStringField = ({ label, name, value, required, hint, error }) => {
+  return /* @__PURE__ */ jsx(Field, { label, htmlFor: name, schema: "string", required, hint, error, children: /* @__PURE__ */ jsx(FieldShell, { error: !!error, children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: name,
+      className: FIELD_INPUT_CLASS,
+      type: "text",
+      name,
+      defaultValue: value,
+      "aria-invalid": error ? true : void 0
+    }
+  ) }) });
+};
+var FormStringField_default = FormStringField;
+export {
+  FormStringField_default as default
+};
+//# sourceMappingURL=FormStringField.js.map

package/dist/components/ui/FormField/FormStringField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../components/ui/FormField/FormStringField.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { Field } from './Field';\nimport { FieldShell, FIELD_INPUT_CLASS } from './FieldShell';\n\ntype FormStringFieldProps = {\n  label: string;\n  name: string;\n  value: string;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n};\n\nconst FormStringField = ({ label, name, value, required, hint, error }: FormStringFieldProps) => {\n  return (\n    <Field label={label} htmlFor={name} schema=\"string\" required={required} hint={hint} error={error}>\n      <FieldShell error={!!error}>\n        <input\n          id={name}\n          className={FIELD_INPUT_CLASS}\n          type=\"text\"\n          name={name}\n          defaultValue={value}\n          aria-invalid={error ? true : undefined}\n        />\n      </FieldShell>\n    </Field>\n  );\n};\n\nexport default FormStringField;\n"],"mappings":";;AAoBQ;AAhBR,SAAS,aAAa;AACtB,SAAS,YAAY,yBAAyB;AAW9C,MAAM,kBAAkB,CAAC,EAAE,OAAO,MAAM,OAAO,UAAU,MAAM,MAAM,MAA4B;AAC/F,SACE,oBAAC,SAAM,OAAc,SAAS,MAAM,QAAO,UAAS,UAAoB,MAAY,OAClF,8BAAC,cAAW,OAAO,CAAC,CAAC,OACnB;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,MAAK;AAAA,MACL;AAAA,MACA,cAAc;AAAA,MACd,gBAAc,QAAQ,OAAO;AAAA;AAAA,EAC/B,GACF,GACF;AAEJ;AAEA,IAAO,0BAAQ;","names":[]}

package/dist/components/ui/FormField/FormStringListField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormStringListField.d.ts","sourceRoot":"","sources":["../../../../components/ui/FormField/FormStringListField.tsx"],"names":[],"mappings":"AAYA,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AA+CF,QAAA,MAAM,mBAAmB,GAAI,6DAA6D,wBAAwB,4CA8GjH,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/{FormStringListField.js → ui/FormField/FormStringListField.js}

@@ -1,11 +1,11 @@
 "use client";
-import "../chunk-B5LE2OEC.js";
+import "../../../chunk-B5LE2OEC.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { GripVertical, X } from "lucide-react";
+import { Icon } from "../Icon/Icon";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import { cn } from "../lib/utils";
-import { normalizeStringListFromStorage } from "../lib/stringListField";
-import { FieldHintAndError } from "./FieldHintAndError";
+import { cn } from "../../../lib/utils";
+import { normalizeStringListFromStorage } from "../../../lib/stringListField";
+import { Field } from "./Field";
 function rowsFromStrings(values, nextId) {
   return values.map((value) => ({ id: nextId(), value }));
 }
@@ -25,22 +25,19 @@ const ListRow = ({
     onDragOver: (e) => onDragOver(e, index),
     onDragEnd,
     onDrop: () => onDrop(index),
-    className: cn(
-      "flex items-center gap-0 rounded-lg border border-border bg-muted/40 text-sm",
-      "cursor-grab active:cursor-grabbing"
-    ),
+    className: "octo-ff-list__item",
     children: [
-      /* @__PURE__ */ jsx("span", { className: "flex-none pl-2 text-muted-foreground", "aria-hidden": true, children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate px-2 py-2", children: row.value }),
-      /* @__PURE__ */ jsx("span", { className: "h-6 w-px flex-none bg-border", "aria-hidden": true }),
+      /* @__PURE__ */ jsx("span", { className: "octo-ff-list__item-grip", "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon.GripVertical, { className: "octo-icon-md" }) }),
+      /* @__PURE__ */ jsx("span", { className: "octo-ff-list__item-value", children: row.value }),
+      /* @__PURE__ */ jsx("span", { className: "octo-ff-list__item-sep", "aria-hidden": true }),
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           onClick: () => onRemove(index),
-          className: "flex-none rounded-r-lg p-2 text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+          className: "octo-ff-list__item-remove",
           "aria-label": `Remove ${row.value}`,
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(Icon.X, { className: "octo-icon-md" })
         }
       )
     ]
@@ -111,19 +108,12 @@ const FormStringListField = ({ label, name, value, required, hint, error, onClea
     },
     [dragIndex, name, onClearError]
   );
-  return /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
-    /* @__PURE__ */ jsxs("div", { className: "block text-xs font-medium text-muted-foreground mb-1.5", children: [
-      label,
-      required ? /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" }) : null
-    ] }),
+  return /* @__PURE__ */ jsxs(Field, { label, schema: "string[]", required, hint, error, children: [
     /* @__PURE__ */ jsx(
       "input",
       {
         id: inputId,
-        className: cn(
-          "w-full text-sm bg-background text-foreground px-3 py-2 rounded-md border border-border focus:outline-none focus:ring-2 focus:ring-primary/30 transition-colors mb-2",
-          error && "border-destructive focus:ring-destructive/30"
-        ),
+        className: cn("octo-ff-list__add-input", error && "octo-ff-list__add-input octo-ff-list__add-input--error"),
         type: "text",
         value: draft,
         onChange: (e) => setDraft(e.target.value),
@@ -135,7 +125,7 @@ const FormStringListField = ({ label, name, value, required, hint, error, onClea
         "aria-invalid": error ? true : void 0
       }
     ),
-    rows.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-col gap-1.5", children: rows.map((row, i) => /* @__PURE__ */ jsx(
+    rows.length > 0 ? /* @__PURE__ */ jsx("div", { className: "octo-ff-list__items", children: rows.map((row, i) => /* @__PURE__ */ jsx(
       ListRow,
       {
         row,
@@ -148,7 +138,6 @@ const FormStringListField = ({ label, name, value, required, hint, error, onClea
       },
       row.id
     )) }) : null,
-    /* @__PURE__ */ jsx(FieldHintAndError, { hint, error }),
     /* @__PURE__ */ jsx("input", { type: "hidden", name, value: serializedValue })
   ] });
 };