@streamscloud/kit 0.2.12 → 0.2.14

package/dist/core/local-storage/index.d.ts

@@ -0,0 +1 @@
+export { LocalStorageItem } from './local-storage-item';

package/dist/core/local-storage/index.js

@@ -0,0 +1 @@
+export { LocalStorageItem } from './local-storage-item';

package/dist/core/local-storage/local-storage-item.d.ts

@@ -0,0 +1,10 @@
+export declare class LocalStorageItem<T, TFallback = null> {
+    readonly key: string;
+    private readonly _fallback;
+    private constructor();
+    static of: <T_1>(key: string) => LocalStorageItem<T_1>;
+    static withDefault: <T_1>(key: string, fallback: T_1) => LocalStorageItem<T_1, T_1>;
+    get(): T | TFallback;
+    remove(): void;
+    set(value: T): void;
+}

package/dist/core/local-storage/local-storage-item.js

@@ -0,0 +1,27 @@
+export class LocalStorageItem {
+    key;
+    _fallback;
+    constructor(key, fallback) {
+        this.key = key;
+        this._fallback = fallback;
+    }
+    static of = (key) => {
+        return new LocalStorageItem(key, null);
+    };
+    static withDefault = (key, fallback) => {
+        return new LocalStorageItem(key, fallback);
+    };
+    get() {
+        const stringValue = localStorage.getItem(this.key);
+        if (!stringValue) {
+            return this._fallback;
+        }
+        return JSON.parse(stringValue);
+    }
+    remove() {
+        localStorage.removeItem(this.key);
+    }
+    set(value) {
+        localStorage.setItem(this.key, JSON.stringify(value));
+    }
+}

