Merge pull request #43 from simoleo89/chat-prefix

feat: custom chat prefix system

src/api/utils/PrefixUtils.ts

@@ -6,6 +6,9 @@ export const PRESET_PREFIX_EFFECTS: { id: string; label: string; icon: string }[
     { id: 'outline', label: 'Outline', icon: '🔲' },
     { id: 'pulse', label: 'Pulse', icon: '💫' },
     { id: 'bold-glow', label: 'Neon', icon: '💡' },
+    { id: 'rainbow', label: 'Rainbow', icon: '🌈' },
+    { id: 'shake', label: 'Shake', icon: '📳' },
+    { id: 'wave', label: 'Wave', icon: '🌊' },
 ];
 
 export const parsePrefixColors = (text: string, colorStr: string): string[] =>
@@ -40,11 +43,40 @@ export const getPrefixEffectStyle = (effect: string, color?: string): Record<str
                 textShadow: `0 0 4px ${ baseColor }, 0 0 8px ${ baseColor }, 0 0 16px ${ baseColor }60`,
                 fontWeight: 900
             };
+        case 'rainbow':
+            return { animation: 'prefix-rainbow 3s linear infinite', display: 'inline-block' };
+        case 'shake':
+            return { animation: 'prefix-shake 0.4s ease-in-out infinite', display: 'inline-block' };
+        case 'wave':
+            return { animation: 'prefix-wave 1s ease-in-out infinite', display: 'inline-block' };
         default:
             return {};
     }
 };
 
