@jhits/botanics_and_you 0.0.1 → 0.0.3

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * BotanicsAndYou Client Configuration for JHITS
+ *
+ * This package contains all client-specific plugin configurations.
+ *
+ * Usage:
+ * import { blogPluginConfig, botanyBlocks } from '@jhits/BotanicsAndYou/plugin-blog';
+ */
+export * from './plugin-blog';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,9 @@
+/**
+ * BotanicsAndYou Client Configuration for JHITS
+ *
+ * This package contains all client-specific plugin configurations.
+ *
+ * Usage:
+ * import { blogPluginConfig, botanyBlocks } from '@jhits/BotanicsAndYou/plugin-blog';
+ */
+export * from './plugin-blog';

package/dist/plugin-blog/api-config.d.ts

@@ -0,0 +1,4 @@
+declare const API_BASE_URL: string;
+export declare function createApiUrl(path: string): string;
+export { API_BASE_URL };
+//# sourceMappingURL=api-config.d.ts.map

package/dist/plugin-blog/api-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-config.d.ts","sourceRoot":"","sources":["../../src/plugin-blog/api-config.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY,QACgF,CAAC;AAEnG,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEjD;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/plugin-blog/api-config.js

@@ -0,0 +1,7 @@
+// API Configuration for BotanicsAndYou package
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL
+    || (process.env.NODE_ENV === 'production' ? 'https://your-domain.com' : 'http://localhost:3001');
+export function createApiUrl(path) {
+    return `${API_BASE_URL}/api${path}`;
+}
+export { API_BASE_URL };

package/dist/plugin-blog/blocks/CategoryDropdown.d.ts

