@jhits/botanics_and_you 0.0.1

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@jhits/botanics_and_you",
+  "version": "0.0.1",
+  "description": "BotanicsAndYou client configuration for JHITS plugins",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./plugin-blog": {
+      "types": "./src/plugin-blog/index.ts",
+      "default": "./src/plugin-blog/index.ts"
+    },
+    "./plugin-blog/theme": {
+      "types": "./src/plugin-blog/theme.ts",
+      "default": "./src/plugin-blog/theme.css"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "@jhits/plugin-blog": "0.0.7",
+    "@jhits/plugin-images": "0.0.5"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3"
+  }
+}

package/src/index.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';

package/src/plugin-blog/api-config.ts

@@ -0,0 +1,10 @@
+// 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: string): string {
+  return `${API_BASE_URL}/api${path}`;
+}
+
+export { API_BASE_URL };

package/src/plugin-blog/blocks/CategoryDropdown.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { ChevronDown, Plus } from 'lucide-react';
+
+export interface CategoryDropdownProps {
+    value: string;
+    onChange: (category: string) => void;
+    existingCategories: string[];
+    className?: string;
+    placeholder?: string;
+    showLabel?: boolean;
+}
+
+export function CategoryDropdown({
+    value,
+    onChange,
+    existingCategories = [],
+    className = '',
+    placeholder = 'Select or add category...',
+    showLabel = false,
+}: CategoryDropdownProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    const [isAddingNew, setIsAddingNew] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(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: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                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: string) => {
+        onChange(category);
+        setIsOpen(false);
+        setIsAddingNew(false);
+        setInputValue('');
+    };
+
+    return (
+        <div className={`relative ${className}`} ref={dropdownRef}>
+            {showLabel && (
+                <label className="text-[10px] text-neutral-500 uppercase font-bold block mb-2 tracking-widest">
+                    Category
+                </label>
+            )}
+            <div className="relative">
+                <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"
+                >
+                    <span className="truncate">{value || placeholder}</span>
+                    <ChevronDown size={14} className={`transition-transform text-sage/50 ${isOpen ? 'rotate-180' : ''}`} />
+                </div>
+
+                {isOpen && (
+                    <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">
+                        {otherCategories.length > 0 && (
+                            <div className="py-1 max-h-48 overflow-y-auto">
+                                {otherCategories.map((category) => (
+                                    <button
+                                        key={category}
+                                        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"
+                                    >
+                                        {category}
+                                    </button>
+                                ))}
+                            </div>
+                        )}
+
+                        {!isAddingNew ? (
+                            <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"
+                            >
+                                <Plus size={14} /> Add new category
+                            </button>
+                        ) : (
+                            <div className="p-3 border-t border-neutral-50 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-800/50">
+                                <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"
+                                />
+                                <div className="flex gap-2">
+                                    <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"
+                                    >
+                                        Add
+                                    </button>
+                                    <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"
+                                    >
+                                        Cancel
+                                    </button>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/plugin-blog/blocks/Heading.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { BlockEditProps, BlockPreviewProps, ClientBlockDefinition } from "@jhits/plugin-blog";
+import { Heading, ChevronDown } from "lucide-react";
+import { useState, useRef, useEffect } from "react";
+
+const getClassName = (level: number) => `
+    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: React.FC<BlockEditProps> = ({ block, onUpdate, isSelected }) => {
+    const level = (block.data.level as number) || 2;
+    const text = (block.data.text as string) || '';
+    const [showLevelDropdown, setShowLevelDropdown] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    const defaultClassName = getClassName(level);
+
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                setShowLevelDropdown(false);
+            }
+        };
+
+        if (showLevelDropdown) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [showLevelDropdown]);
+
+    const handleLevelChange = (newLevel: number) => {
+        onUpdate({ level: newLevel });
+        setShowLevelDropdown(false);
+    };
+
+    return (
+        <div className="relative group">
+            <div className="flex items-center gap-3">
+                {/* Heading Level Selector */}
+                <div className="relative" ref={dropdownRef}>
+                    <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"
+                    >
+                        <span>H{level}</span>
+                        <ChevronDown size={12} className={`transition-transform ${showLevelDropdown ? 'rotate-180' : ''}`} />
+                    </button>
+
+                    {showLevelDropdown && (
+                        <div className="absolute z-50 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden min-w-[120px]">
+                            {[1, 2, 3, 4, 5, 6].map((lvl) => (
+                                <button
+                                    key={lvl}
+                                    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'
+                                        }`}
+                                >
+                                    H{lvl} {lvl === 1 ? '(Page Title)' : lvl === 2 ? '(Section)' : lvl === 3 ? '(Subsection)' : ''}
+                                </button>
+                            ))}
+                        </div>
+                    )}
+                </div>
+
+                {/* Heading Text Input */}
+                <input
+                    type="text"
+                    value={text}
+                    onChange={(e) => onUpdate({ text: e.target.value })}
+                    placeholder="Enter heading text..."
+                    className={`flex-1 ${defaultClassName}`}
+                />
+            </div>
+        </div>
+    );
+};
+
+const HeadingPreview: React.FC<BlockPreviewProps> = ({ block }) => {
+    const level = Math.min(Math.max((block.data.level as number) || 2, 1), 6);
+    const text = (block.data.text as string) || '';
+
+    const defaultClassName = getClassName(level);
+
+    switch (level) {
+        case 1:
+            return <h1 className={defaultClassName}>{text}</h1>;
+        case 3:
+            return <h3 className={defaultClassName}>{text}</h3>;
+        case 4:
+            return <h4 className={defaultClassName}>{text}</h4>;
+        case 5:
+            return <h5 className={defaultClassName}>{text}</h5>;
+        case 6:
+            return <h6 className={defaultClassName}>{text}</h6>;
+        default:
+            return <h2 className={defaultClassName}>{text}</h2>;
+    }
+};
+
+export const HeadingBlock: ClientBlockDefinition = {
+    type: 'heading',
+    name: 'Heading',
+    description: 'Add a heading (H1-H6)',
+    icon: Heading,
+    defaultData: {
+        text: '',
+        level: 2,
+    },
+    category: 'text',
+    validate: (data: Record<string, unknown>) => {
+        return typeof data.text === 'string' &&
+            typeof data.level === 'number' &&
+            data.level >= 1 && data.level <= 6;
+    },
+    components: {
+        Edit: HeadingEdit,
+        Preview: HeadingPreview,
+        Icon: Heading,
+    },
+};

