@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/fields/ChildrenField.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { ChildBlocksTree } from "../blocks/ChildBlocksTree";
+
+interface ChildrenFieldProps {
+  blockId: string;
+  children: any[];
+  onUpdateChildren: (newChildren: any[]) => void;
+  label?: string;
+  compact?: boolean;
+}
+
+export const ChildrenField: React.FC<ChildrenFieldProps> = ({
+  blockId,
+  children,
+  onUpdateChildren,
+  label,
+  compact = false,
+}) => {
+  if (compact) {
+    return (
+      <div className="pt-2 border-t border-[var(--kyro-border)]">
+        <label className="text-[10px] font-medium text-[var(--kyro-text-muted)] mb-1.5 block">
+          {label || `Children (${children.length})`}
+        </label>
+        <ChildBlocksTree
+          blockId={blockId}
+          children={children}
+          onUpdateChildren={onUpdateChildren}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-4 border-t border-[var(--kyro-border)]">
+      <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-2 block">
+        {label || `Children (${children.length})`}
+      </label>
+      <ChildBlocksTree
+        blockId={blockId}
+        children={children}
+        onUpdateChildren={onUpdateChildren}
+      />
+    </div>
+  );
+};
+
+export default ChildrenField;

package/src/components/fields/CodeField.tsx

@@ -0,0 +1,294 @@
+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/client";
+import { useTheme } from "../ThemeProvider";
+
+interface CodeFieldProps {
+  field: CodeFieldType;
+  value?: string;
+  onChange?: (value: string) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+const CodeMirrorEditor = lazy(() =>
+  import("@uiw/react-codemirror").then((mod) => ({ default: mod.default })),
+);
+
+const LANGUAGES = [
+  { 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" },
+];
+
+const languageExtensions: Record<string, () => Promise<any>> = {
+  javascript: () =>
+    import("@codemirror/lang-javascript").then((m) =>
+      m.javascript({ jsx: true, typescript: true }),
+    ),
+  typescript: () =>
+    import("@codemirror/lang-javascript").then((m) =>
+      m.javascript({ jsx: true, typescript: true }),
+    ),
+  js: () =>
+    import("@codemirror/lang-javascript").then((m) =>
+      m.javascript({ jsx: true }),
+    ),
+  jsx: () =>
+    import("@codemirror/lang-javascript").then((m) =>
+      m.javascript({ jsx: true }),
+    ),
+  ts: () =>
+    import("@codemirror/lang-javascript").then((m) =>
+      m.javascript({ typescript: true }),
+    ),
+  json: () => import("@codemirror/lang-json").then((m) => m.json()),
+  css: () => import("@codemirror/lang-css").then((m) => m.css()),
+  sql: () => import("@codemirror/lang-sql").then((m) => m.sql()),
+  python: () => import("@codemirror/lang-python").then((m) => m.python()),
+  html: () => import("@codemirror/lang-html").then((m) => m.html()),
+  rust: () => import("@codemirror/lang-rust").then((m) => m.rust()),
+  java: () => import("@codemirror/lang-java").then((m) => m.java()),
+  cpp: () => import("@codemirror/lang-cpp").then((m) => m.cpp()),
+  c: () => import("@codemirror/lang-cpp").then((m) => m.cpp()),
+  php: () => import("@codemirror/lang-php").then((m) => m.php()),
+  markdown: () => import("@codemirror/lang-markdown").then((m) => m.markdown()),
+  py: () => import("@codemirror/lang-python").then((m) => m.python()),
+};
+
+export const CodeField: React.FC<CodeFieldProps> = ({
+  field,
+  value = "",
+  onChange,
+  error,
+  disabled,
+}) => {
+  const [isMounted, setIsMounted] = useState(false);
+  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();
+  }, []);
+
+  useEffect(() => {
+    if (!isMounted) return;
+    const loadExtensions = async () => {
+      setLoading(true);
+      try {
+        const loader =
+          languageExtensions[language] || languageExtensions.javascript;
+        const ext = await loader();
+        setExtensions([ext]);
+      } catch (err) {
+        console.error("Failed to load language extension:", err);
+        setExtensions([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadExtensions();
+  }, [language, isMounted]);
+
+  const handleChange = useCallback(
+    (val: string) => onChange?.(val),
+    [onChange],
+  );
+
+  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="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="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">
+        <div className="flex items-center gap-2">
+          <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={`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-[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={isFullScreen ? "calc(100vh - 100px)" : "280px"}
+            width="100%"
+            extensions={extensions}
+            theme={codeMirrorTheme}
+            onChange={handleChange}
+            editable={!disabled}
+            basicSetup={{
+              lineNumbers: true,
+              highlightActiveLine: true,
+              bracketMatching: true,
+              closeBrackets: true,
+              autocompletion: true,
+              foldGutter: true,
+            }}
+            style={{
+              fontSize: "13px",
+              fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+            }}
+          />
+        </Suspense>
+
+        {/* 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>
+
+      {/* 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,4 +1,4 @@
-import type { DateField as DateFieldType } from '@kyro-cms/core';
+import type { DateField as DateFieldType } from "@kyro-cms/core/client";
 
 interface DateFieldComponentProps {
   field: DateFieldType;
@@ -8,17 +8,25 @@ interface DateFieldComponentProps {
   disabled?: boolean;
 }
 
-export default function DateField({ field, value = '', onChange, error, disabled }: DateFieldComponentProps) {
+export default function DateField({
+  field,
+  value = "",
+  onChange,
+  error,
+  disabled,
+}: DateFieldComponentProps) {
   return (
     <div className="space-y-1">
       {field.label && (
-        <label className="block text-sm font-medium text-gray-700">
+        <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
-        type={field.time ? 'datetime-local' : 'date'}
+        type={field.time ? "datetime-local" : "date"}
         value={value}
         onChange={(e) => onChange?.(e.target.value)}
         disabled={disabled || field.admin?.readOnly}
@@ -27,16 +35,20 @@ export default function DateField({ field, value = '', onChange, error, disabled
         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-gray-300 focus:border-blue-500 focus:ring-blue-500'
-        } ${disabled || field.admin?.readOnly ? 'bg-gray-50 text-gray-500' : 'bg-white'}`}
+            ? "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"
+            : "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
+        }`}
       />
       {field.admin?.description && !error && (
-        <p className="text-xs text-gray-500">{field.admin.description}</p>
-      )}
-      {error && (
-        <p className="text-xs text-red-600">{error}</p>
+        <p className="text-xs text-[var(--kyro-text-muted)]">
+          {field.admin.description}
+        </p>
       )}
+      {error && <p className="text-xs text-[var(--kyro-error)]">{error}</p>}
     </div>
   );
 }