@activecollab/components 2.0.368 → 2.0.370

package/dist/esm/components/StackedCard/Primitives.js

@@ -0,0 +1,122 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["role", "bleed", "direction", "background", "className", "children"];
+import React from "react";
+import classnames from "classnames";
+import { STACKED_CARD_CONTROL_CLASS, STACKED_CARD_COVER_RATIO } from "./constants";
+import { StackedCardExpandGlyph } from "./Glyphs";
+import { StyledStackedCardCollapsedStrip, StyledStackedCardCoverButton, StyledStackedCardCoverCenter, StyledStackedCardCoverFill, StyledStackedCardCoverMedia, StyledStackedCardCoverTopRight, StyledStackedCardPlayBadge, StyledStackedCardRow, StyledStackedCardStack, StyledStackedCardStripExpand } from "./Styles";
+
+/**
+ * StackedCard layout primitives.
+ *
+ * A stacked card is a portrait presentation of data: content stacks top to
+ * bottom in rows. There are three primitives and nothing else —
+ *
+ *  - StackedCardStack — the vertical column. A card IS a stack of rows; the
+ *    primitive is exported for nested stacks (a row that stacks internally).
+ *  - StackedCardRow   — the one layout primitive. Cover, title, meta, footer
+ *    are all rows; a `role` sets the default padding so the anatomy stays
+ *    predictable across every card type.
+ *  - StackedCardCover — sugar for a bleed row that holds media, reserves its
+ *    height with `aspect-ratio` so a late image never reflows the card, and
+ *    carries two control slots (center + top-right).
+ */
+
+/* ------------------------------------------------------------------ */
+/* Stack                                                               */
+/* ------------------------------------------------------------------ */
+
+/** A vertical flex column with no padding of its own. */
+export const StackedCardStack = StyledStackedCardStack;
+
+/* ------------------------------------------------------------------ */
+/* Row                                                                 */
+/* ------------------------------------------------------------------ */
+
+/**
+ * One row of a card's stack.
+ *
+ * In `row` direction the first level of children is distributed evenly along
+ * the X axis; a child carrying the `data-fixed` attribute keeps its own width
+ * and the rest share what remains.
+ */
+export const StackedCardRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let _ref$role = _ref.role,
+    role = _ref$role === void 0 ? "custom" : _ref$role,
+    bleed = _ref.bleed,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "row" : _ref$direction,
+    background = _ref.background,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledStackedCardRow, _extends({
+    ref: ref,
+    $role: role,
+    $bleed: bleed,
+    $direction: direction,
+    $background: background,
+    className: classnames("c-stacked-card__row", "c-stacked-card__row--" + role, {
+      "c-stacked-card__row--bleed": bleed
+    }, className)
+  }, rest), children);
+});
+StackedCardRow.displayName = "StackedCardRow";
+
+/* ------------------------------------------------------------------ */
+/* Cover                                                               */
+/* ------------------------------------------------------------------ */
+
+/**
+ * A bleed row that holds media.
+ *
+ * Controls in either slot are revealed on hover OR focus-within, so they stay
+ * reachable by keyboard. Collapsed, the media box gives way to a strip that is
+ * itself the expand button.
+ */
+export const StackedCardCover = _ref2 => {
+  let _ref2$aspectRatio = _ref2.aspectRatio,
+    aspectRatio = _ref2$aspectRatio === void 0 ? STACKED_CARD_COVER_RATIO : _ref2$aspectRatio,
+    centerSlot = _ref2.centerSlot,
+    topRightSlot = _ref2.topRightSlot,
+    collapsed = _ref2.collapsed,
+    collapsedStrip = _ref2.collapsedStrip,
+    onExpand = _ref2.onExpand,
+    _ref2$expandLabel = _ref2.expandLabel,
+    expandLabel = _ref2$expandLabel === void 0 ? "Expand cover" : _ref2$expandLabel,
+    className = _ref2.className,
+    children = _ref2.children;
+  return /*#__PURE__*/React.createElement(StackedCardRow, {
+    role: "cover",
+    bleed: true,
+    className: classnames("c-stacked-card__cover", className)
+  }, collapsed ? /*#__PURE__*/React.createElement(StyledStackedCardCollapsedStrip, {
+    type: "button",
+    "aria-label": expandLabel,
+    onClick: onExpand,
+    className: "c-stacked-card__cover-strip"
+  }, collapsedStrip, /*#__PURE__*/React.createElement(StyledStackedCardStripExpand, {
+    className: STACKED_CARD_CONTROL_CLASS,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(StackedCardExpandGlyph, null))) : /*#__PURE__*/React.createElement(StyledStackedCardCoverMedia, {
+    $aspectRatio: aspectRatio,
+    className: "c-stacked-card__cover-media"
+  }, /*#__PURE__*/React.createElement(StyledStackedCardCoverFill, null, children), centerSlot ? /*#__PURE__*/React.createElement(StyledStackedCardCoverCenter, {
+    className: STACKED_CARD_CONTROL_CLASS
+  }, centerSlot) : null, topRightSlot ? /*#__PURE__*/React.createElement(StyledStackedCardCoverTopRight, {
+    className: STACKED_CARD_CONTROL_CLASS
+  }, topRightSlot) : null));
+};
+StackedCardCover.displayName = "StackedCardCover";
+
+/* ------------------------------------------------------------------ */
+/* Cover chrome                                                        */
+/* ------------------------------------------------------------------ */
+
+/** Centered media control (a play button). Drop the glyph inside. */
+export const StackedCardPlayBadge = StyledStackedCardPlayBadge;
+
+/** Top-right cover-management button (collapse, remove …). */
+export const StackedCardCoverButton = StyledStackedCardCoverButton;
+//# sourceMappingURL=Primitives.js.map

package/dist/esm/components/StackedCard/Primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Primitives.js","names":["React","classnames","STACKED_CARD_CONTROL_CLASS","STACKED_CARD_COVER_RATIO","StackedCardExpandGlyph","StyledStackedCardCollapsedStrip","StyledStackedCardCoverButton","StyledStackedCardCoverCenter","StyledStackedCardCoverFill","StyledStackedCardCoverMedia","StyledStackedCardCoverTopRight","StyledStackedCardPlayBadge","StyledStackedCardRow","StyledStackedCardStack","StyledStackedCardStripExpand","StackedCardStack","StackedCardRow","forwardRef","_ref","ref","_ref$role","role","bleed","_ref$direction","direction","background","className","children","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","$role","$bleed","$direction","$background","displayName","StackedCardCover","_ref2","_ref2$aspectRatio","aspectRatio","centerSlot","topRightSlot","collapsed","collapsedStrip","onExpand","_ref2$expandLabel","expandLabel","type","onClick","$aspectRatio","StackedCardPlayBadge","StackedCardCoverButton"],"sources":["../../../../src/components/StackedCard/Primitives.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  STACKED_CARD_CONTROL_CLASS,\n  STACKED_CARD_COVER_RATIO,\n  StackedCardRowDirection,\n  StackedCardRowRole,\n} from \"./constants\";\nimport { StackedCardExpandGlyph } from \"./Glyphs\";\nimport {\n  StyledStackedCardCollapsedStrip,\n  StyledStackedCardCoverButton,\n  StyledStackedCardCoverCenter,\n  StyledStackedCardCoverFill,\n  StyledStackedCardCoverMedia,\n  StyledStackedCardCoverTopRight,\n  StyledStackedCardPlayBadge,\n  StyledStackedCardRow,\n  StyledStackedCardStack,\n  StyledStackedCardStripExpand,\n} from \"./Styles\";\n\n/**\n * StackedCard layout primitives.\n *\n * A stacked card is a portrait presentation of data: content stacks top to\n * bottom in rows. There are three primitives and nothing else —\n *\n *  - StackedCardStack — the vertical column. A card IS a stack of rows; the\n *    primitive is exported for nested stacks (a row that stacks internally).\n *  - StackedCardRow   — the one layout primitive. Cover, title, meta, footer\n *    are all rows; a `role` sets the default padding so the anatomy stays\n *    predictable across every card type.\n *  - StackedCardCover — sugar for a bleed row that holds media, reserves its\n *    height with `aspect-ratio` so a late image never reflows the card, and\n *    carries two control slots (center + top-right).\n */\n\n/* ------------------------------------------------------------------ */\n/* Stack                                                               */\n/* ------------------------------------------------------------------ */\n\n/** A vertical flex column with no padding of its own. */\nexport const StackedCardStack = StyledStackedCardStack;\n\n/* ------------------------------------------------------------------ */\n/* Row                                                                 */\n/* ------------------------------------------------------------------ */\n\nexport interface IStackedCardRowProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"role\"> {\n  /**\n   * Named layout role → default padding. Defaults to `custom`.\n   *\n   * This shadows the DOM `role` attribute on purpose: a row is a layout\n   * increment, and the concept's vocabulary for it is the role. Rows that need\n   * an ARIA role should carry it on their own content.\n   */\n  role?: StackedCardRowRole;\n  /** Zero the padding, overriding the role (media rows, edge-to-edge bands). */\n  bleed?: boolean;\n  /** Footer bands lay their children out vertically. Defaults to `row`. */\n  direction?: StackedCardRowDirection;\n  /** A row can carry its own background (a tinted footer band, a state tint). */\n  background?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * One row of a card's stack.\n *\n * In `row` direction the first level of children is distributed evenly along\n * the X axis; a child carrying the `data-fixed` attribute keeps its own width\n * and the rest share what remains.\n */\nexport const StackedCardRow = React.forwardRef<\n  HTMLDivElement,\n  IStackedCardRowProps\n>(\n  (\n    {\n      role = \"custom\",\n      bleed,\n      direction = \"row\",\n      background,\n      className,\n      children,\n      ...rest\n    },\n    ref\n  ): ReactElement => (\n    <StyledStackedCardRow\n      ref={ref}\n      $role={role}\n      $bleed={bleed}\n      $direction={direction}\n      $background={background}\n      className={classnames(\n        \"c-stacked-card__row\",\n        `c-stacked-card__row--${role}`,\n        { \"c-stacked-card__row--bleed\": bleed },\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </StyledStackedCardRow>\n  )\n);\n\nStackedCardRow.displayName = \"StackedCardRow\";\n\n/* ------------------------------------------------------------------ */\n/* Cover                                                               */\n/* ------------------------------------------------------------------ */\n\nexport interface IStackedCardCoverProps {\n  /**\n   * CSS `aspect-ratio` value that reserves the cover's height, e.g.\n   * `\"260 / 132\"`. A ratio, not a pixel height, so the cover scales with the\n   * card and holds its space before the media loads.\n   */\n  aspectRatio?: string;\n  /** Center slot — the media control (a play button over audio/video). */\n  centerSlot?: ReactNode;\n  /** Top-right slot — cover management (collapse, remove). */\n  topRightSlot?: ReactNode;\n  /**\n   * Render the thin collapsed strip instead of the media box. The collapse\n   * CONTROL lives in the caller's `topRightSlot`; this flag is the resulting\n   * visual state.\n   */\n  collapsed?: boolean;\n  /**\n   * What the collapsed strip shows — an ~8px colour bar, a favicon + domain\n   * row. Content-specific, so the caller supplies it.\n   */\n  collapsedStrip?: ReactNode;\n  /** Fired when the collapsed strip's expand affordance is activated. */\n  onExpand?: () => void;\n  /** Accessible label for the expand affordance. */\n  expandLabel?: string;\n  className?: string;\n  /** The fill: an `<img>`, an inline `<svg>`, or a solid-colour box. */\n  children: ReactNode;\n}\n\n/**\n * A bleed row that holds media.\n *\n * Controls in either slot are revealed on hover OR focus-within, so they stay\n * reachable by keyboard. Collapsed, the media box gives way to a strip that is\n * itself the expand button.\n */\nexport const StackedCardCover = ({\n  aspectRatio = STACKED_CARD_COVER_RATIO,\n  centerSlot,\n  topRightSlot,\n  collapsed,\n  collapsedStrip,\n  onExpand,\n  expandLabel = \"Expand cover\",\n  className,\n  children,\n}: IStackedCardCoverProps): ReactElement => (\n  <StackedCardRow\n    role=\"cover\"\n    bleed\n    className={classnames(\"c-stacked-card__cover\", className)}\n  >\n    {collapsed ? (\n      <StyledStackedCardCollapsedStrip\n        type=\"button\"\n        aria-label={expandLabel}\n        onClick={onExpand}\n        className=\"c-stacked-card__cover-strip\"\n      >\n        {collapsedStrip}\n        <StyledStackedCardStripExpand\n          className={STACKED_CARD_CONTROL_CLASS}\n          aria-hidden=\"true\"\n        >\n          <StackedCardExpandGlyph />\n        </StyledStackedCardStripExpand>\n      </StyledStackedCardCollapsedStrip>\n    ) : (\n      <StyledStackedCardCoverMedia\n        $aspectRatio={aspectRatio}\n        className=\"c-stacked-card__cover-media\"\n      >\n        <StyledStackedCardCoverFill>{children}</StyledStackedCardCoverFill>\n        {centerSlot ? (\n          <StyledStackedCardCoverCenter className={STACKED_CARD_CONTROL_CLASS}>\n            {centerSlot}\n          </StyledStackedCardCoverCenter>\n        ) : null}\n        {topRightSlot ? (\n          <StyledStackedCardCoverTopRight\n            className={STACKED_CARD_CONTROL_CLASS}\n          >\n            {topRightSlot}\n          </StyledStackedCardCoverTopRight>\n        ) : null}\n      </StyledStackedCardCoverMedia>\n    )}\n  </StackedCardRow>\n);\n\nStackedCardCover.displayName = \"StackedCardCover\";\n\n/* ------------------------------------------------------------------ */\n/* Cover chrome                                                        */\n/* ------------------------------------------------------------------ */\n\n/** Centered media control (a play button). Drop the glyph inside. */\nexport const StackedCardPlayBadge = StyledStackedCardPlayBadge;\n\n/** Top-right cover-management button (collapse, remove …). */\nexport const StackedCardCoverButton = StyledStackedCardCoverButton;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/StackedCard/StackedCard.d.ts

