From 5e9e3e1e4c9d4dc276ca89ac52c312984d253163 Mon Sep 17 00:00:00 2001
From: Lorenzune <lorenzunee@gmail.com>
Date: Wed, 8 Apr 2026 16:18:16 +0200
Subject: [PATCH] Polish wired editor UI and variable handling

---
 src/api/wired/WiredActionLayoutCode.ts        |   2 +
 src/assets/images/wired/source_furni.png      | Bin 0 -> 236 bytes
 src/assets/images/wired/source_user.png       | Bin 0 -> 218 bytes
 src/assets/images/wired/wired_bg_left.png     | Bin 0 -> 737 bytes
 src/assets/images/wired/wired_bg_right.png    | Bin 0 -> 1208 bytes
 src/components/wired/WiredView.tsx            |  17 +-
 src/components/wired/views/WiredBaseView.tsx  |  92 ++--
 .../views/WiredFurniSelectionSourceRow.tsx    |   6 +-
 .../wired/views/WiredSourcesSelector.tsx      |  11 +-
 .../views/actions/WiredActionLayoutView.tsx   |   5 +
 ...iredActionNegativeCallAnotherStackView.tsx |  36 ++
 .../extras/WiredExtraContextVariableView.tsx  |  23 +-
 .../extras/WiredExtraRoomVariableView.tsx     |  23 +-
 .../extras/WiredExtraUserVariableView.tsx     |  23 +-
 .../extras/WiredExtraVariableEchoView.tsx     |  23 +-
 .../WiredExtraVariableReferenceView.tsx       |  23 +-
 .../WiredExtraVariableTextConnectorView.tsx   |  31 +-
 .../WiredNeighborhoodSelectorView.tsx         | 456 ++++++++++++++++++
 .../WiredSelectorFurniNeighborhoodView.tsx    | 455 +----------------
 .../WiredSelectorUsersNeighborhoodView.tsx    | 456 +-----------------
 src/css/index.css                             | 270 +++++++++--
 src/hooks/wired/useWired.ts                   |   3 +
 22 files changed, 926 insertions(+), 1029 deletions(-)
 create mode 100644 src/assets/images/wired/source_furni.png
 create mode 100644 src/assets/images/wired/source_user.png
 create mode 100644 src/assets/images/wired/wired_bg_left.png
 create mode 100644 src/assets/images/wired/wired_bg_right.png
 create mode 100644 src/components/wired/views/actions/WiredActionNegativeCallAnotherStackView.tsx
 create mode 100644 src/components/wired/views/selectors/WiredNeighborhoodSelectorView.tsx

diff --git a/src/api/wired/WiredActionLayoutCode.ts b/src/api/wired/WiredActionLayoutCode.ts
index 088818b..f3aa61a 100644
--- a/src/api/wired/WiredActionLayoutCode.ts
+++ b/src/api/wired/WiredActionLayoutCode.ts
@@ -84,4 +84,6 @@ export class WiredActionLayoutCode
     public static VARIABLE_ECHO_EXTRA: number = 83;
     public static CONTEXT_VARIABLE_EXTRA: number = 84;
     public static TEXT_INPUT_VARIABLE_EXTRA: number = 85;
+    public static NEG_CALL_ANOTHER_STACK: number = 86;
+    public static NEG_SEND_SIGNAL: number = 87;
 }
