@schneiderelli/cms-runtime 0.0.3 → 0.0.5

package/dist/registry.js

@@ -0,0 +1,374 @@
+// =============================================================================
+// CSM-RUNTIME REGISTRY
+// =============================================================================
+// Block-Metadaten für den Editor
+// Beschreibt welche Blocks verfügbar sind und wie sie konfiguriert werden
+// =============================================================================
+// -----------------------------------------------------------------------------
+// BLOCK REGISTRY - Alle verfügbaren Blocks
+// -----------------------------------------------------------------------------
+export const blockRegistry = [
+    // =========================================================================
+    // CONTENT BLOCKS
+    // =========================================================================
+    {
+        type: 'markdown',
+        label: 'Markdown',
+        icon: '📝',
+        description: 'Freier Text mit Markdown-Formatierung',
+        category: 'content',
+        defaults: { content: '' },
+        fields: [
+            {
+                name: 'content',
+                label: 'Inhalt',
+                type: 'markdown',
+                required: true,
+                placeholder: 'Schreibe hier deinen Text...'
+            }
+        ]
+    },
+    {
+        type: 'heading',
+        label: 'Überschrift',
+        icon: '🔤',
+        description: 'Überschrift H1-H6',
+        category: 'content',
+        defaults: { text: '', level: 2 },
+        fields: [
+            {
+                name: 'text',
+                label: 'Text',
+                type: 'text',
+                required: true,
+                placeholder: 'Überschrift eingeben...'
+            },
+            {
+                name: 'level',
+                label: 'Level',
+                type: 'select',
+                options: [
+                    { value: '1', label: 'H1 - Hauptüberschrift' },
+                    { value: '2', label: 'H2 - Abschnitt' },
+                    { value: '3', label: 'H3 - Unterabschnitt' },
+                    { value: '4', label: 'H4' },
+                    { value: '5', label: 'H5' },
+                    { value: '6', label: 'H6' }
+                ]
+            }
+        ]
+    },
+    {
+        type: 'quote',
+        label: 'Zitat',
+        icon: '💬',
+        description: 'Zitat mit optionaler Quellenangabe',
+        category: 'content',
+        defaults: { content: '', source: '' },
+        fields: [
+            {
+                name: 'content',
+                label: 'Zitat',
+                type: 'textarea',
+                required: true,
+                placeholder: 'Zitat eingeben...'
+            },
+            {
+                name: 'source',
+                label: 'Quelle',
+                type: 'text',
+                placeholder: 'Autor oder Quelle...'
+            }
+        ]
+    },
+    {
+        type: 'note',
+        label: 'Hinweis',
+        icon: '💡',
+        description: 'Info-Box, Warnung, Tipp oder Fehler',
+        category: 'content',
+        defaults: { content: '', variant: 'info' },
+        fields: [
+            {
+                name: 'content',
+                label: 'Inhalt',
+                type: 'markdown',
+                required: true,
+                placeholder: 'Hinweis-Text...'
+            },
+            {
+                name: 'variant',
+                label: 'Typ',
+                type: 'select',
+                options: [
+                    { value: 'info', label: '💙 Info' },
+                    { value: 'tip', label: '💚 Tipp' },
+                    { value: 'warning', label: '💛 Warnung' },
+                    { value: 'danger', label: '❤️ Achtung' }
+                ]
+            }
+        ]
+    },
+    {
+        type: 'faq',
+        label: 'FAQ',
+        icon: '❓',
+        description: 'Häufig gestellte Fragen',
+        category: 'content',
+        defaults: { title: '', items: [] },
+        fields: [
+            {
+                name: 'title',
+                label: 'Titel (optional)',
+                type: 'text',
+                placeholder: 'Häufige Fragen'
+            },
+            {
+                name: 'items',
+                label: 'Fragen',
+                type: 'list',
+                listFields: [
+                    { name: 'q', label: 'Frage', type: 'text', required: true },
+                    { name: 'a', label: 'Antwort', type: 'markdown', required: true }
+                ]
+            }
+        ]
+    },
+    {
+        type: 'howto',
+        label: 'Anleitung',
+        icon: '📋',
+        description: 'Schritt-für-Schritt-Anleitung',
+        category: 'content',
+        defaults: { title: '', steps: [] },
+        fields: [
+            {
+                name: 'title',
+                label: 'Titel (optional)',
+                type: 'text',
+                placeholder: 'So gehts...'
+            },
+            {
+                name: 'steps',
+                label: 'Schritte',
+                type: 'list',
+                listFields: [
+                    { name: 'title', label: 'Schritt-Titel', type: 'text', required: true },
+                    { name: 'description', label: 'Beschreibung', type: 'markdown', required: true }
+                ]
+            }
+        ]
+    },
+    {
+        type: 'hero',
+        label: 'Hero',
+        icon: '🦸',
+        description: 'Großer Titel-Bereich',
+        category: 'content',
+        defaults: { title: '', subtitle: '' },
+        fields: [
+            {
+                name: 'title',
+                label: 'Titel',
+                type: 'text',
+                required: true,
+                placeholder: 'Haupttitel'
+            },
+            {
+                name: 'subtitle',
+                label: 'Untertitel',
+                type: 'textarea',
+                placeholder: 'Kurze Beschreibung...'
+            }
+        ]
+    },
+    {
+        type: 'divider',
+        label: 'Trennlinie',
+        icon: '➖',
+        description: 'Horizontale Trennlinie',
+        category: 'content',
+        defaults: {},
+        fields: []
+    },
+    // =========================================================================
+    // MEDIA BLOCKS
+    // =========================================================================
+    {
+        type: 'image',
+        label: 'Bild',
+        icon: '🖼️',
+        description: 'Bild mit optionaler Beschriftung',
+        category: 'media',
+        defaults: { src: '', alt: '', caption: '' },
+        fields: [
+            {
+                name: 'src',
+                label: 'Bild',
+                type: 'image',
+                required: true
+            },
+            {
+                name: 'alt',
+                label: 'Alt-Text',
+                type: 'text',
+                placeholder: 'Beschreibung für Screenreader...'
+            },
+            {
+                name: 'caption',
+                label: 'Bildunterschrift',
+                type: 'text',
+                placeholder: 'Optionale Bildunterschrift...'
+            }
+        ]
+    },
+    // =========================================================================
+    // LAYOUT BLOCKS
+    // =========================================================================
+    {
+        type: 'children',
+        label: 'Unterseiten',
+        icon: '📂',
+        description: 'Zeigt Kind-Seiten als Grid',
+        category: 'layout',
+        defaults: { title: '', columns: 3 },
+        fields: [
+            {
+                name: 'title',
+                label: 'Titel (optional)',
+                type: 'text',
+                placeholder: 'Alle Themen'
+            },
+            {
+                name: 'columns',
+                label: 'Spalten',
+                type: 'select',
+                options: [
+                    { value: '2', label: '2 Spalten' },
+                    { value: '3', label: '3 Spalten' },
+                    { value: '4', label: '4 Spalten' }
+                ]
+            }
+        ]
+    },
+    {
+        type: 'links',
+        label: 'Link-Liste',
+        icon: '🔗',
+        description: 'Liste von Links',
+        category: 'layout',
+        defaults: { title: '', items: [] },
+        fields: [
+            {
+                name: 'title',
+                label: 'Titel (optional)',
+                type: 'text'
+            },
+            {
+                name: 'items',
+                label: 'Links',
+                type: 'list',
+                listFields: [
+                    { name: 'label', label: 'Text', type: 'text', required: true },
+                    { name: 'href', label: 'URL', type: 'text', required: true },
+                    { name: 'icon', label: 'Icon', type: 'text' }
+                ]
+            }
+        ]
+    },
+    {
+        type: 'breadcrumb',
+        label: 'Breadcrumb',
+        icon: '🧭',
+        description: 'Navigationspfad',
+        category: 'layout',
+        defaults: {},
+        fields: []
+    },
+    // =========================================================================
+    // MONETIZATION BLOCKS
+    // =========================================================================
+    {
+        type: 'affiliate',
+        label: 'Affiliate',
+        icon: '🛒',
+        description: 'Affiliate-Produkt-Empfehlung',
+        category: 'monetization',
+        defaults: { ref: '', variant: 'box' },
+        fields: [
+            {
+                name: 'ref',
+                label: 'Referenz',
+                type: 'text',
+                placeholder: 'z.B. dyson/v11'
+            },
+            {
+                name: 'variant',
+                label: 'Darstellung',
+                type: 'select',
+                options: [
+                    { value: 'inline', label: 'Inline' },
+                    { value: 'box', label: 'Box' },
+                    { value: 'sticky', label: 'Sticky (Mobile)' },
+                    { value: 'floating', label: 'Floating (Desktop)' }
+                ]
+            }
+        ]
+    },
+    {
+        type: 'ad',
+        label: 'Werbung',
+        icon: '📢',
+        description: 'Werbeplatz',
+        category: 'monetization',
+        defaults: { slot: '', variant: 'inline' },
+        fields: [
+            {
+                name: 'slot',
+                label: 'Slot-ID',
+                type: 'text'
+            },
+            {
+                name: 'variant',
+                label: 'Darstellung',
+                type: 'select',
+                options: [
+                    { value: 'inline', label: 'Inline' },
+                    { value: 'banner', label: 'Banner' },
+                    { value: 'sidebar', label: 'Sidebar' }
+                ]
+            }
+        ]
+    }
+];
+// -----------------------------------------------------------------------------
+// HELPER FUNCTIONS
+// -----------------------------------------------------------------------------
+/** Holt Block-Definition by Type */
+export function getBlockDefinition(type) {
+    return blockRegistry.find(b => b.type === type);
+}
+/** Gruppiert Blocks nach Kategorie */
+export function getBlocksByCategory() {
+    const categories = {
+        content: [],
+        media: [],
+        layout: [],
+        monetization: []
+    };
+    for (const block of blockRegistry) {
+        categories[block.category].push(block);
+    }
+    return categories;
+}
+/** Erstellt einen neuen Block mit Default-Werten */
+export function createBlockFromDefinition(type) {
+    const def = getBlockDefinition(type);
+    if (!def)
+        return undefined;
+    return {
+        id: `block-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+        type,
+        ...def.defaults
+    };
+}

package/dist/types.d.ts

@@ -1,47 +1,277 @@
+export interface Page {
+    /** Eindeutige ID (für D1 Storage) */
+    id: string;
+    /** URL-Slug */
+    slug: string;
+    /** Seitentitel (H1 und <title>) */
+    title: string;
+    /** Meta Description für SEO */
+    description?: string;
+    /** Parent-Slug für Hierarchie */
+    parent?: string;
+    /** Icon (Emoji) für Navigation */
+    icon?: string;
+    /** Reihenfolge in Navigation */
+    order?: number;
+    /** In Navigation anzeigen? */
+    showInNav?: boolean;
+    /** Kurzname für Navigation */
+    navTitle?: string;
+    /** Layout-ID (optional) */
+    layoutId?: string;
+    /** Die Inhalte */
+    blocks: Block[];
+    /** Metadata */
+    createdAt?: string;
+    updatedAt?: string;
+}
+/** Layout Region Key - Vordefinierte Bereiche */
+export type LayoutRegionKey = 'header' | 'sidebar' | 'content' | 'aside' | 'footer';
+/** Layout Region - Ein Bereich im Layout */
+export interface LayoutRegion {
+    /** Region-Name */
+    name: string;
+    /** Grid-Area Name für CSS Grid */
+    gridArea: LayoutRegionKey;
+    /** Blöcke in dieser Region (nur für header/sidebar/footer) */
+    blocks: Block[];
+    /** Sticky Position? */
+    sticky?: boolean;
+}
+/** Grid Konfiguration für Layout */
+export interface LayoutGridConfig {
+    /** CSS Grid template-areas */
+    areas: string;
+    /** CSS Grid template-columns */
+    columns: string;
+    /** CSS Grid template-rows */
+    rows: string;
+    /** Gap zwischen Grid-Items */
+    gap?: string;
+}
+/** Layout - Template für mehrere Seiten */
+export interface Layout {
+    /** Eindeutige ID */
+    id: string;
+    /** Layout-Name */
+    name: string;
+    /** Beschreibung */
+    description?: string;
+    /** Grid-Konfiguration */
+    grid: LayoutGridConfig;
+    /** Regionen */
+    regions: {
+        [K in LayoutRegionKey]?: LayoutRegion;
+    };
+    /** Metadata */
+    createdAt?: string;
+    updatedAt?: string;
+}
 export interface BaseBlock {
+    /** Eindeutige Block-ID */
     id: string;
+    /** Block-Typ */
     type: string;
 }
-export interface TextBlock extends BaseBlock {
-    type: "text";
+/** Markdown Block - Der wichtigste Block */
+export interface MarkdownBlock extends BaseBlock {
+    type: 'markdown';
+    /** Markdown Content */
     content: string;
 }
+/** Heading Block */
 export interface HeadingBlock extends BaseBlock {
-    type: "heading";
-    level: number;
+    type: 'heading';
+    /** Überschrift-Text */
     text: string;
+    /** Level: 1-6 */
+    level: 1 | 2 | 3 | 4 | 5 | 6;
 }
+/** Image Block */
 export interface ImageBlock extends BaseBlock {
-    type: "image";
+    type: 'image';
+    /** Bild-URL (R2 oder extern) */
     src: string;
+    /** Alt-Text */
     alt?: string;
+    /** Bildunterschrift */
+    caption?: string;
 }
-export interface MarkdownBlock extends BaseBlock {
-    type: "markdown";
-    content: string;
-}
+/** Quote Block */
 export interface QuoteBlock extends BaseBlock {
-    type: "quote";
-    text: string;
-    author?: string;
+    type: 'quote';
+    /** Zitat-Text (kann Markdown sein) */
+    content: string;
+    /** Quelle/Autor */
+    source?: string;
 }
+/** Divider Block */
 export interface DividerBlock extends BaseBlock {
-    type: "divider";
+    type: 'divider';
 }
-export interface FaqEntry extends BaseBlock {
-    question: string;
-    answer: string;
+/** Note/Callout Block */
+export interface NoteBlock extends BaseBlock {
+    type: 'note';
+    /** Inhalt (kann Markdown sein) */
+    content: string;
+    /** Variante */
+    variant: 'info' | 'warning' | 'tip' | 'danger';
 }
+/** FAQ Block */
 export interface FaqBlock extends BaseBlock {
-    type: "faq";
-    items: FaqEntry[];
+    type: 'faq';
+    /** Optionaler Titel */
+    title?: string;
+    /** FAQ-Einträge */
+    items: FaqItem[];
 }
-export interface HowToStep extends BaseBlock {
-    title: string;
-    description: string;
+export interface FaqItem {
+    /** Frage */
+    q: string;
+    /** Antwort (Markdown) */
+    a: string;
 }
+/** HowTo/Steps Block */
 export interface HowToBlock extends BaseBlock {
-    type: "howto";
+    type: 'howto';
+    /** Optionaler Titel */
+    title?: string;
+    /** Schritte */
     steps: HowToStep[];
 }
-export type Block = TextBlock | HeadingBlock | ImageBlock | MarkdownBlock | QuoteBlock | DividerBlock | FaqBlock | HowToBlock;
+export interface HowToStep {
+    /** Schritt-Titel */
+    title: string;
+    /** Beschreibung (Markdown) */
+    description: string;
+}
+/** Hero Block */
+export interface HeroBlock extends BaseBlock {
+    type: 'hero';
+    /** Haupttitel */
+    title: string;
+    /** Untertitel */
+    subtitle?: string;
+}
+/** Children Block - Zeigt Kind-Seiten */
+export interface ChildrenBlock extends BaseBlock {
+    type: 'children';
+    /** Optionaler Titel */
+    title?: string;
+    /** Anzahl Spalten */
+    columns?: 2 | 3 | 4;
+}
+/** Link List Block */
+export interface LinksBlock extends BaseBlock {
+    type: 'links';
+    /** Optionaler Titel */
+    title?: string;
+    /** Links */
+    items: LinkItem[];
+}
+export interface LinkItem {
+    /** Link-Text */
+    label: string;
+    /** URL */
+    href: string;
+    /** Icon (Emoji) */
+    icon?: string;
+}
+/** Breadcrumb Block */
+export interface BreadcrumbBlock extends BaseBlock {
+    type: 'breadcrumb';
+}
+/** Affiliate Block */
+export interface AffiliateBlock extends BaseBlock {
+    type: 'affiliate';
+    /** Referenz zum Affiliate */
+    ref?: string;
+    /** Darstellung */
+    variant?: 'inline' | 'box' | 'sticky' | 'floating';
+}
+/** Ad Block */
+export interface AdBlock extends BaseBlock {
+    type: 'ad';
+    /** Slot-ID */
+    slot?: string;
+    /** Darstellung */
+    variant?: 'inline' | 'banner' | 'sidebar';
+}
+/** Container Block - Grid/Flex Container für Layout */
+export interface ContainerBlock extends BaseBlock {
+    type: 'container';
+    /** Blöcke im Container */
+    blocks: Block[];
+    /** Layout-Typ */
+    layout: 'grid' | 'flex' | 'stack';
+    /** Grid-Konfiguration (nur bei layout: 'grid') */
+    grid?: {
+        columns?: string;
+        rows?: string;
+        gap?: string;
+    };
+    /** Flex-Konfiguration (nur bei layout: 'flex') */
+    flex?: {
+        direction?: 'row' | 'column';
+        wrap?: boolean;
+        gap?: string;
+        align?: 'start' | 'center' | 'end' | 'stretch';
+        justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around';
+    };
+    /** Stack-Konfiguration (nur bei layout: 'stack') */
+    stack?: {
+        gap?: string;
+        align?: 'start' | 'center' | 'end' | 'stretch';
+    };
+}
+/** Logo Block - Für Header/Branding */
+export interface LogoBlock extends BaseBlock {
+    type: 'logo';
+    /** Logo-Bild URL */
+    src?: string;
+    /** Text/Name (wenn kein Bild) */
+    text?: string;
+    /** Alt-Text */
+    alt?: string;
+    /** Link-Ziel */
+    href?: string;
+}
+/** Navigation Block - Menü */
+export interface NavigationBlock extends BaseBlock {
+    type: 'navigation';
+    /** Navigations-Items */
+    items: NavItem[];
+    /** Darstellung */
+    variant?: 'horizontal' | 'vertical' | 'dropdown';
+    /** Zeige Icons? */
+    showIcons?: boolean;
+}
+export interface NavItem {
+    /** Label */
+    label: string;
+    /** Link */
+    href: string;
+    /** Icon (Emoji) */
+    icon?: string;
+    /** Kinder (für Dropdown) */
+    children?: NavItem[];
+}
+/** Search Block - Suchleiste */
+export interface SearchBlock extends BaseBlock {
+    type: 'search';
+    /** Placeholder-Text */
+    placeholder?: string;
+    /** Action URL */
+    action?: string;
+}
+export type Block = MarkdownBlock | HeadingBlock | ImageBlock | QuoteBlock | DividerBlock | NoteBlock | FaqBlock | HowToBlock | HeroBlock | ChildrenBlock | LinksBlock | BreadcrumbBlock | AffiliateBlock | AdBlock | ContainerBlock | LogoBlock | NavigationBlock | SearchBlock;
+export type BlockType = Block['type'];
+export declare function createBlock<T extends Block>(type: T['type'], data: Omit<T, 'id' | 'type'>): T;
+export declare function createPage(data: Omit<Page, 'id' | 'blocks' | 'createdAt' | 'updatedAt'> & {
+    blocks?: Block[];
+}): Page;
+export declare function createLayout(data: Omit<Layout, 'id' | 'createdAt' | 'updatedAt'>): Layout;
+export declare function createSimpleLayout(): Layout;
+export declare function createTwoColumnLayout(): Layout;
+export declare function createThreeColumnLayout(): Layout;
+export declare function createFullWidthLayout(): Layout;