@streamscloud/kit 0.0.1-1770364570820 → 0.0.1-1770761136792

package/dist/ui/button/resources/button-base.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">let { type = 'button', disabled = false, autofocus = false, on, children } = $props();
+let buttonRef;
+$effect(() => {
+    if (autofocus) {
+        buttonRef.focus();
+    }
+});
+export {};
+</script>
+
+<button class="button" disabled={disabled} type={type} bind:this={buttonRef} onclick={(e) => on?.click?.(e)}>
+  <span class="button__text">
+    {@render children()}
+  </span>
+</button>
+
+<style>.button {
+  --_button--font--size: var(--button--font--size, 1rem);
+  --_button--font--color: var(--button--font--color, black);
+  --_button--font--color--active: var(--button--font--color--active, var(--_button--font--color));
+  --_button--font--color--disabled: var(--button--font--color--disabled, var(--_button--font--color));
+  --_button--font-weight: var(--button--font-weight, 400);
+  --_button--text--font-size: var(--button--text--font-size, 0.75em);
+  --_button--icon--font-size: var(--button--icon--font-size, 1em);
+  --_button--justify-content: var(--button--justify-content, center);
+  --_button--background: var(--button--background, white);
+  --_button--background--hover: var(--button--background--hover, var(--_button--background));
+  --_button--background--active: var(--button--background--active, var(--_button--background));
+  --_button--background--disabled: var(--button--background--disabled, var(--_button--background));
+  --_button--border: var(--button--border, none);
+  --_button--border--disabled: var(--button--border--disabled, var(--_button--border));
+  --_button--border-radius: var(--button--border-radius, 0.25em);
+  --_button--padding--vertical: var(--button--padding--vertical, 0);
+  --_button--padding--horizontal: var(--button--padding--horizontal, 1em);
+  --_button--min-width: var(--button--min-width, 0);
+  --_button--width: var(--button--width, auto);
+  --_button--height: var(--button--height, 2em);
+  --_button--box-shadow: var(--button--box-shadow, none);
+  font-size: var(--_button--font--size);
+  font-weight: var(--_button--font-weight);
+  padding: var(--_button--padding--vertical) var(--_button--padding--horizontal);
+  color: var(--_button--font--color);
+  background: var(--_button--background);
+  box-shadow: var(--_button--box-shadow);
+  border: var(--_button--border);
+  border-radius: var(--_button--border-radius);
+  min-width: var(--_button--min-width);
+  width: var(--_button--width);
+  max-width: 100%;
+  height: var(--_button--height);
+  outline: none;
+  display: inline-flex;
+  justify-content: var(--_button--justify-content);
+  align-items: center;
+  vertical-align: middle;
+  transition: background-color linear 0.2s, color linear 0.2s, border-color linear 0.2s, filter linear 0.2s;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.button__text {
+  width: 100%;
+  text-align: center;
+  font-size: var(--_button--text--font-size);
+  --icon-text--global--font-size: 1rem;
+  --icon-text--text--font-size: var(--_button--text--font-size);
+  --icon-text--icon--font-size: var(--_button--icon--font-size);
+  --icon-text--justify-content: var(--_button--justify-content);
+}
+.button:not(:disabled):hover {
+  background: var(--_button--background--hover);
+}
+.button:not(:disabled):active {
+  background: var(--_button--background--active);
+  color: var(--_button--font--color--active);
+}
+.button:disabled {
+  cursor: default;
+  background: var(--_button--background--disabled);
+  border: var(--_button--border--disabled);
+  color: var(--_button--font--color--disabled);
+}</style>

package/dist/ui/button/resources/button-base.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    autofocus?: boolean;
+    on?: {
+        click?: (e: MouseEvent) => void;
+    };
+    children: Snippet;
+};
+declare const ButtonBase: import("svelte").Component<Props, {}, "">;
+type ButtonBase = ReturnType<typeof ButtonBase>;
+export default ButtonBase;

