@schneiderelli/cms-runtime 0.0.3 → 0.0.4

package/dist/components/BlockRenderer.svelte

@@ -1,78 +1,113 @@
 <script lang="ts">
-    import type {
-        Block,
-        TextBlock,
-        HeadingBlock,
-        ImageBlock,
-        MarkdownBlock,
-        QuoteBlock,
-        DividerBlock,
-        FaqBlock,
-        HowToBlock
-    } from "../types.js";
-import { marked } from "marked";
-    let { blocks } = $props<{ blocks: Block[] }>();
+    import type { Block } from '../types.js';
+    // Block Components
+    import MarkdownBlock from './blocks/MarkdownBlock.svelte';
+    import HeadingBlock from './blocks/HeadingBlock.svelte';
+    import ImageBlock from './blocks/ImageBlock.svelte';
+    import QuoteBlock from './blocks/QuoteBlock.svelte';
+    import DividerBlock from './blocks/DividerBlock.svelte';
+    import NoteBlock from './blocks/NoteBlock.svelte';
+    import FaqBlock from './blocks/FaqBlock.svelte';
+    import HowToBlock from './blocks/HowToBlock.svelte';
+    import HeroBlock from './blocks/HeroBlock.svelte';
+    import ChildrenBlock from './blocks/ChildrenBlock.svelte';
+    import LinksBlock from './blocks/LinksBlock.svelte';
+    import BreadcrumbBlock from './blocks/BreadcrumbBlock.svelte';
+    import AffiliateBlock from './blocks/AffiliateBlock.svelte';
+    import AdBlock from './blocks/AdBlock.svelte';
+
+    interface Props {
+        /** Die zu rendernden Blocks */
+        blocks: Block[];
+
+        /** 
+         * Custom Renderer für bestimmte Block-Typen
+         * Das Framework kann hier eigene Implementierungen übergeben
+         */
+        customRenderers?: Partial<Record<Block['type'], import('svelte').Component>>;
+
+        /** 
+         * Context-Daten die an Blocks weitergegeben werden
+         * z.B. currentSlug für Breadcrumbs
+         */
+        context?: Record<string, unknown>;
+    }
+
+    let { blocks, customRenderers = {}, context = {} }: Props = $props();
 </script>
 
