@kyro-cms/admin 0.8.0 → 0.9.1

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

@@ -1,247 +1,176 @@
 import React from "react";
-import { ColumnsBlock } from "../../blocks/ColumnsBlock";
 import { HeadingBlock } from "../../blocks/HeadingBlock";
 import { ParagraphBlock } from "../../blocks/ParagraphBlock";
-import { DividerBlock } from "../../blocks/DividerBlock";
 import { ImageBlock } from "../../blocks/ImageBlock";
 import { VideoBlock } from "../../blocks/VideoBlock";
 import { ListBlock } from "../../blocks/ListBlock";
 import { CodeBlock } from "../../blocks/CodeBlock";
-import { LinkBlock } from "../../blocks/LinkBlock";
 import { FileBlock } from "../../blocks/FileBlock";
-import { VStackBlock } from "../../blocks/VStackBlock";
-import { ButtonBlock } from "../../blocks/ButtonBlock";
 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";
 
 import {
-  Columns3,
+  Box,
   Heading1,
   AlignLeft,
-  Minus,
   Image,
   Video,
   List,
   Code,
-  Link,
   File,
-  ArrowDown,
-  MousePointerClick,
   ChevronDown,
   Star,
   ListOrdered,
   Link2,
+  Columns3,
+  Sparkles,
+  Users,
+  HelpCircle,
+  Activity,
+  Tag,
+  Database,
+  Mail,
+  Blocks,
+  Clock,
 } from "../../ui/icons";
 
 // Block component registry
 export const BLOCK_COMPONENTS: Record<string, React.ComponentType<{ block: Record<string, unknown>; index: number }>> = {
-  columns: ColumnsBlock,
   heading: HeadingBlock,
   paragraph: ParagraphBlock,
-  divider: DividerBlock,
   image: ImageBlock,
   video: VideoBlock,
   list: ListBlock,
   code: CodeBlock,
-  link: LinkBlock,
   file: FileBlock,
-  vstack: VStackBlock,
-  button: ButtonBlock,
   accordion: AccordionBlock,
   richtext: RichTextBlock,
 
   hero: HeroBlock,
+  "heading-subheading": HeadingSubheadingBlock,
+  card: CardBlock,
   array: ArrayBlock,
   relationship: RelationshipBlock,
 };
 
+// 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" },
+  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" },
+  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" },
+  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" },
+};
+
 // Icon mapping for drawer (actual Lucide components)
 export const blockIcons: Record<string, React.ReactNode> = {
-  columns: <Columns3 className="w-4 h-4" />,
-  heading: <Heading1 className="w-4 h-4" />,
-  paragraph: <AlignLeft className="w-4 h-4" />,
-  divider: <Minus className="w-4 h-4" />,
-  image: <Image className="w-4 h-4" />,
-  video: <Video className="w-4 h-4" />,
-  list: <List className="w-4 h-4" />,
-  code: <Code className="w-4 h-4" />,
-  link: <Link className="w-4 h-4" />,
-  file: <File className="w-4 h-4" />,
-  vstack: <ArrowDown className="w-4 h-4" />,
-  button: <MousePointerClick className="w-4 h-4" />,
-  accordion: <ChevronDown className="w-4 h-4" />,
-  richtext: <AlignLeft className="w-4 h-4" />,
+  heading: <Heading1 className={`w-4 h-4 ${blockTheme.default.text}`} />,
+  paragraph: <AlignLeft className={`w-4 h-4 ${blockTheme.default.text}`} />,
+  image: <Image className={`w-4 h-4 ${blockTheme.default.text}`} />,
+  video: <Video className={`w-4 h-4 ${blockTheme.default.text}`} />,
+  list: <List className={`w-4 h-4 ${blockTheme.default.text}`} />,
+  code: <Code className={`w-4 h-4 ${blockTheme.default.text}`} />,
+  file: <File className={`w-4 h-4 ${blockTheme.default.text}`} />,
+  accordion: <ChevronDown className={`w-4 h-4 ${blockTheme.default.text}`} />,
+  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}`} />,
 
-  hero: <Star className="w-4 h-4" />,
-  array: <ListOrdered className="w-4 h-4" />,
-  relationship: <Link2 className="w-4 h-4" />,
+  // 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}`} />,
+  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}`} />,
+  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}`} />,
 };
 
-// Get block component by type
+// Internal utility to check if block has a specific custom react component
 export function getBlockComponent(type: string) {
-  return BLOCK_COMPONENTS[type];
+  return BLOCK_COMPONENTS[type] || null;
 }
 