package/dist/ui/button/resources/button-theme.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">let { variant = undefined, size = 'standard', children } = $props();
+export {};
+</script>
+
+<div
+  class="button-theme"
+  class:button-theme--standard={variant === 'standard'}
+  class:button-theme--primary={variant === 'primary'}
+  class:button-theme--alert={variant === 'alert'}
+  class:button-theme--warning={variant === 'warning'}
+  class:button-theme--white={variant === 'white'}
+  class:button-theme--gray={variant === 'gray'}
+  class:button-theme--green={variant === 'green'}
+  class:button-theme--black={variant === 'black'}
+  class:button-theme--text-only={variant === 'text-only'}
+  class:button-theme--transparent-success={variant === 'transparent-success'}
+  class:button-theme--transparent-primary={variant === 'transparent-primary'}
+  class:button-theme--transparent-gray={variant === 'transparent-gray'}
+  class:button-theme--transparent-white={variant === 'transparent-white'}
+  class:button-theme--transparent-warning={variant === 'transparent-warning'}
+  class:button-theme--transparent-destructive={variant === 'transparent-destructive'}
+  class:button-theme--size-standard={size === 'standard'}
+  class:button-theme--size-large={size === 'large'}
+  class:button-theme--size-small={size === 'small'}>
+  {@render children()}
+</div>
+
+<style>.button-theme {
+  display: contents;
+}
+.button-theme--primary {
+  --button--font--color: var(--button--primary--font--color, #ffffff);
+  --button--font--color--active: var(--button--primary--font--color--active, #ffffff);
+  --button--font--color--disabled: var(--button--primary--font--color--disabled, #ffffff);
+  --button--background: var(--button--primary--background, #144ab0);
+  --button--background--hover: var(--button--primary--background--hover, #1244a0);
+  --button--background--active: var(--button--primary--background--active, #103a89);
+  --button--background--disabled: var(--button--primary--background--disabled, #91b3f3);
+  --button--border: var(--button--primary--border, none);
+  --button--border--disabled: var(--button--primary--border--disabled, none);
+  --button--box-shadow: var(--button--primary--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
+}
+.button-theme--standard {
+  --button--font--color: var(--button--standard--font--color, light-dark(#2e2e2e, #ffffff));
+  --button--font--color--active: var(--button--standard--font--color--active, light-dark(#2e2e2e, #ffffff));
+  --button--font--color--disabled: var(--button--standard--font--color--disabled, light-dark(#2e2e2e, #ffffff));
+  --button--background: var(--button--standard--background, light-dark(#ffffff, #111827));
+  --button--background--hover: var(--button--standard--background--hover, light-dark(#f9fafb, #1f2937));
+  --button--background--active: var(--button--standard--background--active, light-dark(#f2f2f3, #374151));
+  --button--background--disabled: var(--button--standard--background--disabled, light-dark(#f2f2f3, #374151));
+  --button--border: var(--button--standard--border, 1px solid light-dark(#e5e7eb, #4b5563));
+  --button--border--disabled: var(--button--standard--border--disabled, 1px solid light-dark(#e5e7eb, #4b5563));
+  --button--box-shadow: var(--button--standard--box-shadow, 0px 3px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.3)) inset);
+}
+.button-theme--white {
+  --button--font--color: var(--button--white--font--color, light-dark(#2e2e2e, #ffffff));
+  --button--font--color--active: var(--button--white--font--color--active, light-dark(#2e2e2e, #ffffff));
+  --button--font--color--disabled: var(--button--white--font--color--disabled, light-dark(#2e2e2e, #ffffff));
+  --button--background: var(--button--white--background, light-dark(#ffffff, #111827));
+  --button--background--hover: var(--button--white--background--hover, light-dark(#f9fafb, #1f2937));
+  --button--background--active: var(--button--white--background--active, light-dark(#f2f2f3, #374151));
+  --button--background--disabled: var(--button--white--background--disabled, light-dark(#f2f2f3, #374151));
+  --button--border: var(--button--white--border, none);
+  --button--border--disabled: var(--button--white--border--disabled, none);
+  --button--box-shadow: var(--button--white--box-shadow, 0px 3px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.3)) inset);
+}
+.button-theme--gray {
+  --button--font--color: var(--button--gray--font--color, light-dark(#2e2e2e, #ffffff));
+  --button--font--color--active: var(--button--gray--font--color--active, light-dark(#2e2e2e, #ffffff));
+  --button--font--color--disabled: var(--button--gray--font--color--disabled, light-dark(#2e2e2e, #ffffff));
+  --button--background: var(--button--gray--background, light-dark(#f2f2f3, #374151));
+  --button--background--hover: var(--button--gray--background--hover, light-dark(#f9fafb, #1f2937));
+  --button--background--active: var(--button--gray--background--active, light-dark(#f2f2f3, #374151));
+  --button--background--disabled: var(--button--gray--background--disabled, light-dark(#f2f2f3, #374151));
+  --button--border: var(--button--gray--border, 1px solid light-dark(#e5e7eb, #4b5563));
+  --button--border--disabled: var(--button--gray--border--disabled, 1px solid light-dark(#e5e7eb, #4b5563));
+  --button--box-shadow: var(--button--gray--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
+}
+.button-theme--green {
+  --button--font--color: var(--button--green--font--color, light-dark(#0cce6b, #ffffff));
+  --button--font--color--active: var(--button--green--font--color--active, light-dark(#0cce6b, #ffffff));
+  --button--font--color--disabled: var(--button--green--font--color--disabled, light-dark(#0cce6b, #ffffff));
+  --button--background: var(--button--green--background, light-dark(#d4fce7, #374151));
+  --button--background--hover: var(--button--green--background--hover, light-dark(#088745, #1f2937));
+  --button--background--active: var(--button--green--background--active, light-dark(#088745, #374151));
+  --button--background--disabled: var(--button--green--background--disabled, light-dark(#ffffff, #374151));
+  --button--border: var(--button--green--border, 1px solid light-dark(#0cce6b, #4b5563));
+  --button--border--disabled: var(--button--green--border--disabled, 1px solid light-dark(#0cce6b, #4b5563));
+  --button--box-shadow: var(--button--green--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
+}
+.button-theme--black {
+  --button--font--color: var(--button--black--font--color, light-dark(#ffffff, #2e2e2e));
+  --button--font--color--active: var(--button--black--font--color--active, light-dark(#ffffff, #2e2e2e));
+  --button--font--color--disabled: var(--button--black--font--color--disabled, light-dark(#ffffff, #2e2e2e));
+  --button--background: var(--button--black--background, light-dark(#1c1c1c, #fafafa));
+  --button--background--hover: var(--button--black--background--hover, light-dark(#1f2937, #f2f2f3));
+  --button--background--active: var(--button--black--background--active, light-dark(#374151, #e5e7eb));
+  --button--background--disabled: var(--button--black--background--disabled, light-dark(#374151, #e5e7eb));
+  --button--border: var(--button--black--border, none);
+  --button--border--disabled: var(--button--black--border--disabled, none);
+  --button--box-shadow: var(--button--black--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
+}
+.button-theme--alert {
+  --button--font--color: var(--button--alert--font--color, #ffffff);
+  --button--font--color--active: var(--button--alert--font--color--active, #ffffff);
+  --button--font--color--disabled: var(--button--alert--font--color--disabled, #ffffff);
+  --button--background: var(--button--alert--background, #e71d36);
+  --button--background--hover: var(--button--alert--background--hover, #d4172d);
+  --button--background--active: var(--button--alert--background--active, #b81427);
+  --button--background--disabled: var(--button--alert--background--disabled, #f6a7b1);
+  --button--border: var(--button--alert--border, none);
+  --button--border--disabled: var(--button--alert--border--disabled, none);
+  --button--box-shadow: var(--button--alert--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
+}
+.button-theme--warning {
+  --button--font--color: var(--button--warning--font--color, #ffffff);
+  --button--font--color--active: var(--button--warning--font--color--active, #ffffff);
+  --button--font--color--disabled: var(--button--warning--font--color--disabled, #ffffff);
+  --button--background: var(--button--warning--background, #ffa62b);
+  --button--background--hover: var(--button--warning--background--hover, #d97706);
+  --button--background--active: var(--button--warning--background--active, #b45309);
+  --button--background--disabled: var(--button--warning--background--disabled, #fcd34d);
+  --button--border: var(--button--warning--border, none);
+  --button--border--disabled: var(--button--warning--border--disabled, none);
+  --button--box-shadow: var(--button--warning--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
+}
+.button-theme--text-only {
+  --button--font--color: var(--button--text-only--font--color, light-dark(#2e2e2e, #ffffff));
+  --button--font--color--active: var(--button--text-only--font--color--active, light-dark(#2e2e2e, #ffffff));
+  --button--font--color--disabled: var(--button--text-only--font--color--disabled, light-dark(#2e2e2e, #ffffff));
+  --button--background: var(--button--text-only--background, transparent);
+  --button--background--hover: var(--button--text-only--background--hover, light-dark(#f2f2f3, #111827));
+  --button--background--active: var(--button--text-only--background--active, light-dark(#e5e7eb, #1f2937));
+  --button--background--disabled: var(--button--text-only--background--disabled, transparent);
+  --button--border: var(--button--text-only--border, none);
+  --button--border--disabled: var(--button--text-only--border--disabled, none);
+  --button--box-shadow: var(--button--text-only--box-shadow, none);
+}
+.button-theme--transparent-success {
+  --button--font--color: var(--button--transparent-success--font--color, #0cce6b);
+  --button--font--color--active: var(--button--transparent-success--font--color--active, #0cce6b);
+  --button--font--color--disabled: var(--button--transparent-success--font--color--disabled, #39f393);
+  --button--background: var(--button--transparent-success--background, #ecfef4);
+  --button--background--hover: var(--button--transparent-success--background--hover, #ecfef4);
+  --button--background--active: var(--button--transparent-success--background--active, #d4fce7);
+  --button--background--disabled: var(--button--transparent-success--background--disabled, transparent);
+  --button--border: var(--button--transparent-success--border, 1px solid #0cce6b);
+  --button--border--disabled: var(--button--transparent-success--border--disabled, 1px solid #39f393);
+  --button--box-shadow: var(--button--transparent-success--box-shadow, none);
+}
+.button-theme--transparent-primary {
+  --button--font--color: var(--button--transparent-primary--font--color, #144ab0);
+  --button--font--color--active: var(--button--transparent-primary--font--color--active, #144ab0);
+  --button--font--color--disabled: var(--button--transparent-primary--font--color--disabled, #91b3f3);
+  --button--background: var(--button--transparent-primary--background, #f1f6fd);
+  --button--background--hover: var(--button--transparent-primary--background--hover, #f1f6fd);
+  --button--background--active: var(--button--transparent-primary--background--active, #dfe9fb);
+  --button--background--disabled: var(--button--transparent-primary--background--disabled, transparent);
+  --button--border: var(--button--transparent-primary--border, 1px solid #144ab0);
+  --button--border--disabled: var(--button--transparent-primary--border--disabled, 1px solid #91b3f3);
+  --button--box-shadow: var(--button--transparent-primary--box-shadow, none);
+}
+.button-theme--transparent-white {
+  --button--font--color: var(--button--transparent-white--font--color, #ffffff);
+  --button--font--color--active: var(--button--transparent-white--font--color--active, #ffffff);
+  --button--font--color--disabled: var(--button--transparent-white--font--color--disabled, #ffffff);
+  --button--background: var(--button--transparent-white--background, transparent);
+  --button--background--hover: var(--button--transparent-white--background--hover, transparent);
+  --button--background--active: var(--button--transparent-white--background--active, transparent);
+  --button--background--disabled: var(--button--transparent-white--background--disabled, transparent);
+  --button--border: var(--button--transparent-white--border, 1px solid #ffffff);
+  --button--border--disabled: var(--button--transparent-white--border--disabled, 1px solid #ffffff);
+  --button--box-shadow: var(--button--transparent-white--box-shadow, none);
+}
+.button-theme--transparent-gray {
+  --button--font--color: var(--button--transparent-gray--font--color, light-dark(#6b7280, #e5e7eb));
+  --button--font--color--active: var(
+    --button--transparent-gray--font--color--active,
+    light-dark(#6b7280, #e5e7eb)
+  );
+  --button--font--color--disabled: var(
+    --button--transparent-gray--font--color--disabled,
+    light-dark(#6b7280, #e5e7eb)
+  );
+  --button--background: var(--button--transparent-gray--background, light-dark(#f9fafb, #1f2937));
+  --button--background--hover: var(--button--transparent-gray--background--hover, light-dark(#f9fafb, #1f2937));
+  --button--background--active: var(--button--transparent-gray--background--active, light-dark(#f2f2f3, #374151));
+  --button--background--disabled: var(--button--transparent-gray--background--disabled, transparent);
+  --button--border: var(--button--transparent-gray--border, 1px solid light-dark(#6b7280, #e5e7eb));
+  --button--border--disabled: var(
+    --button--transparent-gray--border--disabled,
+    1px solid light-dark(#6b7280, #e5e7eb)
+  );
+  --button--box-shadow: var(--button--transparent-gray--box-shadow, none);
+}
+.button-theme--transparent-warning {
+  --button--font--color: var(--button--transparent-warning--font--color, #ffa62b);
+  --button--font--color--active: var(--button--transparent-warning--font--color--active, #ffa62b);
+  --button--font--color--disabled: var(--button--transparent-warning--font--color--disabled, #fcd34d);
+  --button--background: var(--button--transparent-warning--background, #fffbeb);
+  --button--background--hover: var(--button--transparent-warning--background--hover, #fffbeb);
+  --button--background--active: var(--button--transparent-warning--background--active, #fef3c7);
+  --button--background--disabled: var(--button--transparent-warning--background--disabled, transparent);
+  --button--border: var(--button--transparent-warning--border, 1px solid #ffa62b);
+  --button--border--disabled: var(--button--transparent-warning--border--disabled, 1px solid #fcd34d);
+  --button--box-shadow: var(--button--transparent-warning--box-shadow, none);
+}
+.button-theme--transparent-destructive {
+  --button--font--color: var(--button--transparent-destructive--font--color, #e71d36);
+  --button--font--color--active: var(--button--transparent-destructive--font--color--active, #e71d36);
+  --button--font--color--disabled: var(--button--transparent-destructive--font--color--disabled, #f6a7b1);
+  --button--background: var(--button--transparent-destructive--background, #fef1f3);
+  --button--background--hover: var(--button--transparent-destructive--background--hover, #fef1f3);
+  --button--background--active: var(--button--transparent-destructive--background--active, #fde8ea);
+  --button--background--disabled: var(--button--transparent-destructive--background--disabled, transparent);
+  --button--border: var(--button--transparent-destructive--border, 1px solid #e71d36);
+  --button--border--disabled: var(--button--transparent-destructive--border--disabled, 1px solid #f6a7b1);
+  --button--box-shadow: var(--button--transparent-destructive--box-shadow, none);
+}
+.button-theme--size-standard {
+  --button--height: 2em;
+  --button--text--font-size: 0.75em;
+}
+.button-theme--size-large {
+  --button--height: 3em;
+  --button--font-weight: 500;
+  --icon--stroke-width: 0.4;
+  --button--text--font-size: 0.9375em;
+}
+.button-theme--size-small {
+  --button--height: 1.5em;
+  --button--text--font-size: 0.625em;
+}</style>

package/dist/ui/button/resources/button-theme.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ButtonSize, ButtonVariant } from './types';
+import type { Snippet } from 'svelte';
+type Props = {
+    variant?: ButtonVariant | null;
+    size?: ButtonSize | null;
+    children: Snippet;
+};
+declare const ButtonTheme: import("svelte").Component<Props, {}, "">;
+type ButtonTheme = ReturnType<typeof ButtonTheme>;
+export default ButtonTheme;

package/dist/ui/button/resources/types.d.ts

@@ -0,0 +1,2 @@
+export type ButtonVariant = 'primary' | 'standard' | 'alert' | 'warning' | 'white' | 'gray' | 'green' | 'black' | 'text-only' | 'transparent-success' | 'transparent-primary' | 'transparent-gray' | 'transparent-white' | 'transparent-warning' | 'transparent-destructive';
+export type ButtonSize = 'standard' | 'large' | 'small';

package/dist/ui/button/resources/types.js

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

package/dist/ui/dialog/cmp.dialog-button.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import { default as Button } from '../button/cmp.button.svelte';
+let { type = 'button', disabled = false, autofocus = false, variant = 'primary', on, children } = $props();
+</script>
+
+<div class="dialog-button">
+  <Button type={type} disabled={disabled} autofocus={autofocus} variant={variant} on={on}>
+    {@render children()}
+  </Button>
+</div>
+
+<style>.dialog-button {
+  --button--min-width: 8em;
+}</style>

package/dist/ui/dialog/cmp.dialog-button.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ButtonVariant } from '../button/resources/types';
+import type { Snippet } from 'svelte';
+type Props = {
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    autofocus?: boolean;
+    variant?: ButtonVariant;
+    on?: {
+        click?: (e: MouseEvent) => void;
+    };
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/dialog/cmp.dialog-cancel-button.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import { default as Button } from '../button/cmp.button.svelte';
+let { disabled = false, on, children } = $props();
+</script>
+
+<div class="dialog-cancel-button">
+  <Button type="button" disabled={disabled} variant="standard" on={on}>
+    {@render children()}
+  </Button>
+</div>
+
+<style>.dialog-cancel-button {
+  --button--min-width: 8em;
+}</style>

package/dist/ui/dialog/cmp.dialog-cancel-button.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    disabled?: boolean;
+    on?: {
+        click?: (e: MouseEvent) => void;
+    };
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/dialog/cmp.dialog-close-button.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" generics="TResult = void, TCancelResult = void">import { default as Icon } from '../icon/cmp.icon.svelte';
+import IconDismiss24Filled from '@fluentui/svg-icons/icons/dismiss_24_filled.svg?raw';
+let { controller } = $props();
+const handleClick = () => {
+    controller.cancel();
+};
+</script>
+
+<button type="button" class="dialog-close-button" onclick={handleClick} aria-label="Close">
+  <Icon src={IconDismiss24Filled} />
+</button>
+
+<style>.dialog-close-button {
+  --_dialog-close-button--color: var(--dialog-close-button--color, light-dark(#6b7280, #d1d5db));
+  --icon--size: 1.5rem;
+  color: var(--_dialog-close-button--color);
+}</style>

package/dist/ui/dialog/cmp.dialog-close-button.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { DialogController } from './dialog-controller';
+declare function $$render<TResult = void, TCancelResult = void>(): {
+    props: {
+        controller: DialogController<TResult, TCancelResult>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TResult = void, TCancelResult = void> {
+    props(): ReturnType<typeof $$render<TResult, TCancelResult>>['props'];
+    events(): ReturnType<typeof $$render<TResult, TCancelResult>>['events'];
+    slots(): ReturnType<typeof $$render<TResult, TCancelResult>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TResult = void, TCancelResult = void>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TResult, TCancelResult>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TResult, TCancelResult>['props']>, ReturnType<__sveltets_Render<TResult, TCancelResult>['events']>, ReturnType<__sveltets_Render<TResult, TCancelResult>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TResult, TCancelResult>['bindings']>;
+    } & ReturnType<__sveltets_Render<TResult, TCancelResult>['exports']>;
+    <TResult = void, TCancelResult = void>(internal: unknown, props: ReturnType<__sveltets_Render<TResult, TCancelResult>['props']> & {}): ReturnType<__sveltets_Render<TResult, TCancelResult>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<TResult = void, TCancelResult = void> = InstanceType<typeof Cmp<TResult, TCancelResult>>;
+export default Cmp;

package/dist/ui/dialog/cmp.dialog-container.svelte

@@ -0,0 +1,183 @@
+<script lang="ts" generics="TResult = void, TCancelResult = void, TData = void">import { Dialogs } from './dialogs.svelte';
+import { DialogPosition, DialogSize } from './types.svelte';
+import { untrack } from 'svelte';
+let { dialog } = $props();
+let dialogElement = $state();
+const isActive = $derived(Dialogs.active?.id === dialog.id);
+const canDismiss = $derived(!dialog.controller.settings.nonCancelable && dialog.controller.settings.closeOnEsc);
+const DialogView = $derived(dialog.view);
+// TEMP: Workaround for Chromium bug where preventDefault() on cancel event
+// doesn't always prevent dialog close. Using keydown to block ESC earlier.
+// Remove when browser bug is fixed.
+// See: https://issues.chromium.org/issues/41487622
+const handleKeydown = (event) => {
+    if (event.key !== /*@wc-ignore*/ 'Escape') {
+        return;
+    }
+    if (!canDismiss) {
+        event.preventDefault();
+    }
+};
+const handleCancel = (event) => {
+    event.preventDefault();
+    if (canDismiss) {
+        dialog.controller.cancel();
+    }
+};
+const handleBackdropClick = (event) => {
+    if (!dialog.controller.settings.closeOnClickOutside) {
+        return;
+    }
+    if (dialog.controller.settings.nonCancelable) {
+        return;
+    }
+    if (event.target === dialogElement) {
+        dialog.controller.cancel();
+    }
+};
+// Use $effect to ensure showModal() is called when dialog element changes (including HMR)
+$effect(() => {
+    if (dialogElement && !dialogElement.open) {
+        dialogElement.showModal();
+    }
+});
+$effect(() => {
+    const handleNavigateBack = () => {
+        Dialogs.closeAll();
+    };
+    const shouldTrack = untrack(() => Dialogs.count === 1);
+    if (shouldTrack) {
+        window.addEventListener('popstate', handleNavigateBack);
+    }
+    return () => {
+        if (shouldTrack) {
+            window.removeEventListener('popstate', handleNavigateBack);
+        }
+    };
+});
+const size = $derived(dialog.controller.containerSettings.size);
+const position = $derived(dialog.controller.containerSettings.position);
+const isCustomWidth = $derived(!Object.values(DialogSize).includes(size));
+const customWidth = $derived(isCustomWidth ? size : null);
+</script>
+
+<dialog
+  bind:this={dialogElement}
+  class="dialog-container"
+  class:dialog-container--inactive={!isActive}
+  class:dialog-container--size-small={size === DialogSize.Small}
+  class:dialog-container--size-medium={size === DialogSize.Medium}
+  class:dialog-container--size-default={size === DialogSize.Default}
+  class:dialog-container--size-large={size === DialogSize.Large}
+  class:dialog-container--size-fullhd={size === DialogSize.FullHD}
+  class:dialog-container--size-auto={size === DialogSize.Auto}
+  class:dialog-container--position-center={position === DialogPosition.Center}
+  class:dialog-container--position-center-top={position === DialogPosition.CenterTop}
+  class:dialog-container--position-full-screen={position === DialogPosition.FullScreen}
+  class:dialog-container--position-full-height={position === DialogPosition.FullHeight}
+  onkeydown={handleKeydown}
+  oncancel={handleCancel}
+  onclick={handleBackdropClick}
+  style:--_dialog-container--custom-width={customWidth}>
+  <div class="dialog-container__content">
+    <DialogView controller={dialog.controller} data={dialog.data as TData} />
+  </div>
+</dialog>
+
+<style>.dialog-container {
+  --_dialog-container--backdrop: var(--dialog-container--backdrop, light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.15)));
+  --_dialog-container--border-radius: var(--dialog-container--border-radius, 0.5rem);
+  --_dialog-container--max-width: var(--dialog-container--max-width, 64rem);
+  --_dialog-container--padding: var(--dialog-container--padding, 1rem);
+  --_dialog-container--scrollbar-thumb: var(--dialog-container--scrollbar-thumb, light-dark(#c1c1c1, #383838));
+  position: fixed;
+  inset: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  max-width: 100vw;
+  max-height: 100vh;
+  width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  padding: var(--_dialog-container--padding);
+  --_cross-browser-scrollbar--thumb-color: var(--_dialog-container--scrollbar-thumb);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.dialog-container::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.dialog-container::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.dialog-container::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .dialog-container {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+.dialog-container::backdrop {
+  background: var(--_dialog-container--backdrop);
+}
+.dialog-container--inactive::backdrop {
+  background: transparent;
+}
+
+.dialog-container--size-small {
+  --_dialog-container--max-width: 31.25rem;
+}
+.dialog-container--size-medium {
+  --_dialog-container--max-width: 48.75rem;
+}
+.dialog-container--size-default {
+  --_dialog-container--max-width: 64rem;
+}
+.dialog-container--size-large {
+  --_dialog-container--max-width: 80rem;
+}
+.dialog-container--size-fullhd {
+  --_dialog-container--max-width: 118.75rem;
+}
+.dialog-container--size-auto {
+  --_dialog-container--max-width: max-content;
+}
+.dialog-container--position-center {
+  justify-content: center;
+}
+.dialog-container--position-center-top {
+  justify-content: flex-start;
+}
+.dialog-container--position-full-screen {
+  --_dialog-container--padding: 0;
+  --_dialog-container--border-radius: 0;
+  --_dialog-container--max-width: 100%;
+  overflow: hidden;
+}
+.dialog-container--position-full-height {
+  --_dialog-container--padding: 0;
+  --_dialog-container--border-radius: 0;
+  overflow: hidden;
+}
+.dialog-container__content {
+  width: 100%;
+  max-width: var(--_dialog-container--custom-width, var(--_dialog-container--max-width));
+  border-radius: var(--_dialog-container--border-radius);
+  pointer-events: auto;
+}
+
+.dialog-container--position-full-screen .dialog-container__content,
+.dialog-container--position-full-height .dialog-container__content {
+  flex: 1;
+  min-height: 0;
+}</style>