@@ -0,0 +1,74 @@
+import React, { ReactNode } from "react";
+/**
+ * StackedCard — the hollow shell for cards on drag-and-drop surfaces.
+ *
+ * This is NOT the base for cards in lists. It is the card for surfaces where
+ * dragging is a primary interaction: column boards and canvases. Content is
+ * laid out top to bottom in `StackedCardRow`s, which makes every card a
+ * portrait presentation of its data.
+ *
+ * ── The rule the whole subsystem hangs on ──────────────────────────────────
+ * THE SHELL STAYS HOLLOW. There is no `contentType` enum here, no per-type
+ * prop soup, no `if task …`. The shell owns only VISUAL STATES (selected,
+ * disabled, pending, priority, drag source/preview, entered) and one intent
+ * callback (`onResizeDelta`). Content is passed as `children` and composes the
+ * layout primitives. Typed cards — an ImageCard, a LinkCard, a TaskCard — are
+ * facades built on top of it in the consuming app, and adding one requires
+ * ZERO changes in this file.
+ *
+ * ── What the shell does NOT do ────────────────────────────────────────────
+ * It implements no drag-and-drop, no selection bookkeeping, no resize policy
+ * and no keyboard navigation. The card reports; the host decides. Drag
+ * choreography (the drag layer, the landing indicator, the drop) belongs to
+ * the host surface, which then feeds the result back as `isDragSource` /
+ * `isDragPreview`. The shell forwards its ref and spreads DOM props, so a host
+ * can attach `tabIndex`, ARIA, pointer and keyboard handlers to it.
+ *
+ * ── Theming ───────────────────────────────────────────────────────────────
+ * Colours resolve through `--sc-*` custom properties with built-in fallbacks:
+ * `--sc-selection-ring` (selection / focus / entered) and the cover scrim
+ * family `--sc-scrim`, `--sc-scrim-strong`, `--sc-scrim-fg`. Declare any of
+ * them on an ancestor to retint a whole surface.
+ */
+export interface IStackedCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onResize"> {
+    /** Host-owned selection state — a ring around the card. */
+    selected?: boolean;
+    /** Policy state: the card cannot be acted on. Dimmed, inert. */
+    disabled?: boolean;
+    /**
+     * Optimistic in-flight state — created or moved, not yet confirmed. Dimmed,
+     * non-interactive and not draggable, but distinct from `disabled`: it is
+     * transient, not a policy.
+     */
+    pending?: boolean;
+    /**
+     * The full-size outline placeholder left behind in the source position while
+     * a drag is in flight. Content is hidden but keeps its box, so neighbouring
+     * cards never move.
+     */
+    isDragSource?: boolean;
+    /**
+     * The 1:1 copy the host floats in its drag layer. Elevated shadow only — no
+     * tilt, no scale, no translate.
+     */
+    isDragPreview?: boolean;
+    /** Focus model: the card has been entered and focus is on an inner control. */
+    entered?: boolean;
+    /** Pin the hover treatment on, including revealed controls. For docs and specs. */
+    forceHover?: boolean;
+    /** Show the bottom-right resize grip. Opt-in, off by default. */
+    resizable?: boolean;
+    /**
+     * Draws the emphasis border down the left edge. A data colour, passed in by
+     * the caller (high priority, a label colour) — never baked into the shell.
+     */
+    priorityColor?: string;
+    /**
+     * Fired while the resize grip is dragged, with the pointer delta since the
+     * last event. The card reports the deltas; the host decides what they mean.
+     */
+    onResizeDelta?: (dx: number, dy: number) => void;
+    children: ReactNode;
+}
+export declare const StackedCard: React.ForwardRefExoticComponent<IStackedCardProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=StackedCard.d.ts.map

