@streamscloud/kit 0.2.42 → 0.9.1

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

@@ -1,9 +1,10 @@
 import type { Repository } from '../../core/repository';
-import type { BadgeColor } from '../badge';
+import type { BadgeVariant } from '../badge';
 import type { ButtonSize, ButtonVariant } from '../button';
 import { DynamicComponentModel } from '../dynamic-component';
-import type { IconColor } from '../icon';
-import type { SelectOption } from '../selects';
+import type { IconProp } from '../icon';
+import type { SelectOption } from '../select';
+import type { Snippet } from 'svelte';
 import type { ISchema } from 'yup';
 export type WithId = {
     id: string;
@@ -11,9 +12,9 @@ export type WithId = {
 export type IAnyTableColumn<T> = {
     [P in keyof T]: IOneOfTableColumn<T, P>;
 }[keyof T];
-export type IOneOfTableColumn<T, K extends keyof T> = ITableBadgeColumn<T> | ITableButtonColumn<T> | ITableByColumn<T> | ITableCheckboxColumn | ITableCustomColumn<T> | ITableIconColumn<T> | ITableImageColumn<T> | ITableMoveRowColumn | ITableSelectColumn<T, K> | ITableTextColumn<T> | ITableTextInputColumn<T>;
+export type IOneOfTableColumn<T, K extends keyof T> = ITableBadgeColumn<T> | ITableButtonColumn<T> | ITableByColumn<T> | ITableCheckboxColumn | ITableCustomColumn<T> | ITableIconColumn<T> | ITableImageColumn<T> | ITableMoveRowColumn | ITableSelectColumn<T, K> | ITableSnippetColumn<T> | ITableTextColumn<T> | ITableTextInputColumn<T>;
 export type IEditorColumn<T> = ITableTextInputColumn<T> | ITableSelectColumn<T, keyof T>;
-export type TableColumnType = 'actions' | 'badge' | 'button' | 'by' | 'checkbox' | 'custom' | 'icon' | 'image' | 'move-row' | 'select' | 'text' | 'text-input';
+export type TableColumnType = 'actions' | 'badge' | 'button' | 'by' | 'checkbox' | 'custom' | 'icon' | 'image' | 'move-row' | 'select' | 'snippet' | 'text' | 'text-input';
 interface ITableColumnBase {
     type: TableColumnType;
     fixedCssWidth?: string;
@@ -37,9 +38,8 @@ export interface ITableActionsColumn extends ITableColumnBase {
 }
 export interface ITableBadgeColumn<T> extends ITableColumn<T> {
     type: 'badge';
-    colorFactory?: ((item: T) => BadgeColor) | null;
+    variantFactory?: ((item: T) => BadgeVariant) | null;
     valueFactory?: ((item: T) => string) | null;
-    roundedBadge?: boolean;
 }
 export interface ITableByColumn<T> extends ITableColumn<T> {
     type: 'by';
@@ -76,8 +76,7 @@ export interface ITableCustomColumn<T> extends ITableColumn<T> {
 }
 export interface ITableIconColumn<T> extends ITableColumn<T> {
     type: 'icon';
-    colorFactory?: ((item: T) => IconColor) | null;
-    iconSrcFactory?: ((item: T) => string) | null;
+    iconFactory?: ((item: T) => IconProp) | null;
     tooltipTextFactory?: ((item: T) => string) | null;
 }
 export interface ITableImageColumn<T> extends ITableColumn<T> {
@@ -99,9 +98,14 @@ export interface ITableSelectColumn<T, K extends keyof T> extends ITableColumn<T
     placeholder?: string | null;
     disabledFactory?: ((item: T) => boolean) | null;
     visibilityFactory?: ((item: T) => boolean) | null;
-    allowReset?: boolean;
+    clearable?: boolean;
     onSelected: (item: T, value: T[K] | null) => void;
 }
+export interface ITableSnippetColumn<T> extends ITableColumn<T> {
+    type: 'snippet';
+    /** Render-prop snippet receiving the row item. Use for rich / custom cell composition without creating a separate cell component. */
+    cell: Snippet<[T]>;
+}
 export interface ITableTextColumn<T> extends ITableColumn<T> {
     type: 'text';
     format?: TableTextColumnFormat | null;
@@ -121,14 +125,21 @@ export type TableTextColumnFormat = 'text' | 'html' | 'money' | 'date' | 'date-t
 export type TableImageColumnFormat = 'circle' | 'square-contain' | 'square-cover';
 export type TableItemAction<T> = {
     title: string;
-    icon?: string;
-    color?: IconColor;
+    icon?: IconProp;
     action: (item: T) => void;
     visibilityFactory?: (item: T) => boolean;
 };
 export type TableStyles = {
+    /** Stick the table header to the scrolling ancestor. @default false */
     stickyHeader?: boolean;
-    actionsDropdownTopDirection?: boolean;
+    /** Show the per-row actions popover above the row instead of below. @default false */
+    actionsPopoverTopDirection?: boolean;
+    /** Row + cell padding preset. @default 'md' */
+    size?: 'sm' | 'md';
+    /** Alternate row backgrounds for readability on long lists. @default false */
+    zebra?: boolean;
+    /** Visual chrome around the table. `'plain'` blends with surrounding layout; `'card'` adds a bordered, rounded panel. @default 'plain' */
+    variant?: 'plain' | 'card';
 };
 export type TableOrderByState<TOrder> = {
     orderBy: TOrder;

package/dist/ui/tabs/cmp.tabs.svelte

@@ -0,0 +1,67 @@
+<script lang="ts" generics="T">import TabItem from './tab.svelte';
+const { value, tabs, variant = 'default', size = 'md', compare, on } = $props();
+const isActive = (tab) => (compare ? compare(value, tab.value) : value === tab.value);
+</script>
+
+<div class="tabs tabs--{variant}" role="tablist">
+  {#each tabs as tab, i (i)}
+    <TabItem tab={tab} variant={variant} size={size} active={isActive(tab)} on={{ select: on?.change, close: on?.close }} />
+  {/each}
+</div>
+
+<!--
+@component
+Tabs — header strip for switching between content panels. Panel rendering is consumer-controlled
+(switch on the active `value`). Three visual variants:
+
+- **`default`**: underline — a 2px accent bar travels under the active tab; the strip has a bottom border.
+- **`pills`**: filled — the active tab lifts as a card on an inset tray.
+- **`document`**: browser-style tabs — flush, rounded-top; the active tab background matches the canvas so it reads as continuous with the content below.
+
+Providing `on.close` renders a close affordance on each non-disabled tab (works in any variant).
+Each tab carries an optional `disabled` flag (non-interactive). For navigation, not single-choice
+form input — use `SegmentedControl` for the latter (it's a `radiogroup`; this is a `tablist`).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--tabs--height` | Tab height | per size (28 / 36 px) |
+| `--sc-kit--tabs--font-size` | Tab label font size | per size |
+| `--sc-kit--tabs--font-weight` | Tab label font weight | per size (sm: regular / md: medium) |
+| `--sc-kit--tabs--padding-inline` | Per-tab horizontal padding | per size (10 / 14 px) |
+| `--sc-kit--tabs--radius` | Tab radius (pills) / tray radius | `--sc-kit--radius--sm` / `--sc-kit--radius--md` |
+| `--sc-kit--tabs--color` | Default tab text color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--tabs--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
+| `--sc-kit--tabs--color--active` | Active tab text color | default: `--sc-kit--color--accent`, pills/document: `--sc-kit--color--text--primary` |
+| `--sc-kit--tabs--color--disabled` | Disabled tab text color | `--sc-kit--color--text--muted` |
+| `--sc-kit--tabs--accent` | Underline bar color (default variant) | `--sc-kit--color--accent` |
+| `--sc-kit--tabs--border-color` | Bottom border color (default variant) | `--sc-kit--color--border` |
+| `--sc-kit--tabs--pills--background` | Inset tray background (pills variant) | `--sc-kit--color--bg--active` |
+| `--sc-kit--tabs--pills--background--active` | Active tab background (pills variant) | `--sc-kit--color--bg--panel` |
+| `--sc-kit--tabs--pills--shadow--active` | Active tab lift shadow (pills variant) | `--sc-kit--shadow--sm` |
+| `--sc-kit--tabs--document--background` | Inactive tab background (document variant) | `neutral-200` / `dark-500` |
+| `--sc-kit--tabs--document--background--active` | Active tab background (document variant) — matches the canvas | `--sc-kit--color--bg--app` |
+| `--sc-kit--tabs--document--background--hover` | Inactive tab hover background (document variant) | `--sc-kit--color--bg--hover` |
+-->
+
+<style>.tabs {
+  --_tabs--border-color: var(--sc-kit--tabs--border-color, var(--sc-kit--color--border));
+  --_tabs--pills-background: var(--sc-kit--tabs--pills--background, var(--sc-kit--color--bg--active));
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-family: inherit;
+}
+.tabs--default {
+  border-bottom: 1px solid var(--_tabs--border-color);
+}
+.tabs--pills {
+  gap: 0;
+  padding: 0.25rem;
+  background: var(--_tabs--pills-background);
+  border-radius: var(--sc-kit--radius--md);
+}
+.tabs--document {
+  gap: 0;
+  align-items: flex-end;
+}</style>

package/dist/ui/tabs/cmp.tabs.svelte.d.ts

@@ -0,0 +1,73 @@
+import type { Tab, TabsSize, TabsVariant } from './types';
+declare function $$render<T>(): {
+    props: {
+        value: T;
+        /** `NoInfer<T>` ensures `T` narrows from `value` only; inline tab literals type-check against the value's T without widening — no `as const` needed at callsites. */
+        tabs: Tab<NoInfer<T>>[];
+        /** @default 'default' */
+        variant?: TabsVariant;
+        /** @default 'md' */
+        size?: TabsSize;
+        /** Equality for object T values. @default reference equality (`===`) */
+        compare?: (a: T, b: T) => boolean;
+        on?: {
+            change?: (value: T) => void;
+            /** Providing this renders a close affordance on each non-disabled tab (works in any variant). */
+            close?: (value: T) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Tabs — header strip for switching between content panels. Panel rendering is consumer-controlled
+ * (switch on the active `value`). Three visual variants:
+ *
+ * - **`default`**: underline — a 2px accent bar travels under the active tab; the strip has a bottom border.
+ * - **`pills`**: filled — the active tab lifts as a card on an inset tray.
+ * - **`document`**: browser-style tabs — flush, rounded-top; the active tab background matches the canvas so it reads as continuous with the content below.
+ *
+ * Providing `on.close` renders a close affordance on each non-disabled tab (works in any variant).
+ * Each tab carries an optional `disabled` flag (non-interactive). For navigation, not single-choice
+ * form input — use `SegmentedControl` for the latter (it's a `radiogroup`; this is a `tablist`).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--tabs--height` | Tab height | per size (28 / 36 px) |
+ * | `--sc-kit--tabs--font-size` | Tab label font size | per size |
+ * | `--sc-kit--tabs--font-weight` | Tab label font weight | per size (sm: regular / md: medium) |
+ * | `--sc-kit--tabs--padding-inline` | Per-tab horizontal padding | per size (10 / 14 px) |
+ * | `--sc-kit--tabs--radius` | Tab radius (pills) / tray radius | `--sc-kit--radius--sm` / `--sc-kit--radius--md` |
+ * | `--sc-kit--tabs--color` | Default tab text color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--tabs--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--tabs--color--active` | Active tab text color | default: `--sc-kit--color--accent`, pills/document: `--sc-kit--color--text--primary` |
+ * | `--sc-kit--tabs--color--disabled` | Disabled tab text color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--tabs--accent` | Underline bar color (default variant) | `--sc-kit--color--accent` |
+ * | `--sc-kit--tabs--border-color` | Bottom border color (default variant) | `--sc-kit--color--border` |
+ * | `--sc-kit--tabs--pills--background` | Inset tray background (pills variant) | `--sc-kit--color--bg--active` |
+ * | `--sc-kit--tabs--pills--background--active` | Active tab background (pills variant) | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--tabs--pills--shadow--active` | Active tab lift shadow (pills variant) | `--sc-kit--shadow--sm` |
+ * | `--sc-kit--tabs--document--background` | Inactive tab background (document variant) | `neutral-200` / `dark-500` |
+ * | `--sc-kit--tabs--document--background--active` | Active tab background (document variant) — matches the canvas | `--sc-kit--color--bg--app` |
+ * | `--sc-kit--tabs--document--background--hover` | Inactive tab hover background (document variant) | `--sc-kit--color--bg--hover` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

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

@@ -0,0 +1,2 @@
+export { default as Tabs } from './cmp.tabs.svelte';
+export type { Tab } from './types';

package/dist/ui/tabs/index.js

@@ -0,0 +1 @@
+export { default as Tabs } from './cmp.tabs.svelte';

package/dist/ui/tabs/tab.svelte

@@ -0,0 +1,169 @@
+<script lang="ts" generics="T">import { IconSlot } from '../icon';
+import { TabsLocalization } from './tabs-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
+const { tab, variant, size, active, on } = $props();
+const localization = new TabsLocalization();
+const closable = $derived(!!on?.close && !tab.disabled);
+const handleClick = () => {
+    if (tab.disabled || active) {
+        return;
+    }
+    on?.select?.(tab.value);
+};
+const handleClose = (event) => {
+    event.stopPropagation();
+    on?.close?.(tab.value);
+};
+const handleCloseKeydown = (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        event.stopPropagation();
+        on?.close?.(tab.value);
+    }
+};
+</script>
+
+<button
+  type="button"
+  class="tab tab--{variant} tab--{size}"
+  class:tab--disabled={tab.disabled}
+  class:tab--hoverable={!active && !tab.disabled}
+  class:tab--default-active={variant === 'default' && active}
+  class:tab--pills-active={variant === 'pills' && active}
+  class:tab--document-active={variant === 'document' && active}
+  class:tab--document-hoverable={variant === 'document' && !active && !tab.disabled}
+  role="tab"
+  aria-selected={active}
+  disabled={tab.disabled}
+  onclick={handleClick}>
+  <span class="tab__label">{tab.label}</span>
+  {#if closable}
+    <span class="tab__close" role="button" tabindex="0" aria-label={localization.close} onclick={handleClose} onkeydown={handleCloseKeydown}>
+      <IconSlot icon={IconDismiss} size="sm" />
+    </span>
+  {/if}
+</button>
+
+<style>.tab {
+  --_tab--height: var(--sc-kit--tabs--height, 2.25rem);
+  --_tab--font-size: var(--sc-kit--tabs--font-size, var(--sc-kit--font-size--md));
+  --_tab--font-weight: var(--sc-kit--tabs--font-weight, var(--sc-kit--font-weight--medium));
+  --_tab--padding-inline: var(--sc-kit--tabs--padding-inline, 0.875rem);
+  --_tab--radius: var(--sc-kit--tabs--radius, var(--sc-kit--radius--sm));
+  --_tab--color: var(--sc-kit--tabs--color, var(--sc-kit--color--text--secondary));
+  --_tab--color-hover: var(--sc-kit--tabs--color--hover, var(--sc-kit--color--text--primary));
+  --_tab--color-active: var(--sc-kit--tabs--color--active, var(--_tab--color-active-default));
+  --_tab--color-disabled: var(--sc-kit--tabs--color--disabled, var(--sc-kit--color--text--muted));
+  --_tab--accent: var(--sc-kit--tabs--accent, var(--sc-kit--color--accent));
+  --_tab--pills-background-active: var(--sc-kit--tabs--pills--background--active, var(--sc-kit--color--bg--panel));
+  --_tab--pills-shadow-active: var(--sc-kit--tabs--pills--shadow--active, var(--sc-kit--shadow--sm));
+  --_tab--document-background: var(--sc-kit--tabs--document--background, light-dark(#e5e7eb, #272727));
+  --_tab--document-background-active: var(--sc-kit--tabs--document--background--active, var(--sc-kit--color--bg--app));
+  --_tab--document-background-hover: var(--sc-kit--tabs--document--background--hover, var(--sc-kit--color--bg--hover));
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--_tab--height);
+  padding: 0 var(--_tab--padding-inline);
+  background: transparent;
+  border: none;
+  border-radius: var(--_tab--radius);
+  color: var(--_tab--color);
+  font-family: inherit;
+  font-size: var(--_tab--font-size);
+  font-weight: var(--_tab--font-weight);
+  line-height: var(--sc-kit--leading--tight);
+  cursor: pointer;
+  white-space: nowrap;
+  min-width: 0;
+  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.tab--sm {
+  --sc-kit--tabs--height: 1.75rem;
+  --sc-kit--tabs--font-size: var(--sc-kit--font-size--sm);
+  --sc-kit--tabs--font-weight: var(--sc-kit--font-weight--regular);
+  --sc-kit--tabs--padding-inline: 0.625rem;
+}
+.tab--md {
+  --sc-kit--tabs--height: 2.25rem;
+  --sc-kit--tabs--font-size: var(--sc-kit--font-size--md);
+  --sc-kit--tabs--font-weight: var(--sc-kit--font-weight--medium);
+  --sc-kit--tabs--padding-inline: 0.875rem;
+}
+.tab--hoverable:hover {
+  color: var(--_tab--color-hover);
+}
+.tab--disabled {
+  color: var(--_tab--color-disabled);
+  cursor: default;
+}
+.tab--default {
+  --_tab--color-active-default: var(--_tab--accent);
+  border-radius: 0;
+}
+.tab--default-active {
+  color: var(--_tab--color-active);
+}
+.tab--default-active::after {
+  content: "";
+  position: absolute;
+  left: var(--_tab--padding-inline);
+  right: var(--_tab--padding-inline);
+  bottom: -1px;
+  height: 2px;
+  background: var(--_tab--accent);
+  border-radius: 2px;
+}
+.tab--pills {
+  --_tab--color-active-default: var(--sc-kit--color--text--primary);
+}
+.tab--pills-active {
+  color: var(--_tab--color-active);
+  background: var(--_tab--pills-background-active);
+  box-shadow: var(--_tab--pills-shadow-active);
+}
+.tab--document {
+  --_tab--color-active-default: var(--sc-kit--color--text--primary);
+  --_tab--height: 2rem;
+  --_tab--padding-inline: 0.75rem;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  min-width: 7rem;
+  background: var(--_tab--document-background);
+  border-radius: 0.25rem 0.5rem 0 0;
+}
+.tab--document-hoverable:hover {
+  background: var(--_tab--document-background-hover);
+}
+.tab--document-active {
+  color: var(--_tab--color-active);
+  background: var(--_tab--document-background-active);
+}
+.tab:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
+.tab__label {
+  display: inline-block;
+  max-width: 100%;
+}
+.tab__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 0.125rem;
+  color: var(--sc-kit--color--text--secondary);
+  border-radius: var(--sc-kit--radius--sm);
+  cursor: pointer;
+  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.tab__close:hover {
+  color: var(--sc-kit--color--text--primary);
+}
+.tab__close:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}</style>

package/dist/ui/tabs/tab.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Tab, TabsSize, TabsVariant } from './types';
+declare function $$render<T>(): {
+    props: {
+        tab: Tab<T>;
+        variant: TabsVariant;
+        size: TabsSize;
+        active: boolean;
+        on?: {
+            select?: (value: T) => void;
+            close?: (value: T) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Tab: $$IsomorphicComponent;
+type Tab<T> = InstanceType<typeof Tab<T>>;
+export default Tab;

package/dist/ui/tabs/tabs-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class TabsLocalization {
+    get close(): string;
+}

package/dist/ui/tabs/tabs-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    close: {
+        en: 'Close tab',
+        no: 'Lukk fane'
+    }
+};
+export class TabsLocalization {
+    get close() {
+        return loc.close[AppLocale.current];
+    }
+}

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

@@ -0,0 +1,8 @@
+export type TabsVariant = 'default' | 'pills' | 'document';
+export type TabsSize = 'sm' | 'md';
+export type Tab<TValue = unknown> = {
+    value: TValue;
+    label: string;
+    /** Non-interactive — click does nothing. */
+    disabled?: boolean;
+};

package/dist/ui/tabs/types.js

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