@kyro-cms/admin 0.10.14 → 0.10.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.10.14",
+  "version": "0.10.19",
   "engines": {
     "node": ">=22"
   },

package/src/components/AutoForm.tsx

@@ -272,7 +272,9 @@ export function AutoForm({
 
           const result = await resp.json();
           if (result.data) {
-            const restoredData = { ...formData, ...result.data };
+            // Omit historical timestamps so OCC doesn't panic on save
+            const { updatedAt, createdAt, ...historicalData } = result.data;
+            const restoredData = { ...formData, ...historicalData };
             setFormData(restoredData);
             useAutoFormStore.getState().loadDocument(restoredData, restoredData);
             onActionSuccess?.("Version restored successfully");

package/src/components/GraphQLPlayground.tsx

@@ -393,11 +393,19 @@ export function GraphQLPlayground({
   const [token, setToken] = useState<string>("");
   const [showToken, setShowToken] = useState(false);
   const [isConnected, setIsConnected] = useState(false);
-  const [tab, setTab] = useState<QueryTab>({
-    id: "default",
-    query: initialQuery || DEFAULT_QUERY,
-    variables: initialVariables || "{}",
-    headers: "",
+  const [tab, setTab] = useState<QueryTab>(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const saved = localStorage.getItem("kyro_graphql_tab");
+        if (saved) return JSON.parse(saved);
+      } catch {}
+    }
+    return {
+      id: "default",
+      query: initialQuery || DEFAULT_QUERY,
+      variables: initialVariables || "{}",
+      headers: "",
+    };
   });
   const [response, setResponse] = useState<string>("");
   const [isLoading, setIsLoading] = useState(false);
@@ -411,7 +419,15 @@ export function GraphQLPlayground({
   const [rightTab, setRightTab] = useState<"response" | "docs" | "history">(
     initialShowDocs ? "docs" : "response",
   );
-  const [history, setHistory] = useState<HistoryEntry[]>([]);
+  const [history, setHistory] = useState<HistoryEntry[]>(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const saved = localStorage.getItem("kyro_graphql_history");
+        if (saved) return JSON.parse(saved);
+      } catch {}
+    }
+    return [];
+  });
   const [lastDuration, setLastDuration] = useState<number>(0);
   const [lastStatus, setLastStatus] = useState<number>(0);
   const [copied, setCopied] = useState(false);
@@ -426,6 +442,18 @@ export function GraphQLPlayground({
     setIsMounted(true);
   }, []);
 
+  useEffect(() => {
+    if (isMounted) {
+      localStorage.setItem("kyro_graphql_tab", JSON.stringify(tab));
+    }
+  }, [tab, isMounted]);
+
+  useEffect(() => {
+    if (isMounted) {
+      localStorage.setItem("kyro_graphql_history", JSON.stringify(history));
+    }
+  }, [history, isMounted]);
+
   useEffect(() => {
     const check = () => setIsDesktop(window.innerWidth >= 768);
     check();

package/src/components/RestPlayground.tsx

@@ -83,13 +83,21 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
   const [history, setHistory] = useState<HistoryItem[]>([]);
   const [envVars, setEnvVars] = useState<EnvVariable[]>([]);
   const [selectedRequest, setSelectedRequest] = useState<SavedRequest | null>(null);
-  const [currentRequest, setCurrentRequest] = useState<SavedRequest>({
-    id: "new",
-    name: "Untitled Request",
-    method: "GET",
-    url: "",
-    headers: {},
-    body: "",
+  const [currentRequest, setCurrentRequest] = useState<SavedRequest>(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const saved = localStorage.getItem("kyro_rest_current");
+        if (saved) return JSON.parse(saved);
+      } catch {}
+    }
+    return {
+      id: "new",
+      name: "Untitled Request",
+      method: "GET",
+      url: "",
+      headers: {},
+      body: "",
+    };
   });
   const [response, setResponse] = useState<{ status: number; duration: number; size: number; data: any } | null>(null);
   const [loading, setLoading] = useState(false);
@@ -136,6 +144,10 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
     if (isMounted) localStorage.setItem(STORAGE_KEYS.env, JSON.stringify(envVars));
   }, [envVars, isMounted]);
 
+  useEffect(() => {
+    if (isMounted) localStorage.setItem("kyro_rest_current", JSON.stringify(currentRequest));
+  }, [currentRequest, isMounted]);
+
   const resolveUrl = (url: string) => {
     let resolved = url;
     envVars.forEach((v) => {

package/src/components/autoform/AutoFormApiView.tsx

@@ -33,7 +33,7 @@ export function AutoFormApiView({
                 <label className="text-[10px] font-bold tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-2">
                   Reference Path
                 </label>
-                <div className="bg-[var(--kyro-bg-secondary)] px-4 py-3 rounded-xl border border-[var(--kyro-border)] text-[11px] font-mono break-all selection:bg-[var(--kyro-primary)]/20 text-[var(--kyro-text-primary)]">
+                <div className="bg-[var(--kyro-bg-secondary)] px-4 py-3 rounded-md border border-[var(--kyro-border)] text-[11px] font-mono break-all selection:bg-[var(--kyro-primary)]/20 text-[var(--kyro-text-primary)]">
                   {globalSlug
                     ? `kyro.globals('${globalSlug}').get()`
                     : formData.id

package/src/components/autoform/AutoFormVersionView.tsx

@@ -167,7 +167,7 @@ export function AutoFormVersionView({
                         )}
                       </div>
                       <div className="text-[11px] text-[var(--kyro-text-muted)]">
-                        {new Date(v.createdAt as string).toLocaleString("en-US", {
+                        {new Date((v.createdAt || (v as any).created_at) as string).toLocaleString("en-US", {
                           month: "short",
                           day: "numeric",
                           hour: "2-digit",
@@ -236,7 +236,7 @@ export function AutoFormVersionView({
                       </div>
                       <div className="flex items-center gap-2 mt-1 flex-wrap">
                         <span className="text-[11px] text-[var(--kyro-text-muted)]">
-                          {new Date(v.createdAt as string).toLocaleString("en-US", {
+                          {new Date((v.createdAt || (v as any).created_at) as string).toLocaleString("en-US", {
                             month: "short",
                             day: "numeric",
                             hour: "2-digit",

package/src/components/fields/extensions/blockComponents.tsx

@@ -8,9 +8,7 @@ import { CodeBlock } from "../../blocks/CodeBlock";
 import { FileBlock } from "../../blocks/FileBlock";
 import { AccordionBlock } from "../../blocks/AccordionBlock";
 import { RichTextBlock } from "../../blocks/RichTextBlock";
-
 import { HeroBlock } from "../../blocks/HeroBlock";
-import { HeadingSubheadingBlock } from "../../blocks/HeadingSubheadingBlock";
 import { CardBlock } from "../../blocks/CardBlock";
 import { ArrayBlock } from "../../blocks/ArrayBlock";
 import { RelationshipBlock } from "../../blocks/RelationshipBlock";
@@ -53,7 +51,6 @@ export const BLOCK_COMPONENTS: Record<string, React.ComponentType<{ block: Recor
   richtext: RichTextBlock,
 
   hero: HeroBlock,
-  "heading-subheading": HeadingSubheadingBlock,
   card: CardBlock,
   array: ArrayBlock,
   relationship: RelationshipBlock,
@@ -61,19 +58,19 @@ export const BLOCK_COMPONENTS: Record<string, React.ComponentType<{ block: Recor
 
 // Block Theme mapping for consistent coloring across UI
 export const blockTheme: Record<string, { text: string; border: string; borderLeft: string }> = {
-  "feature-split": { text: "text-indigo-500", border: "border-indigo-500", borderLeft: "border-l-indigo-500" },
-  "feature-grid": { text: "text-blue-500", border: "border-blue-500", borderLeft: "border-l-blue-500" },
-  "cta-banner": { text: "text-amber-500", border: "border-amber-500", borderLeft: "border-l-amber-500" },
+  featureSplit: { text: "text-indigo-500", border: "border-indigo-500", borderLeft: "border-l-indigo-500" },
+  featureGrid: { text: "text-blue-500", border: "border-blue-500", borderLeft: "border-l-blue-500" },
+  ctaBanner: { text: "text-amber-500", border: "border-amber-500", borderLeft: "border-l-amber-500" },
   testimonials: { text: "text-emerald-500", border: "border-emerald-500", borderLeft: "border-l-emerald-500" },
   faq: { text: "text-orange-500", border: "border-orange-500", borderLeft: "border-l-orange-500" },
   stats: { text: "text-rose-500", border: "border-rose-500", borderLeft: "border-l-rose-500" },
-  "logo-cloud": { text: "text-cyan-500", border: "border-cyan-500", borderLeft: "border-l-cyan-500" },
+  logoCloud: { text: "text-cyan-500", border: "border-cyan-500", borderLeft: "border-l-cyan-500" },
   pricing: { text: "text-green-500", border: "border-green-500", borderLeft: "border-l-green-500" },
   team: { text: "text-violet-500", border: "border-violet-500", borderLeft: "border-l-violet-500" },
-  "recent-feed": { text: "text-sky-500", border: "border-sky-500", borderLeft: "border-l-sky-500" },
-  "process-steps": { text: "text-fuchsia-500", border: "border-fuchsia-500", borderLeft: "border-l-fuchsia-500" },
-  "form-embed": { text: "text-pink-500", border: "border-pink-500", borderLeft: "border-l-pink-500" },
-  "video-showcase": { text: "text-red-500", border: "border-red-500", borderLeft: "border-l-red-500" },
+  recentFeed: { text: "text-sky-500", border: "border-sky-500", borderLeft: "border-l-sky-500" },
+  processSteps: { text: "text-fuchsia-500", border: "border-fuchsia-500", borderLeft: "border-l-fuchsia-500" },
+  formEmbed: { text: "text-pink-500", border: "border-pink-500", borderLeft: "border-l-pink-500" },
+  videoShowcase: { text: "text-red-500", border: "border-red-500", borderLeft: "border-l-red-500" },
   hero: { text: "text-yellow-500", border: "border-yellow-500", borderLeft: "border-l-yellow-500" },
   card: { text: "text-teal-500", border: "border-teal-500", borderLeft: "border-l-teal-500" },
   default: { text: "text-zinc-400", border: "border-zinc-400", borderLeft: "border-l-zinc-400" },
@@ -92,25 +89,24 @@ export const blockIcons: Record<string, React.ReactNode> = {
   richtext: <AlignLeft className={`w-4 h-4 ${blockTheme.default.text}`} />,
 
   hero: <Star className={`w-4 h-4 ${blockTheme.hero.text}`} />,
-  "heading-subheading": <Heading1 className={`w-4 h-4 ${blockTheme.default.text}`} />,
   card: <Box className={`w-4 h-4 ${blockTheme.card.text}`} />,
   array: <ListOrdered className={`w-4 h-4 ${blockTheme.default.text}`} />,
   relationship: <Link2 className={`w-4 h-4 ${blockTheme.default.text}`} />,
 
   // New Block Icons
-  "feature-split": <Columns3 className={`w-4 h-4 ${blockTheme["feature-split"].text}`} />,
-  "feature-grid": <Blocks className={`w-4 h-4 ${blockTheme["feature-grid"].text}`} />,
-  "cta-banner": <Sparkles className={`w-4 h-4 ${blockTheme["cta-banner"].text}`} />,
+  featureSplit: <Columns3 className={`w-4 h-4 ${blockTheme.featureSplit.text}`} />,
+  featureGrid: <Blocks className={`w-4 h-4 ${blockTheme.featureGrid.text}`} />,
+  ctaBanner: <Sparkles className={`w-4 h-4 ${blockTheme.ctaBanner.text}`} />,
   testimonials: <Users className={`w-4 h-4 ${blockTheme.testimonials.text}`} />,
   faq: <HelpCircle className={`w-4 h-4 ${blockTheme.faq.text}`} />,
   stats: <Activity className={`w-4 h-4 ${blockTheme.stats.text}`} />,
-  "logo-cloud": <Image className={`w-4 h-4 ${blockTheme["logo-cloud"].text}`} />,
+  logoCloud: <Image className={`w-4 h-4 ${blockTheme.logoCloud.text}`} />,
   pricing: <Tag className={`w-4 h-4 ${blockTheme.pricing.text}`} />,
   team: <Users className={`w-4 h-4 ${blockTheme.team.text}`} />,
-  "recent-feed": <Database className={`w-4 h-4 ${blockTheme["recent-feed"].text}`} />,
-  "process-steps": <Clock className={`w-4 h-4 ${blockTheme["process-steps"].text}`} />,
-  "form-embed": <Mail className={`w-4 h-4 ${blockTheme["form-embed"].text}`} />,
-  "video-showcase": <Video className={`w-4 h-4 ${blockTheme["video-showcase"].text}`} />,
+  recentFeed: <Database className={`w-4 h-4 ${blockTheme.recentFeed.text}`} />,
+  processSteps: <Clock className={`w-4 h-4 ${blockTheme.processSteps.text}`} />,
+  formEmbed: <Mail className={`w-4 h-4 ${blockTheme.formEmbed.text}`} />,
+  videoShowcase: <Video className={`w-4 h-4 ${blockTheme.videoShowcase.text}`} />,
 };
 
 // Internal utility to check if block has a specific custom react component
@@ -121,9 +117,9 @@ export function getBlockComponent(type: string) {
 // Determines if block is a native layout requiring generic rendering
 export function isGenericSemanticBlock(type: string) {
   return [
-    "feature-split", "feature-grid", "cta-banner",
-    "testimonials", "faq", "stats", "logo-cloud",
-    "pricing", "team", "recent-feed", "process-steps", "form-embed", "video-showcase"
+    "featureSplit", "featureGrid", "ctaBanner",
+    "testimonials", "faq", "stats", "logoCloud",
+    "pricing", "team", "recentFeed", "processSteps", "formEmbed", "videoShowcase"
   ].includes(type);
 }
 
@@ -145,32 +141,31 @@ export function getBlockLabel(type: string): string {
 
     // Core Semantic Blocks
     hero: "Hero Section",
-    "heading-subheading": "Heading + Subheading",
     card: "Card Block",
-    "feature-split": "Feature Split",
-    "feature-grid": "Feature Grid",
-    "cta-banner": "CTA Banner",
+    featureSplit: "Feature Split",
+    featureGrid: "Feature Grid",
+    ctaBanner: "CTA Banner",
     testimonials: "Testimonials Stack",
     faq: "FAQ Section",
     stats: "Stats & Metrics",
-    "logo-cloud": "Logo Cloud",
+    logoCloud: "Logo Cloud",
 
     // Brand New Blocks
     pricing: "Pricing Grid / Plan",
     team: "Team Profiles Showcase",
-    "recent-feed": "Dynamic Content Feed",
-    "process-steps": "Process Timeline / Steps",
-    "form-embed": "Lead Intake Form",
-    "video-showcase": "Cinematic Video Showcase",
+    recentFeed: "Dynamic Content Feed",
+    processSteps: "Process Timeline / Steps",
+    formEmbed: "Lead Intake Form",
+    videoShowcase: "Cinematic Video Showcase",
 
     // Inline Content Elements
-    "heading-element": "Heading",
-    "text-element": "Text",
-    "image-element": "Image",
-    "richtext-element": "Rich Text",
-    "button-element": "Button",
-    "video-element": "Video",
-    "list-element": "List",
+    headingElement: "Heading",
+    textElement: "Text",
+    imageElement: "Image",
+    richtextElement: "Rich Text",
+    buttonElement: "Button",
+    videoElement: "Video",
+    listElement: "List",
   };
   return labelMap[type] || type;
 }