Merge remote-tracking branch 'origin/main'

* origin/main: 🆙 Cleanup Furni-Edit & Fix the avatar-editor 🆙 Moved catalogue view to Tailwind 🆙 Fix move avatar-editor to Tailwind 🆙 Small fixes NFT Clothing 🆙 SSO failure detection Add NFT avatar tab and wired extras UI 🆙 add check for pets when sellable is enabled # Conflicts: # src/hooks/avatar-editor/useAvatarEditor.ts
2026-06-19 15:06:20 +00:00 · 2026-03-27 17:16:48 +01:00
parent ec68204ab4 bbb81dac87
commit b9a7db6f62
36 changed files with 712 additions and 609 deletions
@@ -22,6 +22,21 @@
    "widget.room.youtube.open_video": "Open de video",
    "wiredfurni.params.area_selection.selected": "Geselecteerd gebied: Lengte=%x%, Breedte=%y%, breedte=%w%, hoogte=%h%",
    "wiredfurni.params.sources.users.11": "L'utente cliccato",
-    "wiredfurni.params.setexecutions": "Quantità di esecuzioni: %amount%",
-    "wiredfurni.params.settimewindow": "Tempo massimo consentito: %timewindow% secondi"
+    "wiredfurni.params.setexecutions": "QuantitÃƒÂ  di esecuzioni: %amount%",
+    "wiredfurni.params.settimewindow": "Tempo massimo consentito: %timewindow% secondi",
+    "wiredfurni.params.eval_mode": "Condizioni che devono corrispondere:",
+    "wiredfurni.params.eval_mode.0": "Tutte",
+    "wiredfurni.params.eval_mode.1": "Almeno una",
+    "wiredfurni.params.eval_mode.2": "Non tutte",
+    "wiredfurni.params.eval_mode.3": "Nessuna",
+    "wiredfurni.params.eval_mode.cmp.0": "Meno di:",
+    "wiredfurni.params.eval_mode.cmp.1": "Esattamente:",
+    "wiredfurni.params.eval_mode.cmp.2": "Più di:",
+    "wiredfurni.error.condition_evaluation_furni": "Puoi selezionare solo la Condizione e i componenti aggiuntivi!",
+    "wiredfurni.params.texts.placeholder_name": "Nome del segnaposto:",
+    "wiredfurni.params.texts.placeholder_preview": "Usalo digitando <font color=\"#ffffaa\">%placeholder%</font> nei testi dei Wired.",
+    "wiredfurni.params.texts.placeholder_type": "Tipo di segnaposto:",
+    "wiredfurni.params.texts.placeholder_type.1": "Singolo",
+    "wiredfurni.params.texts.placeholder_type.2": "Multiplo",
+    "wiredfurni.params.texts.select_delimiter": "Seleziona il delimitatore:"
 }
