@ui-organized/svelte 0.0.0-stage → 6.0.0

package/dist/components/FieldError/FieldError.svelte

@@ -0,0 +1,30 @@
+<!--
+  Reusable inline error message for form controls (Input, Select, …).
+
+  Renders a filled alert icon followed by the message on a subdued error-tinted
+  pill. Use it standalone, or as the `asChild` target of an Ark `Field.ErrorText`
+  so the message stays wired to the control through `aria-describedby`.
+
+  Takes either a `children` snippet or a plain `message` string. React can accept
+  `children` as a string and test it for emptiness; a Svelte snippet is opaque,
+  so the components that pass an error message they got as a string pass it as
+  `message` and the emptiness check keeps working.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import Icon from "../Icon/Icon.svelte";
+  import type { FieldErrorProps } from "./FieldError.types.js";
+  import "@ui-organized/core/components/FieldError/FieldError.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  let { children, message, class: className, ...rest }: FieldErrorProps = $props();
+
+  const empty = $derived(!children && (message == null || message === ""));
+</script>
+
+{#if !empty}
+  <span class={clsx("field-error", "text-emphasis-caption", className)} {...rest}>
+    <Icon name={glyph("alert-circle")} size={12} class="field-error__icon" />
+    {#if children}{@render children()}{:else}{message}{/if}
+  </span>
+{/if}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldError.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FieldError/FieldError.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,yDAAyD,CAAC;AAyBjE,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+/**
+ * Note what this does *not* narrow.
+ *
+ * FieldError is an Ark `asChild` target — Ark hands it the props it would have
+ * put on its own element, in Svelte's shapes: `id` nullable, `class` a
+ * `ClassValue` rather than a string. Narrowing either (as components that
+ * forward *into* Ark must) makes the spread fail to typecheck. See
+ * `ArkForwardable` in ../../types.ts for the other direction.
+ */
+export interface FieldErrorProps extends HTMLAttributes<HTMLSpanElement> {
+    children?: Snippet;
+    /** Message as a plain string, for callers that have no snippet to give. */
+    message?: string;
+}
+//# sourceMappingURL=FieldError.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldError.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FieldError/FieldError.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,eAAe,CAAC;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB"}

package/dist/components/FieldError/FieldError.types.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FieldError/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/FieldError/index.js

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

package/dist/components/FileUpload/FileUpload.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+  import { FileUpload as ArkFileUpload } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { CONTROL_ICON_SIZE, fileUploadStyles, type ControlSize, OMIT_ARIA } from "@ui-organized/core";
+  import Button from "../Button/Button.svelte";
+  import Icon from "../Icon/Icon.svelte";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import type { FileUploadProps } from "./FileUpload.types.js";
+  import "@ui-organized/core/components/FileUpload/FileUpload.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  /** Delete affordance inside a file row — always the small edge, because it sits
+   *  inside the row rather than beside it. */
+  const DELETE_ICON_SIZE = 16;
+
+  let {
+    label,
+    helperText,
+    error,
+    accept,
+    maxFiles,
+    maxFileSize,
+    minFileSize,
+    acceptedFiles = $bindable(),
+    defaultAcceptedFiles,
+    onFileChange,
+    onFileReject,
+    allowDrop,
+    directory,
+    dropzoneLabel = "Drag files here, or",
+    triggerLabel = "Choose files",
+    variant = "dropzone",
+    size = "md",
+    showPreview = true,
+    required,
+    disabled,
+    name,
+    class: className,
+  }: FileUploadProps = $props();
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+  const iconSize = $derived(CONTROL_ICON_SIZE[size as ControlSize]);
+
+  /**
+   * Drops `data-invalid` from the label's projected props.
+   *
+   * zag 1.43 — the machine `@ark-ui/svelte` bundles — stamps `data-invalid` on
+   * the label part; zag 1.41, the one `@ark-ui/react` bundles, does not. Note
+   * which way round that is: the wrapper version here is the *older* of the two
+   * and the machine the newer, so this is the machine leading rather than this
+   * library lagging.
+   *
+   * It comes off anyway, because one stylesheet styles all three libraries and
+   * FileUpload.css already selects on `[data-invalid]`. A label that carries the
+   * attribute in one library and not the others is how a rule ends up applying
+   * to two of three. Delete this once Ark React ships the newer machine — the
+   * parity gate reddens at that point and says so.
+   */
+  function withoutInvalid<T extends object>(props: T): Omit<T, "data-invalid"> {
+    const rest = { ...props };
+    delete (rest as Record<string, unknown>)["data-invalid"];
+    return rest;
+  }
+</script>
+
+<!--
+  The trigger *is* the library Button, projected through Ark's asChild so the
+  browse control 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 trigger()}
+  <ArkFileUpload.Trigger>
+    {#snippet asChild(props)}
+      {@const { class: arkClass, ...triggerProps } = props()}
+      <Button intent="secondary" {size} type="button" class={clsx(arkClass)} {...triggerProps}>
+        {triggerLabel}
+      </Button>
+    {/snippet}
+  </ArkFileUpload.Trigger>
+{/snippet}
+
+<ArkFileUpload.Root
+  class={clsx(fileUploadStyles({ size, variant }), className)}
+  {accept}
+  {maxFiles}
+  {maxFileSize}
+  {minFileSize}
+  {acceptedFiles}
+  {defaultAcceptedFiles}
+  onFileChange={(details) => {
+    acceptedFiles = details.acceptedFiles;
+    onFileChange?.({
+      acceptedFiles: details.acceptedFiles,
+      rejectedFiles: details.rejectedFiles,
+    });
+  }}
+  onFileReject={onFileReject && ((details) => onFileReject(details.files))}
+  {allowDrop}
+  {directory}
+  invalid={isInvalid}
+  {required}
+  {disabled}
+  {name}
+>
+  {#if label}
+    <!-- See `withoutInvalid` above for why the props go through it. -->
+    <ArkFileUpload.Label>
+      {#snippet asChild(props)}
+        <label {...withoutInvalid(props({ class: "field__label" }))}>
+          {label}
+          {#if required}<span class="field__required" aria-hidden="true"></span>{/if}
+        </label>
+      {/snippet}
+    </ArkFileUpload.Label>
+  {/if}
+
+  {#if variant === "button"}
+    {@render trigger()}
+  {:else}
+    <!--
+      Ark makes the dropzone a focusable `role="button"`, and the real
+      "Choose files" button sits inside it — two nested controls, so a screen
+      reader cannot say which one focus is on, and a keyboard user hits an
+      unnamed outer button before the named inner one.
+
+      The drop area keeps working: dropping is a pointer gesture, and the button
+      inside is the keyboard and click path. What goes is only the claim that the
+      div is itself a control. Same suppression as the React library.
+    -->
+    <ArkFileUpload.Dropzone
+      class="file-upload__dropzone"
+      role={OMIT_ARIA}
+      tabindex={OMIT_ARIA}
+      aria-label={OMIT_ARIA}
+    >
+      <Icon name={glyph("upload")} size={iconSize} class="file-upload__dropzone-icon" />
+      <span class="file-upload__dropzone-text">{dropzoneLabel}</span>
+      {@render trigger()}
+    </ArkFileUpload.Dropzone>
+  {/if}
+
+  <!--
+    The file list is machine state, so it is read back from context rather than
+    mapped over the `acceptedFiles` prop — that keeps the uncontrolled case
+    working without the caller holding the list.
+
+    The group is pinned to a <ul> with asChild: `@ark-ui/svelte` renders a <div>
+    here while `@ark-ui/react` renders a <ul>, and the two carry different UA
+    layout against a stylesheet both libraries share. The caller's class goes
+    *through* Ark's props function rather than being spread after it, so Ark's
+    own attributes survive the merge.
+  -->
+  <ArkFileUpload.ItemGroup>
+    {#snippet asChild(props)}
+      <ul {...props({ class: "file-upload__items" })}>
+        <ArkFileUpload.Context>
+          {#snippet render(api)}
+            {#each api().acceptedFiles as file (file.name)}
+              <ArkFileUpload.Item {file} class="file-upload__item">
+                {#if showPreview}
+                  <ArkFileUpload.ItemPreview type="image/*" class="file-upload__item-preview">
+                    <ArkFileUpload.ItemPreviewImage class="file-upload__item-image" />
+                  </ArkFileUpload.ItemPreview>
+                {/if}
+                <!--
+                  Shown for anything that is not an image — `type` is a filter,
+                  and Ark renders only the preview whose filter matches.
+                -->
+                <ArkFileUpload.ItemPreview type=".*" class="file-upload__item-preview">
+                  <Icon name={glyph("file")} size={iconSize} />
+                </ArkFileUpload.ItemPreview>
+                <span class="file-upload__item-meta">
+                  <ArkFileUpload.ItemName class="file-upload__item-name" />
+                  <ArkFileUpload.ItemSizeText class="file-upload__item-size" />
+                </span>
+                <ArkFileUpload.ItemDeleteTrigger
+                  class="file-upload__item-delete"
+                  aria-label={`Remove ${file.name}`}
+                >
+                  <Icon name={glyph("close")} size={DELETE_ICON_SIZE} />
+                </ArkFileUpload.ItemDeleteTrigger>
+              </ArkFileUpload.Item>
+            {/each}
+          {/snippet}
+        </ArkFileUpload.Context>
+      </ul>
+    {/snippet}
+  </ArkFileUpload.ItemGroup>
+
+  {#if helperText && !isInvalid}
+    <span class="field__description">{helperText}</span>
+  {/if}
+  {#if isInvalid && errorMessage}
+    <FieldError message={errorMessage} />
+  {/if}
+  <ArkFileUpload.HiddenInput />
+</ArkFileUpload.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FileUpload/FileUpload.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,yDAAyD,CAAC;AA0JjE,QAAA,MAAM,UAAU,kEAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,58 @@
+export interface FileUploadProps {
+    /** Accessible label rendered above the control. */
+    label?: string;
+    /** Helper text rendered below the control. Hidden when an error is shown. */
+    helperText?: string;
+    /**
+     * Error state. Pass a string to show an error message.
+     * Pass `true` to mark the field invalid without a message.
+     */
+    error?: string | boolean;
+    /**
+     * Accepted types, as MIME types or extensions — `"image/*"`,
+     * `["image/png", ".pdf"]`, or a map of MIME type to extensions.
+     */
+    accept?: string | string[] | Record<string, string[]>;
+    /** Maximum number of files. Defaults to 1. */
+    maxFiles?: number;
+    /** Largest accepted file, in bytes. */
+    maxFileSize?: number;
+    /** Smallest accepted file, in bytes. */
+    minFileSize?: number;
+    /** Controlled list of accepted files. Bindable: `bind:acceptedFiles`. */
+    acceptedFiles?: File[];
+    /** Initial files for the uncontrolled case. */
+    defaultAcceptedFiles?: File[];
+    /** Called with the accepted and rejected lists whenever either changes. */
+    onFileChange?: (details: {
+        acceptedFiles: File[];
+        rejectedFiles: unknown[];
+    }) => void;
+    /** Called with the files that failed validation. */
+    onFileReject?: (files: unknown[]) => void;
+    /** Accepts files dropped onto the dropzone. Defaults to true. */
+    allowDrop?: boolean;
+    /** Lets the picker select a whole directory. Defaults to false. */
+    directory?: boolean;
+    /** Text inside the dropzone. */
+    dropzoneLabel?: string;
+    /** Text on the browse button. Defaults to 'Choose files'. */
+    triggerLabel?: string;
+    /**
+     * Layout. `dropzone` is the full drop target, `button` is the trigger alone,
+     * `compact` is a single row. Defaults to 'dropzone'.
+     */
+    variant?: "dropzone" | "button" | "compact";
+    /** Size variant. Defaults to 'md'. */
+    size?: "sm" | "md" | "lg";
+    /** Shows a thumbnail for image files. Defaults to true. */
+    showPreview?: boolean;
+    /** Marks the field required and shows the required indicator. */
+    required?: boolean;
+    /** Disables the control. */
+    disabled?: boolean;
+    /** Form field name for the hidden input. */
+    name?: string;
+    class?: string;
+}
+//# sourceMappingURL=FileUpload.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FileUpload/FileUpload.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACtD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC;IACvB,+CAA+C;IAC/C,oBAAoB,CAAC,EAAE,IAAI,EAAE,CAAC;IAC9B,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,aAAa,EAAE,IAAI,EAAE,CAAC;QAAC,aAAa,EAAE,OAAO,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IACtF,oDAAoD;IACpD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IAC1C,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC5C,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,2DAA2D;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/FileUpload/FileUpload.types.js

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

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

@@ -0,0 +1,4 @@
+export { default as FileUpload } from "./FileUpload.svelte";
+export type { FileUploadProps } from "./FileUpload.types.js";
+export type { FileUploadVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FileUpload/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/FileUpload/index.js

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

package/dist/components/FloatingPanel/FloatingPanel.svelte

@@ -0,0 +1,38 @@
+<!-- Root — owns open state, drag and resize. Wrap a trigger and content. -->
+<script lang="ts">
+  import { FloatingPanel as ArkFloatingPanel } from "@ark-ui/svelte";
+  import type { FloatingPanelProps } from "./FloatingPanel.types.js";
+  import "@ui-organized/core/components/FloatingPanel/FloatingPanel.css";
+
+  let {
+    open = $bindable(),
+    defaultOpen,
+    onOpenChange,
+    draggable,
+    resizable,
+    defaultSize,
+    minSize,
+    maxSize,
+    defaultPosition,
+    strategy,
+    children,
+  }: FloatingPanelProps = $props();
+</script>
+
+<ArkFloatingPanel.Root
+  bind:open
+  {defaultOpen}
+  onOpenChange={(details) => {
+    open = details.open;
+    onOpenChange?.(details.open);
+  }}
+  {draggable}
+  {resizable}
+  {defaultSize}
+  {minSize}
+  {maxSize}
+  {defaultPosition}
+  {strategy}
+>
+  {@render children?.()}
+</ArkFloatingPanel.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FloatingPanel/FloatingPanel.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,+DAA+D,CAAC;AAgCvE,QAAA,MAAM,aAAa,4DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,74 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type { ArkForwardable } from "../../types.js";
+/**
+ * Every interface here states its own members 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 FloatingPanelSize {
+    width: number;
+    height: number;
+}
+export interface FloatingPanelPosition {
+    x: number;
+    y: number;
+}
+export interface FloatingPanelProps {
+    /** Open state. Bindable: `bind:open`. */
+    open?: boolean;
+    /** Initial open state for the uncontrolled case. */
+    defaultOpen?: boolean;
+    /** Called when the panel opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Allows dragging the panel by its header. Defaults to true. */
+    draggable?: boolean;
+    /** Allows resizing the panel from its edges. Defaults to true. */
+    resizable?: boolean;
+    /** Initial size in pixels. */
+    defaultSize?: FloatingPanelSize;
+    /** Smallest size the panel can be resized to. */
+    minSize?: FloatingPanelSize;
+    /** Largest size the panel can be resized to. */
+    maxSize?: FloatingPanelSize;
+    /** Initial position in pixels, relative to the positioning strategy. */
+    defaultPosition?: FloatingPanelPosition;
+    /**
+     * Positioning strategy. Use `absolute` when the panel must stay inside a
+     * scrolling container rather than the viewport. Defaults to 'fixed'.
+     */
+    strategy?: "absolute" | "fixed";
+    children?: Snippet;
+}
+export interface FloatingPanelTriggerProps extends ArkForwardable<Omit<HTMLButtonAttributes, "class" | "value">> {
+    class?: string;
+    children?: Snippet;
+}
+export interface FloatingPanelContentProps {
+    /** Size variant, driving the panel's default width. Defaults to 'md'. */
+    size?: "sm" | "md" | "lg";
+    /** Surface treatment. `elevated` adds a shadow. Defaults to 'default'. */
+    variant?: "default" | "elevated";
+    /** Portal container for the panel. Defaults to document.body. */
+    container?: HTMLElement | null;
+    class?: string;
+    children?: Snippet;
+}
+export interface FloatingPanelHeaderProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    class?: string;
+    children?: Snippet;
+}
+export interface FloatingPanelTitleProps extends ArkForwardable<Omit<HTMLAttributes<HTMLHeadingElement>, "class">> {
+    class?: string;
+    children?: Snippet;
+}
+export interface FloatingPanelBodyProps extends ArkForwardable<Omit<HTMLAttributes<HTMLDivElement>, "class">> {
+    class?: string;
+    children?: Snippet;
+}
+export interface FloatingPanelCloseProps extends ArkForwardable<Omit<HTMLButtonAttributes, "class" | "value">> {
+    class?: string;
+    children?: Snippet;
+}
+//# sourceMappingURL=FloatingPanel.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FloatingPanel/FloatingPanel.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;;;;;GAKG;AAEH,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,qBAAqB;IACpC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,kBAAkB;IACjC,yCAAyC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,iDAAiD;IACjD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,gDAAgD;IAChD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,wEAAwE;IACxE,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,yBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,yEAAyE;IACzE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,iEAAiE;IACjE,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,wBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,uBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,sBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,uBACf,SAAQ,cAAc,CAAC,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/FloatingPanel/FloatingPanel.types.js

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

package/dist/components/FloatingPanel/FloatingPanelBody.svelte

@@ -0,0 +1,15 @@
+<!-- Scrollable body below the header. -->
+<script lang="ts">
+  import { FloatingPanel as ArkFloatingPanel } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { FloatingPanelBodyProps } from "./FloatingPanel.types.js";
+
+  let { class: className, children, ...rest }: FloatingPanelBodyProps = $props();
+</script>
+
+<ArkFloatingPanel.Body
+  class={clsx("floating-panel__body", "text-default-body-medium", className)}
+  {...rest}
+>
+  {@render children?.()}
+</ArkFloatingPanel.Body>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanelBody.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FloatingPanel/FloatingPanelBody.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAiBvE,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/components/FloatingPanel/FloatingPanelClose.svelte

@@ -0,0 +1,22 @@
+<!-- Closes the panel when activated. -->
+<script lang="ts">
+  import { FloatingPanel as ArkFloatingPanel } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import Icon from "../Icon/Icon.svelte";
+  import type { FloatingPanelCloseProps } from "./FloatingPanel.types.js";
+  import { glyph } from "../../icons/glyph.js";
+
+  /** Header affordances stay a fixed small edge — they mark the chrome rather
+   *  than scaling with the panel's body text. */
+  const HEADER_ICON_SIZE = 16;
+
+  let { class: className, children, ...rest }: FloatingPanelCloseProps = $props();
+</script>
+
+<ArkFloatingPanel.CloseTrigger
+  class={clsx("floating-panel__close", className)}
+  aria-label="Close panel"
+  {...rest}
+>
+  {#if children}{@render children()}{:else}<Icon name={glyph("close")} size={HEADER_ICON_SIZE} />{/if}
+</ArkFloatingPanel.CloseTrigger>

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

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

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

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

package/dist/components/FloatingPanel/FloatingPanelContent.svelte

@@ -0,0 +1,40 @@
+<!--
+  The panel surface itself, portalled and positioned.
+
+  Unlike every other overlay in this package, FloatingPanel is **not**
+  popper-backed — its positioner carries only the drag position and no inline
+  `z-index`. It still declares stacking on the content rather than the
+  positioner, and is still registered in `POPPER_LAYERS`, so the same "style the
+  popup" rule and the same tier assertion cover it.
+-->
+<script lang="ts">
+  import { FloatingPanel as ArkFloatingPanel, Portal } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { floatingPanelStyles } from "@ui-organized/core";
+  import type { FloatingPanelContentProps } from "./FloatingPanel.types.js";
+
+  let { size, variant, container, class: className, children }: FloatingPanelContentProps =
+    $props();
+
+  /* Resize handles on all four edges and corners. zag positions each from its
+     `axis`; only the hit area is styled. */
+  const AXES = ["n", "e", "s", "w", "ne", "se", "sw", "nw"] as const;
+</script>
+
+<Portal container={container ?? undefined}>
+  <!--
+    The positioner class must stay a plain string literal — the overlay-stacking
+    test scans for it.
+  -->
+  <ArkFloatingPanel.Positioner class="floating-panel__positioner">
+    <ArkFloatingPanel.Content class={clsx(floatingPanelStyles({ size, variant }), className)}>
+      {@render children?.()}
+      {#each AXES as axis (axis)}
+        <ArkFloatingPanel.ResizeTrigger
+          {axis}
+          class={`floating-panel__resize floating-panel__resize--${axis}`}
+        />
+      {/each}
+    </ArkFloatingPanel.Content>
+  </ArkFloatingPanel.Positioner>
+</Portal>

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

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

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

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

package/dist/components/FloatingPanel/FloatingPanelHeader.svelte

@@ -0,0 +1,18 @@
+<!--
+  The panel's title bar. Wraps its children in the drag handle, so grabbing the
+  header is what moves the panel — which is why the title and close button go
+  inside this part rather than straight into the content.
+-->
+<script lang="ts">
+  import { FloatingPanel as ArkFloatingPanel } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import type { FloatingPanelHeaderProps } from "./FloatingPanel.types.js";
+
+  let { class: className, children, ...rest }: FloatingPanelHeaderProps = $props();
+</script>
+
+<ArkFloatingPanel.Header class={clsx("floating-panel__header", className)} {...rest}>
+  <ArkFloatingPanel.DragTrigger class="floating-panel__drag">
+    {@render children?.()}
+  </ArkFloatingPanel.DragTrigger>
+</ArkFloatingPanel.Header>

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

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