@ui-organized/svelte 0.0.0-stage → 6.0.0

package/dist/components/FloatingPanel/FloatingPanelHeader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanelHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FloatingPanel/FloatingPanelHeader.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAmBzE,QAAA,MAAM,mBAAmB,8DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/FloatingPanel/FloatingPanelTitle.svelte

@@ -0,0 +1,15 @@
+<!-- Heading for the panel, and the thing that names it. -->
+<script lang="ts">
+  import { FloatingPanel as ArkFloatingPanel } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { FloatingPanelTitleProps } from "./FloatingPanel.types.js";
+
+  let { class: className, children, ...rest }: FloatingPanelTitleProps = $props();
+</script>
+
+<ArkFloatingPanel.Title
+  class={clsx("floating-panel__title", "text-strong-body-large", className)}
+  {...rest}
+>
+  {@render children?.()}
+</ArkFloatingPanel.Title>

package/dist/components/FloatingPanel/FloatingPanelTitle.svelte.d.ts

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

package/dist/components/FloatingPanel/FloatingPanelTitle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanelTitle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FloatingPanel/FloatingPanelTitle.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAiBxE,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/FloatingPanel/FloatingPanelTrigger.svelte

@@ -0,0 +1,11 @@
+<!-- Element that opens the panel. -->
+<script lang="ts">
+  import { FloatingPanel as ArkFloatingPanel } from "@ark-ui/svelte";
+  import type { FloatingPanelTriggerProps } from "./FloatingPanel.types.js";
+
+  let { children, ...rest }: FloatingPanelTriggerProps = $props();
+</script>
+
+<ArkFloatingPanel.Trigger {...rest}>
+  {@render children?.()}
+</ArkFloatingPanel.Trigger>

package/dist/components/FloatingPanel/FloatingPanelTrigger.svelte.d.ts

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

package/dist/components/FloatingPanel/FloatingPanelTrigger.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanelTrigger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FloatingPanel/FloatingPanelTrigger.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAgB1E,QAAA,MAAM,oBAAoB,+DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

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

