components-svelte 0.1.0

package/dist/components/mermaid/Mermaid.svelte

@@ -0,0 +1,181 @@
+<script module lang="ts">
+  // Svelte's module script keeps the counter shared across component instances,
+  // matching React's per-instance useId() uniqueness for duplicate diagrams.
+  let nextMermaidId = 0;
+</script>
+
+<script lang="ts">
+  import mermaid, { type MermaidConfig } from "mermaid";
+  import { onMount } from "svelte";
+  import { Classes } from "../../constants/selectors";
+  import { useIsDarkTheme } from "../../hooks/use-is-dark-theme.svelte";
+  import { cn } from "../../utils/cn";
+  import { makeMarkerIdsUnique } from "../../utils/make-marker-ids-unique";
+  import { usePanZoom } from "./use-pan-zoom.svelte";
+  import ZoomControls from "./ZoomControls.svelte";
+
+  const MIN_HEIGHT_FOR_CONTROLS = 120;
+  const GANTT_DEFAULT_WIDTH = 800;
+
+  export type MermaidPlacement =
+    | "top-left"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-right";
+
+  export type MermaidProps = {
+    chart: string;
+    className?: string;
+    ariaLabel?: string;
+    placement?: MermaidPlacement;
+    actions?: boolean;
+  };
+
+  let {
+    chart,
+    className,
+    ariaLabel = "Mermaid diagram",
+    placement = "bottom-right",
+    actions,
+  }: MermaidProps = $props();
+
+  let svg = $state("");
+  let error = $state<string | null>(null);
+  let showControls = $state(false);
+  let containerRef = $state<HTMLDivElement | null>(null);
+
+  const id = `mermaid-${nextMermaidId++}`;
+  const theme = useIsDarkTheme();
+  const panZoom = usePanZoom();
+
+  let rootClass = $derived(cn(Classes.Mermaid, "group relative overflow-hidden", className));
+  let errorClass = $derived(
+    cn(
+      Classes.Mermaid,
+      "rounded-md border border-red-200 bg-red-50 p-4 text-red-700 text-sm dark:border-red-900/50 dark:bg-red-950/50 dark:text-red-400",
+      className
+    )
+  );
+
+  onMount(() => {
+    panZoom.reset();
+    error = null;
+  });
+
+  $effect(() => {
+    const currentChart = chart;
+    const isDarkTheme = theme.isDarkTheme;
+    let cancelled = false;
+
+    const renderChart = async () => {
+      const mermaidConfig: MermaidConfig = {
+        startOnLoad: false,
+        fontFamily: "inherit",
+        theme: isDarkTheme ? "dark" : "default",
+        gantt: {
+          useWidth: GANTT_DEFAULT_WIDTH,
+        },
+      };
+
+      // create a temporary container for mermaid to render into
+      const tempContainer = document.createElement("div");
+      tempContainer.style.position = "absolute";
+      tempContainer.style.left = "-9999px";
+      tempContainer.style.top = "-9999px";
+      document.body.appendChild(tempContainer);
+
+      try {
+        mermaid.initialize(mermaidConfig);
+
+        const uniqueId = `mermaid-${id.replace(/:/g, "")}-${Date.now()}`;
+
+        const { svg: renderedSvg } = await mermaid.render(
+          uniqueId,
+          currentChart,
+          tempContainer
+        );
+
+        if (!cancelled) {
+          const uniqueSvg = makeMarkerIdsUnique(renderedSvg, uniqueId);
+          svg = uniqueSvg;
+          error = null;
+        }
+      } catch (err) {
+        console.error("Error while rendering mermaid", err);
+
+        if (!cancelled) {
+          const message = err instanceof Error ? err.message : "Failed to render diagram";
+          error = message;
+          svg = "";
+        }
+      } finally {
+        tempContainer.parentNode?.removeChild(tempContainer);
+      }
+    };
+
+    renderChart().catch(console.error);
+
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  $effect(() => {
+    if (actions !== undefined) {
+      return;
+    }
+
+    const container = containerRef;
+
+    if (!container || typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const height = entry.contentRect.height;
+        showControls = height >= MIN_HEIGHT_FOR_CONTROLS;
+      }
+    });
+
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+</script>
+
+{#if error}
+  <div
+    class={errorClass}
+    data-component-part="mermaid-error"
+    role="alert"
+  >
+    <p class="font-medium" data-component-part="mermaid-error-title">Failed to render diagram</p>
+    <p class="mt-1 text-xs" data-component-part="mermaid-error-message">{error}</p>
+  </div>
+{:else}
+  <div class={rootClass}>
+    {#if actions === true || (actions === undefined && showControls)}
+      <ZoomControls
+        onPan={panZoom.pan}
+        onReset={panZoom.reset}
+        onZoomIn={panZoom.zoomIn}
+        onZoomOut={panZoom.zoomOut}
+        panStep={panZoom.panStep}
+        placement={placement}
+      />
+    {/if}
+    <div
+      aria-label={ariaLabel}
+      data-component-part="mermaid-diagram"
+      bind:this={containerRef}
+      role="img"
+      style={panZoom.style}
+    >
+      <!-- Svelte equivalent of React's dangerouslySetInnerHTML; Mermaid owns this SVG. -->
+      {@html svg}
+    </div>
+  </div>
+{/if}

package/dist/components/mermaid/Mermaid.svelte.d.ts

@@ -0,0 +1,11 @@
+export type MermaidPlacement = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export type MermaidProps = {
+    chart: string;
+    className?: string;
+    ariaLabel?: string;
+    placement?: MermaidPlacement;
+    actions?: boolean;
+};
+declare const Mermaid: import("svelte").Component<MermaidProps, {}, "">;
+type Mermaid = ReturnType<typeof Mermaid>;
+export default Mermaid;

package/dist/components/mermaid/ZoomControls.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import {
+    ChevronDown,
+    ChevronLeft,
+    ChevronRight,
+    ChevronUp,
+    RotateCcw,
+    ZoomIn,
+    ZoomOut,
+  } from "@lucide/svelte";
+  import { cn } from "../../utils/cn";
+  import type { MermaidPlacement } from "./Mermaid.svelte";
+
+  export type ZoomControlsProps = {
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onReset: () => void;
+    onPan: (dx: number, dy: number) => void;
+    panStep: number;
+    placement?: MermaidPlacement;
+  };
+
+  let { onZoomIn, onZoomOut, onReset, onPan, panStep, placement }: ZoomControlsProps = $props();
+
+  const buttonClass = cn(
+    "flex size-7 cursor-pointer touch-manipulation items-center justify-center rounded-md border border-stone-200 bg-white text-stone-900 transition-[transform] duration-100 hover:bg-stone-50 motion-safe:active:scale-95 dark:border-white/10 dark:bg-stone-900 dark:text-white dark:hover:bg-stone-800 [&_svg]:size-4"
+  );
+
+  let controlsClass = $derived(
+    cn(
+      "absolute z-10 grid grid-cols-3 gap-1",
+      placement === "top-left" && "top-2 left-2",
+      placement === "top-right" && "top-2 right-2",
+      placement === "bottom-left" && "bottom-2 left-2",
+      placement === "bottom-right" && "right-2 bottom-2"
+    )
+  );
+</script>
+
+<!-- The React implementation uses a labelled group for these non-semantic controls. -->
+<div
+  aria-label="Diagram zoom and pan controls"
+  class={controlsClass}
+  data-component-part="zoom-controls"
+  role="group"
+>
+  <div aria-hidden="true" class="pointer-events-none"></div>
+
+  <button aria-label="Pan up" class={buttonClass} title="Pan up" type="button" onclick={() => onPan(0, panStep)}>
+    <ChevronUp aria-hidden="true" />
+  </button>
+  <button aria-label="Zoom in" class={buttonClass} title="Zoom in" type="button" onclick={onZoomIn}>
+    <ZoomIn aria-hidden="true" />
+  </button>
+
+  <button aria-label="Pan left" class={buttonClass} title="Pan left" type="button" onclick={() => onPan(panStep, 0)}>
+    <ChevronLeft aria-hidden="true" />
+  </button>
+  <button aria-label="Reset view" class={buttonClass} title="Reset view" type="button" onclick={onReset}>
+    <RotateCcw aria-hidden="true" />
+  </button>
+  <button aria-label="Pan right" class={buttonClass} title="Pan right" type="button" onclick={() => onPan(-panStep, 0)}>
+    <ChevronRight aria-hidden="true" />
+  </button>
+
+  <div aria-hidden="true" class="pointer-events-none"></div>
+
+  <button aria-label="Pan down" class={buttonClass} title="Pan down" type="button" onclick={() => onPan(0, -panStep)}>
+    <ChevronDown aria-hidden="true" />
+  </button>
+  <button aria-label="Zoom out" class={buttonClass} title="Zoom out" type="button" onclick={onZoomOut}>
+    <ZoomOut aria-hidden="true" />
+  </button>
+</div>

package/dist/components/mermaid/ZoomControls.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { MermaidPlacement } from "./Mermaid.svelte";
+export type ZoomControlsProps = {
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onReset: () => void;
+    onPan: (dx: number, dy: number) => void;
+    panStep: number;
+    placement?: MermaidPlacement;
+};
+declare const ZoomControls: import("svelte").Component<ZoomControlsProps, {}, "">;
+type ZoomControls = ReturnType<typeof ZoomControls>;
+export default ZoomControls;

package/dist/components/mermaid/index.d.ts

@@ -0,0 +1,7 @@
+import Mermaid from "./Mermaid.svelte";
+import ZoomControls from "./ZoomControls.svelte";
+export type { MermaidProps, MermaidPlacement } from "./Mermaid.svelte";
+export { Mermaid, ZoomControls };
+export type { UsePanZoomReturn } from "./use-pan-zoom.svelte";
+export { usePanZoom } from "./use-pan-zoom.svelte";
+export type { ZoomControlsProps } from "./ZoomControls.svelte";

package/dist/components/mermaid/index.js

@@ -0,0 +1,4 @@
+import Mermaid from "./Mermaid.svelte";
+import ZoomControls from "./ZoomControls.svelte";
+export { Mermaid, ZoomControls };
+export { usePanZoom } from "./use-pan-zoom.svelte";

package/dist/components/mermaid/use-pan-zoom.svelte.d.ts

@@ -0,0 +1,11 @@
+type UsePanZoomReturn = {
+    style: string;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    reset: () => void;
+    pan: (dx: number, dy: number) => void;
+    panStep: number;
+};
+declare const usePanZoom: () => UsePanZoomReturn;
+export { usePanZoom };
+export type { UsePanZoomReturn };

package/dist/components/mermaid/use-pan-zoom.svelte.js

@@ -0,0 +1,41 @@
+const MIN_SCALE = 0.25;
+const MAX_SCALE = 4;
+const ZOOM_STEP = 0.15;
+const PAN_STEP = 50;
+const DEFAULT_TRANSFORM = { scale: 1, x: 0, y: 0 };
+const usePanZoom = () => {
+    let transform = $state({ ...DEFAULT_TRANSFORM });
+    const zoomIn = () => {
+        transform = {
+            ...transform,
+            scale: Math.min(transform.scale + ZOOM_STEP, MAX_SCALE),
+        };
+    };
+    const zoomOut = () => {
+        transform = {
+            ...transform,
+            scale: Math.max(transform.scale - ZOOM_STEP, MIN_SCALE),
+        };
+    };
+    const reset = () => {
+        transform = { ...DEFAULT_TRANSFORM };
+    };
+    const pan = (dx, dy) => {
+        transform = {
+            ...transform,
+            x: transform.x + dx,
+            y: transform.y + dy,
+        };
+    };
+    return {
+        get style() {
+            return `transform: translate(${transform.x}px, ${transform.y}px) scale(${transform.scale}); transform-origin: center center; transition: transform 0.15s ease-out;`;
+        },
+        zoomIn,
+        zoomOut,
+        reset,
+        pan,
+        panStep: PAN_STEP,
+    };
+};
+export { usePanZoom };

package/dist/components/panel/Panel.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn } from "../../utils/cn";
+
+  export type PanelProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+    className?: string;
+  };
+
+  let {
+    children,
+    class: classAttribute,
+    className,
+    ...restProps
+  }: PanelProps = $props();
+
+  let panelClass = $derived(
+    cn("block xl:hidden", classAttribute ?? className)
+  );
+</script>
+
+<div class={panelClass} {...restProps}>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/components/panel/Panel.svelte.d.ts

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

package/dist/components/panel/index.d.ts

@@ -0,0 +1,3 @@
+import Panel from "./Panel.svelte";
+export type { default as PanelProps } from "./Panel.svelte";
+export { Panel };

package/dist/components/panel/index.js

@@ -0,0 +1,2 @@
+import Panel from "./Panel.svelte";
+export { Panel };

package/dist/components/property/DeprecatedPill.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  type DeprecatedPillProps = {
+    label?: string;
+  };
+
+  let { label }: DeprecatedPillProps = $props();
+</script>
+
+{#if label}
+  <div
+    class="whitespace-nowrap rounded-md bg-amber-100/50 px-2 py-0.5 font-medium text-amber-600 dark:bg-amber-400/10 dark:text-amber-300"
+    data-component-part="field-deprecated-pill"
+  >
+    {label}
+  </div>
+{/if}

package/dist/components/property/DeprecatedPill.svelte.d.ts

@@ -0,0 +1,6 @@
+type DeprecatedPillProps = {
+    label?: string;
+};
+declare const DeprecatedPill: import("svelte").Component<DeprecatedPillProps, {}, "">;
+type DeprecatedPill = ReturnType<typeof DeprecatedPill>;
+export default DeprecatedPill;

package/dist/components/property/InfoPill.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { cn } from "../../utils/cn";
+
+  type InfoPillProps = {
+    children?: Snippet;
+    prefix?: string;
+    class?: string;
+    className?: string;
+  };
+
+  let {
+    children,
+    prefix,
+    class: classAttribute,
+    className,
+  }: InfoPillProps = $props();
+
+  let pillClass = $derived(
+    cn(
+      "flex items-center gap-1 break-all rounded-md bg-stone-100/50 px-2 py-0.5 font-medium text-stone-600 dark:bg-white/5 dark:text-stone-200",
+      classAttribute ?? className
+    )
+  );
+</script>
+
+<div class={pillClass} data-component-part="field-info-pill">
+  {#if prefix}
+    <span class="text-stone-400 dark:text-stone-500">{prefix}</span>
+  {/if}
+  <span>{#if children}{@render children()}{/if}</span>
+</div>

package/dist/components/property/InfoPill.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type InfoPillProps = {
+    children?: Snippet;
+    prefix?: string;
+    class?: string;
+    className?: string;
+};
+declare const InfoPill: import("svelte").Component<InfoPillProps, {}, "">;
+type InfoPill = ReturnType<typeof InfoPill>;
+export default InfoPill;

package/dist/components/property/ParamHead.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+  import slugify from "@sindresorhus/slugify";
+  import { onMount } from "svelte";
+  import Icon from "../icon/Icon.svelte";
+  import { cn } from "../../utils/cn";
+  import { copyToClipboard } from "../../utils/copy-to-clipboard";
+  import DeprecatedPill from "./DeprecatedPill.svelte";
+  import InfoPill from "./InfoPill.svelte";
+  import RequiredPill from "./RequiredPill.svelte";
+
+  type ParamHeadProps = {
+    name?: string | null;
+    type: string;
+    location?: string;
+    hidden?: boolean;
+    default?: unknown;
+    required?: boolean;
+    deprecated?: boolean;
+    id?: string;
+    pre?: string[];
+    post?: string[];
+    class?: string;
+    className?: string;
+    onMount?: () => void;
+    navigateToHeaderAriaLabel?: string;
+    defaultLabel?: string;
+    requiredLabel?: string;
+    deprecatedLabel?: string;
+  };
+
+  let {
+    name,
+    type,
+    location,
+    required,
+    deprecated,
+    default: defaultValue,
+    id,
+    pre,
+    post,
+    onMount: onMountProp,
+    navigateToHeaderAriaLabel,
+    defaultLabel,
+    requiredLabel,
+    deprecatedLabel,
+  }: ParamHeadProps = $props();
+
+  let pillsElement: HTMLDivElement | null = $state(null);
+  let isMultiLine = $state(false);
+  let paramId = $derived(id ?? slugify(name ?? "", { decamelize: true }));
+
+  // ResizeObserver replaces the React effect that tracks wrapped metadata pills.
+  function observePills(node: HTMLDivElement) {
+    const checkHeight = () => {
+      isMultiLine = node.offsetHeight > 28;
+    };
+
+    pillsElement = node;
+    checkHeight();
+
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(checkHeight);
+    resizeObserver.observe(node);
+
+    return {
+      destroy() {
+        resizeObserver.unobserve(node);
+        if (pillsElement === node) {
+          pillsElement = null;
+        }
+      },
+    };
+  }
+
+  async function copyAnchorLink() {
+    if (paramId) {
+      await copyToClipboard(`${window.location.href.split("#")[0]}#${paramId}`);
+      window.location.hash = paramId;
+    }
+  }
+
+  function handleFieldNameKeydown(event: KeyboardEvent) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      void copyAnchorLink();
+    }
+  }
+
+  // Svelte effect replaces React's onMount effect and also reacts to a changed callback prop.
+  $effect(() => {
+    onMountProp?.();
+  });
+</script>
+
+{#if name != null}
+  <div class="group/param-head param-head relative flex break-all font-mono text-sm" id={paramId}>
+    <div class="mr-5 flex flex-1 flex-col content-start py-0.5">
+      <div class="flex flex-wrap items-center gap-2">
+        {#if paramId}
+          <div class="absolute -top-1.5 -left-9">
+            <a
+              aria-label={navigateToHeaderAriaLabel}
+              class="group/link flex items-center border-0 py-2 opacity-0 focus:opacity-100 focus:outline-0 group-hover/param-head:opacity-100"
+              href={`#${paramId}`}
+              onclick={copyAnchorLink}
+            >
+              &#8203;
+              <div class="flex size-6 items-center justify-center rounded-md bg-white text-stone-400 shadow-sm ring-1 ring-stone-400/30 hover:ring-stone-400/60 group-focus/link:border-2 group-focus/link:border-primary dark:bg-background-dark dark:text-white/50 dark:ring-1 dark:ring-stone-700/25 dark:brightness-[1.35] dark:group-focus/link:border-primary-light dark:hover:ring-white/20 dark:hover:brightness-150">
+                <span aria-hidden="true" class="contents">
+                  <Icon
+                    class="size-3 bg-stone-400 dark:bg-white/50"
+                    icon="link"
+                    overrideColor={true}
+                    overrideSize={true}
+                  />
+                </span>
+              </div>
+            </a>
+          </div>
+        {/if}
+        {#each pre ?? [] as item, index (index)}
+          <div
+            class="rounded-md bg-stone-100/50 px-2 py-0.5 text-stone-600 dark:bg-white/5 dark:text-stone-200"
+            data-component-part="field-meta-pre"
+          >
+            {item}
+          </div>
+        {/each}
+        <!-- Keep the React field-name click behavior and add equivalent keyboard support. -->
+        <div
+          aria-label={paramId ? `Copy anchor link for ${name}` : undefined}
+          class="overflow-wrap-anywhere cursor-pointer font-semibold text-primary dark:text-primary-light"
+          data-component-part="field-name"
+          onclick={copyAnchorLink}
+          onkeydown={handleFieldNameKeydown}
+          role="button"
+          tabindex="0"
+        >
+          {name}
+        </div>
+        <div
+          bind:this={pillsElement}
+          use:observePills
+          class={cn(
+            "inline items-center gap-2 font-medium text-xs [&_div]:mr-2 [&_div]:inline",
+            isMultiLine ? "[&_div]:leading-6" : "[&_div]:leading-5"
+          )}
+          data-component-part="field-meta"
+        >
+          {#if type}
+            <InfoPill>{#snippet children()}{type}{/snippet}</InfoPill>
+          {/if}
+          {#if location}
+            <InfoPill>{#snippet children()}{location}{/snippet}</InfoPill>
+          {/if}
+          {#if defaultValue != null}
+            <InfoPill prefix={defaultLabel}>
+              {#snippet children()}
+                {typeof defaultValue === "string"
+                  ? defaultValue === ""
+                    ? '""'
+                    : defaultValue
+                  : JSON.stringify(defaultValue)}
+              {/snippet}
+            </InfoPill>
+          {/if}
+          {#if required}
+            <RequiredPill label={requiredLabel} />
+          {/if}
+          {#if deprecated}
+            <DeprecatedPill label={deprecatedLabel} />
+          {/if}
+          {#each post ?? [] as item, index (index)}
+            <div
+              class="rounded-md bg-stone-100/50 px-2 py-0.5 text-stone-600 dark:bg-white/5 dark:text-stone-200"
+              data-component-part="field-meta-post"
+            >
+              {item}
+            </div>
+          {/each}
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/components/property/ParamHead.svelte.d.ts

@@ -0,0 +1,22 @@
+type ParamHeadProps = {
+    name?: string | null;
+    type: string;
+    location?: string;
+    hidden?: boolean;
+    default?: unknown;
+    required?: boolean;
+    deprecated?: boolean;
+    id?: string;
+    pre?: string[];
+    post?: string[];
+    class?: string;
+    className?: string;
+    onMount?: () => void;
+    navigateToHeaderAriaLabel?: string;
+    defaultLabel?: string;
+    requiredLabel?: string;
+    deprecatedLabel?: string;
+};
+declare const ParamHead: import("svelte").Component<ParamHeadProps, {}, "">;
+type ParamHead = ReturnType<typeof ParamHead>;
+export default ParamHead;