package/dist/esm/components/StackedCard/StackedCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedCard.d.ts","sourceRoot":"","sources":["../../../../src/components/StackedCard/StackedCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAQ5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,0FA0EvB,CAAC"}

package/dist/esm/components/StackedCard/StackedCard.js

@@ -0,0 +1,95 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["selected", "disabled", "pending", "isDragSource", "isDragPreview", "entered", "forceHover", "resizable", "priorityColor", "onResizeDelta", "className", "children"];
+import React, { useCallback, useRef } from "react";
+import classnames from "classnames";
+import { STACKED_CARD_CONTROL_CLASS } from "./constants";
+import { StackedCardResizeHandleGlyph } from "./Glyphs";
+import { StyledStackedCard, StyledStackedCardResizeHandle } from "./Styles";
+
+/**
+ * StackedCard — the hollow shell for cards on drag-and-drop surfaces.
+ *
+ * This is NOT the base for cards in lists. It is the card for surfaces where
+ * dragging is a primary interaction: column boards and canvases. Content is
+ * laid out top to bottom in `StackedCardRow`s, which makes every card a
+ * portrait presentation of its data.
+ *
+ * ── The rule the whole subsystem hangs on ──────────────────────────────────
+ * THE SHELL STAYS HOLLOW. There is no `contentType` enum here, no per-type
+ * prop soup, no `if task …`. The shell owns only VISUAL STATES (selected,
+ * disabled, pending, priority, drag source/preview, entered) and one intent
+ * callback (`onResizeDelta`). Content is passed as `children` and composes the
+ * layout primitives. Typed cards — an ImageCard, a LinkCard, a TaskCard — are
+ * facades built on top of it in the consuming app, and adding one requires
+ * ZERO changes in this file.
+ *
+ * ── What the shell does NOT do ────────────────────────────────────────────
+ * It implements no drag-and-drop, no selection bookkeeping, no resize policy
+ * and no keyboard navigation. The card reports; the host decides. Drag
+ * choreography (the drag layer, the landing indicator, the drop) belongs to
+ * the host surface, which then feeds the result back as `isDragSource` /
+ * `isDragPreview`. The shell forwards its ref and spreads DOM props, so a host
+ * can attach `tabIndex`, ARIA, pointer and keyboard handlers to it.
+ *
+ * ── Theming ───────────────────────────────────────────────────────────────
+ * Colours resolve through `--sc-*` custom properties with built-in fallbacks:
+ * `--sc-selection-ring` (selection / focus / entered) and the cover scrim
+ * family `--sc-scrim`, `--sc-scrim-strong`, `--sc-scrim-fg`. Declare any of
+ * them on an ancestor to retint a whole surface.
+ */
+
+export const StackedCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let selected = _ref.selected,
+    disabled = _ref.disabled,
+    pending = _ref.pending,
+    isDragSource = _ref.isDragSource,
+    isDragPreview = _ref.isDragPreview,
+    entered = _ref.entered,
+    forceHover = _ref.forceHover,
+    resizable = _ref.resizable,
+    priorityColor = _ref.priorityColor,
+    onResizeDelta = _ref.onResizeDelta,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const dragOrigin = useRef(null);
+  const handlePointerDown = useCallback(e => {
+    dragOrigin.current = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    e.target.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  }, []);
+  const handlePointerMove = useCallback(e => {
+    if (!dragOrigin.current || !onResizeDelta) return;
+    onResizeDelta(e.clientX - dragOrigin.current.x, e.clientY - dragOrigin.current.y);
+    dragOrigin.current = {
+      x: e.clientX,
+      y: e.clientY
+    };
+  }, [onResizeDelta]);
+  const handlePointerUp = useCallback(() => {
+    dragOrigin.current = null;
+  }, []);
+  return /*#__PURE__*/React.createElement(StyledStackedCard, _extends({
+    ref: ref,
+    $selected: selected,
+    $disabled: disabled,
+    $pending: pending,
+    $isDragSource: isDragSource,
+    $isDragPreview: isDragPreview,
+    $entered: entered,
+    $forceHover: forceHover,
+    $priorityColor: priorityColor,
+    className: classnames("c-stacked-card", className)
+  }, rest), children, resizable ? /*#__PURE__*/React.createElement(StyledStackedCardResizeHandle, {
+    className: classnames("c-stacked-card__resize-handle", STACKED_CARD_CONTROL_CLASS),
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp
+  }, /*#__PURE__*/React.createElement(StackedCardResizeHandleGlyph, null)) : null);
+});
+StackedCard.displayName = "StackedCard";
+//# sourceMappingURL=StackedCard.js.map

