octocms 0.4.13 → 0.4.16

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

@@ -1,18 +1,18 @@
 "use client";
-import "../chunk-B5LE2OEC.js";
+import "../../../chunk-B5LE2OEC.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ImageIcon, ImagePlus, Upload, X } from "lucide-react";
+import { Button } from "../Button/Button";
+import { Icon } from "../Icon/Icon";
 import { useCallback, useRef, useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { queryKeys } from "../admin/query/keys";
-import { useMediaList } from "../admin/query/hooks/useMediaList";
-import { useConfig } from "../hooks/useConfig";
-import { toast } from "../hooks/useToast";
-import { stageMediaFiles } from "../lib/stageMediaFiles";
-import { FieldHintAndError } from "./FieldHintAndError";
-import { MediaSelectDialog } from "./MediaManager/MediaSelectDialog";
-import { MediaUploadDialog } from "./MediaManager/MediaUploadDialog";
-import { Button } from "./ui/button";
+import { queryKeys } from "../../../admin/query/keys";
+import { useMediaList } from "../../../admin/query/hooks/useMediaList";
+import { useConfig } from "../../../hooks/useConfig";
+import { toast } from "../../../hooks/useToast";
+import { stageMediaFiles } from "../../../lib/stageMediaFiles";
+import { Field } from "./Field";
+import { MediaSelectDialog } from "../../MediaManager/MediaSelectDialog";
+import { MediaUploadDialog } from "../../MediaManager/MediaUploadDialog";
 const FormImageField = ({
   label,
   name,
@@ -68,19 +68,15 @@ const FormImageField = ({
     },
     [name, onClearError, onPick]
   );
-  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
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
-      selected && previewUrl ? /* @__PURE__ */ jsxs("div", { className: "relative w-40 h-28 rounded-lg border border-border overflow-hidden bg-muted flex-none", children: [
+  return /* @__PURE__ */ jsxs(Field, { label, schema: "image", required, hint, error, children: [
+    /* @__PURE__ */ jsxs("div", { className: "octo-ff-image__body", children: [
+      selected && previewUrl ? /* @__PURE__ */ jsxs("div", { className: "octo-ff-image__preview", children: [
         /* @__PURE__ */ jsx(
           "img",
           {
             src: previewUrl,
             alt: (selectedEntry == null ? void 0 : selectedEntry.title) || (selectedEntry == null ? void 0 : selectedEntry.originalName) || "",
-            className: "w-full h-full object-cover"
+            className: "octo-ff-image__preview-img"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -91,26 +87,26 @@ const FormImageField = ({
               setSelected("");
               onClearError == null ? void 0 : onClearError(name);
             },
-            className: "absolute top-1 right-1 rounded-full bg-black/60 text-white p-0.5 hover:bg-black/80",
+            className: "octo-ff-image__clear",
             "aria-label": "Remove image",
-            children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+            children: /* @__PURE__ */ jsx(Icon.X, { className: "octo-icon-sm" })
           }
         )
-      ] }) : /* @__PURE__ */ jsx("div", { className: "w-40 h-28 rounded-lg border-2 border-dashed border-border flex items-center justify-center bg-muted/50 flex-none", children: /* @__PURE__ */ jsx(ImageIcon, { className: "w-8 h-8 text-muted-foreground" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 pt-1", children: [
-        /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+      ] }) : /* @__PURE__ */ jsx("div", { className: "octo-ff-image__empty", children: /* @__PURE__ */ jsx(Icon.Image, { className: "octo-icon-xl" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "octo-ff-image__actions", children: [
+        /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: () => {
           var _a2;
           return (_a2 = uploadInputRef.current) == null ? void 0 : _a2.click();
         }, children: [
-          /* @__PURE__ */ jsx(Upload, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx(Icon.Upload, { className: "octo-icon-md" }),
           "Upload new image"
         ] }),
-        /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setShowSelectDialog(true), children: [
-          /* @__PURE__ */ jsx(ImagePlus, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", onClick: () => setShowSelectDialog(true), children: [
+          /* @__PURE__ */ jsx(Icon.ImagePlus, { className: "octo-icon-md" }),
           "Select existing image"
         ] })
       ] }),
-      selected && selectedEntry && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground break-all", children: [
+      selected && selectedEntry && /* @__PURE__ */ jsxs("span", { className: "octo-ff-image__meta", children: [
         selectedEntry.title ? /* @__PURE__ */ jsx("div", { children: selectedEntry.title }) : null,
         selectedEntry.originalName
       ] })
@@ -122,14 +118,13 @@ const FormImageField = ({
         ref: uploadInputRef,
         type: "file",
         accept: config.mediaAllowedFormats.map((f) => `.${f}`).join(","),
-        className: "hidden",
+        className: "octo-u-hidden",
         onChange: (e) => {
           if (e.target.files && e.target.files.length > 0) stageFilesFromList(e.target.files);
           e.target.value = "";
         }
       }
     ),
-    /* @__PURE__ */ jsx(FieldHintAndError, { hint, error }),
     /* @__PURE__ */ jsx(
       MediaUploadDialog,
       {

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../components/ui/FormField/FormImageField.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport React, { useCallback, useRef, useState } from 'react';\n\nimport { useQueryClient } from '@tanstack/react-query';\n\nimport { queryKeys } from '../../../admin/query/keys';\nimport { useMediaList } from '../../../admin/query/hooks/useMediaList';\nimport { useConfig } from '../../../hooks/useConfig';\nimport { toast } from '../../../hooks/useToast';\nimport { stageMediaFiles } from '../../../lib/stageMediaFiles';\nimport type { MediaFile } from '../../../types';\n\nimport { Field } from './Field';\nimport { MediaSelectDialog } from '../../MediaManager/MediaSelectDialog';\nimport { MediaUploadDialog } from '../../MediaManager/MediaUploadDialog';\n\ntype FormImageFieldProps = {\n  label: string;\n  name: string;\n  value: string;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  onClearError?: (name: string) => void;\n  /**\n   * Notification callbacks. Existing callers (entry editor) ignore them; the\n   * markdown insert-image dialog uses both to publish `saveImage$` with full\n   * extension / publicUrl info that's only available at the moment of pick.\n   */\n  onPick?: (file: MediaFile) => void;\n  onUpload?: (uploadedIds: string[], stagedFiles: File[]) => void;\n};\n\nconst FormImageField = ({\n  label,\n  name,\n  value,\n  required,\n  hint,\n  error,\n  onClearError,\n  onPick,\n  onUpload,\n}: FormImageFieldProps) => {\n  const config = useConfig();\n  const queryClient = useQueryClient();\n  const mediaList = useMediaList();\n  const [selected, setSelected] = useState(value || '');\n  const [pendingUpload, setPendingUpload] = useState<File[] | null>(null);\n  const [showSelectDialog, setShowSelectDialog] = useState(false);\n  const uploadInputRef = useRef<HTMLInputElement>(null);\n\n  const mediaEntries = mediaList.data ?? [];\n\n  const selectedEntry = mediaEntries.find((e) => e.id === selected);\n  const previewUrl = selectedEntry?.publicUrl || '';\n\n  const stageFilesFromList = useCallback(\n    (fileList: FileList) => {\n      const { accepted, skipped } = stageMediaFiles(fileList, config.mediaAllowedFormats);\n      for (const { name, ext } of skipped) {\n        toast({ title: `Skipped \"${name}\" — format .${ext} not allowed`, variant: 'destructive' });\n      }\n      if (accepted.length > 0) setPendingUpload(accepted);\n    },\n    [config.mediaAllowedFormats],\n  );\n\n  const handleUploadComplete = useCallback(\n    async (uploadedIds: string[]) => {\n      if (uploadedIds.length === 0) {\n        setPendingUpload(null);\n        return;\n      }\n      const staged = pendingUpload ?? [];\n      onUpload?.(uploadedIds, staged);\n      await queryClient.invalidateQueries({ queryKey: queryKeys.media.list() });\n      setSelected(uploadedIds[0]);\n      setPendingUpload(null);\n      onClearError?.(name);\n    },\n    [name, onClearError, onUpload, pendingUpload, queryClient],\n  );\n\n  const handlePickExisting = useCallback(\n    (file: MediaFile) => {\n      onPick?.(file);\n      setSelected(file.id);\n      onClearError?.(name);\n    },\n    [name, onClearError, onPick],\n  );\n\n  return (\n    <Field label={label} schema=\"image\" required={required} hint={hint} error={error}>\n      <div className=\"octo-ff-image__body\">\n        {selected && previewUrl ? (\n          <div className=\"octo-ff-image__preview\">\n            <img\n              src={previewUrl}\n              alt={selectedEntry?.title || selectedEntry?.originalName || ''}\n              className=\"octo-ff-image__preview-img\"\n            />\n            <button\n              type=\"button\"\n              onClick={() => {\n                setSelected('');\n                onClearError?.(name);\n              }}\n              className=\"octo-ff-image__clear\"\n              aria-label=\"Remove image\"\n            >\n              <Icon.X className=\"octo-icon-sm\" />\n            </button>\n          </div>\n        ) : (\n          <div className=\"octo-ff-image__empty\">\n            <Icon.Image className=\"octo-icon-xl\" />\n          </div>\n        )}\n        <div className=\"octo-ff-image__actions\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => uploadInputRef.current?.click()}>\n            <Icon.Upload className=\"octo-icon-md\" />\n            Upload new image\n          </Button>\n          <Button type=\"button\" variant=\"outline\" onClick={() => setShowSelectDialog(true)}>\n            <Icon.ImagePlus className=\"octo-icon-md\" />\n            Select existing image\n          </Button>\n        </div>\n        {selected && selectedEntry && (\n          <span className=\"octo-ff-image__meta\">\n            {selectedEntry.title ? <div>{selectedEntry.title}</div> : null}\n            {selectedEntry.originalName}\n          </span>\n        )}\n      </div>\n      <input type=\"hidden\" name={name} value={selected} />\n\n      <input\n        ref={uploadInputRef}\n        type=\"file\"\n        accept={config.mediaAllowedFormats.map((f) => `.${f}`).join(',')}\n        className=\"octo-u-hidden\"\n        onChange={(e) => {\n          if (e.target.files && e.target.files.length > 0) stageFilesFromList(e.target.files);\n          e.target.value = '';\n        }}\n      />\n\n      <MediaUploadDialog\n        files={pendingUpload}\n        defaultFolder={'/'}\n        onComplete={handleUploadComplete}\n        onCancel={() => setPendingUpload(null)}\n      />\n\n      <MediaSelectDialog\n        open={showSelectDialog}\n        onOpenChange={setShowSelectDialog}\n        selectedId={selected || undefined}\n        onSelect={handlePickExisting}\n      />\n    </Field>\n  );\n};\n\nexport default FormImageField;\n"],"mappings":"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","names":["name","_a"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormJsonField.d.ts","sourceRoot":"","sources":["../../../../components/ui/FormField/FormJsonField.tsx"],"names":[],"mappings":"AASA,KAAK,kBAAkB,GAAG;IACxB,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;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAaF,QAAA,MAAM,aAAa,GAAI,6DAA6D,kBAAkB,4CAwCrG,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -1,10 +1,9 @@
 "use client";
-import "../chunk-B5LE2OEC.js";
+import "../../../chunk-B5LE2OEC.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { cn } from "../lib/utils";
-import { FieldHintAndError } from "./FieldHintAndError";
-import { FieldLabel } from "./FieldLabel";
+import { cn } from "../../../lib/utils";
+import { Field } from "./Field";
 import { FIELD_TEXTAREA_CLASS } from "./FieldShell";
 function syntaxStatus(text) {
   const t = text.trim();
@@ -29,14 +28,13 @@ const FormJsonField = ({ label, name, value, required, hint, error, onClearError
     },
     [name, onClearError]
   );
-  const statusLine = status === "empty" ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: required ? "Enter JSON\u2026" : "Optional \u2014 leave empty for no value" }) : status === "valid" ? /* @__PURE__ */ jsx("span", { className: "text-sm text-green-600 light:text-green-700", children: "Valid JSON" }) : /* @__PURE__ */ jsx("span", { className: "text-destructive text-sm", children: "Invalid JSON" });
-  return /* @__PURE__ */ jsxs("div", { className: "mb-5", children: [
-    /* @__PURE__ */ jsx(FieldLabel, { label, htmlFor: name, type: "json", required }),
+  const statusLine = status === "empty" ? /* @__PURE__ */ jsx("span", { className: "octo-ff-json__status octo-ff-json__status--empty", children: required ? "Enter JSON\u2026" : "Optional \u2014 leave empty for no value" }) : status === "valid" ? /* @__PURE__ */ jsx("span", { className: "octo-ff-json__status octo-ff-json__status--valid", children: "Valid JSON" }) : /* @__PURE__ */ jsx("span", { className: "octo-ff-json__status octo-ff-json__status--invalid", children: "Invalid JSON" });
+  return /* @__PURE__ */ jsxs(Field, { label, htmlFor: name, schema: "json", required, hint, error, children: [
     /* @__PURE__ */ jsx(
       "textarea",
       {
         id: name,
-        className: cn(FIELD_TEXTAREA_CLASS, "min-h-[160px] font-mono leading-relaxed", error && "border-destructive"),
+        className: cn(FIELD_TEXTAREA_CLASS, "octo-ff-json__textarea", error && "octo-textarea octo-textarea--error"),
         name,
         value: text,
         onChange: handleChange,
@@ -44,8 +42,7 @@ const FormJsonField = ({ label, name, value, required, hint, error, onClearError
         "aria-invalid": error ? true : void 0
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: statusLine }),
-    /* @__PURE__ */ jsx(FieldHintAndError, { hint, error })
+    /* @__PURE__ */ jsx("div", { className: "octo-ff-json__status", children: statusLine })
   ] });
 };
 var FormJsonField_default = FormJsonField;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../components/ui/FormField/FormJsonField.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { cn } from '../../../lib/utils';\n\nimport { Field } from './Field';\nimport { FIELD_TEXTAREA_CLASS } from './FieldShell';\n\ntype FormJsonFieldProps = {\n  label: string;\n  name: string;\n  value: string;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  onClearError?: (name: string) => void;\n};\n\nfunction syntaxStatus(text: string): 'empty' | 'valid' | 'invalid' {\n  const t = text.trim();\n  if (t === '') return 'empty';\n  try {\n    JSON.parse(t);\n    return 'valid';\n  } catch {\n    return 'invalid';\n  }\n}\n\nconst FormJsonField = ({ label, name, value, required, hint, error, onClearError }: FormJsonFieldProps) => {\n  const [text, setText] = useState(value);\n  useEffect(() => {\n    setText(value);\n  }, [value]);\n  const status = useMemo(() => syntaxStatus(text), [text]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      setText(e.target.value);\n      onClearError?.(name);\n    },\n    [name, onClearError],\n  );\n\n  const statusLine =\n    status === 'empty' ? (\n      <span className=\"octo-ff-json__status octo-ff-json__status--empty\">\n        {required ? 'Enter JSON…' : 'Optional — leave empty for no value'}\n      </span>\n    ) : status === 'valid' ? (\n      <span className=\"octo-ff-json__status octo-ff-json__status--valid\">Valid JSON</span>\n    ) : (\n      <span className=\"octo-ff-json__status octo-ff-json__status--invalid\">Invalid JSON</span>\n    );\n\n  return (\n    <Field label={label} htmlFor={name} schema=\"json\" required={required} hint={hint} error={error}>\n      <textarea\n        id={name}\n        className={cn(FIELD_TEXTAREA_CLASS, 'octo-ff-json__textarea', error && 'octo-textarea octo-textarea--error')}\n        name={name}\n        value={text}\n        onChange={handleChange}\n        spellCheck={false}\n        aria-invalid={error ? true : undefined}\n      />\n      <div className=\"octo-ff-json__status\">{statusLine}</div>\n    </Field>\n  );\n};\n\nexport default FormJsonField;\n"],"mappings":";;AA+CM,cAUF,YAVE;AA7CN,SAAgB,aAAa,WAAW,SAAS,gBAAgB;AAEjE,SAAS,UAAU;AAEnB,SAAS,aAAa;AACtB,SAAS,4BAA4B;AAYrC,SAAS,aAAa,MAA6C;AACjE,QAAM,IAAI,KAAK,KAAK;AACpB,MAAI,MAAM,GAAI,QAAO;AACrB,MAAI;AACF,SAAK,MAAM,CAAC;AACZ,WAAO;AAAA,EACT,SAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,MAAM,gBAAgB,CAAC,EAAE,OAAO,MAAM,OAAO,UAAU,MAAM,OAAO,aAAa,MAA0B;AACzG,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,YAAU,MAAM;AACd,YAAQ,KAAK;AAAA,EACf,GAAG,CAAC,KAAK,CAAC;AACV,QAAM,SAAS,QAAQ,MAAM,aAAa,IAAI,GAAG,CAAC,IAAI,CAAC;AAEvD,QAAM,eAAe;AAAA,IACnB,CAAC,MAA8C;AAC7C,cAAQ,EAAE,OAAO,KAAK;AACtB,mDAAe;AAAA,IACjB;AAAA,IACA,CAAC,MAAM,YAAY;AAAA,EACrB;AAEA,QAAM,aACJ,WAAW,UACT,oBAAC,UAAK,WAAU,oDACb,qBAAW,qBAAgB,4CAC9B,IACE,WAAW,UACb,oBAAC,UAAK,WAAU,oDAAmD,wBAAU,IAE7E,oBAAC,UAAK,WAAU,sDAAqD,0BAAY;AAGrF,SACE,qBAAC,SAAM,OAAc,SAAS,MAAM,QAAO,QAAO,UAAoB,MAAY,OAChF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,GAAG,sBAAsB,0BAA0B,SAAS,oCAAoC;AAAA,QAC3G;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,gBAAc,QAAQ,OAAO;AAAA;AAAA,IAC/B;AAAA,IACA,oBAAC,SAAI,WAAU,wBAAwB,sBAAW;AAAA,KACpD;AAEJ;AAEA,IAAO,wBAAQ;","names":[]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormMarkdownField.d.ts","sourceRoot":"","sources":["../../../../components/ui/FormField/FormMarkdownField.tsx"],"names":[],"mappings":"AA8BA,KAAK,sBAAsB,GAAG;IAC5B,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;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,6DAA6D,sBAAsB,4CAuE7G,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-B5LE2OEC.js";
+import "../../../chunk-B5LE2OEC.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import {
@@ -16,14 +16,14 @@ import {
   InsertImage,
   toolbarPlugin
 } from "@mdxeditor/editor";
-import { useUploadMedia } from "../admin/query/hooks/useMediaMutations";
-import { toast } from "../hooks/useToast";
-import { suggestedTitleFromFileName } from "../lib/suggestedMediaTitle";
-import { cn } from "../lib/utils";
-import { ErrorBoundary } from "./ErrorBoundary";
-import { FieldHintAndError } from "./FieldHintAndError";
-import { MarkdownImageEditToolbar } from "./MediaManager/MarkdownImageEditToolbar";
-import { MarkdownInsertImageDialog } from "./MediaManager/MarkdownInsertImageDialog";
+import { useUploadMedia } from "../../../admin/query/hooks/useMediaMutations";
+import { toast } from "../../../hooks/useToast";
+import { suggestedTitleFromFileName } from "../../../lib/suggestedMediaTitle";
+import { cn } from "../../../lib/utils";
+import { ErrorBoundary } from "../../ErrorBoundary/ErrorBoundary";
+import { Field } from "./Field";
+import { MarkdownImageEditToolbar } from "../../MediaManager/MarkdownImageEditToolbar";
+import { MarkdownInsertImageDialog } from "../../MediaManager/MarkdownInsertImageDialog";
 const FormMarkdownField = ({ label, name, value, required, hint, error, onClearError }) => {
   const markdownFieldRef = useRef(null);
   const markdownTextareRef = useRef(null);
@@ -58,11 +58,7 @@ const FormMarkdownField = ({ label, name, value, required, hint, error, onClearE
       throw e;
     }
   };
-  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: "markdown", required, hint, error, className: "octo-ff-markdown", children: [
     /* @__PURE__ */ jsx("input", { type: "hidden", ref: markdownTextareRef, name, defaultValue: value }),
     /* @__PURE__ */ jsx(ErrorBoundary, { label: "markdown editor", children: /* @__PURE__ */ jsx(
       MDXEditor,
@@ -76,10 +72,6 @@ const FormMarkdownField = ({ label, name, value, required, hint, error, onClearE
           imagePlugin({
             imageUploadHandler: handleImageUpload,
             ImageDialog: MarkdownInsertImageDialog,
-            // The plugin's public type is `FC<{}>` but the runtime passes
-            // EditImageToolbarProps (nodeKey/imageSource/alt/title/...) — see
-            // node_modules/@mdxeditor/editor/dist/plugins/image/EditImageToolbar.js
-            // for the actual call site. Cast away the type narrowing.
             EditImageToolbar: MarkdownImageEditToolbar
           }),
           toolbarPlugin({
@@ -96,8 +88,7 @@ const FormMarkdownField = ({ label, name, value, required, hint, error, onClearE
         onChange: onMarkdownChange,
         className: cn("editor-markdown", error && "editor-markdown--invalid")
       }
-    ) }),
-    /* @__PURE__ */ jsx(FieldHintAndError, { hint, error })
+    ) })
   ] });
 };
 var FormMarkdownField_default = FormMarkdownField;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../components/ui/FormField/FormMarkdownField.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\n\nimport {\n  MDXEditorMethods,\n  MDXEditor,\n  headingsPlugin,\n  listsPlugin,\n  quotePlugin,\n  thematicBreakPlugin,\n  imagePlugin,\n  CreateLink,\n  BlockTypeSelect,\n  ListsToggle,\n  BoldItalicUnderlineToggles,\n  InsertImage,\n  toolbarPlugin,\n} from '@mdxeditor/editor';\n\nimport { useUploadMedia } from '../../../admin/query/hooks/useMediaMutations';\nimport { toast } from '../../../hooks/useToast';\nimport { suggestedTitleFromFileName } from '../../../lib/suggestedMediaTitle';\nimport { cn } from '../../../lib/utils';\n\nimport { ErrorBoundary } from '../../ErrorBoundary/ErrorBoundary';\nimport { Field } from './Field';\nimport { MarkdownImageEditToolbar } from '../../MediaManager/MarkdownImageEditToolbar';\nimport { MarkdownInsertImageDialog } from '../../MediaManager/MarkdownInsertImageDialog';\n\ntype FormMarkdownFieldProps = {\n  label: string;\n  name: string;\n  value: string;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  onClearError?: (name: string) => void;\n};\n\nconst FormMarkdownField = ({ label, name, value, required, hint, error, onClearError }: FormMarkdownFieldProps) => {\n  const markdownFieldRef = useRef<MDXEditorMethods>(null);\n  const markdownTextareRef = useRef<HTMLInputElement>(null);\n  const uploadMutation = useUploadMedia();\n\n  const onMarkdownChange = () => {\n    const input = markdownTextareRef.current;\n    if (input) {\n      input.value = markdownFieldRef.current?.getMarkdown() || '';\n    }\n    onClearError?.(name);\n  };\n\n  useEffect(() => {\n    markdownFieldRef.current?.setMarkdown(value);\n  }, [value]);\n\n  const handleImageUpload = async (file: File): Promise<string> => {\n    const fd = new FormData();\n    fd.set('file', file);\n    fd.set('folder', '/');\n    fd.set('title', suggestedTitleFromFileName(file.name));\n    fd.set('generateBlur', '1');\n    try {\n      const result = await uploadMutation.mutateAsync(fd);\n      const ext = (file.name.split('.').pop() || '').toLowerCase();\n      return `/media/${result.id}.${ext}`;\n    } catch (e) {\n      toast({\n        title: e instanceof Error ? e.message : 'Image upload failed',\n        variant: 'destructive',\n      });\n      throw e;\n    }\n  };\n\n  return (\n    <Field label={label} schema=\"markdown\" required={required} hint={hint} error={error} className=\"octo-ff-markdown\">\n      <input type=\"hidden\" ref={markdownTextareRef} name={name} defaultValue={value} />\n      <ErrorBoundary label=\"markdown editor\">\n        <MDXEditor\n          markdown=\"\"\n          plugins={[\n            headingsPlugin(),\n            listsPlugin(),\n            quotePlugin(),\n            thematicBreakPlugin(),\n            imagePlugin({\n              imageUploadHandler: handleImageUpload,\n              ImageDialog: MarkdownInsertImageDialog,\n              EditImageToolbar: MarkdownImageEditToolbar as unknown as React.FC,\n            }),\n            toolbarPlugin({\n              toolbarContents: () => (\n                <>\n                  <BoldItalicUnderlineToggles />\n                  <CreateLink />\n                  <InsertImage />\n                  <ListsToggle />\n                  <BlockTypeSelect />\n                </>\n              ),\n            }),\n          ]}\n          ref={markdownFieldRef}\n          onChange={onMarkdownChange}\n          className={cn('editor-markdown', error && 'editor-markdown--invalid')}\n        />\n      </ErrorBoundary>\n    </Field>\n  );\n};\n\nexport default FormMarkdownField;\n"],"mappings":";;AA8EM,SAgBU,UAhBV,KAgBU,YAhBV;AA5EN,SAAgB,QAAQ,iBAAiB;AAEzC;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAC/B,SAAS,aAAa;AACtB,SAAS,kCAAkC;AAC3C,SAAS,UAAU;AAEnB,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,gCAAgC;AACzC,SAAS,iCAAiC;AAY1C,MAAM,oBAAoB,CAAC,EAAE,OAAO,MAAM,OAAO,UAAU,MAAM,OAAO,aAAa,MAA8B;AACjH,QAAM,mBAAmB,OAAyB,IAAI;AACtD,QAAM,qBAAqB,OAAyB,IAAI;AACxD,QAAM,iBAAiB,eAAe;AAEtC,QAAM,mBAAmB,MAAM;AA7CjC;AA8CI,UAAM,QAAQ,mBAAmB;AACjC,QAAI,OAAO;AACT,YAAM,UAAQ,sBAAiB,YAAjB,mBAA0B,kBAAiB;AAAA,IAC3D;AACA,iDAAe;AAAA,EACjB;AAEA,YAAU,MAAM;AArDlB;AAsDI,2BAAiB,YAAjB,mBAA0B,YAAY;AAAA,EACxC,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,oBAAoB,OAAO,SAAgC;AAC/D,UAAM,KAAK,IAAI,SAAS;AACxB,OAAG,IAAI,QAAQ,IAAI;AACnB,OAAG,IAAI,UAAU,GAAG;AACpB,OAAG,IAAI,SAAS,2BAA2B,KAAK,IAAI,CAAC;AACrD,OAAG,IAAI,gBAAgB,GAAG;AAC1B,QAAI;AACF,YAAM,SAAS,MAAM,eAAe,YAAY,EAAE;AAClD,YAAM,OAAO,KAAK,KAAK,MAAM,GAAG,EAAE,IAAI,KAAK,IAAI,YAAY;AAC3D,aAAO,UAAU,OAAO,EAAE,IAAI,GAAG;AAAA,IACnC,SAAS,GAAG;AACV,YAAM;AAAA,QACJ,OAAO,aAAa,QAAQ,EAAE,UAAU;AAAA,QACxC,SAAS;AAAA,MACX,CAAC;AACD,YAAM;AAAA,IACR;AAAA,EACF;AAEA,SACE,qBAAC,SAAM,OAAc,QAAO,YAAW,UAAoB,MAAY,OAAc,WAAU,oBAC7F;AAAA,wBAAC,WAAM,MAAK,UAAS,KAAK,oBAAoB,MAAY,cAAc,OAAO;AAAA,IAC/E,oBAAC,iBAAc,OAAM,mBACnB;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,SAAS;AAAA,UACP,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,oBAAoB;AAAA,UACpB,YAAY;AAAA,YACV,oBAAoB;AAAA,YACpB,aAAa;AAAA,YACb,kBAAkB;AAAA,UACpB,CAAC;AAAA,UACD,cAAc;AAAA,YACZ,iBAAiB,MACf,iCACE;AAAA,kCAAC,8BAA2B;AAAA,cAC5B,oBAAC,cAAW;AAAA,cACZ,oBAAC,eAAY;AAAA,cACb,oBAAC,eAAY;AAAA,cACb,oBAAC,mBAAgB;AAAA,eACnB;AAAA,UAEJ,CAAC;AAAA,QACH;AAAA,QACA,KAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAW,GAAG,mBAAmB,SAAS,0BAA0B;AAAA;AAAA,IACtE,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,4BAAQ;","names":[]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormNumberField.d.ts","sourceRoot":"","sources":["../../../../components/ui/FormField/FormNumberField.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;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,eAAe,GAAI,2EAWtB,oBAAoB,4CAoBtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,38 @@
+"use client";
+import "../../../chunk-B5LE2OEC.js";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "./Field";
+import { FieldShell, FIELD_INPUT_CLASS } from "./FieldShell";
+const FormNumberField = ({
+  label,
+  name,
+  value,
+  required,
+  hint,
+  error,
+  min,
+  max,
+  step,
+  valueType
+}) => {
+  const resolvedStep = step !== void 0 ? step : valueType === "int" ? 1 : "any";
+  return /* @__PURE__ */ jsx(Field, { label, htmlFor: name, schema: "number", required, hint, error, children: /* @__PURE__ */ jsx(FieldShell, { error: !!error, className: "octo-ff-number__shell", children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: name,
+      className: FIELD_INPUT_CLASS,
+      type: "number",
+      name,
+      defaultValue: value,
+      min,
+      max,
+      step: resolvedStep,
+      "aria-invalid": error ? true : void 0
+    }
+  ) }) });
+};
+var FormNumberField_default = FormNumberField;
+export {
+  FormNumberField_default as default
+};
+//# sourceMappingURL=FormNumberField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../components/ui/FormField/FormNumberField.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { Field } from './Field';\nimport { FieldShell, FIELD_INPUT_CLASS } from './FieldShell';\n\ntype FormNumberFieldProps = {\n  label: string;\n  name: string;\n  value: string;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n  min?: number;\n  max?: number;\n  step?: number | 'any';\n  valueType?: 'int' | 'float';\n};\n\nconst FormNumberField = ({\n  label,\n  name,\n  value,\n  required,\n  hint,\n  error,\n  min,\n  max,\n  step,\n  valueType,\n}: FormNumberFieldProps) => {\n  const resolvedStep = step !== undefined ? step : valueType === 'int' ? 1 : 'any';\n\n  return (\n    <Field label={label} htmlFor={name} schema=\"number\" required={required} hint={hint} error={error}>\n      <FieldShell error={!!error} className=\"octo-ff-number__shell\">\n        <input\n          id={name}\n          className={FIELD_INPUT_CLASS}\n          type=\"number\"\n          name={name}\n          defaultValue={value}\n          min={min}\n          max={max}\n          step={resolvedStep}\n          aria-invalid={error ? true : undefined}\n        />\n      </FieldShell>\n    </Field>\n  );\n};\n\nexport default FormNumberField;\n"],"mappings":";;AAqCQ;AAjCR,SAAS,aAAa;AACtB,SAAS,YAAY,yBAAyB;AAe9C,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AAC1B,QAAM,eAAe,SAAS,SAAY,OAAO,cAAc,QAAQ,IAAI;AAE3E,SACE,oBAAC,SAAM,OAAc,SAAS,MAAM,QAAO,UAAS,UAAoB,MAAY,OAClF,8BAAC,cAAW,OAAO,CAAC,CAAC,OAAO,WAAU,yBACpC;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,MAAK;AAAA,MACL;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,gBAAc,QAAQ,OAAO;AAAA;AAAA,EAC/B,GACF,GACF;AAEJ;AAEA,IAAO,0BAAQ;","names":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormReferenceField.d.ts","sourceRoot":"","sources":["../../../../components/ui/FormField/FormReferenceField.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAU,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAUzE,KAAK,uBAAuB,GAAG;IAC7B,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,yFAAyF;IACzF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC,CAAC;AAuUF,QAAA,MAAM,kBAAkB,GAAI,kGAUzB,uBAAuB,4CAkSzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}