@@ -1,17 +1,30 @@
-import { GetAssetManager, GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, GetTexturePool, GetTicker, HabboWebTools, LegacyExternalInterface, LoadGameUrlEvent, NitroLogger, NitroVersion, PrepareRenderer } from '@nitrots/nitro-renderer';
-import { FC, useEffect, useState } from 'react';
+import { GetAssetManager, GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, GetTexturePool, GetTicker, HabboWebTools, LegacyExternalInterface, LoadGameUrlEvent, NitroEventType, NitroLogger, NitroVersion, PrepareRenderer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
 import { GetUIVersion } from './api';
 import { Base } from './common';
 import { LoadingView } from './components/loading/LoadingView';
 import { MainView } from './components/MainView';
 import { ReconnectView } from './components/reconnect/ReconnectView';
-import { useMessageEvent } from './hooks';
+import { useMessageEvent, useNitroEvent } from './hooks';

 NitroVersion.UI_VERSION = GetUIVersion();

 export const App: FC<{}> = props =>
 {
    const [ isReady, setIsReady ] = useState(false);
+    const [ errorMessage, setErrorMessage ] = useState('');
+    const [ homeUrl, setHomeUrl ] = useState('');
+
+    const showSessionExpired = useCallback(() =>
+    {
+        const baseUrl = window.location.origin + '/';
+        setHomeUrl(baseUrl);
+        setErrorMessage('Your session has expired.\nPlease log in again to enter the hotel.');
+        setIsReady(false);
+    }, []);
+
+    // Listen for socket closed events (code 1000 "Bye" - server rejected SSO)
+    useNitroEvent(NitroEventType.SOCKET_CLOSED, showSessionExpired);

    useMessageEvent<LoadGameUrlEvent>(LoadGameUrlEvent, event =>
    {
@@ -30,6 +43,14 @@ export const App: FC<{}> = props =>
            {
                if(!window.NitroConfig) throw new Error('NitroConfig is not defined!');

+                const ssoTicket = window.NitroConfig['sso.ticket'];
+
+                if(!ssoTicket || ssoTicket === '')
+                {
+                    showSessionExpired();
+                    return;
+                }
+
                const renderer = await PrepareRenderer({
                    width: Math.floor(width),
                    height: Math.floor(height),
@@ -83,6 +104,7 @@ export const App: FC<{}> = props =>
            catch(err)
            {
                NitroLogger.error(err);
+                showSessionExpired();
            }
        };

@@ -92,7 +114,7 @@ export const App: FC<{}> = props =>
    return (
        <Base fit overflow="hidden" className={ !(window.devicePixelRatio % 1) && 'image-rendering-pixelated' }>
            { !isReady &&
-                <LoadingView /> }
+                <LoadingView isError={ errorMessage.length > 0 } message={ errorMessage } homeUrl={ homeUrl } /> }
            { isReady && <MainView /> }
            <ReconnectView />
            <Base id="draggable-windows-container" />
@@ -109,22 +109,6 @@ export class AvatarEditorThumbnailsHelper
                container.addChild(sprite);
            }

-            if(container.children.length > 0)
-            {
-                const isPetPart = parts.some(p => p.type === 'pt' || p.type === 'ptl' || p.type === 'ptr');
-
-                if(isPetPart)
-                {
-                    const bounds = container.getBounds();
-
-                    for(const child of container.children)
-                    {
-                        (child as NitroSprite).position.x -= bounds.x;
-                        (child as NitroSprite).position.y -= bounds.y;
-                    }
-                }
-            }
-
            return container;
        };

@@ -133,9 +117,9 @@ export class AvatarEditorThumbnailsHelper
            const resetFigure = async (figure: string) =>
            {
                const container = buildContainer(part, useColors, partColors, isDisabled);
-                const imageUrl = await TextureUtils.generateImageUrl(container);
+                const imageUrl = await TextureUtils.generateImageUrl({ target: container, resolution: 1 });

-                AvatarEditorThumbnailsHelper.THUMBNAIL_CACHE.set(thumbnailKey, imageUrl);
+                if(imageUrl) AvatarEditorThumbnailsHelper.THUMBNAIL_CACHE.set(thumbnailKey, imageUrl);

                resolve(imageUrl);
            };
@@ -7,4 +7,5 @@ export interface IAvatarEditorCategoryPartItem
    usesColor?: boolean;
    maxPaletteCount?: number;
    isClear?: boolean;
+    isSellableNotOwned?: boolean;
 }
@@ -64,4 +64,6 @@ export class WiredActionLayoutCode
    public static RANDOM_EXTRA: number = 63;
    public static EXEC_IN_ORDER_EXTRA: number = 64;
    public static EXECUTION_LIMIT_EXTRA: number = 65;
+    public static OR_EVAL_EXTRA: number = 66;
+    public static TEXT_OUTPUT_USERNAME_EXTRA: number = 67;
 }
@@ -15,7 +15,7 @@ export interface LayoutAvatarImageViewProps extends BaseProps<HTMLDivElement>

 export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
 {
-    const { figure = '', gender = 'M', headOnly = false, direction = 0, scale = 1, classNames = [], style = {}, ...rest } = props;
+    const { figure = '', gender = '', headOnly = false, direction = 0, scale = 1, classNames = [], style = {}, ...rest } = props;
    const [ avatarUrl, setAvatarUrl ] = useState<string>(null);
    const [ isReady, setIsReady ] = useState<boolean>(false);
    const isDisposed = useRef(false);
@@ -9,7 +9,6 @@ import { CampaignView } from './campaign/CampaignView';
 import { CatalogView } from './catalog/CatalogView';
 import { ChatHistoryView } from './chat-history/ChatHistoryView';
 import { FloorplanEditorView } from './floorplan-editor/FloorplanEditorView';
-import { FurniEditorView } from './furni-editor/FurniEditorView';
 import { FriendsView } from './friends/FriendsView';
 import { GameCenterView } from './game-center/GameCenterView';
 import { GroupsView } from './groups/GroupsView';
@@ -121,7 +120,6 @@ export const MainView: FC<{}> = props =>
            <CampaignView />
            <GameCenterView />
            <FloorplanEditorView />
-            <FurniEditorView />
            <YoutubeTvView />
            <ExternalPluginLoader />
        </>
@@ -9,7 +9,7 @@ const DEFAULT_DIRECTION: number = 4;
 export const AvatarEditorFigurePreviewView: FC<{}> = props =>
 {
    const [ direction, setDirection ] = useState<number>(DEFAULT_DIRECTION);
-    const { getFigureString = null } = useAvatarEditor();
+    const { getFigureString = null, gender = 'M' } = useAvatarEditor();

    const rotateFigure = (newDirection: number) =>
    {
@@ -28,7 +28,7 @@ export const AvatarEditorFigurePreviewView: FC<{}> = props =>

    return (
        <div className="flex flex-col figure-preview-container overflow-hidden relative">
-            <LayoutAvatarImageView direction={ direction } figure={ getFigureString } scale={ 2 } />
+            <LayoutAvatarImageView direction={ direction } figure={ getFigureString } gender={ gender } scale={ 2 } />
            <AvatarEditorIcon className="avatar-spotlight" icon="spotlight" />
            <div className="avatar-shadow" />
            <div className="arrow-container">
@@ -1,45 +1,81 @@
 import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren, forwardRef } from 'react';
 import { classNames } from '../../layout';

-type AvatarIconType = 'male' | 'female' | 'clear' | 'sellable';
+import arrowLeftIcon from '../../assets/images/avatareditor/arrow-left-icon.png';
+import arrowRightIcon from '../../assets/images/avatareditor/arrow-right-icon.png';
+import caIcon from '../../assets/images/avatareditor/ca-icon.png';
+import caSelectedIcon from '../../assets/images/avatareditor/ca-selected-icon.png';
+import ccIcon from '../../assets/images/avatareditor/cc-icon.png';
+import ccSelectedIcon from '../../assets/images/avatareditor/cc-selected-icon.png';
+import chIcon from '../../assets/images/avatareditor/ch-icon.png';
+import chSelectedIcon from '../../assets/images/avatareditor/ch-selected-icon.png';
+import clearIcon from '../../assets/images/avatareditor/clear-icon.png';
+import cpIcon from '../../assets/images/avatareditor/cp-icon.png';
+import cpSelectedIcon from '../../assets/images/avatareditor/cp-selected-icon.png';
+import eaIcon from '../../assets/images/avatareditor/ea-icon.png';
+import eaSelectedIcon from '../../assets/images/avatareditor/ea-selected-icon.png';
+import faIcon from '../../assets/images/avatareditor/fa-icon.png';
+import faSelectedIcon from '../../assets/images/avatareditor/fa-selected-icon.png';
+import femaleIcon from '../../assets/images/avatareditor/female-icon.png';
+import femaleSelectedIcon from '../../assets/images/avatareditor/female-selected-icon.png';
+import haIcon from '../../assets/images/avatareditor/ha-icon.png';
+import haSelectedIcon from '../../assets/images/avatareditor/ha-selected-icon.png';
+import heIcon from '../../assets/images/avatareditor/he-icon.png';
+import heSelectedIcon from '../../assets/images/avatareditor/he-selected-icon.png';
+import hrIcon from '../../assets/images/avatareditor/hr-icon.png';
+import hrSelectedIcon from '../../assets/images/avatareditor/hr-selected-icon.png';
+import lgIcon from '../../assets/images/avatareditor/lg-icon.png';
+import lgSelectedIcon from '../../assets/images/avatareditor/lg-selected-icon.png';
+import maleIcon from '../../assets/images/avatareditor/male-icon.png';
+import maleSelectedIcon from '../../assets/images/avatareditor/male-selected-icon.png';
+import sellableIcon from '../../assets/images/avatareditor/sellable-icon.png';
+import shIcon from '../../assets/images/avatareditor/sh-icon.png';
+import shSelectedIcon from '../../assets/images/avatareditor/sh-selected-icon.png';
+import waIcon from '../../assets/images/avatareditor/wa-icon.png';
+import waSelectedIcon from '../../assets/images/avatareditor/wa-selected-icon.png';
+
+const ICON_MAP: Record<string, { normal: string; selected?: string }> = {
+    'arrow-left': { normal: arrowLeftIcon },
+    'arrow-right': { normal: arrowRightIcon },
+    'ca': { normal: caIcon, selected: caSelectedIcon },
+    'cc': { normal: ccIcon, selected: ccSelectedIcon },
+    'ch': { normal: chIcon, selected: chSelectedIcon },
+    'clear': { normal: clearIcon },
+    'cp': { normal: cpIcon, selected: cpSelectedIcon },
+    'ea': { normal: eaIcon, selected: eaSelectedIcon },
+    'fa': { normal: faIcon, selected: faSelectedIcon },
+    'female': { normal: femaleIcon, selected: femaleSelectedIcon },
+    'ha': { normal: haIcon, selected: haSelectedIcon },
+    'he': { normal: heIcon, selected: heSelectedIcon },
+    'hr': { normal: hrIcon, selected: hrSelectedIcon },
+    'lg': { normal: lgIcon, selected: lgSelectedIcon },
+    'male': { normal: maleIcon, selected: maleSelectedIcon },
+    'sellable': { normal: sellableIcon },
+    'sh': { normal: shIcon, selected: shSelectedIcon },
+    'wa': { normal: waIcon, selected: waSelectedIcon },
+};

 export const AvatarEditorIcon = forwardRef<HTMLDivElement, PropsWithChildren<{
-    icon: AvatarIconType;
+    icon: string;
    selected?: boolean;
 }> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
 {
-    const { icon = null, selected = false, className = null, ...rest } = props;
+    const { icon = null, selected = false, className = null, children, ...rest } = props;

-    /*
-    switch (icon)
-    {
-        case 'male':
+    const iconEntry = icon ? ICON_MAP[icon] : null;

+    if(!iconEntry) return null;

-            break;
+    const src = (selected && iconEntry.selected) ? iconEntry.selected : iconEntry.normal;

-        case 'arrow-left':
-
-            break;
-
-        default:
-            //statements; 
-            break;
-
-    }
-*/
    return (
        <div
            ref={ ref }
-
-            className={ classNames(
-                'nitro-avatar-editor-spritesheet',
-                'cursor-pointer',
-                `${ icon }-icon`,
-                selected && 'selected',
-                className
-            ) }
-            { ...rest } />
+            className={ classNames('flex items-center justify-center cursor-pointer', className) }
+            { ...rest }>
+            <img src={ src } alt={ icon } className="h-[22px] w-auto object-contain pointer-events-none" draggable={ false } />
+            { children }
+        </div>
    );
 });

@@ -0,0 +1,117 @@
+import { AvatarFigurePartType, FigureDataContainer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { CreateLinkEvent, GetClubMemberLevel, IAvatarEditorCategory } from '../../api';
+import { LayoutAvatarImageView, LayoutCurrencyIcon } from '../../common';
+import { useAvatarEditor } from '../../hooks';
+import { AvatarEditorIcon } from './AvatarEditorIcon';
+import { AvatarEditorFigureSetView } from './figure-set';
+import { AvatarEditorAdvancedColorView, AvatarEditorPaletteSetView } from './palette-set';
+
+export const AvatarEditorNftView: FC<{
+    categories: IAvatarEditorCategory[];
+}> = props =>
+{
+    const { categories = [] } = props;
+    const [ didChange, setDidChange ] = useState(false);
+    const [ activeSetType, setActiveSetType ] = useState('');
+    const [ advancedColorMode, setAdvancedColorMode ] = useState(false);
+    const hasHC = GetClubMemberLevel() > 0;
+    const { maxPaletteCount = 1, selectedColorParts = null, getFirstSelectableColor = null, selectEditorColor = null, gender = null, setGender = null, getFigureString = '' } = useAvatarEditor();
+
+    const activeCategory = useMemo(() =>
+    {
+        return categories.find(category => category.setType === activeSetType) ?? null;
+    }, [ categories, activeSetType ]);
+
+    const selectSet = useCallback((setType: string) =>
+    {
+        const selectedPalettes = selectedColorParts[setType];
+
+        if(!selectedPalettes || !selectedPalettes.length) selectEditorColor(setType, 0, getFirstSelectableColor(setType));
+
+        setActiveSetType(setType);
+    }, [ getFirstSelectableColor, selectEditorColor, selectedColorParts ]);
+
+    useEffect(() =>
+    {
+        if(!categories || !categories.length || !didChange) return;
+
+        selectSet(categories[0]?.setType);
+        setDidChange(false);
+    }, [ categories, didChange, selectSet ]);
+
+    useEffect(() =>
+    {
+        setDidChange(true);
+    }, [ categories ]);
+
+    if(!categories.length || !activeCategory)
+    {
+        return (
+            <div className="flex flex-col items-center justify-center h-full text-sm text-[#888] gap-2">
+                <div className="text-lg font-bold text-white">NFT</div>
+                <div>No NFT items available.</div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col overflow-hidden h-full gap-1">
+            <div className="flex items-center px-2 gap-2 shrink-0 flex-wrap">
+                { categories.map(category =>
+                    <div
+                        key={ category.setType }
+                        className="category-item flex items-center justify-center cursor-pointer"
+                        onClick={ event => selectSet(category.setType) }>
+                        { (category.setType === AvatarFigurePartType.HEAD)
+                            ? (
+                                <div className={ `relative flex items-center justify-center w-[28px] h-[28px] rounded-full overflow-hidden border ${ activeSetType === category.setType ? 'border-white bg-white/20' : 'border-white/30 bg-black/20' }` }>
+                                    <LayoutAvatarImageView classNames={ ['!w-[28px]', '!h-[28px]', '!left-0'] } direction={ 2 } figure={ getFigureString } gender={ gender } headOnly={ true } scale={ 0.42 } />
+                                </div>
+                            )
+                            : <AvatarEditorIcon icon={ category.setType } selected={ activeSetType === category.setType } /> }
+                    </div>
+                ) }
+            </div>
+
+            { (activeSetType === AvatarFigurePartType.HEAD) &&
+                <div className="flex items-center px-2 gap-2 shrink-0">
+                    <div className="category-item flex items-center justify-center cursor-pointer" onClick={ event => setGender(AvatarFigurePartType.MALE) }>
+                        <AvatarEditorIcon icon="male" selected={ gender === FigureDataContainer.MALE } />
+                    </div>
+                    <div className="category-item flex items-center justify-center cursor-pointer" onClick={ event => setGender(AvatarFigurePartType.FEMALE) }>
+                        <AvatarEditorIcon icon="female" selected={ gender === FigureDataContainer.FEMALE } />
+                    </div>
+                </div> }
+
+            <div className="flex-1 min-h-0 overflow-hidden">
+                <AvatarEditorFigureSetView category={ activeCategory } columnCount={ 6 } />
+            </div>
+
+            <div className="flex shrink-0 items-center justify-end px-2">
+                <button
+                    className={ `flex items-center gap-1 text-xs px-2 py-0.5 rounded border cursor-pointer transition-colors ${ advancedColorMode ? 'bg-sky-400 border-sky-300 text-white' : 'bg-sky-900/30 border-sky-600/50 text-white hover:text-yellow-800' }` }
+                    onClick={ () => hasHC ? setAdvancedColorMode(prev => !prev) : CreateLinkEvent('habboUI/open/hccenter') }
+                >
+                    Advanced Color
+                    <LayoutCurrencyIcon type="hc" />
+                </button>
+            </div>
+
+            <div className={ `flex shrink-0 overflow-hidden gap-2 ${ maxPaletteCount === 2 ? 'dual-palette' : '' }` } style={ { height: '160px' } }>
+                { (maxPaletteCount >= 1) &&
+                    <div className="flex-1 min-w-0 overflow-hidden avatar-editor-palette-set-view">
+                        { advancedColorMode
+                            ? <AvatarEditorAdvancedColorView category={ activeCategory } paletteIndex={ 0 } />
+                            : <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 14 } paletteIndex={ 0 } /> }
+                    </div> }
+                { (maxPaletteCount === 2) &&
+                    <div className="flex-1 min-w-0 overflow-hidden avatar-editor-palette-set-view">
+                        { advancedColorMode
+                            ? <AvatarEditorAdvancedColorView category={ activeCategory } paletteIndex={ 1 } />
+                            : <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 14 } paletteIndex={ 1 } /> }
+                    </div> }
+            </div>
+        </div>
+    );
+};
@@ -6,6 +6,7 @@ import { Button, ButtonGroup, NitroCardContentView, NitroCardHeaderView, NitroCa
 import { useAvatarEditor } from '../../hooks';
 import { AvatarEditorFigurePreviewView } from './AvatarEditorFigurePreviewView';
 import { AvatarEditorModelView } from './AvatarEditorModelView';
+import { AvatarEditorNftView } from './AvatarEditorNftView';
 import { AvatarEditorPetView } from './AvatarEditorPetView';
 import { AvatarEditorWardrobeView } from './AvatarEditorWardrobeView';

@@ -16,6 +17,7 @@ export const AvatarEditorView: FC<{}> = props =>

    const isWardrobeOpen = (activeModelKey === AvatarEditorFigureCategory.WARDROBE);
    const isPetsOpen = (activeModelKey === AvatarEditorFigureCategory.PETS);
+    const isNftOpen = (activeModelKey === AvatarEditorFigureCategory.NFT);

    const processAction = (action: string) =>
    {
@@ -85,10 +87,12 @@ export const AvatarEditorView: FC<{}> = props =>
                    const isActive = (activeModelKey === modelKey);
                    const isWardrobe = (modelKey === AvatarEditorFigureCategory.WARDROBE);
                    const isPets = (modelKey === AvatarEditorFigureCategory.PETS);
+                    const isNft = (modelKey === AvatarEditorFigureCategory.NFT);

                    let tabClass = `tab ${ modelKey }`;
                    if(isWardrobe) tabClass = 'tab-wardrobe';
                    else if(isPets) tabClass = 'tab-pets';
+                    else if(isNft) tabClass = 'tab-nft';

                    return (
                        <NitroCardTabsItemView key={ modelKey } isActive={ isActive } onClick={ event => setActiveModelKey(modelKey) }>
@@ -101,12 +105,14 @@ export const AvatarEditorView: FC<{}> = props =>
                <div className="flex gap-2 overflow-hidden h-full">
                    { /* left: model view or wardrobe */ }
                    <div className="flex flex-col flex-1 min-w-0 overflow-hidden">
-                        { (activeModelKey.length > 0 && !isWardrobeOpen && !isPetsOpen) &&
+                        { (activeModelKey.length > 0 && !isWardrobeOpen && !isPetsOpen && !isNftOpen) &&
                            <AvatarEditorModelView categories={ avatarModels[activeModelKey] } name={ activeModelKey } /> }
                        { isWardrobeOpen &&
                            <AvatarEditorWardrobeView /> }
                        { isPetsOpen &&
                            <AvatarEditorPetView categories={ avatarModels[activeModelKey] } /> }
+                        { isNftOpen &&
+                            <AvatarEditorNftView categories={ avatarModels[activeModelKey] } /> }
                    </div>
                    { /* right: preview + actions */ }
                    <div className="flex flex-col shrink-0 w-[120px] gap-1 overflow-hidden">
@@ -1,4 +1,3 @@
-import { AvatarFigurePartType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { AvatarEditorThumbnailsHelper, GetClubMemberLevel, GetConfigurationValue, IAvatarEditorCategoryPartItem } from '../../../api';
 import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
@@ -20,10 +19,13 @@ export const AvatarEditorFigureSetItemView: FC<{
    const clubLevel = partItem.partSet?.clubLevel ?? 0;
    const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (clubLevel > 0);
    const isLocked = isHC && (GetClubMemberLevel() < clubLevel);
+    const isSellableNotOwned = partItem.isSellableNotOwned ?? false;

    useEffect(() =>
    {
-        if(!setType || !setType.length || !partItem) return;
+        setAssetUrl('');
+
+        if(!setType || !setType.length || !partItem || partItem.isClear) return;

        const loadImage = async () =>
        {
@@ -33,28 +35,53 @@ export const AvatarEditorFigureSetItemView: FC<{

            let url: string = null;

-            if(setType === AvatarFigurePartType.HEAD)
+            if(setType === 'hd')
            {
-                url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), partIsLocked);
+                url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), partIsLocked || isSellableNotOwned);
            }
            else
            {
-                url = await AvatarEditorThumbnailsHelper.build(setType, partItem, partItem.usesColor, selectedColorParts[setType] ?? null, partIsLocked);
+                url = await AvatarEditorThumbnailsHelper.build(
+                    setType,
+                    partItem,
+                    partItem.usesColor,
+                    selectedColorParts[setType] ?? null,
+                    partIsLocked || isSellableNotOwned
+                );
            }

            if(url && url.length) setAssetUrl(url);
        };

        loadImage();
-    }, [ setType, partItem, selectedColorParts, getFigureStringWithFace ]);
+    }, [ setType, partItem, selectedColorParts, getFigureStringWithFace, isSellableNotOwned ]);

    if(!partItem) return null;

+    const isHead = (setType === 'hd');
+
    return (
-        <InfiniteGrid.Item itemActive={ isSelected } itemImage={ (partItem.isClear ? undefined : assetUrl) } className={ `avatar-parts mx-auto${ isSelected ? ' part-selected' : '' }` } style={ { backgroundPosition: (setType === AvatarFigurePartType.HEAD) ? 'center -35px' : 'center' } } { ...rest }>
+        <InfiniteGrid.Item
+            itemActive={ isSelected }
+            itemImage={ (!partItem.isClear && isHead) ? assetUrl : undefined }
+            className={ `avatar-parts mx-auto${ isSelected ? ' part-selected' : '' }${ !partItem.isClear && isSellableNotOwned ? ' pet-sellable-locked' : '' }` }
+            style={ isHead ? { backgroundSize: '200%', backgroundPosition: 'center -32px' } : undefined }
+            { ...rest }
+        >
+            { !partItem.isClear && assetUrl && !isHead &&
+                <img
+                    src={ assetUrl }
+                    alt=""
+                    className="absolute inset-0 w-full h-full object-contain pointer-events-none image-rendering-pixelated"
+                    draggable={ false }
+                /> }
            { !partItem.isClear && isHC && <LayoutCurrencyIcon className="absolute inset-e-1 bottom-1" type="hc" /> }
            { partItem.isClear && <AvatarEditorIcon icon="clear" /> }
-            { !partItem.isClear && partItem.partSet.isSellable && <AvatarEditorIcon className="inset-e-1 bottom-1 absolute" icon="sellable" /> }
+            { !partItem.isClear && partItem.partSet.isSellable && !isSellableNotOwned && <AvatarEditorIcon className="inset-e-1 bottom-1 absolute" icon="sellable" /> }
+            { !partItem.isClear && isSellableNotOwned &&
+                <div className="pet-sellable-badge">
+                    <LayoutCurrencyIcon type={ -1 } />
+                </div> }
        </InfiniteGrid.Item>
    );
 };
@@ -7,9 +7,10 @@ import { AvatarEditorFigureSetItemView } from './AvatarEditorFigureSetItemView';
 export const AvatarEditorFigureSetView: FC<{
    category: IAvatarEditorCategory;
    columnCount: number;
+    estimateSize?: number;
 }> = props =>
 {
-    const { category = null, columnCount = 3 } = props;
+    const { category = null, columnCount = 3, estimateSize = 50 } = props;
    const { selectedParts = null, selectEditorPart } = useAvatarEditor();

    const isPartItemSelected = (partItem: IAvatarEditorCategoryPartItem) =>
@@ -29,7 +30,7 @@ export const AvatarEditorFigureSetView: FC<{
    };

    return (
-        <InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } estimateSize={ 50 } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
+        <InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } estimateSize={ estimateSize } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
        {
            if(!item) return null;

@@ -1,6 +1,7 @@
 export * from './AvatarEditorFigurePreviewView';
 export * from './AvatarEditorIcon';
 export * from './AvatarEditorModelView';
+export * from './AvatarEditorNftView';
 export * from './AvatarEditorPetView';
 export * from './AvatarEditorView';
 export * from './AvatarEditorWardrobeView';
@@ -111,7 +111,7 @@ const CatalogModernViewInner: FC<{}> = () =>
                                    className={ `flex items-center gap-2 mx-1 px-1.5 py-1.5 rounded cursor-pointer transition-all duration-150 ${ showFavorites ? 'bg-primary text-white' : 'hover:bg-card-grid-item-active' }` }
                                    onClick={ () => setShowFavorites(!showFavorites) }
                                >
-                                    <div className="w-[28px] h-[24px] flex items-center justify-center shrink-0 relative">
+                                    <div className="w-7 h-6 flex items-center justify-center shrink-0 relative">
                                        <FaHeart className={ `text-xs ${ showFavorites ? 'text-white' : totalFavs > 0 ? 'text-danger' : 'text-muted' }` } />
                                        { totalFavs > 0 &&
                                            <span className="absolute -top-1 -right-1 min-w-[14px] h-[14px] bg-danger text-white text-[8px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">
@@ -163,7 +163,7 @@ const CatalogModernViewInner: FC<{}> = () =>
                                                activateNode(child);
                                            } }
                                        >
-                                            <div className="w-[28px] h-[24px] flex items-center justify-center shrink-0 relative">
+                                            <div className="w-7 h-6 flex items-center justify-center shrink-0 relative">
                                                <CatalogIconView icon={ child.iconId } />
                                                { isHidden && <FaEyeSlash className="absolute -bottom-0.5 -right-0.5 text-[7px] text-danger" /> }
                                            </div>
@@ -1,20 +1,20 @@
 import { FC, useMemo } from 'react';
 import { GetConfigurationValue } from '../../../../api';
-import { LayoutImage } from '../../../../common';

 export interface CatalogIconViewProps
 {
    icon: number;
+    className?: string;
 }

 export const CatalogIconView: FC<CatalogIconViewProps> = props =>
 {
-    const { icon = 0 } = props;
+    const { icon = 0, className = '' } = props;

-    const getIconUrl = useMemo(() =>
+    const iconUrl = useMemo(() =>
    {
        return ((GetConfigurationValue<string>('catalog.asset.icon.url')).replace('%name%', icon.toString()));
    }, [ icon ]);

-    return <LayoutImage imageUrl={ getIconUrl } style={ { width: 20, height: 20 } } />;
+    return <img src={ iconUrl } alt="" className={ `w-5 h-5 object-contain image-rendering-pixelated ${ className }` } draggable={ false } />;
 };
@@ -19,8 +19,8 @@ export const CatalogRailItemView: FC<CatalogRailItemViewProps> = props =>
            title={ node.localization }
            onClick={ onClick }
        >
-            <div className="w-[30px] h-[30px] flex items-center justify-center shrink-0">
-                <CatalogIconView icon={ node.iconId } />
+            <div className="w-8 h-8 flex items-center justify-center shrink-0">
+                <CatalogIconView icon={ node.iconId } className="w-6 h-6" />
            </div>
            <span className={ `text-[11px] font-medium whitespace-nowrap overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-200 truncate ${ isActive ? 'text-catalog-accent' : 'text-catalog-text' }` }>
                { node.localization }
@@ -121,7 +121,7 @@ export const CatalogFavoritesView: FC<CatalogFavoritesViewProps> = props =>
                                    onClick={ () => { openPageByOfferId(fav.offerId); onClose(); } }
                                >
                                    { /* Furni icon */ }
-                                    <div className="w-[28px] h-[28px] flex items-center justify-center shrink-0 bg-white rounded border border-card-grid-item-border overflow-hidden">
+                                    <div className="w-7 h-7 flex items-center justify-center shrink-0 bg-white rounded border border-card-grid-item-border overflow-hidden">
                                        { fav.iconUrl
                                            ? <img className="max-w-full max-h-full object-contain image-rendering-pixelated" src={ fav.iconUrl } />
                                            : fav.nodeIconId !== null
@@ -86,7 +86,7 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
            >
                { adminMode &&
                    <FaArrowsAlt className="text-[7px] text-muted cursor-grab shrink-0 opacity-0 group-hover/nav:opacity-60" /> }
-                <div className="w-[20px] h-[20px] flex items-center justify-center shrink-0">
+                <div className="w-5 h-5 flex items-center justify-center shrink-0">
                    <CatalogIconView icon={ node.iconId } />
                </div>
                <span className="flex-1 truncate" title={ adminMode ? `Page ID: ${ node.pageId }` : undefined }>{ node.localization }</span>
@@ -4,10 +4,11 @@ import { Base, Column, Text } from '../../common';
 interface LoadingViewProps {
    isError?: boolean;
    message?: string;
+    homeUrl?: string;
 }

 export const LoadingView: FC<LoadingViewProps> = props => {
-    const { isError = false, message = '' } = props;
+    const { isError = false, message = '', homeUrl = '' } = props;

    return (
        <Column fullHeight position="relative" className="relative z-[100] bg-[radial-gradient(#1d1a24,#003a6b)]">
@@ -19,11 +20,16 @@ export const LoadingView: FC<LoadingViewProps> = props => {
                    { isError && (message && message.length) ?
                        <Column alignItems="center" className="absolute bottom-[20px] left-1/2 z-[3] -translate-x-1/2 max-w-[80%]" gap={ 2 }>
                            <Text fontSizeCustom={ 20 } variant="white" className="text-center [text-shadow:0px_4px_4px_rgba(0,0,0,0.25)]">
-                                Something went wrong while loading
-                            </Text>
-                            <Base className="px-4 py-3 rounded-lg bg-black/40 text-[#ff6b6b] text-sm font-mono text-center break-words whitespace-pre-wrap max-w-[600px]">
                                { message }
-                            </Base>
+                            </Text>
+                            { homeUrl &&
+                                <a
+                                    href={ homeUrl }
+                                    className="mt-3 px-6 py-3 rounded-lg bg-[#3b82f6] hover:bg-[#2563eb] text-white text-base font-semibold no-underline cursor-pointer transition-colors duration-200 [text-shadow:none]"
+                                >
+                                    Back to Hotel
+                                </a>
+                            }
                        </Column>
                        :
                        <Text fontSizeCustom={32} variant="white" className="absolute bottom-[20px] left-1/2 z-[3] -translate-x-1/2 [text-shadow:0px_4px_4px_rgba(0,0,0,0.25)]">
@@ -48,14 +48,14 @@ export const ReconnectView: FC<{}> = props =>

    const handleReload = useCallback(() =>
    {
-        window.location.reload();
+        window.location.href = window.location.origin + '/';
    }, []);

    const handleGoHome = useCallback(() =>
    {
        sessionStorage.removeItem('nitro.session.lastRoomId');
        sessionStorage.removeItem('nitro.session.lastRoomPassword');
-        window.location.reload();
+        window.location.href = window.location.origin + '/';
    }, []);

    if(!isReconnecting && !hasFailed) return null;
@@ -92,24 +92,18 @@ export const ReconnectView: FC<{}> = props =>
                    <>
                        <Text fontSizeCustom={ 36 } className="text-center text-red-500">&#9888;</Text>
                        <Text fontSizeCustom={ 18 } variant="white" className="text-center font-semibold">
-                            Connection failed
+                            Session expired
                        </Text>
                        <Text fontSizeCustom={ 14 } variant="white" className="text-center opacity-70">
-                            Unable to reconnect to the server after multiple attempts.
+                            Your session has expired. Please log in again to enter the hotel.
                        </Text>
                        <Base className="mt-2 flex gap-3">
-                            <Base
-                                className="px-6 py-2 rounded-lg bg-[#4dabf7] text-white font-semibold cursor-pointer hover:bg-[#339af0] transition-colors"
-                                onClick={ handleReload }
+                            <a
+                                href={ window.location.origin + '/' }
+                                className="px-6 py-2 rounded-lg bg-[#3b82f6] text-white font-semibold cursor-pointer hover:bg-[#2563eb] transition-colors no-underline"
                            >
-                                Reload Page
-                            </Base>
-                            <Base
-                                className="px-6 py-2 rounded-lg bg-white/10 text-white font-semibold cursor-pointer hover:bg-white/20 transition-colors"
-                                onClick={ handleGoHome }
-                            >
-                                Go to Home
-                            </Base>
+                                Back to Hotel
+                            </a>
                        </Base>
                    </>
                ) }
@@ -574,19 +574,6 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                                            onClick={ () => setDropdownOpen(!dropdownOpen) }>
                                            { dropdownOpen ? `${LocalizeText('widget.furni.present.close')} Buildtools` : `${LocalizeText('navigator.roomsettings.doormode.open')} Buildtools` }
                                        </button>
-                                        <button
-                                            className="w-full text-white text-xs bg-[#1e7295] hover:bg-[#1a617f] border border-[#ffffff33] rounded px-2 py-1 cursor-pointer transition-colors"
-                                            onClick={ () =>
-                                            {
-                                                const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, avatarInfo.id, avatarInfo.isWallItem ? RoomObjectCategory.WALL : RoomObjectCategory.FLOOR);
-                                                const typeId = roomObject?.model?.getValue(RoomObjectVariable.FURNITURE_TYPE_ID);
-
-                                                CreateLinkEvent('furni-editor/show');
-
-                                                if(typeId) window.dispatchEvent(new CustomEvent('furni-editor:open', { detail: { spriteId: typeId } }));
-                                            } }>
-                                            Edit Furni
-                                        </button>
                                        { dropdownOpen &&
                                            <div className="flex gap-[4px] w-full">
                                                { /* Left panel: position + rotation */ }
@@ -96,8 +96,6 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
                        <ToolbarItemView icon="camera" onClick={ event => CreateLinkEvent('camera/toggle') } /> }
                    { isMod &&
                        <ToolbarItemView icon="modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
-                    { isMod &&
-                        <ToolbarItemView icon="catalog" onClick={ event => CreateLinkEvent('furni-editor/toggle') } /> }
                </Flex>
                <Flex alignItems="center" justifyContent="center" className="flex-1 min-w-0 max-w-[600px] mx-auto" id="toolbar-chat-input-container" />
                <Flex alignItems="center" gap={ 2 } className="flex-shrink-0">
@@ -57,8 +57,10 @@ import { WiredExtraMoveCarryUsersView } from '../extras/WiredExtraMoveCarryUsers
 import { WiredExtraExecuteInOrderView } from '../extras/WiredExtraExecuteInOrderView';
 import { WiredExtraExecutionLimitView } from '../extras/WiredExtraExecutionLimitView';
 import { WiredExtraMoveNoAnimationView } from '../extras/WiredExtraMoveNoAnimationView';
+import { WiredExtraOrEvalView } from '../extras/WiredExtraOrEvalView';
 import { WiredExtraMovePhysicsView } from '../extras/WiredExtraMovePhysicsView';
 import { WiredExtraRandomView } from '../extras/WiredExtraRandomView';
+import { WiredExtraTextOutputUsernameView } from '../extras/WiredExtraTextOutputUsernameView';
 import { WiredExtraUnseenView } from '../extras/WiredExtraUnseenView';

 export const WiredActionLayoutView = (code: number) =>
@@ -189,6 +191,10 @@ export const WiredActionLayoutView = (code: number) =>
            return <WiredExtraExecuteInOrderView />;
        case WiredActionLayoutCode.EXECUTION_LIMIT_EXTRA:
            return <WiredExtraExecutionLimitView />;
+        case WiredActionLayoutCode.OR_EVAL_EXTRA:
+            return <WiredExtraOrEvalView />;
+        case WiredActionLayoutCode.TEXT_OUTPUT_USERNAME_EXTRA:
+            return <WiredExtraTextOutputUsernameView />;
        case WiredActionLayoutCode.SEND_SIGNAL:
            return <WiredActionSendSignalView />;
    }
@@ -0,0 +1,143 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredSourceOption, WiredSourcesSelector } from '../WiredSourcesSelector';
+import { WiredExtraBaseView } from './WiredExtraBaseView';
+
+const MODE_ALL = 0;
+const MODE_AT_LEAST_ONE = 1;
+const MODE_NOT_ALL = 2;
+const MODE_NONE = 3;
+const MODE_LESS_THAN = 4;
+const MODE_EXACTLY = 5;
+const MODE_MORE_THAN = 6;
+const MIN_COMPARE_VALUE = 0;
+const MAX_COMPARE_VALUE = 100;
+const DEFAULT_COMPARE_VALUE = 1;
+const COMPARE_VALUE_PATTERN = /^\d*$/;
+const CONDITION_EVALUATION_INTERACTION_TYPES = [ 'wf_cnd_*', 'wf_xtra_*' ];
+const CONDITION_EVALUATION_ERROR_KEY = 'wiredfurni.error.condition_evaluation_furni';
+
+const FURNI_SOURCES: WiredSourceOption[] = [
+    { value: 100, label: 'wiredfurni.params.sources.furni.100' },
+    { value: 0, label: 'wiredfurni.params.sources.furni.0' },
+    { value: 200, label: 'wiredfurni.params.sources.furni.200' },
+    { value: 201, label: 'wiredfurni.params.sources.furni.201' }
+];
+
+const MODE_OPTIONS = [ MODE_ALL, MODE_AT_LEAST_ONE, MODE_NOT_ALL, MODE_NONE ];
+const COMPARISON_OPTIONS = [ MODE_LESS_THAN, MODE_EXACTLY, MODE_MORE_THAN ];
+
+const normalizeEvaluationMode = (value: number) => ([ ...MODE_OPTIONS, ...COMPARISON_OPTIONS ].includes(value) ? value : MODE_ALL);
+const normalizeFurniSource = (value: number) => (FURNI_SOURCES.some(option => option.value === value) ? value : 0);
+const normalizeCompareValue = (value: number) =>
+{
+    if(isNaN(value)) return DEFAULT_COMPARE_VALUE;
+
+    return Math.max(MIN_COMPARE_VALUE, Math.min(MAX_COMPARE_VALUE, Math.floor(value)));
+};
+
+export const WiredExtraOrEvalView: FC<{}> = () =>
+{
+    const { trigger = null, setIntParams = null, setStringParam = null, setAllowedInteractionTypes = null, setAllowedInteractionErrorKey = null } = useWired();
+    const [ evaluationMode, setEvaluationMode ] = useState(MODE_ALL);
+    const [ furniSource, setFurniSource ] = useState(0);
+    const [ compareValue, setCompareValue ] = useState(DEFAULT_COMPARE_VALUE);
+    const [ compareValueInput, setCompareValueInput ] = useState(DEFAULT_COMPARE_VALUE.toString());
+
+    useEffect(() =>
+    {
+        setAllowedInteractionTypes(CONDITION_EVALUATION_INTERACTION_TYPES);
+        setAllowedInteractionErrorKey(CONDITION_EVALUATION_ERROR_KEY);
+
+        return () =>
+        {
+            setAllowedInteractionTypes(null);
+            setAllowedInteractionErrorKey(null);
+        };
+    }, [ setAllowedInteractionErrorKey, setAllowedInteractionTypes ]);
+
+    useEffect(() =>
+    {
+        if(!trigger) return;
+
+        setEvaluationMode(normalizeEvaluationMode((trigger.intData.length > 0) ? trigger.intData[0] : MODE_ALL));
+        setFurniSource(normalizeFurniSource((trigger.intData.length > 1) ? trigger.intData[1] : 0));
+        const nextCompareValue = normalizeCompareValue((trigger.intData.length > 2) ? trigger.intData[2] : DEFAULT_COMPARE_VALUE);
+        setCompareValue(nextCompareValue);
+        setCompareValueInput(nextCompareValue.toString());
+    }, [ trigger ]);
+
+    const updateCompareValue = (value: number) =>
+    {
+        const nextValue = normalizeCompareValue(value);
+
+        setCompareValue(nextValue);
+        setCompareValueInput(nextValue.toString());
+    };
+
+    const updateCompareValueInput = (value: string) =>
+    {
+        if(!COMPARE_VALUE_PATTERN.test(value)) return;
+
+        setCompareValueInput(value);
+
+        if(!value.length)
+        {
+            setCompareValue(MIN_COMPARE_VALUE);
+            return;
+        }
+
+        updateCompareValue(parseInt(value));
+    };
+
+    const save = () =>
+    {
+        setIntParams([ normalizeEvaluationMode(evaluationMode), normalizeFurniSource(furniSource), normalizeCompareValue(compareValue) ]);
+        setStringParam('');
+    };
+
+    return (
+        <WiredExtraBaseView
+            hasSpecialInput={ true }
+            requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT }
+            save={ save }
+            cardStyle={ { width: 360 } }
+            footer={ <WiredSourcesSelector showFurni={ true } furniSource={ furniSource } furniSources={ FURNI_SOURCES } onChangeFurni={ value => setFurniSource(normalizeFurniSource(value)) } /> }>
+            <div className="flex flex-col gap-2">
+                <Text>{ LocalizeText('wiredfurni.params.eval_mode') }</Text>
+                { MODE_OPTIONS.map(mode =>
+                {
+                    return (
+                        <label key={ mode } className="flex items-center gap-1 cursor-pointer">
+                            <input checked={ (evaluationMode === mode) } className="form-check-input" name="wiredExtraOrEvalMode" type="radio" onChange={ () => setEvaluationMode(mode) } />
+                            <Text>{ LocalizeText(`wiredfurni.params.eval_mode.${ mode }`) }</Text>
+                        </label>
+                    );
+                }) }
+                { COMPARISON_OPTIONS.map(mode =>
+                {
+                    const isSelected = (evaluationMode === mode);
+
+                    return (
+                        <label key={ mode } className="flex items-center gap-2 cursor-pointer">
+                            <input checked={ isSelected } className="form-check-input" name="wiredExtraOrEvalMode" type="radio" onChange={ () => setEvaluationMode(mode) } />
+                            <Text>{ LocalizeText(`wiredfurni.params.eval_mode.cmp.${ mode - MODE_LESS_THAN }`) }</Text>
+                            <input
+                                className="form-control form-control-sm w-16"
+                                inputMode="numeric"
+                                max={ MAX_COMPARE_VALUE }
+                                min={ MIN_COMPARE_VALUE }
+                                type="text"
+                                value={ compareValueInput }
+                                onBlur={ () => setCompareValueInput(normalizeCompareValue(compareValue).toString()) }
+                                onChange={ event => updateCompareValueInput(event.target.value) }
+                                onFocus={ () => setEvaluationMode(mode) } />
+                        </label>
+                    );
+                }) }
+            </div>
+        </WiredExtraBaseView>
+    );
+};
@@ -0,0 +1,123 @@
+import { FC, useEffect, useMemo, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredSourcesSelector, CLICKED_USER_SOURCE_VALUE } from '../WiredSourcesSelector';
+import { WiredExtraBaseView } from './WiredExtraBaseView';
+
+const TYPE_SINGLE = 1;
+const TYPE_MULTIPLE = 2;
+const DEFAULT_PLACEHOLDER_NAME = '';
+const DEFAULT_DELIMITER = ', ';
+const MAX_PLACEHOLDER_NAME_LENGTH = 32;
+const MAX_DELIMITER_LENGTH = 16;
+const PLACEHOLDER_WRAPPER_PATTERN = /^\$\((.*)\)$/;
+
+const normalizePlaceholderType = (value: number) => ((value === TYPE_MULTIPLE) ? TYPE_MULTIPLE : TYPE_SINGLE);
+const normalizeUserSource = (value: number) => ((value === 0) || (value === 200) || (value === 201) || (value === CLICKED_USER_SOURCE_VALUE) ? value : 0);
+const normalizePlaceholderName = (value: string) =>
+{
+    let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
+
+    if(PLACEHOLDER_WRAPPER_PATTERN.test(normalizedValue))
+    {
+        normalizedValue = normalizedValue.substring(2, normalizedValue.length - 1).trim();
+    }
+
+    return normalizedValue.slice(0, MAX_PLACEHOLDER_NAME_LENGTH);
+};
+
+const normalizeDelimiter = (value: string) =>
+{
+    if(value === undefined || value === null) return DEFAULT_DELIMITER;
+
+    return value.replace(/[\t\r\n]/g, '').slice(0, MAX_DELIMITER_LENGTH);
+};
+
+const splitStringData = (value: string) =>
+{
+    if(!value?.length) return [ DEFAULT_PLACEHOLDER_NAME, DEFAULT_DELIMITER ];
+
+    const parts = value.split('\t');
+
+    if(parts.length <= 1) return [ value, DEFAULT_DELIMITER ];
+
+    return [ parts[0], parts[1] ];
+};
+
+const escapeHtml = (value: string) => value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+
+export const WiredExtraTextOutputUsernameView: FC<{}> = () =>
+{
+    const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
+    const [ placeholderName, setPlaceholderName ] = useState(DEFAULT_PLACEHOLDER_NAME);
+    const [ placeholderType, setPlaceholderType ] = useState(TYPE_SINGLE);
+    const [ delimiter, setDelimiter ] = useState(DEFAULT_DELIMITER);
+    const [ userSource, setUserSource ] = useState(0);
+
+    useEffect(() =>
+    {
+        if(!trigger) return;
+
+        const [ nextPlaceholderName, nextDelimiter ] = splitStringData(trigger.stringData);
+
+        setPlaceholderName(normalizePlaceholderName(nextPlaceholderName));
+        setDelimiter(normalizeDelimiter(nextDelimiter));
+        setPlaceholderType(normalizePlaceholderType((trigger.intData.length > 0) ? trigger.intData[0] : TYPE_SINGLE));
+        setUserSource(normalizeUserSource((trigger.intData.length > 1) ? trigger.intData[1] : 0));
+    }, [ trigger ]);
+
+    const previewToken = useMemo(() =>
+    {
+        const effectiveName = normalizePlaceholderName(placeholderName) || 'placeholder';
+
+        return `$(${ effectiveName })`;
+    }, [ placeholderName ]);
+
+    const previewHtml = useMemo(() => LocalizeText('wiredfurni.params.texts.placeholder_preview', [ 'placeholder' ], [ escapeHtml(previewToken) ]), [ previewToken ]);
+
+    const save = () =>
+    {
+        setIntParams([ normalizePlaceholderType(placeholderType), normalizeUserSource(userSource) ]);
+        setStringParam(`${ normalizePlaceholderName(placeholderName) }\t${ normalizeDelimiter(delimiter) }`);
+    };
+
+    return (
+        <WiredExtraBaseView
+            hasSpecialInput={ true }
+            requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE }
+            save={ save }
+            cardStyle={ { width: 400 } }
+            footer={ <WiredSourcesSelector showUsers={ true } userSource={ userSource } onChangeUsers={ value => setUserSource(normalizeUserSource(value)) } /> }>
+            <div className="flex flex-col gap-2">
+                <div className="flex flex-col gap-1">
+                    <Text>{ LocalizeText('wiredfurni.params.texts.placeholder_name') }</Text>
+                    <NitroInput maxLength={ MAX_PLACEHOLDER_NAME_LENGTH } type="text" value={ placeholderName } onChange={ event => setPlaceholderName(normalizePlaceholderName(event.target.value)) } />
+                </div>
+                <Text dangerouslySetInnerHTML={ { __html: previewHtml } } />
+                <div className="flex flex-col gap-1">
+                    <Text>{ LocalizeText('wiredfurni.params.texts.placeholder_type') }</Text>
+                    <label className="flex items-center gap-1 cursor-pointer">
+                        <input checked={ (placeholderType === TYPE_SINGLE) } className="form-check-input" name="wiredTextOutputUsernameType" type="radio" onChange={ () => setPlaceholderType(TYPE_SINGLE) } />
+                        <Text>{ LocalizeText('wiredfurni.params.texts.placeholder_type.1') }</Text>
+                    </label>
+                    <label className="flex items-center gap-1 cursor-pointer">
+                        <input checked={ (placeholderType === TYPE_MULTIPLE) } className="form-check-input" name="wiredTextOutputUsernameType" type="radio" onChange={ () => setPlaceholderType(TYPE_MULTIPLE) } />
+                        <Text>{ LocalizeText('wiredfurni.params.texts.placeholder_type.2') }</Text>
+                    </label>
+                </div>
+                { placeholderType === TYPE_MULTIPLE &&
+                    <div className="flex flex-col gap-1">
+                        <Text>{ LocalizeText('wiredfurni.params.texts.select_delimiter') }</Text>
+                        <NitroInput maxLength={ MAX_DELIMITER_LENGTH } type="text" value={ delimiter } onChange={ event => setDelimiter(normalizeDelimiter(event.target.value)) } />
+                    </div> }
+            </div>
+        </WiredExtraBaseView>
+    );
+};
@@ -30,51 +30,45 @@ body {
 }

 ::-webkit-scrollbar {
-    width: .5rem
+    width: .625rem;
 }

 ::-webkit-scrollbar:horizontal {
-    height: .5rem
+    height: .625rem;
 }

 ::-webkit-scrollbar:not(:horizontal) {
-    width: .5rem
+    width: .625rem;
 }

-::-webkit-scrollbar-track:horizontal {
-    border-bottom: .25rem solid rgba(0, 0, 0, .1)
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, .08);
+    border-radius: .5rem;
 }

-::-webkit-scrollbar-track:not(:horizontal) {
-    border-right: .25rem solid rgba(0, 0, 0, .1)
+::-webkit-scrollbar-thumb {
+    background: rgba(30, 114, 149, .35);
+    border-radius: .5rem;
+    border: 2px solid transparent;
+    background-clip: padding-box;
 }

-::-webkit-scrollbar-thumb:horizontal {
-    border-bottom: .25rem solid rgba(30, 114, 149, .4)
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(30, 114, 149, .6);
+    border-radius: .5rem;
+    border: 2px solid transparent;
+    background-clip: padding-box;
 }

-::-webkit-scrollbar-thumb:horizontal:hover {
-    border-bottom: .25rem solid rgba(30, 114, 149, .8)
-}
-
-::-webkit-scrollbar-thumb:horizontal:active {
-    border-bottom: .25rem solid #185D79
-}
-
-::-webkit-scrollbar-thumb:not(:horizontal) {
-    border-right: .25rem solid rgba(30, 114, 149, .4)
-}
-
-::-webkit-scrollbar-thumb:not(:horizontal):hover {
-    border-right: .25rem solid rgba(30, 114, 149, .8)
-}
-
-::-webkit-scrollbar-thumb:not(:horizontal):active {
-    border-right: .25rem solid #185D79
+::-webkit-scrollbar-thumb:active {
+    background: #185D79;
+    border-radius: .5rem;
+    border: 2px solid transparent;
+    background-clip: padding-box;
 }

 ::-webkit-scrollbar-corner {
-    background: rgba(0, 0, 0, .1)
+    background: rgba(0, 0, 0, .08);
 }

@layer components {
@@ -447,219 +441,7 @@ body {
    }
 }

-.nitro-avatar-editor-spritesheet {
-    background: url('@/assets/images/avatareditor/avatar-editor-spritesheet.png') transparent no-repeat;
-
-    &.arrow-left-icon {
-        width: 28px;
-        height: 21px;
-        background-position: -226px -131px;
-    }
-
-    &.arrow-right-icon {
-        width: 28px;
-        height: 21px;
-        background-position: -226px -162px;
-    }
-
-    &.ca-icon {
-        width: 25px;
-        height: 25px;
-        background-position: -226px -61px;
-
-        &.selected {
-            width: 25px;
-            height: 25px;
-            background-position: -226px -96px;
-        }
-    }
-
-    &.cc-icon {
-        width: 31px;
-        height: 29px;
-        background-position: -145px -5px;
-
-        &.selected {
-            width: 31px;
-            height: 29px;
-            background-position: -145px -44px;
-        }
-    }
-
-    &.ch-icon {
-        width: 29px;
-        height: 24px;
-        background-position: -186px -39px;
-
-        &.selected {
-            width: 29px;
-            height: 24px;
-            background-position: -186px -73px;
-        }
-    }
-
-    &.clear-icon {
-        width: 27px;
-        height: 27px;
-        background-position: -145px -157px;
-    }
-
-    &.cp-icon {
-        width: 30px;
-        height: 24px;
-        background-position: -145px -264px;
-
-        &.selected {
-            width: 30px;
-            height: 24px;
-            background-position: -186px -5px;
-        }
-    }
-
-
-    &.ea-icon {
-        width: 35px;
-        height: 16px;
-        background-position: -226px -193px;
-
-        &.selected {
-            width: 35px;
-            height: 16px;
-            background-position: -226px -219px;
-        }
-    }
-
-    &.fa-icon {
-        width: 27px;
-        height: 20px;
-        background-position: -186px -137px;
-
-        &.selected {
-            width: 27px;
-            height: 20px;
-            background-position: -186px -107px;
-        }
-    }
-
-    &.female-icon {
-        width: 18px;
-        height: 27px;
-        background-position: -186px -202px;
-
-        &.selected {
-            width: 18px;
-            height: 27px;
-            background-position: -186px -239px;
-        }
-    }
-
-    &.ha-icon {
-        width: 25px;
-        height: 22px;
-        background-position: -226px -245px;
-
-        &.selected {
-            width: 25px;
-            height: 22px;
-            background-position: -226px -277px;
-        }
-    }
-
-    &.he-icon {
-        width: 31px;
-        height: 27px;
-        background-position: -145px -83px;
-
-        &.selected {
-            width: 31px;
-            height: 27px;
-            background-position: -145px -120px;
-        }
-    }
-
-    &.hr-icon {
-        width: 29px;
-        height: 25px;
-        background-position: -145px -194px;
-
-        &.selected {
-            width: 29px;
-            height: 25px;
-            background-position: -145px -229px;
-        }
-    }
-
-    &.lg-icon {
-        width: 19px;
-        height: 20px;
-        background-position: -303px -45px;
-
-        &.selected {
-            width: 19px;
-            height: 20px;
-            background-position: -303px -75px;
-        }
-    }
-
-    &.loading-icon {
-        width: 21px;
-        height: 25px;
-        background-position: -186px -167px;
-    }
-
-
-    &.male-icon {
-        width: 21px;
-        height: 21px;
-        background-position: -186px -276px;
-
-        &.selected {
-            width: 21px;
-            height: 21px;
-            background-position: -272px -5px;
-        }
-    }
-
-
-    &.sellable-icon {
-        width: 17px;
-        height: 15px;
-        background-position: -303px -105px;
-    }
-
-
-    &.sh-icon {
-        width: 37px;
-        height: 10px;
-        background-position: -303px -5px;
-
-        &.selected {
-            width: 37px;
-            height: 10px;
-            background-position: -303px -25px;
-        }
-    }
-
-
-    &.spotlight-icon {
-        width: 130px;
-        height: 305px;
-        background-position: -5px -5px;
-    }
-
-
-    &.wa-icon {
-        width: 36px;
-        height: 18px;
-        background-position: -226px -5px;
-
-        &.selected {
-            width: 36px;
-            height: 18px;
-            background-position: -226px -33px;
-        }
-    }
-}
+/* Avatar editor icons are now rendered as <img> tags via AvatarEditorIcon.tsx */

 .nitro-avatar-editor-wardrobe-figure-preview {
    background-color: #677181;
@@ -710,7 +492,7 @@ body {


    .category-item {
-        height: 40px;
+        height: 32px;
    }

    .figure-preview-container {
@@ -1180,6 +962,15 @@ body {
        background-position: center;
        background-size: 22px 22px;
    }
+
+    .tab-nft {
+        width: 34px;
+        height: 22px;
+        background-image: url('@/assets/images/wardrobe/nft.png');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 22px 22px;
+    }
 }

 /* ── Avatar Editor misc ─────────────────────────────────────────────────── */
@@ -1232,6 +1023,27 @@ body {
    overflow: hidden !important;
 }

+.pet-sellable-locked {
+    opacity: 0.5;
+    cursor: not-allowed !important;
+    position: relative;
+}
+
+.pet-sellable-badge {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    display: flex;
+    align-items: center;
+    gap: 1px;
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 3px;
+    padding: 1px 3px;
+    font-size: 9px;
+    color: #ffd700;
+    font-weight: bold;
+}
+
 .pet-remove-btn {
    background: none;
    border: none;
@@ -15,6 +15,7 @@ const useAvatarEditorState = () =>
    const [ maxPaletteCount, setMaxPaletteCount ] = useState<number>(1);
    const [ figureSetIds, setFigureSetIds ] = useState<number[]>([]);
    const [ boundFurnitureNames, setBoundFurnitureNames ] = useState<string[]>([]);
+    const [ figureSetNames, setFigureSetNames ] = useState<Record<number, string>>({});
    const [ savedFigures, setSavedFigures ] = useState<[ IAvatarFigureContainer, string ][]>(null);
    const { selectedColors, gender, setGender, loadAvatarData, selectPart, selectColor, getFigureString, getFigureStringWithFace, selectedParts } = useFigureData();

@@ -65,6 +66,8 @@ const useAvatarEditorState = () =>

        if(GetClubMemberLevel() < partItem.partSet.clubLevel) return;

+        if(partItem.isSellableNotOwned) return;
+
        setMaxPaletteCount(partItem.maxPaletteCount || 1);

        selectPart(setType, partId);
@@ -194,12 +197,27 @@ const useAvatarEditorState = () =>
        loadAvatarData(figureContainer.getFigureString(), gender);
    }, [ figureSetIds, gender, loadAvatarData, selectedColors, selectedParts ]);

+    const nftFigureSetIds = useMemo(() =>
+    {
+        const nftSetIds = new Set<number>();
+
+        for(const [ setId, furnitureName ] of Object.entries(figureSetNames))
+        {
+            if(!furnitureName?.toLowerCase().includes('nft')) continue;
+
+            nftSetIds.add(Number(setId));
+        }
+
+        return nftSetIds;
+    }, [ figureSetNames ]);
+
    useMessageEvent<FigureSetIdsMessageEvent>(FigureSetIdsMessageEvent, event =>
    {
        const parser = event.getParser();

        setFigureSetIds(parser.figureSetIds);
        setBoundFurnitureNames(parser.boundsFurnitureNames);
+        setFigureSetNames(parser.figureSetNameMap);
    });

    useMessageEvent<UserWardrobePageEvent>(UserWardrobePageEvent, event =>
@@ -236,8 +254,10 @@ const useAvatarEditorState = () =>
        if(!isVisible) return;

        const newAvatarModels: { [index: string]: IAvatarEditorCategory[] } = {};
+        const buildModeDefault = 'default';
+        const buildModeNft = 'nft';

-        const buildCategory = (setType: string) =>
+        const buildCategory = (setType: string, buildMode: string = buildModeDefault) =>
        {
            const partItems: IAvatarEditorCategoryPartItem[] = [];
            const colorItems: IPartColor[][] = [];
@@ -245,12 +265,9 @@ const useAvatarEditorState = () =>
            for(let i = 0; i < MAX_PALETTES; i++) colorItems.push([]);

            const set = GetAvatarRenderManager().structureData.getSetType(setType);
-
-            if(!set) return null;
-
            const palette = GetAvatarRenderManager().structureData.getPalette(set.paletteID);

-            if(!palette) return null;
+            if(!set || !palette) return null;

            for(const partColor of palette.colors.getValues())
            {
@@ -274,13 +291,22 @@ const useAvatarEditorState = () =>

                if(!partSet || !partSet.isSelectable || ((partSet.gender !== gender) && (partSet.gender !== AvatarFigurePartType.UNISEX))) continue;

-                if(partSet.isSellable && figureSetIds.indexOf(partSet.id) === -1) continue;
+                const isNftPartSet = nftFigureSetIds.size > 0
+                    ? nftFigureSetIds.has(partSet.id)
+                    : GetAvatarRenderManager().downloadManager.isNftPartSet(partSet);
+
+                if((buildMode === buildModeDefault) && isNftPartSet) continue;
+                if((buildMode === buildModeNft) && !isNftPartSet) continue;
+
+                const isSellableNotOwned = partSet.isSellable && figureSetIds.indexOf(partSet.id) === -1;
+
+                if(isSellableNotOwned && (buildMode !== buildModeNft) && setType !== AvatarFigurePartType.PET) continue;

                let maxPaletteCount = 0;

                for(const part of partSet.parts) maxPaletteCount = Math.max(maxPaletteCount, part.colorLayerIndex);

-                partItems.push({ id: partSet.id, partSet, usesColor, maxPaletteCount });
+                partItems.push({ id: partSet.id, partSet, usesColor, maxPaletteCount, isSellableNotOwned });
            }

            partItems.sort(AvatarEditorPartSorter(false));
@@ -290,16 +316,31 @@ const useAvatarEditorState = () =>
            return { setType, partItems, colorItems };
        };

-        newAvatarModels[AvatarEditorFigureCategory.GENERIC] = [ AvatarFigurePartType.HEAD ].map(setType => buildCategory(setType)).filter(Boolean);
-        newAvatarModels[AvatarEditorFigureCategory.HEAD] = [ AvatarFigurePartType.HAIR, AvatarFigurePartType.HEAD_ACCESSORY, AvatarFigurePartType.HEAD_ACCESSORY_EXTRA, AvatarFigurePartType.EYE_ACCESSORY, AvatarFigurePartType.FACE_ACCESSORY ].map(setType => buildCategory(setType)).filter(Boolean);
-        newAvatarModels[AvatarEditorFigureCategory.TORSO] = [ AvatarFigurePartType.CHEST, AvatarFigurePartType.CHEST_PRINT, AvatarFigurePartType.COAT_CHEST, AvatarFigurePartType.CHEST_ACCESSORY ].map(setType => buildCategory(setType)).filter(Boolean);
-        newAvatarModels[AvatarEditorFigureCategory.LEGS] = [ AvatarFigurePartType.LEGS, AvatarFigurePartType.SHOES, AvatarFigurePartType.WAIST_ACCESSORY ].map(setType => buildCategory(setType)).filter(Boolean);
+        newAvatarModels[AvatarEditorFigureCategory.GENERIC] = [ AvatarFigurePartType.HEAD ].map(setType => buildCategory(setType, buildModeDefault));
+        newAvatarModels[AvatarEditorFigureCategory.HEAD] = [ AvatarFigurePartType.HAIR, AvatarFigurePartType.HEAD_ACCESSORY, AvatarFigurePartType.HEAD_ACCESSORY_EXTRA, AvatarFigurePartType.EYE_ACCESSORY, AvatarFigurePartType.FACE_ACCESSORY ].map(setType => buildCategory(setType, buildModeDefault));
+        newAvatarModels[AvatarEditorFigureCategory.TORSO] = [ AvatarFigurePartType.CHEST, AvatarFigurePartType.CHEST_PRINT, AvatarFigurePartType.COAT_CHEST, AvatarFigurePartType.CHEST_ACCESSORY ].map(setType => buildCategory(setType, buildModeDefault));
+        newAvatarModels[AvatarEditorFigureCategory.LEGS] = [ AvatarFigurePartType.LEGS, AvatarFigurePartType.SHOES, AvatarFigurePartType.WAIST_ACCESSORY ].map(setType => buildCategory(setType, buildModeDefault));
        newAvatarModels[AvatarEditorFigureCategory.PETS] = [ AvatarFigurePartType.PET ].map(setType => buildCategory(setType)).filter(Boolean);
+        newAvatarModels[AvatarEditorFigureCategory.NFT] = [
+            AvatarFigurePartType.HEAD,
+            AvatarFigurePartType.HAIR,
+            AvatarFigurePartType.HEAD_ACCESSORY,
+            AvatarFigurePartType.HEAD_ACCESSORY_EXTRA,
+            AvatarFigurePartType.EYE_ACCESSORY,
+            AvatarFigurePartType.FACE_ACCESSORY,
+            AvatarFigurePartType.CHEST,
+            AvatarFigurePartType.CHEST_PRINT,
+            AvatarFigurePartType.COAT_CHEST,
+            AvatarFigurePartType.CHEST_ACCESSORY,
+            AvatarFigurePartType.LEGS,
+            AvatarFigurePartType.SHOES,
+            AvatarFigurePartType.WAIST_ACCESSORY
+        ].map(setType => buildCategory(setType, buildModeNft)).filter(Boolean);
        newAvatarModels[AvatarEditorFigureCategory.WARDROBE] = [];

        setAvatarModels(newAvatarModels);
        setActiveModelKey(AvatarEditorFigureCategory.GENERIC);
-    }, [ isVisible, gender, figureSetIds ]);
+    }, [ isVisible, gender, figureSetIds, nftFigureSetIds ]);

    useEffect(() =>
    {
@@ -1 +0,0 @@
-export * from './useFurniEditor';
@@ -1,239 +0,0 @@
-import { useCallback, useState } from 'react';
-
-export interface FurniItem
-{
-    id: number;
-    spriteId: number;
-    itemName: string;
-    publicName: string;
-    type: string;
-    width: number;
-    length: number;
-    stackHeight: number;
-    allowStack: boolean;
-    allowWalk: boolean;
-    allowSit: boolean;
-    allowLay: boolean;
-    interactionType: string;
-    interactionModesCount: number;
-}
-
-export interface FurniDetail extends FurniItem
-{
-    allowGift: boolean;
-    allowTrade: boolean;
-    allowRecycle: boolean;
-    allowMarketplaceSell: boolean;
-    allowInventoryStack: boolean;
-    vendingIds: string;
-    customparams: string;
-    effectIdMale: number;
-    effectIdFemale: number;
-    clothingOnWalk: string;
-    multiheight: string;
-    description: string;
-    usageCount: number;
-}
-
-export interface CatalogRef
-{
-    id: number;
-    catalogName: string;
-    costCredits: number;
-    costPoints: number;
-    pointsType: number;
-    pageId: number;
-    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[]>([]);
-    const [ total, setTotal ] = useState(0);
-    const [ page, setPage ] = useState(1);
-    const [ loading, setLoading ] = useState(false);
-    const [ error, setError ] = useState<string | null>(null);
-    const [ selectedItem, setSelectedItem ] = useState<FurniDetail | null>(null);
-    const [ catalogItems, setCatalogItems ] = useState<CatalogRef[]>([]);
-    const [ interactions, setInteractions ] = useState<string[]>([]);
-    const [ furniDataEntry, setFurniDataEntry ] = useState<Record<string, unknown> | null>(null);
-
-    const clearError = useCallback(() => setError(null), []);
-
-    const searchItems = useCallback(async (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);
-        }
-    }, []);
-
-    const loadDetail = useCallback(async (id: number): Promise<boolean> =>
-    {
-        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);
-        }
-    }, []);
-
-    const updateItem = useCallback(async (id: number, fields: Record<string, unknown>) =>
-    {
-        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);
-        }
-    }, []);
-
-    const createItem = useCallback(async (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);
-        }
-    }, []);
-
-    const deleteItem = useCallback(async (id: number) =>
-    {
-        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);
-        }
-    }, []);
-
-    const loadInteractions = useCallback(async () =>
-    {
-        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 {}
-    }, []);
-
-    const loadBySpriteId = useCallback(async (spriteId: number): Promise<boolean> =>
-    {
-        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 ]);
-
-    return {
-        items, total, page, loading, error, clearError,
-        selectedItem, setSelectedItem, catalogItems, furniDataEntry,
-        interactions,
-        searchItems, loadDetail, loadBySpriteId, updateItem, createItem, deleteItem, loadInteractions
-    };
-};
@@ -75,14 +75,37 @@ const useWiredState = () =>
            return rawValue.toLowerCase();
        };

