@activecollab/components 2.0.369 → 2.0.370

package/dist/cjs/components/StackedCard/Glyphs.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StackedCardResizeHandleGlyph = exports.StackedCardRemoveCoverGlyph = exports.StackedCardExpandGlyph = exports.StackedCardCollapseGlyph = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * StackedCard chrome glyphs.
+ *
+ * These are part of the card's own chrome — they act on the CARD (collapse the
+ * cover, remove the cover, resize the card), never on the entity a card
+ * represents. They ship with the component rather than coming from the icon
+ * collection so a facade never has to re-pick them and every stacked card
+ * reads the same.
+ */
+
+/** Collapse the cover down to its thin strip. */
+var StackedCardCollapseGlyph = exports.StackedCardCollapseGlyph = function StackedCardCollapseGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 16 16",
+    fill: "none",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6.5 2.5v4h-4M9.5 13.5v-4h4",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+/** Expand a collapsed cover — the inverse of collapse, shown on the strip. */
+var StackedCardExpandGlyph = exports.StackedCardExpandGlyph = function StackedCardExpandGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 16 16",
+    fill: "none",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M2.5 6.5v-4h4M13.5 9.5v4h-4",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+/** Drop the cover entirely. */
+var StackedCardRemoveCoverGlyph = exports.StackedCardRemoveCoverGlyph = function StackedCardRemoveCoverGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 16 16",
+    fill: "none",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "2.25",
+    y: "3.75",
+    width: "11.5",
+    height: "8.5",
+    rx: "1.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 9.5L10 6M10 9.5L6 6",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }));
+};
+
+/** The bottom-right resize grip. */
+var StackedCardResizeHandleGlyph = exports.StackedCardResizeHandleGlyph = function StackedCardResizeHandleGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M12 6v6H6M12 9.5L9.5 12",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }));
+};
+//# sourceMappingURL=Glyphs.js.map

