@schneiderelli/cms-runtime 0.0.4 → 0.0.5

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;
@@ -153,9 +197,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.5",
 	"description": "Content System Manager Runtime - Shared types and components for CMS editor and website framework",
 	"scripts": {
 		"dev": "vite dev",