@kismet-ux/constellation 1.8.0 → 1.11.0

package/dist/ui/Chip/chip.d.ts

@@ -8,6 +8,22 @@ export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement>, Varian
      * so one value is enough for every `variant`.
      */
     color?: string;
+    /**
+     * Render the caller's own element instead of a `<span>`, keeping the chip's
+     * styling.
+     *
+     * A chip is a status marker by default and a span is right for that. But a
+     * row of chips is often a CHOICE — pick a variant, filter a list — and that
+     * needs real button semantics: focusable, keyboard-operable, `aria-pressed`.
+     * Styling a `<span>` to look tappable does not give any of that.
+     *
+     * ```tsx
+     * <Chip asChild variant={'outline'}>
+     *   <button type={'button'} aria-pressed={on} onClick={pick}>Diced</button>
+     * </Chip>
+     * ```
+     */
+    asChild?: boolean;
 }
 /**
  * A small status marker.

package/dist/ui/Chip/chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/ui/Chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC;IAChF;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,mFAkCT,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/ui/Chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC;IAChF;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,mFAqCT,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/ui/Chip/chip.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import cn from 'clsx';
 import * as React from 'react';
+import { Slot } from '../../internal/slot.js';
 import { withAriaHiddenChildren } from '../../internal/with-aria-hidden-children.js';
 import { chipVariants } from './chip-variants.js';
 
@@ -12,8 +13,9 @@ import { chipVariants } from './chip-variants.js';
  * `dashed` marks the value as provisional — a guess rather than a reading —
  * which is a distinction worth drawing without spending a second colour on it.
  */