-<div class="block-container">
-{#each blocks as block}
-    {#if block.type === "heading"}
-        <h1 style:margin-bottom="1rem">
-            {(block as HeadingBlock).text}
-        </h1>
-
-    {:else if block.type === "text"}
-        <p>
-            {(block as TextBlock).content}
-        </p>
-
-    {:else if block.type === "image"}
-        <img
-            src={(block as ImageBlock).src}
-            alt={(block as ImageBlock).alt ?? ""}
-            style="max-width: 100%; height: auto; margin: 1rem 0;"
-        />
-
-    {:else if block.type === "markdown"}
-        <div class="markdown">
-            {@html marked((block as MarkdownBlock).content)}
-        </div>
+<div class="csm-blocks">
+    {#each blocks as block (block.id)}
+        <div class="csm-block csm-block-{block.type}">
+            {#if block.type === 'markdown'}
+                <MarkdownBlock {block} />
+
+            {:else if block.type === 'heading'}
+                <HeadingBlock {block} />
+
+            {:else if block.type === 'image'}
+                <ImageBlock {block} />
+
+            {:else if block.type === 'quote'}
+                <QuoteBlock {block} />
+
+            {:else if block.type === 'divider'}
+                <DividerBlock />
+
+            {:else if block.type === 'note'}
+                <NoteBlock {block} />
+
+            {:else if block.type === 'faq'}
+                <FaqBlock {block} />
 
-    {:else if block.type === "quote"}
-        <blockquote style="margin: 1rem 0; font-style: italic;">
-            <p>{(block as QuoteBlock).text}</p>
-            {#if (block as QuoteBlock).author}
-                <footer>– {(block as QuoteBlock).author}</footer>
+            {:else if block.type === 'howto'}
+                <HowToBlock {block} />
+
+            {:else if block.type === 'hero'}
+                <HeroBlock {block} />
+
+            {:else if block.type === 'children'}
+                <ChildrenBlock {block} />
+
+            {:else if block.type === 'links'}
+                <LinksBlock {block} />
+
+            {:else if block.type === 'breadcrumb'}
+                <BreadcrumbBlock {block} />
+
+            {:else if block.type === 'affiliate'}
+                <AffiliateBlock {block} />
+
+            {:else if block.type === 'ad'}
+                <AdBlock {block} />
+
+            {:else}
+                <div class="csm-block-unknown">
+                    ⚠️ Unbekannter Block: {(block as { type: string }).type}
+                </div>
             {/if}
-        </blockquote>
-
-    {:else if block.type === "divider"}
-        <hr style="margin: 2rem 0;" />
-
-    {:else if block.type === "faq"}
-        <div class="faq-block">
-            {#each (block as FaqBlock).items as item}
-                <details>
-                    <summary>{item.question}</summary>
-                    <div class="markdown">
-                        {@html marked(item.answer)}
-                    </div>
-                </details>
-            {/each}
         </div>
-
-    {:else if block.type === "howto"}
-        <ol class="howto-block">
-            {#each (block as HowToBlock).steps as step}
-                <li>
-                    <strong>{step.title}</strong>
-                    <div class="markdown">
-                        {@html marked(step.description)}
-                    </div>
-                </li>
-            {/each}
-        </ol>
-
-    {/if}
-{/each}
+    {/each}
 </div>
+
+<style>
+    .csm-blocks {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+    }
+
+    .csm-block {
+        /* Blocks können diese Variable nutzen für Animation/Highlight im Editor */
+        --csm-block-highlight: transparent;
+    }
+
+    .csm-block-unknown {
+        padding: 1rem;
+        background: #fef3c7;
+        border: 1px solid #f59e0b;
+        border-radius: 0.5rem;
+        color: #92400e;
+        font-size: 0.875rem;
+    }
+</style>

package/dist/components/BlockRenderer.svelte.d.ts

@@ -1,7 +1,18 @@
-import type { Block } from "../types.ts";
-type $$ComponentProps = {
+import type { Block } from '../types.ts';
+interface Props {
+    /** Die zu rendernden Blocks */
     blocks: Block[];
-};
-declare const BlockRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
+    /**
+     * Custom Renderer für bestimmte Block-Typen
+     * Das Framework kann hier eigene Implementierungen übergeben
+     */
+    customRenderers?: Partial<Record<Block['type'], import('svelte').Component>>;
+    /**
+     * Context-Daten die an Blocks weitergegeben werden
+     * z.B. currentSlug für Breadcrumbs
+     */
+    context?: Record<string, unknown>;
+}
+declare const BlockRenderer: import("svelte").Component<Props, {}, "">;
 type BlockRenderer = ReturnType<typeof BlockRenderer>;
 export default BlockRenderer;

package/dist/components/blocks/AdBlock.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    import type { AdBlock } from '../../types.js';
+
+    interface Props {
+        block: AdBlock;
+        /** Slot für Framework-spezifische Implementierung */
+        children?: import('svelte').Snippet;
+    }
+
+    let { block, children }: Props = $props();
+</script>
+
+{#if children}
+    {@render children()}
+{:else}
+    <aside class="csm-ad csm-ad-{block.variant ?? 'inline'}">
+        <span class="csm-ad-label">Anzeige</span>
+        <div class="csm-ad-placeholder">
+            <!-- Ad Slot: {block.slot ?? 'auto'} -->
+        </div>
+    </aside>
+{/if}
+
+<style>
+    .csm-ad {
+        background: var(--csm-muted-bg, #f8fafc);
+        border: 1px dashed var(--csm-border-color, #e2e8f0);
+        border-radius: 0.5rem;
+        overflow: hidden;
+    }
+
+    .csm-ad-label {
+        display: block;
+        padding: 0.25rem 0.75rem;
+        font-size: 0.625rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--csm-muted-color, #94a3b8);
+        background: var(--csm-card-bg, #ffffff);
+        border-bottom: 1px dashed var(--csm-border-color, #e2e8f0);
+    }
+
+    .csm-ad-placeholder {
+        min-height: 100px;
+    }
+
+    .csm-ad-inline .csm-ad-placeholder {
+        min-height: 120px;
+    }
+
+    .csm-ad-banner .csm-ad-placeholder {
+        min-height: 90px;
+    }
+
+    .csm-ad-sidebar .csm-ad-placeholder {
+        min-height: 250px;
+    }
+</style>

package/dist/components/blocks/AdBlock.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { AdBlock } from '../../types.ts';
+interface Props {
+    block: AdBlock;
+    /** Slot für Framework-spezifische Implementierung */
+    children?: import('svelte').Snippet;
+}
+declare const AdBlock: import("svelte").Component<Props, {}, "">;
+type AdBlock = ReturnType<typeof AdBlock>;
+export default AdBlock;

package/dist/components/blocks/AffiliateBlock.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import type { AffiliateBlock } from '../../types.js';
+
+    interface Props {
+        block: AffiliateBlock;
+        /** Slot für Framework-spezifische Implementierung */
+        children?: import('svelte').Snippet;
+    }
+
+    let { block, children }: Props = $props();
+</script>
+
+{#if children}
+    {@render children()}
+{:else}
+    <aside class="csm-affiliate csm-affiliate-{block.variant ?? 'box'}">
+        <span class="csm-affiliate-label">Affiliate</span>
+        <div class="csm-affiliate-placeholder">
+            <p>Affiliate: {block.ref ?? 'nicht konfiguriert'}</p>
+        </div>
+    </aside>
+{/if}
+
+<style>
+    .csm-affiliate {
+        padding: 1rem;
+        background: var(--csm-muted-bg, #f8fafc);
+        border: 1px dashed var(--csm-border-color, #e2e8f0);
+        border-radius: 0.5rem;
+    }
+
+    .csm-affiliate-label {
+        display: block;
+        font-size: 0.625rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--csm-muted-color, #94a3b8);
+        margin-bottom: 0.5rem;
+    }
+
+    .csm-affiliate-placeholder {
+        text-align: center;
+        color: var(--csm-muted-color, #94a3b8);
+        font-size: 0.875rem;
+    }
+
+    .csm-affiliate-placeholder p {
+        margin: 0;
+    }
+</style>

package/dist/components/blocks/AffiliateBlock.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { AffiliateBlock } from '../../types.ts';
+interface Props {
+    block: AffiliateBlock;
+    /** Slot für Framework-spezifische Implementierung */
+    children?: import('svelte').Snippet;
+}
+declare const AffiliateBlock: import("svelte").Component<Props, {}, "">;
+type AffiliateBlock = ReturnType<typeof AffiliateBlock>;
+export default AffiliateBlock;

package/dist/components/blocks/BreadcrumbBlock.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import type { BreadcrumbBlock } from '../../types.js';
+
+    interface Props {
+        block: BreadcrumbBlock;
+        /** Slot für Framework-spezifische Implementierung */
+        children?: import('svelte').Snippet;
+    }
+
+    let { block, children }: Props = $props();
+</script>
+
+<nav class="csm-breadcrumb" aria-label="Breadcrumb">
+    {#if children}
+        {@render children()}
+    {:else}
+        <span class="csm-breadcrumb-placeholder">Startseite › ...</span>
+    {/if}
+</nav>
+
+<style>
+    .csm-breadcrumb {
+        font-size: 0.875rem;
+        color: var(--csm-muted-color, #64748b);
+    }
+
+    .csm-breadcrumb-placeholder {
+        opacity: 0.5;
+    }
+</style>

package/dist/components/blocks/BreadcrumbBlock.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { BreadcrumbBlock } from '../../types.ts';
+interface Props {
+    block: BreadcrumbBlock;
+    /** Slot für Framework-spezifische Implementierung */
+    children?: import('svelte').Snippet;
+}
+declare const BreadcrumbBlock: import("svelte").Component<Props, {}, "">;
+type BreadcrumbBlock = ReturnType<typeof BreadcrumbBlock>;
+export default BreadcrumbBlock;

package/dist/components/blocks/ChildrenBlock.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import type { ChildrenBlock } from '../../types.js';
+
+    interface Props {
+        block: ChildrenBlock;
+        /** Slot für Framework-spezifische Implementierung */
+        children?: import('svelte').Snippet;
+    }
+
+    let { block, children }: Props = $props();
+</script>
+
+<section class="csm-children">
+    {#if block.title}
+        <h2 class="csm-children-title">{block.title}</h2>
+    {/if}
+
+    {#if children}
+        {@render children()}
+    {:else}
+        <div class="csm-children-placeholder">
+            <p>Unterseiten werden hier angezeigt</p>
+        </div>
+    {/if}
+</section>
+
+<style>
+    .csm-children {
+        margin: 0;
+    }
+
+    .csm-children-title {
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin: 0 0 1rem;
+    }
+
+    .csm-children-placeholder {
+        padding: 2rem;
+        background: var(--csm-muted-bg, #f8fafc);
+        border: 2px dashed var(--csm-border-color, #e2e8f0);
+        border-radius: 0.75rem;
+        text-align: center;
+        color: var(--csm-muted-color, #94a3b8);
+    }
+</style>

package/dist/components/blocks/ChildrenBlock.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ChildrenBlock } from '../../types.ts';
+interface Props {
+    block: ChildrenBlock;
+    /** Slot für Framework-spezifische Implementierung */
+    children?: import('svelte').Snippet;
+}
+declare const ChildrenBlock: import("svelte").Component<Props, {}, "">;
+type ChildrenBlock = ReturnType<typeof ChildrenBlock>;
+export default ChildrenBlock;

package/dist/components/blocks/DividerBlock.svelte

@@ -0,0 +1,9 @@
+<hr class="csm-divider" />
+
+<style>
+    .csm-divider {
+        border: none;
+        border-top: 1px solid var(--csm-border-color, #e2e8f0);
+        margin: 0.5rem 0;
+    }
+</style>

package/dist/components/blocks/DividerBlock.svelte.d.ts

@@ -0,0 +1,26 @@
+export default DividerBlock;
+type DividerBlock = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const DividerBlock: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/blocks/FaqBlock.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    import { marked } from 'marked';
+    import type { FaqBlock } from '../../types.js';
+
+    interface Props {
+        block: FaqBlock;
+    }
+
+    let { block }: Props = $props();
+</script>
+
+<section class="csm-faq">
+    {#if block.title}
+        <h2 class="csm-faq-title">{block.title}</h2>
+    {/if}
+
+    <div class="csm-faq-list">
+        {#each block.items as item}
+            <div class="csm-faq-item">
+                <h3 class="csm-faq-question">{item.q}</h3>
+                <div class="csm-faq-answer">
+                    {@html marked.parse(item.a)}
+                </div>
+            </div>
+        {/each}
+    </div>
+</section>
+
+<style>
+    .csm-faq {
+        margin: 0;
+    }
+
+    .csm-faq-title {
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin: 0 0 1rem;
+    }
+
+    .csm-faq-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .csm-faq-item {
+        padding: 1rem 1.25rem;
+        background: var(--csm-card-bg, #ffffff);
+        border: 1px solid var(--csm-border-color, #e2e8f0);
+        border-radius: 0.75rem;
+    }
+
+    .csm-faq-question {
+        font-size: 1rem;
+        font-weight: 600;
+        margin: 0 0 0.5rem;
+    }
+
+    .csm-faq-answer {
+        font-size: 0.9375rem;
+        color: var(--csm-muted-color, #64748b);
+        line-height: 1.6;
+    }
+
+    .csm-faq-answer :global(p) {
+        margin: 0 0 0.75rem;
+    }
+
+    .csm-faq-answer :global(p:last-child) {
+        margin-bottom: 0;
+    }
+
+    .csm-faq-answer :global(strong) {
+        font-weight: 600;
+        color: var(--csm-text-color, #1e293b);
+    }
+</style>

package/dist/components/blocks/FaqBlock.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { FaqBlock } from '../../types.ts';
+interface Props {
+    block: FaqBlock;
+}
+declare const FaqBlock: import("svelte").Component<Props, {}, "">;
+type FaqBlock = ReturnType<typeof FaqBlock>;
+export default FaqBlock;

package/dist/components/blocks/HeadingBlock.svelte

@@ -1,8 +1,38 @@
 <script lang="ts">
-	import type { HeadingBlock } from '../../types.js';
-	let { block } = $props<{ block: HeadingBlock }>();
+    import type { HeadingBlock } from '../../types.js';
+
+    interface Props {
+        block: HeadingBlock;
+    }
+
+    let { block }: Props = $props();
 </script>
 
-<svelte:element this={`h${block.level ?? 2}`} class="my-4 text-2xl font-bold">
-	{block.text}
-</svelte:element>
+{#if block.level === 1}
+    <h1 class="csm-heading csm-h1">{block.text}</h1>
+{:else if block.level === 2}
+    <h2 class="csm-heading csm-h2">{block.text}</h2>
+{:else if block.level === 3}
+    <h3 class="csm-heading csm-h3">{block.text}</h3>
+{:else if block.level === 4}
+    <h4 class="csm-heading csm-h4">{block.text}</h4>
+{:else if block.level === 5}
+    <h5 class="csm-heading csm-h5">{block.text}</h5>
+{:else}
+    <h6 class="csm-heading csm-h6">{block.text}</h6>
+{/if}
+
+<style>
+    .csm-heading {
+        margin: 0;
+        line-height: 1.3;
+        color: var(--csm-heading-color, inherit);
+    }
+
+    .csm-h1 { font-size: 2rem; font-weight: 700; }
+    .csm-h2 { font-size: 1.5rem; font-weight: 600; }
+    .csm-h3 { font-size: 1.25rem; font-weight: 600; }
+    .csm-h4 { font-size: 1.125rem; font-weight: 600; }
+    .csm-h5 { font-size: 1rem; font-weight: 600; }
+    .csm-h6 { font-size: 0.875rem; font-weight: 600; }
+</style>

package/dist/components/blocks/HeadingBlock.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HeadingBlock } from '../../types.ts';
-type $$ComponentProps = {
+interface Props {
     block: HeadingBlock;
-};
-declare const HeadingBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const HeadingBlock: import("svelte").Component<Props, {}, "">;
 type HeadingBlock = ReturnType<typeof HeadingBlock>;
 export default HeadingBlock;

package/dist/components/blocks/HeroBlock.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import type { HeroBlock } from '../../types.js';
+    interface Props {
+        block: HeroBlock;
+    }
+
+    let { block }: Props = $props();
+</script>
+
+<header class="csm-hero">
+    <h1 class="csm-hero-title">{block.title}</h1>
+    {#if block.subtitle}
+        <p class="csm-hero-subtitle">{block.subtitle}</p>
+    {/if}
+</header>
+
+<style>
+    .csm-hero {
+        text-align: left;
+    }
+
+    .csm-hero-title {
+        font-size: 2rem;
+        font-weight: 700;
+        margin: 0 0 0.75rem;
+        line-height: 1.2;
+        letter-spacing: -0.025em;
+    }
+
+    @media (min-width: 640px) {
+        .csm-hero-title {
+            font-size: 2.5rem;
+        }
+    }
+
+    .csm-hero-subtitle {
+        font-size: 1.125rem;
+        color: var(--csm-muted-color, #64748b);
+        margin: 0;
+        line-height: 1.6;
+        max-width: 42rem;
+    }
+</style>

package/dist/components/blocks/HeroBlock.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HeroBlock } from '../../types.ts';
+interface Props {
+    block: HeroBlock;
+}
+declare const HeroBlock: import("svelte").Component<Props, {}, "">;
+type HeroBlock = ReturnType<typeof HeroBlock>;
+export default HeroBlock;