+
+ Overlays Β· Floating panel
+ FloatPanel
+
+ A general-purpose draggable + resizable floating panel β a user-movable surface for tool
+ palettes, inspectors and mini-windows. Soma owns drag, resize, stacking, dismissal and focus;
+ Eidos adds the surface chrome.
+
+
+ parts{compiled.parts.order.length}
+ events{events.length}
+ draggableyes
+ resizableyes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inspector A
+
+
+ Drag the header to move me.
+
+ {resizable ? 'Drag an edge or the SE corner to resize.' : 'Resize is disabled.'}
+
+
+ Keyboard: focus the header (Tab), press Enter to grab, then arrows to
+ move; Enter drops, Esc cancels. Same on the corner grip to resize.
+
+
+ {#if resizable}
+
+
+
+
+ {/if}
+
+
+
+
+
+
+ Panel B
+
+
+ β
+
+
+ β’
+
+ Γ
+
+
+ Minimize, maximize, or bring to front.
+
+
+
+
+
+
+
+ Propiedades
+
+ (openC = false)}>
+ π
+
+ Γ
+
+
+ Custom header: delete action + close.
+
+
+
+
+
+ trace
+ {#if trace.length === 0}
+ drag the header, resize an edge, or close a panel
+ {:else}
+ {#each trace.slice(0, 3) as entry}
+ {entry.event} Β· {entry.family}
+ {fmtTime(entry.at)}
+ {/each}
+ {/if}
+
+ A pos
+ {posLabel}
+ size
+ {sizeLabel}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if tab === 'live'}
+
+ Controls
+
+ soma owns behavior Β·
+ eidos owns chrome. The panels are
+ strategy="absolute" bounded to the stage above.
+
+
+
+ soma props Β· behavior
+
+
+ {#each [['draggable', () => (draggable = !draggable), draggable], ['resizable', () => (resizable = !resizable), resizable], ['modal', () => (modal = !modal), modal], ['dismissible', () => (dismissible = !dismissible), dismissible], ['closeOnInteractOutside', () => (closeOnInteractOutside = !closeOnInteractOutside), closeOnInteractOutside], ['useAnchor', () => (useAnchor = !useAnchor), useAnchor]] as [label, toggle, val]}
+
+ {/each}
+
+
+
+
+
+
+ eidos props Β· chrome
+
+
+
+
+
+
+
+
+ eidos
+ visual Β· draggable + resizable panel
+ svelte
+
+
{eidosSnippet}
+
+ {/if}
+
+ {#if tab === 'api'}
+
+ API + reference comparison
+
+
+ | Feature | Ark UI | react-rnd | Mantine | Radix/Chakra/MUI | UIX |
|---|
+
+ | Draggable | β
| β
| β
| β (lib) | β
|
+ | Resizable | β
| β
| β | β | β
(opt-in) |
+ | Containment / bounds | β
| β
| β
| β | β
|
+ | Bring-to-front / stacking | β
| β | β | β | β
|
+ | fixed + absolute strategy | β
| β | β | β | β
|
+ | Anchored β free | β οΈ | β | β | anchored | β
|
+ | Perceptual (sound/haptic) | β | β | β | β | β
|
+ | Stages min/max | β
| β | β | β | βΈ v2 |
+
+
+
+
+ | Prop | Owner | Default | Notes |
|---|
+
+ | open | soma | false | Bindable. |
+ | strategy | soma | fixed | fixed | absolute (container-relative). |
+ | anchor / side / align / offset | soma | β/bottom/start/8 | Placement on open. |
+ | position / size | soma | bindable | Free x/y + w/h. |
+ | draggable / dragHandle | soma | true / header | Move gesture. content makes the whole surface a grab handle (grab cursor). |
+ | resizable / minΒ·maxWidth/Height | soma | false | Edge resize + the se ResizeGrip. |
+ | stage | soma | default | default | minimized | maximized (bindable). Via StageTrigger. |
+ | bounds | soma | viewport | Containment. |
+ | modal / dismissible / closeOn* | soma | false/true/β¦ | Dismissal. |
+ | variant | eidos | surface | surface | outline | ghost. |
+ | color | eidos | neutral | Accent palette. |
+
+
+
+ Compound parts: Header, Title, Controls,
+ Action (custom header button), Close,
+ StageTrigger (min/max/restore), Body,
+ ResizeHandle (edges), ResizeGrip (se, pointer + keyboard).
+ Keyboard: focus the header / grip β Enter to grab β arrows β Enter/Esc.
+
+
+ {/if}
+
+ {#if tab === 'morfo'}
+
+ Morfo contract
+
+
+ | Part | Marker | Element | Role | Optional |
|---|
+
+ {#each partsList as part}
+
+ | {part.kebab} |
+ [{part.marker}] |
+ <{part.defaultElement}> |
+ {part.role ?? 'β'} |
+ {part.optional ? 'yes' : 'no'} |
+
+ {/each}
+
+
+
+ {/if}
+
+ {#if tab === 'sema'}
+
+
+ sema Β· events
+
+
+
+ | Name | Family | Verb | Sequence | Target | Play |
|---|
+
+ {#each events as action}
+
+ | {action.name} |
+ {action.semantic.family} |
+ {action.semantic.verb ?? 'β'} |
+ {action.semantic.sequence ?? 'pre'} |
+ {action.target} |
+
+
+ |
+
+ {/each}
+
+
+
+ {/if}
+
+ {#if tab === 'recipe'}
+
+ Eidos recipe
+
+ Selectors in src/uix/eidos/components/float-panel/float-panel.css. Soma sets
+ position/size/z-index inline (via the translate property for smooth drag); Eidos
+ styles the surface.
+
+
+
+ | Selector | Owner | Purpose |
|---|
+
+ [data-float-panel-content] | morfo | Surface chrome (bg, border, shadow). |
+ [data-float-panel-content][data-topmost] | morfo | Frontmost panel lifts (shadow). |
+ [data-float-panel-content][data-variant][data-color] | eidos | Visual variant + accent. |
+ [data-float-panel-header] (grab) / [data-dragging] | morfo | Drag handle cursor grabβgrabbing. |
+ [data-float-panel-resize-handle][data-resize-edge] | morfo | Per-edge resize affordance + cursor. |
+
+
+
+ {/if}
+
+ {#if tab === 'a11y'}
+
+ Accessibility
+
+
+ | Concern | Contract |
|---|
+
+ | Role | Content uses role="dialog" (aria-modal when modal). |
+ | Labelling | aria-labelledby β Title. |
+ | Focus | Trapped only when modal; returns to trigger on close. |
+ | Keyboard | Escape closes (when dismissible). Keyboard move/resize is a documented v2 gap. |
+
+
+
+ {/if}
+