@@ -0,0 +1,10 @@
+export interface CategoryDropdownProps {
+    value: string;
+    onChange: (category: string) => void;
+    existingCategories: string[];
+    className?: string;
+    placeholder?: string;
+    showLabel?: boolean;
+}
+export declare function CategoryDropdown({ value, onChange, existingCategories, className, placeholder, showLabel, }: CategoryDropdownProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CategoryDropdown.d.ts.map

package/dist/plugin-blog/blocks/CategoryDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryDropdown.d.ts","sourceRoot":"","sources":["../../../src/plugin-blog/blocks/CategoryDropdown.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,kBAAuB,EACvB,SAAc,EACd,WAAyC,EACzC,SAAiB,GACpB,EAAE,qBAAqB,2CAiJvB"}

package/dist/plugin-blog/blocks/CategoryDropdown.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { ChevronDown, Plus } from 'lucide-react';
+export function CategoryDropdown({ value, onChange, existingCategories = [], className = '', placeholder = 'Select or add category...', showLabel = false, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    const [isAddingNew, setIsAddingNew] = useState(false);
+    const dropdownRef = useRef(null);
+    const inputRef = useRef(null);
+    // This ref tracks if we have successfully set an initial value
+    // to avoid snapping back to the first item if the user manually clears the field
+    const hasAutoSelected = useRef(false);
+    /**
+     * AUTO-SELECT LOGIC
+     * We watch 'existingCategories'. As soon as it populates and we have no value, we pick the first.
+     */
+    useEffect(() => {
+        const isValueEmpty = !value || value.trim() === '';
+        if (isValueEmpty && existingCategories.length > 0 && !hasAutoSelected.current) {
+            const firstCategory = existingCategories.find(cat => cat && cat.trim() !== '');
+            if (firstCategory) {
+                // Set the flag FIRST to prevent race conditions
+                hasAutoSelected.current = true;
+                // Use requestAnimationFrame to ensure we are outside the 
+                // render phase of the category fetch completion
+                requestAnimationFrame(() => {
+                    onChange(firstCategory);
+                });
+            }
+        }
+        // If a value is manually set (by user or saved data), 
+        // we mark auto-select as "done" so it doesn't fight the user
+        if (!isValueEmpty) {
+            hasAutoSelected.current = true;
+        }
+    }, [existingCategories, value, onChange]);
+    // UI filtering
+    const otherCategories = existingCategories.filter(cat => cat && cat.trim() !== '' && cat !== value);
+    // Outside Click Handler
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setIsAddingNew(false);
+                setInputValue('');
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [isOpen]);
+    // Focus on new input
+    useEffect(() => {
+        if (isAddingNew && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isAddingNew]);
+    const handleSelect = (category) => {
+        onChange(category);
+        setIsOpen(false);
+        setIsAddingNew(false);
+        setInputValue('');
+    };
+    return (_jsxs("div", { className: `relative ${className}`, ref: dropdownRef, children: [showLabel && (_jsx("label", { className: "text-[10px] text-neutral-500 uppercase font-bold block mb-2 tracking-widest", children: "Category" })), _jsxs("div", { className: "relative", children: [_jsxs("div", { onClick: () => setIsOpen(!isOpen), className: "w-full bg-transparent border border-sage/20 rounded-full px-4 py-1.5 text-xs font-bold uppercase tracking-[0.2em] text-sage flex items-center justify-between cursor-pointer hover:bg-sage/5 transition-all", children: [_jsx("span", { className: "truncate", children: value || placeholder }), _jsx(ChevronDown, { size: 14, className: `transition-transform text-sage/50 ${isOpen ? 'rotate-180' : ''}` })] }), isOpen && (_jsxs("div", { className: "absolute z-50 w-full mt-2 bg-white dark:bg-neutral-900 rounded-xl shadow-xl border border-neutral-100 dark:border-neutral-800 overflow-hidden animate-in fade-in zoom-in-95 duration-150", children: [otherCategories.length > 0 && (_jsx("div", { className: "py-1 max-h-48 overflow-y-auto", children: otherCategories.map((category) => (_jsx("button", { type: "button", onClick: () => handleSelect(category), className: "w-full text-left px-4 py-2.5 text-xs font-bold text-neutral-700 dark:text-neutral-300 hover:bg-sage/5 hover:text-sage transition-colors", children: category }, category))) })), !isAddingNew ? (_jsxs("button", { type: "button", onClick: () => setIsAddingNew(true), className: "w-full text-left px-4 py-3 text-xs font-bold text-sage hover:bg-primary/5 transition-colors border-t border-neutral-50 dark:border-neutral-800 flex items-center gap-2", children: [_jsx(Plus, { size: 14 }), " Add new category"] })) : (_jsxs("div", { className: "p-3 border-t border-neutral-50 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-800/50", children: [_jsx("input", { ref: inputRef, value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: (e) => e.key === 'Enter' && inputValue.trim() && handleSelect(inputValue.trim()), placeholder: "Category name...", className: "w-full border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 p-2 rounded-lg text-xs font-bold outline-none focus:border-sage mb-2" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => inputValue.trim() && handleSelect(inputValue.trim()), className: "flex-1 bg-sage text-white px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider", children: "Add" }), _jsx("button", { onClick: () => { setIsAddingNew(false); setInputValue(''); }, className: "px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase border border-neutral-200 dark:border-neutral-700 text-neutral-500", children: "Cancel" })] })] }))] }))] })] }));
+}

package/dist/plugin-blog/blocks/Heading.d.ts

@@ -0,0 +1,3 @@
+import { ClientBlockDefinition } from "@jhits/plugin-blog";
+export declare const HeadingBlock: ClientBlockDefinition;
+//# sourceMappingURL=Heading.d.ts.map

package/dist/plugin-blog/blocks/Heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/plugin-blog/blocks/Heading.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqC,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAmH9F,eAAO,MAAM,YAAY,EAAE,qBAoB1B,CAAC"}

package/dist/plugin-blog/blocks/Heading.js

