@streamscloud/kit 0.1.11 → 0.1.12-1772032209109

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

@@ -1,6 +1,6 @@
 export { Dialogs } from './dialogs.svelte';
 export { DialogController } from './dialog-controller';
-export { DialogSize, DialogPosition, type DialogResult } from './types.svelte';
+export { DIALOG_SIZES, type DialogPosition, type DialogResult, type DialogSize } from './types.svelte';
 export { default as Dialog } from './cmp.dialog.svelte';
 export { default as DialogButton } from './cmp.dialog-button.svelte';
 export { default as DialogCancelButton } from './cmp.dialog-cancel-button.svelte';

package/dist/ui/dialog/index.js

@@ -1,6 +1,6 @@
 export { Dialogs } from './dialogs.svelte';
 export { DialogController } from './dialog-controller';
-export { DialogSize, DialogPosition } from './types.svelte';
+export { DIALOG_SIZES } from './types.svelte';
 export { default as Dialog } from './cmp.dialog.svelte';
 export { default as DialogButton } from './cmp.dialog-button.svelte';
 export { default as DialogCancelButton } from './cmp.dialog-cancel-button.svelte';

package/dist/ui/dialog/types.svelte.d.ts

@@ -1,17 +1,6 @@
-export declare enum DialogSize {
-    Small = "small",
-    Medium = "medium",
-    Default = "default",
-    Large = "large",
-    FullHD = "fullhd",
-    Auto = "auto"
-}
-export declare enum DialogPosition {
-    Center = "center",
-    CenterTop = "center-top",
-    FullScreen = "full-screen",
-    FullHeight = "full-height"
-}
+export type DialogSize = 'small' | 'medium' | 'default' | 'large' | 'fullhd' | 'auto';
+export type DialogPosition = 'center' | 'center-top' | 'full-screen' | 'full-height';
+export declare const DIALOG_SIZES: readonly DialogSize[];
 export declare class DialogSettings {
     closeOnClickOutside: boolean;
     closeOnEsc: boolean;

package/dist/ui/dialog/types.svelte.js

@@ -1,25 +1,10 @@
-export var DialogSize;
-(function (DialogSize) {
-    DialogSize["Small"] = "small";
-    DialogSize["Medium"] = "medium";
-    DialogSize["Default"] = "default";
-    DialogSize["Large"] = "large";
-    DialogSize["FullHD"] = "fullhd";
-    DialogSize["Auto"] = "auto";
-})(DialogSize || (DialogSize = {}));
-export var DialogPosition;
-(function (DialogPosition) {
-    DialogPosition["Center"] = "center";
-    DialogPosition["CenterTop"] = "center-top";
-    DialogPosition["FullScreen"] = "full-screen";
-    DialogPosition["FullHeight"] = "full-height";
-})(DialogPosition || (DialogPosition = {}));
+export const DIALOG_SIZES = ['small', 'medium', 'default', 'large', 'fullhd', 'auto'];
 export class DialogSettings {
     closeOnClickOutside = $state(false);
     closeOnEsc = $state(false);
     nonCancelable = $state(false);
 }
 export class DialogContainerSettings {
-    size = $state(DialogSize.Default);
-    position = $state(DialogPosition.CenterTop);
+    size = $state('default');
+    position = $state('center-top');
 }

package/dist/ui/form-group/cmp.form-group-label.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">let { withTooltip = false, children } = $props();
+export {};
+</script>
+
+<div class="form-group-label" class:form-group-label--with-tooltip={withTooltip}>
+  {@render children()}
+</div>
+
+<style>.form-group-label {
+  --_form-group--label--font-size: var(--sc-kit--form-group--label--font-size, 0.875rem);
+  --_form-group--label--font-weight: var(--sc-kit--form-group--label--font-weight, 400);
+  --_form-group--label--color: var(--sc-kit--form-group--label--color);
+  --_form-group--label--margin-bottom: var(--sc-kit--form-group--label--margin-bottom, 0.5rem);
+  font-size: var(--_form-group--label--font-size);
+  padding: 0;
+  margin-bottom: var(--_form-group--label--margin-bottom);
+  font-weight: var(--_form-group--label--font-weight);
+  display: block;
+  color: var(--_form-group--label--color);
+}
+.form-group-label--with-tooltip {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}</style>

package/dist/ui/form-group/cmp.form-group-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    withTooltip?: boolean;
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/form-group/cmp.form-group-note.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">let { children } = $props();
+export {};
+</script>
+
+<div class="form-group-note">
+  {@render children()}
+</div>
+
+<style>.form-group-note {
+  --_form-group--note--font-size: var(--sc-kit--form-group--note--font-size, 0.875rem);
+  --_form-group--note--font-weight: var(--sc-kit--form-group--note--font-weight, 300);
+  margin-top: 0.5rem;
+  color: #9ca3af;
+  font-size: var(--_form-group--note--font-size);
+  font-weight: var(--_form-group--note--font-weight);
+}</style>

package/dist/ui/form-group/cmp.form-group-note.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/form-group/cmp.form-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">let { noMargin = false, children } = $props();
+export {};
+</script>
+
+<div class="form-group" class:form-group--no-margin={noMargin}>
+  {@render children()}
+</div>
+
+<style>.form-group {
+  --_form-group--margin-bottom: var(--sc-kit--form-group--margin-bottom, 1.25rem);
+  display: block;
+  margin-bottom: var(--_form-group--margin-bottom);
+}
+.form-group--no-margin {
+  margin-bottom: 0;
+}</style>

package/dist/ui/form-group/cmp.form-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    noMargin?: boolean;
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/form-group/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FormGroup } from './cmp.form-group.svelte';
+export { default as FormGroupLabel } from './cmp.form-group-label.svelte';
+export { default as FormGroupNote } from './cmp.form-group-note.svelte';