package/dist/esm/components/StackedCard/StackedCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedCard.js","names":["React","useCallback","useRef","classnames","STACKED_CARD_CONTROL_CLASS","StackedCardResizeHandleGlyph","StyledStackedCard","StyledStackedCardResizeHandle","StackedCard","forwardRef","_ref","ref","selected","disabled","pending","isDragSource","isDragPreview","entered","forceHover","resizable","priorityColor","onResizeDelta","className","children","rest","_objectWithoutPropertiesLoose","_excluded","dragOrigin","handlePointerDown","e","current","x","clientX","y","clientY","target","setPointerCapture","pointerId","preventDefault","handlePointerMove","handlePointerUp","createElement","_extends","$selected","$disabled","$pending","$isDragSource","$isDragPreview","$entered","$forceHover","$priorityColor","onPointerDown","onPointerMove","onPointerUp","displayName"],"sources":["../../../../src/components/StackedCard/StackedCard.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode, useCallback, useRef } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { STACKED_CARD_CONTROL_CLASS } from \"./constants\";\nimport { StackedCardResizeHandleGlyph } from \"./Glyphs\";\nimport { StyledStackedCard, StyledStackedCardResizeHandle } from \"./Styles\";\n\n/**\n * StackedCard — the hollow shell for cards on drag-and-drop surfaces.\n *\n * This is NOT the base for cards in lists. It is the card for surfaces where\n * dragging is a primary interaction: column boards and canvases. Content is\n * laid out top to bottom in `StackedCardRow`s, which makes every card a\n * portrait presentation of its data.\n *\n * ── The rule the whole subsystem hangs on ──────────────────────────────────\n * THE SHELL STAYS HOLLOW. There is no `contentType` enum here, no per-type\n * prop soup, no `if task …`. The shell owns only VISUAL STATES (selected,\n * disabled, pending, priority, drag source/preview, entered) and one intent\n * callback (`onResizeDelta`). Content is passed as `children` and composes the\n * layout primitives. Typed cards — an ImageCard, a LinkCard, a TaskCard — are\n * facades built on top of it in the consuming app, and adding one requires\n * ZERO changes in this file.\n *\n * ── What the shell does NOT do ────────────────────────────────────────────\n * It implements no drag-and-drop, no selection bookkeeping, no resize policy\n * and no keyboard navigation. The card reports; the host decides. Drag\n * choreography (the drag layer, the landing indicator, the drop) belongs to\n * the host surface, which then feeds the result back as `isDragSource` /\n * `isDragPreview`. The shell forwards its ref and spreads DOM props, so a host\n * can attach `tabIndex`, ARIA, pointer and keyboard handlers to it.\n *\n * ── Theming ───────────────────────────────────────────────────────────────\n * Colours resolve through `--sc-*` custom properties with built-in fallbacks:\n * `--sc-selection-ring` (selection / focus / entered) and the cover scrim\n * family `--sc-scrim`, `--sc-scrim-strong`, `--sc-scrim-fg`. Declare any of\n * them on an ancestor to retint a whole surface.\n */\n\nexport interface IStackedCardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onResize\"> {\n  /** Host-owned selection state — a ring around the card. */\n  selected?: boolean;\n  /** Policy state: the card cannot be acted on. Dimmed, inert. */\n  disabled?: boolean;\n  /**\n   * Optimistic in-flight state — created or moved, not yet confirmed. Dimmed,\n   * non-interactive and not draggable, but distinct from `disabled`: it is\n   * transient, not a policy.\n   */\n  pending?: boolean;\n  /**\n   * The full-size outline placeholder left behind in the source position while\n   * a drag is in flight. Content is hidden but keeps its box, so neighbouring\n   * cards never move.\n   */\n  isDragSource?: boolean;\n  /**\n   * The 1:1 copy the host floats in its drag layer. Elevated shadow only — no\n   * tilt, no scale, no translate.\n   */\n  isDragPreview?: boolean;\n  /** Focus model: the card has been entered and focus is on an inner control. */\n  entered?: boolean;\n  /** Pin the hover treatment on, including revealed controls. For docs and specs. */\n  forceHover?: boolean;\n  /** Show the bottom-right resize grip. Opt-in, off by default. */\n  resizable?: boolean;\n  /**\n   * Draws the emphasis border down the left edge. A data colour, passed in by\n   * the caller (high priority, a label colour) — never baked into the shell.\n   */\n  priorityColor?: string;\n  /**\n   * Fired while the resize grip is dragged, with the pointer delta since the\n   * last event. The card reports the deltas; the host decides what they mean.\n   */\n  onResizeDelta?: (dx: number, dy: number) => void;\n  children: ReactNode;\n}\n\nexport const StackedCard = React.forwardRef<HTMLDivElement, IStackedCardProps>(\n  (\n    {\n      selected,\n      disabled,\n      pending,\n      isDragSource,\n      isDragPreview,\n      entered,\n      forceHover,\n      resizable,\n      priorityColor,\n      onResizeDelta,\n      className,\n      children,\n      ...rest\n    },\n    ref\n  ): ReactElement => {\n    const dragOrigin = useRef<{ x: number; y: number } | null>(null);\n\n    const handlePointerDown = useCallback((e: React.PointerEvent) => {\n      dragOrigin.current = { x: e.clientX, y: e.clientY };\n      (e.target as HTMLElement).setPointerCapture(e.pointerId);\n      e.preventDefault();\n    }, []);\n\n    const handlePointerMove = useCallback(\n      (e: React.PointerEvent) => {\n        if (!dragOrigin.current || !onResizeDelta) return;\n        onResizeDelta(\n          e.clientX - dragOrigin.current.x,\n          e.clientY - dragOrigin.current.y\n        );\n        dragOrigin.current = { x: e.clientX, y: e.clientY };\n      },\n      [onResizeDelta]\n    );\n\n    const handlePointerUp = useCallback(() => {\n      dragOrigin.current = null;\n    }, []);\n\n    return (\n      <StyledStackedCard\n        ref={ref}\n        $selected={selected}\n        $disabled={disabled}\n        $pending={pending}\n        $isDragSource={isDragSource}\n        $isDragPreview={isDragPreview}\n        $entered={entered}\n        $forceHover={forceHover}\n        $priorityColor={priorityColor}\n        className={classnames(\"c-stacked-card\", className)}\n        {...rest}\n      >\n        {children}\n        {resizable ? (\n          <StyledStackedCardResizeHandle\n            className={classnames(\n              \"c-stacked-card__resize-handle\",\n              STACKED_CARD_CONTROL_CLASS\n            )}\n            onPointerDown={handlePointerDown}\n            onPointerMove={handlePointerMove}\n            onPointerUp={handlePointerUp}\n          >\n            <StackedCardResizeHandleGlyph />\n          </StyledStackedCardResizeHandle>\n        ) : null}\n      </StyledStackedCard>\n    );\n  }\n);\n\nStackedCard.displayName = \"StackedCard\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/StackedCard/Styles.d.ts