@@ -0,0 +1,83 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Heading, ChevronDown } from "lucide-react";
+import { useState, useRef, useEffect } from "react";
+const getClassName = (level) => `
+    font-serif text-forest
+    ${level === 1 ? "text-5xl lg:text-6xl mt-12 mb-8 font-bold" : ""}
+    ${level === 2 ? "text-4xl lg:text-5xl mt-10 mb-2" : ""}
+    ${level === 3 ? "text-3xl mt-8 mb-4 text-forest/90" : ""}
+    ${level === 4 ? "text-xl mt-6 mb-3 font-medium text-sage italic" : ""}
+    ${level === 5 ? "text-lg mt-4 mb-2 font-medium text-sage" : ""}
+    ${level === 6 ? "text-base mt-3 mb-2 font-medium text-sage/80" : ""}
+`;
+/**
+ * Heading Block
+ * Simple heading block for botanical articles with SEO-optimized heading levels
+ */
+const HeadingEdit = ({ block, onUpdate, isSelected }) => {
+    const level = block.data.level || 2;
+    const text = block.data.text || '';
+    const [showLevelDropdown, setShowLevelDropdown] = useState(false);
+    const dropdownRef = useRef(null);
+    const defaultClassName = getClassName(level);
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setShowLevelDropdown(false);
+            }
+        };
+        if (showLevelDropdown) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [showLevelDropdown]);
+    const handleLevelChange = (newLevel) => {
+        onUpdate({ level: newLevel });
+        setShowLevelDropdown(false);
+    };
+    return (_jsx("div", { className: "relative group", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "relative", ref: dropdownRef, children: [_jsxs("button", { type: "button", onClick: () => setShowLevelDropdown(!showLevelDropdown), className: "flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 transition-colors text-xs font-bold text-gray-600", title: "Select heading level for SEO", children: [_jsxs("span", { children: ["H", level] }), _jsx(ChevronDown, { size: 12, className: `transition-transform ${showLevelDropdown ? 'rotate-180' : ''}` })] }), showLevelDropdown && (_jsx("div", { className: "absolute z-50 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden min-w-[120px]", children: [1, 2, 3, 4, 5, 6].map((lvl) => (_jsxs("button", { type: "button", onClick: () => handleLevelChange(lvl), className: `w-full text-left px-3 py-2 text-xs font-bold transition-colors ${level === lvl
+                                    ? 'bg-primary/10 text-primary'
+                                    : 'text-gray-700 hover:bg-gray-50'}`, children: ["H", lvl, " ", lvl === 1 ? '(Page Title)' : lvl === 2 ? '(Section)' : lvl === 3 ? '(Subsection)' : ''] }, lvl))) }))] }), _jsx("input", { type: "text", value: text, onChange: (e) => onUpdate({ text: e.target.value }), placeholder: "Enter heading text...", className: `flex-1 ${defaultClassName}` })] }) }));
+};
+const HeadingPreview = ({ block }) => {
+    const level = Math.min(Math.max(block.data.level || 2, 1), 6);
+    const text = block.data.text || '';
+    const defaultClassName = getClassName(level);
+    switch (level) {
+        case 1:
+            return _jsx("h1", { className: defaultClassName, children: text });
+        case 3:
+            return _jsx("h3", { className: defaultClassName, children: text });
+        case 4:
+            return _jsx("h4", { className: defaultClassName, children: text });
+        case 5:
+            return _jsx("h5", { className: defaultClassName, children: text });
+        case 6:
+            return _jsx("h6", { className: defaultClassName, children: text });
+        default:
+            return _jsx("h2", { className: defaultClassName, children: text });
+    }
+};
+export const HeadingBlock = {
+    type: 'heading',
+    name: 'Heading',
+    description: 'Add a heading (H1-H6)',
+    icon: Heading,
+    defaultData: {
+        text: '',
+        level: 2,
+    },
+    category: 'text',
+    validate: (data) => {
+        return typeof data.text === 'string' &&
+            typeof data.level === 'number' &&
+            data.level >= 1 && data.level <= 6;
+    },
+    components: {
+        Edit: HeadingEdit,
+        Preview: HeadingPreview,
+        Icon: Heading,
+    },
+};

package/dist/plugin-blog/blocks/Hero.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { BlockEditProps, BlockPreviewProps, ClientBlockDefinition } from '@jhits/plugin-blog';
+/**
+ * 2. Hero Edit Component
+ */
+export declare const HeroEdit: React.FC<BlockEditProps>;
+/**
+ * 3. Hero Preview Component
+ */
+export declare const HeroPreview: React.FC<BlockPreviewProps & {
+    fallbackImage?: {
+        id?: string;
+        src?: string;
+    };
+}>;
+export declare const heroBlock: ClientBlockDefinition;
+//# sourceMappingURL=Hero.d.ts.map

package/dist/plugin-blog/blocks/Hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../src/plugin-blog/blocks/Hero.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAe9F;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAsI7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG;IAAE,aAAa,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CA6CvG,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,qBAkBvB,CAAC"}

