@streamscloud/kit 0.26.0 → 0.27.0

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

@@ -1,7 +1,9 @@
-<script lang="ts">import { Icon } from '../icon';
+<script lang="ts">import LayoutControlButton from './layout-control-button.svelte';
 import { PageLayoutLocalization } from './page-layout-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
 import IconWindow from '@fluentui/svg-icons/icons/window_20_regular.svg?raw';
-const { children, title, actions, windowToggleActive = false, scrollable = false, on } = $props();
+import IconWindowMultiple from '@fluentui/svg-icons/icons/window_multiple_20_regular.svg?raw';
+const { children, title, actions, navigationToggle, editorControls, scrollable = false } = $props();
 const localization = new PageLayoutLocalization();
 </script>
 
@@ -18,16 +20,29 @@ const localization = new PageLayoutLocalization();
       {#if actions}
         {@render actions()}
       {/if}
-      {#if on?.windowToggle}
-        <button
-          type="button"
-          class="page-layout__window-toggle"
-          class:page-layout__window-toggle--active={windowToggleActive}
-          onclick={on.windowToggle}
-          aria-label={localization.toggleNavigation}
-          aria-pressed={windowToggleActive}>
-          <Icon src={IconWindow} />
-        </button>
+      {#if navigationToggle || editorControls}
+        <div class="page-layout__controls">
+          {#if navigationToggle}
+            <LayoutControlButton
+              icon={IconWindow}
+              label={localization.toggleNavigation}
+              variant="flat"
+              active={navigationToggle.active}
+              on={{ click: navigationToggle.onClick }} />
+          {/if}
+          {#if editorControls}
+            <LayoutControlButton
+              icon={IconWindowMultiple}
+              label={localization.togglePanels}
+              active={editorControls.panelsToggle.active}
+              on={{ click: editorControls.panelsToggle.onClick }} />
+            <LayoutControlButton
+              icon={IconDismiss}
+              label={localization.close}
+              active={editorControls.close.active}
+              on={{ click: editorControls.close.onClick }} />
+          {/if}
+        </div>
       {/if}
     </div>
   </div>
@@ -38,12 +53,14 @@ const localization = new PageLayoutLocalization();
 
 <!--
 @component
-PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + optional
-window-toggle button) above a flex-column body that typically contains a `PagePanels` row.
+PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + an optional
+group of chrome buttons) above a flex-column body that typically contains a `PagePanels` row.
 
-Pass `on.windowToggle` to surface a navigation-toggle button at the header's right edge — wire it to
-whatever sidebar / drawer state your app owns. Omit it to hide the button. Set `scrollable` to let
-the whole page scroll as one document with sticky panel headers.
+`navigationToggle` surfaces the app-navigation button as a bare glyph; `editorControls` is the fixed
+editor pair — panels toggle + close, both required so an editor never ships half the preset, drawn as
+outlined squares. Every entry takes `{ active?, onClick }`, and the group renders in the order
+navigation → panels → close. Set `scrollable` to let the whole page scroll as one document with
+sticky panel headers.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -86,27 +103,10 @@ the whole page scroll as one document with sticky panel headers.
   align-items: center;
   gap: 1rem;
 }
-.page-layout__window-toggle {
-  --sc-kit--icon--size: 1.125rem;
-  display: inline-flex;
+.page-layout__controls {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  padding: 0;
-  background: none;
-  border: none;
-  border-radius: var(--sc-kit--radius--sm);
-  color: var(--sc-kit--color--text--muted);
-  cursor: pointer;
-}
-.page-layout__window-toggle:hover {
-  background: var(--sc-kit--color--bg--hover);
-  color: var(--sc-kit--color--text--primary);
-}
-.page-layout__window-toggle--active {
-  background: var(--sc-kit--color--bg--active);
-  color: var(--sc-kit--color--text--primary);
+  gap: var(--sc-kit--space--2);
 }
 .page-layout__body {
   flex: 1;

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

@@ -1,23 +1,24 @@
+import type { EditorControls, PageLayoutAction } from './types';
 import type { Snippet } from 'svelte';
 type Props = {
     children: Snippet;
     title?: string | Snippet;
     actions?: Snippet;
-    /** Visual + ARIA state for the window-toggle button. Set `true` when the navigation it controls is hidden / collapsed — the button gets `aria-pressed` and an active background. @default false */
-    windowToggleActive?: boolean;
+    /** Hides / shows the host app's own navigation. When set, a bare glyph button is rendered in the header's control group. */
+    navigationToggle?: PageLayoutAction;
+    /** Editor chrome — the fixed panels-toggle + close pair. Set it to render both buttons; omit it entirely for a non-editor page. */
+    editorControls?: EditorControls;
     scrollable?: boolean;
-    on?: {
-        /** When set, a window-toggle button is rendered at the right edge of the header. */
-        windowToggle?: () => void;
-    };
 };
 /**
- * PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + optional
- * window-toggle button) above a flex-column body that typically contains a `PagePanels` row.
+ * PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + an optional
+ * group of chrome buttons) above a flex-column body that typically contains a `PagePanels` row.
  *
- * Pass `on.windowToggle` to surface a navigation-toggle button at the header's right edge — wire it to
- * whatever sidebar / drawer state your app owns. Omit it to hide the button. Set `scrollable` to let
- * the whole page scroll as one document with sticky panel headers.
+ * `navigationToggle` surfaces the app-navigation button as a bare glyph; `editorControls` is the fixed
+ * editor pair — panels toggle + close, both required so an editor never ships half the preset, drawn as
+ * outlined squares. Every entry takes `{ active?, onClick }`, and the group renders in the order
+ * navigation → panels → close. Set `scrollable` to let the whole page scroll as one document with
+ * sticky panel headers.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

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

@@ -5,4 +5,4 @@ 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 type { PanelBorder, PanelResizingSettings } from './types';
+export type { EditorControls, PageLayoutAction, PanelBorder, PanelResizingSettings } from './types';

package/dist/ui/page-layout/layout-control-button.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">import { Icon } from '../icon';
+const { icon, label, variant = 'outlined', active, on } = $props();
+</script>
+
+<button
+  type="button"
+  class="layout-control-button layout-control-button--{variant}"
+  class:layout-control-button--active={active}
+  aria-label={label}
+  aria-pressed={active}
+  onclick={on.click}>
+  <Icon src={icon} size={variant === 'flat' ? 'control-xl' : 'control-md'} />
+</button>
+
+<!--
+@component
+Folder-internal chrome button for the `PageLayout` header. Two variants: `flat` for the
+app-navigation toggle and `outlined` for the editor pair. Rendered by `PageLayout`; not exported.
+-->
+<style>.layout-control-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: var(--_lcb--size);
+  block-size: var(--_lcb--size);
+  padding: 0;
+  color: var(--_lcb--color);
+  background: var(--_lcb--background);
+  border: 1px solid var(--_lcb--border-color);
+  border-radius: var(--_lcb--border-radius);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.layout-control-button--outlined {
+  --_lcb--size: var(--sc-kit--field--height--md);
+  --_lcb--border-radius: var(--sc-kit--field--border-radius--md);
+  --_lcb--color: var(--sc-kit--color--text--primary);
+  --_lcb--color-hover: var(--sc-kit--color--text--primary);
+  --_lcb--color-active: var(--sc-kit--color--text--primary);
+  --_lcb--background: var(--sc-kit--color--bg--panel);
+  --_lcb--background-hover: var(--sc-kit--color--bg--hover);
+  --_lcb--background-active: var(--sc-kit--color--bg--active);
+  --_lcb--border-color: var(--sc-kit--color--border);
+  --_lcb--border-color-active: var(--sc-kit--color--border--strong);
+}
+.layout-control-button--flat {
+  --_lcb--size: 1.75rem;
+  --_lcb--border-radius: var(--sc-kit--radius--sm);
+  --_lcb--color: var(--sc-kit--color--text--muted);
+  --_lcb--color-hover: var(--sc-kit--color--text--primary);
+  --_lcb--color-active: var(--sc-kit--color--text--primary);
+  --_lcb--background: transparent;
+  --_lcb--background-hover: var(--sc-kit--color--bg--hover);
+  --_lcb--background-active: var(--sc-kit--color--bg--active);
+  --_lcb--border-color: transparent;
+  --_lcb--border-color-active: transparent;
+}
+.layout-control-button:hover {
+  color: var(--_lcb--color-hover);
+  background: var(--_lcb--background-hover);
+}
+.layout-control-button:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
+.layout-control-button--active {
+  color: var(--_lcb--color-active);
+  background: var(--_lcb--background-active);
+  border-color: var(--_lcb--border-color-active);
+}</style>

package/dist/ui/page-layout/layout-control-button.svelte.d.ts

@@ -0,0 +1,19 @@
+type Props = {
+    /** Glyph — a string SVG source. */
+    icon: string;
+    label: string;
+    /** `flat` = bare 20px glyph in a 28px hit area (app-navigation toggle); `outlined` = 32px bordered square with a 16px glyph (editor chrome). @default 'outlined' */
+    variant?: 'outlined' | 'flat';
+    /** Toggle state. Leave undefined for a plain action button so no `aria-pressed` is emitted. */
+    active?: boolean;
+    on: {
+        click: () => void;
+    };
+};
+/**
+ * Folder-internal chrome button for the `PageLayout` header. Two variants: `flat` for the
+ * app-navigation toggle and `outlined` for the editor pair. Rendered by `PageLayout`; not exported.
+ */
+declare const LayoutControlButton: import("svelte").Component<Props, {}, "">;
+type LayoutControlButton = ReturnType<typeof LayoutControlButton>;
+export default LayoutControlButton;

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

@@ -2,4 +2,6 @@ export declare class PageLayoutLocalization {
     get resizePanel(): string;
     get togglePanel(): string;
     get toggleNavigation(): string;
+    get togglePanels(): string;
+    get close(): string;
 }

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

@@ -11,6 +11,14 @@ const loc = {
     toggleNavigation: {
         en: 'Toggle navigation',
         no: 'Veksle navigasjon'
+    },
+    togglePanels: {
+        en: 'Toggle panels',
+        no: 'Veksle paneler'
+    },
+    close: {
+        en: 'Close',
+        no: 'Lukk'
     }
 };
 export class PageLayoutLocalization {
@@ -23,4 +31,10 @@ export class PageLayoutLocalization {
     get toggleNavigation() {
         return loc.toggleNavigation[AppLocale.current];
     }
+    get togglePanels() {
+        return loc.togglePanels[AppLocale.current];
+    }
+    get close() {
+        return loc.close[AppLocale.current];
+    }
 }

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

@@ -17,3 +17,16 @@ export type PanelResizingSettings = {
     maxWidth?: number;
 };
 export type PanelBorder = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Config for one `PageLayout` header chrome button. Set `active` only for toggles — it drives both
+ * `aria-pressed` and the pressed background, and is omitted entirely for plain action buttons.
+ */
+export type PageLayoutAction = {
+    active?: boolean;
+    onClick: () => void;
+};
+/** Editor chrome — a fixed pair, so an editor never ships half of it. */
+export type EditorControls = {
+    panelsToggle: PageLayoutAction;
+    close: PageLayoutAction;
+};

package/package.json

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