-// Check if block type is supported
-export function isSupportedBlockType(type: string): boolean {
-  return type in BLOCK_COMPONENTS;
+// 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"
+  ].includes(type);
 }
 
 // Get human-readable label for block type
 export function getBlockLabel(type: string): string {
   const labelMap: Record<string, string> = {
+    // Primitives
     paragraph: "Paragraph",
     heading: "Heading",
     image: "Image",
     video: "Video",
-    link: "Link",
-    button: "Button",
     list: "List",
     code: "Code",
     file: "File",
-    divider: "Divider",
     accordion: "Accordion",
     array: "Repeater",
-    hero: "Hero",
-    vstack: "VStack",
-    columns: "Columns",
     relationship: "Relationship",
     richtext: "Rich Text",
+
+    // 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",
+    testimonials: "Testimonials Stack",
+    faq: "FAQ Section",
+    stats: "Stats & Metrics",
+    "logo-cloud": "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",
+
+    // 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",
   };
   return labelMap[type] || type;
 }
-
-// Block categories for the drawer
-export const blockCategories = [
-  {
-    title: "Layout",
-    blocks: [
-      {
-        type: "columns",
-        label: "Columns",
-        icon: "columns",
-        description: "1-6 columns side-by-side",
-      },
-      {
-        type: "vstack",
-        label: "VStack",
-        icon: "vstack",
-        description: "Stack blocks vertically",
-      },
-      {
-        type: "hero",
-        label: "Hero",
-        icon: "hero",
-        description: "Hero with content + video",
-      },
-    ],
-  },
-  {
-    title: "Text",
-    blocks: [
-      {
-        type: "heading",
-        label: "Heading",
-        icon: "heading",
-        description: "Heading text",
-      },
-      {
-        type: "paragraph",
-        label: "Paragraph",
-        icon: "paragraph",
-        description: "Plain text content",
-      },
-      {
-        type: "richtext",
-        label: "Rich Text",
-        icon: "richtext",
-        description: "Formatted text with links & styles",
-      },
-      {
-        type: "list",
-        label: "List",
-        icon: "list",
-        description: "Ordered/unordered list",
-      },
-      { type: "link", label: "Link", icon: "link", description: "Hyperlink" },
-    ],
-  },
-  {
-    title: "Media",
-    blocks: [
-      {
-        type: "image",
-        label: "Image",
-        icon: "image",
-        description: "Single image",
-      },
-      {
-        type: "video",
-        label: "Video",
-        icon: "video",
-        description: "Embed video",
-      },
-      {
-        type: "file",
-        label: "File",
-        icon: "file",
-        description: "File download link",
-      },
-    ],
-  },
-  {
-    title: "Interactive",
-    blocks: [
-      {
-        type: "button",
-        label: "Button",
-        icon: "button",
-        description: "CTA button",
-      },
-      {
-        type: "accordion",
-        label: "Accordion",
-        icon: "accordion",
-        description: "Collapsible sections",
-      },
-    ],
-  },
-  {
-    title: "Data",
-    blocks: [
-      {
-        type: "array",
-        label: "Repeater",
-        icon: "array",
-        description: "Add multiple child blocks",
-      },
-      {
-        type: "code",
-        label: "Code",
-        icon: "code",
-        description: "Code snippet",
-      },
-      {
-        type: "relationship",
-        label: "Relationship",
-        icon: "relationship",
-        description: "Link to other collection",
-      },
-    ],
-  },
-  {
-    title: "Basic",
-    blocks: [
-      {
-        type: "divider",
-        label: "Divider",
-        icon: "divider",
-        description: "Horizontal separator",
-      },
-    ],
-  },
-];

package/src/components/fields/extensions/blocksStore.ts

@@ -12,15 +12,19 @@ export interface BlocksStore {
   moveBlock: (id: string, direction: "up" | "down") => void;
   onBlocksChange: (() => void) | null;
   setOnBlocksChange: (cb: () => void) => void;
+  allowedBlocks: any[];
+  dynamicCategories: { title: string; blocks: any[] }[];
 }
 
 export type BlocksStoreApi = StoreApi<BlocksStore>;
 
 export const BlocksContext = createContext<BlocksStoreApi | null>(null);
 
