@kyro-cms/admin 0.9.0 → 0.9.2

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/fix_imports.cjs

@@ -0,0 +1,23 @@
+const fs = require('fs');
+
+const addImport = (file, icons, relativePath) => {
+  let content = fs.readFileSync(file, 'utf8');
+  if (!content.includes('from "' + relativePath + '"')) {
+    const importStatement = `import { ${icons.join(', ')} } from "${relativePath}";\n`;
+    content = importStatement + content;
+    fs.writeFileSync(file, content);
+  } else {
+    // If it exists, we might need to append to the existing import. 
+    // To be safe and simple, let's just add a new line. TS merges imports.
+    const importStatement = `import { ${icons.join(', ')} } from "${relativePath}";\n`;
+    content = importStatement + content;
+    fs.writeFileSync(file, content);
+  }
+}
+
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/MediaGallery.tsx', ['Search', 'Check', 'Server'], './ui/icons');
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/ui/Modal.tsx', ['X'], './icons');
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/ui/PromptModal.tsx', ['X'], './icons');
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/ui/SlidePanel.tsx', ['X'], './icons');
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/users/UsersList.tsx', ['Plus', 'Lock', 'CheckCircle2', 'Edit2', 'Trash2', 'XCircle', 'X'], '../ui/icons');
+

package/src/components/fix_imports2.cjs

@@ -0,0 +1,19 @@
+const fs = require('fs');
+
+const addImport = (file, icons, relativePath) => {
+  let content = fs.readFileSync(file, 'utf8');
+  if (!content.includes('from "' + relativePath + '"')) {
+    const importStatement = `import { ${icons.join(', ')} } from "${relativePath}";\n`;
+    content = importStatement + content;
+    fs.writeFileSync(file, content);
+  } else {
+    const importStatement = `import { ${icons.join(', ')} } from "${relativePath}";\n`;
+    content = importStatement + content;
+    fs.writeFileSync(file, content);
+  }
+}
+
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/AuditLogsPage.tsx', ['Search'], './ui/icons');
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/AutoForm.tsx', ['ChevronRight', 'Check', 'ExternalLink', 'X'], './ui/icons');
+addImport('/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components/ListView.tsx', ['Search', 'Filter', 'Columns3', 'X', 'Trash2', 'Archive', 'ChevronUp', 'Edit2'], './ui/icons');
+

package/src/components/replace_svgs.cjs

