@cloudvoyant/helix-svelte 0.16.0 → 0.17.0

package/dist/YouTube.svelte

@@ -0,0 +1,85 @@
+<!-- libs/helix-svelte/src/YouTube.svelte -->
+<!-- Closely based on: diffbook YouTube, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { getContext, setContext } from 'svelte';
+  import {
+    youtubeRootBase,
+    youtubeTitleBase,
+    youtubeFacadeBase,
+    youtubePlayButtonBase,
+    youtubePlayButtonInnerBase,
+    youtubeDescriptionBase,
+    youtubeChaptersBase,
+    youtubeChaptersSummaryBase,
+    youtubeChaptersChevronBase,
+    youtubeChaptersListBase,
+    youtubeChapterButtonBase,
+    youtubeChapterTimeBase,
+    youtubeChapterLabelBase,
+    extractYouTubeId,
+    formatTime,
+    parseYouTubeChapters,
+    fetchYouTubeMetadata,
+    cn,
+  } from '@cloudvoyant/helix';
+  import type { YouTubeChapter } from '@cloudvoyant/helix';
+  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('helix-youtube', { url, 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}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-8 w-8" aria-hidden="true">
+            <path d="M8 5v14l11-7z"></path>
+          </svg>
+        </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/helix-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/helix';
+  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 }>('helix-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/helix-svelte/src/YoutubeTimestamps.svelte -->
+<!-- Composed timestamps list, auto-inferred from web metadata or overridden manually via
+     YoutubeTimestampAt children. Mirrored from @cloudvoyant/helix-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/helix';
+  import type { YouTubeChapter } from '@cloudvoyant/helix';
+  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 }>('helix-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/helix';
+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/code-block/CodeBlock.svelte

@@ -0,0 +1,67 @@
+<!-- libs/helix-svelte/src/code-block/CodeBlock.svelte -->
+<!-- Closely based on: diffbook code-block family, rebuilt as a composable API, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import CodeBlockHeader from './CodeBlockHeader.svelte';
+  import CodeBlockTitle from './CodeBlockTitle.svelte';
+  import CodeBlockContent from './CodeBlockContent.svelte';
+  import CodeBlockCopyButton from './CodeBlockCopyButton.svelte';
+  import { codeBlockRootBase, cn } from '@cloudvoyant/helix';
+  import { setContext } from 'svelte';
+  import { CODE_BLOCK_KEY, type CodeBlockContextValue } from './CodeBlockContext.svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    code: string;
+    language?: string;
+    filename?: string;
+    html?: string;
+    showLineNumbers?: boolean;
+    scrollable?: boolean;
+    maxHeight?: number;
+    highlightLines?: number[];
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let {
+    code,
+    language = 'tsx',
+    filename,
+    html = undefined,
+    showLineNumbers = false,
+    scrollable = false,
+    maxHeight = 400,
+    highlightLines = undefined,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  setContext<CodeBlockContextValue>(CODE_BLOCK_KEY, {
+    code,
+    language,
+    html,
+    showLineNumbers,
+    scrollable,
+    maxHeight,
+    highlightLines,
+  });
+
+  const classes = $derived(cn(codeBlockRootBase, className));
+</script>
+
+<Ark as="div" data-code-block class={classes} {...rest}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <CodeBlockHeader>
+      <CodeBlockTitle>{filename ?? language}</CodeBlockTitle>
+      <div class="ml-auto">
+        <CodeBlockCopyButton />
+      </div>
+    </CodeBlockHeader>
+    <CodeBlockContent />
+  {/if}
+</Ark>

package/dist/code-block/CodeBlock.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type Props = {
+    code: string;
+    language?: string;
+    filename?: string;
+    html?: string;
+    showLineNumbers?: boolean;
+    scrollable?: boolean;
+    maxHeight?: number;
+    highlightLines?: number[];
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const CodeBlock: import("svelte").Component<Props, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/code-block/CodeBlockContent.svelte

@@ -0,0 +1,19 @@
+<!-- libs/helix-svelte/src/code-block/CodeBlockContent.svelte -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import CodeRenderer from './CodeRenderer.svelte';
+  import { codeBlockContext } from './CodeBlockContext.svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = { html?: string; class?: string } & HTMLAttributes<HTMLDivElement>;
+  let { html = undefined, class: className = '', ...rest }: Props = $props();
+
+  const ctx = codeBlockContext();
+  if (!ctx) {
+    throw new Error('CodeBlockContent must be rendered inside a CodeBlock.');
+  }
+</script>
+
+<Ark as="div" class={className} {...rest}>
+  <CodeRenderer {...ctx} html={html ?? ctx.html} />
+</Ark>

package/dist/code-block/CodeBlockContent.svelte.d.ts

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

package/dist/code-block/CodeBlockContext.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface CodeBlockContextValue {
+    code: string;
+    language: string;
+    html?: string;
+    showLineNumbers: boolean;
+    scrollable: boolean;
+    maxHeight: number;
+    highlightLines?: number[];
+}
+export declare const CODE_BLOCK_KEY: unique symbol;
+export declare function codeBlockContext(): CodeBlockContextValue | undefined;

package/dist/code-block/CodeBlockContext.svelte.js

@@ -0,0 +1,7 @@
+// libs/helix-svelte/src/code-block/CodeBlockContext.svelte.ts
+// Shared code-block context so composite parts (Title/Content/CopyButton) read the block's props.
+import { getContext } from 'svelte';
+export const CODE_BLOCK_KEY = Symbol('helix-code-block');
+export function codeBlockContext() {
+    return getContext(CODE_BLOCK_KEY);
+}

package/dist/code-block/CodeBlockCopyButton.svelte

@@ -0,0 +1,19 @@
+<!-- libs/helix-svelte/src/code-block/CodeBlockCopyButton.svelte -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import CopyButton from '../CopyButton.svelte';
+  import { codeBlockContext } from './CodeBlockContext.svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = { label?: string; class?: string } & HTMLAttributes<HTMLDivElement>;
+  let { label = 'Copy code', class: className = '', ...rest }: Props = $props();
+
+  const ctx = codeBlockContext();
+  if (!ctx) {
+    throw new Error('CodeBlockCopyButton must be rendered inside a CodeBlock.');
+  }
+</script>
+
+<Ark as="div" class={className} {...rest}>
+  <CopyButton value={ctx.code} {label} />
+</Ark>

package/dist/code-block/CodeBlockCopyButton.svelte.d.ts

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

package/dist/code-block/CodeBlockHeader.svelte

@@ -0,0 +1,15 @@
+<!-- libs/helix-svelte/src/code-block/CodeBlockHeader.svelte -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { codeBlockHeaderBase, cn } from '@cloudvoyant/helix';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  type Props = { children?: Snippet; class?: string } & HTMLAttributes<HTMLDivElement>;
+  let { children, class: className = '', ...rest }: Props = $props();
+  const classes = $derived(cn(codeBlockHeaderBase, className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {#if children}{@render children()}{/if}
+</Ark>

package/dist/code-block/CodeBlockHeader.svelte.d.ts

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

package/dist/code-block/CodeBlockTitle.svelte

@@ -0,0 +1,15 @@
+<!-- libs/helix-svelte/src/code-block/CodeBlockTitle.svelte -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { codeBlockTitleBase, cn } from '@cloudvoyant/helix';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  type Props = { children?: Snippet; class?: string } & HTMLAttributes<HTMLSpanElement>;
+  let { children, class: className = '', ...rest }: Props = $props();
+  const classes = $derived(cn(codeBlockTitleBase, className));
+</script>
+
+<Ark as="span" class={classes} {...rest}>
+  {#if children}{@render children()}{/if}
+</Ark>

package/dist/code-block/CodeBlockTitle.svelte.d.ts

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

package/dist/code-block/CodeRenderer.svelte

@@ -0,0 +1,78 @@
+<!-- libs/helix-svelte/src/code-block/CodeRenderer.svelte -->
+<!-- Shared shiki renderer for the code-block family, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import {
+    codeBlockBodyBase,
+    codeBlockBodyScrollableBase,
+    codeBlockContentBase,
+    codeBlockLineNumbersBase,
+    codeBlockHighlightBase,
+    codeBlockLoadingBase,
+    codeBlockSpinnerBase,
+    injectCodeBlockStyles,
+    renderCodeToHtml,
+    cn,
+  } from '@cloudvoyant/helix';
+
+  type Props = {
+    code: string;
+    language: string;
+    html?: string;
+    showLineNumbers: boolean;
+    scrollable: boolean;
+    maxHeight: number;
+    highlightLines?: number[];
+  };
+
+  let {
+    code,
+    language,
+    html = undefined,
+    showLineNumbers,
+    scrollable,
+    maxHeight,
+    highlightLines = undefined,
+  }: Props = $props();
+
+  let rendered = $state<string | null>(html ?? null);
+
+  const highlightKey = $derived(highlightLines?.join(',') ?? '');
+
+  // The scoped `.hx-cb`/`.cbln`/`.cbhl` styles must be present for both the client
+  // highlight path and the prerendered `html` path, so inject them on mount (idempotent).
+  $effect(() => {
+    injectCodeBlockStyles();
+  });
+
+  $effect(() => {
+    if (html !== undefined) return;
+    let cancelled = false;
+    rendered = null;
+    renderCodeToHtml(code, language, highlightLines).then((h) => {
+      if (!cancelled) rendered = h;
+    });
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  const classes = $derived(cn(codeBlockBodyBase, scrollable && codeBlockBodyScrollableBase));
+  const contentClasses = $derived(
+    cn(
+      codeBlockContentBase,
+      showLineNumbers && codeBlockLineNumbersBase,
+      highlightLines?.length && codeBlockHighlightBase,
+    ),
+  );
+  const styles = $derived(scrollable ? `max-height: ${maxHeight}px;` : undefined);
+</script>
+
+<div class={classes} style={styles}>
+  {#if rendered !== null}
+    <div class={contentClasses}>{@html rendered}</div>
+  {:else}
+    <div class={codeBlockLoadingBase}>
+      <div class={codeBlockSpinnerBase}></div>
+    </div>
+  {/if}
+</div>

package/dist/code-block/CodeRenderer.svelte.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    code: string;
+    language: string;
+    html?: string;
+    showLineNumbers: boolean;
+    scrollable: boolean;
+    maxHeight: number;
+    highlightLines?: number[];
+};
+declare const CodeRenderer: import("svelte").Component<Props, {}, "">;
+type CodeRenderer = ReturnType<typeof CodeRenderer>;
+export default CodeRenderer;