@cloudvoyant/helical-svelte 0.19.0

package/dist/Row.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helical-svelte/src/Row.svelte -->
+<!-- Closely based on: Chakra UI Flex (direction="row"), built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { rowBase, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(rowBase, className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/Row.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Row: import("svelte").Component<Props, {}, "">;
+type Row = ReturnType<typeof Row>;
+export default Row;

package/dist/Scroll.svelte

@@ -0,0 +1,72 @@
+<!-- libs/helical-svelte/src/Scroll.svelte -->
+<!-- Closely based on: @ark-ui/svelte/scroll-area (Ark UI), Chakra UI ScrollArea, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import {
+    ScrollAreaRoot,
+    ScrollAreaViewport,
+    ScrollAreaContent,
+    ScrollAreaScrollbar,
+    ScrollAreaThumb,
+    ScrollAreaCorner,
+  } from '@ark-ui/svelte/scroll-area';
+  import type { ScrollAreaRootProps } from '@ark-ui/svelte/scroll-area';
+  import {
+    scrollRootBase,
+    scrollViewportBase,
+    scrollContentBase,
+    scrollScrollbarBase,
+    scrollThumbBase,
+    scrollCornerBase,
+    cn,
+  } from '@cloudvoyant/helical-ui';
+
+  type Props = ScrollAreaRootProps & {
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    /** `default` shows the styled scrollbars; `hidden` keeps scrolling without rendering any scrollbar. */
+    variant?: 'default' | 'hidden';
+    contentClass?: string;
+    thumbClass?: string;
+    /** Overrides the viewport class. The default is `flex h-full w-full flex-col`;
+     * for horizontal scrolling wrap content in a flex row or override this. */
+    viewportClass?: string;
+  };
+
+  let {
+    class: className = '',
+    orientation = 'vertical',
+    variant = 'default',
+    contentClass = '',
+    thumbClass = '',
+    viewportClass = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  const rootClasses = $derived(cn(scrollRootBase, className));
+  const viewportClasses = $derived(cn(scrollViewportBase, viewportClass));
+  const contentClasses = $derived(cn(scrollContentBase, contentClass));
+  const thumbClasses = $derived(cn(scrollThumbBase, thumbClass));
+</script>
+
+<ScrollAreaRoot class={rootClasses} {...rest}>
+  <ScrollAreaViewport class={viewportClasses}>
+    <ScrollAreaContent class={contentClasses}>
+      {@render children?.()}
+    </ScrollAreaContent>
+  </ScrollAreaViewport>
+  {#if variant !== 'hidden'}
+    {#if orientation === 'vertical' || orientation === 'both'}
+      <ScrollAreaScrollbar orientation="vertical" class={scrollScrollbarBase}>
+        <ScrollAreaThumb class={thumbClasses} />
+      </ScrollAreaScrollbar>
+    {/if}
+    {#if orientation === 'horizontal' || orientation === 'both'}
+      <ScrollAreaScrollbar orientation="horizontal" class={scrollScrollbarBase}>
+        <ScrollAreaThumb class={thumbClasses} />
+      </ScrollAreaScrollbar>
+    {/if}
+    {#if orientation === 'both'}
+      <ScrollAreaCorner class={scrollCornerBase} />
+    {/if}
+  {/if}
+</ScrollAreaRoot>

package/dist/Scroll.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ScrollAreaRootProps } from '@ark-ui/svelte/scroll-area';
+type Props = ScrollAreaRootProps & {
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    /** `default` shows the styled scrollbars; `hidden` keeps scrolling without rendering any scrollbar. */
+    variant?: 'default' | 'hidden';
+    contentClass?: string;
+    thumbClass?: string;
+    /** Overrides the viewport class. The default is `flex h-full w-full flex-col`;
+     * for horizontal scrolling wrap content in a flex row or override this. */
+    viewportClass?: string;
+};
+declare const Scroll: import("svelte").Component<Props, {}, "">;
+type Scroll = ReturnType<typeof Scroll>;
+export default Scroll;

package/dist/Splitter.svelte

@@ -0,0 +1,12 @@
+<!-- libs/helical-svelte/src/Splitter.svelte -->
+<!-- Closely based on: @ark-ui/svelte/splitter (Ark UI), Chakra UI Splitter, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { SplitterRoot, type SplitterRootProps } from '@ark-ui/svelte/splitter';
+  import { splitterRootBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', ...rest }: SplitterRootProps = $props();
+
+  const classes = $derived(cn(splitterRootBase, className));
+</script>
+
+<SplitterRoot class={classes} {...rest} />

package/dist/Splitter.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type SplitterRootProps } from '@ark-ui/svelte/splitter';
+declare const Splitter: import("svelte").Component<SplitterRootProps, {}, "">;
+type Splitter = ReturnType<typeof Splitter>;
+export default Splitter;

package/dist/SplitterPanel.svelte

@@ -0,0 +1,12 @@
+<!-- libs/helical-svelte/src/SplitterPanel.svelte -->
+<!-- Closely based on: @ark-ui/svelte/splitter (Ark UI), Chakra UI Splitter, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { SplitterPanel, type SplitterPanelProps } from '@ark-ui/svelte/splitter';
+  import { splitterPanelBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', ...rest }: SplitterPanelProps = $props();
+
+  const classes = $derived(cn(splitterPanelBase, className));
+</script>
+
+<SplitterPanel class={classes} {...rest} />

package/dist/SplitterPanel.svelte.d.ts

@@ -0,0 +1,4 @@
+import { SplitterPanel, type SplitterPanelProps } from '@ark-ui/svelte/splitter';
+declare const SplitterPanel: import("svelte").Component<SplitterPanelProps, {}, "">;
+type SplitterPanel = ReturnType<typeof SplitterPanel>;
+export default SplitterPanel;

package/dist/SplitterResizeTrigger.svelte

@@ -0,0 +1,15 @@
+<!-- libs/helical-svelte/src/SplitterResizeTrigger.svelte -->
+<!-- Closely based on: @ark-ui/svelte/splitter (Ark UI), Chakra UI Splitter, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { SplitterResizeTrigger, type SplitterResizeTriggerProps } from '@ark-ui/svelte/splitter';
+  import { splitterResizeTriggerBase, splitterResizeTriggerSeparatorBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', children, ...rest }: SplitterResizeTriggerProps = $props();
+
+  const classes = $derived(cn(splitterResizeTriggerBase, className));
+</script>
+
+<SplitterResizeTrigger class={classes} {...rest}>
+  <span aria-hidden data-part="separator" class={splitterResizeTriggerSeparatorBase}></span>
+  {@render children?.()}
+</SplitterResizeTrigger>

package/dist/SplitterResizeTrigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { SplitterResizeTrigger, type SplitterResizeTriggerProps } from '@ark-ui/svelte/splitter';
+declare const SplitterResizeTrigger: import("svelte").Component<SplitterResizeTriggerProps, {}, "">;
+type SplitterResizeTrigger = ReturnType<typeof SplitterResizeTrigger>;
+export default SplitterResizeTrigger;

package/dist/SplitterResizeTriggerIndicator.svelte

@@ -0,0 +1,15 @@
+<!-- libs/helical-svelte/src/SplitterResizeTriggerIndicator.svelte -->
+<!-- Closely based on: @ark-ui/svelte/splitter (Ark UI), Chakra UI Splitter, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import {
+    SplitterResizeTriggerIndicator,
+    type SplitterResizeTriggerIndicatorProps,
+  } from '@ark-ui/svelte/splitter';
+  import { splitterResizeTriggerIndicatorBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', ...rest }: SplitterResizeTriggerIndicatorProps = $props();
+
+  const classes = $derived(cn(splitterResizeTriggerIndicatorBase, className));
+</script>
+
+<SplitterResizeTriggerIndicator class={classes} {...rest} />

package/dist/SplitterResizeTriggerIndicator.svelte.d.ts

@@ -0,0 +1,4 @@
+import { SplitterResizeTriggerIndicator, type SplitterResizeTriggerIndicatorProps } from '@ark-ui/svelte/splitter';
+declare const SplitterResizeTriggerIndicator: import("svelte").Component<SplitterResizeTriggerIndicatorProps, {}, "">;
+type SplitterResizeTriggerIndicator = ReturnType<typeof SplitterResizeTriggerIndicator>;
+export default SplitterResizeTriggerIndicator;

package/dist/Stack.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helical-svelte/src/Stack.svelte -->
+<!-- Closely based on: Chakra UI Stack, built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { stackBase, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(stackBase, className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/Stack.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Stack: import("svelte").Component<Props, {}, "">;
+type Stack = ReturnType<typeof Stack>;
+export default Stack;

package/dist/Textarea.svelte

@@ -0,0 +1,14 @@
+<!-- libs/helical-svelte/src/Textarea.svelte -->
+<!-- Closely based on: Shark UI textarea (@ark-ui/svelte/field), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { FieldTextarea, type FieldTextareaProps } from '@ark-ui/svelte/field';
+  import { textareaBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', children, ...rest }: FieldTextareaProps = $props();
+
+  const classes = $derived(cn(textareaBase, className));
+</script>
+
+<FieldTextarea class={classes} {...rest}>
+  {@render children?.()}
+</FieldTextarea>

package/dist/Textarea.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type FieldTextareaProps } from '@ark-ui/svelte/field';
+declare const Textarea: import("svelte").Component<FieldTextareaProps, {}, "">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/ToggleButton.svelte

@@ -0,0 +1,18 @@
+<!-- libs/helical-svelte/src/ToggleButton.svelte -->
+<!-- Closely based on: @ark-ui/svelte/toggle (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { ToggleRoot, type ToggleRootProps } from '@ark-ui/svelte/toggle';
+  import { toggleButtonVariants, cn } from '@cloudvoyant/helical-ui';
+
+  type Props = ToggleRootProps & {
+    variant?: 'default' | 'outline';
+    size?: 'default' | 'sm' | 'lg';
+    class?: string;
+  };
+
+  let { variant = 'default', size = 'default', class: className = '', ...rest }: Props = $props();
+
+  const classes = $derived(cn(toggleButtonVariants({ variant, size }), className));
+</script>
+
+<ToggleRoot class={classes} {...rest} />

package/dist/ToggleButton.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type ToggleRootProps } from '@ark-ui/svelte/toggle';
+type Props = ToggleRootProps & {
+    variant?: 'default' | 'outline';
+    size?: 'default' | 'sm' | 'lg';
+    class?: string;
+};
+declare const ToggleButton: import("svelte").Component<Props, {}, "">;
+type ToggleButton = ReturnType<typeof ToggleButton>;
+export default ToggleButton;

package/dist/ToggleButtonIndicator.svelte

@@ -0,0 +1,9 @@
+<!-- libs/helical-svelte/src/ToggleButtonIndicator.svelte -->
+<!-- Closely based on: @ark-ui/svelte/toggle (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { ToggleIndicator, type ToggleIndicatorProps } from '@ark-ui/svelte/toggle';
+
+  let { ...rest }: ToggleIndicatorProps = $props();
+</script>
+
+<ToggleIndicator {...rest} />

package/dist/ToggleButtonIndicator.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ToggleIndicatorProps } from '@ark-ui/svelte/toggle';
+declare const ToggleButtonIndicator: import("svelte").Component<ToggleIndicatorProps, {}, "">;
+type ToggleButtonIndicator = ReturnType<typeof ToggleButtonIndicator>;
+export default ToggleButtonIndicator;

package/dist/VStack.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helical-svelte/src/VStack.svelte -->
+<!-- Closely based on: Chakra UI VStack, built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { vstackBase, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(vstackBase, className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/VStack.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const VStack: import("svelte").Component<Props, {}, "">;
+type VStack = ReturnType<typeof VStack>;
+export default VStack;

package/dist/YouTube.svelte

@@ -0,0 +1,81 @@
+<!-- libs/helical-svelte/src/YouTube.svelte -->
+<!-- Closely based on: diffbook YouTube, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { Play } from 'lucide-svelte';
+  import { setContext } from 'svelte';
+  import {
+    youtubeRootBase,
+    youtubeTitleBase,
+    youtubeFacadeBase,
+    youtubePlayButtonBase,
+    youtubePlayButtonInnerBase,
+    youtubeDescriptionBase,
+    extractYouTubeId,
+    cn,
+  } from '@cloudvoyant/helical-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    url: string;
+    title?: string;
+    description?: string;
+    poster?: string;
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { url, title, description, poster, class: className = '', children, ...rest }: Props = $props();
+
+  const videoId = $derived(extractYouTubeId(url));
+  const posterUrl = $derived(poster ?? `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`);
+
+  let playing = $state(false);
+  let startAt = $state<number | null>(null);
+
+  const seek = (t: number) => {
+    startAt = t;
+    playing = true;
+  };
+
+  setContext('helical-ui-youtube', {
+    get url() {
+      return url;
+    },
+    get videoId() {
+      return videoId;
+    },
+    seek,
+  });
+
+  const src = $derived(
+    `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1${startAt != null ? `&start=${startAt}` : ''}`,
+  );
+
+  const classes = $derived(cn(youtubeRootBase, className));
+</script>
+
+<Ark as="div" data-youtube-id={videoId} class={classes} {...rest}>
+  {#if title}<Ark as="h3" class={youtubeTitleBase}>{title}</Ark>{/if}
+  {#if playing}
+    <iframe
+      {src}
+      title={title ?? `YouTube video ${videoId}`}
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen
+      class="aspect-video w-full rounded-md border border-border"
+    ></iframe>
+  {:else}
+    <Ark as="button" type="button" class={youtubeFacadeBase} onclick={() => (playing = true)} aria-label={title ? `Play video: ${title}` : 'Play video'}>
+      <Ark as="img" src={posterUrl} alt={title ?? `YouTube video ${videoId}`} loading="lazy" class="h-full w-full object-cover" />
+      <Ark as="span" class={youtubePlayButtonBase} aria-hidden="true">
+        <Ark as="span" class={youtubePlayButtonInnerBase}>
+          <Play class="size-8 fill-current" aria-hidden="true" data-youtube-logo />
+        </Ark>
+      </Ark>
+    </Ark>
+  {/if}
+  {#if description}<Ark as="p" class={youtubeDescriptionBase}>{description}</Ark>{/if}
+  {#if children}{@render children()}{/if}
+</Ark>

package/dist/YouTube.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type Props = {
+    url: string;
+    title?: string;
+    description?: string;
+    poster?: string;
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const YouTube: import("svelte").Component<Props, {}, "">;
+type YouTube = ReturnType<typeof YouTube>;
+export default YouTube;

package/dist/YoutubeTimestampAt.svelte

@@ -0,0 +1,20 @@
+<!-- libs/helical-svelte/src/YoutubeTimestampAt.svelte -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { getContext } from 'svelte';
+  import { youtubeChapterButtonBase, youtubeChapterTimeBase, youtubeChapterLabelBase, formatTime } from '@cloudvoyant/helical-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  type Props = { t: number; children?: Snippet; class?: string } & HTMLAttributes<HTMLElement>;
+  let { t, children, class: className = '', ...rest }: Props = $props();
+
+  const ctx = getContext<{ seek: (t: number) => void }>('helical-ui-youtube');
+</script>
+
+<Ark as="li" class={className} {...rest}>
+  <Ark as="button" type="button" onclick={() => ctx.seek(t)} class={youtubeChapterButtonBase}>
+    <Ark as="span" class={youtubeChapterTimeBase}>{formatTime(t)}</Ark>
+    <Ark as="span" class={youtubeChapterLabelBase}>{#if children}{@render children()}{/if}</Ark>
+  </Ark>
+</Ark>

package/dist/YoutubeTimestampAt.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type Props = {
+    t: number;
+    children?: Snippet;
+    class?: string;
+} & HTMLAttributes<HTMLElement>;
+declare const YoutubeTimestampAt: import("svelte").Component<Props, {}, "">;
+type YoutubeTimestampAt = ReturnType<typeof YoutubeTimestampAt>;
+export default YoutubeTimestampAt;

package/dist/YoutubeTimestamps.svelte

@@ -0,0 +1,100 @@
+<!-- libs/helical-svelte/src/YoutubeTimestamps.svelte -->
+<!-- Composed timestamps list, auto-inferred from web metadata or overridden manually via
+     YoutubeTimestampAt children. Mirrored from @cloudvoyant/helical-react. -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { getContext } from 'svelte';
+  import {
+    youtubeChaptersBase,
+    youtubeChaptersSummaryBase,
+    youtubeChaptersChevronBase,
+    youtubeChaptersListBase,
+    youtubeChapterButtonBase,
+    youtubeChapterTimeBase,
+    youtubeChapterLabelBase,
+    formatTime,
+    parseYouTubeChapters,
+    fetchYouTubeMetadata,
+    cn,
+  } from '@cloudvoyant/helical-ui';
+  import type { YouTubeChapter } from '@cloudvoyant/helical-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    chapters?: YouTubeChapter[];
+    children?: Snippet;
+    class?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { chapters = undefined, children, class: className = '', ...rest }: Props = $props();
+
+  const ctx = getContext<{ url: string; seek: (t: number) => void }>('helical-ui-youtube');
+
+  let inferred = $state<YouTubeChapter[]>([]);
+  let loading = $state(chapters === undefined);
+
+  $effect(() => {
+    if (chapters !== undefined) {
+      loading = false;
+      return;
+    }
+    let cancelled = false;
+    loading = true;
+    fetchYouTubeMetadata(ctx.url)
+      .then((meta) => {
+        if (!cancelled) {
+          inferred = meta.description ? parseYouTubeChapters(meta.description) : [];
+          loading = false;
+        }
+      })
+      .catch(() => {
+        if (!cancelled) loading = false;
+      });
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  const resolved = $derived(chapters ?? inferred);
+
+  const seek = (t: number) => ctx.seek(t);
+
+  const classes = $derived(cn(youtubeChaptersBase, className));
+</script>
+
+{#if loading || resolved.length > 0 || children}
+  <Ark as="div" class={classes} {...rest}>
+    <details class="group" open>
+      <Ark as="summary" class={youtubeChaptersSummaryBase}>
+        <svg
+          class={youtubeChaptersChevronBase}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m9 18 6-6-6-6"></path>
+        </svg>
+        <span>Timestamps</span>
+      </Ark>
+      <Ark as="nav" aria-label="Video timestamps" class={youtubeChaptersListBase}>
+        <Ark as="ul" class="space-y-1">
+          {#each resolved as ch (ch.t)}
+            <Ark as="li">
+              <Ark as="button" type="button" onclick={() => seek(ch.t)} class={youtubeChapterButtonBase}>
+                <Ark as="span" class={youtubeChapterTimeBase}>{formatTime(ch.t)}</Ark>
+                <Ark as="span" class={youtubeChapterLabelBase}>{ch.label}</Ark>
+              </Ark>
+            </Ark>
+          {/each}
+          {#if children}{@render children()}{/if}
+        </Ark>
+      </Ark>
+    </details>
+  </Ark>
+{/if}

package/dist/YoutubeTimestamps.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { YouTubeChapter } from '@cloudvoyant/helical-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type Props = {
+    chapters?: YouTubeChapter[];
+    children?: Snippet;
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const YoutubeTimestamps: import("svelte").Component<Props, {}, "">;
+type YoutubeTimestamps = ReturnType<typeof YoutubeTimestamps>;
+export default YoutubeTimestamps;

package/dist/card/Card.svelte

@@ -0,0 +1,34 @@
+<!-- libs/helical-svelte/src/card/Card.svelte -->
+<!-- Closely based on: Chakra UI Card, built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { cardVariants, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    variant?: 'outline' | 'elevated' | 'subtle';
+    size?: 'sm' | 'md' | 'lg';
+    orientation?: 'vertical' | 'horizontal';
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let {
+    variant = 'outline',
+    size = 'md',
+    orientation = 'vertical',
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  setContext<'vertical' | 'horizontal'>('card-orientation', orientation);
+
+  const classes = $derived(cn(cardVariants({ variant, size, orientation }), className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/card/Card.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    variant?: 'outline' | 'elevated' | 'subtle';
+    size?: 'sm' | 'md' | 'lg';
+    orientation?: 'vertical' | 'horizontal';
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/card/CardBody.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helical-svelte/src/CardBody.svelte -->
+<!-- Closely based on: Chakra UI Card, built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { cardBodyBase, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(cardBodyBase, className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>