package/dist/cjs/components/StackedCard/Glyphs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Glyphs.js","names":["_react","_interopRequireDefault","require","e","__esModule","default","StackedCardCollapseGlyph","exports","createElement","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","StackedCardExpandGlyph","StackedCardRemoveCoverGlyph","x","y","width","height","rx","StackedCardResizeHandleGlyph"],"sources":["../../../../src/components/StackedCard/Glyphs.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\n/**\n * StackedCard chrome glyphs.\n *\n * These are part of the card's own chrome — they act on the CARD (collapse the\n * cover, remove the cover, resize the card), never on the entity a card\n * represents. They ship with the component rather than coming from the icon\n * collection so a facade never has to re-pick them and every stacked card\n * reads the same.\n */\n\n/** Collapse the cover down to its thin strip. */\nexport const StackedCardCollapseGlyph = (): ReactElement => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n    <path\n      d=\"M6.5 2.5v4h-4M9.5 13.5v-4h4\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\n/** Expand a collapsed cover — the inverse of collapse, shown on the strip. */\nexport const StackedCardExpandGlyph = (): ReactElement => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n    <path\n      d=\"M2.5 6.5v-4h4M13.5 9.5v4h-4\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\n/** Drop the cover entirely. */\nexport const StackedCardRemoveCoverGlyph = (): ReactElement => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n    <rect\n      x=\"2.25\"\n      y=\"3.75\"\n      width=\"11.5\"\n      height=\"8.5\"\n      rx=\"1.5\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n    />\n    <path\n      d=\"M6 9.5L10 6M10 9.5L6 6\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n\n/** The bottom-right resize grip. */\nexport const StackedCardResizeHandleGlyph = (): ReactElement => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 14 14\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M12 6v6H6M12 9.5L9.5 12\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA4C,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACO,IAAMG,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,SAA3BA,wBAAwBA,CAAA;EAAA,oBACnCN,MAAA,CAAAK,OAAA,CAAAG,aAAA;IAAKC,OAAO,EAAC,WAAW;IAACC,IAAI,EAAC,MAAM;IAAC,eAAY;EAAM,gBACrDV,MAAA,CAAAK,OAAA,CAAAG,aAAA;IACEG,CAAC,EAAC,6BAA6B;IAC/BC,MAAM,EAAC,cAAc;IACrBC,WAAW,EAAC,KAAK;IACjBC,aAAa,EAAC,OAAO;IACrBC,cAAc,EAAC;EAAO,CACvB,CACE,CAAC;AAAA,CACP;;AAED;AACO,IAAMC,sBAAsB,GAAAT,OAAA,CAAAS,sBAAA,GAAG,SAAzBA,sBAAsBA,CAAA;EAAA,oBACjChB,MAAA,CAAAK,OAAA,CAAAG,aAAA;IAAKC,OAAO,EAAC,WAAW;IAACC,IAAI,EAAC,MAAM;IAAC,eAAY;EAAM,gBACrDV,MAAA,CAAAK,OAAA,CAAAG,aAAA;IACEG,CAAC,EAAC,6BAA6B;IAC/BC,MAAM,EAAC,cAAc;IACrBC,WAAW,EAAC,KAAK;IACjBC,aAAa,EAAC,OAAO;IACrBC,cAAc,EAAC;EAAO,CACvB,CACE,CAAC;AAAA,CACP;;AAED;AACO,IAAME,2BAA2B,GAAAV,OAAA,CAAAU,2BAAA,GAAG,SAA9BA,2BAA2BA,CAAA;EAAA,oBACtCjB,MAAA,CAAAK,OAAA,CAAAG,aAAA;IAAKC,OAAO,EAAC,WAAW;IAACC,IAAI,EAAC,MAAM;IAAC,eAAY;EAAM,gBACrDV,MAAA,CAAAK,OAAA,CAAAG,aAAA;IACEU,CAAC,EAAC,MAAM;IACRC,CAAC,EAAC,MAAM;IACRC,KAAK,EAAC,MAAM;IACZC,MAAM,EAAC,KAAK;IACZC,EAAE,EAAC,KAAK;IACRV,MAAM,EAAC,cAAc;IACrBC,WAAW,EAAC;EAAK,CAClB,CAAC,eACFb,MAAA,CAAAK,OAAA,CAAAG,aAAA;IACEG,CAAC,EAAC,wBAAwB;IAC1BC,MAAM,EAAC,cAAc;IACrBC,WAAW,EAAC,KAAK;IACjBC,aAAa,EAAC;EAAO,CACtB,CACE,CAAC;AAAA,CACP;;AAED;AACO,IAAMS,4BAA4B,GAAAhB,OAAA,CAAAgB,4BAAA,GAAG,SAA/BA,4BAA4BA,CAAA;EAAA,oBACvCvB,MAAA,CAAAK,OAAA,CAAAG,aAAA;IACEY,KAAK,EAAC,IAAI;IACVC,MAAM,EAAC,IAAI;IACXZ,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAC,MAAM;IACX,eAAY;EAAM,gBAElBV,MAAA,CAAAK,OAAA,CAAAG,aAAA;IACEG,CAAC,EAAC,yBAAyB;IAC3BC,MAAM,EAAC,cAAc;IACrBC,WAAW,EAAC,KAAK;IACjBC,aAAa,EAAC;EAAO,CACtB,CACE,CAAC;AAAA,CACP","ignoreList":[]}

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

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StackedCardStack = exports.StackedCardRow = exports.StackedCardPlayBadge = exports.StackedCardCoverButton = exports.StackedCardCover = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("./constants");
+var _Glyphs = require("./Glyphs");
+var _Styles = require("./Styles");
+var _excluded = ["role", "bleed", "direction", "background", "className", "children"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/**
+ * 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. */
+var StackedCardStack = exports.StackedCardStack = _Styles.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.
+ */
+var StackedCardRow = exports.StackedCardRow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _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 = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardRow, _extends({
+    ref: ref,
+    $role: role,
+    $bleed: bleed,
+    $direction: direction,
+    $background: background,
+    className: (0, _classnames.default)("c-stacked-card__row", "c-stacked-card__row--".concat(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.
+ */
+var StackedCardCover = exports.StackedCardCover = function StackedCardCover(_ref2) {
+  var _ref2$aspectRatio = _ref2.aspectRatio,
+    aspectRatio = _ref2$aspectRatio === void 0 ? _constants.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.default.createElement(StackedCardRow, {
+    role: "cover",
+    bleed: true,
+    className: (0, _classnames.default)("c-stacked-card__cover", className)
+  }, collapsed ? /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardCollapsedStrip, {
+    type: "button",
+    "aria-label": expandLabel,
+    onClick: onExpand,
+    className: "c-stacked-card__cover-strip"
+  }, collapsedStrip, /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardStripExpand, {
+    className: _constants.STACKED_CARD_CONTROL_CLASS,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement(_Glyphs.StackedCardExpandGlyph, null))) : /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardCoverMedia, {
+    $aspectRatio: aspectRatio,
+    className: "c-stacked-card__cover-media"
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardCoverFill, null, children), centerSlot ? /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardCoverCenter, {
+    className: _constants.STACKED_CARD_CONTROL_CLASS
+  }, centerSlot) : null, topRightSlot ? /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardCoverTopRight, {
+    className: _constants.STACKED_CARD_CONTROL_CLASS
+  }, topRightSlot) : null));
+};
+StackedCardCover.displayName = "StackedCardCover";
+
+/* ------------------------------------------------------------------ */
+/* Cover chrome                                                        */
+/* ------------------------------------------------------------------ */
+
+/** Centered media control (a play button). Drop the glyph inside. */
+var StackedCardPlayBadge = exports.StackedCardPlayBadge = _Styles.StyledStackedCardPlayBadge;
+
+/** Top-right cover-management button (collapse, remove …). */
+var StackedCardCoverButton = exports.StackedCardCoverButton = _Styles.StyledStackedCardCoverButton;
+//# sourceMappingURL=Primitives.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Primitives.js","names":["_react","_interopRequireDefault","require","_classnames","_constants","_Glyphs","_Styles","_excluded","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_objectWithoutProperties","o","i","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","StackedCardStack","exports","StyledStackedCardStack","StackedCardRow","React","forwardRef","_ref","ref","_ref$role","role","bleed","_ref$direction","direction","background","className","children","rest","createElement","StyledStackedCardRow","$role","$bleed","$direction","$background","classnames","concat","displayName","StackedCardCover","_ref2","_ref2$aspectRatio","aspectRatio","STACKED_CARD_COVER_RATIO","centerSlot","topRightSlot","collapsed","collapsedStrip","onExpand","_ref2$expandLabel","expandLabel","StyledStackedCardCollapsedStrip","type","onClick","StyledStackedCardStripExpand","STACKED_CARD_CONTROL_CLASS","StackedCardExpandGlyph","StyledStackedCardCoverMedia","$aspectRatio","StyledStackedCardCoverFill","StyledStackedCardCoverCenter","StyledStackedCardCoverTopRight","StackedCardPlayBadge","StyledStackedCardPlayBadge","StackedCardCoverButton","StyledStackedCardCoverButton"],"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/cjs/components/StackedCard/StackedCard.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StackedCard = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("./constants");
+var _Glyphs = require("./Glyphs");
+var _Styles = require("./Styles");
+var _excluded = ["selected", "disabled", "pending", "isDragSource", "isDragPreview", "entered", "forceHover", "resizable", "priorityColor", "onResizeDelta", "className", "children"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/**
+ * 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.
+ */
+
+var StackedCard = exports.StackedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var 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 = _objectWithoutProperties(_ref, _excluded);
+  var dragOrigin = (0, _react.useRef)(null);
+  var handlePointerDown = (0, _react.useCallback)(function (e) {
+    dragOrigin.current = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    e.target.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  }, []);
+  var handlePointerMove = (0, _react.useCallback)(function (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]);
+  var handlePointerUp = (0, _react.useCallback)(function () {
+    dragOrigin.current = null;
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCard, _extends({
+    ref: ref,
+    $selected: selected,
+    $disabled: disabled,
+    $pending: pending,
+    $isDragSource: isDragSource,
+    $isDragPreview: isDragPreview,
+    $entered: entered,
+    $forceHover: forceHover,
+    $priorityColor: priorityColor,
+    className: (0, _classnames.default)("c-stacked-card", className)
+  }, rest), children, resizable ? /*#__PURE__*/_react.default.createElement(_Styles.StyledStackedCardResizeHandle, {
+    className: (0, _classnames.default)("c-stacked-card__resize-handle", _constants.STACKED_CARD_CONTROL_CLASS),
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp
+  }, /*#__PURE__*/_react.default.createElement(_Glyphs.StackedCardResizeHandleGlyph, null)) : null);
+});
+StackedCard.displayName = "StackedCard";
+//# sourceMappingURL=StackedCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackedCard.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_constants","_Glyphs","_Styles","_excluded","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","StackedCard","exports","React","forwardRef","_ref","ref","selected","disabled","pending","isDragSource","isDragPreview","entered","forceHover","resizable","priorityColor","onResizeDelta","className","children","rest","dragOrigin","useRef","handlePointerDown","useCallback","current","x","clientX","y","clientY","target","setPointerCapture","pointerId","preventDefault","handlePointerMove","handlePointerUp","createElement","StyledStackedCard","$selected","$disabled","$pending","$isDragSource","$isDragPreview","$entered","$forceHover","$priorityColor","classnames","StyledStackedCardResizeHandle","STACKED_CARD_CONTROL_CLASS","onPointerDown","onPointerMove","onPointerUp","StackedCardResizeHandleGlyph","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/cjs/components/StackedCard/Styles.js

@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledStackedCardStripExpand = exports.StyledStackedCardStack = exports.StyledStackedCardRow = exports.StyledStackedCardResizeHandle = exports.StyledStackedCardPlayBadge = exports.StyledStackedCardCoverTopRight = exports.StyledStackedCardCoverMedia = exports.StyledStackedCardCoverFill = exports.StyledStackedCardCoverCenter = exports.StyledStackedCardCoverButton = exports.StyledStackedCardCollapsedStrip = exports.StyledStackedCard = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _constants = require("./constants");
+var _BoxSizingStyle = require("../BoxSizingStyle");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * 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.
+ */
+var SELECTION_RING = "var(--sc-selection-ring, var(--color-primary-500))";
+var SCRIM = "var(--sc-scrim, rgba(0, 0, 0, 0.55))";
+var SCRIM_STRONG = "var(--sc-scrim-strong, rgba(0, 0, 0, 0.72))";
+var SCRIM_FG = "var(--sc-scrim-fg, #ffffff)";
+
+/** Selector for anything carrying the control class. */
+var CONTROL = ".".concat(_constants.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.
+ */
+var revealControls = (0, _styledComponents.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.             */
+/* ------------------------------------------------------------------ */
+
+var StyledStackedCardStack = exports.StyledStackedCardStack = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledStackedCardStack",
+  componentId: "sc-vnqm9x-0"
+})(["", " position:relative;display:flex;flex-direction:column;"], _BoxSizingStyle.BoxSizingStyle);
+StyledStackedCardStack.displayName = "StyledStackedCardStack";
+
+/* ------------------------------------------------------------------ */
+/* Row — the only layout primitive, differentiated by `role`.          */
+/* ------------------------------------------------------------------ */
+
+var StyledStackedCardRow = exports.StyledStackedCardRow = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledStackedCardRow",
+  componentId: "sc-vnqm9x-1"
+})(["", " position:relative;display:flex;flex-direction:", ";align-items:", ";gap:", ";padding:", ";", " ", ""], _BoxSizingStyle.BoxSizingStyle, function (_ref) {
+  var $direction = _ref.$direction;
+  return $direction;
+}, function (_ref2) {
+  var $direction = _ref2.$direction;
+  return $direction === "column" ? "stretch" : "center";
+}, function (_ref3) {
+  var $direction = _ref3.$direction;
+  return $direction === "column" ? "4px" : "8px";
+}, function (_ref4) {
+  var $role = _ref4.$role,
+    $bleed = _ref4.$bleed;
+  return $bleed ? "0" : _constants.STACKED_CARD_ROLE_PADDING[$role];
+}, function (_ref5) {
+  var $background = _ref5.$background;
+  return $background && (0, _styledComponents.css)(["background:", ";"], $background);
+}, function (_ref6) {
+  var $direction = _ref6.$direction;
+  return $direction === "row" && (0, _styledComponents.css)(["> *{flex:1 1 0;min-width:0;}> [", "]{flex:0 0 auto;}"], _constants.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.
+ */
+var StyledStackedCardCoverMedia = exports.StyledStackedCardCoverMedia = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledStackedCardCoverMedia",
+  componentId: "sc-vnqm9x-2"
+})(["position:relative;width:100%;aspect-ratio:", ";overflow:hidden;", ""], function (_ref7) {
+  var $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. */
+var StyledStackedCardCoverFill = exports.StyledStackedCardCoverFill = _styledComponents.default.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";
+var StyledStackedCardCoverCenter = exports.StyledStackedCardCoverCenter = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledStackedCardCoverCenter",
+  componentId: "sc-vnqm9x-4"
+})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;"]);
+StyledStackedCardCoverCenter.displayName = "StyledStackedCardCoverCenter";
+var StyledStackedCardCoverTopRight = exports.StyledStackedCardCoverTopRight = _styledComponents.default.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.
+ */
+var StyledStackedCardCollapsedStrip = exports.StyledStackedCardCollapsedStrip = _styledComponents.default.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.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. */
+var StyledStackedCardStripExpand = exports.StyledStackedCardStripExpand = _styledComponents.default.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. */
+var StyledStackedCardPlayBadge = exports.StyledStackedCardPlayBadge = _styledComponents.default.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 …). */
+var StyledStackedCardCoverButton = exports.StyledStackedCardCoverButton = _styledComponents.default.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.BoxSizingStyle, SCRIM_FG, SCRIM, SCRIM_STRONG);
+StyledStackedCardCoverButton.displayName = "StyledStackedCardCoverButton";
+
+/* ------------------------------------------------------------------ */
+/* Resize (opt-in): handle on hover, the card only reports deltas      */
+/* ------------------------------------------------------------------ */
+
+var StyledStackedCardResizeHandle = exports.StyledStackedCardResizeHandle = _styledComponents.default.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                                                           */
+/* ------------------------------------------------------------------ */
+
+var hoverStyle = (0, _styledComponents.css)(["box-shadow:0 4px 12px rgba(0,0,0,0.12);border-color:var(--color-theme-500);"]);
+var StyledStackedCard = exports.StyledStackedCard = _styledComponents.default.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.BoxSizingStyle, _constants.STACKED_CARD_WIDTH, _constants.STACKED_CARD_RADIUS, revealControls, hoverStyle, hoverStyle, SELECTION_RING, function (_ref8) {
+  var $forceHover = _ref8.$forceHover;
+  return $forceHover && (0, _styledComponents.css)(["", " && ", "{opacity:1;}"], hoverStyle, CONTROL);
+}, function (_ref9) {
+  var $priorityColor = _ref9.$priorityColor;
+  return $priorityColor && (0, _styledComponents.css)(["&::before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:4px;background:", ";z-index:2;}"], $priorityColor);
+}, function (_ref0) {
+  var $selected = _ref0.$selected;
+  return $selected && (0, _styledComponents.css)(["border-color:", ";box-shadow:0 0 0 2px ", ";"], SELECTION_RING, SELECTION_RING);
+}, function (_ref1) {
+  var $disabled = _ref1.$disabled;
+  return $disabled && (0, _styledComponents.css)(["opacity:0.5;pointer-events:none;"]);
+}, function (_ref10) {
+  var $pending = _ref10.$pending;
+  return $pending && (0, _styledComponents.css)(["opacity:0.6;pointer-events:none;cursor:progress;"]);
+}, function (_ref11) {
+  var $isDragSource = _ref11.$isDragSource;
+  return $isDragSource && (0, _styledComponents.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;}"]);
+}, function (_ref12) {
+  var $isDragPreview = _ref12.$isDragPreview;
+  return $isDragPreview && (0, _styledComponents.css)(["box-shadow:0 12px 28px rgba(0,0,0,0.24);cursor:grabbing;"]);
+}, function (_ref13) {
+  var $entered = _ref13.$entered;
+  return $entered && (0, _styledComponents.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