@exegia/corpora-ui 0.17.0 → 0.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-lib/components/blocks/nav/sidebar-block.d.ts +1 -1
- package/dist-lib/components/blocks/scaffold/__tests__/scaffold.test.d.ts +1 -0
- package/dist-lib/components/blocks/scaffold/constants.d.ts +23 -0
- package/dist-lib/components/blocks/scaffold/index.d.ts +27 -0
- package/dist-lib/components/blocks/scaffold/panel-close-button.d.ts +4 -0
- package/dist-lib/components/blocks/scaffold/panel-menu-button.d.ts +8 -0
- package/dist-lib/components/blocks/scaffold/scaffold-actions.d.ts +10 -0
- package/dist-lib/components/blocks/scaffold/scaffold-canvas.d.ts +7 -0
- package/dist-lib/components/blocks/scaffold/scaffold-context.d.ts +5 -0
- package/dist-lib/components/blocks/scaffold/scaffold-inspector.d.ts +9 -0
- package/dist-lib/components/blocks/scaffold/scaffold-main.d.ts +8 -0
- package/dist-lib/components/blocks/scaffold/scaffold-panel.d.ts +10 -0
- package/dist-lib/components/blocks/scaffold/scaffold-root.d.ts +8 -0
- package/dist-lib/components/blocks/scaffold/scaffold-sidebar.d.ts +7 -0
- package/dist-lib/components/blocks/scaffold/scaffold-sub-panel.d.ts +3 -0
- package/dist-lib/components/blocks/scaffold/scaffold-tab.d.ts +9 -0
- package/dist-lib/components/blocks/scaffold/type.d.ts +135 -0
- package/dist-lib/components/blocks/scaffold/use-scaffold.d.ts +8 -0
- package/dist-lib/components/blocks/scaffold/utils.d.ts +21 -0
- package/dist-lib/components/blocks/shell/animated-panel-inset.d.ts +2 -0
- package/dist-lib/components/blocks/shell/animated-panel-provider.d.ts +2 -0
- package/dist-lib/components/blocks/shell/animated-panel-trigger.d.ts +2 -0
- package/dist-lib/components/blocks/shell/animated-panel.d.ts +2 -0
- package/dist-lib/components/blocks/shell/animated-sidebar-content.d.ts +2 -0
- package/dist-lib/components/blocks/shell/animated-sidebar-footer.d.ts +2 -0
- package/dist-lib/components/blocks/shell/animated-sidebar-group-content.d.ts +2 -0
- package/dist-lib/components/blocks/shell/animated-sidebar-group-label.d.ts +2 -0
- package/dist-lib/components/blocks/shell/animated-sidebar-group.d.ts +2 -0
- package/dist-lib/components/blocks/shell/animated-sidebar-header.d.ts +2 -0
- package/dist-lib/components/blocks/shell/animated-sidebar-menu-button.d.ts +3 -0
- package/dist-lib/components/blocks/shell/animated-sidebar-menu-item.d.ts +2 -0
- package/dist-lib/components/blocks/shell/animated-sidebar-menu-sub-button.d.ts +3 -0
- package/dist-lib/components/blocks/shell/animated-sidebar-menu-sub-item.d.ts +2 -0
- package/dist-lib/components/blocks/shell/animated-sidebar-menu-sub.d.ts +2 -0
- package/dist-lib/components/blocks/shell/animated-sidebar-menu.d.ts +2 -0
- package/dist-lib/components/blocks/shell/index.d.ts +16 -0
- package/dist-lib/components/blocks/shell/type.d.ts +90 -4
- package/dist-lib/components/blocks/shell/utils.d.ts +37 -0
- package/dist-lib/components/motion/index.d.ts +1 -0
- package/dist-lib/components/motion/overflow-actions.d.ts +35 -0
- package/dist-lib/components/ui/button-group.d.ts +11 -0
- package/dist-lib/components/ui/glasscn/glass-button-group.d.ts +5 -0
- package/dist-lib/components/ui/glasscn/glass-container.d.ts +7 -0
- package/dist-lib/components/ui/glasscn/glass-separator.d.ts +5 -0
- package/dist-lib/components/ui/group.d.ts +17 -0
- package/dist-lib/components/ui/separator.d.ts +2 -3
- package/dist-lib/components/ui/sheet.d.ts +14 -0
- package/dist-lib/components/ui/tooltip.d.ts +6 -0
- package/dist-lib/index.d.ts +2 -1
- package/dist-lib/index.js +1631 -1101
- package/dist-lib/index.js.map +1 -1
- package/dist-lib/lib/ease.d.ts +3 -0
- package/dist-lib/lib/hooks/use-hover-capable.d.ts +6 -0
- package/package.json +2 -1
- package/src/components/beste/piece/browser-frame.tsx +2 -2
- package/src/components/blocks/nav/sidebar-block.tsx +5 -5
- package/src/components/blocks/nav/sidebar-nav-row.tsx +4 -5
- package/src/components/blocks/scaffold/__tests__/scaffold.test.tsx +286 -0
- package/src/components/blocks/scaffold/constants.ts +32 -0
- package/src/components/blocks/scaffold/index.ts +41 -0
- package/src/components/blocks/scaffold/panel-close-button.tsx +36 -0
- package/src/components/blocks/scaffold/panel-menu-button.tsx +218 -0
- package/src/components/blocks/scaffold/scaffold-actions.tsx +88 -0
- package/src/components/blocks/scaffold/scaffold-canvas.tsx +29 -0
- package/src/components/blocks/scaffold/scaffold-context.ts +18 -0
- package/src/components/blocks/scaffold/scaffold-inspector.tsx +80 -0
- package/src/components/blocks/scaffold/scaffold-main.tsx +28 -0
- package/src/components/blocks/scaffold/scaffold-panel.tsx +88 -0
- package/src/components/blocks/scaffold/scaffold-root.tsx +68 -0
- package/src/components/blocks/scaffold/scaffold-sidebar.tsx +31 -0
- package/src/components/blocks/scaffold/scaffold-sub-panel.tsx +51 -0
- package/src/components/blocks/scaffold/scaffold-tab.tsx +66 -0
- package/src/components/blocks/scaffold/type.ts +172 -0
- package/src/components/blocks/scaffold/use-scaffold.ts +48 -0
- package/src/components/blocks/scaffold/utils.ts +46 -0
- package/src/components/blocks/shell/animated-panel-inset.tsx +23 -0
- package/src/components/blocks/shell/animated-panel-provider.tsx +155 -0
- package/src/components/blocks/shell/animated-panel-trigger.tsx +42 -0
- package/src/components/blocks/shell/animated-panel.tsx +135 -0
- package/src/components/blocks/shell/animated-sidebar-content.tsx +19 -0
- package/src/components/blocks/shell/animated-sidebar-footer.tsx +19 -0
- package/src/components/blocks/shell/animated-sidebar-group-content.tsx +16 -0
- package/src/components/blocks/shell/animated-sidebar-group-label.tsx +29 -0
- package/src/components/blocks/shell/animated-sidebar-group.tsx +16 -0
- package/src/components/blocks/shell/animated-sidebar-header.tsx +16 -0
- package/src/components/blocks/shell/animated-sidebar-menu-button.tsx +151 -0
- package/src/components/blocks/shell/animated-sidebar-menu-item.tsx +20 -0
- package/src/components/blocks/shell/animated-sidebar-menu-sub-button.tsx +85 -0
- package/src/components/blocks/shell/animated-sidebar-menu-sub-item.tsx +19 -0
- package/src/components/blocks/shell/animated-sidebar-menu-sub.tsx +44 -0
- package/src/components/blocks/shell/animated-sidebar-menu.tsx +26 -0
- package/src/components/blocks/shell/index.ts +18 -0
- package/src/components/blocks/shell/shell-layout.tsx +28 -36
- package/src/components/blocks/shell/type.ts +112 -6
- package/src/components/blocks/shell/use-shell-panels.ts +1 -1
- package/src/components/blocks/shell/utils.ts +142 -1
- package/src/components/docs/demo-controls.tsx +1 -1
- package/src/components/motion/index.ts +0 -0
- package/src/components/motion/overflow-actions.tsx +376 -0
- package/src/components/ui/button-group.tsx +88 -0
- package/src/components/ui/glasscn/glass-button-group.tsx +48 -0
- package/src/components/ui/glasscn/glass-container.tsx +125 -0
- package/src/components/ui/glasscn/glass-separator.tsx +39 -0
- package/src/components/ui/glasscn/liquid-glass.tsx +250 -210
- package/src/components/ui/group.tsx +92 -0
- package/src/components/ui/separator.tsx +11 -11
- package/src/components/ui/sheet.tsx +135 -0
- package/src/components/ui/tooltip.tsx +66 -0
- package/src/index.css +1 -1
- package/src/index.ts +13 -1
- package/src/lib/ease.ts +26 -0
- package/src/lib/hooks/use-hover-capable.ts +23 -0
- package/dist-lib/components/motion/animated-sidebar.d.ts +0 -106
- package/src/components/motion/animated-sidebar.tsx +0 -1171
|
@@ -8,7 +8,7 @@ export type { ISidebarBlockProps as SidebarBlockProps, ISidebarNavItem as Sideba
|
|
|
8
8
|
* beside your own content. It owns its own sidebar context (⌘B toggles it);
|
|
9
9
|
* pass `open`/`onOpenChange` to drive the rail, and `openMobile`/
|
|
10
10
|
* `onOpenMobileChange` to open the drawer from a header button of your own.
|
|
11
|
-
* Compose the underlying `
|
|
11
|
+
* Compose the underlying `AnimatedPanel*` parts directly when a screen
|
|
12
12
|
* needs something this API does not cover.
|
|
13
13
|
*/
|
|
14
14
|
export declare function SidebarBlock({ sections, activeId, onNavigate, header, footer, showTrigger, side, variant, collapsible, open, defaultOpen, onOpenChange, openMobile, defaultOpenMobile, onOpenMobileChange, width, iconWidth, mobileWidth, ariaLabel, className, }: ISidebarBlockProps): React.ReactElement;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/** Icon-rail width in px (the rail sits directly on the desktop backdrop). */
|
|
2
|
+
export declare const SCAFFOLD_SIDEBAR_WIDTH = 64;
|
|
3
|
+
/** Inspector drawer width in px. */
|
|
4
|
+
export declare const SCAFFOLD_INSPECTOR_WIDTH = 272;
|
|
5
|
+
/** Most panels the canvas holds at once — omit Actions' `onAdd` when the
|
|
6
|
+
* count reaches it so the Add segment hides. */
|
|
7
|
+
export declare const SCAFFOLD_PANEL_CAPACITY = 3;
|
|
8
|
+
/** Gap in px between the drawer/actions and the viewport edges. */
|
|
9
|
+
export declare const SCAFFOLD_EDGE_GUTTER = 10;
|
|
10
|
+
/** Vertical room in px reserved above the canvas for the actions cluster. */
|
|
11
|
+
export declare const SCAFFOLD_HEADER_HEIGHT = 52;
|
|
12
|
+
/** Height in px of a panel's secondary strip. */
|
|
13
|
+
export declare const SCAFFOLD_SECONDARY_HEIGHT = 52;
|
|
14
|
+
/** Gap in px between a panel's primary surface and its secondary strip. */
|
|
15
|
+
export declare const SCAFFOLD_PANEL_GAP = 10;
|
|
16
|
+
/** How long the seam menu lingers expanded after the pointer leaves it (ms)
|
|
17
|
+
* before it collapses back to the compact toggle. The timer keeps counting
|
|
18
|
+
* even when the pointer leaves the window entirely. */
|
|
19
|
+
export declare const SCAFFOLD_MENU_COLLAPSE_DELAY = 4000;
|
|
20
|
+
/** Morph duration in seconds for drawer slides and panel layout shifts. */
|
|
21
|
+
export declare const SCAFFOLD_MORPH_DURATION = 0.3;
|
|
22
|
+
/** `--ease-smooth-out` as a motion/react easing tuple. */
|
|
23
|
+
export declare const SCAFFOLD_EASE: readonly [0.22, 1, 0.36, 1];
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { PanelCloseButton } from './panel-close-button';
|
|
2
|
+
import { PanelMenuButton } from './panel-menu-button.tsx';
|
|
3
|
+
import { ScaffoldActions } from './scaffold-actions';
|
|
4
|
+
import { ScaffoldCanvas } from './scaffold-canvas';
|
|
5
|
+
import { ScaffoldInspector } from './scaffold-inspector';
|
|
6
|
+
import { ScaffoldMain } from './scaffold-main';
|
|
7
|
+
import { ScaffoldPanel } from './scaffold-panel';
|
|
8
|
+
import { ScaffoldRoot } from './scaffold-root';
|
|
9
|
+
import { ScaffoldSidebar } from './scaffold-sidebar';
|
|
10
|
+
import { ScaffoldTab } from './scaffold-tab';
|
|
11
|
+
import { ScaffoldSubPanel } from './scaffold-sub-panel.tsx';
|
|
12
|
+
export { useScaffoldContext } from './scaffold-context';
|
|
13
|
+
export { useScaffold } from './use-scaffold';
|
|
14
|
+
export type * from './type';
|
|
15
|
+
export * from './constants';
|
|
16
|
+
export { PanelCloseButton, PanelMenuButton, ScaffoldActions, ScaffoldCanvas, ScaffoldInspector, ScaffoldMain, ScaffoldPanel, ScaffoldRoot, ScaffoldSidebar, ScaffoldTab, };
|
|
17
|
+
export declare const Scaffold: {
|
|
18
|
+
Root: typeof ScaffoldRoot;
|
|
19
|
+
Sidebar: typeof ScaffoldSidebar;
|
|
20
|
+
Main: typeof ScaffoldMain;
|
|
21
|
+
Actions: typeof ScaffoldActions;
|
|
22
|
+
Canvas: typeof ScaffoldCanvas;
|
|
23
|
+
Panel: typeof ScaffoldPanel;
|
|
24
|
+
Tab: typeof ScaffoldTab;
|
|
25
|
+
Inspector: typeof ScaffoldInspector;
|
|
26
|
+
SubPanel: typeof ScaffoldSubPanel;
|
|
27
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { PanelFloatingButtonProps } from './type';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
/** Floating close affordance in a panel's top-right corner. */
|
|
4
|
+
export declare function PanelCloseButton({ onClick, label, sound, className, }: PanelFloatingButtonProps): React.ReactElement;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { PanelMenuButtonProps } from './type';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* Floating menu affordance centered on the seam between a panel's primary
|
|
5
|
+
* surface and its secondary strip: a compact ⋯ toggle that morphs into the
|
|
6
|
+
* Expand | Swap (| Close) actions.
|
|
7
|
+
*/
|
|
8
|
+
export declare function PanelMenuButton({ onClick, onExpand, onCloseSecondary, secondaryExpanded, swapped, label, sound, className, }: PanelMenuButtonProps): React.ReactElement;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ScaffoldActionsProps } from './type';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* The floating pill cluster in the main region's top-right corner — the
|
|
5
|
+
* design's "Panel Context Menu": one tab per open panel (`Scaffold.Tab`
|
|
6
|
+
* children) plus an Add segment. Add renders only while `onAdd` is
|
|
7
|
+
* present — omit it once the canvas holds `SCAFFOLD_PANEL_CAPACITY`
|
|
8
|
+
* panels. Slides left in step with the inspector opening.
|
|
9
|
+
*/
|
|
10
|
+
export declare function ScaffoldActions({ onAdd, addLabel, addIcon, sound, className, children, ...rest }: ScaffoldActionsProps): React.ReactElement;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ScaffoldCanvasProps } from './type';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* The panel row below the action cluster: 8px gutters, 8px gaps, panels
|
|
5
|
+
* side by side. Key each `Scaffold.Panel` child so closes animate out.
|
|
6
|
+
*/
|
|
7
|
+
export declare function ScaffoldCanvas({ className, children, ...rest }: ScaffoldCanvasProps): React.ReactElement;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ScaffoldContextValue } from './type';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
export declare const ScaffoldContext: React.Context<ScaffoldContextValue | null>;
|
|
4
|
+
/** Read the scaffold's shared state; must run under `Scaffold.Root`. */
|
|
5
|
+
export declare function useScaffoldContext(): ScaffoldContextValue;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ScaffoldInspectorProps } from './type';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* The right-hand drawer: a brighter card that slides in over the canvas,
|
|
5
|
+
* inset from the viewport edges. Open state lives on `Scaffold.Root` (or
|
|
6
|
+
* `useScaffold().providerProps`); the drawer stays mounted so it can slide
|
|
7
|
+
* back out.
|
|
8
|
+
*/
|
|
9
|
+
export declare function ScaffoldInspector({ children, name, className, ...rest }: ScaffoldInspectorProps): React.ReactElement;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ScaffoldMainProps } from './type';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* The region right of the rail. Hosts `Scaffold.Actions` (top-right),
|
|
5
|
+
* `Scaffold.Canvas` and the `Scaffold.Inspector` overlay — all positioned
|
|
6
|
+
* against this box.
|
|
7
|
+
*/
|
|
8
|
+
export declare function ScaffoldMain({ className, children, ...rest }: ScaffoldMainProps): React.ReactElement;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ScaffoldPanelProps } from './type';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* A canvas panel: a primary card plus an optional secondary strip below it,
|
|
5
|
+
* separated by a slice of the desktop backdrop. Floating close and swap
|
|
6
|
+
* buttons reveal on hover when their callbacks are provided. Swapping trades
|
|
7
|
+
* the two cards with a layout morph — the strip glides up and grows into the
|
|
8
|
+
* primary slot while the primary card shrinks down into the strip.
|
|
9
|
+
*/
|
|
10
|
+
export declare function ScaffoldPanel({ children, SecondaryPanel, onSwap, onCloseSecondary, name, swapLabel, sound, className, }: ScaffoldPanelProps): React.ReactElement;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ScaffoldRootProps } from './type';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* The scaffold's viewport: desktop backdrop + horizontal row of rail and
|
|
5
|
+
* main region, and the provider for the shared inspector state. Fills its
|
|
6
|
+
* container — size it from the outside (e.g. `h-svh` for a full page).
|
|
7
|
+
*/
|
|
8
|
+
export declare function ScaffoldRoot({ inspectorOpen: inspectorOpenProp, defaultInspectorOpen, onInspectorOpenChange, inspectorWidth, className, children, ...rest }: ScaffoldRootProps): React.ReactElement;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ScaffoldSidebarProps } from './type';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* The 64px icon rail on the left edge. Transparent — it sits directly on
|
|
5
|
+
* the desktop backdrop; fill it with icon buttons.
|
|
6
|
+
*/
|
|
7
|
+
export declare function ScaffoldSidebar({ className, children, ...rest }: ScaffoldSidebarProps): React.ReactElement;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ScaffoldTabProps } from './type';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* A panel's tab inside the action cluster: its label plus a close
|
|
5
|
+
* affordance. Render one per open panel as Actions children, keyed —
|
|
6
|
+
* closes animate out of the pill. Omit `onClose` on the last remaining
|
|
7
|
+
* panel's tab; the canvas keeps at least one panel open.
|
|
8
|
+
*/
|
|
9
|
+
export declare function ScaffoldTab({ children, onClose, closeLabel, sound, className, ...rest }: ScaffoldTabProps): React.ReactElement;
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import { default as React, ComponentProps, ReactElement, ReactNode } from 'react';
|
|
2
|
+
/** Inspector state shared by every scaffold part through ScaffoldContext. */
|
|
3
|
+
export interface ScaffoldContextValue {
|
|
4
|
+
/** Whether the inspector drawer is currently shown. */
|
|
5
|
+
inspectorOpen: boolean;
|
|
6
|
+
/** Drawer width in px — Actions reads it to slide out of the drawer's way. */
|
|
7
|
+
inspectorWidth: number;
|
|
8
|
+
setInspectorOpen: (open: boolean) => void;
|
|
9
|
+
toggleInspector: () => void;
|
|
10
|
+
}
|
|
11
|
+
export interface ScaffoldRootProps extends ComponentProps<"div"> {
|
|
12
|
+
/** Controlled inspector state — pair with `onInspectorOpenChange`, or
|
|
13
|
+
* spread `useScaffold().providerProps` instead of wiring by hand. */
|
|
14
|
+
inspectorOpen?: boolean;
|
|
15
|
+
/** Initial inspector state when uncontrolled. Closed by default. */
|
|
16
|
+
defaultInspectorOpen?: boolean;
|
|
17
|
+
onInspectorOpenChange?: (open: boolean) => void;
|
|
18
|
+
/** Drawer width in px. Also drives how far Actions slides aside. */
|
|
19
|
+
inspectorWidth?: number;
|
|
20
|
+
}
|
|
21
|
+
export type ScaffoldSidebarProps = ComponentProps<"nav">;
|
|
22
|
+
export type ScaffoldMainProps = ComponentProps<"div">;
|
|
23
|
+
export type ScaffoldCanvasProps = ComponentProps<"div">;
|
|
24
|
+
/** React's drag/animation DOM handlers collide with motion's gesture props
|
|
25
|
+
* on `motion.*` elements — strip them from pass-through HTML props. */
|
|
26
|
+
type MotionSafe<T> = Omit<T, "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration">;
|
|
27
|
+
export interface ScaffoldActionsProps extends MotionSafe<Omit<ComponentProps<"div">, "children">> {
|
|
28
|
+
/** Called when the Add segment is pressed. The segment renders only
|
|
29
|
+
* while this is present — omit it to hide Add, e.g. once the canvas
|
|
30
|
+
* holds `SCAFFOLD_PANEL_CAPACITY` panels. */
|
|
31
|
+
onAdd?: () => void;
|
|
32
|
+
/** Label of the Add segment. */
|
|
33
|
+
addLabel?: ReactNode;
|
|
34
|
+
/** Replaces the default add icon. */
|
|
35
|
+
addIcon?: ReactNode;
|
|
36
|
+
/** The panel tabs (`Scaffold.Tab`, one per open panel) and any extra
|
|
37
|
+
* segments, rendered before Add. Key each tab — closes animate out. */
|
|
38
|
+
children?: ReactNode;
|
|
39
|
+
/** Emit interaction-sound attributes (inert until an app binds cuelume). */
|
|
40
|
+
sound?: boolean;
|
|
41
|
+
}
|
|
42
|
+
export type TScaffoldPanelChild<T extends ScaffoldSubPanelProps = ScaffoldSubPanelProps> = ReactElement<T, React.JSXElementConstructor<T>>;
|
|
43
|
+
export interface ScaffoldPanelProps {
|
|
44
|
+
/** The panel's content, rendered in a card with a drop shadow. */
|
|
45
|
+
children: ReactNode;
|
|
46
|
+
/** The panel's content, rendered in a card with a drop shadow. */
|
|
47
|
+
SecondaryPanel?: TScaffoldPanelChild;
|
|
48
|
+
/** Reveals the Swap action in the seam menu (needs `SecondaryPanel`).
|
|
49
|
+
* Swapping trades the two cards with a layout morph — flip the slot
|
|
50
|
+
* content here so each card carries its subject to its new home. */
|
|
51
|
+
onSwap?: () => void;
|
|
52
|
+
/** Reveals the Close action in the seam menu — remove `SecondaryPanel`
|
|
53
|
+
* here; the strip and the menu leave together. */
|
|
54
|
+
onCloseSecondary?: () => void;
|
|
55
|
+
/** Accessible name of the panel region. */
|
|
56
|
+
name?: string;
|
|
57
|
+
/** Emit interaction-sound attributes on the floating buttons. */
|
|
58
|
+
sound?: boolean;
|
|
59
|
+
/** Accessible name of the seam-menu toggle. */
|
|
60
|
+
swapLabel?: string;
|
|
61
|
+
/** Extra class names for the panel's root element. */
|
|
62
|
+
className?: string;
|
|
63
|
+
}
|
|
64
|
+
export interface ScaffoldTabProps extends MotionSafe<Omit<ComponentProps<"div">, "children">> {
|
|
65
|
+
/** The tab's label. */
|
|
66
|
+
children?: ReactNode;
|
|
67
|
+
/** Renders the tab's close button. The button renders only while this
|
|
68
|
+
* is present — omit it to pin the tab, e.g. on the last remaining
|
|
69
|
+
* panel (the canvas keeps at least one open). */
|
|
70
|
+
onClose?: () => void;
|
|
71
|
+
/** Accessible name of the close button. */
|
|
72
|
+
closeLabel?: string;
|
|
73
|
+
/** Emit interaction-sound attributes on the close button. */
|
|
74
|
+
sound?: boolean;
|
|
75
|
+
}
|
|
76
|
+
export type TSubPanelPosition = "bottom" | "top";
|
|
77
|
+
export type TSubPanelVariant = "card" | "subtle" | "inset";
|
|
78
|
+
export interface ScaffoldSubPanelProps extends MotionSafe<Omit<ComponentProps<"div">, "children">> {
|
|
79
|
+
children?: ReactNode;
|
|
80
|
+
/** Accessible name of the sub-panel region. */
|
|
81
|
+
name?: string;
|
|
82
|
+
/** Whether this is the primary or secondary sub-panel. */
|
|
83
|
+
primary?: boolean;
|
|
84
|
+
/** Whether this sub-panel holds the flexible slot. Defaults to `primary` —
|
|
85
|
+
* the panel flips it when the Expand action trades the slots. */
|
|
86
|
+
expanded?: boolean;
|
|
87
|
+
/** Visual style of the sub-panel. */
|
|
88
|
+
variant?: TSubPanelVariant;
|
|
89
|
+
/** Fixed width in px; omitted, the sub-panel flexes to share the canvas. */
|
|
90
|
+
width?: number;
|
|
91
|
+
/** Emit interaction-sound attributes on the floating buttons. */
|
|
92
|
+
sound?: boolean;
|
|
93
|
+
/** Extra class names for the sub-panel's root element. */
|
|
94
|
+
className?: string;
|
|
95
|
+
}
|
|
96
|
+
export interface ScaffoldInspectorProps extends MotionSafe<Omit<ComponentProps<"aside">, "children">> {
|
|
97
|
+
children?: ReactNode;
|
|
98
|
+
/** Accessible name of the drawer region. */
|
|
99
|
+
name?: string;
|
|
100
|
+
}
|
|
101
|
+
export interface PanelFloatingButtonProps {
|
|
102
|
+
onClick?: () => void;
|
|
103
|
+
/** Accessible name — the button is icon-only. */
|
|
104
|
+
label: string;
|
|
105
|
+
sound?: boolean;
|
|
106
|
+
className?: string;
|
|
107
|
+
}
|
|
108
|
+
export interface PanelMenuButtonProps extends PanelFloatingButtonProps {
|
|
109
|
+
/** Called when the Expand action is pressed — the panel trades which
|
|
110
|
+
* sub-panel holds the flexible slot. */
|
|
111
|
+
onExpand?: () => void;
|
|
112
|
+
/** Renders the Close action; called when it is pressed — the consumer
|
|
113
|
+
* removes the secondary strip. */
|
|
114
|
+
onCloseSecondary?: () => void;
|
|
115
|
+
/** Whether the secondary strip currently holds the flexible slot —
|
|
116
|
+
* flips the Expand chevron between down and up. */
|
|
117
|
+
secondaryExpanded?: boolean;
|
|
118
|
+
/** Whether the panel is swapped (column-reverse). Mirrors the Expand
|
|
119
|
+
* chevron so it keeps pointing at the sub-panel that grows next. */
|
|
120
|
+
swapped?: boolean;
|
|
121
|
+
}
|
|
122
|
+
export interface UseScaffoldOptions {
|
|
123
|
+
/** Initial inspector state. Closed by default. */
|
|
124
|
+
defaultInspectorOpen?: boolean;
|
|
125
|
+
/** Fires on every inspector open/close. */
|
|
126
|
+
onInspectorChange?: (open: boolean) => void;
|
|
127
|
+
}
|
|
128
|
+
export interface ScaffoldControls {
|
|
129
|
+
inspectorOpen: boolean;
|
|
130
|
+
setInspectorOpen: (open: boolean) => void;
|
|
131
|
+
toggleInspector: () => void;
|
|
132
|
+
/** Spread onto Scaffold.Root. */
|
|
133
|
+
providerProps: Pick<ScaffoldRootProps, "inspectorOpen" | "onInspectorOpenChange">;
|
|
134
|
+
}
|
|
135
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ScaffoldControls, UseScaffoldOptions } from './type';
|
|
2
|
+
/**
|
|
3
|
+
* Owns the scaffold's inspector state for UI living outside the scaffold
|
|
4
|
+
* (title-bar buttons, command palette, shortcuts). Spread the returned
|
|
5
|
+
* `providerProps` onto `Scaffold.Root`; without this hook the root manages
|
|
6
|
+
* the same state internally via `defaultInspectorOpen`.
|
|
7
|
+
*/
|
|
8
|
+
export declare function useScaffold({ defaultInspectorOpen, onInspectorChange, }?: UseScaffoldOptions): ScaffoldControls;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Variants } from 'motion/react';
|
|
2
|
+
import { ClassNameValue } from 'tailwind-merge';
|
|
3
|
+
import { TSubPanelVariant } from './type.ts';
|
|
4
|
+
/** Desktop backdrop the whole scaffold sits on — a soft warm-gray wash. */
|
|
5
|
+
export declare const scaffoldBackgroundClass: ClassNameValue;
|
|
6
|
+
/** Card surface shared by a panel's primary area and secondary strip. */
|
|
7
|
+
export declare const panelSurfaceClass: ClassNameValue;
|
|
8
|
+
/** Floating icon button hovering over a panel (close, swap). */
|
|
9
|
+
export declare const floatingButtonClass: ClassNameValue;
|
|
10
|
+
/** Hidden until the pointer rests on the panel (always shown for touch and
|
|
11
|
+
* while focused) — the affordances stay quiet until the panel is engaged. */
|
|
12
|
+
export declare const revealOnPanelHoverClass: ClassNameValue;
|
|
13
|
+
/** Pill segment inside the actions cluster (Add, browse). */
|
|
14
|
+
export declare const actionSegmentClass: ClassNameValue;
|
|
15
|
+
/** Pill segments (seam-menu actions, tabs, Add) blur/fade in place while
|
|
16
|
+
* the track morphs around them. The exit is a fast tween, not the layout
|
|
17
|
+
* spring — the track stays overflow-visible, so popped-out segments must be
|
|
18
|
+
* gone before the shrinking pill leaves them behind as a ghost. */
|
|
19
|
+
export declare const segmentVariants: Variants;
|
|
20
|
+
/** Map of sub-panel variants to their corresponding side. */
|
|
21
|
+
export declare const subPanelVariant: Record<TSubPanelVariant, ClassNameValue>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { AnimatedSidebarProviderProps } from './type';
|
|
2
|
+
export declare function AnimatedPanelProvider({ children, open, defaultOpen, onOpenChange, openMobile, defaultOpenMobile, onOpenMobileChange, className, style, ...props }: AnimatedSidebarProviderProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { AnimatedSidebarMenuButtonProps } from './type';
|
|
2
|
+
import type * as React from "react";
|
|
3
|
+
export declare function AnimatedSidebarMenuButton({ children, icon, badge, href, isActive, ariaExpanded, disabled, closeOnSelect, target, rel, onSelect, className, }: AnimatedSidebarMenuButtonProps): React.JSX.Element;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { AnimatedSidebarMenuSubButtonProps } from './type';
|
|
2
|
+
import type * as React from "react";
|
|
3
|
+
export declare function AnimatedSidebarMenuSubButton({ children, icon, href, isActive, disabled, closeOnSelect, target, rel, onSelect, className, }: AnimatedSidebarMenuSubButtonProps): React.JSX.Element;
|
|
@@ -2,4 +2,20 @@ import { ShellLayout } from './shell-layout';
|
|
|
2
2
|
export type * from './type';
|
|
3
3
|
export * from './use-shell-panels';
|
|
4
4
|
export * from './utils';
|
|
5
|
+
export * from './animated-panel';
|
|
6
|
+
export * from './animated-panel-inset';
|
|
7
|
+
export * from './animated-panel-provider';
|
|
8
|
+
export * from './animated-panel-trigger';
|
|
9
|
+
export * from './animated-sidebar-header';
|
|
10
|
+
export * from './animated-sidebar-content';
|
|
11
|
+
export * from './animated-sidebar-footer';
|
|
12
|
+
export * from './animated-sidebar-group';
|
|
13
|
+
export * from './animated-sidebar-group-label';
|
|
14
|
+
export * from './animated-sidebar-group-content';
|
|
15
|
+
export * from './animated-sidebar-menu';
|
|
16
|
+
export * from './animated-sidebar-menu-item';
|
|
17
|
+
export * from './animated-sidebar-menu-sub';
|
|
18
|
+
export * from './animated-sidebar-menu-sub-item';
|
|
19
|
+
export * from './animated-sidebar-menu-sub-button';
|
|
20
|
+
export * from './animated-sidebar-menu-button';
|
|
5
21
|
export { ShellLayout as default };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { ReactNode, ButtonHTMLAttributes, CSSProperties, HTMLAttributes } from 'react';
|
|
2
|
+
import { HTMLMotionProps } from 'motion/react';
|
|
3
3
|
export interface ShellAction {
|
|
4
4
|
id: string;
|
|
5
5
|
label: string;
|
|
@@ -35,7 +35,7 @@ export type TPanelSide = IPanel["side"];
|
|
|
35
35
|
* wins. */
|
|
36
36
|
export type TPanelMap<Side extends TPanelSide = TPanelSide> = Partial<Record<Side, IPanel>>;
|
|
37
37
|
/** The open/close surface of the shell's panels, lifted straight from
|
|
38
|
-
*
|
|
38
|
+
* AnimatedPanelProvider — every prop is keyed by side, there are no
|
|
39
39
|
* explicit per-side props. `useShellPanels` produces the controlled subset
|
|
40
40
|
* of these as `providerProps`. */
|
|
41
41
|
export type ShellPanelControlProps = Pick<AnimatedSidebarProviderProps, "open" | "defaultOpen" | "onOpenChange" | "openMobile" | "defaultOpenMobile" | "onOpenMobileChange">;
|
|
@@ -60,7 +60,7 @@ export interface ShellPanelControls {
|
|
|
60
60
|
/** Desktop-only convenience — the in-shell triggers already pick the
|
|
61
61
|
* mobile state themselves when the viewport is narrow. */
|
|
62
62
|
toggle: (side: SidebarSide) => void;
|
|
63
|
-
/** Spread onto ShellLayout (or
|
|
63
|
+
/** Spread onto ShellLayout (or AnimatedPanelProvider directly). */
|
|
64
64
|
providerProps: ShellPanelControlProps;
|
|
65
65
|
}
|
|
66
66
|
export interface ShellLayoutProps extends ShellPanelControlProps {
|
|
@@ -72,3 +72,89 @@ export interface ShellLayoutProps extends ShellPanelControlProps {
|
|
|
72
72
|
className?: string;
|
|
73
73
|
variant?: "web" | "desktop";
|
|
74
74
|
}
|
|
75
|
+
export type SidebarSide = "left" | "right";
|
|
76
|
+
/** Open flags keyed by the side. Sides left out stay uncontrolled / at their
|
|
77
|
+
* default — there is no per-side prop, the record IS the API. */
|
|
78
|
+
export type SidebarOpenState = Partial<Record<SidebarSide, boolean>>;
|
|
79
|
+
export type SidebarVariant = "sidebar" | "floating" | "inset";
|
|
80
|
+
export type SidebarCollapsible = "offcanvas" | "icon" | "none";
|
|
81
|
+
export interface AnimatedSidebarContextValue {
|
|
82
|
+
isMobile: boolean;
|
|
83
|
+
layoutId: string;
|
|
84
|
+
/** Desktop open state, keyed by side. */
|
|
85
|
+
open: Record<SidebarSide, boolean>;
|
|
86
|
+
/** Mobile overlay open state, keyed by side. */
|
|
87
|
+
openMobile: Record<SidebarSide, boolean>;
|
|
88
|
+
reduce: boolean;
|
|
89
|
+
setOpen: (open: boolean, side: SidebarSide) => void;
|
|
90
|
+
setOpenMobile: (open: boolean, side: SidebarSide) => void;
|
|
91
|
+
/** Mobile-aware: toggles the overlay below md, the docked panel above. */
|
|
92
|
+
toggleSidebar: (side: SidebarSide) => void;
|
|
93
|
+
triggerRefs: Record<SidebarSide, React.RefObject<HTMLButtonElement | null>>;
|
|
94
|
+
}
|
|
95
|
+
export interface AnimatedSidebarProviderProps extends HTMLAttributes<HTMLDivElement> {
|
|
96
|
+
/** Controlled desktop open state, keyed by the side. A side left undefined
|
|
97
|
+
* stays uncontrolled. */
|
|
98
|
+
open?: SidebarOpenState;
|
|
99
|
+
/** Initial desktop open state, merged over `{ left: true, right: false }`. */
|
|
100
|
+
defaultOpen?: SidebarOpenState;
|
|
101
|
+
onOpenChange?: (open: boolean, side: SidebarSide) => void;
|
|
102
|
+
/** Controlled mobile overlay state, keyed by side. */
|
|
103
|
+
openMobile?: SidebarOpenState;
|
|
104
|
+
/** Initial mobile overlay state — every side starts closed. */
|
|
105
|
+
defaultOpenMobile?: SidebarOpenState;
|
|
106
|
+
onOpenMobileChange?: (open: boolean, side: SidebarSide) => void;
|
|
107
|
+
style?: SidebarProviderStyle;
|
|
108
|
+
}
|
|
109
|
+
export type SidebarProviderStyle = CSSProperties & {
|
|
110
|
+
"--sidebar-width"?: string;
|
|
111
|
+
"--sidebar-width-icon"?: string;
|
|
112
|
+
"--sidebar-width-mobile"?: string;
|
|
113
|
+
};
|
|
114
|
+
export type AnimatedSidebarInsetProps = HTMLMotionProps<"main">;
|
|
115
|
+
export interface AnimatedSidebarTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
116
|
+
side?: SidebarSide;
|
|
117
|
+
}
|
|
118
|
+
export interface AnimatedSidebarPanelContextValue {
|
|
119
|
+
collapsed: boolean;
|
|
120
|
+
collapsible: SidebarCollapsible;
|
|
121
|
+
side: SidebarSide;
|
|
122
|
+
}
|
|
123
|
+
export interface AnimatedSidebarProps extends Omit<HTMLMotionProps<"aside">, "children"> {
|
|
124
|
+
children?: ReactNode;
|
|
125
|
+
side?: SidebarSide;
|
|
126
|
+
variant?: SidebarVariant;
|
|
127
|
+
collapsible?: SidebarCollapsible;
|
|
128
|
+
ariaLabel?: string;
|
|
129
|
+
panelClassName?: string;
|
|
130
|
+
}
|
|
131
|
+
export interface AnimatedSidebarMenuSubProps extends Omit<HTMLMotionProps<"ul">, "children"> {
|
|
132
|
+
open: boolean;
|
|
133
|
+
children?: ReactNode;
|
|
134
|
+
}
|
|
135
|
+
export interface AnimatedSidebarMenuSubButtonProps {
|
|
136
|
+
children: ReactNode;
|
|
137
|
+
icon?: ReactNode;
|
|
138
|
+
href?: string;
|
|
139
|
+
isActive?: boolean;
|
|
140
|
+
disabled?: boolean;
|
|
141
|
+
closeOnSelect?: boolean;
|
|
142
|
+
target?: "_blank" | "_self" | "_parent" | "_top";
|
|
143
|
+
rel?: string;
|
|
144
|
+
onSelect?: () => void;
|
|
145
|
+
className?: string;
|
|
146
|
+
}
|
|
147
|
+
export interface AnimatedSidebarMenuButtonProps {
|
|
148
|
+
children: ReactNode;
|
|
149
|
+
icon?: ReactNode;
|
|
150
|
+
badge?: ReactNode;
|
|
151
|
+
href?: string;
|
|
152
|
+
isActive?: boolean;
|
|
153
|
+
ariaExpanded?: boolean;
|
|
154
|
+
disabled?: boolean;
|
|
155
|
+
closeOnSelect?: boolean;
|
|
156
|
+
target?: "_blank" | "_self" | "_parent" | "_top";
|
|
157
|
+
rel?: string;
|
|
158
|
+
onSelect?: () => void;
|
|
159
|
+
className?: string;
|
|
160
|
+
}
|
|
@@ -1 +1,38 @@
|
|
|
1
|
+
import { Variants } from 'motion/react';
|
|
2
|
+
import { AnimatedSidebarContextValue, AnimatedSidebarPanelContextValue } from './type';
|
|
1
3
|
export declare const TITLE_BAR_HEIGHT = 48;
|
|
4
|
+
export declare const SIDEBAR_MORPH_TRANSITION: {
|
|
5
|
+
readonly type: "spring";
|
|
6
|
+
readonly stiffness: 380;
|
|
7
|
+
readonly damping: 35;
|
|
8
|
+
readonly mass: 0.75;
|
|
9
|
+
};
|
|
10
|
+
export declare const LABEL_ENTER_TRANSITION: {
|
|
11
|
+
readonly duration: 0.2;
|
|
12
|
+
readonly delay: 0.08;
|
|
13
|
+
readonly ease: readonly [0.16, 1, 0.3, 1];
|
|
14
|
+
};
|
|
15
|
+
export declare const LABEL_EXIT_TRANSITION: {
|
|
16
|
+
readonly duration: 0.12;
|
|
17
|
+
readonly ease: readonly [0.16, 1, 0.3, 1];
|
|
18
|
+
};
|
|
19
|
+
export declare const PANEL_TRANSITION: {
|
|
20
|
+
readonly duration: 0.36;
|
|
21
|
+
readonly ease: readonly [0.32, 0.72, 0, 1];
|
|
22
|
+
};
|
|
23
|
+
export declare const REDUCED_TRANSITION: {
|
|
24
|
+
readonly duration: 0.16;
|
|
25
|
+
readonly ease: readonly [0.16, 1, 0.3, 1];
|
|
26
|
+
};
|
|
27
|
+
export declare const SUBMENU_VARIANTS: Variants;
|
|
28
|
+
export declare const SUBMENU_ITEM_VARIANTS: Variants;
|
|
29
|
+
export declare const FOCUSABLE_SELECTOR: string;
|
|
30
|
+
export declare const MOBILE_QUERY = "(max-width: 767px)";
|
|
31
|
+
export declare const SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
32
|
+
export declare const AnimatedSidebarContext: import('react').Context<AnimatedSidebarContextValue | null>;
|
|
33
|
+
export declare const AnimatedSidebarPanelContext: import('react').Context<AnimatedSidebarPanelContextValue | null>;
|
|
34
|
+
export declare function useAnimatedSidebar(): AnimatedSidebarContextValue;
|
|
35
|
+
export declare function getMobileSnapshot(): boolean;
|
|
36
|
+
export declare function getServerMobileSnapshot(): boolean;
|
|
37
|
+
export declare function useIsMobile(): boolean;
|
|
38
|
+
export declare function useAnimatedSidebarPanel(): AnimatedSidebarPanelContextValue;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type OverflowActionsSize = "sm" | "md";
|
|
3
|
+
export type OverflowActionItem = {
|
|
4
|
+
id: string;
|
|
5
|
+
label: ReactNode;
|
|
6
|
+
icon?: ReactNode;
|
|
7
|
+
onClick?: () => void;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
ariaLabel?: string;
|
|
10
|
+
};
|
|
11
|
+
export type OverflowActionsClassNames = {
|
|
12
|
+
root?: string;
|
|
13
|
+
track?: string;
|
|
14
|
+
action?: string;
|
|
15
|
+
primaryAction?: string;
|
|
16
|
+
overflowAction?: string;
|
|
17
|
+
toggle?: string;
|
|
18
|
+
icon?: string;
|
|
19
|
+
label?: string;
|
|
20
|
+
};
|
|
21
|
+
export interface OverflowActionsProps {
|
|
22
|
+
primaryActions: OverflowActionItem[];
|
|
23
|
+
overflowActions: OverflowActionItem[];
|
|
24
|
+
expanded?: boolean;
|
|
25
|
+
defaultExpanded?: boolean;
|
|
26
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
27
|
+
onAction?: (item: OverflowActionItem) => void;
|
|
28
|
+
collapseOnAction?: boolean;
|
|
29
|
+
size?: OverflowActionsSize;
|
|
30
|
+
openLabel?: string;
|
|
31
|
+
closeLabel?: string;
|
|
32
|
+
className?: string;
|
|
33
|
+
classNames?: OverflowActionsClassNames;
|
|
34
|
+
}
|
|
35
|
+
export declare function OverflowActions({ primaryActions, overflowActions, expanded, defaultExpanded, onExpandedChange, onAction, collapseOnAction, size, openLabel, closeLabel, className, classNames, }: OverflowActionsProps): import("react").JSX.Element;
|