@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/fields/VideoField.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { UploadField } from "./UploadField";
+
+interface VideoFieldProps {
+  src?: string;
+  title?: string;
+  onChange: (field: string, value: string) => void;
+  onUploadChange?: (value: any) => void;
+  compact?: boolean;
+}
+
+export const VideoField: React.FC<VideoFieldProps> = ({
+  src = "",
+  title = "",
+  onChange,
+  onUploadChange,
+  compact = false,
+}) => {
+  const isExternalUrl =
+    src.includes("youtube.com") ||
+    src.includes("vimeo.com") ||
+    src.includes("youtu.be");
+
+  if (compact) {
+    return (
+      <div className="space-y-2">
+        <input
+          type="url"
+          value={src}
+          onChange={(e) => onChange("src", e.target.value)}
+          className="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 font-mono text-xs"
+          placeholder="MP4 URL, YouTube, or Vimeo link..."
+        />
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => onChange("title", e.target.value)}
+          className="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"
+          placeholder="Video title (optional)..."
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <UploadField
+        field={{ label: "Video Asset", name: "src", maxCount: 1 }}
+        value={src}
+        onChange={onUploadChange || ((v) => onChange("src", v))}
+      />
+      <span className="text-xs text-[var(--kyro-text-muted)]">
+        or paste a URL
+      </span>
+      <input
+        type="url"
+        value={src}
+        onChange={(e) => onChange("src", 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="MP4 URL, YouTube, or Vimeo link..."
+      />
+      <input
+        type="text"
+        value={title}
+        onChange={(e) => onChange("title", 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="Video title (optional)..."
+      />
+    </div>
+  );
+};
+
+export default VideoField;

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

@@ -0,0 +1,247 @@
+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 { ArrayBlock } from "../../blocks/ArrayBlock";
+import { RelationshipBlock } from "../../blocks/RelationshipBlock";
+
+import {
+  Columns3,
+  Heading1,
+  AlignLeft,
+  Minus,
+  Image,
+  Video,
+  List,
+  Code,
+  Link,
+  File,
+  ArrowDown,
+  MousePointerClick,
+  ChevronDown,
+  Star,
+  ListOrdered,
+  Link2,
+} from "lucide-react";
+
+// Block component registry
+export const BLOCK_COMPONENTS: Record<string, React.ComponentType<any>> = {
+  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,
+  array: ArrayBlock,
+  relationship: RelationshipBlock,
+};
+
+// 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" />,
+
+  hero: <Star className="w-4 h-4" />,
+  array: <ListOrdered className="w-4 h-4" />,
+  relationship: <Link2 className="w-4 h-4" />,
+};
+
+// Get block component by type
+export function getBlockComponent(type: string) {
+  return BLOCK_COMPONENTS[type];
+}
+
+// Check if block type is supported
+export function isSupportedBlockType(type: string): boolean {
+  return type in BLOCK_COMPONENTS;
+}
+
+// Get human-readable label for block type
+export function getBlockLabel(type: string): string {
+  const labelMap: Record<string, string> = {
+    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",
+  };
+  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

@@ -0,0 +1,273 @@
+import { create } from "zustand";
+import type { BlockData } from "@kyro-cms/core/client";
+
+export interface BlocksStore {
+  blocks: BlockData[];
+  setBlocks: (blocks: BlockData[]) => void;
+  addBlock: (type: string, index?: number) => void;
+  updateBlock: (id: string, data: Partial<BlockData>) => void;
+  removeBlock: (id: string) => void;
+  moveBlock: (id: string, direction: "up" | "down") => void;
+  onBlocksChange: (() => void) | null;
+  setOnBlocksChange: (cb: () => void) => void;
+}
+
+// Helper to create new block (since we can't import createBlock from core in zustand)
+export function createNewBlock(type: string): BlockData {
+  const defaultData = getDefaultData(type);
+  // Extract options and children from defaultData if present
+  const { options, children, ...data } = defaultData;
+  return {
+    id: Math.random().toString(36).substr(2, 9),
+    type,
+    data,
+    options,
+    children,
+    order: Date.now(),
+  };
+}
+
+function getDefaultData(type: string): Record<string, any> {
+  const defaults: Record<string, any> = {
+    heading: { level: 1, text: "" },
+    paragraph: { text: "" },
+    divider: {},
+    callout: { text: "", variant: "info" },
+    image: { src: "", alt: "", caption: "" },
+    video: { src: "", title: "" },
+    list: { type: "unordered", items: "" },
+    code: { language: "plaintext", code: "" },
+    link: { url: "", text: "" },
+    table: { rows: 3, columns: 3, content: "" },
+    quote: { text: "", author: "" },
+    file: { filename: "", url: "" },
+    kyroColumns: { columns: 2, direction: "horizontal" },
+    vstack: { direction: "vertical", gap: "md" },
+    container: {
+      options: {
+        backgroundColor: "transparent",
+        padding: "md",
+        width: "full",
+        margin: "none",
+        minHeight: "none",
+        borderRadius: "none",
+      },
+      children: [],
+    },
+    button: { text: "Button", url: "", variant: "primary", size: "md" },
+    accordion: { title: "Accordion Item", content: "" },
+    gallery: { images: [] },
+    tabs: { tabs: [{ label: "Tab 1", content: "" }] },
+  };
+  return defaults[type] || {};
+}
+
+export const useBlocksStore = create<BlocksStore>((set, get) => ({
+  blocks: [],
+  setBlocks: (blocks) => set({ blocks }),
+  onBlocksChange: null,
+  setOnBlocksChange: (cb) => set({ onBlocksChange: cb }),
+  addBlock: (type, index) => {
+    const newBlock = createNewBlock(type);
+    const { blocks } = get();
+    const newBlocks = [...blocks];
+    if (index !== undefined) {
+      newBlocks.splice(index, 0, newBlock);
+    } else {
+      newBlocks.push(newBlock);
+    }
+    set({ blocks: newBlocks });
+    const { onBlocksChange } = get();
+    if (onBlocksChange) onBlocksChange();
+  },
+  updateBlock: (id, data) => {
+    const { blocks } = get();
+    
+    const updateRecursive = (blocksList: BlockData[]): BlockData[] => {
+      let changed = false;
+      const newList = blocksList.map(b => {
+        if (b.id === id) {
+          changed = true;
+          return { ...b, ...data };
+        }
+        
+        let newB = b;
+        if (b.children && b.children.length > 0) {
+          const newChildren = updateRecursive(b.children);
+          if (newChildren !== b.children) {
+            newB = { ...newB, children: newChildren };
+            changed = true;
+          }
+        }
+        
+        if (b.data?.columnData) {
+          const newColumnData = b.data.columnData.map((col: any) => {
+            if (col.children && col.children.length > 0) {
+              const newChildren = updateRecursive(col.children);
+              if (newChildren !== col.children) {
+                return { ...col, children: newChildren };
+              }
+            }
+            return col;
+          });
+          
+          if (newColumnData.some((col: any, i: number) => col !== b.data.columnData[i])) {
+            newB = { ...newB, data: { ...newB.data, columnData: newColumnData } };
+            changed = true;
+          }
+        }
+        
+        return newB;
+      });
+      return changed ? newList : blocksList;
+    };
+
+    const newBlocks = updateRecursive(blocks);
+    if (newBlocks !== blocks) {
+      set({ blocks: newBlocks });
+      const { onBlocksChange } = get();
+      if (onBlocksChange) onBlocksChange();
+    }
+  },
+  removeBlock: (id) => {
+    const { blocks } = get();
+    
+    const removeRecursive = (blocksList: BlockData[]): BlockData[] => {
+      const filtered = blocksList.filter(b => b.id !== id);
+      if (filtered.length !== blocksList.length) {
+        return filtered; // found and removed at this level
+      }
+      
+      let changed = false;
+      const newList = blocksList.map(b => {
+        let newB = b;
+        if (b.children && b.children.length > 0) {
+          const newChildren = removeRecursive(b.children);
+          if (newChildren !== b.children) {
+            newB = { ...newB, children: newChildren };
+            changed = true;
+          }
+        }
+        
+        if (b.data?.columnData) {
+          const newColumnData = b.data.columnData.map((col: any) => {
+            if (col.children && col.children.length > 0) {
+              const newChildren = removeRecursive(col.children);
+              if (newChildren !== col.children) {
+                return { ...col, children: newChildren };
+              }
+            }
+            return col;
+          });
+          
+          if (newColumnData.some((col: any, i: number) => col !== b.data.columnData[i])) {
+            newB = { ...newB, data: { ...newB.data, columnData: newColumnData } };
+            changed = true;
+          }
+        }
+        
+        return newB;
+      });
+      return changed ? newList : blocksList;
+    };
+
+    const newBlocks = removeRecursive(blocks);
+    if (newBlocks !== blocks) {
+      set({ blocks: newBlocks });
+      const { onBlocksChange } = get();
+      if (onBlocksChange) onBlocksChange();
+    }
+  },
+  moveBlock: (id, direction) => {
+    const { blocks } = get();
+    
+    const moveRecursive = (blocksList: BlockData[]): BlockData[] => {
+      const index = blocksList.findIndex(b => b.id === id);
+      if (index !== -1) {
+        const targetIndex = direction === "up" ? index - 1 : index + 1;
+        if (targetIndex >= 0 && targetIndex < blocksList.length) {
+          const newBlocksList = [...blocksList];
+          [newBlocksList[index], newBlocksList[targetIndex]] = [
+            newBlocksList[targetIndex],
+            newBlocksList[index],
+          ];
+          return newBlocksList;
+        }
+        return blocksList;
+      }
+      
+      let changed = false;
+      const newList = blocksList.map(b => {
+        let newB = b;
+        if (b.children && b.children.length > 0) {
+          const newChildren = moveRecursive(b.children);
+          if (newChildren !== b.children) {
+            newB = { ...newB, children: newChildren };
+            changed = true;
+          }
+        }
+        
+        if (b.data?.columnData) {
+          const newColumnData = b.data.columnData.map((col: any) => {
+            if (col.children && col.children.length > 0) {
+              const newChildren = moveRecursive(col.children);
+              if (newChildren !== col.children) {
+                return { ...col, children: newChildren };
+              }
+            }
+            return col;
+          });
+          
+          if (newColumnData.some((col: any, i: number) => col !== b.data.columnData[i])) {
+            newB = { ...newB, data: { ...newB.data, columnData: newColumnData } };
+            changed = true;
+          }
+        }
+        
+        return newB;
+      });
+      return changed ? newList : blocksList;
+    };
+
+    const newBlocks = moveRecursive(blocks);
+    if (newBlocks !== blocks) {
+      set({ blocks: newBlocks });
+      const { onBlocksChange } = get();
+      if (onBlocksChange) onBlocksChange();
+    }
+  },
+}));
+
+// Selector for individual block - only re-renders when that specific block changes
+export const useBlockById = (id: string) =>
+  useBlocksStore((state) => {
+    const findRecursive = (blocksList: BlockData[]): BlockData | undefined => {
+      for (const b of blocksList) {
+        if (b.id === id) return b;
+        if (b.children && b.children.length > 0) {
+          const found = findRecursive(b.children);
+          if (found) return found;
+        }
+        if (b.data?.columnData) {
+          for (const col of b.data.columnData) {
+            if (col.children && col.children.length > 0) {
+              const found = findRecursive(col.children);
+              if (found) return found;
+            }
+          }
+        }
+      }
+      return undefined;
+    };
+    return findRecursive(state.blocks);
+  });
+
+// Selector for block count - for quick checks
+export const useBlockCount = () =>
+  useBlocksStore((state) => state.blocks.length);
+
+// Get action functions without subscription - uses getState() for direct access
+// This prevents re-renders when other blocks change
+export const useBlockActions = () => {
+  return useBlocksStore.getState();
+};

package/src/components/fields/index.ts

@@ -0,0 +1,24 @@
+export { default as PortableTextField } from "./PortableTextField";
+export { PortableTextRenderer } from "./PortableTextRenderer";
+export { CodeField } from "./CodeField";
+export { JSONField } from "./JSONField";
+export { MarkdownField } from "./MarkdownField";
+export { default as TextField } from "./TextField";
+export { default as NumberField } from "./NumberField";
+export { default as CheckboxField } from "./CheckboxField";
+export { default as DateField } from "./DateField";
+export { default as SelectField } from "./SelectField";
+export { default as RelationshipField } from "./RelationshipField";
+export { BlocksField } from "./BlocksField";
+export { AccordionField } from "./AccordionField";
+export { ButtonField } from "./ButtonField";
+export { UploadField } from "./UploadField";
+export { LinkField } from "./LinkField";
+export { HeadingField } from "./HeadingField";
+export { VideoField } from "./VideoField";
+export { ListField } from "./ListField";
+export { HeroField } from "./HeroField";
+export { ArrayField } from "./ArrayField";
+export { ChildrenField } from "./ChildrenField";
+export { ColumnsField } from "./ColumnsField";
+export { RelationshipBlockField } from "./RelationshipBlockField";

package/src/components/index.ts

@@ -2,6 +2,7 @@ export { Admin } from "./Admin";
 export { ListView } from "./ListView";
 export { DetailView } from "./DetailView";
 export { CreateView } from "./CreateView";
+export { Dashboard } from "./Dashboard";
 export { AutoForm } from "./AutoForm";
 export {
   ActionBar,
@@ -19,8 +20,6 @@ export {
   useTheme,
   type ThemeMode,
 } from "./ThemeProvider";
-export * from "./layout/Header";
-export * from "./layout/Sidebar";
 export * from "./ui/Button";
 export * from "./ui/Badge";
 export * from "./ui/Spinner";

package/src/components/layout/Header.tsx

@@ -10,7 +10,7 @@ export function Header({ title, onMenuClick, actions }: HeaderProps) {
   return (
     <header className="kyro-header">
       <div className="kyro-header-left">
-        <button
+        <button type="button"
           className="kyro-header-menu"
           onClick={onMenuClick}
           aria-label="Toggle menu"
@@ -24,7 +24,7 @@ export function Header({ title, onMenuClick, actions }: HeaderProps) {
       <div className="kyro-header-right">
         {actions}
         <div className="kyro-header-user">
-          <button className="kyro-header-user-btn">
+          <button type="button" className="kyro-header-user-btn">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
               <circle cx="12" cy="8" r="4" />
               <path d="M4 20c0-4 4-6 8-6s8 2 8 6" />

package/src/components/layout/Layout.tsx

@@ -1,4 +1,4 @@
-import { type CollectionConfig } from '@kyro-cms/core';
+import { type CollectionConfig } from '@kyro-cms/core/client';
 
 interface LayoutProps {
   children: any;
@@ -14,10 +14,10 @@ export default function Layout({ children, collections = [], currentSlug }: Layo
         <div id="sidebar-root" className="hidden lg:block">
           {/* Sidebar rendered here */}
         </div>
-        
+
         {/* Main content */}
         <main className="flex-1 min-w-0">
-          {children}
+          {/* {children} */}
         </main>
       </div>
     </div>

package/src/components/ui/Badge.tsx

@@ -1,13 +1,18 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
 
 interface BadgeProps {
-  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+  variant?: "default" | "success" | "warning" | "danger" | "info";
+  className?: string;
   children: ReactNode;
 }
 
-export function Badge({ variant = 'default', children }: BadgeProps) {
+export function Badge({
+  variant = "default",
+  className = "",
+  children,
+}: BadgeProps) {
   return (
-    <span className={`kyro-badge kyro-badge-${variant}`}>
+    <span className={`kyro-badge kyro-badge-${variant} ${className}`}>
       {children}
     </span>
   );