entasis 0.7.1 → 0.8.0

package/dist/components/Sidebar/sidebar.props.d.ts

@@ -80,6 +80,10 @@ export type SidebarApi = {
     setDisplayState: (state: SidebarDisplayState) => void;
     /** Set the mobile drawer open state. */
     setOpenMobile: (open: boolean) => void;
+    /** The view on screen when `views` is set, undefined otherwise. */
+    readonly view: string | undefined;
+    /** Show another view. Its depth against the current one picks the slide direction. */
+    setView: (view: string) => void;
 };
 export type SidebarActivityBarItem = {
     /** Stable identity used as the render key. Defaults to the label and index. */
@@ -206,10 +210,15 @@ type SidebarMenuEntryBase = {
     action?: Snippet<[SidebarApi]> | SidebarMenuActionDescriptor;
 };
 type SidebarMenuEntryNavigation = SidebarMenuEntryBase & {
-    /** Link href. Mutually exclusive with menu. */
+    /** Link href. Mutually exclusive with menu and view. */
     href?: string;
     /** Native click handler. Mutually exclusive with menu. */
     onclick?: (event: MouseEvent) => void;
+    /**
+     * Key of the `views` entry this row opens, sliding it in. Mutually exclusive with href, menu,
+     * and items.
+     */
+    view?: string;
     /** Popup menu rows own the whole trigger, so they cannot also navigate. */
     menu?: never;
 };
@@ -218,6 +227,7 @@ type SidebarMenuEntryMenu = SidebarMenuEntryBase & {
     menu: MenuItem[];
     href?: never;
     onclick?: never;
+    view?: never;
 };
 export type SidebarMenuEntry = SidebarMenuEntryNavigation | SidebarMenuEntryMenu;
 export type SidebarSearch = {
@@ -250,6 +260,38 @@ export type SidebarTreeNode = {
     /** Child nodes. */
     children?: SidebarTreeNode[];
 };
+/**
+ * One panel content in `views`. Header and footer props left undefined come from the parent view,
+ * then from the Sidebar's props; `null` removes an inherited one.
+ */
+export type SidebarView = {
+    /** The view's name, shown on the back row of the views nested under it. */
+    label?: string;
+    /**
+     * Key of the view this one is nested under. A nested view opens with a back row to it, and
+     * on mobile a swipe toward the inline end goes back. A view without a parent is a top-level
+     * section.
+     */
+    parent?: string;
+    /** Groups rendered in the scrollable body. */
+    items?: SidebarGroup[];
+    /** Custom scrollable body. Overrides items. */
+    content?: Snippet<[SidebarApi]>;
+    /** Sticky top large menu row. */
+    headerButton?: SidebarMenuButtonItem | null;
+    /** Search box rendered in the header. */
+    search?: SidebarSearch | null;
+    /** Pinned menu rendered in the header. */
+    headerMenu?: SidebarMenuEntry[] | null;
+    /** Sticky top custom content. */
+    header?: Snippet<[SidebarApi]> | null;
+    /** Sticky bottom large menu row. */
+    footerButton?: SidebarMenuButtonItem | null;
+    /** Pinned menu rendered in the footer. */
+    footerMenu?: SidebarMenuEntry[] | null;
+    /** Sticky bottom custom content. */
+    footer?: Snippet<[SidebarApi]> | null;
+};
 export type SidebarGroup = {
     /** Group label. Hidden in icon-collapsed mode. */
     label?: string;
@@ -378,6 +420,19 @@ type SidebarOwnProps = {
     activityBar?: SidebarActivityBar;
     /** Items rendered in the scrollable body. Each item is a labelled sidebar group. */
     items?: SidebarGroup[];
+    /**
+     * Named panel contents, one on screen at a time, replacing `items` and `content`. Changing
+     * the view slides between them: deeper views push in, shallower ones slide back, sections at
+     * the same depth crossfade. Header and footer props a view leaves out come from its parent,
+     * then from the Sidebar's own props.
+     */
+    views?: Record<string, SidebarView>;
+    /** Bindable key of the view on screen. Defaults to `defaultView`, then the first view. */
+    view?: string;
+    /** Initial view when `view` is omitted. */
+    defaultView?: string;
+    /** Fires once for each library-originated view change: a view row, a back row, a swipe. */
+    onViewChange?: (view: string) => void;
     /** Classes applied to the outer wrapper. */
     class?: string;
     /** Indicator style for collapsible menu items. */

package/dist/components/Sidebar/sidebar.state.svelte.d.ts

@@ -6,7 +6,9 @@ type SidebarStateOptions = {
     readonly side: SidebarSide;
     readonly collapsible: SidebarCollapsible;
     readonly peeking: boolean;
+    readonly view: string | undefined;
     setDisplayState: (state: SidebarDisplayState) => void;
+    setView: (view: string) => void;
 };
 export declare class SidebarStateController {
     private options;
@@ -19,6 +21,8 @@ export declare class SidebarStateController {
     get displayState(): SidebarDisplayState;
     get collapsibleState(): SidebarCollapsible | '';
     get isMobile(): boolean;
+    get view(): string | undefined;
+    setView: (view: string) => void;
     get side(): SidebarSide;
     get collapsible(): SidebarCollapsible;
     /**

package/dist/components/Sidebar/sidebar.state.svelte.js

@@ -39,7 +39,11 @@ function createSidebarApi(controller) {
         toggle: () => controller.toggle(),
         setOpen: (open) => controller.setOpen(open),
         setDisplayState: (state) => controller.setDisplayState(state),
-        setOpenMobile: (open) => controller.setOpenMobile(open)
+        setOpenMobile: (open) => controller.setOpenMobile(open),
+        get view() {
+            return controller.view;
+        },
+        setView: (view) => controller.setView(view)
     };
 }
 export class SidebarStateController {
@@ -89,6 +93,10 @@ export class SidebarStateController {
     get isMobile() {
         return this.mobileQuery.current;
     }
+    get view() {
+        return this.options.view;
+    }
+    setView = (view) => this.options.setView(view);
     get side() {
         return this.options.side;
     }

package/dist/components/Sidebar/sidebar.theme.d.ts

@@ -1,7 +1,43 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
-export declare const defaultSidebarMotion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
+export declare const defaultSidebarMotion: import("../../utils/motion/index.js").MotionResolver<{
+    readonly part: {
+        readonly collapse: {};
+        readonly view: {
+            readonly in: {
+                readonly axis: "x";
+                readonly x: "100%";
+                readonly opacity: 0;
+            };
+            readonly out: {
+                readonly axis: "x";
+                readonly x: "100%";
+                readonly opacity: 0;
+            };
+            readonly duration: "slow";
+            readonly easing: "enter";
+        };
+    };
+}>;
 export declare const sidebarTheme: {
-    motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
+    motion: import("../../utils/motion/index.js").MotionResolver<{
+        readonly part: {
+            readonly collapse: {};
+            readonly view: {
+                readonly in: {
+                    readonly axis: "x";
+                    readonly x: "100%";
+                    readonly opacity: 0;
+                };
+                readonly out: {
+                    readonly axis: "x";
+                    readonly x: "100%";
+                    readonly opacity: 0;
+                };
+                readonly duration: "slow";
+                readonly easing: "enter";
+            };
+        };
+    }>;
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         variant: {
             admin: string;
@@ -54,6 +90,13 @@ export declare const sidebarTheme: {
             comfortable: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    viewStage: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    viewLayer: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        swipe: {
+            true: string;
+            false: null;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     footer: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         density: {
             compact: string;
@@ -483,7 +526,25 @@ export declare const sidebarTheme: {
 export type SidebarTheme = typeof sidebarTheme;
 export type SidebarThemeProps = InferComponentTheme<SidebarTheme>;
 export declare const setSidebarTheme: (theme: InferComponentTheme<{
-    motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
+    motion: import("../../utils/motion/index.js").MotionResolver<{
+        readonly part: {
+            readonly collapse: {};
+            readonly view: {
+                readonly in: {
+                    readonly axis: "x";
+                    readonly x: "100%";
+                    readonly opacity: 0;
+                };
+                readonly out: {
+                    readonly axis: "x";
+                    readonly x: "100%";
+                    readonly opacity: 0;
+                };
+                readonly duration: "slow";
+                readonly easing: "enter";
+            };
+        };
+    }>;
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         variant: {
             admin: string;
@@ -536,6 +597,13 @@ export declare const setSidebarTheme: (theme: InferComponentTheme<{
             comfortable: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    viewStage: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    viewLayer: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        swipe: {
+            true: string;
+            false: null;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     footer: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         density: {
             compact: string;
@@ -963,7 +1031,25 @@ export declare const setSidebarTheme: (theme: InferComponentTheme<{
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
 export declare const useSidebarTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
-    motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
+    motion: import("../../utils/motion/index.js").MotionResolver<{
+        readonly part: {
+            readonly collapse: {};
+            readonly view: {
+                readonly in: {
+                    readonly axis: "x";
+                    readonly x: "100%";
+                    readonly opacity: 0;
+                };
+                readonly out: {
+                    readonly axis: "x";
+                    readonly x: "100%";
+                    readonly opacity: 0;
+                };
+                readonly duration: "slow";
+                readonly easing: "enter";
+            };
+        };
+    }>;
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         variant: {
             admin: string;
@@ -1016,6 +1102,13 @@ export declare const useSidebarTheme: import("../../utils/cva/theme.js").UseComp
             comfortable: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    viewStage: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    viewLayer: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        swipe: {
+            true: string;
+            false: null;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     footer: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         density: {
             compact: string;
@@ -1442,4 +1535,22 @@ export declare const useSidebarTheme: import("../../utils/cva/theme.js").UseComp
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>;
-export declare const useSidebarMotion: () => import("../../utils/motion/index.js").ComponentMotion<import("../../utils/motion/index.js").MotionVariantShape>;
+export declare const useSidebarMotion: () => import("../../utils/motion/index.js").ComponentMotion<{
+    readonly part: {
+        readonly collapse: {};
+        readonly view: {
+            readonly in: {
+                readonly axis: "x";
+                readonly x: "100%";
+                readonly opacity: 0;
+            };
+            readonly out: {
+                readonly axis: "x";
+                readonly x: "100%";
+                readonly opacity: 0;
+            };
+            readonly duration: "slow";
+            readonly easing: "enter";
+        };
+    };
+}>;

package/dist/components/Sidebar/sidebar.theme.js

@@ -111,6 +111,28 @@ const defaultNav = cva({
         density: 'normal'
     }
 });
+// With `views`, the panel and the menu inside it are one-cell grids whose layers are the views
+// they show: one at rest, two while they slide past each other. The cell clips the slide.
+const defaultViewStage = cva({
+    base: 'grid min-h-0 flex-1 grid-cols-1 grid-rows-1 overflow-x-clip'
+});
+// `translate` / `opacity` carry the swipe: they follow the finger with no transition while
+// dragging, then ease to rest. The view-change motion animates `transform`, so the two never fight.
+const defaultViewLayer = cva({
+    base: 'col-start-1 row-start-1 min-w-0 transition-[translate,opacity] ease-enter data-[dragging=true]:transition-none',
+    variants: {
+        // A body layer is its own scroll container, and `touch-action` only counts up to the nearest
+        // one: set on the layer, it leaves vertical scrolling to the browser and horizontal moves to
+        // the back swipe.
+        swipe: {
+            true: 'touch-pan-y',
+            false: null
+        }
+    },
+    defaultVariants: {
+        swipe: false
+    }
+});
 const defaultGroup = cva({
     base: 'relative flex w-full min-w-0 flex-col',
     variants: {
@@ -891,6 +913,24 @@ export const defaultSidebarMotion = motion({
         out: { axis: 'y', x: 0, y: 0, scale: 1, opacity: 0.2 },
         duration: 'normal',
         easing: 'standard'
+    },
+    variants: {
+        part: {
+            collapse: {},
+            // The pager between views: the arriving view comes from the inline end and the leaving
+            // one goes to the start, side by side, each travelling `x` while it fades between
+            // `opacity` and 1. `enter` easing moves on the first frame; an in-out curve would sit
+            // still for the first and last fifth and squeeze the whole swap into a blink.
+            view: {
+                in: { axis: 'x', x: '100%', opacity: 0 },
+                out: { axis: 'x', x: '100%', opacity: 0 },
+                duration: 'slow',
+                easing: 'enter'
+            }
+        }
+    },
+    defaultVariants: {
+        part: 'collapse'
     }
 });
 export const sidebarTheme = {
@@ -899,6 +939,8 @@ export const sidebarTheme = {
     panel: defaultPanel,
     header: defaultStackSection,
     nav: defaultNav,
+    viewStage: defaultViewStage,
+    viewLayer: defaultViewLayer,
     footer: defaultStackSection,
     group: defaultGroup,
     groupLabel: defaultGroupLabel,

package/dist/components/Sidebar/sidebar.views.svelte.d.ts

@@ -0,0 +1,138 @@
+import { type Snippet } from 'svelte';
+import type { TransitionConfig } from 'svelte/transition';
+import type { ResolvedMotion } from '../../utils/motion/index.js';
+import type { SidebarApi, SidebarGroup, SidebarMenuButtonItem, SidebarMenuEntry, SidebarSearch, SidebarSide, SidebarView } from './sidebar.props.js';
+/** What the panel renders for a view: the Sidebar's own props, or a view's resolved over its parents. */
+export type SidebarSlotValues = {
+    items?: SidebarGroup[];
+    content?: Snippet<[SidebarApi]>;
+    headerButton?: SidebarMenuButtonItem;
+    search?: SidebarSearch;
+    headerMenu?: SidebarMenuEntry[];
+    header?: Snippet<[SidebarApi]>;
+    footerButton?: SidebarMenuButtonItem;
+    footerMenu?: SidebarMenuEntry[];
+    footer?: Snippet<[SidebarApi]>;
+};
+/** The header and footer props a view can set; together they are the panel's chrome. */
+declare const chromeProps: readonly ["header", "headerButton", "search", "headerMenu", "footerButton", "footerMenu", "footer"];
+/**
+ * What slides on a view change. `body` is the menu alone; `panel` is the whole panel (header,
+ * menu, footer), which only swaps when the two views do not share the same chrome.
+ */
+export type SidebarViewKind = 'panel' | 'body';
+type Views = Record<string, SidebarView>;
+type PropSlot = (typeof chromeProps)[number];
+/** The view and its ancestors, nearest first. A missing parent or a parent cycle ends the chain. */
+export declare const viewChain: (views: Views, id: string) => string[];
+/**
+ * Resolves one header or footer prop for a view: the nearest view in the chain that sets it
+ * (`null` counts, and clears it), else the Sidebar. `owner` names where it came from, so two
+ * views share the slot exactly when it resolves to the same owner.
+ */
+export declare const resolveSlot: <S extends PropSlot>(views: Views, id: string, slot: S, root: SidebarSlotValues) => {
+    owner: string | null;
+    value: SidebarSlotValues[S];
+};
+export type SidebarViewDirection = 'forward' | 'back' | 'none';
+/** Which half of a back swipe a layer plays: the view leaving (`over`) or its parent (`under`). */
+export type SidebarSwipeRole = 'over' | 'under';
+export type SidebarViewLayer = {
+    key: string;
+    view: string;
+    role?: SidebarSwipeRole;
+};
+type Swipe = {
+    from: string;
+    to: string;
+    /** `drag` follows the finger; `commit` / `cancel` animate to rest, then the swipe ends. */
+    phase: 'drag' | 'commit' | 'cancel';
+    /** Distance travelled toward the inline end, in px. */
+    offset: number;
+    width: number;
+    /** The commit has finished moving and waits for the view change to land (a route, say). */
+    settled?: boolean;
+};
+type SidebarViewsOptions = {
+    readonly views: Views | undefined;
+    readonly view: string | undefined;
+    readonly defaultView: string | undefined;
+    readonly onViewChange: ((view: string) => void) | undefined;
+    readonly isMobile: boolean;
+    readonly side: SidebarSide;
+    readonly root: SidebarSlotValues;
+    setViewProp: (view: string | undefined) => void;
+};
+export declare class SidebarViewsState {
+    #private;
+    private options;
+    swipe: Swipe | null;
+    rtl: boolean;
+    constructor(options: SidebarViewsOptions);
+    get enabled(): boolean;
+    /** The view on screen: the selected one when it exists, else `defaultView`, else the first. */
+    get current(): string | undefined;
+    depth(id: string): number;
+    parentOf(id: string): string | undefined;
+    labelOf(id: string): string | undefined;
+    /**
+     * The last change of the current view and its direction, read by the layer transitions when
+     * they start. Deeper slides forward and shallower slides back; at one depth (sections), the
+     * later view in `views` is forward, like pages in order.
+     */
+    get lastChange(): {
+        from?: string;
+        to?: string;
+        direction: SidebarViewDirection;
+    };
+    setView: (view: string) => void;
+    /** A view's body. */
+    body(view: string): {
+        items: SidebarGroup[] | undefined;
+        content: Snippet<[SidebarApi]> | undefined;
+    };
+    /** A view's header and footer props, each from the nearest view that sets it, else the Sidebar. */
+    chrome(view: string): SidebarSlotValues;
+    /**
+     * The layers a stage renders, bottom first. Outside a swipe that is the current view alone;
+     * during one it is the parent under the view being swiped away. Two views that share a layer
+     * key collapse to one layer that never moves: the panel's key is where its chrome comes from,
+     * so views with the same header and footer keep one panel and only their bodies slide.
+     */
+    layers(kind: SidebarViewKind): SidebarViewLayer[];
+    /**
+     * A swipe layer's drag position, as `translate` / `opacity` styles; empty at rest. The view
+     * under the finger stays opaque and follows it; its parent comes from `travel` toward the
+     * start and from `opacity`, the same way the view motion brings a view in.
+     */
+    swipeStyle(role: SidebarSwipeRole | undefined, travel: number | string, opacity: number): {
+        translate?: undefined;
+        opacity?: undefined;
+    } | {
+        translate: string;
+        opacity: number;
+    };
+    get canSwipeBack(): boolean;
+    /**
+     * The mobile drawer dismisses on a swipe toward its own edge. When going back points the same
+     * way (a right drawer in LTR, a left one in RTL), the view body keeps the gesture.
+     */
+    get ownsDrawerSwipe(): boolean;
+    /** Called by the body stage once a settling swipe has had its motion duration. */
+    settleSwipe(): void;
+    /** Back swipe on the view body: toward the inline end, anywhere on the body, mobile only. */
+    swipeAttachment: (node: HTMLElement) => void | (() => void);
+}
+type ViewTransitionParams = {
+    phase: 'in' | 'out';
+    direction: SidebarViewDirection;
+    motion: ResolvedMotion;
+};
+/**
+ * Pager motion between views. Forward, the new view comes from the inline end and the old one
+ * leaves to the start, side by side, each travelling the motion's `x` and fading along the whole
+ * way; back mirrors it. A layer a swipe put in place is already where it belongs, so it enters
+ * and leaves without motion.
+ */
+export declare const sidebarViewTransition: (node: HTMLElement, { phase, direction, motion }: ViewTransitionParams) => TransitionConfig;
+export {};