+export const generateGradientColors = (startColor: string, endColor: string, steps: number): string[] =>
+{
+    if(steps <= 1) return [ startColor ];
+
+    const parseHex = (hex: string) =>
+    {
+        const h = hex.replace('#', '');
+        return { r: parseInt(h.substring(0, 2), 16), g: parseInt(h.substring(2, 4), 16), b: parseInt(h.substring(4, 6), 16) };
+    };
+
+    const start = parseHex(startColor);
+    const end = parseHex(endColor);
+
+    return Array.from({ length: steps }, (_, i) =>
+    {
+        const t = i / (steps - 1);
+        const r = Math.round(start.r + (end.r - start.r) * t);
+        const g = Math.round(start.g + (end.g - start.g) * t);
+        const b = Math.round(start.b + (end.b - start.b) * t);
+        return `#${ r.toString(16).padStart(2, '0') }${ g.toString(16).padStart(2, '0') }${ b.toString(16).padStart(2, '0') }`;
+    });
+};
+
 export const PREFIX_EFFECT_KEYFRAMES = `
 @keyframes prefix-pulse {
     0%, 100% { opacity: 1; }

src/components/catalog/views/page/layout/CatalogLayoutCustomPrefixView.tsx

@@ -1,5 +1,7 @@
 import { PurchasePrefixComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useRef, useState } from 'react';
+import { LocalizeText, SendMessageComposer, PRESET_PREFIX_EFFECTS, generateGradientColors } from '../../../../../api';
+import { PrefixPreview } from '../../../../../layout';
 import { LocalizeText, SanitizeHtml, SendMessageComposer, PRESET_PREFIX_EFFECTS, parsePrefixColors, getPrefixEffectStyle, PREFIX_EFFECT_KEYFRAMES } from '../../../../../api';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 import data from '@emoji-mart/data';
@@ -22,11 +24,13 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
     }, [ page, hideNavigation ]);
 
     const [ prefixText, setPrefixText ] = useState('');
-    const [ colorMode, setColorMode ] = useState<'single' | 'perLetter'>('single');
+    const [ colorMode, setColorMode ] = useState<'single' | 'perLetter' | 'gradient'>('single');
     const [ singleColor, setSingleColor ] = useState('#FFFFFF');
     const [ letterColors, setLetterColors ] = useState<Record<number, string>>({});
     const [ selectedLetterIndex, setSelectedLetterIndex ] = useState<number | null>(null);
     const [ customColorInput, setCustomColorInput ] = useState('#FFFFFF');
+    const [ gradientStart, setGradientStart ] = useState('#FF0000');
+    const [ gradientEnd, setGradientEnd ] = useState('#0066FF');
     const [ selectedIcon, setSelectedIcon ] = useState('');
     const [ showIconPicker, setShowIconPicker ] = useState(false);
     const [ selectedEffect, setSelectedEffect ] = useState('');
@@ -36,15 +40,16 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
     {
         if(colorMode === 'single') return singleColor;
 
+        if(colorMode === 'gradient')
+        {
+            const steps = Math.max(prefixText.length, 2);
+            return generateGradientColors(gradientStart, gradientEnd, steps).join(',');
+        }
+
         if(!prefixText.length) return singleColor;
 
         return [ ...prefixText ].map((_, i) => letterColors[i] || singleColor).join(',');
-    }, [ colorMode, singleColor, letterColors, prefixText ]);
-
-    const previewColors = useMemo(() =>
-    {
-        return parsePrefixColors(prefixText || '...', colorString || '#FFFFFF');
-    }, [ prefixText, colorString ]);
+    }, [ colorMode, singleColor, letterColors, prefixText, gradientStart, gradientEnd ]);
 
     const isValid = useMemo(() =>
     {
@@ -52,9 +57,12 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
 
         if(colorMode === 'single') return /^#[0-9A-Fa-f]{6}$/.test(singleColor);
 
+        if(colorMode === 'gradient')
+            return /^#[0-9A-Fa-f]{6}$/.test(gradientStart) && /^#[0-9A-Fa-f]{6}$/.test(gradientEnd);
+
         const colors = colorString.split(',');
         return colors.every(c => /^#[0-9A-Fa-f]{6}$/.test(c));
-    }, [ prefixText, colorMode, singleColor, colorString ]);
+    }, [ prefixText, colorMode, singleColor, colorString, gradientStart, gradientEnd ]);
 
     const handlePurchase = () =>
     {
@@ -72,7 +80,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
             setSingleColor(color);
             setCustomColorInput(color);
         }
-        else if(selectedLetterIndex !== null)
+        else if(colorMode === 'perLetter' && selectedLetterIndex !== null)
         {
             setLetterColors(prev => ({ ...prev, [selectedLetterIndex]: color }));
             setCustomColorInput(color);
@@ -96,7 +104,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
             {
                 setSingleColor(value);
             }
-            else if(selectedLetterIndex !== null)
+            else if(colorMode === 'perLetter' && selectedLetterIndex !== null)
             {
                 setLetterColors(prev => ({ ...prev, [selectedLetterIndex]: value }));
             }
@@ -121,18 +129,12 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
         setLetterColors(newColors);
     };
 
-    const hasMultiColor = colorMode === 'perLetter' && previewColors.length > 1 && new Set(previewColors).size > 1;
-
     const currentActiveColor = colorMode === 'single'
         ? singleColor
         : (selectedLetterIndex !== null ? (letterColors[selectedLetterIndex] || singleColor) : singleColor);
 
-    const effectStyle = getPrefixEffectStyle(selectedEffect, previewColors[0] || '#FFFFFF');
-
     return (
         <div className="flex flex-col gap-2 h-full overflow-auto p-1">
-            <style>{ PREFIX_EFFECT_KEYFRAMES }</style>
-
             { /* Header */ }
             { page.localization.getImage(0) &&
                 <img alt="" className="w-full rounded" src={ page.localization.getImage(0) } /> }
@@ -148,20 +150,37 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                 } }>
                 <div className="absolute inset-0 rounded-lg opacity-20"
                     style={ { background: 'radial-gradient(ellipse at center, rgba(100,149,237,0.3) 0%, transparent 70%)' } } />
-                <span className="relative text-xl font-bold tracking-wide" style={ effectStyle }>
-                    { selectedIcon && <span className="mr-1">{ selectedIcon }</span> }
-                    <span style={ hasMultiColor ? effectStyle : { ...effectStyle, color: previewColors[0] || '#FFFFFF' } }>
-                        {'{'}
-                        { hasMultiColor
-                            ? [ ...(prefixText || '...') ].map((char, i) => (
-                                <span key={ i } style={ { color: previewColors[i] || previewColors[previewColors.length - 1], ...getPrefixEffectStyle(selectedEffect, previewColors[i]) } }>{ char }</span>
-                            ))
-                            : (prefixText || '...')
-                        }
-                        {'}'}
-                    </span>
+                <span className="relative flex items-center">
+                    <PrefixPreview
+                        className="tracking-wide"
+                        color={ colorString }
+                        effect={ selectedEffect }
+                        icon={ selectedIcon }
+                        text={ prefixText || '...' }
+                        textSize="text-xl" />
+                    <span className="ml-2 text-white/80 text-lg font-medium">Username</span>
                 </span>
-                <span className="relative ml-2 text-white/80 text-lg font-medium">Username</span>
+            </div>
+
+            { /* Chat Bubble Preview */ }
+            <div className="relative rounded-lg overflow-hidden p-2"
+                style={ { background: 'rgba(0,0,0,0.08)', border: '1px solid rgba(0,0,0,0.06)' } }>
+                <div className="text-[10px] opacity-40 mb-1 uppercase font-bold tracking-wider">{ LocalizeText('catalog.prefix.chat.preview') }</div>
+                <div className="chat-bubble bubble-0 type-0 max-w-[350px] relative z-1 wrap-break-word min-h-[26px] text-[14px]">
+                    <div className="chat-content py-[5px] px-[6px] ml-[27px] leading-none min-h-[25px]">
+                        { (prefixText || '...') &&
+                            <PrefixPreview
+                                className="mr-1"
+                                color={ colorString }
+                                effect={ selectedEffect }
+                                icon={ selectedIcon }
+                                text={ prefixText || '...' }
+                                textSize="text-[inherit]" /> }
+                        <b className="username">Username: </b>
+                        <span className="message">Hello everyone!</span>
+                    </div>
+                    <div className="pointer absolute left-[50%] translate-x-[-50%] w-[9px] h-[6px] bottom-[-5px]" />
+                </div>
             </div>
 
             { /* Text + Icon Row */ }
@@ -218,6 +237,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
             { showIconPicker && (
                 <>
                     <div className="fixed inset-0" style={ { zIndex: 999, background: 'rgba(0,0,0,0.5)' } } onClick={ () => setShowIconPicker(false) } />
+                    <div ref={ pickerContainerRef } className="fixed rounded-xl overflow-hidden" style={ { zIndex: 1000, top: '50%', left: '50%', transform: 'translate(-50%, -50%)', boxShadow: '0 8px 32px rgba(0,0,0,0.6)' } }>
                     <div className="fixed rounded-xl overflow-hidden" style={ { zIndex: 1000, top: '50%', left: '50%', transform: 'translate(-50%, -50%)', boxShadow: '0 8px 32px rgba(0,0,0,0.6)' } }>
                         <Picker
                             data={ data }
@@ -275,14 +295,74 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                         className="flex-1 px-2 py-1.5 text-xs font-bold transition-all"
                         style={ {
                             background: colorMode === 'perLetter' ? 'rgba(59,130,246,0.25)' : 'rgba(0,0,0,0.1)',
+                            borderRight: '1px solid rgba(0,0,0,0.1)',
                             opacity: colorMode === 'perLetter' ? 1 : 0.6
                         } }
                         onClick={ () => { setColorMode('perLetter'); if(prefixText.length > 0) setSelectedLetterIndex(0); } }>
                         { LocalizeText('catalog.prefix.color.per.letter') }
                     </button>
+                    <button
+                        className="flex-1 px-2 py-1.5 text-xs font-bold transition-all"
+                        style={ {
+                            background: colorMode === 'gradient' ? 'rgba(59,130,246,0.25)' : 'rgba(0,0,0,0.1)',
+                            opacity: colorMode === 'gradient' ? 1 : 0.6
+                        } }
+                        onClick={ () => { setColorMode('gradient'); setSelectedLetterIndex(null); } }>
+                        { LocalizeText('catalog.prefix.color.gradient') }
+                    </button>
                 </div>
             </div>
 
+            { /* Gradient Controls */ }
+            { colorMode === 'gradient' && (
+                <div className="flex flex-col gap-1.5">
+                    <div className="flex items-center gap-2">
+                        <div className="flex items-center gap-1 flex-1">
+                            <label
+                                className="relative cursor-pointer shrink-0"
+                                style={ {
+                                    width: '24px', height: '24px', borderRadius: '6px',
+                                    backgroundColor: gradientStart,
+                                    border: '2px solid rgba(0,0,0,0.2)',
+                                    boxShadow: `0 0 6px ${ gradientStart }40`
+                                } }>
+                                <input className="absolute inset-0 opacity-0 cursor-pointer" style={ { width: '100%', height: '100%' } }
+                                    type="color" value={ gradientStart }
+                                    onChange={ e => setGradientStart(e.target.value) } />
+                            </label>
+                            <input className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none"
+                                maxLength={ 7 } placeholder="#FF0000"
+                                style={ { background: 'rgba(0,0,0,0.15)', border: '1px solid rgba(0,0,0,0.1)', color: 'inherit', borderRadius: '5px' } }
+                                type="text" value={ gradientStart }
+                                onChange={ e => { const v = e.target.value; setGradientStart(v); } } />
+                        </div>
+                        <span className="text-xs opacity-40">→</span>
+                        <div className="flex items-center gap-1 flex-1">
+                            <label
+                                className="relative cursor-pointer shrink-0"
+                                style={ {
+                                    width: '24px', height: '24px', borderRadius: '6px',
+                                    backgroundColor: gradientEnd,
+                                    border: '2px solid rgba(0,0,0,0.2)',
+                                    boxShadow: `0 0 6px ${ gradientEnd }40`
+                                } }>
+                                <input className="absolute inset-0 opacity-0 cursor-pointer" style={ { width: '100%', height: '100%' } }
+                                    type="color" value={ gradientEnd }
+                                    onChange={ e => setGradientEnd(e.target.value) } />
+                            </label>
+                            <input className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none"
+                                maxLength={ 7 } placeholder="#0066FF"
+                                style={ { background: 'rgba(0,0,0,0.15)', border: '1px solid rgba(0,0,0,0.1)', color: 'inherit', borderRadius: '5px' } }
+                                type="text" value={ gradientEnd }
+                                onChange={ e => { const v = e.target.value; setGradientEnd(v); } } />
+                        </div>
+                    </div>
+                    { /* Gradient preview bar */ }
+                    <div className="h-2 rounded-full"
+                        style={ { background: `linear-gradient(to right, ${ gradientStart }, ${ gradientEnd })` } } />
+                </div>
+            ) }
+
             { /* Per-Letter Selector */ }
             { colorMode === 'perLetter' && prefixText.length > 0 && (
                 <div className="flex flex-col gap-1.5">
@@ -347,6 +427,49 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                 </div>
             ) }
 
+            { /* Color Palette (single & perLetter modes) */ }
+            { colorMode !== 'gradient' && (
+                <div className="flex flex-col gap-1">
+                    { colorMode === 'perLetter' && selectedLetterIndex !== null &&
+                        <span className="text-[10px] opacity-50 italic">
+                            { LocalizeText('catalog.prefix.color.selected') } &quot;{ prefixText[selectedLetterIndex] || '' }&quot;
+                        </span>
+                    }
+                    <div className="grid gap-1" style={ { gridTemplateColumns: 'repeat(auto-fill, minmax(34px, 1fr))' } }>
+                        { PRESET_COLORS.map((color, idx) =>
+                        {
+                            const isActive = currentActiveColor === color;
+                            return (
+                                <div
+                                    key={ idx }
+                                    className={ `aspect-square rounded cursor-pointer transition-all duration-100 border-2 ${ isActive ? 'scale-110 border-white shadow-lg' : 'border-transparent hover:scale-105' }` }
+                                    style={ {
+                                        backgroundColor: color,
+                                        boxShadow: isActive ? `0 0 8px ${ color }, 0 0 0 1px rgba(0,0,0,0.3)` : 'inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.15)',
+                                        zIndex: isActive ? 5 : 1
+                                    } }
+                                    onClick={ () => handleColorSelect(color) } />
+                            );
+                        }) }
+                    </div>
+                    <div className="flex items-center gap-2 mt-0.5">
+                        <label
+                            className="relative cursor-pointer"
+                            style={ {
+                                width: '24px',
+                                height: '24px',
+                                borderRadius: '6px',
+                                backgroundColor: customColorInput,
+                                border: '2px solid rgba(0,0,0,0.2)',
+                                boxShadow: `0 0 6px ${ customColorInput }40, inset 0 1px 0 rgba(255,255,255,0.3)`
+                            } }>
+                            <input
+                                className="absolute inset-0 opacity-0 cursor-pointer"
+                                style={ { width: '100%', height: '100%' } }
+                                type="color"
+                                value={ customColorInput }
+                                onChange={ e => handleColorSelect(e.target.value) } />
+                        </label>
             { /* Color Palette */ }
             <div className="flex flex-col gap-1">
                 { colorMode === 'perLetter' && selectedLetterIndex !== null &&
@@ -383,28 +506,22 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                             boxShadow: `0 0 6px ${ customColorInput }40, inset 0 1px 0 rgba(255,255,255,0.3)`
                         } }>
                         <input
-                            className="absolute inset-0 opacity-0 cursor-pointer"
-                            style={ { width: '100%', height: '100%' } }
-                            type="color"
+                            className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none transition-all"
+                            maxLength={ 7 }
+                            placeholder="#FFFFFF"
+                            style={ {
+                                background: 'rgba(0,0,0,0.15)',
+                                border: '1px solid rgba(0,0,0,0.1)',
+                                color: 'inherit',
+                                maxWidth: '80px',
+                                borderRadius: '5px'
+                            } }
+                            type="text"
                             value={ customColorInput }
-                            onChange={ e => handleColorSelect(e.target.value) } />
-                    </label>
-                    <input
-                        className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none transition-all"
-                        maxLength={ 7 }
-                        placeholder="#FFFFFF"
-                        style={ {
-                            background: 'rgba(0,0,0,0.15)',
-                            border: '1px solid rgba(0,0,0,0.1)',
-                            color: 'inherit',
-                            maxWidth: '80px',
-                            borderRadius: '5px'
-                        } }
-                        type="text"
-                        value={ customColorInput }
-                        onChange={ e => handleCustomColorChange(e.target.value) } />
+                            onChange={ e => handleCustomColorChange(e.target.value) } />
+                    </div>
                 </div>
-            </div>
+            ) }
 
             { /* Purchase Footer */ }
             <div className="flex items-center justify-between mt-auto pt-2"

src/components/furni-editor/FurniEditorView.tsx

@@ -1,12 +1,14 @@
-import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
+import { AddLinkEventTracker, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { useFurniEditor } from '../../hooks/furni-editor';
+import { FurniEditorCreateView } from './views/FurniEditorCreateView';
 import { FurniEditorEditView } from './views/FurniEditorEditView';
 import { FurniEditorSearchView } from './views/FurniEditorSearchView';
 
 const TAB_SEARCH = 0;
 const TAB_EDIT = 1;
+const TAB_CREATE = 2;
 
 export const FurniEditorView: FC<{}> = () =>
 {
@@ -16,8 +18,8 @@ export const FurniEditorView: FC<{}> = () =>
     const {
         items, total, page, loading, error, clearError,
         selectedItem, catalogItems, furniDataEntry,
-        interactions,
-        searchItems, loadDetail, loadBySpriteId, updateItem, deleteItem, loadInteractions
+        interactions, lastResult,
+        searchItems, loadDetail, loadBySpriteId, updateItem, deleteItem, createItem, loadInteractions
     } = useFurniEditor();
 
     useEffect(() =>
@@ -57,13 +59,14 @@ export const FurniEditorView: FC<{}> = () =>
 
     useEffect(() =>
     {
-        const handler = async (e: CustomEvent<{ spriteId: number }>) =>
+        const handler = (e: CustomEvent<{ spriteId: number }>) =>
         {
             const { spriteId } = e.detail;
 
-            const ok = await loadBySpriteId(spriteId);
+            if(!spriteId || spriteId <= 0) return;
 
-            if(ok) setActiveTab(TAB_EDIT);
+            loadBySpriteId(spriteId);
+            setActiveTab(TAB_EDIT);
         };
 
         window.addEventListener('furni-editor:open', handler as EventListener);
@@ -71,11 +74,10 @@ export const FurniEditorView: FC<{}> = () =>
         return () => window.removeEventListener('furni-editor:open', handler as EventListener);
     }, [ loadBySpriteId ]);
 
-    const handleSelect = useCallback(async (id: number) =>
+    const handleSelect = useCallback((id: number) =>
     {
-        const ok = await loadDetail(id);
-
-        if(ok) setActiveTab(TAB_EDIT);
+        loadDetail(id);
+        setActiveTab(TAB_EDIT);
     }, [ loadDetail ]);
 
     const handleBack = useCallback(() =>
@@ -88,10 +90,17 @@ export const FurniEditorView: FC<{}> = () =>
         setIsVisible(false);
     }, []);
 
+    const handleCreated = useCallback((id: number) =>
+    {
+        loadDetail(id);
+        setActiveTab(TAB_EDIT);
+    }, [ loadDetail ]);
+
+    if(!GetSessionDataManager()?.isModerator) return null;
     if(!isVisible) return null;
 
     return (
-        <NitroCardView uniqueKey="furni-editor" className="w-[620px] h-[520px]">
+        <NitroCardView uniqueKey="furni-editor" className="min-w-[550px] w-[680px] min-h-[400px] h-[600px]">
             <NitroCardHeaderView headerText="Furni Editor" onCloseClick={ handleClose } />
             <NitroCardTabsView>
                 <NitroCardTabsItemView isActive={ activeTab === TAB_SEARCH } onClick={ () => setActiveTab(TAB_SEARCH) }>
@@ -127,6 +136,7 @@ export const FurniEditorView: FC<{}> = () =>
                         furniDataEntry={ furniDataEntry }
                         interactions={ interactions }
                         loading={ loading }
+                        lastResult={ lastResult }
                         onUpdate={ updateItem }
                         onDelete={ deleteItem }
                         onBack={ handleBack }
@@ -134,6 +144,7 @@ export const FurniEditorView: FC<{}> = () =>
                     />
                 }
 
+
             </NitroCardContentView>
         </NitroCardView>
     );

src/components/furni-editor/views/FurniEditorCreateView.tsx

@@ -1,18 +1,23 @@
-import { FC, useCallback, useState } from 'react';
-import { Button, Column, Flex, Text } from '../../../common';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { FaPlus } from 'react-icons/fa';
+import { Column } from '../../../common';
 
 interface FurniEditorCreateViewProps
 {
     interactions: string[];
     loading: boolean;
-    onCreate: (fields: Record<string, unknown>) => Promise<number | null>;
+    lastResult: { success: boolean; message: string; id: number } | null;
+    onCreate: (fields: Record<string, unknown>) => void;
     onCreated: (id: number) => void;
 }
 
+const inputClass = 'text-[11px] border-2 border-card-grid-item-border rounded px-2 py-1 bg-white focus:outline-none focus:border-primary transition-colors w-full';
+const labelClass = 'text-[9px] text-[#666] uppercase font-bold mb-0.5 block';
+
 export const FurniEditorCreateView: FC<FurniEditorCreateViewProps> = props =>
 {
-    const { interactions, loading, onCreate, onCreated } = props;
-    const [ success, setSuccess ] = useState<number | null>(null);
+    const { interactions, loading, lastResult, onCreate, onCreated } = props;
+    const [ toast, setToast ] = useState<{ type: 'success' | 'error'; message: string; id?: number } | null>(null);
 
     const [ form, setForm ] = useState({
         itemName: '',
@@ -36,39 +41,50 @@ export const FurniEditorCreateView: FC<FurniEditorCreateViewProps> = props =>
         customparams: '',
     });
 
+    useEffect(() =>
+    {
+        if(!lastResult) return;
+
+        if(lastResult.success && lastResult.id > 0)
+        {
+            setToast({ type: 'success', message: `Item created with ID #${ lastResult.id }`, id: lastResult.id });
+            setTimeout(() => onCreated(lastResult.id), 1500);
+        }
+        else if(!lastResult.success)
+        {
+            setToast({ type: 'error', message: lastResult.message });
+        }
+
+        const timer = setTimeout(() => setToast(null), 3000);
+        return () => clearTimeout(timer);
+    }, [ lastResult ]);
+
     const setField = useCallback((key: string, value: unknown) =>
     {
         setForm(prev => ({ ...prev, [key]: value }));
-        setSuccess(null);
     }, []);
 