+        const getComparableInteractionNames = (furniData: any): string[] =>
+        {
+            if(!furniData) return [];
+
+            const values = [
+                getInteractionTypeName(furniData),
+                (typeof (furniData as any).className === 'string') ? (furniData as any).className.toLowerCase() : null,
+                (typeof (furniData as any).fullName === 'string') ? (furniData as any).fullName.toLowerCase() : null,
+                (typeof (furniData as any).name === 'string') ? (furniData as any).name.toLowerCase() : null
+            ];
+
+            return values.filter((value, index, array): value is string => !!value && (array.indexOf(value) === index));
+        };
+
+        const matchesAllowedPattern = (value: string, pattern: string) =>
+        {
+            const normalizedPattern = pattern.toLowerCase();
+
+            if(normalizedPattern.endsWith('*')) return value.startsWith(normalizedPattern.slice(0, -1));
+
+            return (normalizedPattern === value);
+        };
+
        const isAllowedInteraction = (furniData: any): boolean =>
        {
            if(!allowedInteractionTypes || !allowedInteractionTypes.length) return true;

-            const interactionType = getInteractionTypeName(furniData);
-            if(!interactionType) return true;
+            const comparableNames = getComparableInteractionNames(furniData);
+            if(!comparableNames.length) return true;

-            return allowedInteractionTypes.some(type => (type && type.toLowerCase() === interactionType));
+            return comparableNames.some(value => allowedInteractionTypes.some(type => !!type && matchesAllowedPattern(value, type)));
        };

        const handleDisallowedInteraction = () =>