@ui-organized/svelte 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,4 @@
+export { default as Toolbar } from "./Toolbar.svelte";
+export { default as ToolbarGroup } from "./ToolbarGroup.svelte";
+export type { ToolbarProps, ToolbarGroupProps } from "./Toolbar.types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Toolbar/index.js

@@ -0,0 +1,2 @@
+export { default as Toolbar } from "./Toolbar.svelte";
+export { default as ToolbarGroup } from "./ToolbarGroup.svelte";

package/dist/components/Tooltip/Tooltip.svelte

@@ -0,0 +1,58 @@
+<!--
+  Lightweight tooltip. Wrap a trigger and pass `content`.
+
+  Unlike React, the trigger is always an Ark Trigger element rather than
+  sometimes being projected onto the child: `React.isValidElement(children)` has
+  no Svelte equivalent, because a snippet is opaque — there is no way to ask
+  whether it renders exactly one element. Consumers who need the tooltip's
+  behaviour projected onto their own element compose Ark's Trigger directly.
+-->
+<script lang="ts">
+  import { Tooltip as ArkTooltip, Portal } from "@ark-ui/svelte";
+  import { getTooltipDelays } from "./delays.svelte.js";
+  import { toPlacement } from "../Popover/positioning.svelte.js";
+  import type { TooltipProps } from "./Tooltip.types.js";
+  import "@ui-organized/core/components/Tooltip/Tooltip.css";
+
+  let {
+    content,
+    children,
+    side = "top",
+    align = "center",
+    sideOffset = 6,
+    delay,
+    closeDelay,
+    disabled,
+    open = $bindable(),
+    defaultOpen,
+    onOpenChange,
+    container,
+  }: TooltipProps = $props();
+
+  const shared = $derived(getTooltipDelays());
+</script>
+
+{#if disabled}
+  {@render children()}
+{:else}
+  <ArkTooltip.Root
+    bind:open
+    {defaultOpen}
+    onOpenChange={(details) => {
+      open = details.open;
+      onOpenChange?.(details.open);
+    }}
+    openDelay={delay ?? shared.delay}
+    closeDelay={closeDelay ?? shared.closeDelay}
+    positioning={{ placement: toPlacement(side, align), gutter: sideOffset }}
+  >
+    <ArkTooltip.Trigger class="tooltip__trigger">{@render children()}</ArkTooltip.Trigger>
+    <Portal container={container ?? undefined}>
+      <ArkTooltip.Positioner class="tooltip__positioner">
+        <ArkTooltip.Content class="tooltip__popup text-default-body-small">
+          {#if typeof content === "string"}{content}{:else}{@render content()}{/if}
+        </ArkTooltip.Content>
+      </ArkTooltip.Positioner>
+    </Portal>
+  </ArkTooltip.Root>
+{/if}

package/dist/components/Tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { TooltipProps } from "./Tooltip.types.js";
+import "@ui-organized/core/components/Tooltip/Tooltip.css";
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.svelte.d.ts.map

package/dist/components/Tooltip/Tooltip.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,mDAAmD,CAAC;AAgD3D,QAAA,MAAM,OAAO,sDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,39 @@
+import type { Snippet } from "svelte";
+/** Side of the trigger to position the tooltip against. */
+export type TooltipSide = "top" | "right" | "bottom" | "left";
+/** Alignment along the chosen side. */
+export type TooltipAlign = "start" | "center" | "end";
+export interface TooltipProps {
+    /** Content shown in the tooltip bubble. A string, or a snippet. */
+    content: string | Snippet;
+    /** The trigger. */
+    children: Snippet;
+    /** Side of the trigger to position against. Defaults to 'top'. */
+    side?: TooltipSide;
+    /** Alignment along the chosen side. Defaults to 'center'. */
+    align?: TooltipAlign;
+    /** Gap between the trigger and bubble, in px. Defaults to 6. */
+    sideOffset?: number;
+    /** Delay before opening, in ms. Falls back to a wrapping TooltipProvider. */
+    delay?: number;
+    /** Delay before closing, in ms. Falls back to a wrapping TooltipProvider. */
+    closeDelay?: number;
+    /** When true, renders the trigger without a tooltip. */
+    disabled?: boolean;
+    /** Open state. Bindable: `bind:open`. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Callback fired when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Portal container. Defaults to document.body. */
+    container?: HTMLElement | null;
+}
+export interface TooltipProviderProps {
+    children: Snippet;
+    /** Default delay before opening, in ms, for descendant tooltips. */
+    delay?: number;
+    /** Default delay before closing, in ms, for descendant tooltips. */
+    closeDelay?: number;
+}
+//# sourceMappingURL=Tooltip.types.d.ts.map

package/dist/components/Tooltip/Tooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,2DAA2D;AAC3D,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9D,uCAAuC;AACvC,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEtD,MAAM,WAAW,YAAY;IAC3B,mEAAmE;IACnE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,mBAAmB;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,mDAAmD;IACnD,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/components/Tooltip/Tooltip.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Tooltip/TooltipProvider.svelte

@@ -0,0 +1,11 @@
+<!-- Shares hover/close delays across the tooltips it wraps. Optional, app-level. -->
+<script lang="ts">
+  import { setTooltipDelays } from "./delays.svelte.js";
+  import type { TooltipProviderProps } from "./Tooltip.types.js";
+
+  let { children, delay, closeDelay }: TooltipProviderProps = $props();
+
+  setTooltipDelays(() => ({ delay, closeDelay }));
+</script>
+
+{@render children()}

package/dist/components/Tooltip/TooltipProvider.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { TooltipProviderProps } from "./Tooltip.types.js";
+declare const TooltipProvider: import("svelte").Component<TooltipProviderProps, {}, "">;
+type TooltipProvider = ReturnType<typeof TooltipProvider>;
+export default TooltipProvider;
+//# sourceMappingURL=TooltipProvider.svelte.d.ts.map

package/dist/components/Tooltip/TooltipProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipProvider.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tooltip/TooltipProvider.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAgB/D,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/Tooltip/delays.svelte.d.ts

@@ -0,0 +1,7 @@
+export interface TooltipDelays {
+    delay?: number;
+    closeDelay?: number;
+}
+export declare function setTooltipDelays(read: () => TooltipDelays): void;
+export declare function getTooltipDelays(): TooltipDelays;
+//# sourceMappingURL=delays.svelte.d.ts.map

package/dist/components/Tooltip/delays.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"delays.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tooltip/delays.svelte.ts"],"names":[],"mappings":"AAUA,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAID,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,aAAa,GAAG,IAAI,CAEhE;AAED,wBAAgB,gBAAgB,IAAI,aAAa,CAEhD"}