@@ -0,0 +1,46 @@
+import { StackedCardRowDirection, StackedCardRowRole } from "./constants";
+export declare const StyledStackedCardStack: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface IStyledRowProps {
+    $role: StackedCardRowRole;
+    $bleed?: boolean;
+    $direction: StackedCardRowDirection;
+    $background?: string;
+}
+export declare const StyledStackedCardRow: import("styled-components").StyledComponent<"div", any, IStyledRowProps, never>;
+/**
+ * The media box reserves its height with `aspect-ratio` so the image (or the
+ * skeleton standing in for it) never reflows the card when it arrives.
+ */
+export declare const StyledStackedCardCoverMedia: import("styled-components").StyledComponent<"div", any, {
+    $aspectRatio: string;
+}, never>;
+export declare const StyledStackedCardCoverFill: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledStackedCardCoverCenter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledStackedCardCoverTopRight: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * Collapsed cover — the media box gives way to a thin strip. The strip IS the
+ * expand affordance: the whole bar is a button and a chevron hint is revealed
+ * on hover or focus. It reserves no height of its own; the caller's
+ * `collapsedStrip` (an ~8px colour bar, a favicon + domain row) sets how tall
+ * it reads.
+ */
+export declare const StyledStackedCardCollapsedStrip: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledStackedCardStripExpand: import("styled-components").StyledComponent<"span", any, {}, never>;
+/** Centered media control (a play button). The caller drops the glyph inside. */
+export declare const StyledStackedCardPlayBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+/** Top-right cover-management button (collapse, remove …). */
+export declare const StyledStackedCardCoverButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledStackedCardResizeHandle: import("styled-components").StyledComponent<"span", any, {}, never>;
+export interface IStyledStackedCardProps {
+    $selected?: boolean;
+    $disabled?: boolean;
+    $pending?: boolean;
+    $isDragSource?: boolean;
+    $isDragPreview?: boolean;
+    $entered?: boolean;
+    $forceHover?: boolean;
+    $priorityColor?: string;
+}
+export declare const StyledStackedCard: import("styled-components").StyledComponent<"div", any, IStyledStackedCardProps, never>;
+export {};
+//# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/StackedCard/Styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/StackedCard/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAML,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAwCrB,eAAO,MAAM,sBAAsB,oEAMlC,CAAC;AAOF,UAAU,eAAe;IACvB,KAAK,EAAE,kBAAkB,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,uBAAuB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,iFAkChC,CAAC;AAOF;;;GAGG;AACH,eAAO,MAAM,2BAA2B;kBAA8B,MAAM;SAO3E,CAAC;AAKF,eAAO,MAAM,0BAA0B,oEAatC,CAAC;AAGF,eAAO,MAAM,4BAA4B,oEAMxC,CAAC;AAGF,eAAO,MAAM,8BAA8B,oEAM1C,CAAC;AAGF;;;;;;GAMG;AACH,eAAO,MAAM,+BAA+B,uEA2B3C,CAAC;AAKF,eAAO,MAAM,4BAA4B,qEAcxC,CAAC;AAOF,iFAAiF;AACjF,eAAO,MAAM,0BAA0B,qEAgBtC,CAAC;AAGF,8DAA8D;AAC9D,eAAO,MAAM,4BAA4B,uEAwBxC,CAAC;AAOF,eAAO,MAAM,6BAA6B,qEAazC,CAAC;AAOF,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAOD,eAAO,MAAM,iBAAiB,yFAqH7B,CAAC"}

package/dist/esm/components/StackedCard/Styles.js

