@schneiderelli/cms-runtime 0.0.4 → 0.0.6

package/dist/components/blocks/HeadingBlock.svelte

@@ -9,17 +9,17 @@
 </script>
 
 {#if block.level === 1}
-    <h1 class="csm-heading csm-h1">{block.text}</h1>
+    <h1 class="csm-heading csm-h1" style:color={block.color || undefined}>{block.text}</h1>
 {:else if block.level === 2}
-    <h2 class="csm-heading csm-h2">{block.text}</h2>
+    <h2 class="csm-heading csm-h2" style:color={block.color || undefined}>{block.text}</h2>
 {:else if block.level === 3}
-    <h3 class="csm-heading csm-h3">{block.text}</h3>
+    <h3 class="csm-heading csm-h3" style:color={block.color || undefined}>{block.text}</h3>
 {:else if block.level === 4}
-    <h4 class="csm-heading csm-h4">{block.text}</h4>
+    <h4 class="csm-heading csm-h4" style:color={block.color || undefined}>{block.text}</h4>
 {:else if block.level === 5}
-    <h5 class="csm-heading csm-h5">{block.text}</h5>
+    <h5 class="csm-heading csm-h5" style:color={block.color || undefined}>{block.text}</h5>
 {:else}
-    <h6 class="csm-heading csm-h6">{block.text}</h6>
+    <h6 class="csm-heading csm-h6" style:color={block.color || undefined}>{block.text}</h6>
 {/if}
 
 <style>

package/dist/components/blocks/HeroBlock.svelte

@@ -7,7 +7,11 @@
     let { block }: Props = $props();
 </script>
 
-<header class="csm-hero">
+<header
+    class="csm-hero"
+    style:background-color={block.backgroundColor || undefined}
+    style:color={block.textColor || undefined}
+>
     <h1 class="csm-hero-title">{block.title}</h1>
     {#if block.subtitle}
         <p class="csm-hero-subtitle">{block.subtitle}</p>

package/dist/components/blocks/NoteBlock.svelte

@@ -11,7 +11,11 @@
     const html = $derived(marked.parseInline(block.content) as string);
 </script>
 
-<div class="csm-note csm-note-{block.variant}">
+<div
+    class="csm-note csm-note-{block.variant}"
+    style:background-color={block.backgroundColor || undefined}
+    style:color={block.textColor || undefined}
+>
     {@html html}
 </div>
 

package/dist/types.d.ts

@@ -17,12 +17,56 @@ export interface Page {
     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;
@@ -42,6 +86,8 @@ export interface HeadingBlock extends BaseBlock {
     text: string;
     /** Level: 1-6 */
     level: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Textfarbe (optional) */
+    color?: string;
 }
 /** Image Block */
 export interface ImageBlock extends BaseBlock {
@@ -72,6 +118,10 @@ export interface NoteBlock extends BaseBlock {
     content: string;
     /** Variante */
     variant: 'info' | 'warning' | 'tip' | 'danger';
+    /** Hintergrundfarbe (optional, überschreibt variant) */
+    backgroundColor?: string;
+    /** Textfarbe (optional) */
+    textColor?: string;
 }
 /** FAQ Block */
 export interface FaqBlock extends BaseBlock {
@@ -108,6 +158,10 @@ export interface HeroBlock extends BaseBlock {
     title: string;
     /** Untertitel */
     subtitle?: string;
+    /** Hintergrundfarbe (optional) */
+    backgroundColor?: string;
+    /** Textfarbe (optional) */
+    textColor?: string;
 }
 /** Children Block - Zeigt Kind-Seiten */
 export interface ChildrenBlock extends BaseBlock {
@@ -153,9 +207,81 @@ export interface AdBlock extends BaseBlock {
     /** Darstellung */
     variant?: 'inline' | 'banner' | 'sidebar';
 }
-export type Block = MarkdownBlock | HeadingBlock | ImageBlock | QuoteBlock | DividerBlock | NoteBlock | FaqBlock | HowToBlock | HeroBlock | ChildrenBlock | LinksBlock | BreadcrumbBlock | AffiliateBlock | AdBlock;
+/** 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;

package/dist/types.js

@@ -28,3 +28,152 @@ export function createPage(data) {
         ...data
     };
 }
+// -----------------------------------------------------------------------------
+// HELPER: Layout erstellen
+// -----------------------------------------------------------------------------
+let layoutIdCounter = 0;
+export function createLayout(data) {
+    const now = new Date().toISOString();
+    return {
+        id: `layout-${Date.now()}-${++layoutIdCounter}`,
+        createdAt: now,
+        updatedAt: now,
+        ...data
+    };
+}
+// -----------------------------------------------------------------------------
+// LAYOUT PRESETS - Vordefinierte Layouts
+// -----------------------------------------------------------------------------
+export function createSimpleLayout() {
+    return createLayout({
+        name: 'Einfaches Layout',
+        description: 'Header + Content',
+        grid: {
+            areas: `
+                "header"
+                "content"
+            `,
+            columns: '1fr',
+            rows: 'auto 1fr',
+            gap: '0'
+        },
+        regions: {
+            header: {
+                name: 'Header',
+                gridArea: 'header',
+                blocks: [],
+                sticky: true
+            },
+            content: {
+                name: 'Hauptinhalt',
+                gridArea: 'content',
+                blocks: []
+            }
+        }
+    });
+}
+export function createTwoColumnLayout() {
+    return createLayout({
+        name: '2-Spalten Layout',
+        description: 'Header + Sidebar + Content',
+        grid: {
+            areas: `
+                "header header"
+                "sidebar content"
+            `,
+            columns: '280px 1fr',
+            rows: 'auto 1fr',
+            gap: '0'
+        },
+        regions: {
+            header: {
+                name: 'Header',
+                gridArea: 'header',
+                blocks: [],
+                sticky: true
+            },
+            sidebar: {
+                name: 'Sidebar',
+                gridArea: 'sidebar',
+                blocks: []
+            },
+            content: {
+                name: 'Hauptinhalt',
+                gridArea: 'content',
+                blocks: []
+            }
+        }
+    });
+}
+export function createThreeColumnLayout() {
+    return createLayout({
+        name: '3-Spalten Layout',
+        description: 'Header + Sidebar + Content + Aside',
+        grid: {
+            areas: `
+                "header header header"
+                "sidebar content aside"
+            `,
+            columns: '280px 1fr 300px',
+            rows: 'auto 1fr',
+            gap: '0'
+        },
+        regions: {
+            header: {
+                name: 'Header',
+                gridArea: 'header',
+                blocks: [],
+                sticky: true
+            },
+            sidebar: {
+                name: 'Linke Sidebar',
+                gridArea: 'sidebar',
+                blocks: []
+            },
+            content: {
+                name: 'Hauptinhalt',
+                gridArea: 'content',
+                blocks: []
+            },
+            aside: {
+                name: 'Rechte Sidebar',
+                gridArea: 'aside',
+                blocks: []
+            }
+        }
+    });
+}
+export function createFullWidthLayout() {
+    return createLayout({
+        name: 'Full-Width Layout',
+        description: 'Header + Content + Footer',
+        grid: {
+            areas: `
+                "header"
+                "content"
+                "footer"
+            `,
+            columns: '1fr',
+            rows: 'auto 1fr auto',
+            gap: '0'
+        },
+        regions: {
+            header: {
+                name: 'Header',
+                gridArea: 'header',
+                blocks: [],
+                sticky: true
+            },
+            content: {
+                name: 'Hauptinhalt',
+                gridArea: 'content',
+                blocks: []
+            },
+            footer: {
+                name: 'Footer',
+                gridArea: 'footer',
+                blocks: []
+            }
+        }
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@schneiderelli/cms-runtime",
-	"version": "0.0.4",
+	"version": "0.0.6",
 	"description": "Content System Manager Runtime - Shared types and components for CMS editor and website framework",
 	"scripts": {
 		"dev": "vite dev",