package/dist/ui/page-toolbar/cmp.reorderable-toggle-list.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">import { Icon } from '../icon';
+import { Toggle } from '../toggle';
+import IconReorderDotsVertical from '@fluentui/svg-icons/icons/re_order_dots_vertical_20_regular.svg?raw';
+import { flip } from 'svelte/animate';
+import { dndzone } from 'svelte-dnd-action';
+let { items, on } = $props();
+const reorderableItems = $derived(items.filter((i) => !i.fixed));
+const fixedItems = $derived(items.filter((i) => i.fixed));
+let dndItems = $state.raw([]);
+$effect(() => {
+    dndItems = reorderableItems.map(({ id, label, enabled }) => ({ id, label, enabled }));
+});
+const flipDurationMs = 200;
+const emitChange = (reordered) => {
+    const merged = [
+        ...fixedItems.map(({ id, label, enabled, fixed }) => ({ id, label, enabled, fixed })),
+        ...reordered.map(({ id, label, enabled }) => ({ id, label, enabled }))
+    ];
+    on.change(merged);
+};
+const handleConsider = (e) => {
+    dndItems = e.detail.items;
+};
+const handleFinalize = (e) => {
+    emitChange(e.detail.items);
+};
+const handleToggle = (id, enabled) => {
+    emitChange(dndItems.map((i) => (i.id === id ? { ...i, enabled } : i)));
+};
+const handleFixedToggle = (id, enabled) => {
+    const updatedFixed = fixedItems.map(({ id: fId, label, enabled: fEnabled, fixed }) => ({
+        id: fId,
+        label,
+        enabled: fId === id ? enabled : fEnabled,
+        fixed
+    }));
+    on.change([...updatedFixed, ...dndItems.map(({ id, label, enabled }) => ({ id, label, enabled }))]);
+};
+</script>
+
+<div class="reorderable-toggle-list">
+  {#each fixedItems as item (item.id)}
+    <div class="reorderable-toggle-list__item">
+      <div class="reorderable-toggle-list__drag-handle reorderable-toggle-list__drag-handle--hidden">
+        <Icon src={IconReorderDotsVertical} />
+      </div>
+      <div class="reorderable-toggle-list__label">
+        {item.label}
+      </div>
+      <div class="reorderable-toggle-list__toggle">
+        <Toggle
+          isOn={item.enabled}
+          on={{
+            change: (value) => handleFixedToggle(item.id, value)
+          }} />
+      </div>
+    </div>
+  {/each}
+  <div
+    class="reorderable-toggle-list__dnd"
+    use:dndzone={{
+      items: dndItems,
+      dropTargetStyle: {},
+      flipDurationMs,
+      morphDisabled: true
+    }}
+    onconsider={handleConsider}
+    onfinalize={handleFinalize}>
+    {#each dndItems as item (item.id)}
+      <div class="reorderable-toggle-list__item" animate:flip={{ duration: flipDurationMs }}>
+        <div class="reorderable-toggle-list__drag-handle">
+          <Icon src={IconReorderDotsVertical} />
+        </div>
+        <div class="reorderable-toggle-list__label">
+          {item.label}
+        </div>
+        <div class="reorderable-toggle-list__toggle">
+          <Toggle
+            isOn={item.enabled}
+            on={{
+              change: (value) => handleToggle(item.id, value)
+            }} />
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<!--
+@component
+A reorderable list of toggle items with drag-and-drop support. Fixed items appear above the reorderable zone.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--reorderable-toggle-list--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+| `--sc-kit--reorderable-toggle-list--handle--color` | Drag handle icon color | `var(--sc-color--text-secondary, light-dark(neutral-500, neutral-300))` |
+| `--sc-kit--reorderable-toggle-list--handle--background` | Drag handle background | `var(--sc-color--bg-element, light-dark(neutral-50, dark-800))` |
+-->
+
+<style>.reorderable-toggle-list {
+  --_reorderable-toggle-list--label--color: var(
+    --sc-kit--reorderable-toggle-list--label--color,
+    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
+  );
+  --_reorderable-toggle-list--handle--color: var(
+    --sc-kit--reorderable-toggle-list--handle--color,
+    var(--sc-color--text-secondary, light-dark(#6b7280, #d1d5db))
+  );
+  --_reorderable-toggle-list--handle--background: var(
+    --sc-kit--reorderable-toggle-list--handle--background,
+    var(--sc-color--bg-element, light-dark(#f9fafb, #1e1e1e))
+  );
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.reorderable-toggle-list__dnd {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.reorderable-toggle-list__item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.25rem 0.5rem;
+}
+.reorderable-toggle-list__drag-handle {
+  --sc-kit--icon--size: 1rem;
+  --sc-kit--icon--color: var(--_reorderable-toggle-list--handle--color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.375rem;
+  padding-inline: 0.1875rem;
+  border-radius: 0.3125rem 0 0 0.3125rem;
+  cursor: grab;
+  background: var(--_reorderable-toggle-list--handle--background);
+}
+.reorderable-toggle-list__drag-handle:active {
+  cursor: grabbing;
+}
+.reorderable-toggle-list__drag-handle--hidden {
+  visibility: hidden;
+}
+.reorderable-toggle-list__label {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: var(--_reorderable-toggle-list--label--color);
+}
+.reorderable-toggle-list__toggle {
+  flex-shrink: 0;
+  margin-left: auto;
+  --sc-kit--toggle--switch--height: 1.125rem;
+  --sc-kit--toggle--switch--width: 2.3125rem;
+}</style>

package/dist/ui/page-toolbar/cmp.reorderable-toggle-list.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ReorderableToggleItem } from './types';
+type Props = {
+    items: ReorderableToggleItem[];
+    on: {
+        change: (items: ReorderableToggleItem[]) => void;
+    };
+};
+/**
+ * A reorderable list of toggle items with drag-and-drop support. Fixed items appear above the reorderable zone.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--reorderable-toggle-list--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ * | `--sc-kit--reorderable-toggle-list--handle--color` | Drag handle icon color | `var(--sc-color--text-secondary, light-dark(neutral-500, neutral-300))` |
+ * | `--sc-kit--reorderable-toggle-list--handle--background` | Drag handle background | `var(--sc-color--bg-element, light-dark(neutral-50, dark-800))` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-button-item.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">const { children, on } = $props();
+export {};
+</script>
+
+<button type="button" class="toolbar-button-item" onclick={() => on?.click?.()}>
+  {@render children()}
+</button>
+
+<!--
+@component
+A simple button item for toolbar panels. Renders children as clickable text.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-button-item--color` | Text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+-->
+
+<style>.toolbar-button-item {
+  --_toolbar-button-item--color: var(
+    --sc-kit--toolbar-button-item--color,
+    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
+  );
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: var(--_toolbar-button-item--color);
+  padding: 0.25rem 0.5rem;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}</style>

package/dist/ui/page-toolbar/cmp.toolbar-button-item.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+    on?: {
+        click?: () => void;
+    };
+};
+/**
+ * A simple button item for toolbar panels. Renders children as clickable text.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-button-item--color` | Text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-checkbox-item.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">import { Checkbox } from '../checkbox';
+const { checked, children, on } = $props();
+</script>
+
+<div class="toolbar-checkbox-item">
+  <Checkbox checked={checked} on={{ change: (value) => on?.change?.(value) }}>
+    {@render children()}
+  </Checkbox>
+</div>
+
+<!--
+@component
+A checkbox item for toolbar panels. Wraps the kit Checkbox with toolbar-appropriate sizing.
+-->
+
+<style>.toolbar-checkbox-item {
+  padding: 0.25rem 0.5rem;
+  overflow: hidden;
+  --sc-kit--checkbox--gap: 1.25rem;
+  --sc-kit--checkbox--icon--size: 1.125rem;
+}</style>

package/dist/ui/page-toolbar/cmp.toolbar-checkbox-item.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    checked: boolean;
+    children: Snippet;
+    on?: {
+        change?: (value: boolean) => void;
+    };
+};
+/** A checkbox item for toolbar panels. Wraps the kit Checkbox with toolbar-appropriate sizing. */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-dropdown.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">import { Button } from '../button';
+import { Dropdown } from '../dropdown';
+import { IconText } from '../icon-text';
+import ToolbarPanel from './cmp.toolbar-panel.svelte';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+const { title, triggerLabel, icon, iconColor, position = 'bottom-end', children, footer } = $props();
+</script>
+
+<div class="toolbar-dropdown">
+  <Dropdown position={position} keepDropdownOpen>
+    {#snippet trigger()}
+      <Button variant="standard" size="small">
+        <IconText icon={icon} iconColor={iconColor} secondaryIcon={IconChevronDown}>{triggerLabel}</IconText>
+      </Button>
+    {/snippet}
+    <ToolbarPanel title={title} footer={footer}>
+      {@render children()}
+    </ToolbarPanel>
+  </Dropdown>
+</div>
+
+<!--
+@component
+A toolbar dropdown button. Opens a panel with a title, body content, and optional footer.
+-->
+
+<style>.toolbar-dropdown {
+  display: contents;
+}</style>

package/dist/ui/page-toolbar/cmp.toolbar-dropdown.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { DropdownPosition } from '../dropdown';
+import type { IconColor } from '../icon';
+import type { Snippet } from 'svelte';
+type Props = {
+    title: string;
+    triggerLabel: string;
+    icon?: string;
+    iconColor?: IconColor;
+    /** @default 'bottom-end' */
+    position?: DropdownPosition;
+    children: Snippet;
+    footer?: Snippet;
+};
+/** A toolbar dropdown button. Opens a panel with a title, body content, and optional footer. */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-panel.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">const { title, children, footer } = $props();
+export {};
+</script>
+
+<div class="toolbar-panel">
+  <div class="toolbar-panel__title">{title}</div>
+  <div class="toolbar-panel__body">
+    {@render children()}
+    {#if footer}
+      <div class="toolbar-panel__divider"></div>
+      {@render footer()}
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+A panel container used inside toolbar dropdowns. Provides a title, body area, and optional footer.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-panel--width` | Panel width | `21.875rem` |
+| `--sc-kit--toolbar-panel--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+| `--sc-kit--toolbar-panel--divider--color` | Divider line color | `var(--sc-color--border-primary, light-dark(neutral-100, dark-800))` |
+-->
+
+<style>.toolbar-panel {
+  --_toolbar-panel--width: var(--sc-kit--toolbar-panel--width, 21.875rem);
+  --_toolbar-panel--title--color: var(
+    --sc-kit--toolbar-panel--title--color,
+    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
+  );
+  --_toolbar-panel--divider--color: var(
+    --sc-kit--toolbar-panel--divider--color,
+    var(--sc-color--border-primary, light-dark(#f2f2f3, #1e1e1e))
+  );
+  width: var(--_toolbar-panel--width);
+  padding: 1.5rem;
+}
+.toolbar-panel__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  color: var(--_toolbar-panel--title--color);
+  margin-bottom: 0.5rem;
+}
+.toolbar-panel__body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-block: 0.5rem;
+}
+.toolbar-panel__divider {
+  height: 1px;
+  background: var(--_toolbar-panel--divider--color);
+  margin: 0.25rem 0.5rem;
+}</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    title: string;
+    children: Snippet;
+    footer?: Snippet;
+};
+/**
+ * A panel container used inside toolbar dropdowns. Provides a title, body area, and optional footer.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-panel--width` | Panel width | `21.875rem` |
+ * | `--sc-kit--toolbar-panel--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ * | `--sc-kit--toolbar-panel--divider--color` | Divider line color | `var(--sc-color--border-primary, light-dark(neutral-100, dark-800))` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-search-input.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">import { Utils } from '../../core/utils';
+import { Icon } from '../icon';
+import { Input } from '../inputs';
+import IconSearch from '@fluentui/svg-icons/icons/search_20_regular.svg?raw';
+const { value, placeholder = 'Search...', debounce = 0, on } = $props();
+let focused = $state(false);
+const expanded = $derived(focused || !!value);
+const onInput = (v) => {
+    on?.input?.(v);
+};
+const onInputDebounced = $derived(debounce > 0 ? Utils.debounce(onInput, debounce) : onInput);
+</script>
+
+{#snippet searchIcon()}
+  <Icon src={IconSearch} />
+{/snippet}
+
+<div class="toolbar-search-input" class:toolbar-search-input--expanded={expanded}>
+  <Input
+    value={value}
+    placeholder={placeholder}
+    icon={searchIcon}
+    clearable
+    borderless={!expanded}
+    on={{ input: onInputDebounced, change: onInputDebounced, focus: () => (focused = true), blur: () => (focused = false) }} />
+</div>
+
+<!--
+@component
+A collapsible search input for toolbars. Expands when focused or when value is present.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-search-input--width` | Expanded width | `12.5rem` |
+-->
+
+<style>.toolbar-search-input {
+  --_toolbar-search-input--width: var(--sc-kit--toolbar-search-input--width, 12.5rem);
+  --sc-kit--input--root--font-size: 0.875rem;
+  --sc-kit--input--width: 1.75rem;
+  --sc-kit--input--height: 1.75rem;
+  --sc-kit--input--icon--color: var(--sc-color--text-brand, #5a8dec);
+  --sc-kit--input--accent-color: transparent;
+}
+.toolbar-search-input--expanded {
+  --sc-kit--input--width: var(--_toolbar-search-input--width);
+  --sc-kit--input--icon--color: initial;
+}</style>

package/dist/ui/page-toolbar/cmp.toolbar-search-input.svelte.d.ts

@@ -0,0 +1,20 @@
+type Props = {
+    value: string;
+    placeholder?: string;
+    /** Debounce delay in ms @default 0 */
+    debounce?: number;
+    on?: {
+        input?: (value: string) => void;
+    };
+};
+/**
+ * A collapsible search input for toolbars. Expands when focused or when value is present.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-search-input--width` | Expanded width | `12.5rem` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-segmented-control.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" generics="T extends string | number">import { LocalStorageItem } from '../../core/local-storage';
+import { SegmentedControl } from '../segmented-control';
+import { untrack } from 'svelte';
+const { segments, selected, localStorageKey, on } = $props();
+let storage = null;
+// One-time init: load from localStorage
+$effect(() => untrack(() => {
+    if (!localStorageKey) {
+        return;
+    }
+    storage = LocalStorageItem.of(localStorageKey);
+    const saved = storage.get();
+    if (saved !== null && segments.some((s) => s.id === saved)) {
+        on?.change?.(saved);
+    }
+}));
+const handleChange = (id) => {
+    storage?.set(id);
+    on?.change?.(id);
+};
+</script>
+
+<div class="toolbar-segmented-control">
+  <SegmentedControl segments={segments} selected={selected} on={{ change: handleChange }} />
+</div>
+
+<!--
+@component
+A segmented control styled for toolbar use with optional localStorage persistence.
+Wraps SegmentedControl with toolbar-specific sizing (28px height, 10px font, 4px radius).
+-->
+
+<style>.toolbar-segmented-control {
+  --sc-kit--segmented-control--height: 1.75rem;
+  --sc-kit--segmented-control--label--font-size: 0.625rem;
+  --sc-kit--segmented-control--border-radius: 0.25rem;
+  --sc-kit--segmented-control--selected--background: var(--sc-color--bg-menu-active, light-dark(#f1f6fd, #2c2c2c));
+  --sc-kit--segmented-control--selected--box-shadow: inset 0px 1.5px 0px 0px rgba(255, 255, 255, 0.3);
+  --sc-kit--segmented-control--border-color: var(--sc-color--border-primary, light-dark(#f2f2f3, #1e1e1e));
+}</style>

package/dist/ui/page-toolbar/cmp.toolbar-segmented-control.svelte.d.ts

@@ -0,0 +1,39 @@
+declare function $$render<T extends string | number>(): {
+    props: {
+        segments: {
+            id: T;
+            label: string;
+        }[];
+        selected: T;
+        /** localStorage key for persisting selection */
+        localStorageKey?: string;
+        on?: {
+            change?: (id: T) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string | number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A segmented control styled for toolbar use with optional localStorage persistence.
+ * Wraps SegmentedControl with toolbar-specific sizing (28px height, 10px font, 4px radius).
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends string | number> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-switch-item.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" generics="T extends string | number">import { SegmentedControl } from '../segmented-control';
+const { segments, selected, children, on } = $props();
+</script>
+
+<div class="toolbar-switch-item">
+  <div class="toolbar-switch-item__label">
+    {@render children()}
+  </div>
+  <div class="toolbar-switch-item__switch">
+    <SegmentedControl segments={segments} selected={selected} on={{ change: (id) => on?.change?.(id) }} />
+  </div>
+</div>
+
+<!--
+@component
+A switch item for toolbar panels. Shows a label on the left and a segmented control on the right.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-switch-item--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+-->
+
+<style>.toolbar-switch-item {
+  --_toolbar-switch-item--label--color: var(
+    --sc-kit--toolbar-switch-item--label--color,
+    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
+  );
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+}
+.toolbar-switch-item__label {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: var(--_toolbar-switch-item--label--color);
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.toolbar-switch-item__switch {
+  flex-shrink: 0;
+  --sc-kit--segmented-control--border-radius: 0.375rem;
+  --sc-kit--segmented-control--selected--background: var(--sc-color--bg-brand, #144ab0);
+  --sc-kit--segmented-control--selected--color: #ffffff;
+}</style>

package/dist/ui/page-toolbar/cmp.toolbar-switch-item.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T extends string | number>(): {
+    props: {
+        segments: {
+            id: T;
+            label: string;
+        }[];
+        selected: T;
+        children: Snippet;
+        on?: {
+            change?: (id: T) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string | number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A switch item for toolbar panels. Shows a label on the left and a segmented control on the right.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-switch-item--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends string | number> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-toggle-item.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">import { Toggle } from '../toggle';
+const { isOn, children, on } = $props();
+</script>
+
+<div class="toolbar-toggle-item">
+  <div class="toolbar-toggle-item__label">
+    {@render children()}
+  </div>
+  <Toggle isOn={isOn} on={{ change: (value) => on?.change?.(value) }} />
+</div>
+
+<!--
+@component
+A toggle item for toolbar panels. Shows a label on the left and a toggle switch on the right.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-toggle-item--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+-->
+
+<style>.toolbar-toggle-item {
+  --_toolbar-toggle-item--label--color: var(
+    --sc-kit--toolbar-toggle-item--label--color,
+    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
+  );
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  --sc-kit--toggle--switch--height: 1.125rem;
+  --sc-kit--toggle--switch--width: 2.3125rem;
+}
+.toolbar-toggle-item__label {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: var(--_toolbar-toggle-item--label--color);
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}</style>

package/dist/ui/page-toolbar/cmp.toolbar-toggle-item.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    isOn: boolean;
+    children: Snippet;
+    on?: {
+        change?: (value: boolean) => void;
+    };
+};
+/**
+ * A toggle item for toolbar panels. Shows a label on the left and a toggle switch on the right.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-toggle-item--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,10 @@
+export { default as ReorderableToggleList } from './cmp.reorderable-toggle-list.svelte';
+export { default as ToolbarButtonItem } from './cmp.toolbar-button-item.svelte';
+export { default as ToolbarCheckboxItem } from './cmp.toolbar-checkbox-item.svelte';
+export { default as ToolbarDropdown } from './cmp.toolbar-dropdown.svelte';
+export { default as ToolbarPanel } from './cmp.toolbar-panel.svelte';
+export { default as ToolbarSearchInput } from './cmp.toolbar-search-input.svelte';
+export { default as ToolbarSegmentedControl } from './cmp.toolbar-segmented-control.svelte';
+export { default as ToolbarSwitchItem } from './cmp.toolbar-switch-item.svelte';
+export { default as ToolbarToggleItem } from './cmp.toolbar-toggle-item.svelte';
+export type { ReorderableToggleItem } from './types';

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

@@ -0,0 +1,9 @@
+export { default as ReorderableToggleList } from './cmp.reorderable-toggle-list.svelte';
+export { default as ToolbarButtonItem } from './cmp.toolbar-button-item.svelte';
+export { default as ToolbarCheckboxItem } from './cmp.toolbar-checkbox-item.svelte';
+export { default as ToolbarDropdown } from './cmp.toolbar-dropdown.svelte';
+export { default as ToolbarPanel } from './cmp.toolbar-panel.svelte';
+export { default as ToolbarSearchInput } from './cmp.toolbar-search-input.svelte';
+export { default as ToolbarSegmentedControl } from './cmp.toolbar-segmented-control.svelte';
+export { default as ToolbarSwitchItem } from './cmp.toolbar-switch-item.svelte';
+export { default as ToolbarToggleItem } from './cmp.toolbar-toggle-item.svelte';

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

@@ -0,0 +1,6 @@
+export type ReorderableToggleItem = {
+    id: string;
+    label: string;
+    enabled: boolean;
+    fixed?: boolean;
+};

package/dist/ui/page-toolbar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/segmented-control/cmp.segmented-control.svelte

@@ -0,0 +1,97 @@
+<script lang="ts" generics="T extends string | number">const { segments, selected, on } = $props();
+</script>
+
+<div class="segmented-control">
+  {#each segments as segment (segment.id)}
+    <button
+      type="button"
+      class="segmented-control__segment"
+      class:segmented-control__segment--selected={selected === segment.id}
+      onclick={() => on?.change?.(segment.id)}>
+      <span class="segmented-control__label">{segment.label}</span>
+    </button>
+  {/each}
+</div>
+
+<!--
+@component
+A segmented control for switching between a set of options. Each segment is a button with a label.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--segmented-control--root--font-size` | Base font size for em-based sizing | `1rem` |
+| `--sc-kit--segmented-control--height` | Height of the control | `1.75em` |
+| `--sc-kit--segmented-control--background` | Background color | `var(--sc-color--bg-button, light-dark(neutral-50, dark-600))` |
+| `--sc-kit--segmented-control--border-color` | Border color | `var(--sc-color--border-primary, light-dark(neutral-100, dark-800))` |
+| `--sc-kit--segmented-control--border-radius` | Border radius | `0.25em` |
+| `--sc-kit--segmented-control--segment--padding-block` | Segment vertical padding | `0.25em` |
+| `--sc-kit--segmented-control--segment--padding-inline` | Segment horizontal padding | `1.125em` |
+| `--sc-kit--segmented-control--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+| `--sc-kit--segmented-control--label--font-size` | Label font size | `0.625em` |
+| `--sc-kit--segmented-control--selected--background` | Selected segment background | `var(--sc-color--bg-menu-active, light-dark(primary-50, dark-400))` |
+| `--sc-kit--segmented-control--selected--box-shadow` | Selected segment box shadow | `0px 1px 3px rgba(0,0,0,0.1)` |
+| `--sc-kit--segmented-control--selected--color` | Selected segment text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+-->
+
+<style>.segmented-control {
+  --_segmented-control--root--font-size: var(--sc-kit--segmented-control--root--font-size, 1rem);
+  --_segmented-control--height: var(--sc-kit--segmented-control--height, 1.75em);
+  --_segmented-control--background: var(
+    --sc-kit--segmented-control--background,
+    var(--sc-color--bg-button, light-dark(#f9fafb, #242424))
+  );
+  --_segmented-control--border-color: var(
+    --sc-kit--segmented-control--border-color,
+    var(--sc-color--border-primary, light-dark(#f2f2f3, #1e1e1e))
+  );
+  --_segmented-control--border-radius: var(--sc-kit--segmented-control--border-radius, 0.25em);
+  --_segmented-control--segment--padding-block: var(--sc-kit--segmented-control--segment--padding-block, 0.25em);
+  --_segmented-control--segment--padding-inline: var(--sc-kit--segmented-control--segment--padding-inline, 1.125em);
+  --_segmented-control--label--color: var(
+    --sc-kit--segmented-control--label--color,
+    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
+  );
+  --_segmented-control--label--font-size: var(--sc-kit--segmented-control--label--font-size, 0.625em);
+  --_segmented-control--selected--background: var(
+    --sc-kit--segmented-control--selected--background,
+    var(--sc-color--bg-menu-active, light-dark(#f1f6fd, #2c2c2c))
+  );
+  --_segmented-control--selected--box-shadow: var(
+    --sc-kit--segmented-control--selected--box-shadow,
+    0px 1px 3px var(--sc-color--box-shadow, rgba(0, 0, 0, 0.1))
+  );
+  --_segmented-control--selected--color: var(
+    --sc-kit--segmented-control--selected--color,
+    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
+  );
+  display: flex;
+  width: 100%;
+  font-size: var(--_segmented-control--root--font-size);
+  height: var(--_segmented-control--height);
+  background: var(--_segmented-control--background);
+  border: 1px solid var(--_segmented-control--border-color);
+  border-radius: var(--_segmented-control--border-radius);
+  gap: 0.0313em;
+  overflow: hidden;
+}
+.segmented-control__segment {
+  color: var(--_segmented-control--label--color);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--_segmented-control--segment--padding-block) var(--_segmented-control--segment--padding-inline);
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.segmented-control__segment--selected {
+  box-shadow: var(--_segmented-control--selected--box-shadow);
+}
+.segmented-control__segment--selected, .segmented-control__segment:hover {
+  background: var(--_segmented-control--selected--background);
+  color: var(--_segmented-control--selected--color);
+}
+.segmented-control__label {
+  font-size: var(--_segmented-control--label--font-size);
+}</style>

package/dist/ui/segmented-control/cmp.segmented-control.svelte.d.ts

@@ -0,0 +1,52 @@
+declare function $$render<T extends string | number>(): {
+    props: {
+        segments: {
+            id: T;
+            label: string;
+        }[];
+        selected: T;
+        on?: {
+            change?: (id: T) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string | number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A segmented control for switching between a set of options. Each segment is a button with a label.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--segmented-control--root--font-size` | Base font size for em-based sizing | `1rem` |
+ * | `--sc-kit--segmented-control--height` | Height of the control | `1.75em` |
+ * | `--sc-kit--segmented-control--background` | Background color | `var(--sc-color--bg-button, light-dark(neutral-50, dark-600))` |
+ * | `--sc-kit--segmented-control--border-color` | Border color | `var(--sc-color--border-primary, light-dark(neutral-100, dark-800))` |
+ * | `--sc-kit--segmented-control--border-radius` | Border radius | `0.25em` |
+ * | `--sc-kit--segmented-control--segment--padding-block` | Segment vertical padding | `0.25em` |
+ * | `--sc-kit--segmented-control--segment--padding-inline` | Segment horizontal padding | `1.125em` |
+ * | `--sc-kit--segmented-control--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ * | `--sc-kit--segmented-control--label--font-size` | Label font size | `0.625em` |
+ * | `--sc-kit--segmented-control--selected--background` | Selected segment background | `var(--sc-color--bg-menu-active, light-dark(primary-50, dark-400))` |
+ * | `--sc-kit--segmented-control--selected--box-shadow` | Selected segment box shadow | `0px 1px 3px rgba(0,0,0,0.1)` |
+ * | `--sc-kit--segmented-control--selected--color` | Selected segment text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends string | number> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/segmented-control/index.d.ts

@@ -0,0 +1 @@
+export { default as SegmentedControl } from './cmp.segmented-control.svelte';

package/dist/ui/segmented-control/index.js

@@ -0,0 +1 @@
+export { default as SegmentedControl } from './cmp.segmented-control.svelte';

package/dist/ui/table/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Table } from './cmp.table.svelte';
 export { default as TableColumnsManager } from './table-columns-manager/cmp.table-columns-manager.svelte';
 export { default as TableGroupActions } from './table-group-actions/cmp.table-group-actions.svelte';
-export type { TableColumnSortDirection, TableColumnType, TableImageColumnFormat, TableItemAction, TableTextColumnFormat, TableOrderByState, PageQuery, IAnyTableColumn } from './types';
+export type { ColumnsConfig, TableColumnSortDirection, TableColumnType, TableImageColumnFormat, TableItemAction, TableTextColumnFormat, TableOrderByState, PageQuery, IAnyTableColumn } from './types';
 export type { TableGroupAction } from './table-group-actions/types.svelte';
 export { TableModel } from './table-model.svelte';
 export { pickDirectionFromOrderByState, generatePagination } from './service';

package/dist/ui/table/table-cells/table-text-cell.svelte

@@ -19,14 +19,14 @@ const fmt = (d, options) => new Intl.DateTimeFormat(undefined, options).format(d
     {#if column.maxLines === 'single-line-no-trim'}
       <span class="table-text-cell__single-line-no-trim">{HtmlHelper.stripHtml(value)}</span>
     {:else}
-      <LineClamp maxLines={column.maxLines || 3}>
+      <LineClamp maxLines={column.maxLines || 1}>
         {@html HtmlHelper.sanitizeHtml(value)}
       </LineClamp>
     {/if}
   {:else if column.maxLines === 'single-line-no-trim'}
     <span class="table-text-cell__single-line-no-trim">{value}</span>
   {:else}
-    <LineClamp maxLines={column.maxLines || 3}>{value}</LineClamp>
+    <LineClamp maxLines={column.maxLines || 1}>{value}</LineClamp>
   {/if}
 </span>
 

package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte

@@ -1,15 +1,81 @@
-<script lang="ts" generics="T extends {id: string}">import { Button } from '../../button';
+<script lang="ts" generics="T extends {id: string}">import { LocalStorageItem } from '../../../core/local-storage';
+import { Button } from '../../button';
 import { Dropdown } from '../../dropdown';
 import { IconText } from '../../icon-text';
-import { Toggle } from '../../toggle';
+import { ReorderableToggleList } from '../../page-toolbar';
 import { TableColumnsManagerLocalization } from './table-columns-manager-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconColumnTwo from '@fluentui/svg-icons/icons/text_column_two_20_regular.svg?raw';
-let { columns } = $props();
+import { untrack } from 'svelte';
+let { model, localStorageKey, on } = $props();
 const localization = new TableColumnsManagerLocalization();
+const storage = $derived(localStorageKey ? LocalStorageItem.of(localStorageKey) : null);
+const hideableColumns = $derived(model.columns.filter((c) => c.hideable));
+const items = $derived(hideableColumns.map((col) => ({
+    id: String(col.id),
+    label: col.title,
+    enabled: !col.hidden
+})));
+// Load from localStorage once columns are available
+let initialized = false;
+$effect(() => {
+    const columns = hideableColumns;
+    if (!storage || columns.length === 0 || initialized) {
+        return;
+    }
+    initialized = true;
+    const saved = storage.get();
+    if (!saved || !Array.isArray(saved)) {
+        return;
+    }
+    untrack(() => {
+        applyConfig(saved);
+    });
+});
+/** Apply a columns config. Updates column visibility and order on the model, persists to localStorage. */
+export const applyConfig = (config) => {
+    const configMap = new Map(config.map((c) => [c.id, c]));
+    for (const col of model.columns) {
+        if (col.hideable) {
+            const cfg = configMap.get(String(col.id));
+            if (cfg) {
+                col.hidden = cfg.hidden;
+            }
+        }
+    }
+    reorderHideableColumns(config.map((c) => c.id));
+    if (storage) {
+        storage.set(config);
+    }
+};
+const reorderHideableColumns = (orderedIds) => {
+    const columns = model.columns;
+    const hideable = columns.filter((c) => c.hideable);
+    const hideableMap = new Map(hideable.map((c) => [String(c.id), c]));
+    const orderedSet = new Set(orderedIds);
+    const reordered = [];
+    for (const id of orderedIds) {
+        const col = hideableMap.get(id);
+        if (col) {
+            reordered.push(col);
+        }
+    }
+    for (const col of hideable) {
+        if (!orderedSet.has(String(col.id))) {
+            reordered.push(col);
+        }
+    }
+    let idx = 0;
+    model.setResolvedColumns(columns.map((col) => (col.hideable ? reordered[idx++] : col)));
+};
+const handleChange = (updatedItems) => {
+    const config = updatedItems.map((i) => ({ id: i.id, hidden: !i.enabled }));
+    applyConfig(config);
+    on?.change?.(config);
+};
 </script>
 
-<Dropdown position="bottom-end" keepDropdownOpen>
+<Dropdown position="bottom-start" keepDropdownOpen>
   {#snippet trigger()}
     <Button variant="standard" size="small">
       <IconText icon={IconColumnTwo} iconColor="blue" secondaryIcon={IconChevronDown}>{localization.columns}</IconText>
@@ -18,25 +84,20 @@ const localization = new TableColumnsManagerLocalization();
   <div class="columns-manager">
     <div class="columns-manager__title">{localization.selectColumns}</div>
     <div class="columns-manager__body">
-      {#each columns.filter((c) => c.hideable) as column (column)}
-        <div class="columns-manager__item">
-          <div class="columns-manager__label">{column.title}</div>
-          <Toggle isOn={!column.hidden} on={{ change: (value) => (column.hidden = !value) }} />
-        </div>
-      {/each}
+      <ReorderableToggleList items={items} on={{ change: handleChange }} />
     </div>
   </div>
 </Dropdown>
 
 <!--
 @component
-Column visibility manager for tables. Shows a dropdown with toggles for each hideable column.
+Column visibility and order manager for tables. Shows a dropdown with a reorderable toggle list for each hideable column.
+Supports optional localStorage persistence of column order and visibility.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--table-columns-manager--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
-| `--sc-kit--table-columns-manager--label--color` | Column label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
 -->
 
 <style>.columns-manager {
@@ -44,10 +105,6 @@ Column visibility manager for tables. Shows a dropdown with toggles for each hid
     --sc-kit--table-columns-manager--title--color,
     var(--sc-color--text-primary, light-dark(#000000, #ffffff))
   );
-  --_columns-manager--label--color: var(
-    --sc-kit--table-columns-manager--label--color,
-    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
-  );
   width: 21.875rem;
   padding: 1.5rem;
 }
@@ -63,24 +120,4 @@ Column visibility manager for tables. Shows a dropdown with toggles for each hid
   flex-direction: column;
   gap: 1rem;
   padding-block: 0.5rem;
-}
-.columns-manager__item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.25rem 0.5rem;
-  --sc-kit--toggle--switch--height: 1.125rem;
-  --sc-kit--toggle--switch--width: 2.3125rem;
-}
-.columns-manager__label {
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-  color: var(--_columns-manager--label--color);
-  min-width: 0;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
 }</style>

package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte.d.ts

@@ -1,11 +1,19 @@
-import type { ResolvedColumn } from '../table-column-models.svelte';
+import type { TableModel } from '..';
+import type { ColumnsConfig } from '../types';
 declare function $$render<T extends {
     id: string;
 }>(): {
     props: {
-        columns: Array<ResolvedColumn<T>>;
+        model: TableModel<T>;
+        /** localStorage key for persisting column order and visibility */
+        localStorageKey?: string;
+        on?: {
+            change?: (config: ColumnsConfig) => void;
+        };
+    };
+    exports: {
+        /** Apply a columns config. Updates column visibility and order on the model, persists to localStorage. */ applyConfig: (config: ColumnsConfig) => void;
     };
-    exports: {};
     bindings: "";
     slots: {};
     events: {};
@@ -17,7 +25,9 @@ declare class __sveltets_Render<T extends {
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        /** Apply a columns config. Updates column visibility and order on the model, persists to localStorage. */ applyConfig: (config: ColumnsConfig) => void;
+    };
 }
 interface $$IsomorphicComponent {
     new <T extends {
@@ -31,13 +41,13 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
- * Column visibility manager for tables. Shows a dropdown with toggles for each hideable column.
+ * Column visibility and order manager for tables. Shows a dropdown with a reorderable toggle list for each hideable column.
+ * Supports optional localStorage persistence of column order and visibility.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--table-columns-manager--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
- * | `--sc-kit--table-columns-manager--label--color` | Column label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends {

package/dist/ui/table/table-model.svelte.d.ts

@@ -36,6 +36,7 @@ export declare class TableModel<T extends WithId> {
     set columns(value: IAnyTableColumn<T>[]);
     set editingItem(value: T | null);
     set highlightedItemIds(value: string[]);
+    setResolvedColumns: (columns: ResolvedColumn<T>[]) => void;
     private reconcileColumns;
     private mapColumn;
 }

package/dist/ui/table/table-model.svelte.js

@@ -97,6 +97,9 @@ export class TableModel {
     set highlightedItemIds(value) {
         this._highlightedItemIds = value;
     }
+    setResolvedColumns = (columns) => {
+        this._columns = columns;
+    };
     reconcileColumns = (newDefs) => {
         // Save state from current columns
         const stateMap = new Map();

package/dist/ui/table/types.d.ts

@@ -44,7 +44,7 @@ export interface ITableByColumn<T> extends ITableColumn<T> {
         id: string;
         name: string;
         handle: string;
-        image: string;
+        image: string | null;
     }) | null;
     /** Returns href for the user link. If not provided, no link is rendered. */
     hrefFactory?: ((by: {
@@ -101,6 +101,7 @@ export interface ITableSelectColumn<T, K extends keyof T> extends ITableColumn<T
 export interface ITableTextColumn<T> extends ITableColumn<T> {
     type: 'text';
     format?: TableTextColumnFormat | null;
+    /** @default 1 */
     maxLines?: number | 'single-line-no-trim' | null;
     valueFactory?: ((item: T) => string) | null;
     editorColumn?: IEditorColumn<T> | null;
@@ -141,4 +142,8 @@ export type SelectionSettings<T extends WithId> = {
     repository?: Repository<T>;
 };
 export type TableColumnSortDirection = 'none' | 'asc' | 'desc';
+export type ColumnsConfig = Array<{
+    id: string;
+    hidden: boolean;
+}>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -53,6 +53,10 @@
       "types": "./dist/core/i18n/index.d.ts",
       "svelte": "./dist/core/i18n/index.js"
     },
+    "./core/local-storage": {
+      "types": "./dist/core/local-storage/index.d.ts",
+      "svelte": "./dist/core/local-storage/index.js"
+    },
     "./core/locale": {
       "types": "./dist/core/locale/index.d.ts",
       "svelte": "./dist/core/locale/index.js"
@@ -181,6 +185,10 @@
       "types": "./dist/ui/media-viewer-dialog/index.d.ts",
       "svelte": "./dist/ui/media-viewer-dialog/index.js"
     },
+    "./ui/page-toolbar": {
+      "types": "./dist/ui/page-toolbar/index.d.ts",
+      "svelte": "./dist/ui/page-toolbar/index.js"
+    },
     "./ui/player/buttons": {
       "types": "./dist/ui/player/buttons/index.d.ts",
       "svelte": "./dist/ui/player/buttons/index.js"
@@ -213,6 +221,10 @@
       "types": "./dist/ui/seek-bar/index.d.ts",
       "svelte": "./dist/ui/seek-bar/index.js"
     },
+    "./ui/segmented-control": {
+      "types": "./dist/ui/segmented-control/index.d.ts",
+      "svelte": "./dist/ui/segmented-control/index.js"
+    },
     "./ui/selects": {
       "types": "./dist/ui/selects/index.d.ts",
       "svelte": "./dist/ui/selects/index.js"