diff --git a/src/assets/images/wired/source_furni.png b/src/assets/images/wired/source_furni.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed7fe4dff23cd297f57a7ebf2b8196fe0844fac4
GIT binary patch
literal 236
zcmeAS@N?(olHy`uVBq!ia0vp^oIuRY!3HGPMlP2IQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjK*2^&7sn8d;L`q$ye$Siu5UXsH8S#iH5M#%
z6ESC$zF-`nG_&S7=kf{FXSdH?eqtG0Qe?q2$&dGhjh%IhbTtK>IW$6ZyiE09?mic0
zTQbdI-Did8H(dNKd;IhKmU`&WEuQ&u%4_Q<?pX0)Rjyp}GP%!R=4b@%@!71(D4TZj
e*Zz=x7xP*phqg_5&({MT!{F)a=d#Wzp$P!K9#WJ5

literal 0
HcmV?d00001

diff --git a/src/assets/images/wired/source_user.png b/src/assets/images/wired/source_user.png
new file mode 100644
index 0000000000000000000000000000000000000000..8bec80d137631ce23de9980221e69b9bebd01a3a
GIT binary patch
literal 218
zcmeAS@N?(olHy`uVBq!ia0vp^AT~D#GmtFY@J0(rF%}28J29*~C-V}>VM%xNb!1@J
z*w6hZkrl|72=EDU1=7EN|Nism4<jSvqKQ4{k8HhoY#UI}Ht^yGAjMG<<QM!O0vPT!
z?~MeCaTa()7BevL9R^{><M}I6fP&_pE{-7*;kMn}d<+U4PJ!C*>K`BS&*7?O{-CY=
z>h+n+N7N26XTPwkdvdpSYNu;rqGwf92-8XK+O<p!t*lDgKqDADUHx3vIVCg!06OnT
A$N&HU

literal 0
HcmV?d00001

diff --git a/src/assets/images/wired/wired_bg_left.png b/src/assets/images/wired/wired_bg_left.png
new file mode 100644
index 0000000000000000000000000000000000000000..f8207987110c51b665df492a2f84c76c56940d44
GIT binary patch
literal 737
zcmeAS@N?(olHy`uVBq!ia0vp^ML@iOgBeIZ|9T=DNHG=%xjQkeJ16rJ$YDu$^mSxl
z*x1kgCy^D%_XzL_aRt&MA|e_Z8n(8!fq{W(X=zneRegPZix)56zJ2?dGiM$=c)-QQ
zB_}6mY;5fA?j9W-T~JWa($X?>=FGKg*B(50@Y=O&KttBBYfJ=E5+y-?!T+%XhO@$Y
zuYhVe3p^r=85sBufiR<}hF1g7q5nKx978JNj$ZQ2b1@V+eBu7*86|0V|1WbqS+0=%
z^lmd}?(J>4FW;8!zFYP7`|rP1vV84_t7Q9+KdzeVxBPO|-1E;rSH<d0KV22O{`%{x
zyLsDhSKWR8{dbkET>tS7lbK!T)6c5p=bKL6v;Vr!r>d(ypFRc}pL`A!jE^^+TvHDe
z{2Xk2@_qhUmHK+q&2>L&uC0mKoOHI!R2z+9p&}nPqu+rmvHS4nna!SdYYgNYMGlFz
zKR0HdToaLK$E4Y!%XdDVPwnT1Lp3Zx9MLlK&dd0GN^Jefu|!~-h0T1+8BY##eHQdk
z%qgs}D>gXUF8WM)g42yhA8MW@Oybu*<F3%U;poGkXAX`Oi`<`o<`+=pdE?EO*al1<
N44$rjF6*2UngGsAOqBot

literal 0
HcmV?d00001

diff --git a/src/assets/images/wired/wired_bg_right.png b/src/assets/images/wired/wired_bg_right.png
new file mode 100644
index 0000000000000000000000000000000000000000..9588ecdd11a110634af466f91e0afa2bd87a77b0
GIT binary patch
literal 1208
zcmWlZe^AnA9LGs9Cq?PXHGh?8Vw!e@bL9_0NevuR`-(qM>uC2)FBIa3o;q`uVxBER
zB@Ik%-KZuSZg?tc2Fz>rO%|=BE~RYK>e4|=r<{kxp8fH8-mlN|e%<ru)0mNV1dH*-
zpin3*jhY03{0GbrpSXh4&CM$Z#0DXBgo08%^nV8ybW!5hi73=Bl1=L;+`#^62Az=%
zvZkiS>2zwfS~8goR_<>B9UwNALTQ=c-swd3YZY2><H4gcg(%dPU;m#C-g{Edf;R(b
zNr{Y#<1e0m5A`H?CLhgMc52TQUo?BJCcOD0J*_oG-o<T08<so`>fXg?&qkJ3a^LOv
zGZPo>%Un;Qij%VsVxi#XthCyxgYb>az-SE9f~JZSv;EWAX!QaQav%?Wq^;n4w&G1!
zN(gO?bTyIzIqs(f(^i76Vt1PwN@6Z$yZ68D^@K-h#wIp>uzeZReG|SK_8w<yD%oF$
zGhOT@U*8Fd?@v37hm{`8A$u7$I<R>4qd#OqzU`c$D2dFT(^b^0ki}BVrtS-{xXXdd
z5=YGPBNXAyH|*jDhPS$8Xt+t4(DrxqF6bU2=!7Xs0#hj|pn8W)mNsL%YvIP7OSr6y
z@w17c3QTj6ZLyx=wPfbLXbMm0dfu}Ox`oWeaVQJBD@(5(qjm;KENX1`w)tk#Dy~ds
z){ciNwzO0&Iw%XC!+p~S6syuIwyS9B(2}}W+<Jn-j$0cVyuL4&$_aLws(-@xKxAn?
z+ofTu_@T<G2s%S0g=$TVr&7^W?Ap&=J2t1bo*8H(%-_j1_RW2m%F!q&)6J3zXm&iG
z-D?rs*Vi~CvL=O_|5eAd=|!JKV?(`1CR)eyPLfWsbIK>V7DdoW%%a_1@$ZK{6Ca&n
zR<ug0)y}HcJ9RU2r_#R@l+WAG+R_)qclhO!{?W6u&i&p3WYKn&bi-!042UL9Z@?EH
zyR!1O=(YRglbV7?3RGELTN&>tdKYUetCtibvyWMKUuq_o?3Rl76>k;qOKbA)cMmI@
zpwNJ){k2H1P%=P!e}ZTn4jCPhUU-CCZqI)VZTkWqJo<6r5TkyRoMUbg*$8rrxdjGM
zZEoqxd)xHf7|FThUVGkv<9<ev*O~oU#D-xX9h}CSt3x{eN^zIQAYv?D*zV^;zll1q
zPe%9RG6-^tS;ivX(|GA&j9~5@vi)_6t2E3YcEe|O_<7K8x*XUdqkD6=6XdDp&sjv1
z#!Cl>3mke_DHzkk;lgS_LXsZ#<vDb4J8w(}`|_&+@kxLL7Cqc9xD8q%2aqsQ56AK>
zI(US4TL;JTIe_?)fCMXgctkJ&T45O=VYD9J_-f%CvRQ9(k@|>wT=7wxb6n|#fvR|!
zA*0|FL9W-RS;TRE2oUEV01;^g;^n<SjL31J7qYBCd}L+<aaagMVUZ5Tzq(Y1(Deas
zQn@H@BR&dSj;0p|amg|R!+e||M>N$e;uC%q5a$Phh;V>-c?O7)LvHlKZ>&WGdH3)&
zP`^D6YU7xTw9?fYBQxalj5_$GDBoRL>Bq&=--tD6Y2{w)+=s2I(pz~HYC;tFJy5jd
Kv?LXURr?<+b3OF{

literal 0
HcmV?d00001

diff --git a/src/components/wired/WiredView.tsx b/src/components/wired/WiredView.tsx
index 0f073ab..73d81e2 100644
--- a/src/components/wired/WiredView.tsx
+++ b/src/components/wired/WiredView.tsx
@@ -1,5 +1,5 @@
 import { ConditionDefinition, TriggerDefinition, WiredActionDefinition } from '@nitrots/nitro-renderer';
-import { FC } from 'react';
+import { FC, Fragment } from 'react';
 import { useWired } from '../../hooks';
 import { WiredActionLayoutView } from './views/actions/WiredActionLayoutView';
 import { WiredConditionLayoutView } from './views/conditions/WiredConditionLayoutView';
@@ -11,11 +11,20 @@ export const WiredView: FC<{}> = props =>
 
     if(!trigger) return null;
 
-    if(trigger instanceof WiredActionDefinition) return WiredActionLayoutView(trigger.code);
+    if(trigger instanceof WiredActionDefinition)
+    {
+        return <Fragment key={ `wired-action-${ trigger.id }-${ trigger.code }` }>{ WiredActionLayoutView(trigger.code) }</Fragment>;
+    }
 
-    if(trigger instanceof TriggerDefinition) return WiredTriggerLayoutView(trigger.code);
+    if(trigger instanceof TriggerDefinition)
+    {
+        return <Fragment key={ `wired-trigger-${ trigger.id }-${ trigger.code }` }>{ WiredTriggerLayoutView(trigger.code) }</Fragment>;
+    }
 
-    if(trigger instanceof ConditionDefinition) return WiredConditionLayoutView(trigger.code);
+    if(trigger instanceof ConditionDefinition)
+    {
+        return <Fragment key={ `wired-condition-${ trigger.id }-${ trigger.code }` }>{ WiredConditionLayoutView(trigger.code) }</Fragment>;
+    }
 
     return null;
 };
diff --git a/src/components/wired/views/WiredBaseView.tsx b/src/components/wired/views/WiredBaseView.tsx
index 681cb4b..0858b71 100644
--- a/src/components/wired/views/WiredBaseView.tsx
+++ b/src/components/wired/views/WiredBaseView.tsx
@@ -1,6 +1,8 @@
 import { GetRoomEngine, GetSessionDataManager } from '@nitrots/nitro-renderer';
 import { CSSProperties, FC, PropsWithChildren, ReactNode, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType, WiredSelectionVisualizer } from '../../../api';
+import wiredBgLeft from '../../../assets/images/wired/wired_bg_left.png';
+import wiredBgRight from '../../../assets/images/wired/wired_bg_right.png';
 import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { useWired, useWiredTools } from '../../../hooks';
 import { WiredFurniSelectorView } from './WiredFurniSelectorView';
@@ -20,6 +22,7 @@ export interface WiredBaseViewProps
 
 export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
 {
+    const WIRED_CARD_WIDTH = 244;
     const { wiredType = '', requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, children = null, hasSpecialInput = false, cardStyle = undefined, footer = null, footerCollapsible = true, selectionPreview = null } = props;
     const [ wiredName, setWiredName ] = useState<string>(null);
     const [ needsSave, setNeedsSave ] = useState<boolean>(false);
@@ -122,64 +125,53 @@ export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
 
     const resolvedCardStyle: CSSProperties = { ...cardStyle };
 
-    if(resolvedCardStyle.width !== undefined)
-    {
-        if(typeof resolvedCardStyle.width === 'number')
-        {
-            resolvedCardStyle.maxWidth = Math.min(resolvedCardStyle.width, 324);
-        }
-        else if(typeof resolvedCardStyle.width === 'string')
-        {
-            const match = resolvedCardStyle.width.trim().match(/^(\d+(?:\.\d+)?)px$/i);
-
-            resolvedCardStyle.maxWidth = match ? `${ Math.min(parseFloat(match[1]), 324) }px` : resolvedCardStyle.width;
-        }
-
-        delete resolvedCardStyle.width;
-    }
-
-    if(resolvedCardStyle.minWidth === undefined) resolvedCardStyle.minWidth = 216;
-    if(resolvedCardStyle.maxWidth === undefined) resolvedCardStyle.maxWidth = 'min(90vw, 324px)';
+    resolvedCardStyle.width = WIRED_CARD_WIDTH;
+    resolvedCardStyle.minWidth = WIRED_CARD_WIDTH;
+    resolvedCardStyle.maxWidth = WIRED_CARD_WIDTH;
+    resolvedCardStyle.resize = 'none';
 
     return (
         <NitroCardView className="nitro-wired" theme="primary-slim" uniqueKey="nitro-wired" isResizable={ false } style={ resolvedCardStyle }>
             <NitroCardHeaderView classNames={ [ 'nitro-wired__header' ] } headerText={ LocalizeText('wiredfurni.title') } onCloseClick={ onClose } />
-            <NitroCardContentView classNames={ [ 'nitro-wired__content' ] } gap={ 2 }>
+            <NitroCardContentView classNames={ [ 'nitro-wired__content' ] } gap={ 0 }>
                 <div className="nitro-wired__section nitro-wired__summary">
-                    <div className="flex items-center justify-center gap-1">
-                        <i className={ `icon icon-wired-${ wiredType }` } />
+                    <img className="nitro-wired__summary-bg nitro-wired__summary-bg--left" src={ wiredBgLeft } alt="" />
+                    <img className="nitro-wired__summary-bg nitro-wired__summary-bg--right" src={ wiredBgRight } alt="" />
+                    <div className="nitro-wired__summary-copy">
                         <Text bold className="nitro-wired__summary-title">{ wiredName }</Text>
                     </div>
                 </div>
-                { !!children && <div className="nitro-wired__divider" /> }
-                { !!children && <div className="nitro-wired__section nitro-wired__section--body">{ children }</div> }
-                { (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) &&
-                    <>
-                        <div className="nitro-wired__divider" />
-                        <div className="nitro-wired__section nitro-wired__section--selector">
-                            { selectionPreview || <WiredFurniSelectorView /> }
-                        </div>
-                    </> }
-                { footer &&
-                    <>
-                        <div className="nitro-wired__divider" />
-                        <div className="nitro-wired__section nitro-wired__section--footer">
-                            { footerCollapsible
-                                ? (
-                                    <>
-                                        <button className="nitro-wired__advanced-toggle" type="button" onClick={ () => setShowFooter(value => !value) }>
-                                            { LocalizeText(showFooter ? 'wiredfurni.params.sources.collapse' : 'wiredfurni.params.sources.expand') }
-                                        </button>
-                                        { showFooter && <div className="nitro-wired__advanced-body">{ footer }</div> }
-                                    </>
-                                )
-                                : footer }
-                        </div>
-                    </> }
-                <div className="nitro-wired__divider" />
-                <div className="flex items-center gap-1 nitro-wired__actions">
-                    <Button disabled={ !roomSettings.canModify } fullWidth variant="success" classNames={ [ 'nitro-wired__button', 'nitro-wired__button--primary' ] } onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</Button>
-                    <Button fullWidth variant="secondary" classNames={ [ 'nitro-wired__button', 'nitro-wired__button--secondary' ] } onClick={ onClose }>{ LocalizeText('cancel') }</Button>
+                <div className="nitro-wired__body">
+                    { !!children && <div className="nitro-wired__divider" /> }
+                    { !!children && <div className="nitro-wired__section nitro-wired__section--body">{ children }</div> }
+                    { (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) &&
+                        <>
+                            <div className="nitro-wired__divider" />
+                            <div className="nitro-wired__section nitro-wired__section--selector">
+                                { selectionPreview || <WiredFurniSelectorView /> }
+                            </div>
+                        </> }
+                    { footer &&
+                        <>
+                            <div className="nitro-wired__divider" />
+                            <div className="nitro-wired__section nitro-wired__section--footer">
+                                { footerCollapsible
+                                    ? (
+                                        <>
+                                            <button className="nitro-wired__advanced-toggle" type="button" onClick={ () => setShowFooter(value => !value) }>
+                                                { LocalizeText(showFooter ? 'wiredfurni.params.sources.collapse' : 'wiredfurni.params.sources.expand') }
+                                            </button>
+                                            { showFooter && <div className="nitro-wired__advanced-body">{ footer }</div> }
+                                        </>
+                                    )
+                                    : footer }
+                            </div>
+                        </> }
+                    <div className="nitro-wired__divider" />
+                    <div className="flex items-center gap-1 nitro-wired__actions">
+                        <Button disabled={ !roomSettings.canModify } fullWidth variant="success" classNames={ [ 'nitro-wired__button', 'nitro-wired__button--primary' ] } onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</Button>
+                        <Button fullWidth variant="secondary" classNames={ [ 'nitro-wired__button', 'nitro-wired__button--secondary' ] } onClick={ onClose }>{ LocalizeText('cancel') }</Button>
+                    </div>
                 </div>
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/components/wired/views/WiredFurniSelectionSourceRow.tsx b/src/components/wired/views/WiredFurniSelectionSourceRow.tsx
index b064d80..3037205 100644
--- a/src/components/wired/views/WiredFurniSelectionSourceRow.tsx
+++ b/src/components/wired/views/WiredFurniSelectionSourceRow.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { FaChevronLeft, FaChevronRight, FaMousePointer } from 'react-icons/fa';
 import { LocalizeText } from '../../../api';
 import { Button, Text } from '../../../common';
@@ -16,13 +16,14 @@ interface WiredFurniSelectionSourceRowProps
     selectionLimit: number;
     selectionEnabledValues: number[];
     showSelectionToggle?: boolean;
+    headerContent?: ReactNode;
     onChange: (value: number) => void;
     onSelectionActivate?: () => void;
 }
 
 export const WiredFurniSelectionSourceRow: FC<WiredFurniSelectionSourceRowProps> = props =>
 {
-    const { title = '', titleIsLiteral = false, options = [], value = 0, selectionKind = 'primary', selectionActive = false, selectionCount = 0, selectionLimit = 0, selectionEnabledValues = [], showSelectionToggle = true, onChange = null, onSelectionActivate = null } = props;
+    const { title = '', titleIsLiteral = false, options = [], value = 0, selectionKind = 'primary', selectionActive = false, selectionCount = 0, selectionLimit = 0, selectionEnabledValues = [], showSelectionToggle = true, headerContent = null, onChange = null, onSelectionActivate = null } = props;
     const currentIndex = Math.max(0, options.findIndex(option => (option.value === value)));
     const currentOption = options[currentIndex] ?? options[0];
     const canActivateSelection = !!onSelectionActivate && selectionEnabledValues.includes(currentOption?.value);
@@ -45,6 +46,7 @@ export const WiredFurniSelectionSourceRow: FC<WiredFurniSelectionSourceRowProps>
         <div className="nitro-wired__source-row">
             <div className="flex items-center justify-between gap-2">
                 <Text>{ resolvedTitle }</Text>
+                { headerContent }
                 { showSelectionToggle &&
                     <button
                         type="button"
diff --git a/src/components/wired/views/WiredSourcesSelector.tsx b/src/components/wired/views/WiredSourcesSelector.tsx
index 8a38be7..74cefcf 100644
--- a/src/components/wired/views/WiredSourcesSelector.tsx
+++ b/src/components/wired/views/WiredSourcesSelector.tsx
@@ -46,10 +46,10 @@ const FURNI_SOURCE_LABEL_ORDER = [
 const USER_SOURCE_LABEL_ORDER = [
     'wiredfurni.params.sources.users.0',
     'wiredfurni.params.sources.users.11',
-    'wiredfurni.params.sources.users.100',
-    'wiredfurni.params.sources.users.101',
     'wiredfurni.params.sources.users.200',
     'wiredfurni.params.sources.users.201',
+    'wiredfurni.params.sources.users.100',
+    'wiredfurni.params.sources.users.101',
     'wiredfurni.params.sources.users.900'
 ];
 
@@ -219,7 +219,12 @@ export const WiredSourcesSelector: FC<WiredSourcesSelectorProps> = props =>
     const { trigger = null } = useWired();
     const availableUserSources = useAvailableUserSources(trigger, userSources, usersTitle, allowClickedUserSource);
     const orderedFurniSources = useMemo(() => sortWiredSourceOptions(furniSources, 'furni'), [ furniSources ]);
-    const orderedUserSources = useMemo(() => sortWiredSourceOptions(availableUserSources, 'users'), [ availableUserSources ]);
+    const orderedUserSources = useMemo(() =>
+    {
+        if(usersTitle === BOT_SOURCE_TITLE) return [ ...availableUserSources ];
+
+        return sortWiredSourceOptions(availableUserSources, 'users');
+    }, [ availableUserSources, usersTitle ]);
 
     useEffect(() =>
     {
diff --git a/src/components/wired/views/actions/WiredActionLayoutView.tsx b/src/components/wired/views/actions/WiredActionLayoutView.tsx
index 2984a42..5f5972c 100644
--- a/src/components/wired/views/actions/WiredActionLayoutView.tsx
+++ b/src/components/wired/views/actions/WiredActionLayoutView.tsx
@@ -55,6 +55,7 @@ import { WiredActionSetFurniStateToView } from './WiredActionSetFurniStateToView
 import { WiredActionTeleportView } from './WiredActionTeleportView';
 import { WiredActionToggleFurniStateView } from './WiredActionToggleFurniStateView';
 import { WiredActionUnfreezeView } from './WiredActionUnfreezeView';
+import { WiredActionNegativeCallAnotherStackView } from './WiredActionNegativeCallAnotherStackView';
 import { WiredExtraFilterFurniView } from '../extras/WiredExtraFilterFurniView';
 import { WiredExtraFilterFurniByVariableView } from '../extras/WiredExtraFilterFurniByVariableView';
 import { WiredExtraFilterUserView } from '../extras/WiredExtraFilterUserView';
@@ -103,6 +104,8 @@ export const WiredActionLayoutView = (code: number) =>
             return <WiredActionBotTeleportView />;
         case WiredActionLayoutCode.CALL_ANOTHER_STACK:
             return <WiredActionCallAnotherStackView />;
+        case WiredActionLayoutCode.NEG_CALL_ANOTHER_STACK:
+            return <WiredActionNegativeCallAnotherStackView />;
         case WiredActionLayoutCode.CHASE:
             return <WiredActionChaseView />;
         case WiredActionLayoutCode.CHAT:
@@ -251,6 +254,8 @@ export const WiredActionLayoutView = (code: number) =>
             return <WiredExtraTextInputVariableView />;
         case WiredActionLayoutCode.SEND_SIGNAL:
             return <WiredActionSendSignalView />;
+        case WiredActionLayoutCode.NEG_SEND_SIGNAL:
+            return <WiredActionSendSignalView />;
     }
 
     return null;
diff --git a/src/components/wired/views/actions/WiredActionNegativeCallAnotherStackView.tsx b/src/components/wired/views/actions/WiredActionNegativeCallAnotherStackView.tsx
new file mode 100644
index 0000000..871dc9c
--- /dev/null
+++ b/src/components/wired/views/actions/WiredActionNegativeCallAnotherStackView.tsx
@@ -0,0 +1,36 @@
+import { FC, useEffect, useState } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { useWired } from '../../../../hooks';
+import { WiredSourcesSelector } from '../WiredSourcesSelector';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionNegativeCallAnotherStackView: FC<{}> = () =>
+{
+    const { trigger = null, setIntParams = null } = useWired();
+    const [ furniSource, setFurniSource ] = useState<number>(() =>
+    {
+        if(trigger?.intData?.length >= 1) return trigger.intData[0];
+
+        return (trigger?.selectedItems?.length ?? 0) > 0 ? 100 : 0;
+    });
+
+    useEffect(() =>
+    {
+        if(!trigger) return;
+
+        if(trigger.intData.length >= 1) setFurniSource(trigger.intData[0]);
+        else setFurniSource((trigger.selectedItems?.length ?? 0) > 0 ? 100 : 0);
+    }, [ trigger ]);
+
+    const onChangeFurniSource = (next: number) => setFurniSource(next);
+
+    const save = () => setIntParams([ furniSource ]);
+
+    return (
+        <WiredActionBaseView
+            hasSpecialInput={ true }
+            requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT }
+            save={ save }
+            footer={ <WiredSourcesSelector showFurni={ true } furniSource={ furniSource } onChangeFurni={ onChangeFurniSource } /> } />
+    );
+};
diff --git a/src/components/wired/views/extras/WiredExtraContextVariableView.tsx b/src/components/wired/views/extras/WiredExtraContextVariableView.tsx
index ec3c1e3..9605d24 100644
--- a/src/components/wired/views/extras/WiredExtraContextVariableView.tsx
+++ b/src/components/wired/views/extras/WiredExtraContextVariableView.tsx
@@ -9,20 +9,37 @@ const MAX_NAME_LENGTH = 40;
 
 const normalizeVariableName = (value: string) =>
 {
-    let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
+    let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
 
     if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
 
     while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
     {
-        normalizedValue = normalizedValue.substring(1).trim();
+        normalizedValue = normalizedValue.substring(1);
     }
 
+    normalizedValue = normalizedValue.replace(/\s+/g, '_');
     normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
 
     return normalizedValue.slice(0, MAX_NAME_LENGTH);
 };
 
+const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
+{
+    if(event.key !== ' ') return;
+
+    event.preventDefault();
+
+    const input = event.currentTarget;
+    const start = (input.selectionStart ?? input.value.length);
+    const end = (input.selectionEnd ?? start);
+    const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
+
+    setValue(normalizeVariableName(nextValue));
+
+    window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
+};
+
 export const WiredExtraContextVariableView: FC<{}> = () =>
 {
     const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
@@ -48,7 +65,7 @@ export const WiredExtraContextVariableView: FC<{}> = () =>
             <div className="flex flex-col gap-2">
                 <div className="flex flex-col gap-1">
                     <Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
-                    <NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
+                    <NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
                 </div>
 
                 <div className="flex flex-col gap-1">
diff --git a/src/components/wired/views/extras/WiredExtraRoomVariableView.tsx b/src/components/wired/views/extras/WiredExtraRoomVariableView.tsx
index 873dd86..4931d26 100644
--- a/src/components/wired/views/extras/WiredExtraRoomVariableView.tsx
+++ b/src/components/wired/views/extras/WiredExtraRoomVariableView.tsx
@@ -12,20 +12,37 @@ const MAX_NAME_LENGTH = 40;
 
 const normalizeVariableName = (value: string) =>
 {
-    let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
+    let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
 
     if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
 
     while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
     {
-        normalizedValue = normalizedValue.substring(1).trim();
+        normalizedValue = normalizedValue.substring(1);
     }
 
+    normalizedValue = normalizedValue.replace(/\s+/g, '_');
     normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
 
     return normalizedValue.slice(0, MAX_NAME_LENGTH);
 };
 
+const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
+{
+    if(event.key !== ' ') return;
+
+    event.preventDefault();
+
+    const input = event.currentTarget;
+    const start = (input.selectionStart ?? input.value.length);
+    const end = (input.selectionEnd ?? start);
+    const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
+
+    setValue(normalizeVariableName(nextValue));
+
+    window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
+};
+
 export const WiredExtraRoomVariableView: FC<{}> = () =>
 {
     const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
@@ -57,7 +74,7 @@ export const WiredExtraRoomVariableView: FC<{}> = () =>
             <div className="flex flex-col gap-2">
                 <div className="flex flex-col gap-1">
                     <Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
-                    <NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
+                    <NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
                 </div>
 
                 <div className="flex flex-col gap-1">
diff --git a/src/components/wired/views/extras/WiredExtraUserVariableView.tsx b/src/components/wired/views/extras/WiredExtraUserVariableView.tsx
index 6341494..db0208e 100644
--- a/src/components/wired/views/extras/WiredExtraUserVariableView.tsx
+++ b/src/components/wired/views/extras/WiredExtraUserVariableView.tsx
@@ -12,20 +12,37 @@ const MAX_NAME_LENGTH = 40;
 
 const normalizeVariableName = (value: string) =>
 {
-    let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
+    let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
 
     if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
 
     while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
     {
-        normalizedValue = normalizedValue.substring(1).trim();
+        normalizedValue = normalizedValue.substring(1);
     }
 
+    normalizedValue = normalizedValue.replace(/\s+/g, '_');
     normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
 
     return normalizedValue.slice(0, MAX_NAME_LENGTH);
 };
 
+const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
+{
+    if(event.key !== ' ') return;
+
+    event.preventDefault();
+
+    const input = event.currentTarget;
+    const start = (input.selectionStart ?? input.value.length);
+    const end = (input.selectionEnd ?? start);
+    const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
+
+    setValue(normalizeVariableName(nextValue));
+
+    window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
+};
+
 interface WiredExtraVariableViewProps
 {
     availabilityRoomValue: number;
@@ -76,7 +93,7 @@ export const WiredExtraVariableView: FC<WiredExtraVariableViewProps> = props =>
             <div className="flex flex-col gap-2">
                 <div className="flex flex-col gap-1">
                     <Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
-                    <NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
+                    <NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
                 </div>
 
                 <div className="flex flex-col gap-1">
diff --git a/src/components/wired/views/extras/WiredExtraVariableEchoView.tsx b/src/components/wired/views/extras/WiredExtraVariableEchoView.tsx
index 0289a75..c41fa3f 100644
--- a/src/components/wired/views/extras/WiredExtraVariableEchoView.tsx
+++ b/src/components/wired/views/extras/WiredExtraVariableEchoView.tsx
@@ -34,20 +34,37 @@ const TARGET_BUTTONS: Array<{ key: EchoSourceTarget; icon: string; }> = [
 
 const normalizeVariableName = (value: string) =>
 {
-    let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
+    let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
 
     if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
 
     while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
     {
-        normalizedValue = normalizedValue.substring(1).trim();
+        normalizedValue = normalizedValue.substring(1);
     }
 
+    normalizedValue = normalizedValue.replace(/\s+/g, '_');
     normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
 
     return normalizedValue.slice(0, MAX_NAME_LENGTH);
 };
 
+const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
+{
+    if(event.key !== ' ') return;
+
+    event.preventDefault();
+
+    const input = event.currentTarget;
+    const start = (input.selectionStart ?? input.value.length);
+    const end = (input.selectionEnd ?? start);
+    const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
+
+    setValue(normalizeVariableName(nextValue));
+
+    window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
+};
+
 const parseEditorData = (value: string): IEchoEditorData =>
 {
     if(!value?.trim().startsWith('{')) return {};
@@ -173,7 +190,7 @@ export const WiredExtraVariableEchoView: FC<{}> = () =>
             <div className="flex flex-col gap-2">
                 <div className="flex flex-col gap-1">
                     <Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
-                    <NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
+                    <NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
                 </div>
 
                 <div className="nitro-wired__give-var-heading">
diff --git a/src/components/wired/views/extras/WiredExtraVariableReferenceView.tsx b/src/components/wired/views/extras/WiredExtraVariableReferenceView.tsx
index 47562d1..ceb9f00 100644
--- a/src/components/wired/views/extras/WiredExtraVariableReferenceView.tsx
+++ b/src/components/wired/views/extras/WiredExtraVariableReferenceView.tsx
@@ -38,20 +38,37 @@ interface IVariableReferenceEditorData
 
 const normalizeVariableName = (value: string) =>
 {
-    let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
+    let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
 
     if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
 
     while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
     {
-        normalizedValue = normalizedValue.substring(1).trim();
+        normalizedValue = normalizedValue.substring(1);
     }
 
+    normalizedValue = normalizedValue.replace(/\s+/g, '_');
     normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
 
     return normalizedValue.slice(0, MAX_NAME_LENGTH);
 };
 
+const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
+{
+    if(event.key !== ' ') return;
+
+    event.preventDefault();
+
+    const input = event.currentTarget;
+    const start = (input.selectionStart ?? input.value.length);
+    const end = (input.selectionEnd ?? start);
+    const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
+
+    setValue(normalizeVariableName(nextValue));
+
+    window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
+};
+
 const parseEditorData = (value: string): IVariableReferenceEditorData =>
 {
     if(!value?.trim().startsWith('{')) return {};
@@ -187,7 +204,7 @@ export const WiredExtraVariableReferenceView: FC<{}> = () =>
             <div className="flex flex-col gap-2">
                 <div className="flex flex-col gap-1">
                     <Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
-                    <NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
+                    <NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
                 </div>
 
                 <div className="flex flex-col gap-1">
diff --git a/src/components/wired/views/extras/WiredExtraVariableTextConnectorView.tsx b/src/components/wired/views/extras/WiredExtraVariableTextConnectorView.tsx
index 6468bd4..f84035a 100644
--- a/src/components/wired/views/extras/WiredExtraVariableTextConnectorView.tsx
+++ b/src/components/wired/views/extras/WiredExtraVariableTextConnectorView.tsx
@@ -5,6 +5,26 @@ import { useWired } from '../../../../hooks';
 import { WiredExtraBaseView } from './WiredExtraBaseView';
 
 const DEFAULT_CONNECTOR_PLACEHOLDER = '0=text 1\n1=text 2\n2 = text 3';
+const MAX_CONNECTOR_LINES = 30;
+const MAX_CONNECTOR_CHARACTERS = 1000;
+
+const truncateMappingsText = (value: string) =>
+{
+    const normalizedValue = (value ?? '').replace(/\r/g, '');
+    const lines = normalizedValue.split('\n');
+    const limitedByLines = lines.slice(0, MAX_CONNECTOR_LINES).join('\n');
+
+    return (limitedByLines.length > MAX_CONNECTOR_CHARACTERS)
+        ? limitedByLines.slice(0, MAX_CONNECTOR_CHARACTERS)
+        : limitedByLines;
+};
+
+const getLineCount = (value: string) =>
+{
+    if(!value.length) return 0;
+
+    return value.split('\n').length;
+};
 
 export const WiredExtraVariableTextConnectorView: FC<{}> = () =>
 {
@@ -15,7 +35,7 @@ export const WiredExtraVariableTextConnectorView: FC<{}> = () =>
     {
         if(!trigger) return;
 
-        setMappingsText(trigger.stringData || '');
+        setMappingsText(truncateMappingsText(trigger.stringData || ''));
     }, [ trigger ]);
 
     const save = () =>
@@ -24,6 +44,8 @@ export const WiredExtraVariableTextConnectorView: FC<{}> = () =>
         setStringParam(mappingsText ?? '');
     };
 
+    const handleTextChange = (value: string) => setMappingsText(truncateMappingsText(value));
+
     const placeholderText = (() =>
     {
         const localizedText = LocalizeText('wiredfurni.params.variables.connect_text.caption');
@@ -34,15 +56,20 @@ export const WiredExtraVariableTextConnectorView: FC<{}> = () =>
         return localizedText;
     })();
 
+    const lineCount = getLineCount(mappingsText);
+    const characterCount = mappingsText.length;
+
     return (
         <WiredExtraBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save } cardStyle={ { width: 400 } }>
             <div className="flex flex-col gap-2">
                 <Text bold>{ LocalizeText('wiredfurni.params.variables.connect_text.title') }</Text>
                 <textarea
                     className="form-control form-control-sm nitro-wired__resizable-textarea"
+                    maxLength={ MAX_CONNECTOR_CHARACTERS }
                     placeholder={ placeholderText }
                     value={ mappingsText }
-                    onChange={ event => setMappingsText(event.target.value) } />
+                    onChange={ event => handleTextChange(event.target.value) } />
+                <Text small>{ `${ lineCount }/${ MAX_CONNECTOR_LINES } righe - ${ characterCount }/${ MAX_CONNECTOR_CHARACTERS } caratteri` }</Text>
             </div>
         </WiredExtraBaseView>
     );
diff --git a/src/components/wired/views/selectors/WiredNeighborhoodSelectorView.tsx b/src/components/wired/views/selectors/WiredNeighborhoodSelectorView.tsx
new file mode 100644
index 0000000..c042da7
--- /dev/null
+++ b/src/components/wired/views/selectors/WiredNeighborhoodSelectorView.tsx
@@ -0,0 +1,456 @@
+import { GetRoomEngine } from '@nitrots/nitro-renderer';
+import { CSSProperties, FC, MouseEvent as ReactMouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import { FaMinus, FaPlus, FaTimes } from 'react-icons/fa';
+import { MdGridOn } from 'react-icons/md';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import sourceFurniIcon from '../../../../assets/images/wired/source_furni.png';
+import sourceUserIcon from '../../../../assets/images/wired/source_user.png';
+import { Button, Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredFurniSelectionSourceRow } from '../WiredFurniSelectionSourceRow';
+import { sortWiredSourceOptions, useAvailableUserSources } from '../WiredSourcesSelector';
+import { WiredSelectorBaseView } from './WiredSelectorBaseView';
+
+const SOURCE_USER_TRIGGER = 0;
+const SOURCE_USER_SIGNAL = 1;
+const SOURCE_USER_CLICKED = 2;
+const SOURCE_FURNI_TRIGGER = 3;
+const SOURCE_FURNI_PICKED = 4;
+const SOURCE_FURNI_SIGNAL = 5;
+
+const USER_SOURCES = sortWiredSourceOptions([
+    { value: SOURCE_USER_TRIGGER, label: 'wiredfurni.params.sources.users.0' },
+    { value: SOURCE_USER_SIGNAL, label: 'wiredfurni.params.sources.users.201' },
+    { value: SOURCE_USER_CLICKED, label: 'wiredfurni.params.sources.users.11' }
+], 'users');
+
+const FURNI_SOURCES = sortWiredSourceOptions([
+    { value: SOURCE_FURNI_TRIGGER, label: 'wiredfurni.params.sources.furni.0' },
+    { value: SOURCE_FURNI_PICKED, label: 'wiredfurni.params.sources.furni.100' },
+    { value: SOURCE_FURNI_SIGNAL, label: 'wiredfurni.params.sources.furni.201' }
+], 'furni');
+
+const SOURCE_GROUP_BUTTONS = [
+    { key: 'user', icon: sourceUserIcon, isUserGroup: true },
+    { key: 'furni', icon: sourceFurniIcon, isUserGroup: false }
+] as const;
+
+const TILE_W = 22;
+const TILE_H = 11;
+const GRID_RANGE = 4;
+const CX = GRID_RANGE * TILE_W + TILE_W / 2;
+const CY = GRID_RANGE * TILE_H + TILE_H / 2;
+const GRID_PX_W = (GRID_RANGE * 2 + 1) * TILE_W;
+const GRID_PX_H = (GRID_RANGE * 2 + 1) * TILE_H;
+
+type Tile = { x: number; y: number };
+
+const tileIncluded = (tiles: Tile[], x: number, y: number) => tiles.some(tile => (tile.x === x && tile.y === y));
+const tileLeft = (rx: number, ry: number) => CX + (rx - ry) * (TILE_W / 2) - TILE_W / 2;
+const tileTop = (rx: number, ry: number) => CY + (rx + ry) * (TILE_H / 2) - TILE_H / 2;
+
+interface NeighborhoodGridProps
+{
+    selectedTiles: Tile[];
+    targetTile: Tile;
+    invert: boolean;
+    onSetTile: (x: number, y: number, selected: boolean) => void;
+    onMoveTarget: (x: number, y: number) => void;
+    targetPlacementMode: boolean;
+}
+
+const NeighborhoodGrid: FC<NeighborhoodGridProps> = props =>
+{
+    const { selectedTiles = [], targetTile, invert = false, onSetTile = null, onMoveTarget = null, targetPlacementMode = false } = props;
+    const [ dragMode, setDragMode ] = useState<'add' | 'remove' | 'target' | null>(null);
+    const tiles: JSX.Element[] = [];
+
+    useEffect(() =>
+    {
+        const stopDragging = () => setDragMode(null);
+
+        window.addEventListener('mouseup', stopDragging);
+
+        return () => window.removeEventListener('mouseup', stopDragging);
+    }, []);
+
+    const beginTileDrag = (event: ReactMouseEvent<HTMLDivElement>, rx: number, ry: number, isSelected: boolean) =>
+    {
+        event.preventDefault();
+
+        if(targetPlacementMode)
+        {
+            setDragMode('target');
+            onMoveTarget && onMoveTarget(rx, ry);
+            return;
+        }
+
+        const nextDragMode = isSelected ? 'remove' : 'add';
+
+        setDragMode(nextDragMode);
+        onSetTile && onSetTile(rx, ry, nextDragMode === 'add');
+    };
+
+    const continueTileDrag = (event: ReactMouseEvent<HTMLDivElement>, rx: number, ry: number) =>
+    {
+        if(!(event.buttons & 1) || !dragMode) return;
+
+        if(dragMode === 'target')
+        {
+            onMoveTarget && onMoveTarget(rx, ry);
+            return;
+        }
+
+        onSetTile && onSetTile(rx, ry, dragMode === 'add');
+    };
+
+    for(let ry = -GRID_RANGE; ry <= GRID_RANGE; ry++)
+    {
+        for(let rx = -GRID_RANGE; rx <= GRID_RANGE; rx++)
+        {
+            const isTarget = (rx === targetTile.x && ry === targetTile.y);
+            const isSelected = tileIncluded(selectedTiles, rx, ry);
+            const isActive = invert ? !isSelected : isSelected;
+            const left = tileLeft(rx, ry);
+            const top = tileTop(rx, ry);
+            const zIndex = rx + ry + GRID_RANGE * 2 + 10;
+
+            const diamondStyle: CSSProperties = {
+                position: 'absolute',
+                width: TILE_W,
+                height: TILE_H,
+                left,
+                top,
+                clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
+                backgroundColor: isActive ? '#3399ff' : '#2a3042',
+                cursor: 'pointer',
+                zIndex,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: isTarget ? '#ffffff' : 'transparent',
+                fontSize: 10
+            };
+
+            const borderStyle: CSSProperties = {
+                position: 'absolute',
+                width: TILE_W + (isTarget ? 6 : 2),
+                height: TILE_H + (isTarget ? 6 : 2),
+                left: left - (isTarget ? 3 : 1),
+                top: top - (isTarget ? 3 : 1),
+                clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
+                backgroundColor: isTarget ? '#ffffff' : (isActive ? '#1166cc' : '#1a2032'),
+                zIndex: zIndex - 1,
+                pointerEvents: 'none'
+            };
+
+            const outlineStyle: CSSProperties = {
+                position: 'absolute',
+                width: TILE_W + 4,
+                height: TILE_H + 4,
+                left: left - 2,
+                top: top - 2,
+                zIndex: zIndex + 1,
+                pointerEvents: 'none',
+                overflow: 'visible'
+            };
+
+            tiles.push(
+                <div key={ `border-${ rx }-${ ry }` } style={ borderStyle } />,
+                isTarget && (
+                    <svg key={ `outline-${ rx }-${ ry }` } style={ outlineStyle } viewBox={ `0 0 ${ TILE_W + 4 } ${ TILE_H + 4 }` }>
+                        <polygon
+                            points={ `${ (TILE_W + 4) / 2 },2 ${ TILE_W + 2 },${ (TILE_H + 4) / 2 } ${ (TILE_W + 4) / 2 },${ TILE_H + 2 } 2,${ (TILE_H + 4) / 2 }` }
+                            fill="none"
+                            stroke="#ffffff"
+                            strokeWidth="1" />
+                    </svg>
+                ),
+                <div
+                    key={ `tile-${ rx }-${ ry }` }
+                    style={ diamondStyle }
+                    title={ `(${ rx }, ${ ry })` }
+                    onMouseDown={ event => beginTileDrag(event, rx, ry, isSelected) }
+                    onMouseEnter={ event => continueTileDrag(event, rx, ry) } />
+            );
+        }
+    }
+
+    return (
+        <div style={ { position: 'relative', width: GRID_PX_W, height: GRID_PX_H, flexShrink: 0 } } onContextMenu={ event => event.preventDefault() }>
+            { tiles }
+        </div>
+    );
+};
+
+export const WiredNeighborhoodSelectorView: FC<{}> = () =>
+{
+    const [ selectedTiles, setSelectedTiles ] = useState<Tile[]>([]);
+    const [ filterExisting, setFilterExisting ] = useState(false);
+    const [ invert, setInvert ] = useState(false);
+    const [ sourceType, setSourceType ] = useState(SOURCE_USER_TRIGGER);
+    const [ targetTile, setTargetTile ] = useState<Tile>({ x: 0, y: 0 });
+    const [ targetPlacementMode, setTargetPlacementMode ] = useState(false);
+    const [ curX, setCurX ] = useState(0);
+    const [ curY, setCurY ] = useState(0);
+
+    const { trigger = null, furniIds = [], setIntParams } = useWired();
+    const availableUserSources = useAvailableUserSources(trigger, USER_SOURCES);
+
+    useEffect(() =>
+    {
+        GetRoomEngine().areaSelectionManager.clearHighlight();
+        GetRoomEngine().areaSelectionManager.deactivate();
+    }, []);
+
+    useEffect(() =>
+    {
+        if(!trigger) return;
+
+        const params = trigger.intData;
+
+        if(params.length >= 1) setSourceType(params[0]);
+        if(params.length >= 2) setFilterExisting(params[1] === 1);
+        if(params.length >= 3) setInvert(params[2] === 1);
+        if(params.length >= 5) setTargetTile({ x: params[3], y: params[4] });
+        else setTargetTile({ x: 0, y: 0 });
+
+        if(params.length < 6)
+        {
+            setSelectedTiles([]);
+            return;
+        }
+
+        const tileCount = params[5];
+        const nextTiles: Tile[] = [];
+
+        for(let index = 0; index < tileCount; index++)
+        {
+            const tileIndex = 6 + index * 2;
+
+            if((tileIndex + 1) >= params.length) break;
+
+            nextTiles.push({ x: params[tileIndex], y: params[tileIndex + 1] });
+        }
+
+        setSelectedTiles(nextTiles);
+    }, [ trigger ]);
+
+    useEffect(() =>
+    {
+        if(sourceType !== SOURCE_USER_CLICKED) return;
+        if(availableUserSources.some(option => option.value === SOURCE_USER_CLICKED)) return;
+
+        setSourceType(SOURCE_USER_TRIGGER);
+    }, [ availableUserSources, sourceType ]);
+
+    const save = useCallback(() =>
+    {
+        setIntParams([
+            sourceType,
+            filterExisting ? 1 : 0,
+            invert ? 1 : 0,
+            targetTile.x,
+            targetTile.y,
+            selectedTiles.length,
+            ...selectedTiles.flatMap(tile => [ tile.x, tile.y ])
+        ]);
+    }, [ filterExisting, invert, selectedTiles, setIntParams, sourceType, targetTile.x, targetTile.y ]);
+
+    const setTileSelection = useCallback((x: number, y: number, selected: boolean) =>
+    {
+        setSelectedTiles(previous =>
+        {
+            const alreadySelected = tileIncluded(previous, x, y);
+
+            if(selected)
+            {
+                if(alreadySelected) return previous;
+
+                return [ ...previous, { x, y } ];
+            }
+
+            if(!alreadySelected) return previous;
+
+            return previous.filter(tile => !(tile.x === x && tile.y === y));
+        });
+    }, []);
+
+    const activeSources = useMemo(() => ((sourceType <= SOURCE_USER_CLICKED) ? availableUserSources : FURNI_SOURCES), [ availableUserSources, sourceType ]);
+    const isUserGroup = sourceType <= SOURCE_USER_CLICKED;
+    const currentIndex = Math.max(0, activeSources.findIndex(option => (option.value === sourceType)));
+    const currentSourceType = activeSources[currentIndex]?.value ?? sourceType;
+
+    useEffect(() =>
+    {
+        if(currentSourceType === sourceType) return;
+
+        setSourceType(currentSourceType);
+    }, [ currentSourceType, sourceType ]);
+
+    const changeGroup = useCallback((nextIsUserGroup: boolean) =>
+    {
+        if(nextIsUserGroup === isUserGroup) return;
+
+        const nextOptions = nextIsUserGroup ? availableUserSources : FURNI_SOURCES;
+        const nextIndex = Math.min(currentIndex, Math.max(0, nextOptions.length - 1));
+        const nextOption = nextOptions[nextIndex] ?? nextOptions[0];
+
+        if(nextOption) setSourceType(nextOption.value);
+    }, [ availableUserSources, currentIndex, isUserGroup ]);
+
+    const addTile = useCallback(() =>
+    {
+        setSelectedTiles(previous =>
+        {
+            if(tileIncluded(previous, curX, curY)) return previous;
+
+            return [ ...previous, { x: curX, y: curY } ];
+        });
+    }, [ curX, curY ]);
+
+    const removeTile = useCallback(() =>
+    {
+        setSelectedTiles(previous => previous.filter(tile => !(tile.x === curX && tile.y === curY)));
+    }, [ curX, curY ]);
+
+    const loadDefaultPattern = useCallback(() =>
+    {
+        const nextTiles: Tile[] = [];
+
+        for(let y = -2; y <= 2; y++)
+        {
+            for(let x = -2; x <= 2; x++)
+            {
+                if(x === 0 && y === 0) continue;
+
+                nextTiles.push({ x, y });
+            }
+        }
+
+        setSelectedTiles(nextTiles);
+    }, []);
+
+    const requiresFurni = (sourceType === SOURCE_FURNI_PICKED)
+        ? WiredFurniType.STUFF_SELECTION_OPTION_BY_ID
+        : WiredFurniType.STUFF_SELECTION_OPTION_NONE;
+
+    return (
+        <WiredSelectorBaseView hasSpecialInput={ true } requiresFurni={ requiresFurni } save={ save } hideDelay={ true } cardStyle={ { width: '400px' } }>
+            <div className="flex flex-col gap-2">
+                <Text bold>{ LocalizeText('wiredfurni.params.neighborhood_selection') }</Text>
+
+                <div className="flex items-center gap-1">
+                    <Button
+                        variant={ targetPlacementMode ? 'success' : 'secondary' }
+                        className="px-2 py-1"
+                        onClick={ () => setTargetPlacementMode(value => !value) }
+                        title="Sposta target">
+                        <span aria-hidden className="relative inline-block h-[14px] w-[14px]">
+                            <span className="absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-current" />
+                            <span className="absolute left-0 top-1/2 h-px w-full -translate-y-1/2 bg-current" />
+                            <span className="absolute left-1/2 top-1/2 h-[8px] w-[8px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-current" />
+                        </span>
+                    </Button>
+                    <Button variant="success" className="px-2 py-1" onClick={ addTile } title={ LocalizeText('wiredfurni.tooltip.select.tile') }>
+                        <FaPlus />
+                    </Button>
+                    <Button variant="danger" className="px-2 py-1" onClick={ removeTile } title={ LocalizeText('wiredfurni.tooltip.remove.tile') }>
+                        <FaMinus />
+                    </Button>
+                    <Button variant="primary" className="px-2 py-1" onClick={ loadDefaultPattern } title={ LocalizeText('wiredfurni.tooltip.remove.5x5_tile') }>
+                        <MdGridOn />
+                    </Button>
+                    <Button variant="secondary" className="px-2 py-1" onClick={ () => setSelectedTiles([]) } title={ LocalizeText('wiredfurni.tooltip.remove.clear_tile') }>
+                        <FaTimes />
+                    </Button>
+                </div>
+
+                <div className="flex justify-center">
+                    <NeighborhoodGrid
+                        selectedTiles={ selectedTiles }
+                        targetTile={ targetTile }
+                        invert={ invert }
+                        onSetTile={ setTileSelection }
+                        onMoveTarget={ (x, y) => setTargetTile({ x, y }) }
+                        targetPlacementMode={ targetPlacementMode } />
+                </div>
+
+                <div className="flex items-center gap-2">
+                    <Text small>X:</Text>
+                    <input
+                        type="number"
+                        className="form-control form-control-sm"
+                        style={ { width: 56 } }
+                        value={ curX }
+                        min={ -GRID_RANGE }
+                        max={ GRID_RANGE }
+                        onChange={ event => setCurX(parseInt(event.target.value) || 0) } />
+                    <Text small>Y:</Text>
+                    <input
+                        type="number"
+                        className="form-control form-control-sm"
+                        style={ { width: 56 } }
+                        value={ curY }
+                        min={ -GRID_RANGE }
+                        max={ GRID_RANGE }
+                        onChange={ event => setCurY(parseInt(event.target.value) || 0) } />
+                </div>
+
+                <hr className="m-0 bg-dark" />
+
+                <Text bold>{ LocalizeText('wiredfurni.params.selector_options_selector') }</Text>
+
+                <label className="flex items-center gap-1">
+                    <input
+                        type="checkbox"
+                        className="form-check-input"
+                        checked={ filterExisting }
+                        onChange={ event => setFilterExisting(event.target.checked) } />
+                    <Text small>{ LocalizeText('wiredfurni.params.selector_option.0') }</Text>
+                </label>
+
+                <label className="flex items-center gap-1">
+                    <input
+                        type="checkbox"
+                        className="form-check-input"
+                        checked={ invert }
+                        onChange={ event => setInvert(event.target.checked) } />
+                    <Text small>{ LocalizeText('wiredfurni.params.selector_option.1') }</Text>
+                </label>
+
+                <hr className="m-0 bg-dark" />
+
+                <WiredFurniSelectionSourceRow
+                    title="wiredfurni.params.sources.merged.title.neighborhood"
+                    options={ activeSources }
+                    value={ sourceType }
+                    selectionKind={ isUserGroup ? 'primary' : 'secondary' }
+                    selectionActive={ sourceType === SOURCE_FURNI_PICKED }
+                    selectionCount={ furniIds.length }
+                    selectionLimit={ trigger?.maximumItemSelectionCount ?? 20 }
+                    selectionEnabledValues={ [ SOURCE_FURNI_PICKED ] }
+                    showSelectionToggle={ false }
+                    headerContent={
+                        <div className="nitro-wired__give-var-targets">
+                            { SOURCE_GROUP_BUTTONS.map(button => (
+                                <button
+                                    key={ button.key }
+                                    type="button"
+                                    className={ `nitro-wired__give-var-target nitro-wired__give-var-target--${ button.key } ${ isUserGroup === button.isUserGroup ? 'is-active' : '' }` }
+                                    onClick={ () => changeGroup(button.isUserGroup) }>
+                                    <img src={ button.icon } alt={ button.key } />
+                                </button>
+                            )) }
+                        </div>
+                    }
+                    onChange={ value => setSourceType(value) } />
+
+                { sourceType === SOURCE_FURNI_PICKED &&
+                    <Text small className="text-center">
+                        { LocalizeText('wiredfurni.pickfurnis.caption', [ 'count', 'limit' ], [ furniIds.length.toString(), (trigger?.maximumItemSelectionCount ?? 20).toString() ]) }
+                    </Text> }
+            </div>
+        </WiredSelectorBaseView>
+    );
+};
diff --git a/src/components/wired/views/selectors/WiredSelectorFurniNeighborhoodView.tsx b/src/components/wired/views/selectors/WiredSelectorFurniNeighborhoodView.tsx
index 60829a7..1b8edbc 100644
--- a/src/components/wired/views/selectors/WiredSelectorFurniNeighborhoodView.tsx
+++ b/src/components/wired/views/selectors/WiredSelectorFurniNeighborhoodView.tsx
@@ -1,453 +1,4 @@
-import { GetRoomEngine } from '@nitrots/nitro-renderer';
-import { CSSProperties, FC, MouseEvent as ReactMouseEvent, useCallback, useEffect, useState } from 'react';
-import { FaMinus, FaPlus, FaTimes } from 'react-icons/fa';
-import { MdGridOn } from 'react-icons/md';
-import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Button, Text } from '../../../../common';
-import { useWired } from '../../../../hooks';
-import { sortWiredSourceOptions } from '../WiredSourcesSelector';
-import { WiredSelectorBaseView } from './WiredSelectorBaseView';
+import { FC } from 'react';
+import { WiredNeighborhoodSelectorView } from './WiredNeighborhoodSelectorView';
 
-const SOURCE_USER_TRIGGER  = 0;
-const SOURCE_USER_SIGNAL   = 1;
-const SOURCE_USER_CLICKED  = 2;
-const SOURCE_FURNI_TRIGGER = 3;
-const SOURCE_FURNI_PICKED  = 4;
-const SOURCE_FURNI_SIGNAL  = 5;
-
-const USER_SOURCES  = sortWiredSourceOptions([
-    { value: SOURCE_USER_TRIGGER,  label: 'wiredfurni.params.sources.users.0'   },
-    { value: SOURCE_USER_SIGNAL,   label: 'wiredfurni.params.sources.users.201' },
-    { value: SOURCE_USER_CLICKED,  label: 'wiredfurni.params.sources.users.11'  },
-], 'users');
-
-const FURNI_SOURCES = sortWiredSourceOptions([
-    { value: SOURCE_FURNI_TRIGGER, label: 'wiredfurni.params.sources.furni.0'   },
-    { value: SOURCE_FURNI_PICKED,  label: 'wiredfurni.params.sources.furni.100' },
-    { value: SOURCE_FURNI_SIGNAL,  label: 'wiredfurni.params.sources.furni.201' },
-], 'furni');
-
-const TILE_W     = 22;
-const TILE_H     = 11;
-const GRID_RANGE = 4;                        // -4 … +4
-const CX         = GRID_RANGE * TILE_W + TILE_W / 2;
-const CY         = GRID_RANGE * TILE_H + TILE_H / 2;
-const GRID_PX_W  = (GRID_RANGE * 2 + 1) * TILE_W;
-const GRID_PX_H  = (GRID_RANGE * 2 + 1) * TILE_H;
-
-type Tile = { x: number; y: number };
-
-const tileIncluded = (tiles: Tile[], x: number, y: number) =>
-    tiles.some(t => t.x === x && t.y === y);
-
-const tileLeft = (rx: number, ry: number) =>
-    CX + (rx - ry) * (TILE_W / 2) - TILE_W / 2;
-
-const tileTop = (rx: number, ry: number) =>
-    CY + (rx + ry) * (TILE_H / 2) - TILE_H / 2;
-
-interface GridProps {
-    selectedTiles: Tile[];
-    targetTile: Tile;
-    invert: boolean;
-    onSetTile: (x: number, y: number, selected: boolean) => void;
-    onMoveTarget: (x: number, y: number) => void;
-    targetPlacementMode: boolean;
-}
-
-const NeighborhoodGrid: FC<GridProps> = ({ selectedTiles, targetTile, invert, onSetTile, onMoveTarget, targetPlacementMode }) =>
-{
-    const [ dragMode, setDragMode ] = useState<'add' | 'remove' | 'target' | null>(null);
-    const tiles: JSX.Element[] = [];
-
-    useEffect(() =>
-    {
-        const stopDragging = () => setDragMode(null);
-
-        window.addEventListener('mouseup', stopDragging);
-
-        return () => window.removeEventListener('mouseup', stopDragging);
-    }, []);
-
-    const beginTileDrag = (event: ReactMouseEvent<HTMLDivElement>, rx: number, ry: number, isTarget: boolean, isSelected: boolean) =>
-    {
-        event.preventDefault();
-
-        if(targetPlacementMode)
-        {
-            setDragMode('target');
-            onMoveTarget(rx, ry);
-            return;
-        }
-
-        const nextMode = isSelected ? 'remove' : 'add';
-
-        setDragMode(nextMode);
-        onSetTile(rx, ry, nextMode === 'add');
-    };
-
-    const continueTileDrag = (event: ReactMouseEvent<HTMLDivElement>, rx: number, ry: number, isTarget: boolean) =>
-    {
-        if(!(event.buttons & 1) || !dragMode) return;
-
-        if(dragMode === 'target')
-        {
-            onMoveTarget(rx, ry);
-            return;
-        }
-
-        onSetTile(rx, ry, dragMode === 'add');
-    };
-
-    for (let ry = -GRID_RANGE; ry <= GRID_RANGE; ry++)
-    {
-        for (let rx = -GRID_RANGE; rx <= GRID_RANGE; rx++)
-        {
-            const isTarget   = rx === targetTile.x && ry === targetTile.y;
-            const isSelected = tileIncluded(selectedTiles, rx, ry);
-            const isActive   = invert ? !isSelected : isSelected;
-            const left       = tileLeft(rx, ry);
-            const top_       = tileTop(rx, ry);
-            const zIdx       = rx + ry + GRID_RANGE * 2 + 10;
-
-            const bgColor = isActive
-                ? '#3399ff'
-                : '#2a3042';
-
-            const borderColor = isTarget
-                ? '#ffffff'
-                : isActive
-                    ? '#1166cc'
-                    : '#1a2032';
-
-            const diamond: CSSProperties = {
-                position:        'absolute',
-                width:           TILE_W,
-                height:          TILE_H,
-                left,
-                top:             top_,
-                clipPath:        'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
-                backgroundColor: bgColor,
-                cursor:          'pointer',
-                zIndex:          zIdx,
-                display:         'flex',
-                alignItems:      'center',
-                justifyContent:  'center',
-                color:           isTarget ? '#ffffff' : 'transparent',
-                fontSize:        10
-            };
-
-            const border: CSSProperties = {
-                position:        'absolute',
-                width:           TILE_W + (isTarget ? 6 : 2),
-                height:          TILE_H + (isTarget ? 6 : 2),
-                left:            left - (isTarget ? 3 : 1),
-                top:             top_ - (isTarget ? 3 : 1),
-                clipPath:        'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
-                backgroundColor: borderColor,
-                zIndex:          zIdx - 1,
-                pointerEvents:   'none',
-            };
-
-            const targetOutline: CSSProperties = {
-                position:      'absolute',
-                width:         TILE_W + 4,
-                height:        TILE_H + 4,
-                left:          left - 2,
-                top:           top_ - 2,
-                zIndex:        zIdx + 1,
-                pointerEvents: 'none',
-                overflow:      'visible'
-            };
-
-            tiles.push(
-                <div key={ `b-${ rx }-${ ry }` } style={ border } />,
-                isTarget && (
-                    <svg key={ `o-${ rx }-${ ry }` } style={ targetOutline } viewBox={ `0 0 ${ TILE_W + 4 } ${ TILE_H + 4 }` }>
-                        <polygon
-                            points={ `${ (TILE_W + 4) / 2 },2 ${ TILE_W + 2 },${ (TILE_H + 4) / 2 } ${ (TILE_W + 4) / 2 },${ TILE_H + 2 } 2,${ (TILE_H + 4) / 2 }` }
-                            fill="none"
-                            stroke="#ffffff"
-                            strokeWidth="1" />
-                    </svg>
-                ),
-                <div
-                    key={ `t-${ rx }-${ ry }` }
-                    style={ diamond }
-                    title={ `(${ rx }, ${ ry })` }
-                    onMouseDown={ event => beginTileDrag(event, rx, ry, isTarget, isSelected) }
-                    onMouseEnter={ event => continueTileDrag(event, rx, ry, isTarget) } />,
-            );
-        }
-    }
-
-    return (
-        <div style={ { position: 'relative', width: GRID_PX_W, height: GRID_PX_H, flexShrink: 0 } } onContextMenu={ event => event.preventDefault() }>
-            { tiles }
-        </div>
-    );
-};
-
-export const WiredSelectorFurniNeighborhoodView: FC<{}> = () =>
-{
-    const [ selectedTiles, setSelectedTiles ] = useState<Tile[]>([]);
-    const [ filterExisting, setFilterExisting ] = useState(false);
-    const [ invert, setInvert ] = useState(false);
-    const [ sourceType, setSourceType ] = useState(SOURCE_USER_TRIGGER);
-    const [ targetTile, setTargetTile ] = useState<Tile>({ x: 0, y: 0 });
-    const [ targetPlacementMode, setTargetPlacementMode ] = useState(false);
-    const [ curX, setCurX ] = useState(0);
-    const [ curY, setCurY ] = useState(0);
-
-    const { trigger = null, furniIds = [], setIntParams } = useWired();
-
-    useEffect(() =>
-    {
-        GetRoomEngine().areaSelectionManager.clearHighlight();
-        GetRoomEngine().areaSelectionManager.deactivate();
-    }, []);
-
-    useEffect(() =>
-    {
-        if(!trigger) return;
-
-        const p = trigger.intData;
-        if(p.length >= 1) setSourceType(p[0]);
-        if(p.length >= 2) setFilterExisting(p[1] === 1);
-        if(p.length >= 3) setInvert(p[2] === 1);
-        if(p.length >= 5) setTargetTile({ x: p[3], y: p[4] });
-        else setTargetTile({ x: 0, y: 0 });
-
-        if(p.length >= 6)
-        {
-            const n     = p[5];
-            const tiles: Tile[] = [];
-
-            for(let i = 0; i < n; i++)
-            {
-                const xi = 6 + i * 2;
-                if(xi + 1 < p.length) tiles.push({ x: p[xi], y: p[xi + 1] });
-            }
-
-            setSelectedTiles(tiles);
-        }
-        else
-        {
-            setSelectedTiles([]);
-        }
-    }, [ trigger ]);
-
-    const save = useCallback(() =>
-    {
-        const params: number[] = [
-            sourceType,
-            filterExisting ? 1 : 0,
-            invert ? 1 : 0,
-            targetTile.x,
-            targetTile.y,
-            selectedTiles.length,
-            ...selectedTiles.flatMap(t => [ t.x, t.y ]),
-        ];
-
-        setIntParams(params);
-    }, [ sourceType, filterExisting, invert, selectedTiles, targetTile.x, targetTile.y, setIntParams ]);
-
-    const setTileSelection = useCallback((x: number, y: number, selected: boolean) =>
-    {
-        setSelectedTiles(prev =>
-        {
-            const alreadySelected = tileIncluded(prev, x, y);
-
-            if(selected)
-            {
-                if(alreadySelected) return prev;
-
-                return [ ...prev, { x, y } ];
-            }
-
-            if(!alreadySelected) return prev;
-
-            return prev.filter(t => !(t.x === x && t.y === y));
-        });
-    }, []);
-
-    const moveTargetTile = useCallback((x: number, y: number) =>
-    {
-        setTargetTile({ x, y });
-    }, []);
-
-    const addTile = useCallback(() =>
-    {
-        if(!tileIncluded(selectedTiles, curX, curY))
-            setSelectedTiles(prev => [ ...prev, { x: curX, y: curY } ]);
-    }, [ curX, curY, selectedTiles ]);
-
-    const removeTile = useCallback(() =>
-    {
-        setSelectedTiles(prev => prev.filter(t => !(t.x === curX && t.y === curY)));
-    }, [ curX, curY ]);
-
-    const clearTiles = useCallback(() => setSelectedTiles([]), []);
-
-    const loadDefaultPattern = useCallback(() =>
-    {
-        const tiles: Tile[] = [];
-
-        for(let y = -2; y <= 2; y++)
-        {
-            for(let x = -2; x <= 2; x++)
-            {
-                if(x === 0 && y === 0) continue;
-                tiles.push({ x, y });
-            }
-        }
-
-        setSelectedTiles(tiles);
-    }, []);
-
-    const isUserGroup  = sourceType <= SOURCE_USER_CLICKED;
-    const activeSources = isUserGroup ? USER_SOURCES : FURNI_SOURCES;
-    const groupOffset   = isUserGroup ? 0 : SOURCE_FURNI_TRIGGER;
-    const groupIndex    = sourceType - groupOffset;
-
-    const prevInGroup = () =>
-        setSourceType(groupOffset + (groupIndex - 1 + activeSources.length) % activeSources.length);
-
-    const nextInGroup = () =>
-        setSourceType(groupOffset + (groupIndex + 1) % activeSources.length);
-
-    const switchGroup = (toUser: boolean) =>
-    {
-        if(toUser === isUserGroup) return;
-        const newOffset = toUser ? 0 : SOURCE_FURNI_TRIGGER;
-        setSourceType(newOffset + groupIndex);
-    };
-
-    const requiresFurni = sourceType === SOURCE_FURNI_PICKED
-        ? WiredFurniType.STUFF_SELECTION_OPTION_BY_ID
-        : WiredFurniType.STUFF_SELECTION_OPTION_NONE;
-
-    const pickedCount = furniIds.length;
-    const pickedLimit = trigger?.maximumItemSelectionCount ?? 20;
-
-    return (
-        <WiredSelectorBaseView hasSpecialInput={ true } requiresFurni={ requiresFurni } save={ save } hideDelay={ true } cardStyle={ { width: '400px' } }>
-            <div className="flex flex-col gap-2">
-
-                <Text bold>{ LocalizeText('wiredfurni.params.neighborhood_selection') }</Text>
-
-                <div className="flex items-center gap-1">
-                    <Button
-                        variant={ targetPlacementMode ? 'success' : 'secondary' }
-                        className="px-2 py-1"
-                        onClick={ () => setTargetPlacementMode(value => !value) }
-                        title="Sposta target">
-                        <span aria-hidden className="relative inline-block h-[14px] w-[14px]">
-                            <span className="absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-current" />
-                            <span className="absolute left-0 top-1/2 h-px w-full -translate-y-1/2 bg-current" />
-                            <span className="absolute left-1/2 top-1/2 h-[8px] w-[8px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-current" />
-                        </span>
-                    </Button>
-                    <Button variant="success" className="px-2 py-1" onClick={ addTile } title={ LocalizeText('wiredfurni.tooltip.select.tile') }>
-                        <FaPlus />
-                    </Button>
-                    <Button variant="danger" className="px-2 py-1" onClick={ removeTile } title={ LocalizeText('wiredfurni.tooltip.remove.tile') }>
-                        <FaMinus />
-                    </Button>
-                    <Button variant="primary" className="px-2 py-1" onClick={ loadDefaultPattern } title={ LocalizeText('wiredfurni.tooltip.remove.5x5_tile') }>
-                        <MdGridOn />
-                    </Button>
-                    <Button variant="secondary" className="px-2 py-1" onClick={ clearTiles } title={ LocalizeText('wiredfurni.tooltip.remove.clear_tile') }>
-                        <FaTimes />
-                    </Button>
-                </div>
-
-                <div className="flex justify-center">
-                    <NeighborhoodGrid
-                        selectedTiles={ selectedTiles }
-                        targetTile={ targetTile }
-                        invert={ invert }
-                        onSetTile={ setTileSelection }
-                        onMoveTarget={ moveTargetTile }
-                        targetPlacementMode={ targetPlacementMode } />
-                </div>
-
-                <div className="flex items-center gap-2">
-                    <Text small>X:</Text>
-                    <input
-                        type="number"
-                        className="form-control form-control-sm"
-                        style={ { width: 56 } }
-                        value={ curX }
-                        min={ -GRID_RANGE }
-                        max={ GRID_RANGE }
-                        onChange={ e => setCurX(parseInt(e.target.value) || 0) } />
-                    <Text small>Y:</Text>
-                    <input
-                        type="number"
-                        className="form-control form-control-sm"
-                        style={ { width: 56 } }
-                        value={ curY }
-                        min={ -GRID_RANGE }
-                        max={ GRID_RANGE }
-                        onChange={ e => setCurY(parseInt(e.target.value) || 0) } />
-                </div>
-
-                <hr className="m-0 bg-dark" />
-
-                <Text bold>{ LocalizeText('wiredfurni.params.selector_options_selector') }</Text>
-
-                <label className="flex items-center gap-1">
-                    <input
-                        type="checkbox"
-                        className="form-check-input"
-                        checked={ filterExisting }
-                        onChange={ e => setFilterExisting(e.target.checked) } />
-                    <Text small>{ LocalizeText('wiredfurni.params.selector_option.0') }</Text>
-                </label>
-
-                <label className="flex items-center gap-1">
-                    <input
-                        type="checkbox"
-                        className="form-check-input"
-                        checked={ invert }
-                        onChange={ e => setInvert(e.target.checked) } />
-                    <Text small>{ LocalizeText('wiredfurni.params.selector_option.1') }</Text>
-                </label>
-
-                <hr className="m-0 bg-dark" />
-
-                <Text bold>{ LocalizeText('wiredfurni.params.sources.merged.title.neighborhood') }</Text>
-
-                <div className="flex gap-1">
-                    <Button
-                        fullWidth
-                        variant={ isUserGroup ? 'primary' : 'secondary' }
-                        onClick={ () => switchGroup(true) }>
-                        { LocalizeText('wiredfurni.params.furni_neighborhood.group.user') }
-                    </Button>
-                    <Button
-                        fullWidth
-                        variant={ !isUserGroup ? 'primary' : 'secondary' }
-                        onClick={ () => switchGroup(false) }>
-                        { LocalizeText('wiredfurni.params.furni_neighborhood.group.furni') }
-                    </Button>
-                </div>
-
-                <div className="flex items-center gap-2">
-                    <Button variant="primary" className="px-2 py-1" onClick={ prevInGroup }>‹</Button>
-                    <div className="flex flex-1 items-center justify-center">
-                        <Text small>{ LocalizeText(activeSources[groupIndex].label) }</Text>
-                    </div>
-                    <Button variant="primary" className="px-2 py-1" onClick={ nextInGroup }>›</Button>
-                </div>
-
-                { sourceType === SOURCE_FURNI_PICKED &&
-                    <Text small className="text-center">
-                        { LocalizeText('wiredfurni.pickfurnis.caption', [ 'count', 'limit' ], [ pickedCount.toString(), pickedLimit.toString() ]) }
-                    </Text> }
-
-            </div>
-        </WiredSelectorBaseView>
-    );
-};
+export const WiredSelectorFurniNeighborhoodView: FC<{}> = () => <WiredNeighborhoodSelectorView />;
diff --git a/src/components/wired/views/selectors/WiredSelectorUsersNeighborhoodView.tsx b/src/components/wired/views/selectors/WiredSelectorUsersNeighborhoodView.tsx
index 7362df7..38a6a0b 100644
--- a/src/components/wired/views/selectors/WiredSelectorUsersNeighborhoodView.tsx
+++ b/src/components/wired/views/selectors/WiredSelectorUsersNeighborhoodView.tsx
@@ -1,454 +1,4 @@
-import { GetRoomEngine } from '@nitrots/nitro-renderer';
-import { CSSProperties, FC, MouseEvent as ReactMouseEvent, useCallback, useEffect, useState } from 'react';
-import { FaMinus, FaPlus, FaTimes } from 'react-icons/fa';
-import { MdGridOn } from 'react-icons/md';
-import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Button, Text } from '../../../../common';
-import { useWired } from '../../../../hooks';
-import { sortWiredSourceOptions } from '../WiredSourcesSelector';
-import { WiredSelectorBaseView } from './WiredSelectorBaseView';
+import { FC } from 'react';
+import { WiredNeighborhoodSelectorView } from './WiredNeighborhoodSelectorView';
 
-const SOURCE_USER_TRIGGER  = 0;
-const SOURCE_USER_SIGNAL   = 1;
-const SOURCE_USER_CLICKED  = 2;
-const SOURCE_FURNI_TRIGGER = 3;
-const SOURCE_FURNI_PICKED  = 4;
-const SOURCE_FURNI_SIGNAL  = 5;
-
-const USER_SOURCES  = sortWiredSourceOptions([
-    { value: SOURCE_USER_TRIGGER,  label: 'wiredfurni.params.sources.users.0'   },
-    { value: SOURCE_USER_SIGNAL,   label: 'wiredfurni.params.sources.users.201' },
-    { value: SOURCE_USER_CLICKED,  label: 'wiredfurni.params.sources.users.11'  },
-], 'users');
-
-const FURNI_SOURCES = sortWiredSourceOptions([
-    { value: SOURCE_FURNI_TRIGGER, label: 'wiredfurni.params.sources.furni.0'   },
-    { value: SOURCE_FURNI_PICKED,  label: 'wiredfurni.params.sources.furni.100' },
-    { value: SOURCE_FURNI_SIGNAL,  label: 'wiredfurni.params.sources.furni.201' },
-], 'furni');
-
-const TILE_W     = 22;
-const TILE_H     = 11;
-const GRID_RANGE = 4;
-const CX         = GRID_RANGE * TILE_W + TILE_W / 2;
-const CY         = GRID_RANGE * TILE_H + TILE_H / 2;
-const GRID_PX_W  = (GRID_RANGE * 2 + 1) * TILE_W;
-const GRID_PX_H  = (GRID_RANGE * 2 + 1) * TILE_H;
-
-type Tile = { x: number; y: number };
-
-const tileIncluded = (tiles: Tile[], x: number, y: number) =>
-    tiles.some(t => t.x === x && t.y === y);
-
-const tileLeft = (rx: number, ry: number) =>
-    CX + (rx - ry) * (TILE_W / 2) - TILE_W / 2;
-
-const tileTop = (rx: number, ry: number) =>
-    CY + (rx + ry) * (TILE_H / 2) - TILE_H / 2;
-
-interface GridProps {
-    selectedTiles: Tile[];
-    targetTile: Tile;
-    invert: boolean;
-    onSetTile: (x: number, y: number, selected: boolean) => void;
-    onMoveTarget: (x: number, y: number) => void;
-    targetPlacementMode: boolean;
-}
-
-const NeighborhoodGrid: FC<GridProps> = ({ selectedTiles, targetTile, invert, onSetTile, onMoveTarget, targetPlacementMode }) =>
-{
-    const [ dragMode, setDragMode ] = useState<'add' | 'remove' | 'target' | null>(null);
-    const tiles: JSX.Element[] = [];
-
-    useEffect(() =>
-    {
-        const stopDragging = () => setDragMode(null);
-
-        window.addEventListener('mouseup', stopDragging);
-
-        return () => window.removeEventListener('mouseup', stopDragging);
-    }, []);
-
-    const beginTileDrag = (event: ReactMouseEvent<HTMLDivElement>, rx: number, ry: number, isTarget: boolean, isSelected: boolean) =>
-    {
-        event.preventDefault();
-
-        if(targetPlacementMode)
-        {
-            setDragMode('target');
-            onMoveTarget(rx, ry);
-            return;
-        }
-
-        const nextMode = isSelected ? 'remove' : 'add';
-
-        setDragMode(nextMode);
-        onSetTile(rx, ry, nextMode === 'add');
-    };
-
-    const continueTileDrag = (event: ReactMouseEvent<HTMLDivElement>, rx: number, ry: number, isTarget: boolean) =>
-    {
-        if(!(event.buttons & 1) || !dragMode) return;
-
-        if(dragMode === 'target')
-        {
-            onMoveTarget(rx, ry);
-            return;
-        }
-
-        onSetTile(rx, ry, dragMode === 'add');
-    };
-
-    for (let ry = -GRID_RANGE; ry <= GRID_RANGE; ry++)
-    {
-        for (let rx = -GRID_RANGE; rx <= GRID_RANGE; rx++)
-        {
-            const isTarget   = rx === targetTile.x && ry === targetTile.y;
-            const isSelected = tileIncluded(selectedTiles, rx, ry);
-            const isActive   = invert ? !isSelected : isSelected;
-            const left       = tileLeft(rx, ry);
-            const top_       = tileTop(rx, ry);
-            const zIdx       = rx + ry + GRID_RANGE * 2 + 10;
-
-            const bgColor = isActive
-                ? '#3399ff'
-                : '#2a3042';
-
-            const borderColor = isTarget
-                ? '#ffffff'
-                : isActive
-                    ? '#1166cc'
-                    : '#1a2032';
-
-            const diamond: CSSProperties = {
-                position:        'absolute',
-                width:           TILE_W,
-                height:          TILE_H,
-                left,
-                top:             top_,
-                clipPath:        'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
-                backgroundColor: bgColor,
-                cursor:          'pointer',
-                zIndex:          zIdx,
-                display:         'flex',
-                alignItems:      'center',
-                justifyContent:  'center',
-                color:           isTarget ? '#ffffff' : 'transparent',
-                fontSize:        10
-            };
-
-            const border: CSSProperties = {
-                position:        'absolute',
-                width:           TILE_W + (isTarget ? 6 : 2),
-                height:          TILE_H + (isTarget ? 6 : 2),
-                left:            left - (isTarget ? 3 : 1),
-                top:             top_ - (isTarget ? 3 : 1),
-                clipPath:        'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
-                backgroundColor: borderColor,
-                zIndex:          zIdx - 1,
-                pointerEvents:   'none',
-            };
-
-            const targetOutline: CSSProperties = {
-                position:      'absolute',
-                width:         TILE_W + 4,
-                height:        TILE_H + 4,
-                left:          left - 2,
-                top:           top_ - 2,
-                zIndex:        zIdx + 1,
-                pointerEvents: 'none',
-                overflow:      'visible'
-            };
-
-            tiles.push(
-                <div key={ `b-${ rx }-${ ry }` } style={ border } />,
-                isTarget && (
-                    <svg key={ `o-${ rx }-${ ry }` } style={ targetOutline } viewBox={ `0 0 ${ TILE_W + 4 } ${ TILE_H + 4 }` }>
-                        <polygon
-                            points={ `${ (TILE_W + 4) / 2 },2 ${ TILE_W + 2 },${ (TILE_H + 4) / 2 } ${ (TILE_W + 4) / 2 },${ TILE_H + 2 } 2,${ (TILE_H + 4) / 2 }` }
-                            fill="none"
-                            stroke="#ffffff"
-                            strokeWidth="1" />
-                    </svg>
-                ),
-                <div
-                    key={ `t-${ rx }-${ ry }` }
-                    style={ diamond }
-                    title={ `(${ rx }, ${ ry })` }
-                    onMouseDown={ event => beginTileDrag(event, rx, ry, isTarget, isSelected) }
-                    onMouseEnter={ event => continueTileDrag(event, rx, ry, isTarget) } />,
-            );
-        }
-    }
-
-    return (
-        <div style={ { position: 'relative', width: GRID_PX_W, height: GRID_PX_H, flexShrink: 0 } } onContextMenu={ event => event.preventDefault() }>
-            { tiles }
-        </div>
-    );
-};
-
-export const WiredSelectorUsersNeighborhoodView: FC<{}> = () =>
-{
-    const [ selectedTiles, setSelectedTiles ] = useState<Tile[]>([]);
-    const [ filterExisting, setFilterExisting ] = useState(false);
-    const [ invert, setInvert ] = useState(false);
-    const [ sourceType, setSourceType ] = useState(SOURCE_USER_TRIGGER);
-    const [ targetTile, setTargetTile ] = useState<Tile>({ x: 0, y: 0 });
-    const [ targetPlacementMode, setTargetPlacementMode ] = useState(false);
-    const [ curX, setCurX ] = useState(0);
-    const [ curY, setCurY ] = useState(0);
-
-    const { trigger = null, furniIds = [], setIntParams } = useWired();
-
-    useEffect(() =>
-    {
-        GetRoomEngine().areaSelectionManager.clearHighlight();
-        GetRoomEngine().areaSelectionManager.deactivate();
-    }, []);
-
-    useEffect(() =>
-    {
-        if(!trigger) return;
-
-        const p = trigger.intData;
-        if(p.length >= 1) setSourceType(p[0]);
-        if(p.length >= 2) setFilterExisting(p[1] === 1);
-        if(p.length >= 3) setInvert(p[2] === 1);
-        if(p.length >= 5) setTargetTile({ x: p[3], y: p[4] });
-        else setTargetTile({ x: 0, y: 0 });
-
-        if(p.length >= 6)
-        {
-            const n     = p[5];
-            const tiles: Tile[] = [];
-
-            for(let i = 0; i < n; i++)
-            {
-                const xi = 6 + i * 2;
-                if(xi + 1 < p.length) tiles.push({ x: p[xi], y: p[xi + 1] });
-            }
-
-            setSelectedTiles(tiles);
-        }
-        else
-        {
-            setSelectedTiles([]);
-        }
-    }, [ trigger ]);
-
-    const save = useCallback(() =>
-    {
-        const params: number[] = [
-            sourceType,
-            filterExisting ? 1 : 0,
-            invert ? 1 : 0,
-            targetTile.x,
-            targetTile.y,
-            selectedTiles.length,
-            ...selectedTiles.flatMap(t => [ t.x, t.y ]),
-        ];
-
-        setIntParams(params);
-    }, [ sourceType, filterExisting, invert, selectedTiles, targetTile.x, targetTile.y, setIntParams ]);
-
-    const setTileSelection = useCallback((x: number, y: number, selected: boolean) =>
-    {
-        setSelectedTiles(prev =>
-        {
-            const alreadySelected = tileIncluded(prev, x, y);
-
-            if(selected)
-            {
-                if(alreadySelected) return prev;
-
-                return [ ...prev, { x, y } ];
-            }
-
-            if(!alreadySelected) return prev;
-
-            return prev.filter(t => !(t.x === x && t.y === y));
-        });
-    }, []);
-
-    const moveTargetTile = useCallback((x: number, y: number) =>
-    {
-        setTargetTile({ x, y });
-    }, []);
-
-    const addTile = useCallback(() =>
-    {
-        if(!tileIncluded(selectedTiles, curX, curY))
-            setSelectedTiles(prev => [ ...prev, { x: curX, y: curY } ]);
-    }, [ curX, curY, selectedTiles ]);
-
-    const removeTile = useCallback(() =>
-    {
-        setSelectedTiles(prev => prev.filter(t => !(t.x === curX && t.y === curY)));
-    }, [ curX, curY ]);
-
-    const clearTiles = useCallback(() => setSelectedTiles([]), []);
-
-    const loadDefaultPattern = useCallback(() =>
-    {
-        const tiles: Tile[] = [];
-
-        for(let y = -2; y <= 2; y++)
-        {
-            for(let x = -2; x <= 2; x++)
-            {
-                if(x === 0 && y === 0) continue;
-                tiles.push({ x, y });
-            }
-        }
-
-        setSelectedTiles(tiles);
-    }, []);
-
-    const isUserGroup = sourceType <= SOURCE_USER_CLICKED;
-    const activeSources = isUserGroup ? USER_SOURCES : FURNI_SOURCES;
-    const groupOffset = isUserGroup ? 0 : SOURCE_FURNI_TRIGGER;
-    const groupIndex = sourceType - groupOffset;
-
-    const prevSource = () =>
-        setSourceType(groupOffset + ((groupIndex - 1 + activeSources.length) % activeSources.length));
-
-    const nextSource = () =>
-        setSourceType(groupOffset + ((groupIndex + 1) % activeSources.length));
-
-    const switchGroup = (toUser: boolean) =>
-    {
-        if(toUser === isUserGroup) return;
-
-        const newOffset = toUser ? 0 : SOURCE_FURNI_TRIGGER;
-        setSourceType(newOffset + groupIndex);
-    };
-
-    const requiresFurni = sourceType === SOURCE_FURNI_PICKED
-        ? WiredFurniType.STUFF_SELECTION_OPTION_BY_ID
-        : WiredFurniType.STUFF_SELECTION_OPTION_NONE;
-
-    const pickedCount = furniIds.length;
-    const pickedLimit = trigger?.maximumItemSelectionCount ?? 20;
-
-    return (
-        <WiredSelectorBaseView hasSpecialInput={ true } requiresFurni={ requiresFurni } save={ save } hideDelay={ true } cardStyle={ { width: '400px' } }>
-            <div className="flex flex-col gap-2">
-
-                <Text bold>{ LocalizeText('wiredfurni.params.neighborhood_selection') }</Text>
-
-                <div className="flex items-center gap-1">
-                    <Button
-                        variant={ targetPlacementMode ? 'success' : 'secondary' }
-                        className="px-2 py-1"
-                        onClick={ () => setTargetPlacementMode(value => !value) }
-                        title="Sposta target">
-                        <span aria-hidden className="relative inline-block h-[14px] w-[14px]">
-                            <span className="absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-current" />
-                            <span className="absolute left-0 top-1/2 h-px w-full -translate-y-1/2 bg-current" />
-                            <span className="absolute left-1/2 top-1/2 h-[8px] w-[8px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-current" />
-                        </span>
-                    </Button>
-                    <Button variant="success" className="px-2 py-1" onClick={ addTile } title={ LocalizeText('wiredfurni.tooltip.select.tile') }>
-                        <FaPlus />
-                    </Button>
-                    <Button variant="danger" className="px-2 py-1" onClick={ removeTile } title={ LocalizeText('wiredfurni.tooltip.remove.tile') }>
-                        <FaMinus />
-                    </Button>
-                    <Button variant="primary" className="px-2 py-1" onClick={ loadDefaultPattern } title={ LocalizeText('wiredfurni.tooltip.remove.5x5_tile') }>
-                        <MdGridOn />
-                    </Button>
-                    <Button variant="secondary" className="px-2 py-1" onClick={ clearTiles } title={ LocalizeText('wiredfurni.tooltip.remove.clear_tile') }>
-                        <FaTimes />
-                    </Button>
-                </div>
-
-                <div className="flex justify-center">
-                    <NeighborhoodGrid
-                        selectedTiles={ selectedTiles }
-                        targetTile={ targetTile }
-                        invert={ invert }
-                        onSetTile={ setTileSelection }
-                        onMoveTarget={ moveTargetTile }
-                        targetPlacementMode={ targetPlacementMode } />
-                </div>
-
-                <div className="flex items-center gap-2">
-                    <Text small>X:</Text>
-                    <input
-                        type="number"
-                        className="form-control form-control-sm"
-                        style={ { width: 56 } }
-                        value={ curX }
-                        min={ -GRID_RANGE }
-                        max={ GRID_RANGE }
-                        onChange={ e => setCurX(parseInt(e.target.value) || 0) } />
-                    <Text small>Y:</Text>
-                    <input
-                        type="number"
-                        className="form-control form-control-sm"
-                        style={ { width: 56 } }
-                        value={ curY }
-                        min={ -GRID_RANGE }
-                        max={ GRID_RANGE }
-                        onChange={ e => setCurY(parseInt(e.target.value) || 0) } />
-                </div>
-
-                <hr className="m-0 bg-dark" />
-
-                <Text bold>{ LocalizeText('wiredfurni.params.selector_options_selector') }</Text>
-
-                <label className="flex items-center gap-1">
-                    <input
-                        type="checkbox"
-                        className="form-check-input"
-                        checked={ filterExisting }
-                        onChange={ e => setFilterExisting(e.target.checked) } />
-                    <Text small>{ LocalizeText('wiredfurni.params.selector_option.0') }</Text>
-                </label>
-
-                <label className="flex items-center gap-1">
-                    <input
-                        type="checkbox"
-                        className="form-check-input"
-                        checked={ invert }
-                        onChange={ e => setInvert(e.target.checked) } />
-                    <Text small>{ LocalizeText('wiredfurni.params.selector_option.1') }</Text>
-                </label>
-
-                <hr className="m-0 bg-dark" />
-
-                <Text bold>{ LocalizeText('wiredfurni.params.sources.merged.title.neighborhood') }</Text>
-
-                <div className="flex gap-1">
-                    <Button
-                        fullWidth
-                        variant={ isUserGroup ? 'primary' : 'secondary' }
-                        onClick={ () => switchGroup(true) }>
-                        { LocalizeText('wiredfurni.params.furni_neighborhood.group.user') }
-                    </Button>
-                    <Button
-                        fullWidth
-                        variant={ !isUserGroup ? 'primary' : 'secondary' }
-                        onClick={ () => switchGroup(false) }>
-                        { LocalizeText('wiredfurni.params.furni_neighborhood.group.furni') }
-                    </Button>
-                </div>
-
-                <div className="flex items-center gap-2">
-                    <Button variant="primary" className="px-2 py-1" onClick={ prevSource }>&#8249;</Button>
-                    <div className="flex flex-1 items-center justify-center">
-                        <Text small>{ LocalizeText(activeSources[groupIndex].label) }</Text>
-                    </div>
-                    <Button variant="primary" className="px-2 py-1" onClick={ nextSource }>&#8250;</Button>
-                </div>
-
-                { sourceType === SOURCE_FURNI_PICKED &&
-                    <Text small className="text-center">
-                        { LocalizeText('wiredfurni.pickfurnis.caption', [ 'count', 'limit' ], [ pickedCount.toString(), pickedLimit.toString() ]) }
-                    </Text> }
-
-            </div>
-        </WiredSelectorBaseView>
-    );
-};
+export const WiredSelectorUsersNeighborhoodView: FC<{}> = () => <WiredNeighborhoodSelectorView />;
diff --git a/src/css/index.css b/src/css/index.css
index 329ae1d..dc2e809 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -182,7 +182,7 @@ body {
         @apply pointer-events-none relative h-[130px] w-[90px] bg-position-[center_-8px] bg-no-repeat;
     }
 
-    .nitro-card-shell {
+    .nitro-card-shell:not(.nitro-wired) {
         border: 2px solid #000 !important;
         border-radius: 10px;
         background: #f2f2eb;
@@ -192,7 +192,7 @@ body {
         max-height: calc(100vh - 16px);
     }
 
-    .nitro-card-header-shell {
+    .nitro-card-shell:not(.nitro-wired) .nitro-card-header-shell {
         border: 2px solid #3c88a6;
         border-bottom-color: #000;
         border-radius: 8px 8px 0 0;
@@ -200,7 +200,7 @@ body {
         padding: 5px;
     }
 
-    .nitro-card-header-shell.builders-club-card-header {
+    .nitro-card-shell:not(.nitro-wired) .nitro-card-header-shell.builders-club-card-header {
         border-color: #d79d2e;
         border-bottom-color: #000;
         background: linear-gradient(180deg, #d89f2d 0%, #c68515 100%);
@@ -274,7 +274,7 @@ body {
         filter: brightness(0.96);
     }
 
-    .nitro-card-content-shell {
+    .nitro-card-shell:not(.nitro-wired) .nitro-card-content-shell {
         border: 0;
         border-top: 0;
         border-radius: 0 0 8px 8px;
@@ -283,8 +283,8 @@ body {
         color: #000;
     }
 
-    .nitro-card-shell,
-    .nitro-card-content-shell {
+    .nitro-card-shell:not(.nitro-wired),
+    .nitro-card-shell:not(.nitro-wired) .nitro-card-content-shell {
         h1,
         h2,
         h3,
@@ -385,13 +385,13 @@ body {
 }
 
 @media (max-width: 991.98px) {
-    .nitro-card-shell {
+    .nitro-card-shell:not(.nitro-wired) {
         width: min(calc(100vw - 16px), 100%) !important;
         max-width: calc(100vw - 16px) !important;
         max-height: calc(100vh - 16px) !important;
     }
 
-    .nitro-card-header-shell {
+    .nitro-card-shell:not(.nitro-wired) .nitro-card-header-shell {
         padding: 4px;
     }
 
@@ -403,7 +403,7 @@ body {
         font-size: 17px;
     }
 
-    .nitro-card-content-shell {
+    .nitro-card-shell:not(.nitro-wired) .nitro-card-content-shell {
         padding: 8px !important;
     }
 
@@ -417,8 +417,8 @@ body {
         padding: 4px 9px;
     }
 
-    .nitro-card-shell,
-    .nitro-card-content-shell {
+    .nitro-card-shell:not(.nitro-wired),
+    .nitro-card-shell:not(.nitro-wired) .nitro-card-content-shell {
         p,
         label,
         li,
@@ -814,70 +814,190 @@ body {
 }
 
 .nitro-wired {
-    background: #d5d5d5;
-    border: 1px solid #8f8f8f !important;
+    background: #efefef;
+    border: 1px solid #8d8d8d !important;
     border-radius: 6px !important;
-    box-shadow: inset 0 1px 0 #ffffff, 0 2px 0 rgba(0, 0, 0, 0.18) !important;
+    box-shadow: inset 0 0 0 1px #fff !important;
     color: #000;
+    outline: none !important;
     overflow: hidden;
 
     .nitro-wired__header {
-        min-height: 22px !important;
-        max-height: 22px !important;
-        background: linear-gradient(180deg, #f1f1f1 0%, #dfdfdf 45%, #c8c8c8 46%, #d7d7d7 100%) !important;
-        border-bottom: 1px solid #9b9b9b;
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
-        padding-top: 0 !important;
+        min-height: 21px !important;
+        max-height: 21px !important;
+        position: absolute !important;
+        inset: 0 0 auto 0;
+        z-index: 3;
+        border: 0 !important;
+        border-radius: 0 !important;
+        background: transparent !important;
+        box-shadow: none !important;
+        padding: 0 !important;
+        pointer-events: auto;
 
-        span {
+        .nitro-card-title {
+            display: block;
             color: #000 !important;
-            font-size: 12px !important;
-            font-weight: 700;
-            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) !important;
-            letter-spacing: 0.01em;
+            font-size: 11px !important;
+            font-weight: 700 !important;
+            line-height: 21px;
+            text-align: center;
+            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
+            pointer-events: none;
+        }
+
+        > .flex::before {
+            content: none;
+        }
+
+        > .flex::after {
+            content: none;
+        }
+
+        .nitro-card-close-button {
+            right: 6px !important;
+            width: 18px;
+            height: 18px;
+            min-width: 18px;
+            border: 1px solid #777;
+            border-radius: 5px;
+            background: linear-gradient(180deg, #f9f9f9 0%, #cacaca 100%);
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
+        }
+
+        .nitro-card-close-button::before,
+        .nitro-card-close-button::after {
+            left: 50%;
+            top: 50%;
+            width: 10px;
+            height: 2px;
+            background: #6a6a6a;
+            margin: 0;
         }
     }
 
-    .ubuntu-close-button {
-        transform: scale(0.82);
-        transform-origin: center;
+    .nitro-wired__content {
+        position: relative;
+        background: #efefef !important;
+        border: 0 !important;
+        box-shadow: none !important;
+        padding: 0 !important;
+        gap: 0 !important;
+        overflow: visible !important;
     }
 
-    .nitro-wired__content {
-        background: #d9d9d9 !important;
-        padding: 4px !important;
-        gap: 4px !important;
-        overflow: visible !important;
+    .nitro-wired__body {
+        display: flex;
+        flex-direction: column;
+        padding: 8px 10px 10px;
+        gap: 6px;
+        font-size: 12px;
+        line-height: 1.2;
     }
 
     .nitro-wired__section {
         display: flex;
         flex-direction: column;
-        gap: 3px;
+        gap: 5px;
+    }
+
+    .nitro-wired__summary {
+        position: relative;
+        min-height: 56px;
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
+        padding: 22px 10px 7px 12px;
+        background: linear-gradient(180deg, #e5e5e5 0%, #d7d7d7 100%);
+        overflow: hidden;
+        color: #000;
+    }
+
+    .nitro-wired__summary-bg {
+        position: absolute;
+        width: auto;
+        height: auto;
+        top: 50%;
+        z-index: 0;
+        pointer-events: none;
+        user-select: none;
+        -webkit-user-drag: none;
+    }
+
+    .nitro-wired__summary-bg--left {
+        left: 50%;
+        transform: translate(-150%, -50%);
+        opacity: 0.45;
+    }
+
+    .nitro-wired__summary-bg--right {
+        left: 50%;
+        top: 72%;
+        transform: translate(-46%, -50%);
+        opacity: 0.24;
+    }
+
+    .nitro-wired__summary-copy {
+        position: relative;
+        z-index: 1;
+    }
+
+    .nitro-wired__summary-copy {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        gap: 1px;
+    }
+
+    .nitro-wired__summary-kind {
+        color: #000;
+        font-size: 10px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        line-height: 1;
+        text-transform: uppercase;
+    }
+
+    .nitro-wired__summary-title {
+        color: #4a4a4a !important;
+        font-size: 15px !important;
+        font-weight: 700 !important;
+        line-height: 1.02;
+        text-align: left !important;
+        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
+        word-break: break-word;
     }
 
     .nitro-wired__section--body {
         overflow: visible !important;
     }
 
-    .nitro-wired__section .font-bold {
+    .nitro-wired__section .font-bold:not(.nitro-wired__summary-title) {
         width: 100%;
-        font-weight: 400 !important;
-        text-align: center;
+        font-size: 13px !important;
+        font-weight: 700 !important;
+        text-align: left;
     }
 
     .nitro-wired__summary-description,
     .nitro-wired__furni-selector-description,
     .nitro-wired__picker-label {
+        font-size: 12px;
         line-height: 1.15;
     }
 
+    .nitro-wired__source-row,
+    .nitro-wired__give-var-section-title,
+    .nitro-wired__advanced-toggle {
+        font-size: 12px;
+    }
+
     .nitro-wired__divider,
     hr {
         height: 1px;
         border: 0;
-        background: #a6a6a6;
-        box-shadow: 0 1px 0 #f8f8f8;
+        background: #bababa;
+        box-shadow: 0 1px 0 #fff;
         margin: 0 !important;
     }
 
@@ -918,14 +1038,47 @@ body {
 
     .form-check-input[type='checkbox']:checked,
     input[type='checkbox']:checked {
-        background:
-            linear-gradient(135deg, transparent 0 46%, #ffffff 46% 54%, transparent 54% 100%),
-            linear-gradient(45deg, transparent 0 30%, #4a4a4a 30% 42%, transparent 42% 100%),
-            linear-gradient(180deg, #d9d9d9 0%, #c8c8c8 100%);
+        background: linear-gradient(180deg, #d9d9d9 0%, #c8c8c8 100%);
         border-color: #767676;
     }
 
+    .form-check-input[type='checkbox']:checked::before,
+    .form-check-input[type='checkbox']:checked::after,
+    input[type='checkbox']:checked::before,
+    input[type='checkbox']:checked::after {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 12px;
+        height: 2px;
+        border-radius: 2px;
+        background: #111111;
+        transform-origin: center;
+    }
+
+    .form-check-input[type='checkbox']:checked::before,
+    input[type='checkbox']:checked::before {
+        transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    .form-check-input[type='checkbox']:checked::after,
+    input[type='checkbox']:checked::after {
+        transform: translate(-50%, -50%) rotate(-45deg);
+    }
+
+    .form-check {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    .form-check-label {
+        margin-left: 1px;
+    }
+
     .form-control,
+    .form-select,
     input[type='text'],
     input[type='number'],
     textarea {
@@ -935,7 +1088,7 @@ body {
         background: #f6f6f6 !important;
         color: #000 !important;
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
-        font-size: 11px;
+        font-size: 12px;
         padding: 3px 6px;
     }
 
@@ -945,10 +1098,10 @@ body {
         display: inline-flex !important;
         align-items: center !important;
         justify-content: center !important;
-        min-height: 20px !important;
+        min-height: 22px !important;
         border: 1px solid #8e8e8e !important;
-        border-radius: 5px !important;
-        background: linear-gradient(180deg, #f6f6f6 0%, #e4e4e4 49%, #d0d0d0 50%, #ececec 100%) !important;
+        border-radius: 6px !important;
+        background: linear-gradient(180deg, #fcfcfc 0%, #e8e8e8 46%, #d5d5d5 47%, #efefef 100%) !important;
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
         color: #000 !important;
         padding-top: 0 !important;
@@ -966,9 +1119,17 @@ body {
         font-weight: 700;
     }
 
+    &.nitro-card-shell {
+        resize: none !important;
+    }
+
+    .nitro-wired__actions {
+        padding-top: 2px;
+    }
+
     .nitro-slider-wrapper {
         align-items: center;
-        gap: 2px;
+        gap: 4px;
     }
 
     .nitro-wired__advanced-toggle {
@@ -1591,6 +1752,19 @@ body {
     }
 }
 
+.nitro-card-shell.nitro-wired {
+    border: 1px solid #8d8d8d !important;
+    border-color: #8d8d8d !important;
+    box-shadow: inset 0 0 0 1px #fff !important;
+    outline: none !important;
+}
+
+.nitro-card-shell.nitro-wired .nitro-card-header-shell,
+.nitro-card-shell.nitro-wired .nitro-card-content-shell {
+    border: 0 !important;
+    box-shadow: none !important;
+}
+
 /* ── Avatar Editor ─────────────────────────────────────────────────────── */
 
 .color-picker-frame {
diff --git a/src/hooks/wired/useWired.ts b/src/hooks/wired/useWired.ts
index e35e211..6bdb4c3 100644
--- a/src/hooks/wired/useWired.ts
+++ b/src/hooks/wired/useWired.ts
@@ -4,6 +4,7 @@ import { useBetween } from 'use-between';
 import { GetRoomSession, IsOwnerOfFloorFurniture, LocalizeText, SendMessageComposer, WiredFurniType, WiredSelectionVisualizer } from '../../api';
 import { useMessageEvent } from '../events';
 import { useNotification } from '../notification';
+import { useWiredTools } from '../wired-tools/useWiredTools';
 
 const useWiredState = () =>
 {
@@ -19,6 +20,7 @@ const useWiredState = () =>
     const [ allowedInteractionTypes, setAllowedInteractionTypes ] = useState<string[] | null>(null);
     const [ allowedInteractionErrorKey, setAllowedInteractionErrorKey ] = useState<string | null>(null);
     const { showConfirm = null, simpleAlert = null } = useNotification();
+    const { requestUserVariables = null, roomSettings = null } = useWiredTools();
 
     const saveWired = () =>
     {
@@ -273,6 +275,7 @@ const useWiredState = () =>
         const parser = event.getParser();
 
         WiredSelectionVisualizer.clearAllSelectionShaders();
+        if(roomSettings?.canInspect && requestUserVariables) requestUserVariables();
         setTrigger(null);
     });