package/dist/plugin-blog/blocks/Hero.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Image as ImageIcon } from 'lucide-react';
+import { useCategories } from '@jhits/plugin-blog';
+import { ImagePicker, Image as PluginImage } from '@jhits/plugin-images';
+import { CategoryDropdown } from './CategoryDropdown';
+import { createApiUrl } from '../api-config';
+/**
+ * 2. Hero Edit Component
+ */
+export const HeroEdit = ({ block, onUpdate }) => {
+    const [showImagePicker, setShowImagePicker] = useState(false);
+    const [currentBrightness, setCurrentBrightness] = useState(100);
+    const [currentBlur, setCurrentBlur] = useState(0);
+    const [mounted, setMounted] = useState(false);
+    const { categories } = useCategories();
+    // Handle SSR - ensure we only render portal on client
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const data = (block.data || {});
+    const title = data.title || '';
+    const category = data.category || '';
+    const summary = data.summary || '';
+    const imageId = data.imageId;
+    // Sync effects
+    useEffect(() => {
+        if (imageId) {
+            fetch(createApiUrl(`/plugin-images/resolve?id=${encodeURIComponent(imageId)}`))
+                .then(res => res.ok ? res.json() : null)
+                .then(resolved => {
+                var _a, _b, _c, _d;
+                if (resolved) {
+                    setCurrentBrightness((_b = (_a = data.brightness) !== null && _a !== void 0 ? _a : resolved.brightness) !== null && _b !== void 0 ? _b : 100);
+                    setCurrentBlur((_d = (_c = data.blur) !== null && _c !== void 0 ? _c : resolved.blur) !== null && _d !== void 0 ? _d : 0);
+                }
+            })
+                .catch(() => {
+                setCurrentBrightness(100);
+                setCurrentBlur(0);
+            });
+        }
+    }, [imageId, data.brightness, data.blur]);
+    const updateField = (updates) => {
+        onUpdate(Object.assign(Object.assign({}, data), updates));
+    };
+    return (_jsxs("section", { className: "relative pt-32 pb-20 overflow-hidden group/hero", children: [_jsxs("div", { className: "max-w-7xl mx-auto px-6 lg:px-12 grid lg:grid-cols-2 gap-16 items-center", children: [_jsxs("div", { className: "order-2 lg:order-1 text-left flex flex-col items-start", children: [_jsx(CategoryDropdown, { value: category, onChange: (newCategory) => updateField({ category: newCategory }), existingCategories: categories, placeholder: "CATEGORIE" }), _jsx("textarea", { value: title, onChange: (e) => updateField({ title: e.target.value }), placeholder: "Artikel Titel...", rows: 2, className: "w-full text-5xl lg:text-7xl font-serif text-forest mb-8 leading-[1.1] tracking-tight bg-transparent border-none outline-none focus:ring-0 p-0 resize-none placeholder:text-gray-200 overflow-hidden" }), _jsx("textarea", { value: summary, onChange: (e) => updateField({ summary: e.target.value }), placeholder: "Klik om een samenvatting te typen...", rows: 3, className: "w-full text-lg lg:text-xl text-gray-600 leading-relaxed font-light bg-transparent border-none outline-none focus:ring-0 p-0 resize-none placeholder:text-gray-300" })] }), _jsx("div", { className: "order-1 lg:order-2 w-full", children: _jsxs("div", { className: "relative rounded-3xl overflow-hidden shadow-2xl aspect-[4/5] lg:aspect-[3/4] bg-gray-50 border border-gray-100 cursor-pointer group/imgcontainer", onClick: () => setShowImagePicker(true), children: [imageId ? (_jsx(PluginImage, { id: imageId, alt: title || 'Hero', fill: true, sizes: "(max-width: 1024px) 100vw, 50vw", className: "object-cover w-full h-full transition-transform duration-700 group-hover/imgcontainer:scale-105", editable: false })) : (_jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-gray-400", children: [_jsx(ImageIcon, { size: 48, className: "mb-2" }), _jsx("p", { className: "text-sm font-bold", children: "Add Image" })] })), _jsx("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover/imgcontainer:opacity-100 transition-opacity flex items-center justify-center z-10", children: _jsxs("div", { className: "bg-white px-4 py-2 rounded-full flex items-center gap-2", children: [_jsx(ImageIcon, { size: 16, className: "text-primary" }), _jsx("span", { className: "text-sm font-bold text-neutral-900", children: "Edit Image" })] }) })] }) })] }), showImagePicker && mounted && createPortal(_jsx("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4", children: _jsxs("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl w-full max-w-2xl p-6 shadow-2xl max-h-[90vh] overflow-y-auto", children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("h3", { className: "font-bold text-neutral-900 dark:text-white", children: "Hero Image Settings" }), _jsx("button", { onClick: () => setShowImagePicker(false), className: "p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors text-neutral-700 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white", "aria-label": "Close", children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "5", y1: "5", x2: "15", y2: "15" }), _jsx("line", { x1: "15", y1: "5", x2: "5", y2: "15" })] }) })] }), _jsx(ImagePicker, { value: imageId, onChange: (img) => {
+                                updateField({ imageId: img === null || img === void 0 ? void 0 : img.id });
+                                setTimeout(() => setShowImagePicker(false), 100);
+                            }, showEffects: true, brightness: currentBrightness, blur: currentBlur, onBrightnessChange: (b) => { setCurrentBrightness(b); updateField({ brightness: b }); }, onBlurChange: (bl) => { setCurrentBlur(bl); updateField({ blur: bl }); } })] }) }), document.body)] }));
+};
+/**
+ * 3. Hero Preview Component
+ */
+export const HeroPreview = ({ block, fallbackImage, context }) => {
+    const data = (block.data || {});
+    const contextFallback = context === null || context === void 0 ? void 0 : context.fallbackImage;
+    const effectiveFallback = fallbackImage || contextFallback;
+    // Logic: Use data.imageId, then fallback.id, then fallback.src
+    const activeImageId = data.imageId || (effectiveFallback === null || effectiveFallback === void 0 ? void 0 : effectiveFallback.id) || (effectiveFallback === null || effectiveFallback === void 0 ? void 0 : effectiveFallback.src);
+    const paragraphs = (data.summary || '').split('\n\n').filter(p => p.trim());
+    return (_jsx("section", { className: "relative pt-32 pb-20", children: _jsxs("div", { className: "max-w-7xl mx-auto px-6 lg:px-12 grid lg:grid-cols-2 gap-16 items-center", children: [_jsxs("div", { className: "order-2 lg:order-1", children: [_jsx("span", { className: "inline-flex px-4 py-1.5 rounded-full border border-sage/20 bg-sage/5 text-sage text-xs font-bold uppercase tracking-widest mb-8", children: data.category || 'Plant Care' }), _jsx("h1", { className: "text-5xl lg:text-7xl font-serif text-forest mb-8 leading-[1.1]", children: data.title || 'Zonder Titel' }), paragraphs.map((p, i) => (_jsx("p", { className: "text-lg lg:text-xl text-gray-600 font-light mt-4", children: p }, i)))] }), _jsx("div", { className: "order-1 lg:order-2 w-full", children: _jsx("div", { className: "relative w-full aspect-[4/5] lg:aspect-[3/4] rounded-3xl overflow-hidden shadow-2xl bg-neutral-100", children: activeImageId && (_jsx(PluginImage, { id: activeImageId, alt: data.title || 'Hero', fill: true, sizes: "(max-width: 1024px) 100vw, 50vw", className: "object-cover w-full h-full", editable: false })) }) })] }) }));
+};
+export const heroBlock = {
+    type: 'hero',
+    name: 'Hero Sectie',
+    description: 'De Botanics split-view introductie',
+    icon: ImageIcon,
+    category: 'layout',
+    defaultData: {
+        title: '',
+        category: '',
+        summary: '',
+        imageId: undefined,
+    },
+    validate: (data) => typeof data.title === 'string',
+    components: {
+        Edit: HeroEdit,
+        Preview: HeroPreview,
+        Icon: ImageIcon,
+    },
+};

package/dist/plugin-blog/blocks/Image.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BlockEditProps, BlockPreviewProps, ClientBlockDefinition } from '@jhits/plugin-blog';
+export declare const ImageEdit: React.FC<BlockEditProps>;
+export declare const ImagePreview: React.FC<BlockPreviewProps>;
+export declare const imageBlock: ClientBlockDefinition;
+//# sourceMappingURL=Image.d.ts.map

package/dist/plugin-blog/blocks/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/plugin-blog/blocks/Image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAGjF,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AA6B9F,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoY9C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2BpD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,qBAoBxB,CAAC"}