@@ -0,0 +1,10 @@
+export { default as FloatingPanel } from "./FloatingPanel.svelte";
+export { default as FloatingPanelTrigger } from "./FloatingPanelTrigger.svelte";
+export { default as FloatingPanelContent } from "./FloatingPanelContent.svelte";
+export { default as FloatingPanelHeader } from "./FloatingPanelHeader.svelte";
+export { default as FloatingPanelTitle } from "./FloatingPanelTitle.svelte";
+export { default as FloatingPanelBody } from "./FloatingPanelBody.svelte";
+export { default as FloatingPanelClose } from "./FloatingPanelClose.svelte";
+export type { FloatingPanelProps, FloatingPanelTriggerProps, FloatingPanelContentProps, FloatingPanelHeaderProps, FloatingPanelTitleProps, FloatingPanelBodyProps, FloatingPanelCloseProps, FloatingPanelSize, FloatingPanelPosition, } from "./FloatingPanel.types.js";
+export type { FloatingPanelVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FloatingPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,YAAY,EACV,kBAAkB,EAAE,yBAAyB,EAAE,yBAAyB,EACxE,wBAAwB,EAAE,uBAAuB,EAAE,sBAAsB,EACzE,uBAAuB,EAAE,iBAAiB,EAAE,qBAAqB,GAClE,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/FloatingPanel/index.js

@@ -0,0 +1,7 @@
+export { default as FloatingPanel } from "./FloatingPanel.svelte";
+export { default as FloatingPanelTrigger } from "./FloatingPanelTrigger.svelte";
+export { default as FloatingPanelContent } from "./FloatingPanelContent.svelte";
+export { default as FloatingPanelHeader } from "./FloatingPanelHeader.svelte";
+export { default as FloatingPanelTitle } from "./FloatingPanelTitle.svelte";
+export { default as FloatingPanelBody } from "./FloatingPanelBody.svelte";
+export { default as FloatingPanelClose } from "./FloatingPanelClose.svelte";

package/dist/components/HoverCard/HoverCard.svelte

@@ -0,0 +1,33 @@
+<!-- HoverCard root — opens a rich preview when the trigger is hovered or focused. -->
+<script lang="ts">
+  import { HoverCard as ArkHoverCard } from "@ark-ui/svelte";
+  import { providePositioning } from "../Popover/positioning.svelte.js";
+  import type { HoverCardProps } from "./HoverCard.types.js";
+  import "@ui-organized/core/components/HoverCard/HoverCard.css";
+
+  let {
+    open = $bindable(),
+    defaultOpen,
+    onOpenChange,
+    openDelay,
+    closeDelay,
+    children,
+  }: HoverCardProps = $props();
+
+  // The Content writes its side/align into this during its own initialisation.
+  const positioning = providePositioning({ placement: "bottom", gutter: 8 });
+</script>
+
+<ArkHoverCard.Root
+  bind:open
+  {defaultOpen}
+  onOpenChange={(details) => {
+    open = details.open;
+    onOpenChange?.(details.open);
+  }}
+  {openDelay}
+  {closeDelay}
+  positioning={positioning.read()}
+>
+  {@render children?.()}
+</ArkHoverCard.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/HoverCard/HoverCard.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,uDAAuD,CAAC;AA+B/D,QAAA,MAAM,SAAS,wDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,41 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { ArkForwardable } from "../../types.js";
+export type HoverCardSide = "top" | "right" | "bottom" | "left";
+export type HoverCardAlign = "start" | "center" | "end";
+/** Props handed to an `asChild` snippet. Mirrors Ark's own `PropsFn`. */
+export type HoverCardPropsFn = (props?: HTMLButtonAttributes) => HTMLAttributes<HTMLElement>;
+export interface HoverCardProps {
+    /** 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;
+    /** Delay before opening on hover, in ms. */
+    openDelay?: number;
+    /** Delay before closing on leave, in ms. */
+    closeDelay?: number;
+    children?: Snippet;
+}
+export interface HoverCardTriggerProps extends ArkForwardable<Omit<HTMLButtonAttributes, "class" | "value">> {
+    class?: string;
+    children?: Snippet;
+    /** Project the trigger onto a custom element — which is what a link wants. */
+    asChild?: Snippet<[HoverCardPropsFn]>;
+}
+export interface HoverCardContentProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    /** Side of the trigger to position against. Defaults to 'bottom'. */
+    side?: HoverCardSide;
+    /** Alignment along the chosen side. Defaults to 'center'. */
+    align?: HoverCardAlign;
+    /** Gap between trigger and card, in px. Defaults to 8. */
+    sideOffset?: number;
+    /** Offset along the alignment axis, in px. */
+    alignOffset?: number;
+    /** Portal container. Defaults to document.body. */
+    container?: HTMLElement | null;
+    class?: string;
+    children?: Snippet;
+}
+//# sourceMappingURL=HoverCard.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/HoverCard/HoverCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExD,yEAAyE;AACzE,MAAM,MAAM,gBAAgB,GAAG,CAAC,KAAK,CAAC,EAAE,oBAAoB,KAAK,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7F,MAAM,WAAW,cAAc;IAC7B,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,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,qBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;IACrE,qEAAqE;IACrE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/HoverCard/HoverCard.types.js

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

package/dist/components/HoverCard/HoverCardContent.svelte

@@ -0,0 +1,44 @@
+<!-- Portalled, positioned surface holding the preview content. -->
+<script lang="ts">
+  import { HoverCard as ArkHoverCard, Portal } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { setAnchoredPositioning, toPlacement } from "../Popover/positioning.svelte.js";
+  import type { HoverCardContentProps } from "./HoverCard.types.js";
+
+  let {
+    side = "bottom",
+    align = "center",
+    sideOffset = 8,
+    alignOffset,
+    container,
+    class: className,
+    children,
+    ...contentProps
+  }: HoverCardContentProps = $props();
+
+  // Registered with the Root during initialisation, as an accessor so a later
+  // change to side/align/sideOffset is picked up — see
+  // ../Popover/positioning.svelte.ts.
+  setAnchoredPositioning(() => ({
+    placement: toPlacement(side, align),
+    gutter: sideOffset,
+    offset: alignOffset != null ? { crossAxis: alignOffset } : undefined,
+  }));
+</script>
+
+<Portal container={container ?? undefined}>
+  <!--
+    The positioner class must stay a plain string literal: the overlay-stacking
+    test scans for it, and stacking is declared on the popup rather than here
+    because zag writes an inline z-index onto the positioner and reads it from
+    the popup's rule.
+  -->
+  <ArkHoverCard.Positioner class="hover-card__positioner">
+    <ArkHoverCard.Content
+      class={clsx("hover-card__popup", "text-default-body-medium", className)}
+      {...contentProps}
+    >
+      {@render children?.()}
+    </ArkHoverCard.Content>
+  </ArkHoverCard.Positioner>
+</Portal>