package/dist/components/Tooltip/delays.svelte.js

@@ -0,0 +1,16 @@
+/**
+ * Shared open/close delays for descendant tooltips.
+ *
+ * Ark UI has no app-level delay provider — delays are per-tooltip Root props —
+ * so this facade supplies the contract itself, exactly as the React package
+ * does with a context. Held as an accessor so a provider driven by reactive
+ * props keeps its descendants current.
+ */
+import { getContext, setContext } from "svelte";
+const KEY = Symbol("ui-organized.tooltipDelays");
+export function setTooltipDelays(read) {
+    setContext(KEY, read);
+}
+export function getTooltipDelays() {
+    return getContext(KEY)?.() ?? {};
+}

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

@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.svelte";
+export { default as TooltipProvider } from "./TooltipProvider.svelte";
+export type { TooltipProps, TooltipProviderProps, TooltipSide, TooltipAlign, } from "./Tooltip.types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,YAAY,EACV,YAAY,EAAE,oBAAoB,EAAE,WAAW,EAAE,YAAY,GAC9D,MAAM,oBAAoB,CAAC"}

package/dist/components/Tooltip/index.js

@@ -0,0 +1,2 @@
+export { default as Tooltip } from "./Tooltip.svelte";
+export { default as TooltipProvider } from "./TooltipProvider.svelte";

package/dist/components/Tour/Tour.svelte

