Inspector, sidebar, floating and toolbar audit
Scope: all 32 TSX files under the four assigned trees; static source review on feature/uiverse-library. Line numbers refer to this checkout. No product edits. These findings are source-supported; rendered contrast, viewport and keyboard behavior still require browser verification. P1 = blocks an essential action/accessibility/mobile workflow; P2 = consistency, clarity, missing feedback; P3 = dormant-code debt.
Reachability
src/App.tsx:50-51,872-878 mounts FloatingElementsTool and FloatingSidebar. App.tsx:72-74,932 lazy-loads AppModalsHost. That host mounts UIverse and Text/Button/Image/Video/Shape editors. SectionPropertiesModal is separately active through CanvasSection.tsx:32,609. FloatingSidebar mounts FloatingPagesDrawer, FloatingStylesDrawer and FloatingSettingsDrawer (160-200); styles falls back to LegacyStylesDrawer only without projectSession (FloatingStylesDrawer:21). FloatingElementsDrawer mounts UserProfileSection, HeaderLibrary and UiverseSubpanel (475-476,901-902).
No external source import/mount found for LeftSidebar, RightInspector, FloatingInspectorCard, FloatingToolbar, FloatingDrawer or profile/UserProfileSubpanel. Their descendants are therefore legacy/unmounted in the current App graph. Do not spend first-pass active redesign time on them or accidentally resurrect duplicate surfaces.
Shared active defects and boundaries
- P1: six property popovers are plain divs, with icon-only headers, no named dialog/region, Escape handling, focus entry/return, or keyboard/touch drag. Shared hook
src/hooks/useDraggableFloating.tshandles mouse only and clamps only while dragging, not initial layout or resize. Choose nonmodal named property region or proper dialog semantics deliberately; do not add aria-modal to a panel that intentionally permits canvas editing. Ensure first/last controls stay reachable with mobile keyboard open. - P1: visible labels are commonly spans or sibling labels lacking htmlFor/id, so labels do not name controls. Numeric fields also remove outlines with no replacement. Native default focus might exist on untouched buttons; absence of custom focus alone is not proof of total invisibility. Explicit removed outlines are concrete failures to fix.
- P2: active chrome repeats white/95 glass, backdrop blur, 16px corner panels/buttons, bespoke shadows, slide/zoom/scale transitions and unrelated blue/amber/emerald/purple accents. Replace with shared surface/border/radius/elevation/control/focus tokens. Keep one purposeful accent and semantic success/error colors.
- P2: slate-400 (#94a3b8) small text on white is approximately 2.56:1; slate-300 less. This appears repeatedly in secondary text, inactive tabs, hints and status timestamps and fails 4.5:1 normal-text AA. White on amber-400 is also too weak for meaningful flame icon contrast. Measure final rendered compositing separately.
- Preserve website designs: UIverse CSS/HTML, headerSource output, shape presets and their faithful preview interiors are user-insertable website content. Their gradients/shadows/radii/animation are not automatically builder chrome violations. Clean preview wrappers/toolbars; offer simple defaults separately. Never rewrite saved user content just to enforce chrome styling.
- Sync local property changes do not need invented loading spinners. They do need valid input handling, selected/pressed semantics, focus, clear indication that changes apply immediately, and connection to the existing project save/error status. Async uploads/account/backups do need explicit pending/error/success.
Active files: complete coverage
| File | Priority and concrete finding | States present / missing |
|---|---|---|
src/components/toolbar/FloatingElementsTool/FloatingElementsTool.tsx |
P2 29-50 fixed top/left tool, oversized 16px radius for 40px button, hover scale/shadow and glass animated tooltip. 38-40 only mouse enters tooltip; add focus-visible treatment and exposed expanded/controls relationship. Closing swaps out trigger, so restore focus after drawer close. | Hover/active present; keyboard tooltip, expanded, focus-return absent. |
src/components/toolbar/FloatingSidebar/FloatingElementsDrawer.tsx |
P1 482-503,532-623,692-735,786-889 insertion cards are clickable/draggable divs without keyboard activation; use accessible buttons with drag as optional. P1 403-460 two fixed panels exceed narrow/tablet available space: 200+8+330 (or 510) plus 24px inset; mobile hides category panel but desktop breakpoint can still overflow. P2 87-109 anime entry/scale with no local reduced-motion handling; 407/460 hardcoded shadow/radius. P2 147-150/906-917 Social/Blog/Reserva lead to generic instruction, not actual content or an honest unavailable state. P2 413-415 externally hosted generic Logo has no error fallback. DragEnd closes even cancelled drag (486 etc). | No async catalog requirement; UIverse empty exists downstream. Missing category current/expanded, heading for secondary context, Escape/focus return, keyboard insertion, image error, honest unavailable states. |
src/components/toolbar/FloatingSidebar/FloatingSidebar.tsx |
P1 159 fixed rail and long vertical control stack have no viewport-height overflow strategy; short/mobile viewports lose lower actions. P1 516-531 Idioma is a working-looking button with no click action; disable/explain or implement. P2 205-241 trends generic promotional bento/conversion advice and Ideas opens same trends state (430); remove generic filler from core workflow. P2 repeated rounded-2xl, hover scale, glass/shadow/zoom tooltips 310-658; tooltips only open on mouse, not focus. P2 active flyout buttons lack aria-expanded/controls/pressed. 221-227 trends close lacks name. | Undo/redo disabled and publish spinner present. Publish spinner replaces text-equivalent without busy/live status; no local failure/success (may be owned by App). Device label does not announce current mode. |
src/components/toolbar/FloatingSidebar/FloatingPagesDrawer.tsx |
P1 90-100 fixed 340px width plus 76px rail offset and 24px parent inset spills at mobile widths. P1 213-220 page selection div inaccessible to keyboard; row actions at 246 opacity-0 only reveal on group-hover, invisible to focus/touch. P2 136-146 PopUp tab only changes styling: list remains pages; remove/disable until functional. 223 GripVertical falsely suggests reorder. 154-160/178-185/226-237 inputs and save icon lack programmatic labels. 298-300 cookie policy Auto is unverified static placeholder. | Hover/active, create/cancel present. Missing no-results/empty filtered list, input errors, selected-page semantics, tab semantics, focus-within actions, Escape rename/cancel, focus return. |
src/components/toolbar/FloatingSidebar/FloatingStylesDrawer.tsx |
P2 27-35 hardcoded 16px corners and shadow, 70 animated-looking curved tabs/shadow. 50-68 tabs have arrow navigation but all remain in tab order (no roving tabIndex); add Home/End and standard single tab stop. P2 89-110 palette buttons do not expose current preset. Max-width is an improvement over other drawers; test right 80px + 95px reserved margin at 320px. | Named section, tablist/tab/tabpanel, selected and arrow keys present. Missing selected palette feedback and explicit focus treatment. No load/error needed for local palettes; save status is external. |
src/components/toolbar/FloatingSidebar/LegacyStylesDrawer.tsx |
Conditional active fallback. P1 104-116 presets are clickable divs without keyboard support. P2 52-61 fixed 320px + rail offset, entry motion/shadow, mouse-only drag; 145-177 buttons show selection only visually, need pressed/radio semantics. Header at 65-72 only palette icon, no context title. | Visual hover/current present; missing keyboard palette, narrow viewport, focus/return, named region, Escape. |
src/components/toolbar/FloatingSidebar/FloatingSettingsDrawer.tsx |
P1 148-155 handler expects a backup object but 457 passes b.pages; reads backup.pages and restore silently fails. P1 176-180 370/380px width + 110px offset cannot fit mobile. P1 253-262 site selection is clickable div. P2 392-397 always renders backupMessage with green success icon/background, including errors and pending-save warnings from 124-128/141. P2 162-169 delete-backup failure only console.error; site/backup deletes lack in-flight disable, can duplicate submit. P2 533-537 always claims MCP connected with pulsing dot without connection state/check. 560-566/582-598 clipboard immediately reports success before promise resolves; no error. P2 674-675 hardcoded admin account and 683-699 inert detail/mail cards are placeholder UI. 225-229 SSL power button has no handler. P2 accordions lack expanded/controls (365,515,651), site dropdown lacks popup/expanded semantics, span-only input labels (309-330,405-414,709-724), weak focus rings blue-500/20. |
Backup empty, create pending/disabled, messages, destructive confirmations present. Missing backup-fetch loading/failure distinction, delete pending/error, restore pending/error, true connection states, copy error/live success. |
src/components/toolbar/FloatingSidebar/UserProfileSection.tsx |
P1 52-54 name-save error only logs, leaving user without recovery feedback; logout 167-170 has no pending/error guard. P2 96-99 sibling label does not name input 117. 155-159 success and 195-198 delete errors lack live/alert semantics. 131-132/208-209 pending buttons become unnamed spinners. Empty name submit is silently ignored (43) while Save remains enabled. | Save/delete loading and disabled, success, delete confirmation/error present. Missing save error, invalid/empty state, live statuses, logout pending/error and pending accessible names. |
src/components/toolbar/FloatingSidebar/uiverse/UiverseSubpanel.tsx |
P2 44-70 accessible insertion button is a good baseline; 80-85 fixed native dimensions and .65 scale can crop wider designs in narrow preview area; check preview framing independently of content. 93-101 author link is 10px. No explicit hover/focus/current insertion styling. Do not remove the imported design decoration inside UiverseElement. | Search is named; no-results exists 103-107, keyboard click works. Missing insertion confirmation/failure when callback fails; static bundled catalog does not need fetch loading. |
src/components/toolbar/FloatingSidebar/uiverse/HeaderLibrary.tsx |
P2 72-88 uses role=tab but lacks tabpanel/controls, roving tabindex, arrow keys. 117-126 fixed 1000px .28-scaled preview can crop in narrow card. 132-135 10px instruction. source output 17-33 contains generated website designs, not chrome: preserve saved content; replace generic Mi marca/Inicio samples only as a deliberate template-content decision. | Accessible insertion labels and click fallback present. Missing complete tab semantics/focus/current category panel relation. |
src/components/inspector/AppModalsHost.tsx |
P2 68-69 routes UIverse to one editor and preserves its authored HTML/CSS; correct boundary to keep. 85-132 unsupported component types return no editor even when isComponentModalOpen (e.g. form/counter/pricing/accordion/store types); give useful unsupported-edit explanation or route appropriate editor. No focus orchestration at host. | Selection guard present. Missing unsupported-type state and common focus entry/return policy. |
src/components/inspector/UiversePropertiesModal.tsx |
P1 21-26 claims modal dialog but lacks focus trap, Escape, focus return and background inerting. autofocus only exists in conditional label editor 44-56, so labelSelector=null has no deliberate focus target. P2 26 16px radius/shadow-xl; 117-126 actions have no defined hover/active/focus states. Error 111-114 alert is good; action error persists while editing (81) and is not associated aria-invalid/describedby with field. | Responsive width, max-height, labels, cancel, distinct save, HTTPS error alert present. Missing modal keyboard lifecycle, invalid association, error reset; no async loading needed for synchronous onUpdate. |
src/components/inspector/PropertyModals/TextPropertiesModal.tsx |
P1 126-151 common unnamed glass popover, mouse-only drag, fixed x32/y90; long body 158 has no max-height/scroll unlike Image/Button, lower controls can leave short viewport. P1 numeric fields 186-193,351-360,387-396 use outline-none without replacement and no accessible name; textarea 416-422 placeholder-only. P2 format/alignment 209-308 uses selected color without aria-pressed, color input 321 lacks name; 16px color controls too small. | Visual hover/format selected present. Missing keyboard state semantics, named inputs/focus, constrained body, immediate-apply explanation. |
src/components/inspector/PropertyModals/ButtonPropertiesModal.tsx |
P1 67-70 tests generic # anchor before #page-, so #page links initialize wrong link mode. Link mode useState is not reset on element switch; host does not key ordinary editors. P1 99 common glass fixed popover; body max-h500 not constrained to viewport. P2 178-206 URL/select lack labels; 223/253/349 color inputs and numeric controls 286-293/323-330 unnamed and outline-none. Selected modes/swatch/shadow 132-175/364-384 lack pressed semantics. | Hover/selected present; missing link-invalid/destination-empty state, focus/name/current semantics. Website pill/shadow settings are intentional content controls, not forbidden chrome to remove. |
src/components/inspector/PropertyModals/ImagePropertiesModal.tsx |
P1 102 blocking alert for invalid image; FileReader 106-114 has no read/error/loading feedback. P1 common glass fixed popover 126; body max-h480 not viewport-bound. P2 URL 174-179, alt 337-342, colors/numerics unlabeled; numeric outline removed. 336 calls Alt SEO instead of explaining accessible description/decorative option. 354-362 sample thumbnails have no load/error fallback and hover-only 9px names. | File type check and fit selection present. Missing upload pending/read error/success, broken URL/image error, semantic selected and accessible numeric names/focus. |
src/components/inspector/PropertyModals/VideoPropertiesModal.tsx |
P1 62-67 stores blob URL as content with no durable-upload completion/error; UI suggests video loaded but persisted/reopened document cannot rely on that object URL. P2 80 common glass/mouse drag/center dimensions; 118 URL input lacks accessible name and URL-invalid feedback; 145-157 radius selected only visual. | File accept and URL normalization present. Missing upload pending/error/durable success, preview invalid/error, focus/selection semantics. |
src/components/inspector/PropertyModals/ShapePropertiesModal.tsx |
P1 78 common glass fixed popover; body102 lacks viewport max-height/scroll. P1 148-155/185-192 unnamed outline-none numeric fields; color inputs108/211 unnamed. P2 repeated 16px controls/chrome shadows and visual-only swatch/shadow current states. | Hover/current values present. Missing named region/inputs, focus, selected semantics and mobile height containment. |
src/components/inspector/PropertyModals/SectionPropertiesModal.tsx |
P1 46 initial y=innerHeight-280 not reconciled with actual height/resize; 62 common glass 260px fixed panel. P2 92-97 color and 126-131 URL lack accessible labels, swatches are 20px and only title/current ring. 135-142 reset immediately overwrites section without local feedback; ensure existing undo is discoverable. | Reset action, hover/current present. Missing named region, focus lifecycle, image invalid/error, current swatch semantics. |
Unmounted/legacy files: complete coverage (P3 unless reactivated)
| File | Concrete findings and missing states |
|---|---|
src/components/sidebar/LeftSidebar/LeftSidebar.tsx |
126-131 clickable logo div has no keyboard activation. 198 glass/shadow/16px fixed 288px drawer plus 56px rail and margins; no mobile layout. 163-174 hover tooltips/current nav lack expanded/current semantics. Need keyboard/focus and Escape if reactivated. |
src/components/sidebar/LeftSidebar/ElementsDrawer.tsx |
131-137/166-172 div insertion cards mouse-only; 86-110 tabs selected visually only. 139/174 shadow-hover chrome. Missing semantic selection, keyboard insertion, empty and focus. Static catalog needs no fake fetch loading. |
src/components/sidebar/LeftSidebar/PagesDrawer.tsx |
123-130 clickable page div;183 hover-only invisible row controls;137-149 rename outline removed and save icon unnamed;87 label not linked. Missing no-pages, invalid-name, rename-cancel, selected semantics and focus-within reveal. |
src/components/sidebar/LeftSidebar/LayersDrawer.tsx |
78-80 section and143-154 element selection divs inaccessible. 170-212 10px icons/tiny hit areas; selected lock uses amber icon on blue. No tree/list current/expanded/pressed semantics. Disabled move exists97/106; missing empty sections/elements explanation, keyboard tree navigation/focus. |
src/components/sidebar/LeftSidebar/StylesDrawer.tsx |
65-77 clickable palette divs;102-106 unlabeled color.127-143/160-175 font/radius selected only visually.26 generic Recommended2026 copy. Need keyboard palette and pressed/radio semantics. Radius options change user website, preserve them. |
src/components/sidebar/LeftSidebar/SettingsDrawer.tsx |
47-64/82-105 sibling labels without association;95/109 low-contrast 10px counters.114-122 broad unverified production-standards claim. Missing invalid domain, accessible validation/counters; immediate updates need external save status. |
src/components/inspector/RightInspector/RightInspector.tsx |
73/94/196 fixed320px inspector no mobile fit.113 close icon unnamed.214-254 visual tabs lack role/selection. Labels height/background not associated; no-selection help exists74-85. Missing selected-tab semantics, focus, mobile mode. |
src/components/inspector/RightInspector/ContentTab.tsx |
38-47 and throughout sibling labels do not name inputs;141-148 remove-image action exists. 188-208 generic sample selectors lack selected semantics. No controls/fallback for unsupported element types. Missing URL error, empty editor/focus/associated names. |
src/components/inspector/RightInspector/StyleTab.tsx |
47-51 horizontal centering hardcodes1000px independent of breakpoint. 82-138 numeric outline removed without replacement, labels unassociated. 205-233 alignment icons unnamed;241/266 colors unlabeled. Missing bounds/errors/pressed semantics; optional callbacks leave controls apparently active even absent. |
src/components/inspector/RightInspector/AdvancedTab.tsx |
33-47 lock button visual Active/Inactivo but no pressed/switch state. 26 select-none makes technical ID awkward to copy. No visible focus treatment; immediate delete should rely on clear undo. No async load required. |
src/components/inspector/RightInspector/FloatingInspectorCard.tsx |
127 glass/16px/animation/fixed310px atx28 overflows320px. 131 mouse drag only. 183-207 tabs visual-only. 619-666 numeric outline-none and no names; inputs and sliders throughout lack associated labels. Missing viewport fit, focus/region, selected/pressed semantics and sample asset error. |
src/components/floating/FloatingToolbar/FloatingToolbar.tsx |
68 long fixed rail no short-screen overflow.75/89/107 etc heavy shadow-lg,16px rounds,scale transitions. Hover-only tooltips116 etc; title-only names and no aria-current/expanded. Undo disabled present; missing keyboard tooltip/current/focus treatment. |
src/components/floating/FloatingDrawer/FloatingDrawer.tsx |
119 fixed288px plus96px inset, rounded24/shadow2xl animation.211/243/284 insertion divs mouse-only;397 page div and429 hover-only actions.264-290 search no explicit no-results. Tabs/selects/labels no ARIA state/name associations. Missing keyboard insertion, no-results, mobile layout/focus. |
src/components/toolbar/FloatingSidebar/profile/UserProfileSubpanel.tsx |
Duplicate of active UserProfileSection.47-48 save errors console-only;91 label not associated;126-127/203-204 pending unnamed spinner;150 success and190 error not live/alert;162 logout no pending/error. Keep one implementation if ever consolidating. |
Prioritized preparation
- Fix proven silent restore bug, keyboard-inaccessible insertion/page/site controls, mobile panel bounds and modal focus lifecycle.
- Create one chrome token/control/popover pattern: opaque surface, modest radius, one elevation, readable secondary text, consistent focus and compact but adequate targets. Preserve imported designs inside previews.
- Replace false affordances and generic production claims with actual state: PopUp/language/SSL/MCP/admin/mail/social/blog/booking. Distinguish unavailable, empty and failed states.
- Complete async feedback for image/video/account/backups/copy; expose pending accessible names and announce errors/success. Add aria-selected/pressed/expanded and proper label associations.
- Archive/consolidate dormant parallel implementations after checking external consumers; they are coverage debt, not active regressions.
No browser execution, edits, or tests were performed; this is design preparation. No decorative gradient/neumorphism was found in active chrome in this scope; the dominant violations are glass, bespoke elevation, large repeated radii, gratuitous scale/slide/zoom and filler/false affordances.