mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-23 02:46:42 +02:00
feat(splitscreen): add split-screen feature for multi-app side-by-side view
Add new @manacore/shared-splitscreen package enabling iFrame-based
split-screen functionality across Calendar, Todo, and Contacts apps.
Features:
- SplitPaneContainer with CSS Grid layout
- AppPanel with iFrame sandbox permissions and loading/error states
- ResizeHandle with mouse, touch, and keyboard support (20-80% range)
- PanelControls for swap and close actions
- Svelte 5 runes-based store with Context API
- URL persistence (?panel=todo&split=60)
- localStorage persistence with versioning
- Mobile auto-disable (<1024px breakpoint)
Integration:
- PillNavigation: added onOpenInPanel prop and Ctrl/Cmd+click support
- PillDropdown: added split button per app item
- Calendar, Todo, Contacts layouts wrapped with SplitPaneContainer
Also fixes:
- WeekView.svelte: fixed {@const} placement error
- MultiDayView.svelte: fixed {@const} placement error
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
f51708d75a
commit
f2ac3e245e
27 changed files with 2770 additions and 531 deletions
46
packages/shared-splitscreen/src/index.ts
Normal file
46
packages/shared-splitscreen/src/index.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/**
|
||||
* @manacore/shared-splitscreen
|
||||
*
|
||||
* Split-screen panel system for ManaCore apps.
|
||||
* Enables displaying two apps side-by-side using iFrames.
|
||||
*/
|
||||
|
||||
// Types
|
||||
export type {
|
||||
PanelConfig,
|
||||
SplitScreenState,
|
||||
AppDefinition,
|
||||
PanelEvent,
|
||||
StorageConfig,
|
||||
UrlState,
|
||||
} from './types.js';
|
||||
|
||||
export { DIVIDER_CONSTRAINTS, MOBILE_BREAKPOINT } from './types.js';
|
||||
|
||||
// Store
|
||||
export {
|
||||
createSplitPanelStore,
|
||||
setSplitPanelContext,
|
||||
getSplitPanelContext,
|
||||
hasSplitPanelContext,
|
||||
DEFAULT_APPS,
|
||||
type SplitPanelStore,
|
||||
} from './stores/split-panel.svelte.js';
|
||||
|
||||
// Utils
|
||||
export {
|
||||
parseUrlState,
|
||||
updateUrlState,
|
||||
clearUrlState,
|
||||
getCurrentUrlState,
|
||||
savePanelState,
|
||||
loadPanelState,
|
||||
clearPanelState,
|
||||
createStorageConfig,
|
||||
} from './utils/index.js';
|
||||
|
||||
// Components (will be added)
|
||||
export { default as SplitPaneContainer } from './components/SplitPaneContainer.svelte';
|
||||
export { default as AppPanel } from './components/AppPanel.svelte';
|
||||
export { default as PanelControls } from './components/PanelControls.svelte';
|
||||
export { default as ResizeHandle } from './components/ResizeHandle.svelte';
|
||||
Loading…
Add table
Add a link
Reference in a new issue