-const Chip = React.forwardRef(({ className, size, theme, variant, shape, dashed, mono, uppercase, wrap, color, style, children, ...props }, ref) => {
-    return (jsx("span", { "data-slot": 'chip', ref: ref, className: cn(chipVariants({ size, theme, variant, shape, dashed, mono, uppercase, wrap }), className), style: color ? { ...style, '--chip-color': color } : style, ...props, children: withAriaHiddenChildren(children) }));
+const Chip = React.forwardRef(({ className, size, theme, variant, shape, dashed, mono, uppercase, wrap, color, asChild, style, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'span';
+    return (jsx(Comp, { "data-slot": 'chip', ref: ref, className: cn(chipVariants({ size, theme, variant, shape, dashed, mono, uppercase, wrap }), className), style: color ? { ...style, '--chip-color': color } : style, ...props, children: withAriaHiddenChildren(children) }));
 });
 Chip.displayName = 'Chip';
 

package/dist/ui/Chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../src/ui/Chip/chip.tsx"],"sourcesContent":["import { type VariantProps } from 'class-variance-authority';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport { withAriaHiddenChildren } from '../../internal/with-aria-hidden-children';\nimport { chipVariants } from './chip-variants';\n\nexport interface ChipProps\n  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof chipVariants> {\n  /**\n   * Any colour outside the theme scale — a category hue, a dietary marker.\n   * Overrides the whole set of colour roles the theme would otherwise supply,\n   * so one value is enough for every `variant`.\n   */\n  color?: string;\n}\n\n/**\n * A small status marker.\n *\n * `variant` chooses how much weight it carries: `soft` (a tinted fill, the\n * default) reads as ambient, `outline` recedes further, and `solid` is a claim.\n * `dashed` marks the value as provisional — a guess rather than a reading —\n * which is a distinction worth drawing without spending a second colour on it.\n */\nconst Chip = React.forwardRef<HTMLSpanElement, ChipProps>(\n  (\n    {\n      className,\n      size,\n      theme,\n      variant,\n      shape,\n      dashed,\n      mono,\n      uppercase,\n      wrap,\n      color,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <span\n        data-slot={'chip'}\n        ref={ref}\n        className={cn(\n          chipVariants({ size, theme, variant, shape, dashed, mono, uppercase, wrap }),\n          className,\n        )}\n        style={color ? ({ ...style, '--chip-color': color } as React.CSSProperties) : style}\n        {...props}\n      >\n        {withAriaHiddenChildren(children)}\n      </span>\n    );\n  },\n);\nChip.displayName = 'Chip';\n\nexport { Chip };\n"],"names":["_jsx"],"mappings":";;;;;;AAgBA;;;;;;;AAOG;AACH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CACE,EACE,SAAS,EACT,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,MAAM,EACN,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,QACEA,GAAA,CAAA,MAAA,EAAA,EAAA,WAAA,EACa,MAAM,EACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAC5E,SAAS,CACV,EACD,KAAK,EAAE,KAAK,GAAI,EAAE,GAAG,KAAK,EAAE,cAAc,EAAE,KAAK,EAA0B,GAAG,KAAK,EAAA,GAC/E,KAAK,EAAA,QAAA,EAER,sBAAsB,CAAC,QAAQ,CAAC,EAAA,CAC5B;AAEX,CAAC;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM;;"}
+{"version":3,"file":"chip.js","sources":["../../../src/ui/Chip/chip.tsx"],"sourcesContent":["import { type VariantProps } from 'class-variance-authority';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport { Slot } from '../../internal/slot';\nimport { withAriaHiddenChildren } from '../../internal/with-aria-hidden-children';\nimport { chipVariants } from './chip-variants';\n\nexport interface ChipProps\n  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof chipVariants> {\n  /**\n   * Any colour outside the theme scale — a category hue, a dietary marker.\n   * Overrides the whole set of colour roles the theme would otherwise supply,\n   * so one value is enough for every `variant`.\n   */\n  color?: string;\n  /**\n   * Render the caller's own element instead of a `<span>`, keeping the chip's\n   * styling.\n   *\n   * A chip is a status marker by default and a span is right for that. But a\n   * row of chips is often a CHOICE — pick a variant, filter a list — and that\n   * needs real button semantics: focusable, keyboard-operable, `aria-pressed`.\n   * Styling a `<span>` to look tappable does not give any of that.\n   *\n   * ```tsx\n   * <Chip asChild variant={'outline'}>\n   *   <button type={'button'} aria-pressed={on} onClick={pick}>Diced</button>\n   * </Chip>\n   * ```\n   */\n  asChild?: boolean;\n}\n\n/**\n * A small status marker.\n *\n * `variant` chooses how much weight it carries: `soft` (a tinted fill, the\n * default) reads as ambient, `outline` recedes further, and `solid` is a claim.\n * `dashed` marks the value as provisional — a guess rather than a reading —\n * which is a distinction worth drawing without spending a second colour on it.\n */\nconst Chip = React.forwardRef<HTMLSpanElement, ChipProps>(\n  (\n    {\n      className,\n      size,\n      theme,\n      variant,\n      shape,\n      dashed,\n      mono,\n      uppercase,\n      wrap,\n      color,\n      asChild,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'span';\n\n    return (\n      <Comp\n        data-slot={'chip'}\n        ref={ref}\n        className={cn(\n          chipVariants({ size, theme, variant, shape, dashed, mono, uppercase, wrap }),\n          className,\n        )}\n        style={color ? ({ ...style, '--chip-color': color } as React.CSSProperties) : style}\n        {...props}\n      >\n        {withAriaHiddenChildren(children)}\n      </Comp>\n    );\n  },\n);\nChip.displayName = 'Chip';\n\nexport { Chip };\n"],"names":["_jsx"],"mappings":";;;;;;;AAiCA;;;;;;;AAOG;AACH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CACE,EACE,SAAS,EACT,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,MAAM,EACN,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;IACF,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM;AAEpC,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,WAAA,EACQ,MAAM,EACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAC5E,SAAS,CACV,EACD,KAAK,EAAE,KAAK,GAAI,EAAE,GAAG,KAAK,EAAE,cAAc,EAAE,KAAK,EAA0B,GAAG,KAAK,EAAA,GAC/E,KAAK,EAAA,QAAA,EAER,sBAAsB,CAAC,QAAQ,CAAC,EAAA,CAC5B;AAEX,CAAC;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM;;"}

package/dist/ui/CodeBlock/code-block.css

@@ -209,9 +209,14 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .code-block-module_code-block-content--collapsible__EZKCv,
-  .code-block-module_code-block-collapse-fade__Y0TgX,
-  .code-block-module_code-block-toggle-icon__yL-sy {
+  :root:not([data-motion=full]) .code-block-module_code-block-content--collapsible__EZKCv,
+  :root:not([data-motion=full]) .code-block-module_code-block-collapse-fade__Y0TgX,
+  :root:not([data-motion=full]) .code-block-module_code-block-toggle-icon__yL-sy {
     transition: none;
   }
+}
+:root[data-motion=reduced] .code-block-module_code-block-content--collapsible__EZKCv,
+:root[data-motion=reduced] .code-block-module_code-block-collapse-fade__Y0TgX,
+:root[data-motion=reduced] .code-block-module_code-block-toggle-icon__yL-sy {
+  transition: none;
 }

package/dist/ui/Dialog/dialog.css

@@ -1,9 +1,13 @@
+@charset "UTF-8";
 .dialog-module_dialog-overlay__m4sZN {
   background-color: var(--background-modal);
   inset: 0;
   position: fixed;
   z-index: var(--z-modal);
 }
+.dialog-module_dialog-overlay__m4sZN[data-pass-through] {
+  pointer-events: none;
+}
 .dialog-module_dialog-overlay__m4sZN[data-state=open] {
   animation: dialog-module_fadeIn__8JmIQ 200ms;
 }
@@ -35,6 +39,9 @@
 .dialog-module_dialog-content__FgQr2.dialog-module_dialog-width-min__dbFaL {
   width: min-content;
 }
+.dialog-module_dialog-content__FgQr2.dialog-module_dialog-measure__ajXF_ {
+  width: var(--dialog-measure);
+}
 .dialog-module_dialog-content__FgQr2[data-state=open] {
   animation: dialog-module_fadeIn__8JmIQ 200ms, dialog-module_zoomIn__ezGtu 200ms;
 }
@@ -77,6 +84,69 @@
   }
 }
 
+/*
+ * A morphing dialog animates its own transform from the element it came from,
+ * so the stock zoom must not also be running — two animations on one
+ * transform is a judder, not a crossfade.
+ */
+/*
+ * A morphing dialog travels between two explicit geometries; see
+ * `useMorphFrom`. Everything here is keyed off `data-morph-state`, so the
+ * exit is the entrance with the value flipped rather than a second animation.
+ */
+.dialog-module_dialog-content__FgQr2[data-morph] {
+  animation: none;
+  /*
+   * …and the stock EXIT must not hide the panel.
+   *
+   * `[data-state='closed']` pairs its keyframes with a bare `opacity: 0` to
+   * hold the faded-out state after they finish. Cancelling the animation above
+   * leaves that declaration standing on its own, so a morphing panel went
+   * transparent on the first frame of its exit and then travelled home
+   * invisibly. Which looks exactly like having no exit animation at all.
+   */
+  opacity: 1;
+  /*
+   * Both of these belong to a panel whose box is being DRIVEN, and neither to
+   * one at rest — so they hang off the flag `pin()`/`release()` maintain
+   * rather than off `[data-morph]`.
+   *
+   * `overflow: hidden` is right while the box is a measured rectangle
+   * travelling between two sizes: content must not spill out of a panel that
+   * is still smaller than it. It is wrong the moment the panel arrives, where
+   * it overrode the base rule's `overflow-y: auto` and turned a dialog too
+   * tall for the screen into one whose lower half was simply cut off.
+   *
+   * The transition is scoped for the same reason: once the geometry is back
+   * with the stylesheet, `width` is `max-content` and `height` is `auto`, and
+   * animating a panel between two content-derived sizes every time a
+   * disclosure opens is a wobble, not a transition.
+   */
+}
+.dialog-module_dialog-content__FgQr2[data-morph][data-morph-pinned] {
+  overflow: hidden;
+  transition: left 300ms var(--easing-default), top 300ms var(--easing-default), width 300ms var(--easing-default), height 300ms var(--easing-default);
+}
+.dialog-module_dialog-content__FgQr2[data-morph] {
+  /*
+   * What the tile already shows STAYS, and everything else fills in.
+   *
+   * A child marked `data-morph-keep` is the part the panel and the tile have
+   * in common — the name, its marks, the size. It is present from the first
+   * frame, so the panel opens as a bigger version of the tile rather than as
+   * an empty box that fills up. The rest are the fields the tile has no room
+   * for: they arrive as the box grows large enough to hold them, and they
+   * leave before it has finished collapsing.
+   */
+}
+.dialog-module_dialog-content__FgQr2[data-morph] > *:not([data-morph-keep]) {
+  transition: opacity 160ms ease 90ms;
+}
+.dialog-module_dialog-content__FgQr2[data-morph][data-morph-state=from] > *:not([data-morph-keep]) {
+  opacity: 0;
+  transition-delay: 0ms;
+}
+
 @keyframes dialog-module_fadeIn__8JmIQ {
   from {
     opacity: 0;

package/dist/ui/Dialog/dialog.d.ts

@@ -16,11 +16,54 @@ export interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonE
     asChild?: boolean;
 }
 declare function DialogClose({ asChild, onClick, children, ...props }: DialogCloseProps): React.JSX.Element;
-declare function DialogOverlay({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function DialogOverlay({ className, passThrough, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    passThrough?: boolean;
+}): React.JSX.Element;
 export type DialogContentProps = React.HTMLAttributes<HTMLDivElement> & {
     width?: 'max' | 'min';
+    /**
+     * Give the panel a real width instead of letting its content decide.
+     *
+     * `width` is `max-content`/`min-content`, which is fine for a confirm but
+     * wrong for anything with a form in it: the panel ends up as narrow as the
+     * longest line allows and every row inside is squashed. Takes the same
+     * vocabulary as `Container` — `text`, `content`, `wide`, or a CSS length —
+     * and stays capped by the viewport either way.
+     */
+    measure?: 'text' | 'content' | 'wide' | (string & {});
+    /**
+     * The element the dialog came from, so it grows out of it and shrinks back
+     * into it rather than fading in over the top of the page.
+     *
+     * Pass the tile, row or card that was clicked. Where a modal has an obvious
+     * origin on screen, morphing from it says "this is that thing, larger" — a
+     * dialog that fades in centre-screen makes the reader find their place
+     * again when it closes.
+     *
+     * A `DOMRect` is accepted too, for the case where the origin has since been
+     * unmounted or moved.
+     */
+    origin?: React.RefObject<HTMLElement | null> | DOMRect | null;
+    /**
+     * Whether the scrim takes the pointer.
+     *
+     * `blocking` (the default) is a modal in the usual sense: the page behind is
+     * dimmed and inert, and a click on the scrim dismisses.
+     *
+     * `pass-through` dims the page but leaves it live, for a panel that is a
+     * DETAIL VIEW of something still on screen — a tile in a grid, a row in a
+     * table. Clicking the next tile should show the next thing, not spend one
+     * click closing and a second one opening. The dialog still dismisses on a
+     * click that lands outside it, so a click on the empty background behaves as
+     * it always did; a handler that calls `stopPropagation()` keeps it open,
+     * which is how the tile says "I am taking this click".
+     *
+     * Scroll is not locked in this mode, for the same reason: the thing you want
+     * to look at next may be further down the page.
+     */
+    overlay?: 'blocking' | 'pass-through';
 };
-declare function DialogContent({ className, children, width, ...props }: DialogContentProps): React.ReactPortal | null;
+declare function DialogContent({ className, children, width, origin, measure, overlay, style, ...props }: DialogContentProps): React.ReactPortal | null;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**

package/dist/ui/Dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/ui/Dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAI1F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,iBAAS,MAAM,CAAC,EACd,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,QAAQ,GACT,EAAE,WAAW,qBAsBb;AAID,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iBAAS,aAAa,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,qBAclF;AAID,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iBAAS,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAc9E;AAID,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,qBAanF;AAID,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CACvB,CAAC;AAEF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAa,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,4BAsE1F;AAID,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAIzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAUzE;AAED;;;;;;GAMG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,OAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,qBAuBA;AAED;;;;GAIG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAO,EACP,OAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,qBAuBA;AAID,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEjE;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/ui/Dialog/dialog.tsx"],"names":[],"mappings":"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"}

package/dist/ui/Dialog/dialog.js

@@ -6,10 +6,12 @@ import cn from 'clsx';
 import { XIcon } from 'lucide-react';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
+import { prefersReducedMotion } from '../../hooks/use-motion.js';
 import { Slot } from '../../internal/slot.js';
 import { useAnimationState, DEFAULT_ANIMATION_DURATION } from '../../internal/use-animation-state.js';
 import { useFocusTrap } from '../../internal/use-focus-trap.js';
 import { useScrollLock } from '../../internal/use-scroll-lock.js';
+import { isInConstellationPortal } from '../../utils/portal.js';
 import s from './dialog.module.scss.js';
 
 const DialogContext = React.createContext(null);
@@ -51,15 +53,249 @@ function DialogClose({ asChild, onClick, children, ...props }) {
     return (jsx(Comp, { "data-slot": 'dialog-close', onClick: handleClick, ...props, children: children }));
 }
 // ── Overlay ──────────────────────────────────────────────
-function DialogOverlay({ className, ...props }) {
+function DialogOverlay({ className, passThrough = false, ...props }) {
     const { open, onOpenChange } = useDialog();
-    return (jsx("div", { "data-slot": 'dialog-overlay', "data-state": open ? 'open' : 'closed', className: cn(s['dialog-overlay'], className), onClick: () => onOpenChange(false), "aria-hidden": 'true', ...props }));
+    return (jsx("div", { "data-slot": 'dialog-overlay', "data-state": open ? 'open' : 'closed', "data-pass-through": passThrough ? '' : undefined, className: cn(s['dialog-overlay'], className), 
+        // A pass-through scrim cannot be clicked at all — the click goes to the
+        // page under it, and DialogContent's document listener decides.
+        onClick: passThrough ? undefined : () => onOpenChange(false), "aria-hidden": 'true', ...props }));
 }
-function DialogContent({ className, children, width = 'max', ...props }) {
+/**
+ * Grow from `origin` on open, and shrink back into it on close.
+ *
+ * The animation is CSS. JavaScript supplies only the one thing a stylesheet
+ * cannot know — where on screen the panel came from — and flips a modifier;
+ * the transition between the two states does everything else. Closing is the
+ * same two states in the other order, so the exit is the entrance backwards by
+ * construction rather than a second animation kept in step by hand.
+ *
+ * The phase is React state, not an attribute poked in an effect, and that
+ * matters: the panel has to be PAINTED once in its `from` state before it can
+ * transition out of it. Setting both in one frame collapses them and nothing
+ * moves — which is exactly how the contents ended up at full strength from the
+ * first frame instead of building in as the box grew.
+ */
+function useMorphFrom(origin, state, duration) {
+    const ref = React.useRef(null);
+    const restingRef = React.useRef(null);
+    /*
+     * `from` is a starting position, and someone who has asked for less motion
+     * never travels — so they open in the resting state directly. Starting them
+     * at `from` would leave the panel wearing the modifier that hides its own
+     * contents, with nothing scheduled to take it off.
+     */
+    const [phase, setPhase] = React.useState(origin && !prefersReducedMotion() ? 'from' : 'to');
+    const rectOf = React.useCallback(() => {
+        if (!origin)
+            return null;
+        if (origin instanceof DOMRect)
+            return origin;
+        const el = origin.current;
+        return el ? el.getBoundingClientRect() : null;
+    }, [origin]);
+    /*
+     * Both ends are absolute pixels with no transform. Interpolating between
+     * `left: 283px` and `left: 50%` while a `translate(-50%, -50%)` also changes
+     * is not a straight line, and it shows.
+     */
+    const settled = React.useRef(false);
+    /*
+     * Force the pending style changes to be recalculated NOW.
+     *
+     * Everything below happens inside one task, and the browser is free to
+     * coalesce it into a single recalculation — which would see only the end
+     * state and have nothing to animate between. Reading a computed length is
+     * what makes the intermediate state real. It has to be a genuine style read:
+     * `void el.offsetWidth` proved unreliable here, returning the pre-pin width.
+     */
+    const reflow = (el) => getComputedStyle(el).width;
+    const pin = (el, r) => {
+        if (!el || !r)
+            return;
+        el.style.left = `${r.left}px`;
+        el.style.top = `${r.top}px`;
+        el.style.width = `${r.width}px`;
+        el.style.height = `${r.height}px`;
+        el.style.transform = 'none';
+        // Written here rather than from React state so the flag and the geometry
+        // it describes are always set in the same breath. The stylesheet hangs the
+        // travel transition and `overflow: hidden` off it — both belong to a panel
+        // whose box is being driven from here, and neither to one at rest.
+        el.dataset.morphPinned = '';
+    };
+    /*
+     * Give the box back to the stylesheet.
+     *
+     * The panel travels between two measured rectangles, which means it spends
+     * the journey wearing an inline `width` and `height`. Those must not outlive
+     * the journey: a dialog whose content can change — a disclosure opening, a
+     * list growing, a field validating — was frozen at whatever it measured on
+     * open, and `overflow: hidden` then clipped whatever no longer fit, so the
+     * buttons at the foot of a card left the card.
+     *
+     * Released with transitions suppressed. The declaration that animates the
+     * travel goes away with the flag, but the base rule's `transition: all` does
+     * not, and a panel snapping from a pinned pixel height to `auto` is a change
+     * it will happily animate — badly, since `auto` is not interpolable and the
+     * intermediate frames come out as a jump.
+     */
+    const release = (el) => {
+        if (!el)
+            return;
+        el.style.transitionProperty = 'none';
+        for (const prop of ['left', 'top', 'width', 'height', 'transform']) {
+            el.style.removeProperty(prop);
+        }
+        delete el.dataset.morphPinned;
+        reflow(el);
+        el.style.removeProperty('transition-property');
+    };
+    /*
+     * A callback ref, not a layout effect, and that is the whole trick.
+     *
+     * The panel does not exist on the render that opens the dialog — the mount
+     * is one state update behind — so a layout effect keyed on the phase runs
+     * once against a null node and never fires again, because the phase has not
+     * changed by the time the element finally lands. Attaching the measurement
+     * to the node itself means it happens exactly when there is a node, which is
+     * the actual precondition.
+     */
+    const attach = React.useCallback((node) => {
+        ref.current = node;
+        if (!node || !origin || settled.current || prefersReducedMotion())
+            return;
+        // The resting box, read before anything is pinned: where the panel would
+        // sit on its own, and therefore where it is travelling to.
+        restingRef.current = node.getBoundingClientRect();
+        // A starting position must not animate into place.
+        node.style.transitionProperty = 'none';
+        pin(node, rectOf());
+        reflow(node);
+    }, [origin, rectOf]);
+    /*
+     * Leave `from` one paint later.
+     *
+     * A plain effect, not a layout effect: it runs AFTER the browser has
+     * painted, which is the requirement — the panel has to have been drawn at
+     * the tile's size once, or there is nothing to travel from.
+     */
+    React.useEffect(() => {
+        const el = ref.current;
+        if (!el || !origin || settled.current || state !== 'open' || prefersReducedMotion())
+            return;
+        el.style.removeProperty('transition-property');
+        /*
+         * Settle that removal on its own. A transition compares the style before a
+         * change with the style after it, and `transition-property: none` in the
+         * "before" half means no transition is generated at all — so restoring the
+         * property and moving the panel inside one recalculation animates nothing.
+         */
+        reflow(el);
+        settled.current = true;
+        setPhase('to');
+    }, [origin, state]);
+    /*
+     * The travel itself, in both directions, and the handover at each end.
+     *
+     * `to` pins the resting box and then lets go of it once the panel has
+     * arrived, so the dialog sizes to its content for as long as it is open.
+     * `from` has to put the box back before it can travel home — and it measures
+     * where the panel actually IS rather than trusting the rectangle recorded on
+     * open, because between the two the content may well have changed the height.
+     */
+    React.useLayoutEffect(() => {
+        if (!origin || !settled.current || prefersReducedMotion())
+            return;
+        const el = ref.current;
+        if (!el)
+            return;
+        if (phase === 'from') {
+            // Freeze the panel exactly where it stands — mid-travel included, since
+            // a rect read during a transition is the animated position — and only
+            // then send it home, or there is no geometry to leave from.
+            const here = el.getBoundingClientRect();
+            el.style.transitionProperty = 'none';
+            pin(el, here);
+            reflow(el);
+            el.style.removeProperty('transition-property');
+            reflow(el);
+            pin(el, rectOf());
+            return;
+        }
+        pin(el, restingRef.current);
+        /*
+         * Hand the box back when the journey ends. `transitionend` is the honest
+         * signal, but it never fires for a property whose two ends are equal — a
+         * tile already the height of the panel, most obviously — so the timer is
+         * not a belt-and-braces fallback, it is the path taken whenever the panel
+         * did not have to travel in that dimension.
+         */
+        let done = false;
+        const finish = () => {
+            if (done)
+                return;
+            done = true;
+            release(el);
+        };
+        const onEnd = (e) => {
+            if (e.target === el && (e.propertyName === 'height' || e.propertyName === 'width'))
+                finish();
+        };
+        el.addEventListener('transitionend', onEnd);
+        const timer = window.setTimeout(finish, duration + 60);
+        return () => {
+            el.removeEventListener('transitionend', onEnd);
+            window.clearTimeout(timer);
+        };
+    }, [phase, origin, rectOf, duration]);
+    // Closing puts the modifier back, and the opening animation runs in reverse.
+    React.useLayoutEffect(() => {
+        if (origin && state === 'closed' && !prefersReducedMotion())
+            setPhase('from');
+    }, [state, origin]);
+    return { ref: attach, phase, duration };
+}
+function DialogContent({ className, children, width = 'max', origin, measure, overlay = 'blocking', style, ...props }) {
     const { open, onOpenChange, onAfterClose, titleId, descriptionId } = useDialog();
-    const { mounted, state } = useAnimationState(open, DEFAULT_ANIMATION_DURATION);
+    /*
+     * A morph travels further than a fade, so it needs longer — and the unmount
+     * timer has to use the SAME number, or the panel is torn out of the DOM
+     * part way through its exit.
+     */
+    const duration = origin ? 300 : DEFAULT_ANIMATION_DURATION;
+    const { mounted, state } = useAnimationState(open, duration);
+    const { ref: morphRef, phase: morphPhase } = useMorphFrom(origin, state, duration);
     const focusTrapRef = useFocusTrap(open);
-    useScrollLock(mounted);
+    const passThrough = overlay === 'pass-through';
+    // A live page behind the panel has to be scrollable, or half of what you can
+    // now click is out of reach.
+    useScrollLock(mounted && !passThrough);
+    /*
+     * With a scrim that cannot be clicked, dismissing is a document listener —
+     * the one thing the library otherwise refuses to do, because a native
+     * listener sees clicks React's tree never shows it.
+     *
+     * That is exactly why it works here. A handler on the page that calls
+     * `stopPropagation()` never reaches this, so an element can claim a click
+     * and keep the dialog open; anything that does not, dismisses. The check is
+     * on the panel itself rather than on the click's coordinates, so a Select or
+     * a menu portaled out of the panel keeps it open too.
+     */
+    const contentRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!open || !passThrough)
+            return undefined;
+        const onDocumentClick = (e) => {
+            const target = e.target;
+            if (!target || contentRef.current?.contains(target))
+                return;
+            if (isInConstellationPortal(target))
+                return;
+            onOpenChange(false);
+        };
+        document.addEventListener('click', onDocumentClick);
+        return () => document.removeEventListener('click', onDocumentClick);
+    }, [open, passThrough, onOpenChange]);
     const wasClosingRef = React.useRef(false);
     const onAfterCloseRef = React.useRef(onAfterClose);
     onAfterCloseRef.current = onAfterClose;
@@ -88,8 +324,21 @@ function DialogContent({ className, children, width = 'max', ...props }) {
     }, [open, onOpenChange]);
     if (!mounted || state === 'idle')
         return null;
-    const widthClass = width === 'min' ? s['dialog-width-min'] : '';
-    return createPortal(jsxs("div", { ref: focusTrapRef, children: [jsx("div", { "data-slot": 'dialog-overlay', "data-state": state, className: s['dialog-overlay'], onClick: () => onOpenChange(false), "aria-hidden": 'true' }), jsxs("div", { "data-slot": 'dialog-content', "data-state": state, role: 'dialog', "aria-modal": 'true', "aria-labelledby": titleId, "aria-describedby": descriptionId, className: cn(s['dialog-content'], widthClass, className), onClick: e => e.stopPropagation(), ...props, children: [children, jsx(DialogClose, { className: s['close-button'], asChild: true, children: jsxs(Button, { variant: 'ghost', theme: 'inherit', iconOnly: true, size: 'sm', children: [jsx(XIcon, {}), jsx("span", { className: 'srOnly', children: "Close" })] }) })] })] }), document.body);
+    const widthClass = measure ? s['dialog-measure'] : width === 'min' ? s['dialog-width-min'] : '';
+    const measureValue = measure
+        ? ['text', 'content', 'wide'].includes(measure)
+            ? `var(--measure-${measure})`
+            : measure
+        : undefined;
+    return createPortal(jsxs("div", { "data-constellation-portal": '', ref: focusTrapRef, children: [jsx("div", { "data-slot": 'dialog-overlay', "data-state": state, "data-pass-through": passThrough ? '' : undefined, className: s['dialog-overlay'], 
+                // A pass-through scrim never takes the click: it goes to the page
+                // underneath, and the document listener above decides what it meant.
+                onClick: passThrough ? undefined : () => onOpenChange(false), "aria-hidden": 'true' }), jsxs("div", { ref: node => {
+                    contentRef.current = node;
+                    morphRef(node);
+                }, "data-slot": 'dialog-content', "data-state": state, "data-morph": origin ? '' : undefined, "data-morph-state": origin ? morphPhase : undefined, role: 'dialog', "aria-modal": passThrough ? undefined : 'true', "aria-labelledby": titleId, "aria-describedby": descriptionId, className: cn(s['dialog-content'], widthClass, className), style: measureValue
+                    ? { ...style, '--dialog-measure': measureValue }
+                    : style, onClick: e => e.stopPropagation(), ...props, children: [children, jsx(DialogClose, { className: s['close-button'], asChild: true, children: jsxs(Button, { variant: 'ghost', theme: 'inherit', iconOnly: true, size: 'sm', children: [jsx(XIcon, {}), jsx("span", { className: 'srOnly', children: "Close" })] }) })] })] }), document.body);
 }
 // ── Semantic sub-components ──────────────────────────────
 function DialogHeader({ className, ...props }) {