@kyro-cms/admin 0.1.7 → 0.1.9

package/src/components/fields/HeadingField.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface HeadingFieldProps {
+  text?: string;
+  onChange: (field: string, value: string) => void;
+  compact?: boolean;
+}
+
+export const HeadingField: React.FC<HeadingFieldProps> = ({
+  text = "",
+  onChange,
+  compact = false,
+}) => {
+  const inputClass = compact
+    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+    : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
+
+  return (
+    <div className={compact ? "" : "space-y-3"}>
+      <input
+        type="text"
+        value={text}
+        onChange={(e) => onChange("text", e.target.value)}
+        className={inputClass}
+        placeholder="Enter heading text..."
+      />
+    </div>
+  );
+};
+
+export default HeadingField;

package/src/components/fields/HeroField.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+
+interface HeroFieldProps {
+  heading?: string;
+  subheading?: string;
+  ctaText?: string;
+  ctaUrl?: string;
+  onChange: (field: string, value: string) => void;
+  compact?: boolean;
+}
+
+export const HeroField: React.FC<HeroFieldProps> = ({
+  heading = "",
+  subheading = "",
+  ctaText = "",
+  ctaUrl = "",
+  onChange,
+  compact = false,
+}) => {
+  const inputClass = compact
+    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+    : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
+
+  const textareaClass = compact
+    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] min-h-[50px] resize-none focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+    : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] min-h-[80px] resize-none focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
+
+  if (compact) {
+    return (
+      <div className="space-y-2">
+        <input
+          type="text"
+          value={heading}
+          onChange={(e) => onChange("heading", e.target.value)}
+          className={`${inputClass} font-bold text-base`}
+          placeholder="Hero heading..."
+        />
+        <textarea
+          value={subheading}
+          onChange={(e) => onChange("subheading", e.target.value)}
+          className={textareaClass}
+          placeholder="Hero subheading..."
+        />
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            value={ctaText}
+            onChange={(e) => onChange("ctaText", e.target.value)}
+            className="flex-1 px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+            placeholder="CTA text..."
+          />
+          <span className="text-[var(--kyro-text-muted)] text-xs">→</span>
+          <input
+            type="url"
+            value={ctaUrl}
+            onChange={(e) => onChange("ctaUrl", e.target.value)}
+            className="flex-1 px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent font-mono text-xs"
+            placeholder="https://..."
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <input
+        type="text"
+        value={heading}
+        onChange={(e) => onChange("heading", e.target.value)}
+        className={`${inputClass} font-bold text-base`}
+        placeholder="Hero heading..."
+      />
+      <textarea
+        value={subheading}
+        onChange={(e) => onChange("subheading", e.target.value)}
+        className={textareaClass}
+        placeholder="Hero subheading..."
+      />
+      <div className="flex items-center gap-2">
+        <input
+          type="text"
+          value={ctaText}
+          onChange={(e) => onChange("ctaText", e.target.value)}
+          className="flex-1 px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+          placeholder="CTA text..."
+        />
+        <span className="text-[var(--kyro-text-muted)] text-xs">→</span>
+        <input
+          type="url"
+          value={ctaUrl}
+          onChange={(e) => onChange("ctaUrl", e.target.value)}
+          className="flex-1 px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent font-mono text-xs"
+          placeholder="https://..."
+        />
+      </div>
+    </div>
+  );
+};
+
+export default HeroField;

