@schneiderelli/cms-runtime 0.0.3 → 0.0.4

package/dist/components/blocks/HowToBlock.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+    import { marked } from 'marked';
+    import type { HowToBlock } from '../../types.js';
+
+    interface Props {
+        block: HowToBlock;
+    }
+
+    let { block }: Props = $props();
+</script>
+
+<section class="csm-howto">
+    {#if block.title}
+        <h2 class="csm-howto-title">{block.title}</h2>
+    {/if}
+
+    <ol class="csm-howto-steps">
+        {#each block.steps as step, i}
+            <li class="csm-howto-step">
+                <div class="csm-howto-step-header">
+                    <span class="csm-howto-step-number">{i + 1}</span>
+                    <h3 class="csm-howto-step-title">{step.title}</h3>
+                </div>
+                <div class="csm-howto-step-content">
+                    {@html marked.parse(step.description)}
+                </div>
+            </li>
+        {/each}
+    </ol>
+</section>
+
+<style>
+    .csm-howto {
+        margin: 0;
+    }
+
+    .csm-howto-title {
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin: 0 0 1rem;
+    }
+
+    .csm-howto-steps {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .csm-howto-step {
+        padding: 1rem 1.25rem;
+        background: var(--csm-card-bg, #ffffff);
+        border: 1px solid var(--csm-border-color, #e2e8f0);
+        border-radius: 0.75rem;
+    }
+
+    .csm-howto-step-header {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .csm-howto-step-number {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.75rem;
+        height: 1.75rem;
+        background: var(--csm-primary-color, #3b82f6);
+        color: white;
+        border-radius: 50%;
+        font-size: 0.875rem;
+        font-weight: 600;
+        flex-shrink: 0;
+    }
+
+    .csm-howto-step-title {
+        font-size: 1rem;
+        font-weight: 600;
+        margin: 0;
+    }
+
+    .csm-howto-step-content {
+        font-size: 0.9375rem;
+        color: var(--csm-muted-color, #64748b);
+        line-height: 1.6;
+        padding-left: 2.5rem;
+    }
+
+    .csm-howto-step-content :global(p) {
+        margin: 0 0 0.5rem;
+    }
+
+    .csm-howto-step-content :global(p:last-child) {
+        margin-bottom: 0;
+    }
+</style>

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

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

package/dist/components/blocks/ImageBlock.svelte

@@ -1,6 +1,45 @@
 <script lang="ts">
-	import type { ImageBlock } from '../../types.js';
-	let { block } = $props<{ block: ImageBlock }>();
+    import type { ImageBlock } from '../../types.js';
+
+    interface Props {
+        block: ImageBlock;
+    }
+
+    let { block }: Props = $props();
 </script>
 
-<img src={block.src} alt={block.alt ?? ''} class="my-4 rounded-lg shadow-md" />
+<figure class="csm-image">
+    <img
+        src={block.src}
+        alt={block.alt ?? ''}
+        class="csm-image-img"
+        loading="lazy"
+    />
+    {#if block.caption}
+        <figcaption class="csm-image-caption">
+            {block.caption}
+        </figcaption>
+    {/if}
+</figure>
+
+<style>
+    .csm-image {
+        margin: 0;
+    }
+
+    .csm-image-img {
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+        border-radius: 0.5rem;
+        border: 1px solid var(--csm-border-color, #e2e8f0);
+    }
+
+    .csm-image-caption {
+        margin-top: 0.5rem;
+        text-align: center;
+        font-size: 0.875rem;
+        color: var(--csm-muted-color, #64748b);
+        font-style: italic;
+    }
+</style>

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

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

package/dist/components/blocks/LinksBlock.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import type { LinksBlock } from '../../types.js';
+
+    interface Props {
+        block: LinksBlock;
+    }
+
+    let { block }: Props = $props();
+</script>
+
+<section class="csm-links">
+    {#if block.title}
+        <h2 class="csm-links-title">{block.title}</h2>
+    {/if}
+
+    <ul class="csm-links-list">
+        {#each block.items as item}
+            <li>
+                <a href={item.href} class="csm-link-item">
+                    {#if item.icon}
+                        <span class="csm-link-icon">{item.icon}</span>
+                    {/if}
+                    <span class="csm-link-label">{item.label}</span>
+                </a>
+            </li>
+        {/each}
+    </ul>
+</section>
+
+<style>
+    .csm-links {
+        margin: 0;
+    }
+
+    .csm-links-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin: 0 0 0.75rem;
+    }
+
+    .csm-links-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .csm-link-item {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: var(--csm-link-color, #3b82f6);
+        text-decoration: none;
+        font-size: 0.9375rem;
+    }
+
+    .csm-link-item:hover {
+        text-decoration: underline;
+    }
+
+    .csm-link-icon {
+        font-size: 1.125rem;
+    }
+</style>

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

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

package/dist/components/blocks/MarkdownBlock.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+    import { marked } from 'marked';
+    import type { MarkdownBlock } from '../../types.js';
+
+    interface Props {
+        block: MarkdownBlock;
+    }
+
+    let { block }: Props = $props();
+
+    // Configure marked
+    marked.setOptions({
+        gfm: true,
+        breaks: false
+    });
+
+    const html = $derived(marked.parse(block.content) as string);
+</script>
+
+<div class="csm-markdown">
+    {@html html}
+</div>
+
+<style>
+    .csm-markdown {
+        line-height: 1.7;
+    }
+
+    .csm-markdown :global(h1),
+    .csm-markdown :global(h2),
+    .csm-markdown :global(h3),
+    .csm-markdown :global(h4),
+    .csm-markdown :global(h5),
+    .csm-markdown :global(h6) {
+        margin: 1.5rem 0 0.75rem;
+        line-height: 1.3;
+    }
+
+    .csm-markdown :global(h1) { font-size: 1.875rem; font-weight: 700; }
+    .csm-markdown :global(h2) { font-size: 1.5rem; font-weight: 600; }
+    .csm-markdown :global(h3) { font-size: 1.25rem; font-weight: 600; }
+
+    .csm-markdown :global(p) {
+        margin: 0 0 1rem;
+    }
+
+    .csm-markdown :global(ul),
+    .csm-markdown :global(ol) {
+        margin: 0 0 1rem;
+        padding-left: 1.5rem;
+    }
+
+    .csm-markdown :global(li) {
+        margin-bottom: 0.5rem;
+    }
+
+    .csm-markdown :global(strong) {
+        font-weight: 600;
+    }
+
+    .csm-markdown :global(a) {
+        color: var(--csm-link-color, #3b82f6);
+        text-decoration: underline;
+    }
+
+    .csm-markdown :global(blockquote) {
+        margin: 1rem 0;
+        padding: 1rem 1.25rem;
+        border-left: 4px solid var(--csm-border-color, #e2e8f0);
+        background: var(--csm-muted-bg, #f8fafc);
+        border-radius: 0 0.5rem 0.5rem 0;
+    }
+
+    .csm-markdown :global(code) {
+        background: var(--csm-muted-bg, #f1f5f9);
+        padding: 0.125rem 0.375rem;
+        border-radius: 0.25rem;
+        font-size: 0.875em;
+        font-family: ui-monospace, monospace;
+    }
+
+    .csm-markdown :global(pre) {
+        background: var(--csm-muted-bg, #f1f5f9);
+        padding: 1rem;
+        border-radius: 0.5rem;
+        overflow-x: auto;
+        margin: 1rem 0;
+    }
+
+    .csm-markdown :global(pre code) {
+        background: none;
+        padding: 0;
+    }
+
+    .csm-markdown :global(table) {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 1rem 0;
+    }
+
+    .csm-markdown :global(th),
+    .csm-markdown :global(td) {
+        padding: 0.75rem;
+        border: 1px solid var(--csm-border-color, #e2e8f0);
+        text-align: left;
+    }
+
+    .csm-markdown :global(th) {
+        background: var(--csm-muted-bg, #f8fafc);
+        font-weight: 600;
+    }
+
+    .csm-markdown :global(hr) {
+        border: none;
+        border-top: 1px solid var(--csm-border-color, #e2e8f0);
+        margin: 1.5rem 0;
+    }
+</style>

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

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

package/dist/components/blocks/NoteBlock.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { marked } from 'marked';
+    import type { NoteBlock } from '../../types.js';
+
+    interface Props {
+        block: NoteBlock;
+    }
+
+    let { block }: Props = $props();
+
+    const html = $derived(marked.parseInline(block.content) as string);
+</script>
+
+<div class="csm-note csm-note-{block.variant}">
+    {@html html}
+</div>
+
+<style>
+    .csm-note {
+        padding: 1rem 1.25rem;
+        border-radius: 0 0.5rem 0.5rem 0;
+        font-size: 0.9375rem;
+        line-height: 1.6;
+        border-left: 4px solid;
+    }
+
+    .csm-note-info {
+        background: #eff6ff;
+        border-left-color: #3b82f6;
+        color: #1e40af;
+    }
+
+    .csm-note-warning {
+        background: #fffbeb;
+        border-left-color: #f59e0b;
+        color: #92400e;
+    }
+
+    .csm-note-tip {
+        background: #f0fdf4;
+        border-left-color: #22c55e;
+        color: #166534;
+    }
+
+    .csm-note-danger {
+        background: #fef2f2;
+        border-left-color: #ef4444;
+        color: #991b1b;
+    }
+
+    .csm-note :global(a) {
+        color: inherit;
+        text-decoration: underline;
+    }
+
+    .csm-note :global(strong) {
+        font-weight: 600;
+    }
+</style>

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

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

package/dist/components/blocks/QuoteBlock.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { marked } from 'marked';
+    import type { QuoteBlock } from '../../types.js';
+
+    interface Props {
+        block: QuoteBlock;
+    }
+
+    let { block }: Props = $props();
+
+    const html = $derived(marked.parseInline(block.content) as string);
+</script>
+
+<blockquote class="csm-quote">
+    <div class="csm-quote-content">
+        {@html html}
+    </div>
+    {#if block.source}
+        <cite class="csm-quote-source">— {block.source}</cite>
+    {/if}
+</blockquote>
+
+<style>
+    .csm-quote {
+        margin: 0;
+        padding: 1rem 1.25rem;
+        background: var(--csm-muted-bg, #f8fafc);
+        border-left: 4px solid var(--csm-border-color, #94a3b8);
+        border-radius: 0 0.5rem 0.5rem 0;
+    }
+
+    .csm-quote-content {
+        font-style: italic;
+        line-height: 1.6;
+    }
+
+    .csm-quote-source {
+        display: block;
+        margin-top: 0.75rem;
+        font-size: 0.875rem;
+        font-style: normal;
+        color: var(--csm-muted-color, #64748b);
+    }
+</style>

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

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

package/dist/index.d.ts

@@ -1,2 +1,17 @@
-export * from './types';
+export * from './types.ts';
+export * from './registry.ts';
 export { default as BlockRenderer } from './components/BlockRenderer.svelte';
+export { default as MarkdownBlock } from './components/blocks/MarkdownBlock.svelte';
+export { default as HeadingBlock } from './components/blocks/HeadingBlock.svelte';
+export { default as ImageBlock } from './components/blocks/ImageBlock.svelte';
+export { default as QuoteBlock } from './components/blocks/QuoteBlock.svelte';
+export { default as DividerBlock } from './components/blocks/DividerBlock.svelte';
+export { default as NoteBlock } from './components/blocks/NoteBlock.svelte';
+export { default as FaqBlock } from './components/blocks/FaqBlock.svelte';
+export { default as HowToBlock } from './components/blocks/HowToBlock.svelte';
+export { default as HeroBlock } from './components/blocks/HeroBlock.svelte';
+export { default as ChildrenBlock } from './components/blocks/ChildrenBlock.svelte';
+export { default as LinksBlock } from './components/blocks/LinksBlock.svelte';
+export { default as BreadcrumbBlock } from './components/blocks/BreadcrumbBlock.svelte';
+export { default as AffiliateBlock } from './components/blocks/AffiliateBlock.svelte';
+export { default as AdBlock } from './components/blocks/AdBlock.svelte';

package/dist/index.js

@@ -1,2 +1,27 @@
-export * from './types';
+// =============================================================================
+// CSM-RUNTIME
+// =============================================================================
+// Content System Manager Runtime
+// Zentrale Library für Types und Komponenten
+// =============================================================================
+// Types
+export * from "./types.js";
+// Registry (Block-Definitionen für Editor)
+export * from "./registry.js";
+// Components
 export { default as BlockRenderer } from './components/BlockRenderer.svelte';
+// Individual Block Components (für Custom Rendering)
+export { default as MarkdownBlock } from './components/blocks/MarkdownBlock.svelte';
+export { default as HeadingBlock } from './components/blocks/HeadingBlock.svelte';
+export { default as ImageBlock } from './components/blocks/ImageBlock.svelte';
+export { default as QuoteBlock } from './components/blocks/QuoteBlock.svelte';
+export { default as DividerBlock } from './components/blocks/DividerBlock.svelte';
+export { default as NoteBlock } from './components/blocks/NoteBlock.svelte';
+export { default as FaqBlock } from './components/blocks/FaqBlock.svelte';
+export { default as HowToBlock } from './components/blocks/HowToBlock.svelte';
+export { default as HeroBlock } from './components/blocks/HeroBlock.svelte';
+export { default as ChildrenBlock } from './components/blocks/ChildrenBlock.svelte';
+export { default as LinksBlock } from './components/blocks/LinksBlock.svelte';
+export { default as BreadcrumbBlock } from './components/blocks/BreadcrumbBlock.svelte';
+export { default as AffiliateBlock } from './components/blocks/AffiliateBlock.svelte';
+export { default as AdBlock } from './components/blocks/AdBlock.svelte';

package/dist/registry.d.ts

@@ -0,0 +1,43 @@
+import type { BlockType, Block } from './types.ts';
+export interface BlockDefinition {
+    /** Block-Typ */
+    type: BlockType;
+    /** Anzeigename im Editor */
+    label: string;
+    /** Icon (Emoji) */
+    icon: string;
+    /** Kurzbeschreibung */
+    description: string;
+    /** Kategorie für Gruppierung im Editor */
+    category: 'content' | 'layout' | 'media' | 'monetization';
+    /** Default-Werte beim Erstellen */
+    defaults: Partial<Block>;
+    /** Felder die im Editor bearbeitet werden können */
+    fields: FieldDefinition[];
+}
+export interface FieldDefinition {
+    /** Feld-Name (Property-Key) */
+    name: string;
+    /** Anzeigename */
+    label: string;
+    /** Feld-Typ */
+    type: 'text' | 'textarea' | 'markdown' | 'number' | 'select' | 'image' | 'list';
+    /** Pflichtfeld? */
+    required?: boolean;
+    /** Placeholder-Text */
+    placeholder?: string;
+    /** Optionen für Select */
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    /** Für Listen: Definition der Einträge */
+    listFields?: FieldDefinition[];
+}
+export declare const blockRegistry: BlockDefinition[];
+/** Holt Block-Definition by Type */
+export declare function getBlockDefinition(type: BlockType): BlockDefinition | undefined;
+/** Gruppiert Blocks nach Kategorie */
+export declare function getBlocksByCategory(): Record<string, BlockDefinition[]>;
+/** Erstellt einen neuen Block mit Default-Werten */
+export declare function createBlockFromDefinition(type: BlockType): Block | undefined;