@cloudvoyant/helix-svelte 0.16.0 → 0.17.0

package/dist/Chart.svelte

@@ -0,0 +1,52 @@
+<!-- libs/helix-svelte/src/Chart.svelte -->
+<!-- Closely based on: diffbook Chart, rebuilt on TanStack Charts (shared definition with React),
+     mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Chart as TanStackChart } from '@tanstack/charts/svelte';
+  import { chartRootBase, cn, buildChartDefinition } from '@cloudvoyant/helix';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    type: 'line' | 'bar' | 'area' | 'pie';
+    data: Record<string, string | number>[];
+    series: { key: string; label?: string; color?: string }[];
+    xKey?: string;
+    nameKey?: string;
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    showAxis?: boolean;
+    /** Pre-rendered SVG markup (server/static path). */
+    svg?: string;
+    class?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let {
+    type,
+    data,
+    series,
+    xKey = 'name',
+    nameKey = 'name',
+    height = 320,
+    showLegend = true,
+    showGrid = true,
+    showAxis = true,
+    svg = undefined,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  const definition = $derived(
+    buildChartDefinition({ type, data, series, xKey, nameKey, height, showLegend, showGrid, showAxis }),
+  );
+
+  const classes = $derived(cn(chartRootBase, className));
+</script>
+
+<div data-chart-state={svg !== undefined ? 'prerendered' : 'ready'} data-chart-type={type} class={classes} {...rest}>
+  {#if svg !== undefined}
+    <div class="flex w-full justify-center [&>svg]:max-w-full">{@html svg}</div>
+  {:else}
+    <TanStackChart definition={definition} {height} ariaLabel={type === 'pie' ? 'Pie chart' : 'Chart'} />
+  {/if}
+</div>

package/dist/Chart.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    type: 'line' | 'bar' | 'area' | 'pie';
+    data: Record<string, string | number>[];
+    series: {
+        key: string;
+        label?: string;
+        color?: string;
+    }[];
+    xKey?: string;
+    nameKey?: string;
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    showAxis?: boolean;
+    /** Pre-rendered SVG markup (server/static path). */
+    svg?: string;
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Chart: import("svelte").Component<Props, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

package/dist/CopyButton.svelte

@@ -0,0 +1,58 @@
+<!-- libs/helix-svelte/src/CopyButton.svelte -->
+<!-- Closely based on: Shark UI clipboard (@ark-ui/svelte/clipboard), mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import {
+    ClipboardRoot,
+    ClipboardTrigger,
+    ClipboardIndicator,
+    type ClipboardRootProps,
+  } from '@ark-ui/svelte/clipboard';
+  import { clipboardTriggerBase, cn } from '@cloudvoyant/helix';
+
+  type Props = Omit<ClipboardRootProps, 'value' | 'class'> & {
+    /** Text copied to the clipboard when clicked. */
+    value: string;
+    /** Accessible label for the trigger (default `Copy`). */
+    label?: string;
+    /** Extra classes for the trigger. */
+    class?: string;
+  };
+
+  let { value, label = 'Copy', class: className = '', ...rest }: Props = $props();
+
+  const classes = $derived(cn(clipboardTriggerBase, className));
+</script>
+
+<ClipboardRoot {value} {...rest}>
+  <ClipboardTrigger class={classes} aria-label={label}>
+    <ClipboardIndicator>
+      {#snippet copied()}
+        <svg
+          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="M20 6 9 17l-5-5"></path>
+        </svg>
+      {/snippet}
+      <svg
+        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"
+      >
+        <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+      </svg>
+    </ClipboardIndicator>
+  </ClipboardTrigger>
+</ClipboardRoot>

package/dist/CopyButton.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type ClipboardRootProps } from '@ark-ui/svelte/clipboard';
+type Props = Omit<ClipboardRootProps, 'value' | 'class'> & {
+    /** Text copied to the clipboard when clicked. */
+    value: string;
+    /** Accessible label for the trigger (default `Copy`). */
+    label?: string;
+    /** Extra classes for the trigger. */
+    class?: string;
+};
+declare const CopyButton: import("svelte").Component<Props, {}, "">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/Figure.svelte

@@ -0,0 +1,32 @@
+<!-- libs/helix-svelte/src/Figure.svelte -->
+<!-- Closely based on: diffbook Figure (packages/diffbook-ui/src/components/Figure.tsx),
+     mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { figureRootBase, figureImageBase, figureCaptionBase, cn } from '@cloudvoyant/helix';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    src?: string;
+    alt?: string;
+    caption?: string;
+    /** A custom image element (e.g. `<img srcSet="…" sizes="…">`). When provided it replaces
+     *  the default `<img>` built from `src`/`alt`. */
+    img?: Snippet;
+    class?: string;
+  } & HTMLAttributes<HTMLElement>;
+
+  let { src, alt, img, caption, class: className = '', ...rest }: Props = $props();
+
+  const classes = $derived(cn(figureRootBase, className));
+</script>
+
+<Ark as="figure" class={classes} {...rest}>
+  {#if img}
+    {@render img()}
+  {:else if src}
+    <Ark as="img" {src} {alt} loading="lazy" class={figureImageBase} />
+  {/if}
+  {#if caption}<Ark as="figcaption" class={figureCaptionBase}>{caption}</Ark>{/if}
+</Ark>

package/dist/Figure.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type Props = {
+    src?: string;
+    alt?: string;
+    caption?: string;
+    /** A custom image element (e.g. `<img srcSet="…" sizes="…">`). When provided it replaces
+     *  the default `<img>` built from `src`/`alt`. */
+    img?: Snippet;
+    class?: string;
+} & HTMLAttributes<HTMLElement>;
+declare const Figure: import("svelte").Component<Props, {}, "">;
+type Figure = ReturnType<typeof Figure>;
+export default Figure;

package/dist/InlineLaTeX.svelte

@@ -0,0 +1,34 @@
+<!-- libs/helix-svelte/src/InlineLaTeX.svelte -->
+<!-- Inline LaTeX equation (displayMode: false), mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { latexRootBase, latexInlineBase, latexErrorBase, toLaTeX, cn } from '@cloudvoyant/helix';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    latex: string;
+    html?: string;
+    class?: string;
+  } & HTMLAttributes<HTMLSpanElement>;
+
+  let { latex, html = undefined, class: className = '', ...rest }: Props = $props();
+
+  let markup = $derived.by(() => {
+    if (html !== undefined) return html;
+    try {
+      return toLaTeX(latex);
+    } catch {
+      return latex;
+    }
+  });
+
+  const classes = $derived(cn(latexRootBase, latexInlineBase, className));
+</script>
+
+<Ark as="span" {...rest} data-latex-state="done" class={classes}>
+  {#if markup === latex && html === undefined}
+    <code class={latexErrorBase}>{latex}</code>
+  {:else}
+    <span>{@html markup}</span>
+  {/if}
+</Ark>

package/dist/InlineLaTeX.svelte.d.ts

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

package/dist/LaTeX.svelte

@@ -0,0 +1,34 @@
+<!-- libs/helix-svelte/src/LaTeX.svelte -->
+<!-- Closely based on: diffbook's KaTeX pipeline; block component, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { latexRootBase, latexDisplayBase, latexErrorBase, toLaTeX, cn } from '@cloudvoyant/helix';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    latex: string;
+    html?: string;
+    class?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { latex, html = undefined, class: className = '', ...rest }: Props = $props();
+
+  let markup = $derived.by(() => {
+    if (html !== undefined) return html;
+    try {
+      return toLaTeX(latex, { displayMode: true });
+    } catch {
+      return latex;
+    }
+  });
+
+  const classes = $derived(cn(latexRootBase, latexDisplayBase, className));
+</script>
+
+<Ark as="div" {...rest} data-latex-state="done" class={classes}>
+  {#if markup === latex && html === undefined}
+    <code class={latexErrorBase}>{latex}</code>
+  {:else}
+    <span>{@html markup}</span>
+  {/if}
+</Ark>

package/dist/LaTeX.svelte.d.ts

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

package/dist/Manim.svelte

@@ -0,0 +1,119 @@
+<!-- libs/helix-svelte/src/Manim.svelte -->
+<!-- Closely based on: diffbook Manim, rebuilt with the scene builder as a prop (client-only),
+     mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import {
+    manimRootBase,
+    manimContainerBase,
+    manimPlaceholderBase,
+    manimPlaceholderLabelBase,
+    manimErrorBase,
+    manimCaptionBase,
+    cn,
+  } from '@cloudvoyant/helix';
+  import type { ManimRecordingScene, ManimModule } from '@cloudvoyant/helix';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Status = 'loading' | 'ready' | 'error';
+
+  interface ManimPlayerLike {
+    sequence(builder: (scene: ManimRecordingScene) => Promise<void>): Promise<void>;
+    dispose?(): void;
+  }
+
+  type Props = {
+    build: (manim: ManimModule, scene: ManimRecordingScene) => Promise<void> | void;
+    width?: number;
+    height?: number;
+    caption?: string;
+    class?: string;
+  } & HTMLAttributes<HTMLElement>;
+
+  let {
+    build,
+    width = 800,
+    height = 450,
+    caption,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let wrapper: HTMLDivElement;
+  let container: HTMLDivElement;
+  let status: Status = $state('loading');
+  let errorMsg: string = $state('');
+
+  $effect(() => {
+    const w = wrapper;
+    if (!w) return;
+    let disposed = false;
+    let player: ManimPlayerLike | null = null;
+    let resizeTimer: ReturnType<typeof setTimeout> | undefined;
+    let mountedWidth = 0;
+    let generation = 0;
+
+    async function mount(pixelWidth: number): Promise<void> {
+      const gen = ++generation;
+      try {
+        const manim: ManimModule = await import('manim-web');
+        if (disposed || gen !== generation || !container) return;
+        player?.dispose?.();
+        container.replaceChildren();
+        mountedWidth = pixelWidth;
+        player = new manim.Player(container, {
+          width: pixelWidth,
+          height: Math.round((pixelWidth * height) / width),
+          backgroundOpacity: 0,
+          autoPlay: true,
+          loop: false,
+        }) as unknown as ManimPlayerLike;
+        status = 'ready';
+        const current = player;
+        await current.sequence(async (scene) => {
+          await build(manim, scene);
+        });
+      } catch (err) {
+        if (gen === generation) {
+          errorMsg = `Failed to load animation: ${err instanceof Error ? err.message : String(err)}`;
+          status = 'error';
+        }
+      }
+    }
+
+    const initialWidth = Math.floor(w.getBoundingClientRect().width);
+    if (initialWidth > 0) void mount(initialWidth);
+
+    const observer = new ResizeObserver((entries) => {
+      const measured = Math.floor(entries[0]?.contentRect.width ?? 0);
+      if (measured <= 0 || measured === mountedWidth) return;
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        if (!disposed) void mount(measured);
+      }, 200);
+    });
+    observer.observe(w);
+
+    return () => {
+      disposed = true;
+      clearTimeout(resizeTimer);
+      observer.disconnect();
+      player?.dispose?.();
+    };
+  });
+
+  const classes = $derived(cn(manimRootBase, className));
+</script>
+
+<Ark as="figure" data-manim-state={status} class={classes} {...rest}>
+  <div bind:this={wrapper} class={manimContainerBase}>
+    <div bind:this={container} class="w-full"></div>
+    {#if status === 'loading'}
+      <div class={manimPlaceholderBase} style={`aspect-ratio: ${width} / ${height};`}>
+        <span class={manimPlaceholderLabelBase}>Loading animation…</span>
+      </div>
+    {/if}
+    {#if status === 'error'}<div class={manimErrorBase}>{errorMsg}</div>{/if}
+  </div>
+  {#if caption}<Ark as="figcaption" class={manimCaptionBase}>{caption}</Ark>{/if}
+</Ark>

package/dist/Manim.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ManimRecordingScene, ManimModule } from '@cloudvoyant/helix';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    build: (manim: ManimModule, scene: ManimRecordingScene) => Promise<void> | void;
+    width?: number;
+    height?: number;
+    caption?: string;
+    class?: string;
+} & HTMLAttributes<HTMLElement>;
+declare const Manim: import("svelte").Component<Props, {}, "">;
+type Manim = ReturnType<typeof Manim>;
+export default Manim;

package/dist/Notice.svelte

@@ -0,0 +1,87 @@
+<!-- libs/helix-svelte/src/Notice.svelte -->
+<!-- Closely based on: diffbook Notice (packages/diffbook-ui/src/components/Notice.tsx + ui/alert.tsx),
+     mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { noticeVariants, noticeTitleBase, noticeDescriptionBase, cn } from '@cloudvoyant/helix';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  type Variant = 'info' | 'success' | 'warning' | 'error' | 'none';
+
+  type Props = {
+    variant?: Variant;
+    title?: string;
+    children?: Snippet;
+    class?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { variant = 'info', title, children, class: className = '', ...rest }: Props = $props();
+
+  const classes = $derived(cn(noticeVariants({ variant }), className));
+</script>
+
+<Ark as="div" role={variant === 'error' ? 'alert' : variant === 'none' ? undefined : 'status'} class={classes} {...rest}>
+  {#if variant === 'success'}
+    <svg
+      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"
+    >
+      <circle cx="12" cy="12" r="10"></circle>
+      <path d="m9 12 2 2 4-4"></path>
+    </svg>
+  {:else if variant === 'warning'}
+    <svg
+      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="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
+      <path d="M12 9v4"></path>
+      <path d="M12 17h.01"></path>
+    </svg>
+  {:else if variant === 'error'}
+    <svg
+      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"
+    >
+      <circle cx="12" cy="12" r="10"></circle>
+      <path d="m15 9-6 6"></path>
+      <path d="m9 9 6 6"></path>
+    </svg>
+  {:else if variant === 'info'}
+    <svg
+      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"
+    >
+      <circle cx="12" cy="12" r="10"></circle>
+      <path d="M12 16v-4"></path>
+      <path d="M12 8h.01"></path>
+    </svg>
+  {/if}
+  {#if title}<div class={noticeTitleBase}>{title}</div>{/if}
+  {#if children}<div class={noticeDescriptionBase}>{@render children()}</div>{/if}
+</Ark>

package/dist/Notice.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type Variant = 'info' | 'success' | 'warning' | 'error' | 'none';
+type Props = {
+    variant?: Variant;
+    title?: string;
+    children?: Snippet;
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Notice: import("svelte").Component<Props, {}, "">;
+type Notice = ReturnType<typeof Notice>;
+export default Notice;

package/dist/PrevNext.svelte

@@ -0,0 +1,47 @@
+<!-- libs/helix-svelte/src/PrevNext.svelte -->
+<!-- Closely based on: diffbook PrevNext (packages/diffbook-ui/src/components/PrevNext.tsx),
+     mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import {
+    prevNextRootBase,
+    prevNextLinkBase,
+    prevNextLinkNextBase,
+    prevNextDirectionBase,
+    prevNextTitleBase,
+    prevNextSpacerBase,
+    cn,
+  } from '@cloudvoyant/helix';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    prev?: { title: string; href: string };
+    next?: { title: string; href: string };
+    class?: string;
+  } & HTMLAttributes<HTMLElement>;
+
+  let { prev, next, class: className = '', ...rest }: Props = $props();
+
+  const classes = $derived(cn(prevNextRootBase, className));
+</script>
+
+{#if prev || next}
+  <Ark as="nav" class={classes} aria-label="Previous and next pages" {...rest}>
+    {#if prev}
+      <Ark as="a" href={prev.href} class={prevNextLinkBase}>
+        <Ark as="span" class={prevNextDirectionBase}>Previous</Ark>
+        <Ark as="span" class={prevNextTitleBase}>← {prev.title}</Ark>
+      </Ark>
+    {:else}
+      <Ark as="span" class={prevNextSpacerBase}></Ark>
+    {/if}
+    {#if next}
+      <Ark as="a" href={next.href} class={cn(prevNextLinkBase, prevNextLinkNextBase)}>
+        <Ark as="span" class={prevNextDirectionBase}>Next</Ark>
+        <Ark as="span" class={prevNextTitleBase}>{next.title} →</Ark>
+      </Ark>
+    {:else}
+      <Ark as="span" class={prevNextSpacerBase}></Ark>
+    {/if}
+  </Ark>
+{/if}

package/dist/PrevNext.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    prev?: {
+        title: string;
+        href: string;
+    };
+    next?: {
+        title: string;
+        href: string;
+    };
+    class?: string;
+} & HTMLAttributes<HTMLElement>;
+declare const PrevNext: import("svelte").Component<Props, {}, "">;
+type PrevNext = ReturnType<typeof PrevNext>;
+export default PrevNext;

package/dist/Reveal.svelte

@@ -0,0 +1,40 @@
+<!-- libs/helix-svelte/src/Reveal.svelte -->
+<!-- Closely based on: diffbook QA (packages/diffbook-ui/src/components/QA.tsx), renamed Reveal,
+     rebuilt on Ark UI Collapsible, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from '@ark-ui/svelte/collapsible';
+  import { revealRootBase, revealTriggerBase, revealChevronBase, revealContentBase, cn } from '@cloudvoyant/helix';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    question: string;
+    children?: Snippet;
+    class?: string;
+  };
+
+  let { question, children, class: className = '' }: Props = $props();
+
+  const classes = $derived(cn(revealRootBase, className));
+</script>
+
+<CollapsibleRoot class={classes}>
+  <CollapsibleTrigger class={revealTriggerBase}>
+    <svg
+      class={revealChevronBase}
+      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>{question}</span>
+  </CollapsibleTrigger>
+  <CollapsibleContent class={revealContentBase}>
+    {#if children}{@render children()}{/if}
+  </CollapsibleContent>
+</CollapsibleRoot>

package/dist/Reveal.svelte.d.ts

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