@streamscloud/kit 0.38.2 → 0.39.0

package/dist/ui/page-layout/cmp.page-panel-sidebars.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { slideHorizontally, transitionDuration } from '../../core/transitions';
 import PagePanel from './cmp.page-panel.svelte';
 import { untrack } from 'svelte';
-const { panelState, children, sidebarLeft, sidebarRight, sidebarLeftIsValid = true, sidebarRightIsValid = true, title, actionsLeft, actionsCenter, actionsRight, balanceHeaderCenter = false } = $props();
+const { panelState, children, sidebarLeft, sidebarRight, sidebarLeftIsValid = true, sidebarRightIsValid = true, title, actionsLeft, actionsCenter, actionsRight, balanceHeaderCenter = false, toggle } = $props();
 let leftPanel = $state(null);
 let rightPanel = $state(null);
 $effect(() => {
@@ -31,21 +31,13 @@ $effect(() => {
 const collapseButtons = $derived([leftPanel?.id, rightPanel?.id].filter((id) => id !== null && id !== undefined));
 const leftCollapsed = $derived(leftPanel?.entry.collapsed ?? false);
 const rightCollapsed = $derived(rightPanel?.entry.collapsed ?? false);
-export function toggleLeft() {
-    leftPanel?.entry.toggleCollapsed();
-}
-export function toggleRight() {
-    rightPanel?.entry.toggleCollapsed();
-}
-/** Collapses both sidebars, or expands both when they are already all collapsed. */
-export function toggleBoth() {
-    const entries = [leftPanel?.entry, rightPanel?.entry].filter((entry) => !!entry);
-    if (entries.length === 0) {
-        return;
-    }
-    const allCollapsed = entries.every((entry) => entry.collapsed);
-    entries.forEach((entry) => entry.setCollapsed(!allCollapsed));
-}
+$effect(() => {
+    const attached = toggle;
+    attached?.attach(leftPanel?.entry ?? null, rightPanel?.entry ?? null);
+    return () => {
+        attached?.attach(null, null);
+    };
+});
 $effect(() => {
     if (leftPanel) {
         leftPanel.entry.isValid = sidebarLeftIsValid;
@@ -101,8 +93,9 @@ PagePanelSidebars — a `PagePanel` whose body has collapsible left / right side
 fictional left/right panels in the shared `PanelState` so the standard collapse buttons in the
 header can target them. Sidebars slide horizontally on collapse / expand.
 
-Exposes imperative `toggleLeft()` / `toggleRight()` / `toggleBoth()` via `bind:this` for external
-collapse controls (e.g. a top-bar button), so callers don't reach into `PanelState` by id.
+Pass a `SidebarsToggle` instance as `toggle` to drive an external "collapse both" control (e.g. a
+top-bar button) without `bind:this` or a local collapsed flag — read `toggleBoth` / `allCollapsed`
+off that same instance.
 
 ### CSS Custom Properties
 | Property | Description | Default |

package/dist/ui/page-layout/cmp.page-panel-sidebars.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { PanelState } from './panel-state.svelte';
+import type { PanelState, SidebarsToggle } from './panel-state.svelte';
 import type { Snippet } from 'svelte';
 type Props = {
     /** The shared `PanelState` instance the inner panel + sidebars register with. */
@@ -14,24 +14,23 @@ type Props = {
     actionsRight?: Snippet;
     /** Lay the inner panel header out as a 3-column grid so `actionsCenter` is centered against the panel width. @default false */
     balanceHeaderCenter?: boolean;
+    /** Shared collapse target for an external "collapse both sidebars" control (e.g. `PageLayout`'s `editorControls.panelsToggle`). */
+    toggle?: SidebarsToggle;
 };
 /**
  * PagePanelSidebars — a `PagePanel` whose body has collapsible left / right sidebars. Registers
  * fictional left/right panels in the shared `PanelState` so the standard collapse buttons in the
  * header can target them. Sidebars slide horizontally on collapse / expand.
  *
- * Exposes imperative `toggleLeft()` / `toggleRight()` / `toggleBoth()` via `bind:this` for external
- * collapse controls (e.g. a top-bar button), so callers don't reach into `PanelState` by id.
+ * Pass a `SidebarsToggle` instance as `toggle` to drive an external "collapse both" control (e.g. a
+ * top-bar button) without `bind:this` or a local collapsed flag — read `toggleBoth` / `allCollapsed`
+ * off that same instance.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--page-panel-sidebars--border-color` | Sidebar divider color | `--sc-kit--color--border` |
  */
-declare const Cmp: import("svelte").Component<Props, {
-    toggleLeft: () => void;
-    toggleRight: () => void;
-    toggleBoth: () => void;
-}, "">;
+declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/page-layout/index.d.ts

@@ -4,5 +4,5 @@ export { default as PagePanelSidebars } from './cmp.page-panel-sidebars.svelte';
 export { default as PagePanels } from './cmp.page-panels.svelte';
 export { default as PanelCollapseButton } from './cmp.panel-collapse-button.svelte';
 export { default as PanelContent } from './cmp.panel-content.svelte';
-export { PanelEntry, PanelState } from './panel-state.svelte';
+export { PanelEntry, PanelState, SidebarsToggle } from './panel-state.svelte';
 export type { EditorControls, PageLayoutAction, PanelBorder, PanelResizingSettings } from './types';

package/dist/ui/page-layout/index.js

@@ -4,4 +4,4 @@ export { default as PagePanelSidebars } from './cmp.page-panel-sidebars.svelte';
 export { default as PagePanels } from './cmp.page-panels.svelte';
 export { default as PanelCollapseButton } from './cmp.panel-collapse-button.svelte';
 export { default as PanelContent } from './cmp.panel-content.svelte';
-export { PanelEntry, PanelState } from './panel-state.svelte';
+export { PanelEntry, PanelState, SidebarsToggle } from './panel-state.svelte';

package/dist/ui/page-layout/panel-state.svelte.d.ts

@@ -47,4 +47,37 @@ export declare class PanelState {
     get: (id: string) => PanelEntry | null;
     unregister: (id: string, entry: PanelEntry) => void;
 }
+/**
+ * Shared collapse target for a `PagePanelSidebars`'s left/right sidebar pair. Create one instance
+ * and pass it to `PagePanelSidebars`'s `toggle` prop, then read `toggleBoth` / `allCollapsed` from
+ * this instance wherever the external control lives (e.g. `PageLayout`'s `editorControls`) — no
+ * `bind:this` or extra local state needed on the consumer side.
+ *
+ * @example
+ * ```ts
+ * const panels = new PanelState();
+ * const sidebarsToggle = new SidebarsToggle();
+ * ```
+ * ```svelte
+ * <PageLayout editorControls={{ panelsToggle: { active: sidebarsToggle.allCollapsed, onClick: sidebarsToggle.toggleBoth }, close: {...} }}>
+ *   <PagePanels>
+ *     <PagePanelSidebars panelState={panels} toggle={sidebarsToggle}>...</PagePanelSidebars>
+ *   </PagePanels>
+ * </PageLayout>
+ * ```
+ */
+export declare class SidebarsToggle {
+    private _left;
+    private _right;
+    /**
+     * True when every attached sidebar is currently collapsed.
+     * @remarks False both when there are no sidebars attached and before `PagePanelSidebars` mounts —
+     * an external toggle button reads this as "not active" in either case.
+     */
+    get allCollapsed(): boolean;
+    /** Wired automatically by the paired `PagePanelSidebars`'s `toggle` prop. Not for direct use. */
+    attach(left: PanelEntry | null, right: PanelEntry | null): void;
+    /** Collapses both sidebars, or expands both when they are already all collapsed. */
+    toggleBoth: () => void;
+}
 export {};

package/dist/ui/page-layout/panel-state.svelte.js

@@ -59,3 +59,49 @@ export class PanelState {
         }
     };
 }
+/**
+ * Shared collapse target for a `PagePanelSidebars`'s left/right sidebar pair. Create one instance
+ * and pass it to `PagePanelSidebars`'s `toggle` prop, then read `toggleBoth` / `allCollapsed` from
+ * this instance wherever the external control lives (e.g. `PageLayout`'s `editorControls`) — no
+ * `bind:this` or extra local state needed on the consumer side.
+ *
+ * @example
+ * ```ts
+ * const panels = new PanelState();
+ * const sidebarsToggle = new SidebarsToggle();
+ * ```
+ * ```svelte
+ * <PageLayout editorControls={{ panelsToggle: { active: sidebarsToggle.allCollapsed, onClick: sidebarsToggle.toggleBoth }, close: {...} }}>
+ *   <PagePanels>
+ *     <PagePanelSidebars panelState={panels} toggle={sidebarsToggle}>...</PagePanelSidebars>
+ *   </PagePanels>
+ * </PageLayout>
+ * ```
+ */
+export class SidebarsToggle {
+    _left = $state(null);
+    _right = $state(null);
+    /**
+     * True when every attached sidebar is currently collapsed.
+     * @remarks False both when there are no sidebars attached and before `PagePanelSidebars` mounts —
+     * an external toggle button reads this as "not active" in either case.
+     */
+    get allCollapsed() {
+        const entries = [this._left, this._right].filter((entry) => !!entry);
+        return entries.length > 0 && entries.every((entry) => entry.collapsed);
+    }
+    /** Wired automatically by the paired `PagePanelSidebars`'s `toggle` prop. Not for direct use. */
+    attach(left, right) {
+        this._left = left;
+        this._right = right;
+    }
+    /** Collapses both sidebars, or expands both when they are already all collapsed. */
+    toggleBoth = () => {
+        const entries = [this._left, this._right].filter((entry) => !!entry);
+        if (entries.length === 0) {
+            return;
+        }
+        const collapsed = entries.every((entry) => entry.collapsed);
+        entries.forEach((entry) => entry.setCollapsed(!collapsed));
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.38.2",
+  "version": "0.39.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",