@cloudvoyant/helical-svelte 0.19.0

package/dist/Manim.svelte

@@ -0,0 +1,119 @@
+<!-- libs/helical-svelte/src/Manim.svelte -->
+<!-- Closely based on: diffbook Manim, rebuilt with the scene builder as a prop (client-only),
+     mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import {
+    manimRootBase,
+    manimContainerBase,
+    manimPlaceholderBase,
+    manimPlaceholderLabelBase,
+    manimErrorBase,
+    manimCaptionBase,
+    cn,
+  } from '@cloudvoyant/helical-ui';
+  import type { ManimRecordingScene, ManimModule } from '@cloudvoyant/helical-ui';
+  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/helical-ui';
+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/Mermaid.svelte

@@ -0,0 +1,92 @@
+<!-- libs/helical-svelte/src/Mermaid.svelte -->
+<!-- Closely based on: diffbook Mermaid (packages/diffbook-ui/src/components/Mermaid.tsx placeholder +
+     apps/book/src/components/article-body.tsx client renderer), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import {
+    mermaidRootBase,
+    mermaidSourceBase,
+    mermaidSvgBase,
+    mermaidLoadingBase,
+    renderMermaidSource,
+    mermaidSvgAspectRatio,
+    cn,
+  } from '@cloudvoyant/helical-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    /** Mermaid diagram source. */
+    code: string;
+    /** Pre-rendered SVG markup. When provided the component renders it immediately and never
+     *  imports `mermaid` client-side — the server-side rendering path. The SVG should carry a
+     *  `viewBox` so its aspect ratio can be reserved (no layout shift). */
+    svg?: string;
+    /** Extra classes for the root container. */
+    class?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { code, svg = undefined, class: className = '', ...rest }: Props = $props();
+
+  type Status = 'loading' | 'done' | 'error';
+  let status = $state<Status>(svg !== undefined ? 'done' : 'loading');
+  let rendered = $state<string | null>(svg ?? null);
+
+  $effect(() => {
+    if (svg !== undefined) return; // prerendered — nothing to load client-side
+    let cancelled = false;
+    status = 'loading';
+    rendered = null;
+    renderMermaidSource(code)
+      .then((markup) => {
+        if (!cancelled) {
+          rendered = markup;
+          status = 'done';
+        }
+      })
+      .catch(() => {
+        if (!cancelled) status = 'error';
+      });
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  const aspectRatio = $derived(rendered !== null ? mermaidSvgAspectRatio(rendered) : undefined);
+  const classes = $derived(cn(mermaidRootBase, className));
+  // Svelte style is a string; append aspect-ratio last so the diagram's ratio wins over
+  // any caller style and the swap never shifts layout (matches the React wrapper).
+  const styles = $derived(
+    aspectRatio !== undefined
+      ? `${rest.style ? `${rest.style.trim().replace(/;?\s*$/, '')};` : ''}aspect-ratio: ${aspectRatio};`
+      : rest.style,
+  );
+</script>
+
+<Ark
+  as="div"
+  {...rest}
+  data-mermaid-code={JSON.stringify(code)}
+  data-mermaid-src={rendered !== null ? code : undefined}
+  data-mermaid-state={status}
+  style={styles}
+  class={classes}
+>
+  {#if rendered !== null}
+    <div class={mermaidSvgBase}>{@html rendered}</div>
+  {:else if status === 'error'}
+    <pre class={mermaidSourceBase}>{code}</pre>
+  {:else}
+    <div class={mermaidLoadingBase} role="status" aria-label="Rendering diagram" data-mermaid-loading>
+      <span
+        aria-hidden="true"
+        class="h-5 w-5 shrink-0 animate-spin rounded-full border-2 border-muted-foreground/25 border-t-muted-foreground"></span>
+      <span class="text-sm text-muted-foreground">Rendering diagram</span>
+    </div>
+    <noscript>
+      <!-- Only active with JS disabled: hide the loading spinner, which can never resolve,
+           and show the raw source instead. -->
+      <style>[data-mermaid-loading]{display:none}</style>
+      <pre class={mermaidSourceBase}>{code}</pre>
+    </noscript>
+  {/if}
+</Ark>

package/dist/Mermaid.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    /** Mermaid diagram source. */
+    code: string;
+    /** Pre-rendered SVG markup. When provided the component renders it immediately and never
+     *  imports `mermaid` client-side — the server-side rendering path. The SVG should carry a
+     *  `viewBox` so its aspect ratio can be reserved (no layout shift). */
+    svg?: string;
+    /** Extra classes for the root container. */
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Mermaid: import("svelte").Component<Props, {}, "">;
+type Mermaid = ReturnType<typeof Mermaid>;
+export default Mermaid;

package/dist/Notice.svelte

@@ -0,0 +1,87 @@
+<!-- libs/helical-svelte/src/Notice.svelte -->
+<!-- Closely based on: diffbook Notice (packages/diffbook-ui/src/components/Notice.tsx + ui/alert.tsx),
+     mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { noticeVariants, noticeTitleBase, noticeDescriptionBase, cn } from '@cloudvoyant/helical-ui';
+  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/Page.svelte

@@ -0,0 +1,27 @@
+<!-- libs/helical-svelte/src/Page.svelte -->
+<!-- No upstream component; composed from @cloudvoyant/helical-ui page classes, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { pageVariants, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    variant?: 'default' | 'landing';
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let {
+    class: className = '',
+    variant = 'default',
+    children,
+    ...rest
+  }: Props = $props();
+
+  const rootClasses = $derived(cn(pageVariants({ variant }), className));
+</script>
+
+<Ark as="div" data-slot="page" class={rootClasses} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/Page.svelte.d.ts

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

package/dist/PageContent.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helical-svelte/src/PageContent.svelte -->
+<!-- No upstream component; composed from @cloudvoyant/helical-ui page classes, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { pageContentBase, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(pageContentBase, className));
+</script>
+
+<Ark as="main" data-slot="page-content" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/PageContent.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<HTMLElement>;
+declare const PageContent: import("svelte").Component<Props, {}, "">;
+type PageContent = ReturnType<typeof PageContent>;
+export default PageContent;

package/dist/PageFooter.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helical-svelte/src/PageFooter.svelte -->
+<!-- No upstream component; composed from @cloudvoyant/helical-ui page classes, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { pageFooterBase, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(pageFooterBase, className));
+</script>
+
+<Ark as="footer" data-slot="page-footer" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/PageFooter.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<HTMLElement>;
+declare const PageFooter: import("svelte").Component<Props, {}, "">;
+type PageFooter = ReturnType<typeof PageFooter>;
+export default PageFooter;

package/dist/PageGutter.svelte

@@ -0,0 +1,37 @@
+<!-- libs/helical-svelte/src/PageGutter.svelte -->
+<!-- No upstream component; composed from @cloudvoyant/helical-ui page classes, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { pageGutterAreaBase, pageGutterVariants, pageGutterContentVariants, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    contentClass?: string;
+    side?: 'left' | 'right';
+    align?: 'start' | 'center' | 'end';
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let {
+    class: className = '',
+    contentClass = '',
+    side = 'left',
+    align = 'start',
+    children,
+    ...rest
+  }: Props = $props();
+
+  const areaClasses = $derived(cn(pageGutterAreaBase, side === 'right' && '[grid-area:right]'));
+  const gutterClasses = $derived(cn(pageGutterVariants({ side }), className));
+  const contentClasses = $derived(cn(pageGutterContentVariants({ align }), contentClass));
+</script>
+
+<div data-slot="page-gutter-area" class={areaClasses}>
+  <Ark as="div" data-slot="page-gutter" class={gutterClasses} {...rest}>
+    <div data-slot="page-gutter-content" class={contentClasses}>
+      {@render children?.()}
+    </div>
+  </Ark>
+</div>

package/dist/PageGutter.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    contentClass?: string;
+    side?: 'left' | 'right';
+    align?: 'start' | 'center' | 'end';
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const PageGutter: import("svelte").Component<Props, {}, "">;
+type PageGutter = ReturnType<typeof PageGutter>;
+export default PageGutter;

package/dist/PageSection.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helical-svelte/src/PageSection.svelte -->
+<!-- No upstream component; composed from @cloudvoyant/helical-ui page classes, mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { pageSectionBase, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(pageSectionBase, className));
+</script>
+
+<Ark as="section" data-slot="page-section" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/PageSection.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<HTMLElement>;
+declare const PageSection: import("svelte").Component<Props, {}, "">;
+type PageSection = ReturnType<typeof PageSection>;
+export default PageSection;

package/dist/Portal.svelte

@@ -0,0 +1,11 @@
+<!-- libs/helical-svelte/src/Portal.svelte -->
+<!-- Closely based on: Ark UI portal (@ark-ui/svelte/portal) -->
+<script lang="ts">
+  import { Portal, type PortalProps } from '@ark-ui/svelte/portal';
+
+  let { children, disabled = false }: PortalProps = $props();
+</script>
+
+<Portal {disabled}>
+  {@render children?.()}
+</Portal>

package/dist/Portal.svelte.d.ts

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

package/dist/PrevNext.svelte

@@ -0,0 +1,47 @@
+<!-- libs/helical-svelte/src/PrevNext.svelte -->
+<!-- Closely based on: diffbook PrevNext (packages/diffbook-ui/src/components/PrevNext.tsx),
+     mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import {
+    prevNextRootBase,
+    prevNextLinkBase,
+    prevNextLinkNextBase,
+    prevNextDirectionBase,
+    prevNextTitleBase,
+    prevNextSpacerBase,
+    cn,
+  } from '@cloudvoyant/helical-ui';
+  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/helical-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/helical-react -->
+<script lang="ts">
+  import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from '@ark-ui/svelte/collapsible';
+  import { revealRootBase, revealTriggerBase, revealChevronBase, revealContentBase, cn } from '@cloudvoyant/helical-ui';
+  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;