@@ -0,0 +1,186 @@
+import styled, { css } from "styled-components";
+import { STACKED_CARD_CONTROL_CLASS, STACKED_CARD_FIXED_ATTR, STACKED_CARD_RADIUS, STACKED_CARD_ROLE_PADDING, STACKED_CARD_WIDTH } from "./constants";
+import { BoxSizingStyle } from "../BoxSizingStyle";
+
+/**
+ * Theming hooks.
+ *
+ * Every colour a StackedCard part needs is read through a `--sc-*` custom
+ * property with a built-in fallback, so the component looks right standing on
+ * its own and a host surface can still retint it by declaring the variable on
+ * any ancestor. No rgba/hex is baked into a rule; data colours (a swatch value,
+ * a priority colour) are always passed in by the caller.
+ */
+const SELECTION_RING = "var(--sc-selection-ring, var(--color-primary-500))";
+const SCRIM = "var(--sc-scrim, rgba(0, 0, 0, 0.55))";
+const SCRIM_STRONG = "var(--sc-scrim-strong, rgba(0, 0, 0, 0.72))";
+const SCRIM_FG = "var(--sc-scrim-fg, #ffffff)";
+
+/** Selector for anything carrying the control class. */
+const CONTROL = "." + STACKED_CARD_CONTROL_CLASS;
+
+/**
+ * The one reveal rule the whole subsystem shares: controls are hidden until the
+ * card (or the cover) is hovered OR holds focus. The focus path is what keeps
+ * them reachable by keyboard instead of mouse-only.
+ */
+const revealControls = css(["", "{opacity:0;transition:opacity 120ms ease;}&:hover ", ",&:focus-within ", "{opacity:1;}"], CONTROL, CONTROL, CONTROL);
+
+/* ------------------------------------------------------------------ */
+/* Stack — the vertical column. A card is a Stack of rows.             */
+/* ------------------------------------------------------------------ */
+
+export const StyledStackedCardStack = styled.div.withConfig({
+  displayName: "Styles__StyledStackedCardStack",
+  componentId: "sc-vnqm9x-0"
+})(["", " position:relative;display:flex;flex-direction:column;"], BoxSizingStyle);
+StyledStackedCardStack.displayName = "StyledStackedCardStack";
+
+/* ------------------------------------------------------------------ */
+/* Row — the only layout primitive, differentiated by `role`.          */
+/* ------------------------------------------------------------------ */
+
+export const StyledStackedCardRow = styled.div.withConfig({
+  displayName: "Styles__StyledStackedCardRow",
+  componentId: "sc-vnqm9x-1"
+})(["", " position:relative;display:flex;flex-direction:", ";align-items:", ";gap:", ";padding:", ";", " ", ""], BoxSizingStyle, _ref => {
+  let $direction = _ref.$direction;
+  return $direction;
+}, _ref2 => {
+  let $direction = _ref2.$direction;
+  return $direction === "column" ? "stretch" : "center";
+}, _ref3 => {
+  let $direction = _ref3.$direction;
+  return $direction === "column" ? "4px" : "8px";
+}, _ref4 => {
+  let $role = _ref4.$role,
+    $bleed = _ref4.$bleed;
+  return $bleed ? "0" : STACKED_CARD_ROLE_PADDING[$role];
+}, _ref5 => {
+  let $background = _ref5.$background;
+  return $background && css(["background:", ";"], $background);
+}, _ref6 => {
+  let $direction = _ref6.$direction;
+  return $direction === "row" && css(["> *{flex:1 1 0;min-width:0;}> [", "]{flex:0 0 auto;}"], STACKED_CARD_FIXED_ATTR);
+});
+StyledStackedCardRow.displayName = "StyledStackedCardRow";
+
+/* ------------------------------------------------------------------ */
+/* Cover — a bleed row that holds media.                               */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The media box reserves its height with `aspect-ratio` so the image (or the
+ * skeleton standing in for it) never reflows the card when it arrives.
+ */
+export const StyledStackedCardCoverMedia = styled.div.withConfig({
+  displayName: "Styles__StyledStackedCardCoverMedia",
+  componentId: "sc-vnqm9x-2"
+})(["position:relative;width:100%;aspect-ratio:", ";overflow:hidden;", ""], _ref7 => {
+  let $aspectRatio = _ref7.$aspectRatio;
+  return $aspectRatio;
+}, revealControls);
+StyledStackedCardCoverMedia.displayName = "StyledStackedCardCoverMedia";
+
+/* The fill (an <img>, an inline <svg> wrapper, or a solid-colour box) is laid
+   over the reserved box and made to cover it. */
+export const StyledStackedCardCoverFill = styled.div.withConfig({
+  displayName: "Styles__StyledStackedCardCoverFill",
+  componentId: "sc-vnqm9x-3"
+})(["position:absolute;inset:0;> *{width:100%;height:100%;}> img{display:block;object-fit:cover;}"]);
+StyledStackedCardCoverFill.displayName = "StyledStackedCardCoverFill";
+export const StyledStackedCardCoverCenter = styled.div.withConfig({
+  displayName: "Styles__StyledStackedCardCoverCenter",
+  componentId: "sc-vnqm9x-4"
+})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;"]);
+StyledStackedCardCoverCenter.displayName = "StyledStackedCardCoverCenter";
+export const StyledStackedCardCoverTopRight = styled.div.withConfig({
+  displayName: "Styles__StyledStackedCardCoverTopRight",
+  componentId: "sc-vnqm9x-5"
+})(["position:absolute;top:8px;right:8px;display:flex;gap:6px;"]);
+StyledStackedCardCoverTopRight.displayName = "StyledStackedCardCoverTopRight";
+
+/**
+ * Collapsed cover — the media box gives way to a thin strip. The strip IS the
+ * expand affordance: the whole bar is a button and a chevron hint is revealed
+ * on hover or focus. It reserves no height of its own; the caller's
+ * `collapsedStrip` (an ~8px colour bar, a favicon + domain row) sets how tall
+ * it reads.
+ */
+export const StyledStackedCardCollapsedStrip = styled.button.withConfig({
+  displayName: "Styles__StyledStackedCardCollapsedStrip",
+  componentId: "sc-vnqm9x-6"
+})(["", " position:relative;display:flex;align-items:center;width:100%;min-height:16px;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;", "{opacity:0;transition:opacity 120ms ease;}&:hover ", ",&:focus-visible ", "{opacity:1;}&:focus-visible{outline:2px solid ", ";outline-offset:-2px;}"], BoxSizingStyle, CONTROL, CONTROL, CONTROL, SELECTION_RING);
+StyledStackedCardCollapsedStrip.displayName = "StyledStackedCardCollapsedStrip";
+
+/* The expand chevron sits at the right, vertically centred, so it reads the
+   same whether the strip is a hairline colour bar or a taller favicon row. */
+export const StyledStackedCardStripExpand = styled.span.withConfig({
+  displayName: "Styles__StyledStackedCardStripExpand",
+  componentId: "sc-vnqm9x-7"
+})(["position:absolute;top:50%;right:8px;transform:translateY(-50%);display:inline-flex;width:16px;height:16px;color:var(--color-theme-600);svg{width:14px;height:14px;}"]);
+StyledStackedCardStripExpand.displayName = "StyledStackedCardStripExpand";
+
+/* ------------------------------------------------------------------ */
+/* Cover chrome — scrim-backed controls that sit over media            */
+/* ------------------------------------------------------------------ */
+
+/** Centered media control (a play button). The caller drops the glyph inside. */
+export const StyledStackedCardPlayBadge = styled.span.withConfig({
+  displayName: "Styles__StyledStackedCardPlayBadge",
+  componentId: "sc-vnqm9x-8"
+})(["display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:", ";color:", ";svg{fill:currentColor;width:20px;height:20px;margin-left:2px;}"], SCRIM, SCRIM_FG);
+StyledStackedCardPlayBadge.displayName = "StyledStackedCardPlayBadge";
+
+/** Top-right cover-management button (collapse, remove …). */
+export const StyledStackedCardCoverButton = styled.button.withConfig({
+  displayName: "Styles__StyledStackedCardCoverButton",
+  componentId: "sc-vnqm9x-9"
+})(["", " display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;cursor:pointer;color:", ";background:", ";svg{width:16px;height:16px;display:block;}&:hover{background:", ";}"], BoxSizingStyle, SCRIM_FG, SCRIM, SCRIM_STRONG);
+StyledStackedCardCoverButton.displayName = "StyledStackedCardCoverButton";
+
+/* ------------------------------------------------------------------ */
+/* Resize (opt-in): handle on hover, the card only reports deltas      */
+/* ------------------------------------------------------------------ */
+
+export const StyledStackedCardResizeHandle = styled.span.withConfig({
+  displayName: "Styles__StyledStackedCardResizeHandle",
+  componentId: "sc-vnqm9x-10"
+})(["position:absolute;right:2px;bottom:2px;width:14px;height:14px;cursor:nwse-resize;color:var(--color-theme-600);z-index:2;svg{display:block;}"]);
+StyledStackedCardResizeHandle.displayName = "StyledStackedCardResizeHandle";
+
+/* ------------------------------------------------------------------ */
+/* The shell                                                           */
+/* ------------------------------------------------------------------ */
+
+const hoverStyle = css(["box-shadow:0 4px 12px rgba(0,0,0,0.12);border-color:var(--color-theme-500);"]);
+export const StyledStackedCard = styled.div.withConfig({
+  displayName: "Styles__StyledStackedCard",
+  componentId: "sc-vnqm9x-11"
+})(["", " position:relative;display:flex;flex-direction:column;width:", "px;border-radius:", "px;background-color:var(--page-paper-main);border:1px solid var(--border-primary);box-shadow:0 1px 3px rgba(0,0,0,0.08);overflow:hidden;transition:box-shadow 150ms ease,border-color 150ms ease;", " &:hover{", "}&:focus-visible{outline:none;", " box-shadow:0 0 0 2px ", ";}", " ", " ", " ", " ", " ", " ", " ", ""], BoxSizingStyle, STACKED_CARD_WIDTH, STACKED_CARD_RADIUS, revealControls, hoverStyle, hoverStyle, SELECTION_RING, _ref8 => {
+  let $forceHover = _ref8.$forceHover;
+  return $forceHover && css(["", " && ", "{opacity:1;}"], hoverStyle, CONTROL);
+}, _ref9 => {
+  let $priorityColor = _ref9.$priorityColor;
+  return $priorityColor && css(["&::before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:4px;background:", ";z-index:2;}"], $priorityColor);
+}, _ref0 => {
+  let $selected = _ref0.$selected;
+  return $selected && css(["border-color:", ";box-shadow:0 0 0 2px ", ";"], SELECTION_RING, SELECTION_RING);
+}, _ref1 => {
+  let $disabled = _ref1.$disabled;
+  return $disabled && css(["opacity:0.5;pointer-events:none;"]);
+}, _ref10 => {
+  let $pending = _ref10.$pending;
+  return $pending && css(["opacity:0.6;pointer-events:none;cursor:progress;"]);
+}, _ref11 => {
+  let $isDragSource = _ref11.$isDragSource;
+  return $isDragSource && css(["background:transparent;border:1px dashed var(--color-theme-500);box-shadow:none;&:hover{box-shadow:none;border-color:var(--color-theme-500);}> *{visibility:hidden;}"]);
+}, _ref12 => {
+  let $isDragPreview = _ref12.$isDragPreview;
+  return $isDragPreview && css(["box-shadow:0 12px 28px rgba(0,0,0,0.24);cursor:grabbing;"]);
+}, _ref13 => {
+  let $entered = _ref13.$entered;
+  return $entered && css(["&&{border-color:", ";box-shadow:inset 0 0 0 2px ", ",0 0 0 2px ", ";}"], SELECTION_RING, SELECTION_RING, SELECTION_RING);
+});
+StyledStackedCard.displayName = "StyledStackedCard";
+//# sourceMappingURL=Styles.js.map