package/dist/components/HoverCard/HoverCardContent.svelte.d.ts

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

package/dist/components/HoverCard/HoverCardContent.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCardContent.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/HoverCard/HoverCardContent.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAyClE,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/HoverCard/HoverCardTrigger.svelte

@@ -0,0 +1,22 @@
+<!--
+  The element that reveals the card on hover/focus. Pass `asChild` to project a
+  custom element, which is what a link-shaped trigger wants.
+
+  No `popupControls` here, unlike Popover and Menu: zag's hover-card trigger
+  carries no `aria-controls` to begin with, so there is no dangling reference to
+  drop while the card is closed.
+-->
+<script lang="ts">
+  import { HoverCard as ArkHoverCard } from "@ark-ui/svelte";
+  import type { HoverCardTriggerProps } from "./HoverCard.types.js";
+
+  let { asChild: project, children, ...rest }: HoverCardTriggerProps = $props();
+</script>
+
+{#if project}
+  <ArkHoverCard.Trigger {...rest}>
+    {#snippet asChild(props)}{@render project(props)}{/snippet}
+  </ArkHoverCard.Trigger>
+{:else}
+  <ArkHoverCard.Trigger {...rest}>{@render children?.()}</ArkHoverCard.Trigger>
+{/if}

package/dist/components/HoverCard/HoverCardTrigger.svelte.d.ts

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

package/dist/components/HoverCard/HoverCardTrigger.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCardTrigger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/HoverCard/HoverCardTrigger.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAoBlE,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,5 @@
+export { default as HoverCard } from "./HoverCard.svelte";
+export { default as HoverCardTrigger } from "./HoverCardTrigger.svelte";
+export { default as HoverCardContent } from "./HoverCardContent.svelte";
+export type { HoverCardProps, HoverCardTriggerProps, HoverCardContentProps, HoverCardSide, HoverCardAlign, HoverCardPropsFn, } from "./HoverCard.types.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/HoverCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,YAAY,EACV,cAAc,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,aAAa,EAAE,cAAc,EAC3F,gBAAgB,GACjB,MAAM,sBAAsB,CAAC"}

package/dist/components/HoverCard/index.js

@@ -0,0 +1,3 @@
+export { default as HoverCard } from "./HoverCard.svelte";
+export { default as HoverCardTrigger } from "./HoverCardTrigger.svelte";
+export { default as HoverCardContent } from "./HoverCardContent.svelte";

package/dist/components/Icon/Icon.svelte

@@ -0,0 +1,102 @@
+<!--
+  Foundational Icon component — the single interface for rendering icons.
+
+  Reads the active library, style, and stroke adjustment from the nearest
+  `IconProvider`, looks the name up among the icons registered for that library,
+  and renders it at the requested size with optical stroke correction when
+  enabled. Names are the library's own (`x` in Lucide). Every decision it makes before rendering is shared with the other
+  framework libraries; see `resolveIcon*` in @ui-organized/core.
+
+  Only the icons you register reach the bundle — see `../../icons/registry.ts`
+  for why the package deliberately imports none of the icon libraries itself:
+
+      import { registerIcons } from "@ui-organized/svelte/icons/lucide";
+      registerIcons({ Camera, Rocket });   // <Icon name="camera" />
+
+  Components never import from an icon library directly — they always go through
+  this component.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import {
+    resolveIconStroke,
+    resolveIconSvgProps,
+    resolveSystemGlyph,
+  } from "@ui-organized/core";
+  import { getIconConfig } from "../../context/iconContext.svelte.js";
+  import { glyphOf } from "../../icons/glyph.js";
+  import {
+    getIcon,
+    getIconSet,
+    registeredLibraries,
+    registeredNames,
+    type IconSet,
+  } from "../../icons/registry.js";
+  import { warnMissingIcon, warnMissingIconSet } from "./warnMissingIconSet.js";
+  import type { IconProps } from "./Icon.types.js";
+  import "@ui-organized/core/components/Icon/Icon.css";
+
+  let { name, size = 24, label, class: className }: IconProps = $props();
+
+  const config = $derived(getIconConfig());
+
+  // A directly-supplied component is used as-is — it needs no registration and
+  // no registered set. The exception is one of the components' own glyphs,
+  // which stands in for whichever cut the active library has.
+  const glyph = $derived(typeof name === "string" ? undefined : glyphOf(name));
+  const supplied = $derived(typeof name === "string" || glyph ? undefined : name);
+
+  // An explicit `icons` on the provider wins; otherwise use whatever the
+  // imported subpath registered.
+  const set = $derived<IconSet | undefined>(
+    supplied ? undefined : (config.icons ?? getIconSet(config.library)),
+  );
+
+  const missing = $derived(!supplied && !set);
+  $effect(() => {
+    // The one failure this structure can introduce: upgrading without adding the
+    // subpath import renders nothing at all. Silence would be indefensible, so
+    // say exactly what to add. Once per library.
+    if (missing) warnMissingIconSet(config.library, registeredLibraries());
+  });
+
+  const IconComponent = $derived(
+    supplied ??
+      (!set
+        ? undefined
+        : glyph
+          ? resolveSystemGlyph(set, glyph, config.style)
+          : getIcon(set.library, name as string, config.style)),
+  );
+
+  $effect(() => {
+    if (set && !IconComponent && typeof name === "string") {
+      warnMissingIcon(set.library, name, registeredNames(set.library));
+    }
+  });
+
+  const svgProps = $derived(
+    resolveIconSvgProps(
+      set,
+      size,
+      resolveIconStroke({
+        style: config.style,
+        strokeAdjustment: config.strokeAdjustment,
+        size,
+        baseStroke: config.baseStroke,
+        baseSize: config.baseSize,
+      }),
+    ),
+  );
+</script>
+
+{#if IconComponent}
+  <span
+    class={clsx("icon", className)}
+    aria-label={label}
+    aria-hidden={label ? undefined : true}
+    role={label ? "img" : undefined}
+  >
+    <IconComponent {...svgProps} />
+  </span>
+{/if}

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

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

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

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

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

@@ -0,0 +1,28 @@
+import type { IconComponent } from "../../icons/registry.js";
+export type { IconComponent };
+/**
+ * An icon's name as its library publishes it: `"x"` or `"chevron-down"` in
+ * Lucide and Tabler. Nothing is renamed, so a name belongs to one library.
+ * Register the icon first with `registerIcons` from that library's subpath.
+ */
+export type IconName = string;
+export interface IconProps {
+    /**
+     * Either the icon's native name in the active library (`"x"`), registered
+     * with `registerIcons`, or a library icon component supplied directly.
+     */
+    name: IconName | IconComponent;
+    /**
+     * Icon size in pixels. Applied to both width and height.
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Accessible label for meaningful (non-decorative) icons.
+     * When omitted the icon is treated as decorative and hidden from assistive tech.
+     */
+    label?: string;
+    /** Additional CSS class applied to the outer wrapper span. */
+    class?: string;
+}
+//# sourceMappingURL=Icon.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icon/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,YAAY,EAAE,aAAa,EAAE,CAAC;AAE9B;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B,MAAM,WAAW,SAAS;IACxB;;;OAGG;IACH,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Icon/Icon.types.js

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

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

@@ -0,0 +1,3 @@
+export { default as Icon } from "./Icon.svelte";
+export type { IconComponent, IconName, IconProps } from "./Icon.types.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Icon/index.js

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

package/dist/components/Icon/warnMissingIconSet.d.ts

@@ -0,0 +1,13 @@
+import type { IconLibrary } from "../../icons/registry.js";
+export declare function warnMissingIconSet(library: IconLibrary, registered: IconLibrary[]): void;
+/** Test seam — lets a test observe the first-warning behaviour more than once. */
+export declare function resetIconSetWarnings(): void;
+/**
+ * Warn, once per library and name, that an icon name matches nothing
+ * registered. Names are the library's own, so the usual causes are a name from
+ * a different library (`x-mark` is Heroicons; Lucide calls it `x`) or a
+ * forgotten `registerIcons` call. Dev-only: unlike a missing set, this cannot be
+ * caused by a production-only bundling difference.
+ */
+export declare function warnMissingIcon(library: IconLibrary, name: string, registered: string[]): void;
+//# sourceMappingURL=warnMissingIconSet.d.ts.map

package/dist/components/Icon/warnMissingIconSet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"warnMissingIconSet.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icon/warnMissingIconSet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAsC3D,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,IAAI,CAiCxF;AAED,kFAAkF;AAClF,wBAAgB,oBAAoB,IAAI,IAAI,CAG3C;AAOD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAiB9F"}

package/dist/components/Icon/warnMissingIconSet.js

@@ -0,0 +1,93 @@
+/**
+ * Warn, once per library, that no icon set is registered.
+ *
+ * This is the upgrade hazard in putting the icon libraries behind subpaths: an
+ * app that never adds the import renders no icons, and without this gets no
+ * explanation. So the message says exactly which line to add.
+ *
+ * **Fires in production too, deliberately.** A `sideEffects` field that omits
+ * the icon modules lets bundlers tree-shake the registration out of production
+ * builds only — dev renders icons, `vite build` renders none. A warning that
+ * cannot reach the environment its bug occurs in is not a warning. The detailed
+ * guidance stays dev-only; production gets one short line.
+ *
+ * Global-keyed for the same reason the registry is: this module can be
+ * instantiated more than once, and a module-local Set turns "once per library"
+ * quietly into "once per copy".
+ */
+const WARNED_KEY = Symbol.for("@ui-organized/svelte.iconSetWarnings");
+const warned = (globalThis[WARNED_KEY] ??= new Set());
+/**
+ * The npm package each adapter expects alongside this one.
+ *
+ * Heroicons has no entry because this package ships no `icons/heroicons`
+ * subpath. Heroicons publishes per-framework component packages itself for React
+ * and Vue but not for Svelte, and every community port on npm was last released
+ * before Svelte 5. So `library="heroicons"` here is reachable only by building
+ * the set yourself and passing it as `icons` — and the message below has to say
+ * that rather than point at a subpath that does not exist.
+ */
+const PACKAGE_FOR = {
+    lucide: "@lucide/svelte",
+    tabler: "@tabler/icons-svelte",
+};
+export function warnMissingIconSet(library, registered) {
+    if (warned.has(library))
+        return;
+    warned.add(library);
+    const iconPackage = PACKAGE_FOR[library];
+    const headline = iconPackage
+        ? `[@ui-organized/svelte] <Icon> can't render: no icon set registered for "${library}". ` +
+            `Add \`import "@ui-organized/svelte/icons/${library}";\` near your app entry.`
+        : `[@ui-organized/svelte] <Icon> can't render: this package ships no adapter for ` +
+            `"${library}". Build the set yourself and pass it to <IconProvider icons={...}>.`;
+    if (process.env.NODE_ENV === "production") {
+        console.warn(headline);
+        return;
+    }
+    const detail = registered.length
+        ? `Registered: ${registered.join(", ")}.`
+        : "No icon sets are registered.";
+    if (!iconPackage) {
+        console.warn(`${headline}\n\n${detail}`);
+        return;
+    }
+    console.warn(`${headline}\n\n${detail}\n\n` +
+        `Icon libraries are optional peers, so the package imports none of them itself — ` +
+        `that is what keeps the ones you don't use out of your install and your bundle. ` +
+        `Make sure "${iconPackage}" is installed too.\n\n` +
+        `If icons render in dev but not in a production build, the registration import ` +
+        `was tree-shaken: check that your bundler honours this package's "sideEffects" field.`);
+}
+/** Test seam — lets a test observe the first-warning behaviour more than once. */
+export function resetIconSetWarnings() {
+    warned.clear();
+    warnedNames.clear();
+}
+const NAME_WARNED_KEY = Symbol.for("@ui-organized/svelte.iconNameWarnings");
+const warnedNames = (globalThis[NAME_WARNED_KEY] ??=
+    new Set());
+/**
+ * Warn, once per library and name, that an icon name matches nothing
+ * registered. Names are the library's own, so the usual causes are a name from
+ * a different library (`x-mark` is Heroicons; Lucide calls it `x`) or a
+ * forgotten `registerIcons` call. Dev-only: unlike a missing set, this cannot be
+ * caused by a production-only bundling difference.
+ */
+export function warnMissingIcon(library, name, registered) {
+    if (process.env.NODE_ENV === "production")
+        return;
+    const key = `${library}:${name}`;
+    if (warnedNames.has(key))
+        return;
+    warnedNames.add(key);
+    const known = registered.length
+        ? `Registered for ${library}: ${registered.join(", ")}.`
+        : `No icons are registered for ${library} yet.`;
+    console.warn(`[@ui-organized/svelte] <Icon name="${name}"> renders nothing: no "${library}" icon is ` +
+        `registered under that name.\n\n${known}\n\n` +
+        `Names are ${library}'s own, not translated between libraries. Register the icon once:\n` +
+        `  import { registerIcons } from "@ui-organized/svelte/icons/${library}";\n` +
+        `  registerIcons({ <the icon's export> });\n` +
+        `or pass the icon itself: <Icon name={TheIcon} />.`);
+}

package/dist/components/ImageCropper/ImageCropper.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { ImageCropper as ArkImageCropper } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { imageCropperStyles } from "@ui-organized/core";
+  import type { ImageCropperProps } from "./ImageCropper.types.js";
+  import "@ui-organized/core/components/ImageCropper/ImageCropper.css";
+
+  /** Every corner and edge, in the order zag names them. */
+  const HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"] as const;
+
+  let {
+    src,
+    alt = "",
+    label,
+    helperText,
+    initialCrop,
+    aspectRatio,
+    cropShape = "rectangle",
+    onCropChange,
+    zoom = $bindable(),
+    defaultZoom,
+    onZoomChange,
+    minZoom,
+    maxZoom,
+    showGrid = true,
+    fixedCropArea,
+    size = "md",
+    class: className,
+  }: ImageCropperProps = $props();
+</script>
+
+<ArkImageCropper.Root
+  class={clsx(imageCropperStyles({ size, cropShape }), className)}
+  {initialCrop}
+  {aspectRatio}
+  {cropShape}
+  onCropChange={onCropChange && ((details) => onCropChange(details.crop))}
+  {zoom}
+  {defaultZoom}
+  onZoomChange={(details) => {
+    zoom = details.zoom;
+    onZoomChange?.(details.zoom);
+  }}
+  {minZoom}
+  {maxZoom}
+  {fixedCropArea}
+>
+  {#if label}<span class="field__label">{label}</span>{/if}
+
+  <ArkImageCropper.Viewport class="image-cropper__viewport">
+    <ArkImageCropper.Image {src} {alt} class="image-cropper__image" />
+    <ArkImageCropper.Selection class="image-cropper__selection">
+      {#if showGrid}
+        <ArkImageCropper.Grid axis="horizontal" class="image-cropper__grid" />
+        <ArkImageCropper.Grid axis="vertical" class="image-cropper__grid" />
+      {/if}
+      <!--
+        Handles are rendered even when `fixedCropArea` is set — zag disables them
+        rather than removing them, so the box keeps its shape.
+      -->
+      {#each HANDLES as position (position)}
+        <ArkImageCropper.Handle
+          {position}
+          class={`image-cropper__handle image-cropper__handle--${position}`}
+        />
+      {/each}
+    </ArkImageCropper.Selection>
+  </ArkImageCropper.Viewport>
+
+  {#if helperText}<span class="field__description">{helperText}</span>{/if}
+</ArkImageCropper.Root>

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

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