-export function createBlocksStore(): BlocksStoreApi {
+export function createBlocksStore(allowedBlocks: any[] = [], dynamicCategories: any[] = []): BlocksStoreApi {
   return createStore<BlocksStore>((set, get) => ({
     blocks: [],
+    allowedBlocks,
+    dynamicCategories,
     setBlocks: (blocks) => {
       const ensuredBlocks = ensureIds(blocks || []);
       set({ blocks: ensuredBlocks });
@@ -152,6 +156,9 @@ export function createNewBlock(type: string): BlockData {
 function getDefaultData(type: string): Record<string, unknown> {
   const defaults: Record<string, unknown> = {
     heading: { level: 1, text: "" },
+    "heading-subheading": { heading: "", subheading: "" },
+    hero: { isMultiScreen: false },
+    card: { title: "", description: "", icon: "", link: "", linkText: "", isMultiCard: false },
     paragraph: { text: "" },
     divider: {},
     callout: { text: "", variant: "info" },

package/src/components/fields/index.ts

@@ -1,8 +1,8 @@
-export { default as PortableTextField } from "./PortableTextField";
-export { PortableTextRenderer } from "./PortableTextRenderer";
+export { default as RichTextField } from "./RichTextField";
 export { CodeField } from "./CodeField";
 export { JSONField } from "./JSONField";
 export { MarkdownField } from "./MarkdownField";
+export { default as SecretField } from "./SecretField";
 export { default as TextField } from "./TextField";
 export { default as NumberField } from "./NumberField";
 export { default as CheckboxField } from "./CheckboxField";
@@ -22,3 +22,5 @@ export { ArrayField } from "./ArrayField";
 export { ChildrenField } from "./ChildrenField";
 export { ColumnsField } from "./ColumnsField";
 export { RelationshipBlockField } from "./RelationshipBlockField";
+export { HeadingSubheadingField } from "./HeadingSubheadingField";
+export { CardField } from "./CardField";

package/src/components/ui/PageHeader.tsx

@@ -1,5 +1,5 @@
 import React, { type ReactNode } from "react";
-import type { IconType } from "react-icons";
+import type { ComponentType, SVGAttributes } from "react";
 
 interface Breadcrumb {
   label: string;
@@ -10,7 +10,7 @@ interface Breadcrumb {
 interface Action {
   label: string;
   onClick: () => void;
-  icon?: IconType;
+  icon?: ComponentType<SVGAttributes<SVGSVGElement>>;
   variant?: "primary" | "outline" | "ghost";
   className?: string;
 }
@@ -18,7 +18,7 @@ interface Action {
 interface PageHeaderProps {
   title?: string;
   description?: string;
-  icon?: IconType;
+  icon?: ComponentType<SVGAttributes<SVGSVGElement>>;
   breadcrumbs?: Breadcrumb[];
   metadata?: ReactNode[];
   back?: { label?: string; href?: string; onClick?: () => void };
@@ -129,7 +129,7 @@ export function PageHeader({
                       ? "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
                       : act.variant === "ghost"
                       ? "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] shadow-none"
-                      : "bg-[var(--kyro-primary)] text-white hover:opacity-90"
+                      : "kyro-btn-primary hover:opacity-90"
                   } ${act.className || ""}`}
                 >
                   {act.icon && <act.icon className="w-4 h-4" />}
@@ -145,7 +145,7 @@ export function PageHeader({
           <button
             type="button"
             onClick={action.onClick}
-            className={`flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm bg-[var(--kyro-primary)] text-white hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/10 ${action.className || ""}`}
+            className={`kyro-btn kyro-btn-primary flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/10 ${action.className || ""}`}
           >
             {action.icon && <action.icon className="w-4 h-4" />}
             {action.label}

package/src/components/ui/SlidePanel.tsx

@@ -10,6 +10,7 @@ interface SlidePanelProps {
   children: ReactNode;
   width?: "sm" | "md" | "lg" | "xl";
   showOverlay?: boolean;
+  accentClass?: string;
 }
 
 export function SlidePanel({
@@ -19,6 +20,7 @@ export function SlidePanel({
   children,
   width = "md",
   showOverlay = false,
+  accentClass,
 }: SlidePanelProps) {
   const panelRef = useRef<HTMLDivElement>(null);
   const [hydrated, setHydrated] = useState(false);
@@ -46,8 +48,8 @@ export function SlidePanel({
   const widthClasses = {
     sm: "w-[320px]",
     md: "w-[400px]",
-    lg: "w-[500px]",
-    xl: "w-[600px]",
+    lg: "w-[550px]",
+    xl: "w-[700px]",
   };
 
   if (!open || !hydrated) return null;
@@ -62,7 +64,10 @@ export function SlidePanel({
       )}
       <div
         ref={panelRef}
-        className={`fixed right-0 top-0 bottom-0 z-[99999] ${widthClasses[width]} bg-[var(--kyro-surface)] border-l border-[var(--kyro-border)] shadow-2xl flex flex-col animate-slideIn`}
+        data-kyro-slide-panel="true"
+        data-kyro-slide-width={width}
+        className={`fixed right-0 top-0 bottom-0 z-[99999] ${widthClasses[width]} bg-[var(--kyro-surface)] ${accentClass ? `border-l-2 ${accentClass}` : "border-l border-[var(--kyro-border)]"
+          } shadow-2xl flex flex-col animate-slideIn`}
       >
         <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
           <h2 className="text-sm font-semibold text-[var(--kyro-text-primary)]">