@@ -0,0 +1,148 @@
+<!--
+  A guided walkthrough: a spotlight over the page and a card beside whatever it
+  is pointing at. Everything it renders is portalled, so the tour has no DOM in
+  place until it opens.
+-->
+<script lang="ts">
+  import { Tour as ArkTour, useTour, Portal } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { tourStyles } from "@ui-organized/core";
+  import Button from "../Button/Button.svelte";
+  import Icon from "../Icon/Icon.svelte";
+  import type { TourProps } from "./Tour.types.js";
+  import "@ui-organized/core/components/Tour/Tour.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  const CLOSE_ICON_SIZE = 16;
+
+  const DEFAULT_ACTIONS = [
+    { label: "Back", action: "prev" as const },
+    { label: "Next", action: "next" as const },
+  ];
+
+  let {
+    steps,
+    stepId,
+    onStepChange,
+    spotlightRadius,
+    preventInteraction,
+    closeOnInteractOutside,
+    closeOnEscape,
+    size,
+    variant,
+    showProgress = true,
+    class: className,
+  }: TourProps = $props();
+
+  /* Steps carry render data our card reads back; the machine only needs the
+     shape it defines. Defaults are filled in here so a caller who writes only
+     `{ id, title, description }` still gets a working Back/Next row. */
+  const machineSteps = $derived(
+    steps.map((step) => ({ ...step, actions: step.actions ?? DEFAULT_ACTIONS })),
+  );
+
+  /* Tour is the one Ark component whose Root takes no props: it takes the
+     return value of `useTour`. Every other component (`ColorPicker.Root`,
+     `TreeView.Root`, …) extends its `Use*Props` directly. */
+  const tour = useTour(() => ({
+    steps: machineSteps,
+    stepId,
+    onStepChange: (details) => onStepChange?.(details.stepId),
+    spotlightRadius,
+    preventInteraction,
+    closeOnInteractOutside,
+    closeOnEscape,
+  }));
+
+  /* The machine's `stepId` is a bindable seeded from the prop *once*, not a
+     live controlled value — changing the prop after mount does not move the
+     machine. Opening and navigating therefore have to be driven imperatively,
+     which is what this effect does, so the public API can stay a declarative
+     prop like every other component here.
+
+     Closing is the asymmetry: the api exposes `start` and `setStep` but no
+     programmatic close, so `stepId: null` cannot force one. The tour closes
+     through its own dismiss and close affordances and reports it as
+     `onStepChange(null)` — keep that wired to your state and the two stay in
+     sync.
+
+     The guards are what stop this from looping: it writes machine state that it
+     also reads, so an unconditional `setStep` would re-trigger itself. */
+  $effect(() => {
+    if (stepId == null) return;
+    const api = tour();
+    if (!api.isValidStep(stepId)) return;
+    if (api.open) {
+      if (api.step?.id !== stepId) api.setStep(stepId);
+    } else {
+      api.start(stepId);
+    }
+  });
+</script>
+
+<ArkTour.Root {tour}>
+  <Portal>
+    <ArkTour.Backdrop class="tour__backdrop" />
+    <ArkTour.Spotlight class="tour__spotlight" />
+    <!--
+      The positioner class must stay a plain string literal — the
+      overlay-stacking test scans for it.
+    -->
+    <ArkTour.Positioner class="tour__positioner">
+      <ArkTour.Content class={clsx(tourStyles({ size, variant }), className)}>
+        <ArkTour.Arrow class="tour__arrow">
+          <ArkTour.ArrowTip class="tour__arrow-tip" />
+        </ArkTour.Arrow>
+
+        <div class="tour__header">
+          <ArkTour.Title class="tour__title text-strong-body-large" />
+          <ArkTour.CloseTrigger class="tour__close" aria-label="End tour">
+            <Icon name={glyph("close")} size={CLOSE_ICON_SIZE} />
+          </ArkTour.CloseTrigger>
+        </div>
+
+        <ArkTour.Description class="tour__description text-default-body-medium" />
+
+        <div class="tour__footer">
+          {#if showProgress}
+            <ArkTour.ProgressText class="tour__progress" />
+          {/if}
+          <!--
+            `Actions` is a snippet over the *current step's* action list, not an
+            element — it takes no class, so the row it fills is a plain div here.
+          -->
+          <div class="tour__actions">
+            <ArkTour.Actions>
+              {#snippet children(actions)}
+                {#each actions() as action (action.label)}
+                  <ArkTour.ActionTrigger {action}>
+                    <!--
+                      The button *is* the library Button, projected through Ark's
+                      asChild so it inherits every interactive token instead of
+                      restating them. `class` is pulled out and handed over
+                      separately because Ark types the projected props in
+                      Svelte's own shapes, where it is a `ClassValue` that may be
+                      null while the Button takes a string.
+                    -->
+                    {#snippet asChild(props)}
+                      {@const { class: arkClass, ...triggerProps } = props()}
+                      <Button
+                        intent={action.action === "next" ? "primary" : "secondary"}
+                        {size}
+                        type="button"
+                        class={clsx(arkClass)}
+                        {...triggerProps}
+                      >
+                        {action.label}
+                      </Button>
+                    {/snippet}
+                  </ArkTour.ActionTrigger>
+                {/each}
+              {/snippet}
+            </ArkTour.Actions>
+          </div>
+        </div>
+      </ArkTour.Content>
+    </ArkTour.Positioner>
+  </Portal>
+</ArkTour.Root>

package/dist/components/Tour/Tour.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { TourProps } from "./Tour.types.js";
+import "@ui-organized/core/components/Tour/Tour.css";
+declare const Tour: import("svelte").Component<TourProps, {}, "">;
+type Tour = ReturnType<typeof Tour>;
+export default Tour;
+//# sourceMappingURL=Tour.svelte.d.ts.map

package/dist/components/Tour/Tour.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tour/Tour.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,6CAA6C,CAAC;AAmIrD,QAAA,MAAM,IAAI,+CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/Tour/Tour.types.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Written out in full rather than extending a shared base: `svelte-package`
+ * emits no `.d.ts` for props whose type extends an interface it cannot see, and
+ * it fails silently — the build succeeds and consumers get `any`.
+ */
+export interface TourStepAction {
+    /** Button text. */
+    label: string;
+    /** What the button does. Defaults to 'next'. */
+    action?: "next" | "prev" | "dismiss" | "skip";
+}
+export interface TourStep {
+    /** Unique id across the tour. This is what `stepId` names. */
+    id: string;
+    /**
+     * Step heading.
+     *
+     * A plain string rather than a snippet: the machine hands this straight to
+     * Ark's Title part as its content, and a snippet would arrive there as a
+     * function and render as nothing.
+     */
+    title: string;
+    /** Step body copy. A plain string, for the same reason as `title`. */
+    description: string;
+    /**
+     * Returns the element to highlight. Omit it for a centred step with no
+     * target, which the machine treats as a modal `dialog` step.
+     */
+    target?: () => HTMLElement | null;
+    /**
+     * How the step is presented. `tooltip` anchors to the target, `dialog`
+     * centres, `floating` sits unanchored, `wait` pauses for an app event.
+     * Inferred from `target` when omitted.
+     */
+    type?: "tooltip" | "dialog" | "wait" | "floating";
+    /** Where the card sits relative to its target. */
+    placement?: "top" | "bottom" | "left" | "right" | "center";
+    /** Buttons in the card's action row. Defaults to Back and Next. */
+    actions?: TourStepAction[];
+    /** Dims the rest of the page behind this step. Defaults to true. */
+    backdrop?: boolean;
+    /** Points an arrow at the target. Defaults to true for anchored steps. */
+    arrow?: boolean;
+}
+export interface TourProps {
+    /** The steps, in order. */
+    steps: TourStep[];
+    /**
+     * The step to show, by id. Set it to a step's id to open the tour there, and
+     * to another id to jump.
+     *
+     * Opening and navigating are controlled; **closing is not**. The machine
+     * exposes no programmatic close, so setting this back to `null` does not shut
+     * the tour — people close it with the card's close button, Escape, or a
+     * `dismiss` action, and that arrives as `onStepChange(null)`. Keep this prop
+     * wired to that callback and the two stay in step.
+     *
+     * Open it *after* mount. The effect that drives the machine runs on the
+     * client, so opening on an anchored step during the first render measures a
+     * null target: the spotlight collapses and the card is parked off-screen.
+     * Opening from a click is always safe.
+     */
+    stepId: string | null;
+    /**
+     * Called with the new step id whenever the tour advances, and with `null` when
+     * it closes. Wire this to whatever state feeds `stepId`.
+     */
+    onStepChange?: (stepId: string | null) => void;
+    /** Corner radius of the spotlight cutout, in pixels. Defaults to 4. */
+    spotlightRadius?: number;
+    /** Blocks interaction with the page behind the tour. Defaults to false. */
+    preventInteraction?: boolean;
+    /** Closes when clicking outside the card. Defaults to true. */
+    closeOnInteractOutside?: boolean;
+    /** Closes on Escape. Defaults to true. */
+    closeOnEscape?: boolean;
+    /** Size variant. Defaults to 'md'. */
+    size?: "sm" | "md" | "lg";
+    /** Card treatment. `compact` tightens the padding. Defaults to 'default'. */
+    variant?: "default" | "compact";
+    /** Shows the "step N of M" counter. Defaults to true. */
+    showProgress?: boolean;
+    class?: string;
+}
+//# sourceMappingURL=Tour.types.d.ts.map

package/dist/components/Tour/Tour.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tour/Tour.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,cAAc;IAC7B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;CAC/C;AAED,MAAM,WAAW,QAAQ;IACvB,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAC;IACX;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;IAClD,kDAAkD;IAClD,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3D,mEAAmE;IACnE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,SAAS;IACxB,2BAA2B;IAC3B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB;;;;;;;;;;;;;;OAcG;IACH,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,+DAA+D;IAC/D,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,0CAA0C;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,yDAAyD;IACzD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Tour/Tour.types.js

@@ -0,0 +1,6 @@
+/**
+ * Written out in full rather than extending a shared base: `svelte-package`
+ * emits no `.d.ts` for props whose type extends an interface it cannot see, and
+ * it fails silently — the build succeeds and consumers get `any`.
+ */
+export {};

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

@@ -0,0 +1,4 @@
+export { default as Tour } from "./Tour.svelte";
+export type { TourProps, TourStep, TourStepAction } from "./Tour.types.js";
+export type { TourVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tour/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tour/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC3E,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Tour/index.js

@@ -0,0 +1 @@
+export { default as Tour } from "./Tour.svelte";

package/dist/components/TreeView/TreeView.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+  import { TreeView as ArkTreeView, createTreeCollection } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { CONTROL_ICON_SIZE, treeViewStyles } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import type { TreeViewProps, TreeViewNode } from "./TreeView.types.js";
+  import "@ui-organized/core/components/TreeView/TreeView.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  /** Chevron and node icons stay one step below the text size — they mark the row
+   *  rather than compete with it. */
+  const INDICATOR_SIZE = 16;
+
+  let {
+    items,
+    label,
+    selectedValue = $bindable(),
+    defaultSelectedValue,
+    onSelectionChange,
+    expandedValue = $bindable(),
+    defaultExpandedValue,
+    onExpandedChange,
+    selectionMode,
+    size = "md",
+    variant,
+    showIndentGuides = true,
+    class: className,
+  }: TreeViewProps = $props();
+
+  const iconSize = $derived(CONTROL_ICON_SIZE[size]);
+
+  /* The machine walks a single root node, so `items` is wrapped in a synthetic
+     one that is never rendered — Ark starts from its children. Every accessor is
+     supplied rather than relying on defaults, so the public node shape (`id` /
+     `label`) is ours rather than the collection's.
+
+     `$derived` and not `$state`: the collection is a pure function of `items`,
+     and Menubar's MutationObserver trick has no counterpart to solve here. That
+     one exists because a snippet is opaque — there is no way to know what a
+     caller projected without watching the DOM. A tree is the other case
+     entirely: its shape arrives as data, so the recursion below and the
+     collection here read the same reactive array and cannot drift apart. */
+  const collection = $derived(
+    createTreeCollection<TreeViewNode>({
+      rootNode: { id: "__root__", label: "", children: items },
+      nodeToValue: (node) => node.id,
+      nodeToString: (node) => node.label,
+      nodeToChildren: (node) => node.children ?? [],
+      isNodeDisabled: (node) => !!node.disabled,
+    }),
+  );
+</script>
+
+<!--
+  One node, recursive.
+
+  A snippet rather than a child component, because a snippet can call itself and
+  a recursive component would have to import its own file — the same nesting for
+  a file more. Branch and leaf are different Ark parts (a branch owns the
+  disclosure machinery and a leaf does not) so the shape of the node decides
+  which is rendered, not a prop.
+
+  The parts themselves take no `node`/`indexPath`; `NodeProvider` puts both into
+  context and every part below reads from there. That is also what makes the
+  recursion work: each level provides its own node, so a child never has to be
+  told where its parent sits.
+-->
+{#snippet treeNode(node: TreeViewNode, indexPath: number[])}
+  <ArkTreeView.NodeProvider {node} {indexPath}>
+    {#if node.children?.length}
+      <ArkTreeView.Branch class="tree-view__branch">
+        <ArkTreeView.BranchControl class="tree-view__branch-control">
+          <ArkTreeView.BranchIndicator class="tree-view__branch-indicator">
+            <Icon name={glyph("chevron-right")} size={INDICATOR_SIZE} />
+          </ArkTreeView.BranchIndicator>
+          <Icon name={node.icon ?? glyph("folder")} size={iconSize} class="tree-view__node-icon" />
+          <ArkTreeView.BranchText class="tree-view__node-text">
+            {node.label}
+          </ArkTreeView.BranchText>
+        </ArkTreeView.BranchControl>
+        <!--
+          `data-state="open"` is dropped; `data-state="closed"` is kept.
+
+          zag's collapsible content writes
+          `"data-state": skip ? undefined : open ? "open" : "closed"`, where
+          `skip` is its first-transition guard — and the Ark wrappers disagree
+          about when that guard is set. Clicked open, Ark React leaves the panel
+          with no `data-state` while Ark Svelte writes `"open"`; collapsed, all of
+          them write `"closed"`. Angular writes neither, so Svelte and Vue were
+          the odd two out on exactly one value.
+
+          Stripped rather than allowed. The gate refuses the allowance and is
+          right to: `TreeView.css` does select on `[data-state]`, for
+          `.tree-view__branch-indicator`, so an allowance here would stop
+          comparing the indicator's open/closed state too — which is the whole
+          point of the scenario that clicks a branch open.
+
+          Delete when Ark Svelte and Ark React agree on `skip`; the gate reddens
+          on the `expanded branch` cases at that point and says so.
+        -->
+        <ArkTreeView.BranchContent>
+          {#snippet asChild(contentProps)}
+            {@const all = contentProps({ class: "tree-view__branch-content" })}
+            {@const { "data-state": state, ...rest } = all}
+            <div {...rest} data-state={state === "open" ? undefined : state}>
+              {#if showIndentGuides}
+                <ArkTreeView.BranchIndentGuide class="tree-view__indent-guide" />
+              {/if}
+              {#each node.children as child, index (child.id)}
+                {@render treeNode(child, [...indexPath, index])}
+              {/each}
+            </div>
+          {/snippet}
+        </ArkTreeView.BranchContent>
+      </ArkTreeView.Branch>
+    {:else}
+      <!--
+        The item is pinned to a <div> with asChild: `@ark-ui/svelte` builds this
+        part on `ark.li` while `@ark-ui/react` and `@ark-ui/vue` both build it on
+        `ark.div`, and one stylesheet styles every framework library. An <li>
+        outside a list is also a nesting error in its own right — the tree parts
+        around it are divs. The caller's class goes *through* Ark's props
+        function rather than being spread after it, so Ark's own attributes
+        survive the merge.
+      -->
+      <ArkTreeView.Item>
+        {#snippet asChild(itemProps)}
+          <div {...itemProps({ class: "tree-view__item" })}>
+            {#if node.icon}
+              <Icon name={node.icon} size={iconSize} class="tree-view__node-icon" />
+            {/if}
+            <ArkTreeView.ItemText class="tree-view__node-text">
+              {node.label}
+            </ArkTreeView.ItemText>
+          </div>
+        {/snippet}
+      </ArkTreeView.Item>
+    {/if}
+  </ArkTreeView.NodeProvider>
+{/snippet}
+
+<ArkTreeView.Root
+  class={clsx(treeViewStyles({ size, variant }), className)}
+  {collection}
+  bind:selectedValue
+  {defaultSelectedValue}
+  onSelectionChange={(details) => onSelectionChange?.(details.selectedValue)}
+  bind:expandedValue
+  {defaultExpandedValue}
+  onExpandedChange={(details) => onExpandedChange?.(details.expandedValue)}
+  {selectionMode}
+>
+  {#if label}
+    <ArkTreeView.Label class="tree-view__label">{label}</ArkTreeView.Label>
+  {/if}
+  <ArkTreeView.Tree class="tree-view__tree">
+    {#each items as node, index (node.id)}
+      {@render treeNode(node, [index])}
+    {/each}
+  </ArkTreeView.Tree>
+</ArkTreeView.Root>

package/dist/components/TreeView/TreeView.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { TreeViewProps } from "./TreeView.types.js";
+import "@ui-organized/core/components/TreeView/TreeView.css";
+declare const TreeView: import("svelte").Component<TreeViewProps, {}, "selectedValue" | "expandedValue">;
+type TreeView = ReturnType<typeof TreeView>;
+export default TreeView;
+//# sourceMappingURL=TreeView.svelte.d.ts.map

package/dist/components/TreeView/TreeView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TreeView/TreeView.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAgB,MAAM,qBAAqB,CAAC;AACvE,OAAO,qDAAqD,CAAC;AAqH7D,QAAA,MAAM,QAAQ,kFAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}