package/src/plugin-blog/blocks/Hero.tsx

@@ -0,0 +1,228 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Image as ImageIcon } from 'lucide-react';
+import { BlockEditProps, BlockPreviewProps, ClientBlockDefinition } from '@jhits/plugin-blog';
+import { useCategories } from '@jhits/plugin-blog';
+import { ImagePicker, Image as PluginImage } from '@jhits/plugin-images';
+import { CategoryDropdown } from './CategoryDropdown';
+import { createApiUrl } from '../api-config';
+
+interface HeroData {
+    title: string;
+    category: string;
+    summary: string;
+    imageId?: string;
+    brightness?: number;
+    blur?: number;
+}
+
+/**
+ * 2. Hero Edit Component
+ */
+export const HeroEdit: React.FC<BlockEditProps> = ({ block, onUpdate }) => {
+    const [showImagePicker, setShowImagePicker] = useState(false);
+    const [currentBrightness, setCurrentBrightness] = useState<number>(100);
+    const [currentBlur, setCurrentBlur] = useState<number>(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 || {}) as unknown as HeroData;
+    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 => {
+                    if (resolved) {
+                        setCurrentBrightness(data.brightness ?? resolved.brightness ?? 100);
+                        setCurrentBlur(data.blur ?? resolved.blur ?? 0);
+                    }
+                })
+                .catch(() => {
+                    setCurrentBrightness(100);
+                    setCurrentBlur(0);
+                });
+        }
+    }, [imageId, data.brightness, data.blur]);
+
+    const updateField = (updates: Partial<HeroData>) => {
+        onUpdate({ ...data, ...updates });
+    };
+
+    return (
+        <section className="relative pt-32 pb-20 overflow-hidden group/hero">
+            <div className="max-w-7xl mx-auto px-6 lg:px-12 grid lg:grid-cols-2 gap-16 items-center">
+                <div className="order-2 lg:order-1 text-left flex flex-col items-start">
+                    <CategoryDropdown
+                        value={category}
+                        onChange={(newCategory: string) => updateField({ category: newCategory })}
+                        existingCategories={categories}
+                        placeholder="CATEGORIE"
+                    />
+
+                    <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"
+                    />
+
+                    <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"
+                    />
+                </div>
+
+                {/* Image Side - Fixed Container */}
+                <div className="order-1 lg:order-2 w-full">
+                    <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)}
+                    >
+                        {imageId ? (
+                            <PluginImage
+                                id={imageId}
+                                alt={title || 'Hero'}
+                                fill
+                                sizes="(max-width: 1024px) 100vw, 50vw"
+                                className="object-cover w-full h-full transition-transform duration-700 group-hover/imgcontainer:scale-105"
+                                editable={false}
+                            />
+                        ) : (
+                            <div className="absolute inset-0 flex flex-col items-center justify-center text-gray-400">
+                                <ImageIcon size={48} className="mb-2" />
+                                <p className="text-sm font-bold">Add Image</p>
+                            </div>
+                        )}
+                        
+                        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover/imgcontainer:opacity-100 transition-opacity flex items-center justify-center z-10">
+                            <div className="bg-white px-4 py-2 rounded-full flex items-center gap-2">
+                                <ImageIcon size={16} className="text-primary" />
+                                <span className="text-sm font-bold text-neutral-900">Edit Image</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {showImagePicker && mounted && createPortal(
+                <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+                    <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">
+                        <div className="flex justify-between items-center mb-4">
+                            <h3 className="font-bold text-neutral-900 dark:text-white">Hero Image Settings</h3>
+                            <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"
+                            >
+                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                    <line x1="5" y1="5" x2="15" y2="15"></line>
+                                    <line x1="15" y1="5" x2="5" y2="15"></line>
+                                </svg>
+                            </button>
+                        </div>
+                        <ImagePicker
+                            value={imageId}
+                            onChange={(img) => {
+                                updateField({ imageId: 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 }); }}
+                        />
+                    </div>
+                </div>,
+                document.body
+            )}
+        </section>
+    );
+};
+
+/**
+ * 3. Hero Preview Component
+ */
+export const HeroPreview: React.FC<BlockPreviewProps & { fallbackImage?: { id?: string; src?: string } }> = ({ block, fallbackImage, context }) => {
+    const data = (block.data || {}) as unknown as HeroData;
+    const contextFallback = (context as any)?.fallbackImage;
+    const effectiveFallback = fallbackImage || contextFallback;
+    
+    // Logic: Use data.imageId, then fallback.id, then fallback.src
+    const activeImageId = data.imageId || effectiveFallback?.id || effectiveFallback?.src;
+
+    const paragraphs = (data.summary || '').split('\n\n').filter(p => p.trim());
+
+    return (
+        <section className="relative pt-32 pb-20">
+            <div className="max-w-7xl mx-auto px-6 lg:px-12 grid lg:grid-cols-2 gap-16 items-center">
+                <div className="order-2 lg:order-1">
+                    <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">
+                        {data.category || 'Plant Care'}
+                    </span>
+                    <h1 className="text-5xl lg:text-7xl font-serif text-forest mb-8 leading-[1.1]">
+                        {data.title || 'Zonder Titel'}
+                    </h1>
+                    {paragraphs.map((p, i) => (
+                        <p key={i} className="text-lg lg:text-xl text-gray-600 font-light mt-4">
+                            {p}
+                        </p>
+                    ))}
+                </div>
+
+                <div className="order-1 lg:order-2 w-full">
+                    {/* The aspect ratio div MUST be relative and have a background to prevent collapse */}
+                    <div className="relative w-full aspect-[4/5] lg:aspect-[3/4] rounded-3xl overflow-hidden shadow-2xl bg-neutral-100">
+                        {activeImageId && (
+                            <PluginImage
+                                id={activeImageId}
+                                alt={data.title || 'Hero'}
+                                fill
+                                sizes="(max-width: 1024px) 100vw, 50vw"
+                                className="object-cover w-full h-full"
+                                editable={false}
+                            />
+                        )}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export const heroBlock: ClientBlockDefinition = {
+    type: 'hero',
+    name: 'Hero Sectie',
+    description: 'De Botanics split-view introductie',
+    icon: ImageIcon,
+    category: 'layout',
+    defaultData: {
+        title: '',
+        category: '',
+        summary: '',
+        imageId: undefined,
+    },
+    validate: (data: Record<string, unknown>) => typeof data.title === 'string',
+    components: {
+        Edit: HeroEdit,
+        Preview: HeroPreview,
+        Icon: ImageIcon,
+    },
+};