package/dist/esm/components/StackedCard/Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["styled","css","STACKED_CARD_CONTROL_CLASS","STACKED_CARD_FIXED_ATTR","STACKED_CARD_RADIUS","STACKED_CARD_ROLE_PADDING","STACKED_CARD_WIDTH","BoxSizingStyle","SELECTION_RING","SCRIM","SCRIM_STRONG","SCRIM_FG","CONTROL","revealControls","StyledStackedCardStack","div","withConfig","displayName","componentId","StyledStackedCardRow","_ref","$direction","_ref2","_ref3","_ref4","$role","$bleed","_ref5","$background","_ref6","StyledStackedCardCoverMedia","_ref7","$aspectRatio","StyledStackedCardCoverFill","StyledStackedCardCoverCenter","StyledStackedCardCoverTopRight","StyledStackedCardCollapsedStrip","button","StyledStackedCardStripExpand","span","StyledStackedCardPlayBadge","StyledStackedCardCoverButton","StyledStackedCardResizeHandle","hoverStyle","StyledStackedCard","_ref8","$forceHover","_ref9","$priorityColor","_ref0","$selected","_ref1","$disabled","_ref10","$pending","_ref11","$isDragSource","_ref12","$isDragPreview","_ref13","$entered"],"sources":["../../../../src/components/StackedCard/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport {\n  STACKED_CARD_CONTROL_CLASS,\n  STACKED_CARD_FIXED_ATTR,\n  STACKED_CARD_RADIUS,\n  STACKED_CARD_ROLE_PADDING,\n  STACKED_CARD_WIDTH,\n  StackedCardRowDirection,\n  StackedCardRowRole,\n} from \"./constants\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\n/**\n * Theming hooks.\n *\n * Every colour a StackedCard part needs is read through a `--sc-*` custom\n * property with a built-in fallback, so the component looks right standing on\n * its own and a host surface can still retint it by declaring the variable on\n * any ancestor. No rgba/hex is baked into a rule; data colours (a swatch value,\n * a priority colour) are always passed in by the caller.\n */\nconst SELECTION_RING = \"var(--sc-selection-ring, var(--color-primary-500))\";\nconst SCRIM = \"var(--sc-scrim, rgba(0, 0, 0, 0.55))\";\nconst SCRIM_STRONG = \"var(--sc-scrim-strong, rgba(0, 0, 0, 0.72))\";\nconst SCRIM_FG = \"var(--sc-scrim-fg, #ffffff)\";\n\n/** Selector for anything carrying the control class. */\nconst CONTROL = `.${STACKED_CARD_CONTROL_CLASS}`;\n\n/**\n * The one reveal rule the whole subsystem shares: controls are hidden until the\n * card (or the cover) is hovered OR holds focus. The focus path is what keeps\n * them reachable by keyboard instead of mouse-only.\n */\nconst revealControls = css`\n  ${CONTROL} {\n    opacity: 0;\n    transition: opacity 120ms ease;\n  }\n\n  &:hover ${CONTROL}, &:focus-within ${CONTROL} {\n    opacity: 1;\n  }\n`;\n\n/* ------------------------------------------------------------------ */\n/* Stack — the vertical column. A card is a Stack of rows.             */\n/* ------------------------------------------------------------------ */\n\nexport const StyledStackedCardStack = styled.div`\n  ${BoxSizingStyle}\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n`;\nStyledStackedCardStack.displayName = \"StyledStackedCardStack\";\n\n/* ------------------------------------------------------------------ */\n/* Row — the only layout primitive, differentiated by `role`.          */\n/* ------------------------------------------------------------------ */\n\ninterface IStyledRowProps {\n  $role: StackedCardRowRole;\n  $bleed?: boolean;\n  $direction: StackedCardRowDirection;\n  $background?: string;\n}\n\nexport const StyledStackedCardRow = styled.div<IStyledRowProps>`\n  ${BoxSizingStyle}\n\n  position: relative;\n  display: flex;\n  flex-direction: ${({ $direction }) => $direction};\n  align-items: ${({ $direction }) =>\n    $direction === \"column\" ? \"stretch\" : \"center\"};\n  gap: ${({ $direction }) => ($direction === \"column\" ? \"4px\" : \"8px\")};\n\n  /* bleed overrides any role and runs the row edge to edge. */\n  padding: ${({ $role, $bleed }) =>\n    $bleed ? \"0\" : STACKED_CARD_ROLE_PADDING[$role]};\n\n  ${({ $background }) =>\n    $background &&\n    css`\n      background: ${$background};\n    `}\n\n  /* Distribution (row direction only): fixed-width children keep their width,\n     the rest share what remains evenly; drop an empty spacer to push items. */\n  ${({ $direction }) =>\n    $direction === \"row\" &&\n    css`\n      > * {\n        flex: 1 1 0;\n        min-width: 0;\n      }\n\n      > [${STACKED_CARD_FIXED_ATTR}] {\n        flex: 0 0 auto;\n      }\n    `}\n`;\nStyledStackedCardRow.displayName = \"StyledStackedCardRow\";\n\n/* ------------------------------------------------------------------ */\n/* Cover — a bleed row that holds media.                               */\n/* ------------------------------------------------------------------ */\n\n/**\n * The media box reserves its height with `aspect-ratio` so the image (or the\n * skeleton standing in for it) never reflows the card when it arrives.\n */\nexport const StyledStackedCardCoverMedia = styled.div<{ $aspectRatio: string }>`\n  position: relative;\n  width: 100%;\n  aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};\n  overflow: hidden;\n\n  ${revealControls}\n`;\nStyledStackedCardCoverMedia.displayName = \"StyledStackedCardCoverMedia\";\n\n/* The fill (an <img>, an inline <svg> wrapper, or a solid-colour box) is laid\n   over the reserved box and made to cover it. */\nexport const StyledStackedCardCoverFill = styled.div`\n  position: absolute;\n  inset: 0;\n\n  > * {\n    width: 100%;\n    height: 100%;\n  }\n\n  > img {\n    display: block;\n    object-fit: cover;\n  }\n`;\nStyledStackedCardCoverFill.displayName = \"StyledStackedCardCoverFill\";\n\nexport const StyledStackedCardCoverCenter = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\nStyledStackedCardCoverCenter.displayName = \"StyledStackedCardCoverCenter\";\n\nexport const StyledStackedCardCoverTopRight = styled.div`\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  gap: 6px;\n`;\nStyledStackedCardCoverTopRight.displayName = \"StyledStackedCardCoverTopRight\";\n\n/**\n * Collapsed cover — the media box gives way to a thin strip. The strip IS the\n * expand affordance: the whole bar is a button and a chevron hint is revealed\n * on hover or focus. It reserves no height of its own; the caller's\n * `collapsedStrip` (an ~8px colour bar, a favicon + domain row) sets how tall\n * it reads.\n */\nexport const StyledStackedCardCollapsedStrip = styled.button`\n  ${BoxSizingStyle}\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: 16px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  text-align: left;\n\n  ${CONTROL} {\n    opacity: 0;\n    transition: opacity 120ms ease;\n  }\n\n  &:hover ${CONTROL}, &:focus-visible ${CONTROL} {\n    opacity: 1;\n  }\n\n  &:focus-visible {\n    outline: 2px solid ${SELECTION_RING};\n    outline-offset: -2px;\n  }\n`;\nStyledStackedCardCollapsedStrip.displayName = \"StyledStackedCardCollapsedStrip\";\n\n/* The expand chevron sits at the right, vertically centred, so it reads the\n   same whether the strip is a hairline colour bar or a taller favicon row. */\nexport const StyledStackedCardStripExpand = styled.span`\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  transform: translateY(-50%);\n  display: inline-flex;\n  width: 16px;\n  height: 16px;\n  color: var(--color-theme-600);\n\n  svg {\n    width: 14px;\n    height: 14px;\n  }\n`;\nStyledStackedCardStripExpand.displayName = \"StyledStackedCardStripExpand\";\n\n/* ------------------------------------------------------------------ */\n/* Cover chrome — scrim-backed controls that sit over media            */\n/* ------------------------------------------------------------------ */\n\n/** Centered media control (a play button). The caller drops the glyph inside. */\nexport const StyledStackedCardPlayBadge = styled.span`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  border-radius: 12px;\n  background: ${SCRIM};\n  color: ${SCRIM_FG};\n\n  svg {\n    fill: currentColor;\n    width: 20px;\n    height: 20px;\n    margin-left: 2px;\n  }\n`;\nStyledStackedCardPlayBadge.displayName = \"StyledStackedCardPlayBadge\";\n\n/** Top-right cover-management button (collapse, remove …). */\nexport const StyledStackedCardCoverButton = styled.button`\n  ${BoxSizingStyle}\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  padding: 0;\n  border: 0;\n  border-radius: 8px;\n  cursor: pointer;\n  color: ${SCRIM_FG};\n  background: ${SCRIM};\n\n  svg {\n    width: 16px;\n    height: 16px;\n    display: block;\n  }\n\n  &:hover {\n    background: ${SCRIM_STRONG};\n  }\n`;\nStyledStackedCardCoverButton.displayName = \"StyledStackedCardCoverButton\";\n\n/* ------------------------------------------------------------------ */\n/* Resize (opt-in): handle on hover, the card only reports deltas      */\n/* ------------------------------------------------------------------ */\n\nexport const StyledStackedCardResizeHandle = styled.span`\n  position: absolute;\n  right: 2px;\n  bottom: 2px;\n  width: 14px;\n  height: 14px;\n  cursor: nwse-resize;\n  color: var(--color-theme-600);\n  z-index: 2;\n\n  svg {\n    display: block;\n  }\n`;\nStyledStackedCardResizeHandle.displayName = \"StyledStackedCardResizeHandle\";\n\n/* ------------------------------------------------------------------ */\n/* The shell                                                           */\n/* ------------------------------------------------------------------ */\n\nexport interface IStyledStackedCardProps {\n  $selected?: boolean;\n  $disabled?: boolean;\n  $pending?: boolean;\n  $isDragSource?: boolean;\n  $isDragPreview?: boolean;\n  $entered?: boolean;\n  $forceHover?: boolean;\n  $priorityColor?: string;\n}\n\nconst hoverStyle = css`\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n  border-color: var(--color-theme-500);\n`;\n\nexport const StyledStackedCard = styled.div<IStyledStackedCardProps>`\n  ${BoxSizingStyle}\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: ${STACKED_CARD_WIDTH}px;\n  border-radius: ${STACKED_CARD_RADIUS}px;\n  background-color: var(--page-paper-main);\n  border: 1px solid var(--border-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  transition: box-shadow 150ms ease, border-color 150ms ease;\n\n  ${revealControls}\n\n  &:hover {\n    ${hoverStyle}\n  }\n\n  &:focus-visible {\n    outline: none;\n    ${hoverStyle}\n    box-shadow: 0 0 0 2px ${SELECTION_RING};\n  }\n\n  /* Forced hover — for docs, snapshots and \"this is what hover looks like\"\n     demos. The doubled ampersand gives it the specificity to beat the cover's\n     own reveal rule. */\n  ${({ $forceHover }) =>\n    $forceHover &&\n    css`\n      ${hoverStyle}\n      && ${CONTROL} {\n        opacity: 1;\n      }\n    `}\n\n  ${({ $priorityColor }) =>\n    $priorityColor &&\n    css`\n      &::before {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        width: 4px;\n        background: ${$priorityColor};\n        z-index: 2;\n      }\n    `}\n\n  ${({ $selected }) =>\n    $selected &&\n    css`\n      border-color: ${SELECTION_RING};\n      box-shadow: 0 0 0 2px ${SELECTION_RING};\n    `}\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      opacity: 0.5;\n      pointer-events: none;\n    `}\n\n  /* Pending / optimistic — created or moved, not yet confirmed by the server.\n     Dimmed, non-interactive and NOT draggable, but distinct from disabled: a\n     transient in-flight state, not a policy. */\n  ${({ $pending }) =>\n    $pending &&\n    css`\n      opacity: 0.6;\n      pointer-events: none;\n      cursor: progress;\n    `}\n\n  /* Drag SOURCE — full-size outline placeholder. Content is hidden but keeps\n     its box (visibility, not display) so the card holds identical dimensions\n     and the surrounding cards never move. */\n  ${({ $isDragSource }) =>\n    $isDragSource &&\n    css`\n      background: transparent;\n      border: 1px dashed var(--color-theme-500);\n      box-shadow: none;\n\n      &:hover {\n        box-shadow: none;\n        border-color: var(--color-theme-500);\n      }\n\n      > * {\n        visibility: hidden;\n      }\n    `}\n\n  /* Drag PREVIEW — the 1:1 copy the host floats in its drag layer. Elevated\n     shadow ONLY: no rotate, no scale, no translate. */\n  ${({ $isDragPreview }) =>\n    $isDragPreview &&\n    css`\n      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);\n      cursor: grabbing;\n    `}\n\n  /* Entered (focus model) — focus has moved inside, onto an inner control. */\n  ${({ $entered }) =>\n    $entered &&\n    css`\n      && {\n        border-color: ${SELECTION_RING};\n        box-shadow: inset 0 0 0 2px ${SELECTION_RING},\n          0 0 0 2px ${SELECTION_RING};\n      }\n    `}\n`;\nStyledStackedCard.displayName = \"StyledStackedCard\";\n"],"mappings":"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","ignoreList":[]}