package/dist/ui/form-group/index.js

@@ -0,0 +1,3 @@
+export { default as FormGroup } from './cmp.form-group.svelte';
+export { default as FormGroupLabel } from './cmp.form-group-label.svelte';
+export { default as FormGroupNote } from './cmp.form-group-note.svelte';

package/dist/ui/html-block/cmp.html-block.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">let { children } = $props();
+export {};
+</script>
+
+<div class="html-block">
+  {@render children()}
+</div>
+
+<style>.html-block {
+  display: contents;
+  word-break: break-word;
+  font-size: 0.875em;
+  line-height: 1.4;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h1) {
+  font-size: 1.5em;
+  line-height: 1.4;
+  font-weight: 600;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h2) {
+  font-size: 1.375em;
+  line-height: 1.4;
+  font-weight: 600;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h3) {
+  font-size: 1.25em;
+  line-height: 1.4;
+  font-weight: 600;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h4) {
+  font-size: 1.125em;
+  line-height: 1.4;
+  font-weight: 500;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h5) {
+  font-size: 1.0625em;
+  line-height: 1.4;
+  font-weight: 500;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h6) {
+  font-size: 1em;
+  line-height: 1.4;
+  font-weight: 500;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(a) {
+  font-size: 1em;
+  line-height: 1.4;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+  color: light-dark(#144ab0, #5a8dec);
+}
+.html-block :global(pre) {
+  font-family: monospace;
+  white-space: pre-wrap;
+  margin: 1em 0;
+  font-size: 1em;
+  line-height: 1;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(ul) :global(> li),
+.html-block :global(ol) :global(> li) {
+  list-style: inherit;
+  margin-left: 1em;
+  position: relative;
+  font-size: 1em;
+  line-height: 1.4;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(ol) {
+  list-style-type: decimal;
+}
+.html-block :global(ol) :global(> li > ol) {
+  list-style-type: lower-alpha;
+}
+.html-block :global(table) {
+  max-width: 100%;
+}
+.html-block :global(table),
+.html-block :global(tbody),
+.html-block :global(thead),
+.html-block :global(tr),
+.html-block :global(th),
+.html-block :global(td) {
+  border-width: initial;
+  border-style: inherit;
+  border-color: inherit;
+}
+.html-block :global(ul:not([style*='list-style-type'])),
+.html-block :global(ul:not([style*='list-style-type']) > li > ul:not([style*='list-style-type'])) {
+  list-style-type: none;
+}
+.html-block :global(ul:not([style*='list-style-type']) > li:before),
+.html-block :global(ul:not([style*='list-style-type']) > li > ul:not([style*='list-style-type']) > li:before) {
+  content: "-";
+  text-indent: -1em;
+  position: absolute;
+  font-weight: bold;
+}
+.html-block :global(ul[style*='list-style-type'] > li:before),
+.html-block :global(ul > li > ul[style*='list-style-type'] > li:before) {
+  content: none;
+}</style>

package/dist/ui/html-block/cmp.html-block.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/html-block/index.d.ts

@@ -0,0 +1 @@
+export { default as HtmlBlock } from './cmp.html-block.svelte';

package/dist/ui/html-block/index.js

@@ -0,0 +1 @@
+export { default as HtmlBlock } from './cmp.html-block.svelte';

package/dist/ui/media-viewer-dialog/cmp.media-viewer-dialog.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">import { DialogCloseButton } from '../dialog';
+import { Carousel } from '../player/carousel';
+import { default as MediaViewerItem } from './media-viewer-item.svelte';
+import { untrack } from 'svelte';
+const { controller, data } = $props();
+$effect(() => untrack(() => {
+    controller.updateSettings({ closeOnEsc: true, closeOnClickOutside: true });
+    controller.updateContainerSettings({ position: 'full-screen' });
+}));
+</script>
+
+<div class="media-viewer-dialog" style:--media-viewer-dialog--background--opacity={data.backgroundOpacity}>
+  <div class="media-viewer-dialog__close">
+    <DialogCloseButton controller={controller} />
+  </div>
+
+  <div class="media-viewer-dialog__content">
+    {#if data.items.length === 1}
+      <MediaViewerItem item={data.items[0]} />
+    {:else}
+      <Carousel items={data.items} initialIndex={data.index} mode="arrows-with-counts" on={{ indexChanged: () => {} }}>
+        {#snippet children(item)}
+          <MediaViewerItem item={item} />
+        {/snippet}
+      </Carousel>
+    {/if}
+  </div>
+</div>
+
+<style>.media-viewer-dialog {
+  --_media-viewer-dialog--background--opacity: var(--media-viewer-dialog--background--opacity, 0.6);
+  --sc-kit--dialog-close-button--color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, var(--_media-viewer-dialog--background--opacity));
+  position: relative;
+  padding: 0.625rem;
+}
+.media-viewer-dialog__close {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 10;
+}
+.media-viewer-dialog__content {
+  flex: 1;
+  min-height: 0;
+}</style>

package/dist/ui/media-viewer-dialog/cmp.media-viewer-dialog.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type DialogController } from '../dialog';
+import type { MediaViewerData } from './types';
+type Props = {
+    controller: DialogController;
+    data: MediaViewerData;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/media-viewer-dialog/index.d.ts

@@ -0,0 +1,13 @@
+import { type DialogResult } from '../dialog';
+import type { MediaViewerData } from './types';
+/**
+ * Opens a full-screen media viewer dialog for images and videos.
+ * Single item renders directly; multiple items display in a carousel with arrow navigation.
+ *
+ * ### Options
+ * - `items` — array of media items to display
+ * - `index` — zero-based index of the initially visible item
+ * - `backgroundOpacity` — backdrop opacity (default `0.6`)
+ */
+export declare const openMediaViewer: (data: MediaViewerData) => Promise<DialogResult<void>>;
+export type { MediaViewerData, MediaViewerItem, MediaViewerItemType } from './types';

package/dist/ui/media-viewer-dialog/index.js

@@ -0,0 +1,17 @@
+import { Dialogs } from '../dialog';
+import { default as MediaViewerDialog } from './cmp.media-viewer-dialog.svelte';
+/**
+ * Opens a full-screen media viewer dialog for images and videos.
+ * Single item renders directly; multiple items display in a carousel with arrow navigation.
+ *
+ * ### Options
+ * - `items` — array of media items to display
+ * - `index` — zero-based index of the initially visible item
+ * - `backgroundOpacity` — backdrop opacity (default `0.6`)
+ */
+export const openMediaViewer = (data) => {
+    return Dialogs.open({
+        view: MediaViewerDialog,
+        data
+    });
+};

package/dist/ui/media-viewer-dialog/media-viewer-item.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">import { Image } from '../image';
+import { Video } from '../video';
+const { item } = $props();
+let containerWidth = $state(0);
+let containerHeight = $state(0);
+const fittedSize = $derived.by(() => {
+    if (containerWidth === 0 || containerHeight === 0) {
+        return { width: 0, height: 0 };
+    }
+    const aspectRatio = item.width / item.height;
+    const containerRatio = containerWidth / containerHeight;
+    if (aspectRatio > containerRatio) {
+        const width = containerWidth;
+        const height = width / aspectRatio;
+        return { width, height };
+    }
+    const height = containerHeight;
+    const width = height * aspectRatio;
+    return { width, height };
+});
+const observeResize = (node) => {
+    const observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) {
+            containerWidth = entry.contentRect.width;
+            containerHeight = entry.contentRect.height;
+        }
+    });
+    observer.observe(node);
+    return {
+        destroy: () => observer.disconnect()
+    };
+};
+</script>
+
+<div class="media-viewer-item" use:observeResize>
+  {#if fittedSize.width > 0 && fittedSize.height > 0}
+    <div class="media-viewer-item__media" style:width="{fittedSize.width}px" style:height="{fittedSize.height}px">
+      {#if item.type === 'image'}
+        <Image src={item.url} alt="" />
+      {:else}
+        <Video src={item.url} poster={item.thumbnailUrl} autoplay="on-appearance" />
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>.media-viewer-item {
+  --sc-kit--image--object-fit: contain;
+  --sc-kit--video--media-fit: contain;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.media-viewer-item__media {
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 0.375rem;
+}</style>

package/dist/ui/media-viewer-dialog/media-viewer-item.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MediaViewerItem } from './types';
+type Props = {
+    item: MediaViewerItem;
+};
+declare const MediaViewerItem: import("svelte").Component<Props, {}, "">;
+type MediaViewerItem = ReturnType<typeof MediaViewerItem>;
+export default MediaViewerItem;

package/dist/ui/media-viewer-dialog/types.d.ts

@@ -0,0 +1,13 @@
+export type MediaViewerItemType = 'image' | 'video';
+export type MediaViewerItem = {
+    url: string;
+    thumbnailUrl: string | null;
+    type: MediaViewerItemType;
+    width: number;
+    height: number;
+};
+export type MediaViewerData = {
+    items: MediaViewerItem[];
+    index: number;
+    backgroundOpacity?: number;
+};

package/dist/ui/media-viewer-dialog/types.js

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

package/dist/ui/player/carousel/cmp.carousel.svelte

@@ -260,7 +260,7 @@ A horizontal slide carousel with infinite looping, touch swipe support, keyboard
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--carousel--button-color` | Navigation arrow button background | `neutral-400` |
+| `--sc-kit--carousel--button-color` | Navigation arrow button background | `rgba(255, 255, 255, 0.2)` |
 | `--sc-kit--carousel--dot-color` | Dot indicator color (fill when active, border when inactive) | `white` |
 | `--sc-kit--carousel--dot-size` | Dot indicator diameter | `0.5rem` |
 | `--sc-kit--carousel--text-color` | Arrow button icon and counter text color | `white` |
@@ -269,7 +269,7 @@ A horizontal slide carousel with infinite looping, touch swipe support, keyboard
 <style>@charset "UTF-8";
 .carousel {
   /* Public API */
-  --_carousel--button-color: var(--sc-kit--carousel--button-color, #9ca3af);
+  --_carousel--button-color: var(--sc-kit--carousel--button-color, rgba(255, 255, 255, 0.2));
   --_carousel--dot-color: var(--sc-kit--carousel--dot-color, #ffffff);
   --_carousel--dot-size: var(--sc-kit--carousel--dot-size, 0.5rem);
   --_carousel--text-color: var(--sc-kit--carousel--text-color, #ffffff);

package/dist/ui/player/carousel/cmp.carousel.svelte.d.ts

@@ -46,7 +46,7 @@ interface $$IsomorphicComponent {
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--carousel--button-color` | Navigation arrow button background | `neutral-400` |
+ * | `--sc-kit--carousel--button-color` | Navigation arrow button background | `rgba(255, 255, 255, 0.2)` |
  * | `--sc-kit--carousel--dot-color` | Dot indicator color (fill when active, border when inactive) | `white` |
  * | `--sc-kit--carousel--dot-size` | Dot indicator diameter | `0.5rem` |
  * | `--sc-kit--carousel--text-color` | Arrow button icon and counter text color | `white` |

package/dist/ui/video/cmp.video.svelte

@@ -8,10 +8,11 @@ import IconSpeaker from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg?raw'
 import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg?raw';
 import { untrack } from 'svelte';
 import { fade } from 'svelte/transition';
-let { src, poster, id = randomNanoid(), controls = true, autoplay = false, loop = false, inert = false, allowPreloading = false, hideSpeaker = false, hidePlayButton = false, intersectionContainer, scrubberPosition = 'bottom', on } = $props();
+let { src, poster, id = randomNanoid(), controls = false, autoplay = false, loop = false, inert = false, allowPreloading = false, hideSpeaker = false, hidePlayButton = false, intersectionContainer, scrubberPosition = 'bottom', on } = $props();
 let video = $state(null);
 let videoContainerRef = $state(null);
 let showControlsOnHover = $state(false);
+let showProgressOnHover = $state(false);
 let isVideoPaused = $state(true);
 let percentageCompleted = $state(0);
 let everActivated = $state(false);
@@ -246,7 +247,13 @@ const handleSeek = (percent) => {
     <img class="video__poster" src={poster} alt="" />
   {/if}
   {#if !controls || !everActivated}
-    <div class="video__overlay" onclick={togglePlay} onkeydown={() => ({})} role="none">
+    <div
+      class="video__overlay"
+      onclick={togglePlay}
+      onkeydown={() => ({})}
+      onmouseenter={() => (showControlsOnHover = true)}
+      onmouseleave={() => (showControlsOnHover = false)}
+      role="none">
       {#if isVideoPaused && !hidePlayButton}
         <button type="button" aria-label="play" class="video__playback-button" onclick={togglePlay} onkeydown={() => ({})}>
           <Icon src={IconPlay} color="white" />
@@ -256,6 +263,7 @@ const handleSeek = (percent) => {
           <Icon src={IconPause} color="white" />
         </button>
       {/if}
+
       {#if (showControlsOnHover || MediaVolumeManager.isMuted) && !hideSpeaker}
         <button type="button" aria-label={MediaVolumeManager.isMuted ? 'mute' : 'unmute'} class="video__mute-button" onclick={toggleMute}>
           {#if MediaVolumeManager.isMuted}
@@ -271,10 +279,10 @@ const handleSeek = (percent) => {
           class="video__progress-container"
           class:video__progress-container--top={scrubberPosition === 'top'}
           class:video__progress-container--bottom={scrubberPosition === 'bottom'}
-          onmouseenter={() => (showControlsOnHover = true)}
-          onmouseleave={() => (showControlsOnHover = false)}
+          onmouseenter={() => (showProgressOnHover = true)}
+          onmouseleave={() => (showProgressOnHover = false)}
           role="none">
-          {#if showControlsOnHover || (!showControlsOnHover && isVideoPaused)}
+          {#if showProgressOnHover || (!showProgressOnHover && isVideoPaused)}
             <div
               class="video__seek-bar"
               transition:fade={{ duration: isVideoPaused ? 0 : 300 }}
@@ -321,12 +329,12 @@ A full-featured video player with custom overlay controls, play/pause, mute, see
   background: var(--_video--background-color);
 }
 .video__playback-button {
+  --sc-kit--icon--size: 2.5rem;
   --sc-kit--icon--filter: drop-shadow(1px 1px #000000);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 2em;
 }
 .video__playback-button--pause {
   /* Set 'container-type: inline-size;' to reference container*/
@@ -337,10 +345,11 @@ A full-featured video player with custom overlay controls, play/pause, mute, see
   }
 }
 .video__mute-button {
+  --sc-kit--icon--size: 1.25rem;
+  --sc-kit--icon--filter: drop-shadow(1px 1px #000000);
   position: absolute;
   top: 0.625em;
   right: 0.625em;
-  font-size: 1em;
   z-index: 1;
 }
 .video__poster {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.1.11",
+  "version": "0.1.12-1772032209109",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -17,6 +17,7 @@
     "pack": "npm run build && npm pack",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
+    "check:strict": "svelte-check --tsconfig ./tsconfig.app.json --fail-on-warnings --output machine && eslint . --format codeframe --max-warnings 0 && prettier --check --plugin prettier-plugin-svelte --cache .",
     "lint": "prettier --check --plugin prettier-plugin-svelte . && eslint .",
     "lint-format": "prettier --write --plugin prettier-plugin-svelte . && eslint --fix .",
     "format": "prettier --write --plugin prettier-plugin-svelte ."
@@ -104,6 +105,10 @@
       "types": "./dist/ui/dialog/index.d.ts",
       "svelte": "./dist/ui/dialog/index.js"
     },
+    "./ui/form-group": {
+      "types": "./dist/ui/form-group/index.d.ts",
+      "svelte": "./dist/ui/form-group/index.js"
+    },
     "./ui/dropdown": {
       "types": "./dist/ui/dropdown/index.d.ts",
       "svelte": "./dist/ui/dropdown/index.js"
@@ -112,6 +117,10 @@
       "types": "./dist/ui/dynamic-component/index.d.ts",
       "svelte": "./dist/ui/dynamic-component/index.js"
     },
+    "./ui/html-block": {
+      "types": "./dist/ui/html-block/index.d.ts",
+      "svelte": "./dist/ui/html-block/index.js"
+    },
     "./ui/icon": {
       "types": "./dist/ui/icon/index.d.ts",
       "svelte": "./dist/ui/icon/index.js"
@@ -144,6 +153,10 @@
       "types": "./dist/ui/media-playback/index.d.ts",
       "svelte": "./dist/ui/media-playback/index.js"
     },
+    "./ui/media-viewer-dialog": {
+      "types": "./dist/ui/media-viewer-dialog/index.d.ts",
+      "svelte": "./dist/ui/media-viewer-dialog/index.js"
+    },
     "./ui/player/buttons": {
       "types": "./dist/ui/player/buttons/index.d.ts",
       "svelte": "./dist/ui/player/buttons/index.js"