@kyro-cms/admin 0.1.7 → 0.1.9

package/src/components/fields/CodeField.tsx

@@ -1,14 +1,8 @@
-import React, {
-  useCallback,
-  useMemo,
-  useEffect,
-  useState,
-  Suspense,
-  lazy,
-} from "react";
+import React, { useCallback, useEffect, useState, Suspense, lazy } from "react";
 import { githubLight } from "@uiw/codemirror-theme-github";
 import { aura } from "@uiw/codemirror-theme-aura";
-import type { CodeField as CodeFieldType } from "@kyro-cms/core";
+import type { CodeField as CodeFieldType } from "@kyro-cms/core/client";
+import { useTheme } from "../ThemeProvider";
 
 interface CodeFieldProps {
   field: CodeFieldType;
@@ -18,27 +12,24 @@ interface CodeFieldProps {
   disabled?: boolean;
 }
 
-// Lazy-loaded CodeMirror wrapper component
 const CodeMirrorEditor = lazy(() =>
   import("@uiw/react-codemirror").then((mod) => ({ default: mod.default })),
 );
 
 const LANGUAGES = [
-  { value: "javascript", label: "JavaScript", ext: "javascript" },
-  { value: "typescript", label: "TypeScript", ext: "javascript" },
-  { value: "json", label: "JSON", ext: "json" },
-  { value: "html", label: "HTML", ext: "html" },
-  { value: "css", label: "CSS", ext: "css" },
-  { value: "sql", label: "SQL", ext: "sql" },
-  { value: "python", label: "Python", ext: "python" },
-  { value: "rust", label: "Rust", ext: "rust" },
-  { value: "java", label: "Java", ext: "java" },
-  { value: "cpp", label: "C++", ext: "cpp" },
-  { value: "php", label: "PHP", ext: "php" },
-  { value: "markdown", label: "Markdown", ext: "markdown" },
+  { value: "javascript", label: "JavaScript" },
+  { value: "typescript", label: "TypeScript" },
+  { value: "json", label: "JSON" },
+  { value: "html", label: "HTML" },
+  { value: "css", label: "CSS" },
+  { value: "sql", label: "SQL" },
+  { value: "python", label: "Python" },
+  { value: "rust", label: "Rust" },
+  { value: "java", label: "Java" },
+  { value: "php", label: "PHP" },
+  { value: "markdown", label: "Markdown" },
 ];
 
-// Language extension loader
 const languageExtensions: Record<string, () => Promise<any>> = {
   javascript: () =>
     import("@codemirror/lang-javascript").then((m) =>
@@ -85,29 +76,28 @@ export const CodeField: React.FC<CodeFieldProps> = ({
   const [isDark, setIsDark] = useState(false);
   const [extensions, setExtensions] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [isFullScreen, setIsFullScreen] = useState(false);
 
+  const { theme } = useTheme();
+  const accent = theme.colors?.accent || theme.colors?.primary || "#6366f1";
   const language = field.language?.toLowerCase() || "javascript";
 
   useEffect(() => {
     setIsMounted(true);
     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();
   }, []);
 
-  // Load language extensions dynamically
   useEffect(() => {
     if (!isMounted) return;
-
     const loadExtensions = async () => {
       setLoading(true);
       try {
@@ -122,113 +112,183 @@ export const CodeField: React.FC<CodeFieldProps> = ({
         setLoading(false);
       }
     };
-
     loadExtensions();
   }, [language, isMounted]);
 
   const handleChange = useCallback(
-    (val: string) => {
-      onChange?.(val);
-    },
+    (val: string) => onChange?.(val),
     [onChange],
   );
 
-  const theme = isDark ? aura : githubLight;
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [value]);
+
+  const toggleFullScreen = useCallback(() => {
+    setIsFullScreen((prev) => !prev);
+    document.body.style.overflow = !isFullScreen ? "hidden" : "";
+  }, [isFullScreen]);
+
+  const codeMirrorTheme = isDark ? aura : githubLight;
+  const langLabel =
+    LANGUAGES.find((l) => l.value === language)?.label || language;
+
+  const hexToRgba = (hex: string, alpha: number = 1) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  };
 
   if (!isMounted) {
     return (
-      <div className="kyro-form-field">
-        <label className="kyro-form-label">
-          {field.label || field.name}
-          {field.required && (
-            <span className="kyro-form-label-required">*</span>
-          )}
-        </label>
-        <div className="h-[300px] bg-[var(--kyro-surface)] animate-pulse rounded-md" />
+      <div className="space-y-3">
+        <div className="flex items-center gap-3">
+          <div className="h-5 w-24 rounded bg-[var(--kyro-surface-accent)] animate-pulse" />
+          <div className="h-5 w-16 rounded bg-[var(--kyro-surface-accent)] animate-pulse" />
+        </div>
+        <div className="h-[280px] rounded-xl bg-[var(--kyro-surface-accent)] animate-pulse" />
       </div>
     );
   }
 
   return (
-    <div className="kyro-form-field">
+    <div
+      className="group"
+      style={
+        {
+          "--accent": accent,
+          "--accent-light": hexToRgba(accent, 0.1),
+          "--accent-light-2": hexToRgba(accent, 0.05),
+        } as React.CSSProperties
+      }
+    >
+      {/* Header */}
       <div className="flex items-center justify-between mb-2">
-        <label className="kyro-form-label">
-          {field.label || field.name}
-          {field.required && (
-            <span className="kyro-form-label-required">*</span>
-          )}
-        </label>
-
-        {/* Language indicator */}
         <div className="flex items-center gap-2">
-          {loading && (
-            <span className="text-xs text-[var(--kyro-text-muted)] animate-pulse">
-              Loading...
-            </span>
-          )}
-          <span className="text-xs text-[var(--kyro-text-muted)]">
-            {LANGUAGES.find((l) => l.value === language)?.label || language}
+          <span className="text-sm font-semibold text-[var(--kyro-text-primary)]">
+            {field.label || field.name}
+          </span>
+          <span
+            className="text-[10px] px-1.5 py-0.5 rounded font-semibold transition-colors"
+            style={{
+              backgroundColor: loading ? "var(--kyro-surface-accent)" : accent,
+              color: loading ? "var(--kyro-text-muted)" : "white",
+            }}
+          >
+            {loading ? "..." : langLabel}
           </span>
         </div>
+
+        {/* Action buttons */}
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={handleCopy}
+            className="text-[10px] px-2 py-0.5 rounded font-medium transition-all"
+            style={{
+              backgroundColor: copied
+                ? "var(--kyro-success)"
+                : "var(--kyro-surface-accent)",
+              color: copied ? "white" : "var(--kyro-text-secondary)",
+            }}
+          >
+            {copied ? "Copied" : "Copy"}
+          </button>
+          <button
+            type="button"
+            onClick={toggleFullScreen}
+            className="text-[10px] px-2 py-0.5 rounded font-medium bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-border)] transition-all"
+            style={{ color: "var(--kyro-text-secondary)" }}
+          >
+            {isFullScreen ? "Exit" : "Expand"}
+          </button>
+        </div>
       </div>
 
+      {/* Editor container */}
       <div
-        className={`border border-[var(--kyro-border)] rounded-md overflow-hidden ${
-          disabled ? "opacity-50 cursor-not-allowed" : ""
-        } ${error ? "border-red-500" : ""}`}
+        className={`relative rounded-md overflow-hidden transition-all duration-200 ${
+          isFullScreen ? "fixed inset-4 z-50" : ""
+        }`}
+        style={{
+          backgroundColor: "var(--kyro-surface)",
+          borderColor: error ? "var(--kyro-error)" : "var(--kyro-border)",
+          borderWidth: "1px",
+        }}
       >
+        {/* Top accent bar */}
+        <div
+          className="absolute top-0 left-0 right-0 h-0.5 transition-all duration-200"
+          style={{ backgroundColor: accent }}
+        />
+
         <Suspense
           fallback={
-            <div className="h-[300px] bg-[var(--kyro-surface)] animate-pulse flex items-center justify-center">
-              <span className="text-xs text-[var(--kyro-text-muted)]">
-                Loading editor...
-              </span>
+            <div
+              className="h-[280px] flex items-center justify-center"
+              style={{ backgroundColor: "var(--kyro-surface)" }}
+            >
+              <div
+                className="w-6 h-6 rounded-full animate-spin"
+                style={{
+                  borderColor: "var(--kyro-border)",
+                  borderTopColor: accent,
+                  borderWidth: "2px",
+                }}
+              />
             </div>
           }
         >
           <CodeMirrorEditor
             value={value}
-            height="300px"
+            height={isFullScreen ? "calc(100vh - 100px)" : "280px"}
+            width="100%"
             extensions={extensions}
-            theme={theme}
+            theme={codeMirrorTheme}
             onChange={handleChange}
             editable={!disabled}
-            basicSetup={true}
+            basicSetup={{
+              lineNumbers: true,
+              highlightActiveLine: true,
+              bracketMatching: true,
+              closeBrackets: true,
+              autocompletion: true,
+              foldGutter: true,
+            }}
             style={{
               fontSize: "13px",
-              fontFamily:
-                "'Fira Code', 'JetBrains Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace",
+              fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
             }}
           />
         </Suspense>
-      </div>
 
-      {/* Editor hints */}
-      <div className="flex items-center gap-4 mt-2 text-xs text-[var(--kyro-text-muted)]">
-        <span>
-          <kbd className="px-1.5 py-0.5 bg-[var(--kyro-surface-accent)] rounded text-[10px] font-mono">
-            Ctrl+F
-          </kbd>{" "}
-          Search
-        </span>
-        <span>
-          <kbd className="px-1.5 py-0.5 bg-[var(--kyro-surface-accent)] rounded text-[10px] font-mono">
-            Ctrl+Space
-          </kbd>{" "}
-          Autocomplete
-        </span>
-        <span>
-          <kbd className="px-1.5 py-0.5 bg-[var(--kyro-surface-accent)] rounded text-[10px] font-mono">
-            Ctrl+Z
-          </kbd>{" "}
-          Undo
-        </span>
+        {/* Error message */}
+        {error && (
+          <div
+            className="absolute bottom-0 left-0 right-0 px-3 py-2 text-xs font-medium"
+            style={{
+              backgroundColor: "var(--kyro-danger-bg)",
+              color: "var(--kyro-error)",
+            }}
+          >
+            {error}
+          </div>
+        )}
       </div>
 
-      {field.admin?.description && !error && (
-        <p className="kyro-form-help">{field.admin.description}</p>
-      )}
-      {error && <p className="kyro-form-error">{error}</p>}
+      {/* Footer */}
+      <div
+        className="flex items-center justify-between mt-2 text-[10px]"
+        style={{ color: "var(--kyro-text-muted)" }}
+      >
+        <span>{value.split("\n").length} lines</span>
+        <span style={{ color: accent }}>CodeMirror</span>
+      </div>
     </div>
   );
 };
+
+export default CodeField;

package/src/components/fields/ColumnsField.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+import { ChildBlocksTree } from "../blocks/ChildBlocksTree";
+
+interface ColumnData {
+  id: number;
+  children: any[];
+}
+
+interface ColumnsFieldProps {
+  columns?: number;
+  columnData?: ColumnData[];
+  onColumnsChange: (columns: number) => void;
+  onUpdateColumnChildren: (columnIndex: number, newChildren: any[]) => void;
+  compact?: boolean;
+}
+
+export const ColumnsField: React.FC<ColumnsFieldProps> = ({
+  columns = 2,
+  columnData = [],
+  onColumnsChange,
+  onUpdateColumnChildren,
+  compact = false,
+}) => {
+  const normalizedColumnData = Array.from({ length: columns }, (_, i) => ({
+    id: i,
+    children: columnData[i]?.children || [],
+  }));
+
+  if (compact) {
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-medium text-[var(--kyro-text-muted)]">
+            Columns:
+          </span>
+          <div className="flex items-center gap-0.5 bg-[var(--kyro-surface-accent)] rounded-lg p-0.5">
+            {Array.from({ length: 6 }, (_, i) => i + 1).map((n) => (
+              <button
+                key={n}
+                type="button"
+                onClick={() => onColumnsChange(n)}
+                className={`px-2.5 py-1 rounded-md text-xs font-medium transition-all ${
+                  columns === n
+                    ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-sm"
+                    : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
+                }`}
+              >
+                {n}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className="overflow-x-auto pb-1">
+          <div className="flex gap-2 min-w-fit">
+            {normalizedColumnData.map((col, i) => (
+              <div
+                key={i}
+                className="w-[180px] border-2 border-dashed border-[var(--kyro-border)] rounded-lg p-2"
+              >
+                <div className="flex items-center justify-between mb-1.5 pb-1 border-b border-[var(--kyro-border)]">
+                  <span className="text-[10px] font-medium text-[var(--kyro-text-muted)]">
+                    Col {i + 1}
+                  </span>
+                  <span className="text-[10px] text-[var(--kyro-text-muted)]">
+                    {col.children.length}
+                  </span>
+                </div>
+                <ChildBlocksTree
+                  blockId={`col-${i}`}
+                  children={col.children}
+                  onUpdateChildren={(c) => onUpdateColumnChildren(i, c)}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <span className="text-xs font-medium text-[var(--kyro-text-muted)]">
+          Columns:
+        </span>
+        <div className="flex items-center gap-0.5 bg-[var(--kyro-surface-accent)] rounded-lg p-0.5">
+          {Array.from({ length: 6 }, (_, i) => i + 1).map((n) => (
+            <button
+              key={n}
+              type="button"
+              onClick={() => onColumnsChange(n)}
+              className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                columns === n
+                  ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-sm"
+                  : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
+              }`}
+            >
+              {n}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="overflow-x-auto pb-2">
+        <div
+          className="grid gap-3 min-w-fit"
+          style={{
+            gridTemplateColumns: `repeat(${columns}, minmax(200px, 1fr))`,
+          }}
+        >
+          {normalizedColumnData.map((col, i) => (
+            <div
+              key={i}
+              className="border-2 border-dashed border-[var(--kyro-border)] rounded-lg p-3"
+            >
+              <div className="flex items-center justify-between mb-3 pb-2 border-b border-[var(--kyro-border)]">
+                <span className="text-xs font-medium text-[var(--kyro-text-primary)]">
+                  Column {i + 1}
+                </span>
+                <span className="text-[10px] text-[var(--kyro-text-muted)]">
+                  {col.children.length} blocks
+                </span>
+              </div>
+              <ChildBlocksTree
+                blockId={`col-${i}`}
+                children={col.children}
+                onUpdateChildren={(c) => onUpdateColumnChildren(i, c)}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ColumnsField;

package/src/components/fields/DateField.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useState } from "react";
-import type { DateField as DateFieldType } from "@kyro-cms/core";
+import type { DateField as DateFieldType } from "@kyro-cms/core/client";
 
 interface DateFieldComponentProps {
   field: DateFieldType;
@@ -16,26 +15,14 @@ export default function DateField({
   error,
   disabled,
 }: DateFieldComponentProps) {
-  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
@@ -48,22 +35,20 @@ export default function DateField({
         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>
   );
 }