@cloudvoyant/vortex-svelte 0.17.0-rc.202609040136.45c8986

package/dist/Badge.svelte

@@ -0,0 +1,24 @@
+<!-- libs/vortex-svelte/src/Badge.svelte -->
+<!-- Closely based on: @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/vortex-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { badgeVariants, cn } from '@cloudvoyant/vortex-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    variant?: 'solid' | 'subtle' | 'outline' | 'surface' | 'plain';
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warn' | 'info';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLSpanElement>;
+
+  let { variant = 'subtle', color = 'primary', size = 'sm', class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(badgeVariants({ variant, color, size }), className));
+</script>
+
+<Ark as="span" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/Badge.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    variant?: 'solid' | 'subtle' | 'outline' | 'surface' | 'plain';
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warn' | 'info';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLSpanElement>;
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/Button.svelte

@@ -0,0 +1,35 @@
+<!-- libs/vortex-svelte/src/Button.svelte -->
+<!-- Closely based on: @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/vortex-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { buttonVariants, cn } from '@cloudvoyant/vortex-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  type Props = {
+    variant?: 'solid' | 'outline' | 'text';
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warn' | 'info';
+    size?: 'sm' | 'md' | 'lg' | 'icon';
+    class?: string;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    children?: Snippet;
+  } & HTMLButtonAttributes;
+
+  let {
+    variant = 'solid',
+    color = 'primary',
+    size = 'md',
+    class: className = '',
+    type = 'button',
+    disabled = false,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const classes = $derived(cn(buttonVariants({ variant, color, size }), className));
+</script>
+
+<Ark as="button" class={classes} {type} {disabled} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/Button.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Props = {
+    variant?: 'solid' | 'outline' | 'text';
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warn' | 'info';
+    size?: 'sm' | 'md' | 'lg' | 'icon';
+    class?: string;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    children?: Snippet;
+} & HTMLButtonAttributes;
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/Center.svelte

@@ -0,0 +1,21 @@
+<!-- libs/vortex-svelte/src/Center.svelte -->
+<!-- Closely based on: Chakra UI Center, built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/vortex-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { centerBase, cn } from '@cloudvoyant/vortex-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(centerBase, className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

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

package/dist/Chart.svelte

@@ -0,0 +1,52 @@
+<!-- libs/vortex-svelte/src/Chart.svelte -->
+<!-- Closely based on: diffbook Chart, rebuilt on TanStack Charts (shared definition with React),
+     mirrored from @cloudvoyant/vortex-react -->
+<script lang="ts">
+  import { Chart as TanStackChart } from '@tanstack/charts/svelte';
+  import { chartRootBase, cn, buildChartDefinition } from '@cloudvoyant/vortex-ui';
+  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/Col.svelte

@@ -0,0 +1,21 @@
+<!-- libs/vortex-svelte/src/Col.svelte -->
+<!-- Closely based on: Chakra UI Flex (direction="column"), built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/vortex-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { colBase, cn } from '@cloudvoyant/vortex-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(colBase, className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

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

package/dist/Container.svelte

@@ -0,0 +1,21 @@
+<!-- libs/vortex-svelte/src/Container.svelte -->
+<!-- Closely based on: Chakra UI Container, built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/vortex-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { containerBase, cn } from '@cloudvoyant/vortex-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(containerBase, className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

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

package/dist/CopyButton.svelte

@@ -0,0 +1,58 @@
+<!-- libs/vortex-svelte/src/CopyButton.svelte -->
+<!-- Closely based on: Shark UI clipboard (@ark-ui/svelte/clipboard), mirrored from @cloudvoyant/vortex-react -->
+<script lang="ts">
+  import {
+    ClipboardRoot,
+    ClipboardTrigger,
+    ClipboardIndicator,
+    type ClipboardRootProps,
+  } from '@ark-ui/svelte/clipboard';
+  import { clipboardTriggerBase, cn } from '@cloudvoyant/vortex-ui';
+
+  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/vortex-svelte/src/Figure.svelte -->
+<!-- Closely based on: diffbook Figure (packages/diffbook-ui/src/components/Figure.tsx),
+     mirrored from @cloudvoyant/vortex-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { figureRootBase, figureImageBase, figureCaptionBase, cn } from '@cloudvoyant/vortex-ui';
+  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/HStack.svelte

@@ -0,0 +1,21 @@
+<!-- libs/vortex-svelte/src/HStack.svelte -->
+<!-- Closely based on: Chakra UI HStack, built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/vortex-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { hstackBase, cn } from '@cloudvoyant/vortex-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(hstackBase, className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

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

package/dist/InlineLaTeX.svelte

@@ -0,0 +1,34 @@
+<!-- libs/vortex-svelte/src/InlineLaTeX.svelte -->
+<!-- Inline LaTeX equation (displayMode: false), mirrored from @cloudvoyant/vortex-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { latexRootBase, latexInlineBase, latexErrorBase, toLaTeX, cn } from '@cloudvoyant/vortex-ui';
+  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/Input.svelte

@@ -0,0 +1,17 @@
+<!-- libs/vortex-svelte/src/Input.svelte -->
+<!-- Closely based on: Shark UI input (@ark-ui/svelte/field), mirrored from @cloudvoyant/vortex-react -->
+<script lang="ts">
+  import { FieldInput, type FieldInputProps } from '@ark-ui/svelte/field';
+  import { inputVariants, cn } from '@cloudvoyant/vortex-ui';
+
+  type Props = Omit<FieldInputProps, 'size'> & {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+  };
+
+  let { size = 'md', class: className = '', ...rest }: Props = $props();
+
+  const classes = $derived(cn(inputVariants({ size }), className));
+</script>
+
+<FieldInput class={classes} {...rest} />

package/dist/Input.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type FieldInputProps } from '@ark-ui/svelte/field';
+type Props = Omit<FieldInputProps, 'size'> & {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+};
+declare const Input: import("svelte").Component<Props, {}, "">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/Item.svelte

@@ -0,0 +1,22 @@
+<!-- libs/vortex-svelte/src/Item.svelte -->
+<!-- Closely based on: vortex-ui example-item primitive, built on @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/vortex-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { itemVariants, cn } from '@cloudvoyant/vortex-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    variant?: 'plain' | 'surface';
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { variant = 'plain', class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(itemVariants({ variant }), className));
+</script>
+
+<Ark as="div" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/Item.svelte.d.ts

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

package/dist/LaTeX.svelte

@@ -0,0 +1,34 @@
+<!-- libs/vortex-svelte/src/LaTeX.svelte -->
+<!-- Closely based on: diffbook's KaTeX pipeline; block component, mirrored from @cloudvoyant/vortex-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { latexRootBase, latexDisplayBase, latexErrorBase, toLaTeX, cn } from '@cloudvoyant/vortex-ui';
+  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;