@@ -0,0 +1,63 @@
+const fs = require('fs');
+const path = require('path');
+
+const dir = '/Users/macbook/Dev/Web/Astro/kyro-cms/admin/src/components';
+const getFiles = (dir) => {
+  const dirents = fs.readdirSync(dir, { withFileTypes: true });
+  const files = dirents.map((dirent) => {
+    const res = path.resolve(dir, dirent.name);
+    return dirent.isDirectory() ? getFiles(res) : res;
+  });
+  return Array.prototype.concat(...files).filter(f => f.endsWith('.tsx'));
+};
+
+const files = getFiles(dir);
+
+const replacements = [
+  { match: /<svg[^>]*>\s*<path[^>]*d="M12 4v16m8-8H4"[^>]*\/>\s*<\/svg>/g, replace: '<Plus className="w-4 h-4" />', icon: 'Plus' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"[^>]*\/>\s*<\/svg>/g, replace: '<Upload className="w-4 h-4" />', icon: 'Upload' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"[^>]*\/>\s*<\/svg>/g, replace: '<Copy className="w-4 h-4" />', icon: 'Copy' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M19 7l-\.867 12\.142A2 2 0 0116\.138 21H7\.862a2 2 0 01-1\.995-1\.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"[^>]*\/>\s*<\/svg>/g, replace: '<Trash2 className="w-4 h-4" />', icon: 'Trash2' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"[^>]*\/>\s*<\/svg>/g, replace: '<Lock className="w-4 h-4" />', icon: 'Lock' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M10 18a8 8 0 100-16 8 8 0 000 16zm3\.707-9\.293a1 1 0 00-1\.414-1\.414L9 10\.586 7\.707 9\.293a1 1 0 00-1\.414 1\.414l2 2a1 1 0 001\.414 0l4-4z"[^>]*\/>\s*<\/svg>/g, replace: '<CheckCircle2 className="w-4 h-4" />', icon: 'CheckCircle2' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1\.414-9\.414a2 2 0 112\.828 2\.828L11\.828 15H9v-2\.828l8\.586-8\.586z"[^>]*\/>\s*<\/svg>/g, replace: '<Edit2 className="w-4 h-4" />', icon: 'Edit2' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M10 18a8 8 0 100-16 8 8 0 000 16zM8\.707 7\.293a1 1 0 00-1\.414 1\.414L8\.586 10l-1\.293 1\.293a1 1 0 101\.414 1\.414L10 11\.414l1\.293 1\.293a1 1 0 001\.414-1\.414L11\.414 10l1\.293-1\.293a1 1 0 00-1\.414-1\.414L10 8\.586 8\.707 7\.293z"[^>]*\/>\s*<\/svg>/g, replace: '<XCircle className="w-4 h-4" />', icon: 'XCircle' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M6 18L18 6M6 6l12 12"[^>]*\/>\s*<\/svg>/g, replace: '<X className="w-4 h-4" />', icon: 'X' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"[^>]*\/>\s*<\/svg>/g, replace: '<Search className="w-4 h-4" />', icon: 'Search' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M5 13l4 4L19 7"[^>]*\/>\s*<\/svg>/g, replace: '<Check className="w-4 h-4" />', icon: 'Check' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2\.586a1 1 0 01-\.293\.707l-6\.414 6\.414a1 1 0 00-\.293\.707V17l-4 4v-6\.586a1 1 0 00-\.293-\.707L3\.293 7\.293A1 1 0 013 6\.586V4z"[^>]*\/>\s*<\/svg>/g, replace: '<Filter className="w-4 h-4" />', icon: 'Filter' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"[^>]*\/>\s*<\/svg>/g, replace: '<Columns3 className="w-4 h-4" />', icon: 'Columns3' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M12 5v14M5 12h14"[^>]*\/>\s*<\/svg>/g, replace: '<Plus className="w-4 h-4" />', icon: 'Plus' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"[^>]*\/>\s*<\/svg>/g, replace: '<Archive className="w-4 h-4" />', icon: 'Archive' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M5 15l7-7 7 7"[^>]*\/>\s*<\/svg>/g, replace: '<ChevronUp className="w-4 h-4" />', icon: 'ChevronUp' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M15 19l-7-7 7-7"[^>]*\/>\s*<\/svg>/g, replace: '<ChevronRight className="w-4 h-4" />', icon: 'ChevronRight' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M20 6L9 17l-5-5"[^>]*\/>\s*<\/svg>/g, replace: '<Check className="w-4 h-4" />', icon: 'Check' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3"[^>]*\/>\s*<\/svg>/g, replace: '<ExternalLink className="w-4 h-4" />', icon: 'ExternalLink' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"[^>]*\/>\s*<\/svg>/g, replace: '<File className="w-4 h-4" />', icon: 'File' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"[^>]*\/>\s*<\/svg>/g, replace: '<Clipboard className="w-4 h-4" />', icon: 'Clipboard' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M18 6L6 18M6 6l12 12"[^>]*\/>\s*<\/svg>/g, replace: '<X className="w-4 h-4" />', icon: 'X' },
+  { match: /<svg[^>]*>\s*<path[^>]*d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2H5a2 2 0 00-2 2v1m2 2a2 2 0 11-4 0 2 2 0 014 0zm2 2h\.008v\.008H5v-\.008z"[^>]*\/>\s*<\/svg>/g, replace: '<Server className="w-8 h-8 text-[var(--kyro-sidebar-text-active)]" />', icon: 'Server' }
+];
+
+const results = {};
+
+for (const file of files) {
+  let content = fs.readFileSync(file, 'utf8');
+  let changed = false;
+  let addedIcons = new Set();
+  
+  for (const r of replacements) {
+    if (content.match(r.match)) {
+      content = content.replace(r.match, r.replace);
+      addedIcons.add(r.icon);
+      changed = true;
+    }
+  }
+  
+  if (changed) {
+    results[file] = Array.from(addedIcons);
+    fs.writeFileSync(file, content);
+  }
+}
+
+console.log(JSON.stringify(results, null, 2));

package/src/components/ui/Dropdown.tsx

@@ -4,12 +4,14 @@ interface DropdownProps {
   trigger: ReactNode;
   children: ReactNode;
   align?: "left" | "right";
+  direction?: "up" | "down";
 }
 
 export function Dropdown({
   trigger,
   children,
   align = "right",
+  direction = "up",
 }: DropdownProps) {
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
@@ -34,8 +36,11 @@ export function Dropdown({
       </div>
       {open && (
         <div
-          className={`absolute z-[100] mt-2 min-w-[200px] py-2 bg-[var(--kyro-surface)] rounded-2xl shadow-2xl border border-[var(--kyro-border)] animate-in fade-in zoom-in-95 duration-100 ${align === "right" ? "right-0 bottom-full mb-2" : "left-0 bottom-full mb-2"
-            }`}
+          className={`absolute z-[100] min-w-[200px] py-2 bg-[var(--kyro-surface)] rounded-2xl shadow-2xl border border-[var(--kyro-border)] animate-in fade-in zoom-in-95 duration-100 ${
+            align === "right" ? "right-0" : "left-0"
+          } ${
+            direction === "down" ? "top-full mt-2" : "bottom-full mb-2"
+          }`}
           onClick={() => setOpen(false)}
         >
           {children}

package/src/components/ui/Modal.tsx

@@ -1,3 +1,4 @@
+import { X } from "./icons";
 import React, { useEffect, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 
@@ -17,8 +18,8 @@ interface ModalProps {
   title: string;
   children: ReactNode;
   footer?: ReactNode;
-  size?: "sm" | "md" | "lg";
-  variant?: "default" | "danger";
+  size?: "sm" | "md" | "lg" | "full";
+  variant?: "default" | "danger" | "lightbox";
 }
 
 export function Modal({
@@ -52,43 +53,39 @@ export function Modal({
     sm: "max-w-sm",
     md: "max-w-md",
     lg: "max-w-lg",
+    full: "w-full h-full max-w-none rounded-none border-0",
   };
 
+  const isLightbox = variant === "lightbox";
+
   return createPortal(
     <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
       <div
-        className="absolute inset-0 bg-[var(--kyro-black)]/40 backdrop-blur-md transition-all duration-500"
+        className={`absolute inset-0 transition-all duration-500 ${isLightbox ? "bg-black/95 backdrop-blur-none" : "bg-[var(--kyro-black)]/40 backdrop-blur-md"}`}
         onClick={onClose}
       />
       <div
-        className={`relative w-full ${sizeClasses[size]} bg-[var(--kyro-surface)] rounded-[var(--kyro-radius-lg)] shadow-2xl animate-in fade-in zoom-in-95 duration-300 border ${variant === "danger"
+        className={`relative ${sizeClasses[size]} ${isLightbox ? "bg-transparent text-white" : "bg-[var(--kyro-surface)]"} ${!isLightbox && size !== "full" ? "rounded-[var(--kyro-radius-lg)]" : ""} shadow-2xl animate-in fade-in zoom-in-95 duration-300 ${!isLightbox ? "border" : ""} ${variant === "danger"
           ? "border-red-500/30"
           : "border-[var(--kyro-border)]"
-          } overflow-hidden`}
+          } flex flex-col overflow-hidden`}
       >
-        <div className="flex items-center justify-between px-8 py-6 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/50 backdrop-blur-md">
-          <h2 className="text-xl font-bold text-[var(--kyro-text-primary)]">
-            {title}
-          </h2>
-          <button
-            type="button"
-            onClick={onClose}
-            className="p-2 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] rounded-xl hover:bg-[var(--kyro-surface)] transition-all duration-200"
-          >
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2.5"
+        {!isLightbox && (
+          <div className="flex items-center justify-between px-8 py-6 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/50 backdrop-blur-md">
+            <h2 className="text-xl font-bold text-[var(--kyro-text-primary)]">
+              {title}
+            </h2>
+            <button
+              type="button"
+              onClick={onClose}
+              className="p-2 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] rounded-xl hover:bg-[var(--kyro-surface)] transition-all duration-200"
             >
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-        <div className="px-8 py-8">{children}</div>
-        {footer && (
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        )}
+        <div className={`flex-1 overflow-auto ${isLightbox ? "" : "px-8 py-8"}`}>{children}</div>
+        {footer && !isLightbox && (
           <div className="flex items-center justify-end gap-3 px-8 py-6 border-t border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/50">
             {footer}
           </div>