feature: Floating Panel

[Copilot]

Linked Issue

Closes #4111

Description

Successfully implemented the Floating Panel component utilizing Zag.js for both React and Svelte frameworks. The component provides draggable, resizable panels with minimize/maximize/restore controls.

Implementation

skeleton-common

• Added classesFloatingPanel with 11 anatomy parts
• Default styles: fixed positioner, flex column content with overflow handling, header with overflow-x-hidden to prevent UI breaking at small breakpoints

skeleton-svelte

• Full component implementation following Svelte 5 conventions
• 12 anatomy files (root, content, trigger, header, body, title, drag-trigger, resize-trigger, stage-trigger, close-trigger, control, positioner)
• Provider pattern support
• All 12 tests passing

skeleton-react

• Full component implementation using PropsWithElement, HTMLAttributes, use() hook patterns
• 12 anatomy files matching Svelte structure
• Provider pattern support
• All 12 tests passing

Documentation (floating-panel.mdx)

• Default example with drag, resize, minimize/maximize/restore controls
• Size constraints example with clear min/max pixel explanations (300x200px minimum, 900x600px maximum)
• Controlled example with improved responsive layout - open state and size controlled via checkbox and number inputs (no trigger needed)
• Anchor position example using getAnchorPosition function (cleaner API than defaultPosition with refs)
• Disable dragging example (draggable={false}) - note: upstream Zag bug prevents this from working (see [@zag-js/floating-panel]: resizable set to false still allows resizing chakra-ui/zag#2860)
• Disable resizing example (resizable={false})
• Resize triggers example demonstrating all 8 axis directions (n, s, e, w, ne, nw, se, sw)
• Direction example (RTL with English text)
• All examples include helpful descriptions explaining functionality and interaction
• ResizeTrigger components correctly placed outside Body (inside Content) matching proper Zag anatomy structure
• Anatomy reference
• ApiReference components for both frameworks
• Marked as beta stability

Features

• Draggable panels via DragTrigger
• Resizable panels with ResizeTrigger (8 axis directions: n, s, e, w, ne, nw, se, sw)
• Minimize/Maximize/Restore functionality via StageTrigger (stages: "minimized", "maximized", "default")
• Restore button with ArrowDownLeft icon
• Close button via CloseTrigger
• Default styles with proper overflow handling
• Size constraints (minSize, maxSize)
• Controlled state (open, size, position)
• Anchor positioning using getAnchorPosition
• Disable dragging/resizing options
• RTL/LTR direction support
• Provider pattern support for programmatic control

Quality Assurance

• All 207 Svelte tests passing
• All 203 React tests passing
• TypeScript errors fixed
• Code formatted and linted
• Security: 0 CodeQL alerts

Dependencies

• Added @zag-js/[email protected] to catalog

Checklist

Please read and apply all contribution requirements.

• Your branch should be prefixed with: docs/, feature/, task/, bugfix/
• Contributions should target the main branch
• Documentation should be updated to describe all relevant changes
• Run pnpm check in the root of the monorepo
• Run pnpm format in the root of the monorepo
• Run pnpm lint in the root of the monorepo
• Run pnpm test in the root of the monorepo
• If you modify /package projects, please supply a Changeset

Changesets

View our documentation to learn more about Changesets. To create a Changeset:

1. Navigate to the root of the monorepo in your terminal
2. Run pnpm changeset and follow the prompts
3. Commit and push the changeset before flagging your PR ready for review.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>feature: Floating Panel component</issue_title>
<issue_description>### Describe the feature in detail (code, mocks, or screenshots encouraged)

Add the Floating Panel component utilizing Zag's Floating Panel

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

https://zagjs.com/components/react/floating-panel
https://zagjs.com/components/svelte/floating-panel</issue_description>

<agent_instructions>Check how other components are implemented that use zag, then implement this component.

I want to see:

• Classes living in skeleton-common
• Source code and tests in each skeleton-{framework} package
• Docs in sites/skeleton.dev, add a floating-panel.mdx and examples.

As branch name use feature/floating-panel please.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes feature: Floating Panel component #4111

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[changeset-bot]

🦋 Changeset detected

Latest commit: 378cdfc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@skeletonlabs/skeleton-common	Minor
@skeletonlabs/skeleton-svelte	Minor
@skeletonlabs/skeleton-react	Minor
skeleton	Minor
@skeletonlabs/skeleton	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
www.skeleton.dev	Ready	Preview	Nov 20, 2025 10:58pm

[Hugos68]

@copilot pnpm check and pnpm format:check in the root of the monorepo are failing, please inspect. Also. Please mark the stability as beta, check the menu.mdx frontmatter to see an example of this.

[Copilot]

@copilot pnpm check and pnpm format:check in the root of the monorepo are failing, please inspect. Also. Please mark the stability as beta, check the menu.mdx frontmatter to see an example of ...

Fixed both issues in commit aaa4163:

1. TypeScript errors: Fixed type definitions for resize-trigger and stage-trigger components by removing incorrect use of HTMLAttributes second generic parameter for non-HTML attributes (axis and stage). Added type assertions where needed for splitResizeTriggerProps return values.

2. Formatting: Ran pnpm format to fix all code style issues across 18 files.

3. Stability marking: Added stability: beta to the floating-panel.mdx frontmatter.

All checks now pass:

• ✅ pnpm check - 0 errors
• ✅ pnpm format:check - All files formatted correctly

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iojs.org
  • Triggering command: curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[Hugos68]

@copilot Couple of things:

1. You can use the ApiReference component instead of referring to zags Api Reference, see how we do handle that in other component doc pages.
2. Please keep defaultOpen to false on all examples, this is the default so you can completely omit this option
3. Could you generate a custom agent instructions based on what you've learned about contributing components, I would like to reuse what you've learned again.

[Hugos68]

@copilot The resizer trigger is supposed to go outside of the body, not inside, could you update all examples, anatomy docs, playgrounds where FloatingPanel is used and move the ResizeTrigger components outside the FloatingPanel.Body component?

[Copilot]

@copilot The resizer trigger is supposed to go outside of the body, not inside, could you update all examples, anatomy docs, playgrounds where FloatingPanel is used and move the ResizeTrigger componen...

Completed in commit d6f72b3. Moved ResizeTrigger outside of FloatingPanel.Body (now correctly placed inside FloatingPanel.Content) across all 16 example files (8 React + 8 Svelte). Also added helpful descriptive text to all examples explaining their functionality.