@jhits/plugin-blog 0.0.16 → 0.0.18

package/src/types/post.ts

@@ -68,6 +68,8 @@ export interface PrivacySettings {
  * Post Metadata
  */
 export interface PostMetadata {
+    /** Language-specific title */
+    title?: string;
     /** Featured image */
     featuredImage?: {
         id?: string; // Image ID (preferred, for plugin-images system)
@@ -123,6 +125,9 @@ export interface BlogPost {
     /** Additional metadata */
     metadata: PostMetadata;
     
+    /** Content per language (for multi-language posts) */
+    languages?: BlogPostLanguages;
+    
     /** Creation timestamp */
     createdAt: string;
     
@@ -148,6 +153,9 @@ export interface PostListItem {
     authorId?: string;
     updatedAt: string;
     category?: string;
+    lang?: string;
+    availableLanguages?: string[];
+    languages?: BlogPostLanguages;
 }
 
 /**
@@ -159,6 +167,7 @@ export interface PostFilterOptions {
     tag?: string;
     authorId?: string;
     search?: string;
+    language?: string;
     dateFrom?: string;
     dateTo?: string;
     limit?: number;
@@ -167,3 +176,22 @@ export interface PostFilterOptions {
     sortOrder?: 'asc' | 'desc';
 }
 
+/**
+ * Blog post language content (blocks + metadata per language)
+ */
+export interface BlogPostLanguageContent {
+    blocks: Block[];
+    metadata: PostMetadata;
+    /** Per-language last update timestamp */
+    updatedAt?: string;
+    /** Per-language publication status */
+    status?: PostStatus;
+}
+
+/**
+ * Languages object storing content per language
+ */
+export interface BlogPostLanguages {
+    [key: string]: BlogPostLanguageContent;
+}
+

package/src/utils/client.ts

@@ -13,6 +13,8 @@ export interface FetchBlogsOptions {
     skip?: number;
     /** Filter by status (published, draft, concept) */
     status?: string;
+    /** Filter by language */
+    language?: string;
     /** Whether to fetch all posts for admin (includes drafts) */
     admin?: boolean;
     /** API base URL (default: '/api/blogs') */
@@ -39,6 +41,7 @@ export async function fetchBlogs(options: FetchBlogsOptions = {}): Promise<Fetch
         limit = 10,
         skip = 0,
         status,
+        language,
         admin = false,
         apiBaseUrl = '/api/plugin-blog',
     } = options;
@@ -47,6 +50,7 @@ export async function fetchBlogs(options: FetchBlogsOptions = {}): Promise<Fetch
     if (limit) params.set('limit', limit.toString());
     if (skip) params.set('skip', skip.toString());
     if (status) params.set('status', status);
+    if (language) params.set('language', language);
     if (admin) params.set('admin', 'true');
 
     const url = `${apiBaseUrl}?${params.toString()}`;

package/src/views/CanvasEditor/CanvasEditorView.tsx

@@ -34,45 +34,182 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
     const [isSaving, setIsSaving] = useState(false);
     const [saveError, setSaveError] = useState<string | null>(null);
 
+    // Language state for multilingual support
+    const [primaryLanguage, setPrimaryLanguage] = useState<string>(locale || 'en');
+    const [isLoadingLanguage, setIsLoadingLanguage] = useState(true);
+    const [availableLanguages, setAvailableLanguages] = useState<string[]>([locale || 'en']);
+    const [currentLanguage, setCurrentLanguage] = useState<string>(locale || 'en');
+
     // Get registered blocks
     const registeredBlocks = useRegisteredBlocks();
 
     // Hero block management
     const { heroBlock, setHeroBlock, heroBlockDefinition } = useHeroBlock(state, registeredBlocks);
 
-    // Post loading
+    // Post loading - wait for language settings to be loaded first
     const { isLoadingPost } = usePostLoader(
         postId,
         state.postId,
         (post) => {
             helpers.loadPost(post);
+            // Don't reset current language when loading - preserve user's selection
+            // This allows switching to a new language even if no content exists yet
+            // Update available languages from post's languages object
+            if (post.languages && Object.keys(post.languages).length > 0) {
+                const langs = Object.keys(post.languages);
+                // Add current language to available if not already there
+                if (!langs.includes(currentLanguage)) {
+                    langs.push(currentLanguage);
+                }
+                setAvailableLanguages(langs);
+            }
             // After loading, ensure we're marked as clean
             // Use setTimeout to ensure this runs after the reducer has processed LOAD_POST
             setTimeout(() => {
                 dispatch({ type: 'MARK_CLEAN' });
             }, 0);
         },
-        () => setHeroBlock(null)
+        () => setHeroBlock(null),
+        !isLoadingLanguage ? currentLanguage : undefined
     );
 
+    // Sync currentLanguage to editor state on mount so onSave always knows the active language
+    useEffect(() => {
+        dispatch({ type: 'SET_CURRENT_LANGUAGE', payload: currentLanguage });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps -- only on mount
+
+    // Fetch primary language from settings (simulated - in real app would come from config)
+    useEffect(() => {
+        const fetchLanguageSettings = async () => {
+            try {
+                // Use the locale prop as the initial language
+                // Only set this once on initial load, don't override if user already selected a language
+                if (!currentLanguage || currentLanguage === 'en') {
+                    setPrimaryLanguage(locale || 'nl');
+                    if (!availableLanguages.includes(locale || 'nl')) {
+                        setAvailableLanguages([locale || 'nl']);
+                    }
+                    setCurrentLanguage(locale || 'nl');
+                    dispatch({ type: 'SET_CURRENT_LANGUAGE', payload: locale || 'nl' });
+                }
+            } catch (error) {
+                console.error('Failed to fetch language settings:', error);
+            } finally {
+                setIsLoadingLanguage(false);
+            }
+        };
+        fetchLanguageSettings();
+    }, []); // Empty dependency - only run once on mount
+
+    // Handle language change
+    const handleLanguageChange = async (newLanguage: string) => {
+        // Save current content first if dirty
+        if (state.isDirty) {
+            const confirmed = window.confirm('You have unsaved changes. Do you want to save them first?');
+            if (confirmed) {
+                await handleSave();
+            }
+        }
+
+        setCurrentLanguage(newLanguage);
+        dispatch({ type: 'SET_CURRENT_LANGUAGE', payload: newLanguage });
+
+        // Reload with new language
+        if (postId) {
+            try {
+                const response = await fetch(`/api/plugin-blog/${postId}?language=${newLanguage}`);
+                if (response && response.ok) {
+                    const apiDoc = await response.json();
+                    
+                    // Manually update state instead of going through loadPost
+                    // This avoids re-triggering the usePostLoader hook
+                    const blocks = apiDoc.contentBlocks || apiDoc.blocks || [];
+                    dispatch({ type: 'SET_TITLE', payload: apiDoc.title || '' });
+                    
+                    // Replace all blocks
+                    // First clear, then set new blocks via LOAD_POST-like behavior
+                    // We use a custom dispatch to update blocks without resetting postId
+                    dispatch({ 
+                        type: 'LOAD_POST', 
+                        payload: {
+                            id: state.postId || apiDoc._id || apiDoc.id,
+                            title: apiDoc.title || '',
+                            slug: apiDoc.slug || state.slug,
+                            blocks: blocks,
+                            seo: apiDoc.seo || {},
+                            publication: {
+                                status: apiDoc.publicationData?.status === 'concept' ? 'draft' : (apiDoc.publicationData?.status || state.status),
+                                date: apiDoc.publicationData?.date,
+                                authorId: apiDoc.authorId,
+                            },
+                            metadata: {
+                                featuredImage: apiDoc.image ? {
+                                    id: apiDoc.image.id || apiDoc.image.src,
+                                    alt: apiDoc.image.alt,
+                                    isCustom: apiDoc.image.isCustom,
+                                } : state.metadata?.featuredImage,
+                                categories: apiDoc.categoryTags?.category ? [apiDoc.categoryTags.category] : [],
+                                tags: apiDoc.categoryTags?.tags || [],
+                                excerpt: apiDoc.summary || '',
+                                lang: newLanguage,
+                            },
+                            languages: apiDoc.languages,
+                            createdAt: apiDoc.createdAt || new Date().toISOString(),
+                            updatedAt: apiDoc.updatedAt || new Date().toISOString(),
+                        }
+                    });
+                    
+                    // Update available languages
+                    if (apiDoc.availableLanguages) {
+                        const langs = [...apiDoc.availableLanguages];
+                        if (!langs.includes(newLanguage)) {
+                            langs.push(newLanguage);
+                        }
+                        setAvailableLanguages(langs);
+                    }
+                    
+                    // Reset hero block so it re-initializes from new blocks
+                    setHeroBlock(null);
+                    
+                    setTimeout(() => {
+                        dispatch({ type: 'MARK_CLEAN' });
+                    }, 100);
+                }
+            } catch (error) {
+                console.error('Failed to switch language:', error);
+            }
+        }
+    };
+
+    // Handle adding a new language
+    const handleAddLanguage = async (newLanguage: string) => {
+        if (availableLanguages.includes(newLanguage)) return;
+
+        // Add the new language to the list
+        setAvailableLanguages([...availableLanguages, newLanguage]);
+
+        // Switch to the new language (it will copy from primary language)
+        await handleLanguageChange(newLanguage);
+    };
+
     // Track if we just loaded a post to prevent marking as dirty during cleanup
     const justLoadedRef = useRef(false);
     const previousIsLoadingRef = useRef<boolean>(false);
     const loadingCleanupTimerRef = useRef<NodeJS.Timeout | null>(null);
-    
+
     // Mark when post loading completes and ensure it stays clean after all effects
     useEffect(() => {
         // Detect when loading just finished (was loading, now not loading, and we have a postId)
         const loadingJustFinished = previousIsLoadingRef.current && !isLoadingPost && state.postId;
-        
+
         if (loadingJustFinished) {
             justLoadedRef.current = true;
-            
+
             // Clear any existing cleanup timer
             if (loadingCleanupTimerRef.current) {
                 clearTimeout(loadingCleanupTimerRef.current);
             }
-            
+
             // Wait for all effects to complete, then ensure we're marked as clean
             // Use multiple animation frames + setTimeout to ensure all effects have run
             requestAnimationFrame(() => {
@@ -87,10 +224,10 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
                 });
             });
         }
-        
+
         // Update ref
         previousIsLoadingRef.current = isLoadingPost;
-        
+
         return () => {
             if (loadingCleanupTimerRef.current) {
                 clearTimeout(loadingCleanupTimerRef.current);
@@ -170,7 +307,7 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
             }
 
             console.log('[CanvasEditorView] Final status before save:', state.status);
-            
+
             // Pass hero block to save function so it can be included in the saved data
             await helpers.save(heroBlock);
             setIsSaving(false);
@@ -199,17 +336,17 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
     // Handle hero block update
     const handleHeroBlockUpdate = (data: Partial<Block['data']>) => {
         if (!heroBlock) return;
-        
+
         setHeroBlock({
             ...heroBlock,
             data: { ...heroBlock.data, ...data },
         });
-        
+
         // Sync title to editor state
         if (data.title !== undefined && typeof data.title === 'string') {
             dispatch({ type: 'SET_TITLE', payload: data.title });
         }
-        
+
         // Sync summary to editor state metadata
         if (data.summary !== undefined && typeof data.summary === 'string') {
             dispatch({
@@ -217,11 +354,11 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
                 payload: { excerpt: data.summary }
             });
         }
-        
+
         // Hero image and featured image are completely independent
         // Do NOT sync hero image to featured image
         // The featured image is a separate thumbnail that the client adjusts independently
-        
+
         // Sync category to editor state metadata
         if (data.category !== undefined && typeof data.category === 'string') {
             dispatch({
@@ -244,11 +381,9 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
     };
 
     return (
-        <div className="h-full rounded-[2.5rem] w-full bg-dashboard-card text-dashboard-text flex flex-col font-sans transition-colors duration-300 overflow-hidden relative">
-            <main className="flex flex-1 flex-col relative min-h-0">
-                {/* Error Banner */}
-                <ErrorBanner error={saveError} onDismiss={() => setSaveError(null)} />
-
+        <div className="h-full rounded-[2.5rem] w-full bg-dashboard-card text-dashboard-text flex flex-col font-sans transition-colors duration-300 overflow-hidden">
+            {/* Header needs overflow-visible for dropdown to escape the rounded container */}
+            <header className="overflow-visible flex-none shrink-0 z-10">
                 <EditorHeader
                     isLibraryOpen={isLibraryOpen}
                     onLibraryToggle={() => setLibraryOpen(!isLibraryOpen)}
@@ -275,9 +410,18 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
                     isDirty={state.isDirty}
                     autoSaveCountdown={countdown}
                     autoSaveStatus={saveStatus}
+                    languages={availableLanguages}
+                    currentLanguage={currentLanguage}
+                    onLanguageChange={handleLanguageChange}
+                    onAddLanguage={handleAddLanguage}
                 />
+            </header>
+
+            {/* Error Banner */}
+            <ErrorBanner error={saveError} onDismiss={() => setSaveError(null)} />
 
-                {/* Editor Content Wrapper */}
+            {/* Editor Content Wrapper */}
+            <main className="flex flex-1 flex-col relative min-h-0 overflow-hidden">
                 <div className="flex flex-1 relative overflow-hidden min-h-0 flex-nowrap">
                     {/* LEFT SIDEBAR: COMPONENT LIBRARY */}
                     {!isPreviewMode && (

package/src/views/CanvasEditor/EditorHeader.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import { ArrowLeft, Library, Settings2, Save, Clock, Edit, Eye } from 'lucide-react';
+import { ArrowLeft, Library, Settings2, Save, Clock, Edit, Eye, Globe, Plus, ChevronDown } from 'lucide-react';
 import { useEditor } from '../../state/EditorContext';
 import { SaveConfirmationModal } from './SaveConfirmationModal';
 
@@ -20,6 +20,10 @@ export interface EditorHeaderProps {
     isDirty?: boolean;
     autoSaveCountdown?: number | null;
     autoSaveStatus?: 'idle' | 'saving' | 'saved' | 'error';
+    languages?: string[];
+    currentLanguage?: string;
+    onLanguageChange?: (language: string) => void;
+    onAddLanguage?: (language: string) => void;
 }
 
 export function EditorHeader({
@@ -37,11 +41,27 @@ export function EditorHeader({
     isDirty = false,
     autoSaveCountdown = null,
     autoSaveStatus = 'idle',
+    languages = [],
+    currentLanguage = 'en',
+    onLanguageChange,
+    onAddLanguage,
 }: EditorHeaderProps) {
     const { state, dispatch } = useEditor();
     const [showConfirmModal, setShowConfirmModal] = useState(false);
     const [saveAsDraft, setSaveAsDraft] = useState(false);
     const [saveError, setSaveError] = useState<string | null>(null);
+    const [showLanguageDropdown, setShowLanguageDropdown] = useState(false);
+
+    const languageLabels: Record<string, string> = {
+        en: 'English',
+        nl: 'Nederlands',
+        sv: 'Svenska',
+        de: 'Deutsch',
+        fr: 'Français',
+        es: 'Español',
+    };
+
+    const availableToAdd = ['en', 'nl', 'sv', 'de', 'fr', 'es'].filter(lang => !languages.includes(lang));
 
     const handleSaveDraftClick = () => {
         setSaveAsDraft(true);
@@ -104,7 +124,7 @@ export function EditorHeader({
     };
 
     return (
-        <header className="flex items-center justify-between px-6 py-3 bg-dashboard-sidebar backdrop-blur-md border-b border-dashboard-border flex-none shrink-0">
+        <div className="flex items-center justify-between px-6 py-3 bg-dashboard-sidebar backdrop-blur-md border-b border-dashboard-border flex-none shrink-0">
             <div className="flex items-center gap-6">
                 <button
                     onClick={() => {
@@ -131,6 +151,64 @@ export function EditorHeader({
                     <Library size={16} strokeWidth={1.5} />
                     Library
                 </button>
+                {/* Language Switcher */}
+                {languages.length > 0 && onLanguageChange && (
+                    <>
+                        <div className="h-4 w-[1px] bg-neutral-300 dark:border-neutral-700" />
+                        <div className="relative">
+                            <button
+                                onClick={() => setShowLanguageDropdown(!showLanguageDropdown)}
+                                className="flex items-center gap-2 px-3 py-2 text-[10px] uppercase tracking-widest font-bold bg-dashboard-card border border-dashboard-border rounded-lg text-neutral-600 dark:text-neutral-400 hover:text-dashboard-text hover:border-primary/50 transition-all shadow-sm"
+                            >
+                                <Globe size={14} strokeWidth={1.5} />
+                                <span>{languageLabels[currentLanguage] || currentLanguage.toUpperCase()}</span>
+                                <ChevronDown size={12} className={`transition-transform ${showLanguageDropdown ? 'rotate-180' : ''}`} />
+                            </button>
+                            {showLanguageDropdown && (
+                                <div className="absolute top-full left-0 mt-2 py-1 bg-dashboard-card border border-dashboard-border rounded-lg shadow-xl z-[9999] min-w-[160px] overflow-hidden">
+                                    <div className="px-3 py-2 text-[9px] text-neutral-500 uppercase tracking-wider border-b border-dashboard-border">
+                                        Beschikbare Talen
+                                    </div>
+                                    {languages.map(lang => (
+                                        <button
+                                            key={lang}
+                                            onClick={() => {
+                                                onLanguageChange(lang);
+                                                setShowLanguageDropdown(false);
+                                            }}
+                                            className={`w-full text-left px-3 py-2 text-[10px] uppercase tracking-wider transition-colors ${lang === currentLanguage
+                                                ? 'bg-primary/10 text-primary font-bold'
+                                                : 'text-neutral-600 dark:text-neutral-400 hover:bg-dashboard-bg hover:text-dashboard-text'
+                                                }`}
+                                        >
+                                            {languageLabels[lang] || lang.toUpperCase()}
+                                        </button>
+                                    ))}
+                                    {availableToAdd.length > 0 && onAddLanguage && (
+                                        <>
+                                            <div className="my-1 border-t border-dashboard-border" />
+                                            <div className="px-3 py-1 text-[9px] text-neutral-500 uppercase tracking-wider">
+                                                Add Language
+                                            </div>
+                                            {availableToAdd.slice(0, 3).map(lang => (
+                                                <button
+                                                    key={lang}
+                                                    onClick={() => {
+                                                        onAddLanguage(lang);
+                                                        setShowLanguageDropdown(false);
+                                                    }}
+                                                    className="w-full text-left px-3 py-2 text-[10px] uppercase tracking-wider text-neutral-600 dark:text-neutral-400 hover:bg-dashboard-bg hover:text-dashboard-text transition-colors"
+                                                >
+                                                    + {languageLabels[lang] || lang.toUpperCase()}
+                                                </button>
+                                            ))}
+                                        </>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    </>
+                )}
             </div>
 
             <div className="flex items-center gap-4">
@@ -139,11 +217,10 @@ export function EditorHeader({
                     <div className="flex items-center gap-2">
                         <button
                             onClick={() => onAutoSaveToggle(!autoSaveEnabled)}
-                            className={`relative flex items-center gap-2 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${
-                                autoSaveEnabled
-                                    ? 'bg-primary/20 text-primary border border-primary/30'
-                                    : 'bg-dashboard-bg text-neutral-600 dark:text-neutral-400 border border-dashboard-border hover:text-neutral-950 dark:hover:text-white'
-                            }`}
+                            className={`relative flex items-center gap-2 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${autoSaveEnabled
+                                ? 'bg-primary/20 text-primary border border-primary/30'
+                                : 'bg-dashboard-bg text-neutral-600 dark:text-neutral-400 border border-dashboard-border hover:text-neutral-950 dark:hover:text-white'
+                                }`}
                             title={autoSaveEnabled ? 'Auto-save enabled (saves after 10s of inactivity)' : 'Click to enable auto-save'}
                         >
                             <Clock size={12} className={autoSaveEnabled && autoSaveStatus !== 'saving' ? 'animate-pulse' : ''} />
@@ -185,11 +262,10 @@ export function EditorHeader({
                                 onPreviewToggle();
                             }
                         }}
-                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${
-                            !isPreviewMode
-                                ? 'bg-primary text-white shadow-sm'
-                                : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
-                        }`}
+                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${!isPreviewMode
+                            ? 'bg-primary text-white shadow-sm'
+                            : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
+                            }`}
                         title="Edit mode - Make changes to your post"
                     >
                         <Edit size={12} strokeWidth={2.5} />
@@ -201,11 +277,10 @@ export function EditorHeader({
                                 onPreviewToggle();
                             }
                         }}
-                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${
-                            isPreviewMode
-                                ? 'bg-primary text-white shadow-sm'
-                                : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
-                        }`}
+                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${isPreviewMode
+                            ? 'bg-primary text-white shadow-sm'
+                            : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
+                            }`}
                         title="Preview mode - See how your post will look"
                     >
                         <Eye size={12} strokeWidth={2.5} />
@@ -262,7 +337,7 @@ export function EditorHeader({
                 saveAsDraft={saveAsDraft}
                 error={saveError}
             />
-        </header>
+        </div>
     );
 }
 

package/src/views/CanvasEditor/hooks/usePostLoader.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { apiToBlogPost, type APIBlogDocument } from '../../../lib/mappers/apiMapper';
 import type { BlogPost } from '../../../types/post';
 
@@ -6,9 +6,13 @@ export function usePostLoader(
     postId: string | undefined,
     currentPostId: string | null,
     loadPost: (post: BlogPost) => void,
-    resetHeroBlock: () => void
+    resetHeroBlock: () => void,
+    language?: string
 ) {
     const [isLoadingPost, setIsLoadingPost] = useState(false);
+    // Use a ref to track language so changes don't re-trigger initial load
+    const languageRef = useRef(language);
+    languageRef.current = language;
 
     useEffect(() => {
         if (postId && !currentPostId) {
@@ -17,7 +21,11 @@ export function usePostLoader(
                     setIsLoadingPost(true);
                     // Reset hero block before loading new post so it gets re-initialized from the new post's blocks
                     resetHeroBlock();
-                    const response = await fetch(`/api/plugin-blog/${postId}`);
+                    const lang = languageRef.current;
+                    const url = lang 
+                        ? `/api/plugin-blog/${postId}?language=${lang}`
+                        : `/api/plugin-blog/${postId}`;
+                    const response = await fetch(url);
                     if (!response.ok) {
                         throw new Error('Failed to load post');
                     }
@@ -33,7 +41,10 @@ export function usePostLoader(
             };
             loadPostData();
         }
-    }, [postId, currentPostId, loadPost, resetHeroBlock]);
+    // Only re-run on initial load (postId / currentPostId change), NOT on language change
+    // Language switching is handled separately by handleLanguageChange
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [postId, currentPostId]);
 
     return { isLoadingPost };
 }