package/src/components/fields/JSONField.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo, useEffect } from "react";
-import type { JSONField as JSONFieldType } from "@kyro-cms/core";
+import type { JSONField as JSONFieldType } from "@kyro-cms/core/client";
 
 interface JSONFieldProps {
   field: JSONFieldType;
@@ -31,23 +31,9 @@ export const JSONField: React.FC<JSONFieldProps> = ({
   const [parseError, setParseError] = useState<string | null>(null);
   const [viewMode, setViewMode] = useState<"text" | "tree">("text");
   const [isMounted, setIsMounted] = useState(false);
-  const [isDark, setIsDark] = useState(false);
 
   useEffect(() => {
     setIsMounted(true);
-    setIsDark(document.documentElement.classList.contains("dark"));
-
-    // Listen for theme changes
-    const observer = new MutationObserver(() => {
-      setIsDark(document.documentElement.classList.contains("dark"));
-    });
-
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"],
-    });
-
-    return () => observer.disconnect();
   }, []);
 
   const handleTextChange = useCallback(
@@ -177,7 +163,9 @@ export const JSONField: React.FC<JSONFieldProps> = ({
           Copy
         </button>
         {parseError && (
-          <span className="text-xs text-red-500 ml-auto">{parseError}</span>
+          <span className="text-xs text-[var(--kyro-error)] ml-auto">
+            {parseError}
+          </span>
         )}
       </div>
 
@@ -185,7 +173,7 @@ export const JSONField: React.FC<JSONFieldProps> = ({
       <div
         className={`border border-[var(--kyro-border)] rounded-md overflow-hidden ${
           disabled ? "opacity-50 cursor-not-allowed" : ""
-        } ${error || parseError ? "border-red-500" : ""}`}
+        } ${error || parseError ? "border-[var(--kyro-error)]" : ""}`}
       >
         {viewMode === "text" ? (
           <textarea
@@ -193,20 +181,12 @@ export const JSONField: React.FC<JSONFieldProps> = ({
             onChange={(e) => handleTextChange(e.target.value)}
             disabled={disabled}
             rows={8}
-            className={`w-full p-4 font-mono text-sm resize-y focus:outline-none ${
-              isDark
-                ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
-                : "bg-white text-gray-900"
-            }`}
+            className={`w-full p-4 font-mono text-sm resize-y focus:outline-none bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]`}
             placeholder='{"key": "value"}'
           />
         ) : (
           <div
-            className={`p-4 max-h-[400px] overflow-auto ${
-              isDark
-                ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
-                : "bg-white text-gray-900"
-            }`}
+            className={`p-4 max-h-[400px] overflow-auto bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]`}
           >
             {treeData ? (
               <TreeView data={treeData} />

package/src/components/fields/LinkField.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { ExternalLink } from "lucide-react";
+
+interface LinkFieldProps {
+  text?: string;
+  url?: string;
+  onChange: (field: string, value: string) => void;
+  compact?: boolean;
+}
+
+export const LinkField: React.FC<LinkFieldProps> = ({
+  text = "",
+  url = "",
+  onChange,
+  compact = false,
+}) => {
+  return (
+    <div className={compact ? "flex items-center gap-2" : "space-y-2"}>
+      {compact ? (
+        <>
+          <input
+            type="text"
+            value={text}
+            onChange={(e) => onChange("text", e.target.value)}
+            className="flex-1 min-w-0 px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+            placeholder="Link text..."
+          />
+          <span className="text-[var(--kyro-text-muted)] text-xs">→</span>
+          <input
+            type="url"
+            value={url}
+            onChange={(e) => onChange("url", e.target.value)}
+            className="flex-1 min-w-0 px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent font-mono text-xs"
+            placeholder="https://..."
+          />
+          {text && url && (
+            <a
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="shrink-0 p-1.5 rounded text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
+              title={url}
+            >
+              <ExternalLink className="w-3.5 h-3.5" />
+            </a>
+          )}
+        </>
+      ) : (
+        <>
+          <input
+            type="text"
+            value={text}
+            onChange={(e) => onChange("text", e.target.value)}
+            className="w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+            placeholder="Link text..."
+          />
+          <input
+            type="url"
+            value={url}
+            onChange={(e) => onChange("url", e.target.value)}
+            className="w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent font-mono text-xs"
+            placeholder="https://..."
+          />
+          {text && url && (
+            <a
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-2 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
+              title={url}
+            >
+              <ExternalLink className="w-4 h-4" />
+            </a>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default LinkField;

package/src/components/fields/ListField.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+
+interface ListFieldProps {
+  items?: string[];
+  onChange: (items: string[]) => void;
+  compact?: boolean;
+}
+
+export const ListField: React.FC<ListFieldProps> = ({
+  items = [],
+  onChange,
+  compact = false,
+}) => {
+  const [inputValue, setInputValue] = React.useState("");
+
+  const handleAdd = () => {
+    if (inputValue.trim()) {
+      onChange([...items, inputValue.trim()]);
+      setInputValue("");
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleAdd();
+    }
+  };
+
+  const handleRemove = (index: number) => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+
+  const inputClass = compact
+    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+    : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
+
+  return (
+    <div className={compact ? "space-y-1.5" : "space-y-2"}>
+      {items.length === 0 ? (
+        <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-lg">
+          No items. Type below to add.
+        </div>
+      ) : (
+        <div className="space-y-1">
+          {items.map((item, index) => (
+            <div key={index} className="flex items-center gap-2 group/item">
+              <span className="text-sm text-[var(--kyro-text-primary)] flex-1">
+                • {item}
+              </span>
+              <button
+                type="button"
+                onClick={() => handleRemove(index)}
+                className="opacity-0 group-hover/item:opacity-100 p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
+              >
+                ×
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+      <input
+        type="text"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        className={inputClass}
+        placeholder="Type and press Enter to add..."
+      />
+    </div>
+  );
+};
+
+export default ListField;

package/src/components/fields/MarkdownField.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo, useEffect } from "react";
-import type { MarkdownField as MarkdownFieldType } from "@kyro-cms/core";
+import type { MarkdownField as MarkdownFieldType } from "@kyro-cms/core/client";
 
 interface MarkdownFieldProps {
   field: MarkdownFieldType;
@@ -111,23 +111,9 @@ export const MarkdownField: React.FC<MarkdownFieldProps> = ({
 }) => {
   const [showPreview, setShowPreview] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
-  const [isDark, setIsDark] = useState(false);
 
   useEffect(() => {
     setIsMounted(true);
-    setIsDark(document.documentElement.classList.contains("dark"));
-
-    // Listen for theme changes
-    const observer = new MutationObserver(() => {
-      setIsDark(document.documentElement.classList.contains("dark"));
-    });
-
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"],
-    });
-
-    return () => observer.disconnect();
   }, []);
 
   const handleChange = useCallback(
@@ -208,7 +194,7 @@ export const MarkdownField: React.FC<MarkdownFieldProps> = ({
         style={{ pointerEvents: "auto", position: "relative", zIndex: 50 }}
         className={`border border-[var(--kyro-border)] rounded-md overflow-hidden ${
           disabled ? "opacity-50 cursor-not-allowed" : ""
-        } ${error ? "border-red-500" : ""}`}
+        } ${error ? "border-[var(--kyro-error)]" : ""}`}
       >
         {!showPreview ? (
           <textarea
@@ -217,11 +203,7 @@ export const MarkdownField: React.FC<MarkdownFieldProps> = ({
             disabled={disabled}
             rows={12}
             style={{ pointerEvents: "auto", cursor: "text", zIndex: 100 }}
-            className={`w-full p-4 font-mono text-sm resize-y focus:outline-none ${
-              isDark
-                ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
-                : "bg-white text-gray-900"
-            }`}
+            className={`w-full p-4 font-mono text-sm resize-y focus:outline-none bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]`}
             placeholder="Enter markdown content...
 
 # Heading 1
@@ -242,11 +224,7 @@ code block
           />
         ) : (
           <div
-            className={`p-6 min-h-[300px] overflow-auto ${
-              isDark
-                ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
-                : "bg-white text-gray-900"
-            }`}
+            className={`p-6 min-h-[300px] overflow-auto bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]`}
           >
             {value ? (
               <div

package/src/components/fields/NumberField.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useState } from "react";
-import type { NumberField as NumberFieldType } from "@kyro-cms/core";
+import type { NumberField as NumberFieldType } from "@kyro-cms/core/client";
 
 interface NumberFieldComponentProps {
   field: NumberFieldType;
@@ -16,29 +15,14 @@ export default function NumberField({
   error,
   disabled,
 }: NumberFieldComponentProps) {
-  const [isDark, setIsDark] = useState(false);
-
-  useEffect(() => {
-    setIsDark(document.documentElement.classList.contains("dark"));
-
-    const observer = new MutationObserver(() => {
-      setIsDark(document.documentElement.classList.contains("dark"));
-    });
-
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"],
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
   return (
     <div className="space-y-1">
       {field.label && (
-        <label className="block text-sm font-medium">
+        <label className="block text-sm font-medium text-[var(--kyro-text-primary)]">
           {field.label}
-          {field.required && <span className="text-red-500 ml-1">*</span>}
+          {field.required && (
+            <span className="text-[var(--kyro-error)] ml-1">*</span>
+          )}
         </label>
       )}
       <input
@@ -53,22 +37,20 @@ export default function NumberField({
         required={field.required}
         className={`w-full px-3 py-2 border rounded-md text-sm transition-colors ${
           error
-            ? "border-red-300 focus:border-red-500 focus:ring-red-500"
+            ? "border-[var(--kyro-error)] focus:border-[var(--kyro-error)] focus:ring-[var(--kyro-error)]"
             : "border-[var(--kyro-border)] focus:border-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)]"
         } ${
           disabled || field.admin?.readOnly
             ? "bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] opacity-50"
-            : isDark
-              ? "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
-              : "bg-white text-gray-900"
+            : "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
         }`}
       />
       {field.admin?.description && !error && (
-        <p className="text-xs text-[var(--kyro-text-secondary)]">
+        <p className="text-xs text-[var(--kyro-text-muted)]">
           {field.admin.description}
         </p>
       )}
-      {error && <p className="text-xs text-red-600">{error}</p>}
+      {error && <p className="text-xs text-[var(--kyro-error)]">{error}</p>}
     </div>
   );
 }

package/src/components/fields/PortableTextField.tsx

@@ -5,8 +5,8 @@ import React, {
   useCallback,
   lazy,
   Suspense,
+  useRef,
 } from "react";
-import { useTheme } from "../ThemeProvider";
 
 interface PortableTextFieldProps {
   field: {
@@ -24,9 +24,41 @@ interface PortableTextFieldProps {
   disabled?: boolean;
 }
 
-// Lazy load the editor to avoid SSR issues - only loads on client
 const EditorLazy = lazy(() => import("./EditorClient"));
 
+function toPortableTextArray(value: any): any[] {
+  if (Array.isArray(value)) {
+    if (
+      value.length > 0 &&
+      value[0] &&
+      typeof value[0] === "object" &&
+      "_type" in value[0]
+    ) {
+      return value;
+    }
+    if (value.length === 0) return [];
+  }
+  if (typeof value === "string" && value.trim()) {
+    return [
+      {
+        _type: "block",
+        _key: "initial-block",
+        style: "normal",
+        markDefs: [],
+        children: [
+          {
+            _type: "span",
+            _key: "initial-span",
+            text: value,
+            marks: [],
+          },
+        ],
+      },
+    ];
+  }
+  return [];
+}
+
 const PortableTextField: React.FC<PortableTextFieldProps> = ({
   field,
   value,
@@ -34,35 +66,24 @@ const PortableTextField: React.FC<PortableTextFieldProps> = ({
   error,
   disabled,
 }) => {
-  const { theme } = useTheme();
   const [isMounted, setIsMounted] = useState(false);
-
-  const bgColor = theme.colors?.background || "#ffffff";
-  const borderColor = theme.colors?.border || "#e5e7eb";
-  const textColor = theme.colors?.text || "#374151";
-  const textMuted = theme.colors?.textMuted || "#9ca3af";
+  const [editorKey, setEditorKey] = useState(0);
 
   useEffect(() => {
     setIsMounted(true);
   }, []);
 
-  // Parse value to Portable Text JSON format
-  const initialValue = useMemo(() => {
-    if (!value) return [];
-    if (Array.isArray(value)) {
-      // Validate it's proper portable text blocks
-      if (
-        value.length > 0 &&
-        value[0] &&
-        typeof value[0] === "object" &&
-        "_type" in value[0]
-      ) {
-        return value;
-      }
+  const ptValue = useMemo(() => toPortableTextArray(value), [value]);
+
+  const prevPtValueRef = useRef(ptValue);
+  useEffect(() => {
+    const hasChanged =
+      JSON.stringify(ptValue) !== JSON.stringify(prevPtValueRef.current);
+    if (hasChanged && isMounted) {
+      setEditorKey((k) => k + 1);
+      prevPtValueRef.current = ptValue;
     }
-    // If string or invalid, return empty
-    return [];
-  }, [value]);
+  }, [ptValue, isMounted]);
 
   const handleChange = useCallback(
     (blocks: any[]) => {
@@ -79,18 +100,14 @@ const PortableTextField: React.FC<PortableTextFieldProps> = ({
     return (
       <div className="space-y-1.5">
         {field.label && (
-          <label
-            className="block text-sm font-medium"
-            style={{ color: textColor }}
-          >
+          <label className="block text-sm font-medium text-[var(--kyro-text-primary)]">
             {field.label}
-            {field.required && <span className="text-red-500 ml-1">*</span>}
+            {field.required && (
+              <span className="text-[var(--kyro-error)] ml-1">*</span>
+            )}
           </label>
         )}
-        <div
-          className="h-[200px] rounded-lg border animate-pulse"
-          style={{ backgroundColor: bgColor, borderColor }}
-        />
+        <div className="h-[200px] rounded-lg border border-[var(--kyro-border)] animate-pulse bg-[var(--kyro-bg-secondary)]" />
       </div>
     );
   }
@@ -98,44 +115,39 @@ const PortableTextField: React.FC<PortableTextFieldProps> = ({
   return (
     <div className="space-y-1.5">
       {field.label && (
-        <label
-          className="block text-sm font-medium"
-          style={{ color: textColor }}
-        >
+        <label className="block text-sm font-medium text-[var(--kyro-text-primary)]">
           {field.label}
-          {field.required && <span className="text-red-500 ml-1">*</span>}
+          {field.required && (
+            <span className="text-[var(--kyro-error)] ml-1">*</span>
+          )}
         </label>
       )}
       <div
-        className={`border rounded-lg overflow-hidden ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
-        style={{ borderColor }}
+        className={`border border-[var(--kyro-border)] rounded-lg overflow-hidden ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
       >
         <Suspense
           fallback={
-            <div
-              className="h-[200px] flex items-center justify-center"
-              style={{ backgroundColor: bgColor }}
-            >
-              <span className="text-sm" style={{ color: textMuted }}>
+            <div className="h-[200px] flex items-center justify-center bg-[var(--kyro-bg-secondary)]">
+              <span className="text-sm text-[var(--kyro-text-muted)]">
                 Loading editor...
               </span>
             </div>
           }
         >
           <EditorLazy
-            initialValue={initialValue}
+            key={editorKey}
+            initialValue={ptValue}
             onChange={handleChange}
             disabled={disabled}
-            theme={theme}
           />
         </Suspense>
       </div>
       {field.admin?.description && !error && (
-        <p className="text-xs" style={{ color: textMuted }}>
+        <p className="text-xs text-[var(--kyro-text-muted)]">
           {field.admin.description}
         </p>
       )}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-[var(--kyro-error)]">{error}</p>}
     </div>
   );
 };