-    const handleCreate = useCallback(async () =>
+    const handleCreate = useCallback(() =>
     {
         if(!form.itemName || !form.publicName) return;
-
-        const id = await onCreate(form);
-
-        if(id)
-        {
-            setSuccess(id);
-            setTimeout(() => onCreated(id), 1000);
-        }
-    }, [ form, onCreate, onCreated ]);
-
-    const inputClass = 'form-control form-control-sm';
-    const labelClass = 'text-[11px] font-bold text-[#333] mb-0';
+        onCreate(form);
+    }, [ form, onCreate ]);
 
     return (
         <Column gap={ 1 } className="h-full overflow-auto">
-            { success &&
-                <div className="bg-[#d4edda] border border-[#c3e6cb] rounded p-2 text-[#155724] text-xs">
-                    Item created with ID #{ success }!
+            { /* Toast */ }
+            { toast &&
+                <div className={ `rounded px-3 py-1.5 text-[11px] font-bold text-white ${ toast.type === 'success' ? 'bg-[#28a745]' : 'bg-[#dc3545]' }` }>
+                    { toast.message }
                 </div>
             }
 
-            <div className="bg-white rounded border border-[#ccc] p-2">
-                <Text small bold variant="primary" className="mb-1 block">Basic Info</Text>
-                <div className="grid grid-cols-2 gap-2">
+            { /* Basic Info */ }
+            <div className="border-2 border-card-grid-item-border rounded overflow-hidden">
+                <div className="px-2.5 py-1.5 bg-[#f0f4f7]">
+                    <span className="text-[9px] text-primary uppercase font-bold tracking-wide">Basic Info</span>
+                </div>
+                <div className="p-2.5 bg-white grid grid-cols-2 gap-2">
                     <div>
                         <label className={ labelClass }>Item Name *</label>
                         <input className={ inputClass } value={ form.itemName } onChange={ e => setField('itemName', e.target.value) } placeholder="my_custom_furni" />
@@ -83,7 +99,7 @@ export const FurniEditorCreateView: FC<FurniEditorCreateViewProps> = props =>
                     </div>
                     <div>
                         <label className={ labelClass }>Type</label>
-                        <select className="form-select form-select-sm" value={ form.type } onChange={ e => setField('type', e.target.value) }>
+                        <select className={ inputClass } value={ form.type } onChange={ e => setField('type', e.target.value) }>
                             <option value="s">Floor (s)</option>
                             <option value="i">Wall (i)</option>
                         </select>
@@ -91,9 +107,12 @@ export const FurniEditorCreateView: FC<FurniEditorCreateViewProps> = props =>
                 </div>
             </div>
 
-            <div className="bg-white rounded border border-[#ccc] p-2">
-                <Text small bold variant="primary" className="mb-1 block">Dimensions</Text>
-                <div className="grid grid-cols-3 gap-2">
+            { /* Dimensions */ }
+            <div className="border-2 border-card-grid-item-border rounded overflow-hidden">
+                <div className="px-2.5 py-1.5 bg-[#f0f4f7]">
+                    <span className="text-[9px] text-primary uppercase font-bold tracking-wide">Dimensions</span>
+                </div>
+                <div className="p-2.5 bg-white grid grid-cols-3 gap-2">
                     <div>
                         <label className={ labelClass }>Width</label>
                         <input type="number" className={ inputClass } value={ form.width } onChange={ e => setField('width', Number(e.target.value)) } />
@@ -109,14 +128,17 @@ export const FurniEditorCreateView: FC<FurniEditorCreateViewProps> = props =>
                 </div>
             </div>
 
-            <div className="bg-white rounded border border-[#ccc] p-2">
-                <Text small bold variant="primary" className="mb-1 block">Permissions</Text>
-                <div className="grid grid-cols-3 gap-x-3 gap-y-1">
+            { /* Permissions */ }
+            <div className="border-2 border-card-grid-item-border rounded overflow-hidden">
+                <div className="px-2.5 py-1.5 bg-[#f0f4f7]">
+                    <span className="text-[9px] text-primary uppercase font-bold tracking-wide">Permissions</span>
+                </div>
+                <div className="p-2.5 bg-white grid grid-cols-3 gap-x-3 gap-y-1.5">
                     { [ 'allowStack', 'allowWalk', 'allowSit', 'allowLay', 'allowGift', 'allowTrade', 'allowRecycle', 'allowMarketplaceSell', 'allowInventoryStack' ].map(key => (
-                        <label key={ key } className="flex items-center gap-1 text-[11px] cursor-pointer">
+                        <label key={ key } className="flex items-center gap-1.5 text-[11px] cursor-pointer hover:text-primary transition-colors">
                             <input
                                 type="checkbox"
-                                className="form-check-input"
+                                className="accent-primary"
                                 checked={ (form as any)[key] }
                                 onChange={ e => setField(key, e.target.checked) }
                             />
@@ -126,34 +148,44 @@ export const FurniEditorCreateView: FC<FurniEditorCreateViewProps> = props =>
                 </div>
             </div>
 
-            <div className="bg-white rounded border border-[#ccc] p-2">
-                <Text small bold variant="primary" className="mb-1 block">Interaction</Text>
-                <div className="grid grid-cols-3 gap-2">
-                    <div className="col-span-2">
-                        <label className={ labelClass }>Type</label>
-                        <select className="form-select form-select-sm" value={ form.interactionType } onChange={ e => setField('interactionType', e.target.value) }>
-                            <option value="">none</option>
-                            { interactions.map(i => (
-                                <option key={ i } value={ i }>{ i }</option>
-                            )) }
-                        </select>
-                    </div>
-                    <div>
-                        <label className={ labelClass }>Modes</label>
-                        <input type="number" className={ inputClass } value={ form.interactionModesCount } onChange={ e => setField('interactionModesCount', Number(e.target.value)) } />
-                    </div>
+            { /* Interaction */ }
+            <div className="border-2 border-card-grid-item-border rounded overflow-hidden">
+                <div className="px-2.5 py-1.5 bg-[#f0f4f7]">
+                    <span className="text-[9px] text-primary uppercase font-bold tracking-wide">Interaction</span>
                 </div>
-                <div className="mt-1">
-                    <label className={ labelClass }>Custom Params</label>
-                    <input className={ inputClass } value={ form.customparams } onChange={ e => setField('customparams', e.target.value) } />
+                <div className="p-2.5 bg-white">
+                    <div className="grid grid-cols-3 gap-2">
+                        <div className="col-span-2">
+                            <label className={ labelClass }>Type</label>
+                            <select className={ inputClass } value={ form.interactionType } onChange={ e => setField('interactionType', e.target.value) }>
+                                <option value="">none</option>
+                                { interactions.map(i => (
+                                    <option key={ i } value={ i }>{ i }</option>
+                                )) }
+                            </select>
+                        </div>
+                        <div>
+                            <label className={ labelClass }>Modes</label>
+                            <input type="number" className={ inputClass } value={ form.interactionModesCount } onChange={ e => setField('interactionModesCount', Number(e.target.value)) } />
+                        </div>
+                    </div>
+                    <div className="mt-2">
+                        <label className={ labelClass }>Custom Params</label>
+                        <input className={ inputClass } value={ form.customparams } onChange={ e => setField('customparams', e.target.value) } />
+                    </div>
                 </div>
             </div>
 
-            <Flex className="mt-1">
-                <Button variant="success" disabled={ loading || !form.itemName || !form.publicName } onClick={ handleCreate }>
-                    { loading ? 'Creating...' : 'Create Item' }
-                </Button>
-            </Flex>
+            { /* Create Button */ }
+            <div className="pt-1">
+                <button
+                    className="flex items-center gap-1.5 px-3 py-1.5 rounded text-[11px] font-bold bg-[#28a745] text-white hover:bg-[#218838] transition-colors cursor-pointer disabled:opacity-50"
+                    disabled={ loading || !form.itemName || !form.publicName }
+                    onClick={ handleCreate }
+                >
+                    <FaPlus className="text-[9px]" /> { loading ? 'Creating...' : 'Create Item' }
+                </button>
+            </div>
         </Column>
     );
 };

src/components/furni-editor/views/FurniEditorEditView.tsx

@@ -1,5 +1,7 @@
 import { FC, useCallback, useEffect, useState } from 'react';
-import { Button, Column, Flex, Text } from '../../../common';
+import { FaSave, FaSync, FaTrash, FaArrowLeft } from 'react-icons/fa';
+import { Column } from '../../../common';
+import { LayoutFurniIconImageView } from '../../../common/layout/LayoutFurniIconImageView';
 import { CatalogRef, FurniDetail } from '../../../hooks/furni-editor';
 
 interface FurniEditorEditViewProps
@@ -9,20 +11,24 @@ interface FurniEditorEditViewProps
     furniDataEntry: Record<string, unknown> | null;
     interactions: string[];
     loading: boolean;
-    onUpdate: (id: number, fields: Record<string, unknown>) => Promise<boolean>;
-    onDelete: (id: number) => Promise<boolean>;
+    lastResult: { success: boolean; message: string; id: number } | null;
+    onUpdate: (id: number, fields: Record<string, unknown>) => void;
+    onDelete: (id: number) => void;
     onBack: () => void;
     onRefresh: (id: number) => void;
 }
 
+const ic = 'text-[13px] border border-[#c5cdd6] rounded px-2 py-1 bg-white focus:outline-none focus:border-[#1e7295] focus:shadow-[0_0_0_1px_rgba(30,114,149,0.15)] transition-all w-full';
+const ro = 'text-[13px] border border-[#d5dbe0] rounded px-2 py-1 bg-[#f0f2f4] text-[#777] w-full cursor-not-allowed';
+const lb = 'text-[11px] text-[#1e7295] uppercase font-bold tracking-wider leading-none';
+const sectionTitle = 'text-[12px] text-[#1e7295] uppercase font-bold tracking-wider';
+
 export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
 {
-    const { item, catalogItems, furniDataEntry, interactions, loading, onUpdate, onDelete, onBack, onRefresh } = props;
+    const { item, catalogItems, furniDataEntry, interactions, loading, lastResult, onUpdate, onDelete, onBack, onRefresh } = props;
 
     const [ form, setForm ] = useState({
-        itemName: '',
         publicName: '',
-        spriteId: 0,
         type: 's',
         width: 1,
         length: 1,
@@ -42,15 +48,14 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
     });
 
     const [ confirmDelete, setConfirmDelete ] = useState(false);
+    const [ toast, setToast ] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
 
     useEffect(() =>
     {
         if(!item) return;
 
         setForm({
-            itemName: item.itemName || '',
             publicName: item.publicName || '',
-            spriteId: item.spriteId || 0,
             type: item.type || 's',
             width: item.width || 1,
             length: item.length || 1,
@@ -72,105 +77,119 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
         setConfirmDelete(false);
     }, [ item ]);
 
+    useEffect(() =>
+    {
+        if(!lastResult) return;
+
+        setToast({ type: lastResult.success ? 'success' : 'error', message: lastResult.message });
+        if(lastResult.success && lastResult.id > 0) onRefresh(lastResult.id);
+
+        const timer = setTimeout(() => setToast(null), 3000);
+        return () => clearTimeout(timer);
+    }, [ lastResult ]);
+
     const setField = useCallback((key: string, value: unknown) =>
     {
         setForm(prev => ({ ...prev, [key]: value }));
     }, []);
 
-    const handleSave = useCallback(async () =>
+    const handleSave = useCallback(() =>
     {
-        const ok = await onUpdate(item.id, form);
+        onUpdate(item.id, form);
+    }, [ item, form, onUpdate ]);
 
-        if(ok) onRefresh(item.id);
-    }, [ item, form, onUpdate, onRefresh ]);
-
-    const handleDelete = useCallback(async () =>
+    const handleDelete = useCallback(() =>
     {
         if(!confirmDelete) return setConfirmDelete(true);
-
-        const ok = await onDelete(item.id);
-
-        if(ok) onBack();
-    }, [ confirmDelete, item, onDelete, onBack ]);
-
-    const inputClass = 'form-control form-control-sm';
-    const labelClass = 'text-[11px] font-bold text-[#333] mb-0';
+        onDelete(item.id);
+    }, [ confirmDelete, item, onDelete ]);
 
     return (
-        <Column gap={ 1 } className="h-full overflow-auto">
-            <Flex gap={ 1 } alignItems="center" className="mb-1">
-                <Button variant="secondary" onClick={ onBack }>Back</Button>
-                <Flex alignItems="center" gap={ 1 } className="bg-[#e9ecef] px-2 py-0.5 rounded">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-3 h-3 text-[#1e7295]">
-                        <path fillRule="evenodd" d="M4.93 1.31a41.401 41.401 0 0 1 10.14 0C16.194 1.45 17 2.414 17 3.517V18.25a.75.75 0 0 1-1.075.676l-2.8-1.344-2.8 1.344a.75.75 0 0 1-.65 0l-2.8-1.344-2.8 1.344A.75.75 0 0 1 3 18.25V3.517c0-1.103.806-2.068 1.93-2.207Z" clipRule="evenodd" />
-                    </svg>
-                    <Text bold className="text-[12px]">{ item.id }</Text>
-                    <span className="text-[#999] mx-0.5">|</span>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-3 h-3 text-[#1e7295]">
-                        <path d="M12.586 2.586a2 2 0 1 1 2.828 2.828l-3 3a2 2 0 0 1-2.828 0 1 1 0 0 0-1.414 1.414 4 4 0 0 0 5.656 0l3-3a4 4 0 0 0-5.656-5.656l-1.5 1.5a1 1 0 1 0 1.414 1.414l1.5-1.5ZM7.414 17.414a2 2 0 1 1-2.828-2.828l3-3a2 2 0 0 1 2.828 0 1 1 0 0 0 1.414-1.414 4 4 0 0 0-5.656 0l-3 3a4 4 0 0 0 5.656 5.656l1.5-1.5a1 1 0 1 0-1.414-1.414l-1.5 1.5Z" />
-                    </svg>
-                    <Text bold className="text-[12px]">{ item.spriteId }</Text>
-                </Flex>
-                <Text small variant="gray">({ item.usageCount } in use)</Text>
-            </Flex>
+        <Column gap={ 0 } className="h-full overflow-auto">
+            { toast &&
+                <div className={ `rounded px-2 py-1 text-[12px] font-bold text-white mb-1.5 shadow-sm ${ toast.type === 'success' ? 'bg-[#28a745]' : 'bg-[#dc3545]' }` }>
+                    { toast.message }
+                </div>
+            }
+
+            { /* Header */ }
+            <div className="flex items-center gap-3 mb-2 pb-2 border-b-2 border-[#c5cdd6]">
+                <div className="w-[46px] h-[46px] flex items-center justify-center bg-white rounded-md border border-[#c5cdd6] flex-shrink-0 shadow-sm overflow-hidden">
+                    <LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } style={ { transform: 'scale(1.2)' } } />
+                </div>
+                <div className="flex-1 min-w-0">
+                    <div className="text-[14px] font-bold text-[#2d3748] truncate leading-tight">{ item.publicName }</div>
+                    <div className="flex items-center gap-1.5 text-[11px] mt-0.5">
+                        <span className="text-[#1e7295] font-bold cursor-pointer hover:underline" title="Click to copy ID" onClick={ () => { navigator.clipboard.writeText(String(item.id)); setToast({ type: 'success', message: `ID ${item.id} copied!` }); } }>#{item.id}</span>
+                        <span className="text-[#d0d5db]">|</span>
+                        <span className="text-[#4a5568]">sprite:<b>{ item.spriteId }</b></span>
+                        <span className="text-[#d0d5db]">|</span>
+                        <span className="truncate max-w-[140px] text-[#4a5568]">{ item.itemName }</span>
+                        <span className={ `px-2 py-[2px] rounded text-white text-[11px] font-bold ${ item.type === 's' ? 'bg-[#1e7295]' : 'bg-[#718096]' }` }>
+                            { item.type === 's' ? 'FLOOR' : 'WALL' }
+                        </span>
+                        { item.usageCount > 0 && <span className="text-[#e53e3e] font-bold">{ item.usageCount } in use</span> }
+                    </div>
+                </div>
+                <div className="flex gap-1 flex-shrink-0">
+                    <button className="p-1.5 rounded-md bg-[#edf2f7] hover:bg-[#e2e8f0] cursor-pointer transition-colors" onClick={ () => onRefresh(item.id) } title="Refresh">
+                        <FaSync className="text-[9px] text-[#718096]" />
+                    </button>
+                    <button className="flex items-center gap-1 px-2 py-1 rounded-md text-[9px] font-bold bg-[#edf2f7] hover:bg-[#e2e8f0] text-[#4a5568] cursor-pointer transition-colors" onClick={ onBack }>
+                        <FaArrowLeft className="text-[7px]" /> Back
+                    </button>
+                </div>
+            </div>
 
             { /* Basic Info */ }
-            <div className="bg-white rounded border border-[#ccc] p-2">
-                <Text small bold variant="primary" className="mb-1 block">Basic Info</Text>
-                <div className="grid grid-cols-2 gap-2">
-                    <div>
-                        <label className={ labelClass }>Item Name</label>
-                        <input className={ inputClass } value={ form.itemName } onChange={ e => setField('itemName', e.target.value) } />
-                    </div>
-                    <div>
-                        <label className={ labelClass }>Public Name</label>
-                        <input className={ inputClass } value={ form.publicName } onChange={ e => setField('publicName', e.target.value) } />
-                    </div>
-                    <div>
-                        <label className={ labelClass }>Sprite ID</label>
-                        <input type="number" className={ inputClass } value={ form.spriteId } onChange={ e => setField('spriteId', Number(e.target.value)) } />
-                    </div>
-                    <div>
-                        <label className={ labelClass }>Type</label>
-                        <select className="form-select form-select-sm" value={ form.type } onChange={ e => setField('type', e.target.value) }>
-                            <option value="s">Floor (s)</option>
-                            <option value="i">Wall (i)</option>
-                        </select>
-                    </div>
+            <div className="grid grid-cols-4 gap-x-2 gap-y-1.5 pb-2 border-b-2 border-[#c5cdd6]">
+                <div>
+                    <label className={ lb }>Item Name</label>
+                    <input className={ ro } value={ item.itemName } readOnly />
+                </div>
+                <div>
+                    <label className={ lb }>Public Name</label>
+                    <input className={ ic } value={ form.publicName } onChange={ e => setField('publicName', e.target.value) } />
+                </div>
+                <div>
+                    <label className={ lb }>Sprite ID</label>
+                    <input className={ ro } value={ item.spriteId } readOnly />
+                </div>
+                <div>
+                    <label className={ lb }>Type</label>
+                    <select className={ ic } value={ form.type } onChange={ e => setField('type', e.target.value) }>
+                        <option value="s">Floor (s)</option>
+                        <option value="i">Wall (i)</option>
+                    </select>
                 </div>
             </div>
 
             { /* Dimensions */ }
-            <div className="bg-white rounded border border-[#ccc] p-2">
-                <Text small bold variant="primary" className="mb-1 block">Dimensions</Text>
-                <div className="grid grid-cols-3 gap-2">
+            <div className="pt-2 pb-2 border-b-2 border-[#c5cdd6]">
+                <div className={ sectionTitle + ' mb-1' }>Dimensions</div>
+                <div className="grid grid-cols-3 gap-x-2">
                     <div>
-                        <label className={ labelClass }>Width</label>
-                        <input type="number" className={ inputClass } value={ form.width } onChange={ e => setField('width', Number(e.target.value)) } />
+                        <label className={ lb }>Width</label>
+                        <input type="number" className={ ic } value={ form.width } onChange={ e => setField('width', Number(e.target.value)) } />
                     </div>
                     <div>
-                        <label className={ labelClass }>Length</label>
-                        <input type="number" className={ inputClass } value={ form.length } onChange={ e => setField('length', Number(e.target.value)) } />
+                        <label className={ lb }>Length</label>
+                        <input type="number" className={ ic } value={ form.length } onChange={ e => setField('length', Number(e.target.value)) } />
                     </div>
                     <div>
-                        <label className={ labelClass }>Stack Height</label>
-                        <input type="number" step="0.01" className={ inputClass } value={ form.stackHeight } onChange={ e => setField('stackHeight', Number(e.target.value)) } />
+                        <label className={ lb }>Stack Height</label>
+                        <input type="number" step="0.01" className={ ic } value={ form.stackHeight } onChange={ e => setField('stackHeight', Number(e.target.value)) } />
                     </div>
                 </div>
             </div>
 
             { /* Permissions */ }
-            <div className="bg-white rounded border border-[#ccc] p-2">
-                <Text small bold variant="primary" className="mb-1 block">Permissions</Text>
-                <div className="grid grid-cols-3 gap-x-3 gap-y-1">
+            <div className="pt-2 pb-2 border-b-2 border-[#c5cdd6]">
+                <div className={ sectionTitle + ' mb-1' }>Permissions</div>
+                <div className="grid grid-cols-3 gap-x-2 gap-y-[3px]">
                     { [ 'allowStack', 'allowWalk', 'allowSit', 'allowLay', 'allowGift', 'allowTrade', 'allowRecycle', 'allowMarketplaceSell', 'allowInventoryStack' ].map(key => (
-                        <label key={ key } className="flex items-center gap-1 text-[11px] cursor-pointer">
-                            <input
-                                type="checkbox"
-                                className="form-check-input"
-                                checked={ (form as any)[key] }
-                                onChange={ e => setField(key, e.target.checked) }
-                            />
+                        <label key={ key } className="flex items-center gap-1 text-[12px] text-[#4a5568] cursor-pointer hover:text-[#1e7295] transition-colors">
+                            <input type="checkbox" className="accent-[#1e7295] w-3 h-3" checked={ (form as any)[key] } onChange={ e => setField(key, e.target.checked) } />
                             { key.replace('allow', '') }
                         </label>
                     )) }
@@ -178,72 +197,44 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
             </div>
 
             { /* Interaction */ }
-            <div className="bg-white rounded border border-[#ccc] p-2">
-                <Text small bold variant="primary" className="mb-1 block">Interaction</Text>
-                <div className="grid grid-cols-3 gap-2">
+            <div className="pt-2">
+                <div className={ sectionTitle + ' mb-1' }>Interaction</div>
+                <div className="grid grid-cols-4 gap-x-2">
                     <div className="col-span-2">
-                        <label className={ labelClass }>Type</label>
-                        <select className="form-select form-select-sm" value={ form.interactionType } onChange={ e => setField('interactionType', e.target.value) }>
+                        <label className={ lb }>Type</label>
+                        <select className={ ic } value={ form.interactionType } onChange={ e => setField('interactionType', e.target.value) }>
                             <option value="">none</option>
-                            { interactions.map(i => (
-                                <option key={ i } value={ i }>{ i }</option>
-                            )) }
+                            { interactions.map(i => <option key={ i } value={ i }>{ i }</option>) }
                         </select>
                     </div>
                     <div>
-                        <label className={ labelClass }>Modes</label>
-                        <input type="number" className={ inputClass } value={ form.interactionModesCount } onChange={ e => setField('interactionModesCount', Number(e.target.value)) } />
+                        <label className={ lb }>Modes</label>
+                        <input type="number" className={ ic } value={ form.interactionModesCount } onChange={ e => setField('interactionModesCount', Number(e.target.value)) } />
+                    </div>
+                    <div>
+                        <label className={ lb }>Custom Params</label>
+                        <input className={ ic } value={ form.customparams } onChange={ e => setField('customparams', e.target.value) } />
                     </div>
-                </div>
-                <div className="mt-1">
-                    <label className={ labelClass }>Custom Params</label>
-                    <input className={ inputClass } value={ form.customparams } onChange={ e => setField('customparams', e.target.value) } />
                 </div>
             </div>
 
-            { /* Catalog References */ }
-            { catalogItems.length > 0 &&
-                <div className="bg-white rounded border border-[#ccc] p-2">
-                    <Text small bold variant="primary" className="mb-1 block">Catalog ({ catalogItems.length })</Text>
-                    <div className="text-[10px] space-y-0.5">
-                        { catalogItems.map(ci => (
-                            <div key={ ci.id } className="flex justify-between bg-[#f5f5f5] px-2 py-0.5 rounded">
-                                <span>{ ci.catalogName } (page: { ci.pageName })</span>
-                                <span>{ ci.costCredits }c + { ci.costPoints }p</span>
-                            </div>
-                        )) }
-                    </div>
-                </div>
-            }
-
-            { /* FurniData.json Entry */ }
-            { furniDataEntry &&
-                <div className="bg-white rounded border border-[#ccc] p-2">
-                    <Text small bold variant="primary" className="mb-1 block">FurniData.json</Text>
-                    <div className="grid grid-cols-2 gap-x-3 gap-y-0.5 text-[10px]">
-                        { Object.entries(furniDataEntry).map(([ key, value ]) => (
-                            <div key={ key } className="flex justify-between bg-[#f5f5f5] px-2 py-0.5 rounded">
-                                <span className="font-bold text-[#555]">{ key }</span>
-                                <span className="text-[#333] truncate ml-1 max-w-[120px] text-right">{ String(value ?? '') }</span>
-                            </div>
-                        )) }
-                    </div>
-                </div>
-            }
-
             { /* Actions */ }
-            <Flex gap={ 1 } justifyContent="between" className="mt-1">
-                <Button variant="success" disabled={ loading } onClick={ handleSave }>
-                    { loading ? 'Saving...' : 'Save' }
-                </Button>
-                <Button
-                    variant={ confirmDelete ? 'danger' : 'warning' }
+            <div className="flex justify-between items-center mt-auto pt-2 border-t border-[#e2e8f0]">
+                <button
+                    className="flex items-center gap-1 px-3 py-1.5 rounded-md text-[12px] font-bold bg-[#28a745] text-white hover:bg-[#218838] shadow-sm transition-all cursor-pointer disabled:opacity-50"
+                    disabled={ loading }
+                    onClick={ handleSave }
+                >
+                    <FaSave className="text-[8px]" /> { loading ? 'Saving...' : 'Save' }
+                </button>
+                <button
+                    className={ `flex items-center gap-1 px-3 py-1.5 rounded-md text-[12px] font-bold text-white shadow-sm transition-all cursor-pointer disabled:opacity-50 ${ confirmDelete ? 'bg-[#dc3545] hover:bg-[#c82333]' : 'bg-[#e8993e] hover:bg-[#d98a30]' }` }
                     disabled={ loading || item.usageCount > 0 }
                     onClick={ handleDelete }
                 >
-                    { confirmDelete ? 'Confirm Delete' : 'Delete' }
-                </Button>
-            </Flex>
+                    <FaTrash className="text-[8px]" /> { confirmDelete ? 'Confirm' : 'Delete' }
+                </button>
+            </div>
         </Column>
     );
 };

src/components/furni-editor/views/FurniEditorSearchView.tsx

@@ -1,5 +1,7 @@
 import { FC, useCallback, useEffect, useState } from 'react';
-import { Button, Column, Flex, Text } from '../../../common';
+import { FaSearch } from 'react-icons/fa';
+import { Column, Text } from '../../../common';
+import { LayoutFurniIconImageView } from '../../../common/layout/LayoutFurniIconImageView';
 import { FurniItem } from '../../../hooks/furni-editor';
 
 interface FurniEditorSearchViewProps
@@ -12,6 +14,8 @@ interface FurniEditorSearchViewProps
     onSelect: (id: number) => void;
 }
 
+const inputClass = 'text-[14px] border border-[#c5cdd6] rounded px-2 py-1.5 bg-white focus:outline-none focus:border-[#1e7295] transition-colors w-full';
+
 export const FurniEditorSearchView: FC<FurniEditorSearchViewProps> = props =>
 {
     const { items, total, page, loading, onSearch, onSelect } = props;
@@ -37,97 +41,122 @@ export const FurniEditorSearchView: FC<FurniEditorSearchViewProps> = props =>
 
     return (
         <Column gap={ 1 } className="h-full">
-            <Flex gap={ 1 } alignItems="end">
-                <Column gap={ 0 } className="flex-1">
-                    <Text small bold>Search</Text>
+            { /* Search Bar */ }
+            <div className="flex gap-2 items-end">
+                <div className="flex-1">
+                    <label className="text-[12px] text-[#1e7295] uppercase font-bold mb-0.5 block">Search</label>
                     <input
                         type="text"
-                        className="form-control form-control-sm"
+                        className={ inputClass }
                         placeholder="ID, name or sprite ID..."
                         value={ query }
                         onChange={ e => setQuery(e.target.value) }
                         onKeyDown={ handleKeyDown }
                     />
-                </Column>
-                <Column gap={ 0 } className="w-[80px]">
-                    <Text small bold>Type</Text>
-                    <select
-                        className="form-select form-select-sm"
-                        value={ typeFilter }
-                        onChange={ e => setTypeFilter(e.target.value) }
-                    >
+                </div>
+                <div className="w-[100px]">
+                    <label className="text-[12px] text-[#1e7295] uppercase font-bold mb-0.5 block">Type</label>
+                    <select className={ inputClass } value={ typeFilter } onChange={ e => setTypeFilter(e.target.value) }>
                         <option value="">All</option>
-                        <option value="s">Floor (s)</option>
-                        <option value="i">Wall (i)</option>
+                        <option value="s">Floor</option>
+                        <option value="i">Wall</option>
                     </select>
-                </Column>
-                <Button variant="primary" disabled={ loading } onClick={ handleSearch }>
-                    { loading ? '...' : 'Search' }
-                </Button>
-            </Flex>
+                </div>
+                <button
+                    className="flex items-center gap-1.5 px-4 py-1.5 rounded text-[13px] font-bold bg-[#1e7295] text-white hover:bg-[#185d79] transition-colors cursor-pointer disabled:opacity-50"
+                    disabled={ loading }
+                    onClick={ handleSearch }
+                >
+                    <FaSearch className="text-[11px]" /> { loading ? '...' : 'Search' }
+                </button>
+            </div>
 
-            <Column gap={ 0 } className="flex-1 overflow-auto border border-[#ccc] rounded bg-white">
-                <table className="w-full text-xs">
-                    <thead>
-                        <tr className="bg-[#e8e8e8] sticky top-0">
-                            <th className="px-2 py-1 text-left">ID</th>
-                            <th className="px-2 py-1 text-left">Sprite</th>
-                            <th className="px-2 py-1 text-left">Name</th>
-                            <th className="px-2 py-1 text-left">Public Name</th>
-                            <th className="px-2 py-1 text-center">Type</th>
-                            <th className="px-2 py-1 text-left">Interaction</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        { items.map(item => (
-                            <tr
-                                key={ item.id }
-                                className="cursor-pointer hover:bg-[#d4edfa] border-b border-[#eee] transition-colors"
-                                onClick={ () => onSelect(item.id) }
-                            >
-                                <td className="px-2 py-1 font-mono">{ item.id }</td>
-                                <td className="px-2 py-1 font-mono">{ item.spriteId }</td>
-                                <td className="px-2 py-1 truncate max-w-[120px]">{ item.itemName }</td>
-                                <td className="px-2 py-1 truncate max-w-[120px]">{ item.publicName }</td>
-                                <td className="px-2 py-1 text-center">
-                                    <span className={ `px-1 rounded text-white text-[10px] ${ item.type === 's' ? 'bg-[#1e7295]' : 'bg-[#6b7280]' }` }>
-                                        { item.type === 's' ? 'Floor' : 'Wall' }
-                                    </span>
-                                </td>
-                                <td className="px-2 py-1 text-[10px]">{ item.interactionType || '-' }</td>
-                            </tr>
-                        )) }
-                        { items.length === 0 && !loading &&
-                            <tr>
-                                <td colSpan={ 6 } className="px-2 py-4 text-center text-[#999]">No items found</td>
-                            </tr>
-                        }
-                    </tbody>
-                </table>
-            </Column>
+            { /* Results counter */ }
+            { total > 0 &&
+                <div className="text-[13px] text-[#4a5568]">
+                    <b className="text-[#1e7295]">{ total }</b> items found { totalPages > 1 && <span>- Page <b>{ page }</b>/{ totalPages }</span> }
+                </div>
+            }
 
+            { /* Results Table */ }
+            <div className="flex-1 overflow-auto border border-[#c5cdd6] rounded bg-white">
+                { loading &&
+                    <div className="flex items-center justify-center py-8">
+                        <div className="text-[14px] text-[#4a5568] animate-pulse">Loading...</div>
+                    </div>
+                }
+
+                { !loading && items.length === 0 &&
+                    <div className="flex items-center justify-center py-8 text-[14px] text-[#4a5568]">
+                        No items found
+                    </div>
+                }
+
+                { !loading && items.length > 0 &&
+                    <table className="w-full text-[14px]">
+                        <thead>
+                            <tr className="bg-[#f0f4f7] sticky top-0 text-[12px] text-[#1e7295] uppercase font-bold">
+                                <th className="px-2 py-2 text-center w-[44px]"></th>
+                                <th className="px-2 py-2 text-left w-[55px]">ID</th>
+                                <th className="px-2 py-2 text-left w-[60px]">Sprite</th>
+                                <th className="px-2 py-2 text-left">Name</th>
+                                <th className="px-2 py-2 text-left">Public Name</th>
+                                <th className="px-2 py-2 text-center w-[60px]">Type</th>
+                                <th className="px-2 py-2 text-left">Interaction</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            { items.map(item => (
+                                <tr
+                                    key={ item.id }
+                                    className="cursor-pointer hover:bg-[#e8f4fb] border-b border-[#f0f0f0] transition-colors"
+                                    onClick={ () => onSelect(item.id) }
+                                >
+                                    <td className="px-2 py-1 text-center">
+                                        <div className="w-[34px] h-[34px] flex items-center justify-center mx-auto">
+                                            <LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } />
+                                        </div>
+                                    </td>
+                                    <td className="px-2 py-1 font-mono text-[14px] text-[#1e7295] font-bold">{ item.id }</td>
+                                    <td className="px-2 py-1 font-mono text-[14px] text-[#4a5568]">{ item.spriteId }</td>
+                                    <td className="px-2 py-1 text-[14px] text-[#2d3748] truncate max-w-[130px]">{ item.itemName }</td>
+                                    <td className="px-2 py-1 text-[14px] text-[#2d3748] truncate max-w-[130px]">{ item.publicName }</td>
+                                    <td className="px-2 py-1 text-center">
+                                        <span className={ `px-2 py-0.5 rounded text-white text-[11px] font-bold ${ item.type === 's' ? 'bg-[#1e7295]' : 'bg-[#718096]' }` }>
+                                            { item.type === 's' ? 'Floor' : 'Wall' }
+                                        </span>
+                                    </td>
+                                    <td className="px-2 py-1 text-[14px] text-[#4a5568]">{ item.interactionType || '-' }</td>
+                                </tr>
+                            )) }
+                        </tbody>
+                    </table>
+                }
+            </div>
+
+            { /* Pagination */ }
             { totalPages > 1 &&
-                <Flex gap={ 1 } justifyContent="between" alignItems="center">
-                    <Text small variant="gray">
-                        { total } items - Page { page }/{ totalPages }
-                    </Text>
-                    <Flex gap={ 1 }>
-                        <Button
-                            variant="secondary"
+                <div className="flex justify-between items-center">
+                    <div className="text-[13px] text-[#4a5568]">
+                        Page <b>{ page }</b> of <b>{ totalPages }</b>
+                    </div>
+                    <div className="flex gap-1.5">
+                        <button
+                            className="px-3 py-1.5 rounded text-[13px] font-bold bg-[#edf2f7] hover:bg-[#e2e8f0] text-[#4a5568] transition-colors cursor-pointer disabled:opacity-40"
                             disabled={ page <= 1 }
                             onClick={ () => onSearch(query, typeFilter, page - 1) }
                         >
                             Prev
-                        </Button>
-                        <Button
-                            variant="secondary"
+                        </button>
+                        <button
+                            className="px-3 py-1.5 rounded text-[13px] font-bold bg-[#edf2f7] hover:bg-[#e2e8f0] text-[#4a5568] transition-colors cursor-pointer disabled:opacity-40"
                             disabled={ page >= totalPages }
                             onClick={ () => onSearch(query, typeFilter, page + 1) }
                         >
                             Next
-                        </Button>
-                    </Flex>
-                </Flex>
+                        </button>
+                    </div>
+                </div>
             }
         </Column>
     );

src/components/inventory/views/prefix/InventoryPrefixView.tsx

@@ -1,32 +1,8 @@
 import { FC, useEffect, useState } from 'react';
 import { FaTrashAlt } from 'react-icons/fa';
-import { IPrefixItem, LocalizeText, parsePrefixColors, getPrefixEffectStyle, PREFIX_EFFECT_KEYFRAMES } from '../../../../api';
+import { IPrefixItem, LocalizeText } from '../../../../api';
 import { useInventoryPrefixes, useNotification } from '../../../../hooks';
-import { NitroButton } from '../../../../layout';
-
-const PrefixPreview: FC<{ text: string; color: string; icon: string; effect?: string; className?: string; textSize?: string }> = ({ text, color, icon, effect = '', className = '', textSize = 'text-sm' }) =>
-{
-    const colors = parsePrefixColors(text, color);
-    const hasMultiColor = colors.length > 1 && new Set(colors).size > 1;
-    const fxStyle = getPrefixEffectStyle(effect, colors[0] || '#FFFFFF');
-
-    return (
-        <span className={ `font-bold ${ textSize } ${ className }` } style={ fxStyle }>
-            { effect === 'pulse' && <style>{ PREFIX_EFFECT_KEYFRAMES }</style> }
-            { icon && <span className="mr-0.5">{ icon }</span> }
-            <span style={ hasMultiColor ? fxStyle : { ...fxStyle, color: colors[0] || '#FFFFFF' } }>
-                {'{'}
-                { hasMultiColor
-                    ? [ ...text ].map((char, i) => (
-                        <span key={ i } style={ { color: colors[i] || colors[colors.length - 1], ...getPrefixEffectStyle(effect, colors[i]) } }>{ char }</span>
-                    ))
-                    : text
-                }
-                {'}'}
-            </span>
-        </span>
-    );
-};
+import { NitroButton, PrefixPreview } from '../../../../layout';
 
 const PrefixItemView: FC<{
     prefix: IPrefixItem;

src/components/room/widgets/chat/ChatWidgetMessageView.tsx

@@ -1,7 +1,8 @@
 import { GetRoomEngine, RoomChatSettings, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useRef, useState } from 'react';
-import { ChatBubbleMessage, parsePrefixColors, getPrefixEffectStyle, PREFIX_EFFECT_KEYFRAMES } from '../../../../api';
+import { ChatBubbleMessage } from '../../../../api';
 import { useOnClickChat } from '../../../../hooks';
+import { PrefixPreview } from '../../../../layout';
 
 interface ChatWidgetMessageViewProps
 {
@@ -90,27 +91,8 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = ({
                     ) }
                 </div>
                 <div className="chat-content py-[5px] px-[6px] ml-[27px] leading-none min-h-[25px]">
-                    { chat.prefixEffect === 'pulse' && <style>{ PREFIX_EFFECT_KEYFRAMES }</style> }
-                    { chat.prefixText && (() => {
-                        const colors = parsePrefixColors(chat.prefixText, chat.prefixColor);
-                        const hasMultiColor = colors.length > 1 && new Set(colors).size > 1;
-                        const fxStyle = getPrefixEffectStyle(chat.prefixEffect, colors[0] || '#FFFFFF');
-                        return (
-                            <span className="prefix font-bold mr-1" style={ fxStyle }>
-                                { chat.prefixIcon && <span className="mr-0.5 text-[13px]">{ chat.prefixIcon }</span> }
-                                <span style={ hasMultiColor ? fxStyle : { ...fxStyle, color: colors[0] || '#FFFFFF' } }>
-                                    {'{'}
-                                    { hasMultiColor
-                                        ? [ ...chat.prefixText ].map((char, i) => (
-                                            <span key={ i } style={ { color: colors[i] || colors[colors.length - 1], ...getPrefixEffectStyle(chat.prefixEffect, colors[i]) } }>{ char }</span>
-                                        ))
-                                        : chat.prefixText
-                                    }
-                                    {'}'}
-                                </span>
-                            </span>
-                        );
-                    })() }
+                    { chat.prefixText &&
+                        <PrefixPreview className="mr-1" color={ chat.prefixColor } effect={ chat.prefixEffect } icon={ chat.prefixIcon } text={ chat.prefixText } textSize="text-[inherit]" /> }
                     <b className="username" dangerouslySetInnerHTML={ { __html: `${ chat.username }: ` } } />
                     <span className={ `message${ chat.type === 1 ? ' italic text-[#595959]' : '' }` } dangerouslySetInnerHTML={ { __html: `${ chat.formattedText }` } } onClick={ onClickChat } />
                 </div>

src/css/index.css

@@ -78,6 +78,27 @@ body {
 }
 
 @layer components {
+    @keyframes prefix-pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+    }
+
+    @keyframes prefix-rainbow {
+        0% { filter: hue-rotate(0deg); }
+        100% { filter: hue-rotate(360deg); }
+    }
+
+    @keyframes prefix-shake {
+        0%, 100% { transform: translateX(0); }
+        25% { transform: translateX(-1px) rotate(-1deg); }
+        75% { transform: translateX(1px) rotate(1deg); }
+    }
+
+    @keyframes prefix-wave {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-3px); }
+    }
+
     @keyframes blink {
 
         0%,

src/hooks/furni-editor/useFurniEditor.ts

@@ -1,4 +1,7 @@
+import { FurniEditorBySpriteComposer, FurniEditorCreateComposer, FurniEditorDeleteComposer, FurniEditorDetailComposer, FurniEditorDetailEvent as FurniEditorDetailMsgEvent, FurniEditorInteractionsComposer, FurniEditorInteractionsEvent as FurniEditorInteractionsMsgEvent, FurniEditorResultEvent as FurniEditorResultMsgEvent, FurniEditorSearchComposer, FurniEditorSearchEvent as FurniEditorSearchMsgEvent, FurniEditorUpdateComposer } from '@nitrots/nitro-renderer';
 import { useCallback, useState } from 'react';
+import { SendMessageComposer } from '../../api';
+import { useMessageEvent } from '../events';
 
 export interface FurniItem
 {
@@ -46,18 +49,6 @@ export interface CatalogRef
     pageName: string;
 }
 
-const API_BASE = '/api/admin/furni-editor';
-
-async function apiFetch<T>(url: string, options?: RequestInit): Promise<T>
-{
-    const res = await fetch(url, { credentials: 'include', ...options });
-    const data = await res.json();
-
-    if(!res.ok || data.error) throw new Error(data.error || 'API error');
-
-    return data;
-}
-
 export const useFurniEditor = () =>
 {
     const [ items, setItems ] = useState<FurniItem[]>([]);
@@ -69,171 +60,114 @@ export const useFurniEditor = () =>
     const [ catalogItems, setCatalogItems ] = useState<CatalogRef[]>([]);
     const [ interactions, setInteractions ] = useState<string[]>([]);
     const [ furniDataEntry, setFurniDataEntry ] = useState<Record<string, unknown> | null>(null);
+    const [ lastResult, setLastResult ] = useState<{ success: boolean; message: string; id: number } | null>(null);
 
     const clearError = useCallback(() => setError(null), []);
 
-    const searchItems = useCallback(async (query: string, type: string, pg: number) =>
+    // Listen for search results
+    useMessageEvent(FurniEditorSearchMsgEvent, (event: any) =>
+    {
+        const parser = event.getParser();
+
+        setItems(parser.items);
+        setTotal(parser.total);
+        setPage(parser.page);
+        setLoading(false);
+    });
+
+    // Listen for detail results
+    useMessageEvent(FurniEditorDetailMsgEvent, (event: any) =>
+    {
+        const parser = event.getParser();
+
+        setSelectedItem(parser.item as FurniDetail);
+        setCatalogItems(parser.catalogItems as CatalogRef[]);
+
+        try
+        {
+            setFurniDataEntry(parser.furniDataJson ? JSON.parse(parser.furniDataJson) : null);
+        }
+        catch
+        {
+            setFurniDataEntry(null);
+        }
+
+        setLoading(false);
+    });
+
+    // Listen for interactions results
+    useMessageEvent(FurniEditorInteractionsMsgEvent, (event: any) =>
+    {
+        const parser = event.getParser();
+
+        setInteractions(parser.interactions);
+    });
+
+    // Listen for operation results (update/create/delete)
+    useMessageEvent(FurniEditorResultMsgEvent, (event: any) =>
+    {
+        const parser = event.getParser();
+
+        setLastResult({ success: parser.success, message: parser.message, id: parser.id });
+        setLoading(false);
+
+        if(!parser.success)
+        {
+            setError(parser.message);
+        }
+    });
+
+    const searchItems = useCallback((query: string, type: string, pg: number) =>
     {
         setLoading(true);
         setError(null);
-
-        try
-        {
-            const params = new URLSearchParams({ q: query, limit: '20', page: String(pg) });
-
-            if(type) params.set('type', type);
-
-            const data = await apiFetch<{ items: FurniItem[]; total: number; page: number }>(`${ API_BASE }?${ params }`);
-
-            setItems(data.items);
-            setTotal(data.total);
-            setPage(data.page);
-        }
-        catch(e: any)
-        {
-            setError(e.message);
-        }
-        finally
-        {
-            setLoading(false);
-        }
+        SendMessageComposer(new FurniEditorSearchComposer(query, type, pg));
     }, []);
 
-    const loadDetail = useCallback(async (id: number): Promise<boolean> =>
+    const loadDetail = useCallback((id: number) =>
     {
         setLoading(true);
         setError(null);
-
-        try
-        {
-            const data = await apiFetch<{ item: FurniDetail; catalogItems: CatalogRef[]; furniDataEntry: Record<string, unknown> | null }>(`${ API_BASE }/detail?id=${ id }`);
-
-            setSelectedItem(data.item);
-            setCatalogItems(data.catalogItems);
-            setFurniDataEntry(data.furniDataEntry);
-
-            return true;
-        }
-        catch(e: any)
-        {
-            setError(e.message);
-
-            return false;
-        }
-        finally
-        {
-            setLoading(false);
-        }
+        SendMessageComposer(new FurniEditorDetailComposer(id));
     }, []);
 
-    const updateItem = useCallback(async (id: number, fields: Record<string, unknown>) =>
+    const loadBySpriteId = useCallback((spriteId: number) =>
     {
         setLoading(true);
         setError(null);
-
-        try
-        {
-            await apiFetch(`${ API_BASE }/update?id=${ id }`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(fields)
-            });
-
-            return true;
-        }
-        catch(e: any)
-        {
-            setError(e.message);
-
-            return false;
-        }
-        finally
-        {
-            setLoading(false);
-        }
+        SendMessageComposer(new FurniEditorBySpriteComposer(spriteId));
     }, []);
 
-    const createItem = useCallback(async (fields: Record<string, unknown>) =>
+    const updateItem = useCallback((id: number, fields: Record<string, unknown>) =>
     {
         setLoading(true);
         setError(null);
-
-        try
-        {
-            const data = await apiFetch<{ id: number }>(`${ API_BASE }`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(fields)
-            });
-
-            return data.id;
-        }
-        catch(e: any)
-        {
-            setError(e.message);
-
-            return null;
-        }
-        finally
-        {
-            setLoading(false);
-        }
+        SendMessageComposer(new FurniEditorUpdateComposer(id, JSON.stringify(fields)));
     }, []);
 
-    const deleteItem = useCallback(async (id: number) =>
+    const createItem = useCallback((fields: Record<string, unknown>) =>
     {
         setLoading(true);
         setError(null);
-
-        try
-        {
-            await apiFetch(`${ API_BASE }/delete?id=${ id }`, { method: 'POST' });
-
-            return true;
-        }
-        catch(e: any)
-        {
-            setError(e.message);
-
-            return false;
-        }
-        finally
-        {
-            setLoading(false);
-        }
+        SendMessageComposer(new FurniEditorCreateComposer(JSON.stringify(fields)));
     }, []);
 
-    const loadInteractions = useCallback(async () =>
+    const deleteItem = useCallback((id: number) =>
     {
-        try
-        {
-            const data = await apiFetch<{ interactions: Array<string | { name: string }> }>(`${ API_BASE }/interactions`);
-
-            setInteractions(data.interactions.map(i => typeof i === 'string' ? i : i.name));
-        }
-        catch {}
+        setLoading(true);
+        setError(null);
+        SendMessageComposer(new FurniEditorDeleteComposer(id));
     }, []);
 
-    const loadBySpriteId = useCallback(async (spriteId: number): Promise<boolean> =>
+    const loadInteractions = useCallback(() =>
     {
-        try
-        {
-            const data = await apiFetch<{ id: number }>(`${ API_BASE }/by-sprite?spriteId=${ spriteId }`);
-
-            return await loadDetail(data.id);
-        }
-        catch(e: any)
-        {
-            setError(e.message);
-
-            return false;
-        }
-    }, [ loadDetail ]);
+        SendMessageComposer(new FurniEditorInteractionsComposer());
+    }, []);
 
     return {
         items, total, page, loading, error, clearError,
         selectedItem, setSelectedItem, catalogItems, furniDataEntry,
-        interactions,
+        interactions, lastResult,
         searchItems, loadDetail, loadBySpriteId, updateItem, createItem, deleteItem, loadInteractions
     };
 };

src/layout/PrefixPreview.tsx

@@ -0,0 +1,48 @@
+import { FC, useMemo } from 'react';
+import { parsePrefixColors, getPrefixEffectStyle } from '../api';
+
+interface PrefixPreviewProps
+{
+    text: string;
+    color: string;
+    icon?: string;
+    effect?: string;
+    className?: string;
+    textSize?: string;
+}
+
+export const PrefixPreview: FC<PrefixPreviewProps> = ({ text, color, icon = '', effect = '', className = '', textSize = 'text-sm' }) =>
+{
+    const colors = useMemo(() => parsePrefixColors(text, color), [ text, color ]);
+    const hasMultiColor = colors.length > 1 && new Set(colors).size > 1;
+    const fxStyle = useMemo(() => getPrefixEffectStyle(effect, colors[0] || '#FFFFFF'), [ effect, colors ]);
+    const isWave = effect === 'wave';
+
+    return (
+        <span className={ `font-bold ${ textSize } ${ className }` } style={ fxStyle }>
+            { icon && <span className="mr-0.5">{ icon }</span> }
+            <span style={ hasMultiColor ? fxStyle : { ...fxStyle, color: colors[0] || '#FFFFFF' } }>
+                {'{'}
+                { (hasMultiColor || isWave)
+                    ? [ ...text ].map((char, i) =>
+                    {
+                        const charStyle: Record<string, string | number> = {
+                            color: colors[i] || colors[colors.length - 1],
+                            ...getPrefixEffectStyle(effect, colors[i])
+                        };
+
+                        if(isWave)
+                        {
+                            charStyle.display = 'inline-block';
+                            charStyle.animationDelay = `${ i * 0.08 }s`;
+                        }
+
+                        return <span key={ i } style={ charStyle }>{ char }</span>;
+                    })
+                    : text
+                }
+                {'}'}
+            </span>
+        </span>
+    );
+};

src/layout/index.ts

@@ -3,6 +3,7 @@ export * from './NitroButton';
 export * from './NitroCard';
 export * from './NitroInput';
 export * from './NitroItemCountBadge';
+export * from './PrefixPreview';
 export * from './classNames';
 export * from './limited-edition';
 export * from './styleNames';