@activecollab/components 2.0.368 → 2.0.370

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@activecollab/components",
-  "version": "2.0.368",
+  "version": "2.0.370",
   "description": "ActiveCollab Components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/dist/cjs/presentation/stackedCard/primitives.js

@@ -1,254 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StackRow = exports.Stack = exports.RemoveCoverGlyph = exports.ROLE_PADDING = exports.PlayBadge = exports.ExpandGlyph = exports.CoverButton = exports.Cover = exports.CollapseGlyph = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * StackedCard layout primitives (story-local, presentation-only).
- *
- * These are the documented foundation of the StackedCard subsystem — the
- * building blocks that every StackedCard concept story in this task set
- * imports from. They are NOT exported from the design-system barrel; they
- * live here so the concept stories share one source of truth instead of
- * re-declaring one-off styled blocks.
- *
- * Three primitives:
- *  - Stack     — the vertical column. A card is a Stack of StackRows.
- *  - StackRow  — the one layout primitive. Everything (cover, title, meta,
- *                footer) is a row; a `role` sets the default padding and the
- *                allowed direction so the anatomy stays predictable.
- *  - Cover     — sugar for a bleed row that holds media, reserves its height
- *                with `aspect-ratio` (so a late image never reflows), and
- *                carries two control slots (center + top-right).
- *
- * Colours here come exclusively from CSS variables — the dark scrim behind
- * cover controls is `--sc-scrim` / `--sc-scrim-strong` / `--sc-scrim-fg`, all
- * declared story-side as DS token candidates. No rgba/hex is hardcoded in a
- * primitive; only data colours (a swatch value, a label dot) are ever literal,
- * and those are passed in by the content, never baked in here.
- */
-
-/* ------------------------------------------------------------------ */
-/* Stack — vertical flex column. No own padding.                       */
-/* ------------------------------------------------------------------ */
-
-var Stack = exports.Stack = _styledComponents.default.div.withConfig({
-  displayName: "primitives__Stack",
-  componentId: "sc-1ax68l9-0"
-})(["position:relative;display:flex;flex-direction:column;"]);
-
-/* ------------------------------------------------------------------ */
-/* StackRow — the only layout primitive, differentiated by `role`.     */
-/* ------------------------------------------------------------------ */
-
-/**
- * Role → default padding. The row is the increment: title/footer carry the
- * system padding, meta is a tighter properties line, cover bleeds to the edge.
- * `custom` starts from the system padding and expects the caller to adjust.
- */
-var ROLE_PADDING = exports.ROLE_PADDING = {
-  cover: "0",
-  title: "8px 12px",
-  meta: "2px 12px 4px",
-  footer: "8px 12px",
-  custom: "8px 12px"
-};
-var StyledRow = _styledComponents.default.div.withConfig({
-  displayName: "primitives__StyledRow",
-  componentId: "sc-1ax68l9-1"
-})(["position:relative;display:flex;flex-direction:", ";align-items:", ";gap:", ";padding:", ";", " ", ""], 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" : 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;}> [data-fixed]{flex:0 0 auto;}"]);
-});
-var StackRow = exports.StackRow = function StackRow(_ref7) {
-  var _ref7$role = _ref7.role,
-    role = _ref7$role === void 0 ? "custom" : _ref7$role,
-    bleed = _ref7.bleed,
-    _ref7$direction = _ref7.direction,
-    direction = _ref7$direction === void 0 ? "row" : _ref7$direction,
-    background = _ref7.background,
-    className = _ref7.className,
-    children = _ref7.children;
-  return /*#__PURE__*/_react.default.createElement(StyledRow, {
-    $role: role,
-    $bleed: bleed,
-    $direction: direction,
-    $background: background,
-    className: className
-  }, children);
-};
-
-/* ------------------------------------------------------------------ */
-/* Cover — sugar for a bleed row that holds media.                     */
-/* ------------------------------------------------------------------ */
-
-/**
- * The media box reserves its height with `aspect-ratio` so the image (or the
- * skeleton that stands in for it) never reflows the card when it arrives.
- * Controls carry the `sc-control` class and are hidden until the cover is
- * hovered OR holds focus (`:focus-within`) — the focus path keeps the cover
- * controls reachable by keyboard, not mouse-only.
- */
-var StyledCoverMedia = _styledComponents.default.div.withConfig({
-  displayName: "primitives__StyledCoverMedia",
-  componentId: "sc-1ax68l9-2"
-})(["position:relative;width:100%;aspect-ratio:", ";overflow:hidden;.sc-control{opacity:0;transition:opacity 120ms ease;}&:hover .sc-control,&:focus-within .sc-control{opacity:1;}"], function (_ref8) {
-  var $aspectRatio = _ref8.$aspectRatio;
-  return $aspectRatio;
-});
-
-/* 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 StyledCoverFill = _styledComponents.default.div.withConfig({
-  displayName: "primitives__StyledCoverFill",
-  componentId: "sc-1ax68l9-3"
-})(["position:absolute;inset:0;> *{width:100%;height:100%;}> img{display:block;object-fit:cover;}"]);
-var StyledCoverCenter = _styledComponents.default.div.withConfig({
-  displayName: "primitives__StyledCoverCenter",
-  componentId: "sc-1ax68l9-4"
-})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;"]);
-var StyledCoverTopRight = _styledComponents.default.div.withConfig({
-  displayName: "primitives__StyledCoverTopRight",
-  componentId: "sc-1ax68l9-5"
-})(["position:absolute;top:8px;right:8px;display:flex;gap:6px;"]);
-
-/**
- * Collapsed cover — the media box gives way to a thin strip. The strip is the
- * expand affordance itself: the whole bar is a button, and a chevron hint is
- * revealed on hover OR focus (`.sc-control`, same reveal rule as every other
- * cover control) so it is reachable by keyboard, not mouse-only. The strip
- * holds no reserved height of its own — the caller's `collapsedStrip` (an ~8px
- * colour bar, or a favicon + domain row for links) sets how tall it reads.
- */
-var StyledCollapsedStrip = _styledComponents.default.button.withConfig({
-  displayName: "primitives__StyledCollapsedStrip",
-  componentId: "sc-1ax68l9-6"
-})(["position:relative;display:flex;align-items:center;width:100%;min-height:16px;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;.sc-control{opacity:0;transition:opacity 120ms ease;}&:hover .sc-control,&:focus-visible .sc-control{opacity:1;}&:focus-visible{outline:2px solid var(--sc-selection-ring);outline-offset:-2px;}"]);
-
-/* The expand chevron sits at the right, vertically centred over the strip, so
-   it reads the same whether the strip is a hairline colour bar or a taller
-   favicon row. Small + theme-coloured so it fits a thin strip without a scrim
-   button (the whole strip is the button). */
-var StyledStripExpand = _styledComponents.default.span.withConfig({
-  displayName: "primitives__StyledStripExpand",
-  componentId: "sc-1ax68l9-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;}"]);
-var Cover = exports.Cover = function Cover(_ref9) {
-  var _ref9$aspectRatio = _ref9.aspectRatio,
-    aspectRatio = _ref9$aspectRatio === void 0 ? "260 / 132" : _ref9$aspectRatio,
-    centerSlot = _ref9.centerSlot,
-    topRightSlot = _ref9.topRightSlot,
-    collapsed = _ref9.collapsed,
-    collapsedStrip = _ref9.collapsedStrip,
-    onExpand = _ref9.onExpand,
-    _ref9$expandLabel = _ref9.expandLabel,
-    expandLabel = _ref9$expandLabel === void 0 ? "Expand cover" : _ref9$expandLabel,
-    className = _ref9.className,
-    children = _ref9.children;
-  return /*#__PURE__*/_react.default.createElement(StackRow, {
-    role: "cover",
-    bleed: true,
-    className: className
-  }, collapsed ? /*#__PURE__*/_react.default.createElement(StyledCollapsedStrip, {
-    type: "button",
-    "aria-label": expandLabel,
-    onClick: onExpand
-  }, collapsedStrip, /*#__PURE__*/_react.default.createElement(StyledStripExpand, {
-    className: "sc-control",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/_react.default.createElement(ExpandGlyph, null))) : /*#__PURE__*/_react.default.createElement(StyledCoverMedia, {
-    $aspectRatio: aspectRatio
-  }, /*#__PURE__*/_react.default.createElement(StyledCoverFill, null, children), centerSlot ? /*#__PURE__*/_react.default.createElement(StyledCoverCenter, {
-    className: "sc-control"
-  }, centerSlot) : null, topRightSlot ? /*#__PURE__*/_react.default.createElement(StyledCoverTopRight, {
-    className: "sc-control"
-  }, topRightSlot) : null));
-};
-
-/* ------------------------------------------------------------------ */
-/* Cover controls — dark, scrim-backed chrome shared by every story.   */
-/* ------------------------------------------------------------------ */
-
-/* Centered media control (a play button). The caller drops the glyph inside. */
-var PlayBadge = exports.PlayBadge = _styledComponents.default.span.withConfig({
-  displayName: "primitives__PlayBadge",
-  componentId: "sc-1ax68l9-8"
-})(["display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--sc-scrim);color:var(--sc-scrim-fg);svg{fill:currentColor;width:20px;height:20px;margin-left:2px;}"]);
-
-/* Top-right cover-management button (collapse, remove …). */
-var CoverButton = exports.CoverButton = _styledComponents.default.button.withConfig({
-  displayName: "primitives__CoverButton",
-  componentId: "sc-1ax68l9-9"
-})(["display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;cursor:pointer;color:var(--sc-scrim-fg);background:var(--sc-scrim);svg{width:16px;height:16px;display:block;}&:hover{background:var(--sc-scrim-strong);}"]);
-
-/* Cover-management glyphs (act on the cover itself, not the entity). */
-var CollapseGlyph = exports.CollapseGlyph = function CollapseGlyph() {
-  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 glyph — the inverse of collapse; shown on the collapsed strip. */
-var ExpandGlyph = exports.ExpandGlyph = function ExpandGlyph() {
-  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"
-  }));
-};
-var RemoveCoverGlyph = exports.RemoveCoverGlyph = function RemoveCoverGlyph() {
-  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"
-  }));
-};
-//# sourceMappingURL=primitives.js.map

package/dist/cjs/presentation/stackedCard/primitives.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"primitives.js","names":["_react","_interopRequireDefault","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Stack","exports","styled","div","withConfig","displayName","componentId","ROLE_PADDING","cover","title","meta","footer","custom","StyledRow","_ref","$direction","_ref2","_ref3","_ref4","$role","$bleed","_ref5","$background","css","_ref6","StackRow","_ref7","_ref7$role","role","bleed","_ref7$direction","direction","background","className","children","createElement","StyledCoverMedia","_ref8","$aspectRatio","StyledCoverFill","StyledCoverCenter","StyledCoverTopRight","StyledCollapsedStrip","button","StyledStripExpand","span","Cover","_ref9","_ref9$aspectRatio","aspectRatio","centerSlot","topRightSlot","collapsed","collapsedStrip","onExpand","_ref9$expandLabel","expandLabel","type","onClick","ExpandGlyph","PlayBadge","CoverButton","CollapseGlyph","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","RemoveCoverGlyph","x","y","width","height","rx"],"sources":["../../../../src/presentation/stackedCard/primitives.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport styled, { css } from \"styled-components\";\n\n/**\n * StackedCard layout primitives (story-local, presentation-only).\n *\n * These are the documented foundation of the StackedCard subsystem — the\n * building blocks that every StackedCard concept story in this task set\n * imports from. They are NOT exported from the design-system barrel; they\n * live here so the concept stories share one source of truth instead of\n * re-declaring one-off styled blocks.\n *\n * Three primitives:\n *  - Stack     — the vertical column. A card is a Stack of StackRows.\n *  - StackRow  — the one layout primitive. Everything (cover, title, meta,\n *                footer) is a row; a `role` sets the default padding and the\n *                allowed direction so the anatomy stays predictable.\n *  - Cover     — sugar for a bleed row that holds media, reserves its height\n *                with `aspect-ratio` (so a late image never reflows), and\n *                carries two control slots (center + top-right).\n *\n * Colours here come exclusively from CSS variables — the dark scrim behind\n * cover controls is `--sc-scrim` / `--sc-scrim-strong` / `--sc-scrim-fg`, all\n * declared story-side as DS token candidates. No rgba/hex is hardcoded in a\n * primitive; only data colours (a swatch value, a label dot) are ever literal,\n * and those are passed in by the content, never baked in here.\n */\n\n/* ------------------------------------------------------------------ */\n/* Stack — vertical flex column. No own padding.                       */\n/* ------------------------------------------------------------------ */\n\nexport const Stack = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n`;\n\n/* ------------------------------------------------------------------ */\n/* StackRow — the only layout primitive, differentiated by `role`.     */\n/* ------------------------------------------------------------------ */\n\nexport type StackRowRole = \"cover\" | \"title\" | \"meta\" | \"footer\" | \"custom\";\n\nexport type StackRowDirection = \"row\" | \"column\";\n\n/**\n * Role → default padding. The row is the increment: title/footer carry the\n * system padding, meta is a tighter properties line, cover bleeds to the edge.\n * `custom` starts from the system padding and expects the caller to adjust.\n */\nexport const ROLE_PADDING: Record<StackRowRole, string> = {\n  cover: \"0\",\n  title: \"8px 12px\",\n  meta: \"2px 12px 4px\",\n  footer: \"8px 12px\",\n  custom: \"8px 12px\",\n};\n\ninterface StyledRowProps {\n  $role: StackRowRole;\n  $bleed?: boolean;\n  $direction: StackRowDirection;\n  $background?: string;\n}\n\nconst StyledRow = styled.div<StyledRowProps>`\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 }) => ($bleed ? \"0\" : 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      > [data-fixed] {\n        flex: 0 0 auto;\n      }\n    `}\n`;\n\nexport interface StackRowProps {\n  /** Named role → default padding + allowed direction. Defaults to `custom`. */\n  role?: StackRowRole;\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?: StackRowDirection;\n  /** A row can carry its own background (the tinted link-footer band). */\n  background?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nexport const StackRow = ({\n  role = \"custom\",\n  bleed,\n  direction = \"row\",\n  background,\n  className,\n  children,\n}: StackRowProps): ReactElement => (\n  <StyledRow\n    $role={role}\n    $bleed={bleed}\n    $direction={direction}\n    $background={background}\n    className={className}\n  >\n    {children}\n  </StyledRow>\n);\n\n/* ------------------------------------------------------------------ */\n/* Cover — sugar for 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 that stands in for it) never reflows the card when it arrives.\n * Controls carry the `sc-control` class and are hidden until the cover is\n * hovered OR holds focus (`:focus-within`) — the focus path keeps the cover\n * controls reachable by keyboard, not mouse-only.\n */\nconst StyledCoverMedia = styled.div<{ $aspectRatio: string }>`\n  position: relative;\n  width: 100%;\n  aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};\n  overflow: hidden;\n\n  .sc-control {\n    opacity: 0;\n    transition: opacity 120ms ease;\n  }\n\n  &:hover .sc-control,\n  &:focus-within .sc-control {\n    opacity: 1;\n  }\n`;\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. */\nconst StyledCoverFill = 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`;\n\nconst StyledCoverCenter = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst StyledCoverTopRight = styled.div`\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  gap: 6px;\n`;\n\n/**\n * Collapsed cover — the media box gives way to a thin strip. The strip is the\n * expand affordance itself: the whole bar is a button, and a chevron hint is\n * revealed on hover OR focus (`.sc-control`, same reveal rule as every other\n * cover control) so it is reachable by keyboard, not mouse-only. The strip\n * holds no reserved height of its own — the caller's `collapsedStrip` (an ~8px\n * colour bar, or a favicon + domain row for links) sets how tall it reads.\n */\nconst StyledCollapsedStrip = styled.button`\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  .sc-control {\n    opacity: 0;\n    transition: opacity 120ms ease;\n  }\n\n  &:hover .sc-control,\n  &:focus-visible .sc-control {\n    opacity: 1;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--sc-selection-ring);\n    outline-offset: -2px;\n  }\n`;\n\n/* The expand chevron sits at the right, vertically centred over the strip, so\n   it reads the same whether the strip is a hairline colour bar or a taller\n   favicon row. Small + theme-coloured so it fits a thin strip without a scrim\n   button (the whole strip is the button). */\nconst StyledStripExpand = 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`;\n\nexport interface CoverProps {\n  /**\n   * CSS `aspect-ratio` value that reserves the cover's height, e.g.\n   * `\"260 / 132\"`. Kept as a ratio (not a pixel height) so the cover scales\n   * with the card and holds its space before 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   * Collapsed cover: render the thin strip instead of the media box. The\n   * collapse *control* lives in the caller's `topRightSlot`; this flag is the\n   * resulting visual state. See the \"Collapsed cover\" story section.\n   */\n  collapsed?: boolean;\n  /**\n   * What the collapsed strip shows — an ~8px colour bar, or a favicon + domain\n   * row for links. 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\nexport const Cover = ({\n  aspectRatio = \"260 / 132\",\n  centerSlot,\n  topRightSlot,\n  collapsed,\n  collapsedStrip,\n  onExpand,\n  expandLabel = \"Expand cover\",\n  className,\n  children,\n}: CoverProps): ReactElement => (\n  <StackRow role=\"cover\" bleed className={className}>\n    {collapsed ? (\n      <StyledCollapsedStrip\n        type=\"button\"\n        aria-label={expandLabel}\n        onClick={onExpand}\n      >\n        {collapsedStrip}\n        <StyledStripExpand className=\"sc-control\" aria-hidden=\"true\">\n          <ExpandGlyph />\n        </StyledStripExpand>\n      </StyledCollapsedStrip>\n    ) : (\n      <StyledCoverMedia $aspectRatio={aspectRatio}>\n        <StyledCoverFill>{children}</StyledCoverFill>\n        {centerSlot ? (\n          <StyledCoverCenter className=\"sc-control\">\n            {centerSlot}\n          </StyledCoverCenter>\n        ) : null}\n        {topRightSlot ? (\n          <StyledCoverTopRight className=\"sc-control\">\n            {topRightSlot}\n          </StyledCoverTopRight>\n        ) : null}\n      </StyledCoverMedia>\n    )}\n  </StackRow>\n);\n\n/* ------------------------------------------------------------------ */\n/* Cover controls — dark, scrim-backed chrome shared by every story.   */\n/* ------------------------------------------------------------------ */\n\n/* Centered media control (a play button). The caller drops the glyph inside. */\nexport const PlayBadge = 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: var(--sc-scrim);\n  color: var(--sc-scrim-fg);\n\n  svg {\n    fill: currentColor;\n    width: 20px;\n    height: 20px;\n    margin-left: 2px;\n  }\n`;\n\n/* Top-right cover-management button (collapse, remove …). */\nexport const CoverButton = styled.button`\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: var(--sc-scrim-fg);\n  background: var(--sc-scrim);\n\n  svg {\n    width: 16px;\n    height: 16px;\n    display: block;\n  }\n\n  &:hover {\n    background: var(--sc-scrim-strong);\n  }\n`;\n\n/* Cover-management glyphs (act on the cover itself, not the entity). */\nexport const CollapseGlyph = (): 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 glyph — the inverse of collapse; shown on the collapsed strip. */\nexport const ExpandGlyph = (): 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\nexport const RemoveCoverGlyph = (): 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"],"mappings":"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","ignoreList":[]}

package/dist/cjs/presentation/stackedCard/shell.js

@@ -1,165 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StackedCard = exports.ResizeHandleGlyph = exports.COVER_RATIO_SWATCH = exports.COVER_RATIO_IMAGE = exports.COVER_RATIO_HERO = exports.COVER_RATIO = exports.CARD_WIDTH = exports.CARD_RADIUS = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _excluded = ["selected", "disabled", "pending", "isDragSource", "isDragPreview", "entered", "forceHover", "resizable", "priorityColor", "onResizeDelta", "children"];
-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 shell (story-local, presentation-only).
- *
- * The hollow frame every typed content component composes. Extracted from the
- * concept spec story (task 2/8) so the StackedCard concept stories share one
- * shell instead of re-declaring it. 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 the intent surface (`onResizeDelta`, the
- * DOM props it forwards). Content — a task, a link, an image, a swatch, a note
- * — is passed in as `children` and composes the layout primitives. A new
- * content type later is a new wrapper, with ZERO changes in this file.
- *
- * Not exported from the design-system barrel; it lives here so the concept
- * stories share one source of truth.
- */
-
-/* ------------------------------------------------------------------ */
-/* Reference dimensions (from the concept)                             */
-/* ------------------------------------------------------------------ */
-
-var CARD_WIDTH = exports.CARD_WIDTH = 260;
-var CARD_RADIUS = exports.CARD_RADIUS = 8;
-
-/* Cover heights are reserved with aspect-ratio (width / height) so a late image
-   never reflows the card. Per-type ratios live with the shell so every content
-   component reserves the same space its skeleton does. */
-var COVER_RATIO = exports.COVER_RATIO = "260 / 132";
-var COVER_RATIO_HERO = exports.COVER_RATIO_HERO = "320 / 190";
-var COVER_RATIO_IMAGE = exports.COVER_RATIO_IMAGE = "260 / 168";
-var COVER_RATIO_SWATCH = exports.COVER_RATIO_SWATCH = "260 / 104";
-
-/* ------------------------------------------------------------------ */
-/* Shell chrome                                                        */
-/* ------------------------------------------------------------------ */
-
-var hoverStyle = (0, _styledComponents.css)(["box-shadow:0 4px 12px rgba(0,0,0,0.12);border-color:var(--color-theme-500);"]);
-
-/* Controls (cover + entity) share one reveal rule: hidden until the card is
-   hovered OR holds focus, so they are reachable by keyboard, not mouse-only.
-   The cover also reveals its own controls; `&&` gives the forced-on state the
-   specificity to win over that resting rule. */
-var revealControls = (0, _styledComponents.css)([".sc-control{opacity:0;transition:opacity 120ms ease;}&:hover .sc-control,&:focus-within .sc-control{opacity:1;}"]);
-var StyledCard = _styledComponents.default.div.withConfig({
-  displayName: "shell__StyledCard",
-  componentId: "sc-nmi1iu-0"
-})(["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 var(--sc-selection-ring);}", " ", " ", " ", " ", " ", " ", " ", ""], CARD_WIDTH, CARD_RADIUS, revealControls, hoverStyle, hoverStyle, function (_ref) {
-  var $forceHover = _ref.$forceHover;
-  return $forceHover && (0, _styledComponents.css)(["", " && .sc-control{opacity:1;}"], hoverStyle);
-}, function (_ref2) {
-  var $priorityColor = _ref2.$priorityColor;
-  return $priorityColor && (0, _styledComponents.css)(["&::before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:4px;background:", ";z-index:2;}"], $priorityColor);
-}, function (_ref3) {
-  var $selected = _ref3.$selected;
-  return $selected && (0, _styledComponents.css)(["border-color:var(--sc-selection-ring);box-shadow:0 0 0 2px var(--sc-selection-ring);"]);
-}, function (_ref4) {
-  var $disabled = _ref4.$disabled;
-  return $disabled && (0, _styledComponents.css)(["opacity:0.5;pointer-events:none;"]);
-}, function (_ref5) {
-  var $pending = _ref5.$pending;
-  return $pending && (0, _styledComponents.css)(["opacity:0.6;pointer-events:none;cursor:progress;"]);
-}, function (_ref6) {
-  var $isDragSource = _ref6.$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 (_ref7) {
-  var $isDragPreview = _ref7.$isDragPreview;
-  return $isDragPreview && (0, _styledComponents.css)(["box-shadow:0 12px 28px rgba(0,0,0,0.24);cursor:grabbing;"]);
-}, function (_ref8) {
-  var $entered = _ref8.$entered;
-  return $entered && (0, _styledComponents.css)(["&&{border-color:var(--sc-selection-ring);box-shadow:inset 0 0 0 2px var(--sc-selection-ring),0 0 0 2px var(--sc-selection-ring);}"]);
-});
-
-/* ------------------------------------------------------------------ */
-/* Resize (opt-in): handle on hover, card reports deltas               */
-/* ------------------------------------------------------------------ */
-
-var StyledResizeHandle = _styledComponents.default.span.withConfig({
-  displayName: "shell__StyledResizeHandle",
-  componentId: "sc-nmi1iu-1"
-})(["position:absolute;right:2px;bottom:2px;width:14px;height:14px;cursor:nwse-resize;color:var(--color-theme-600);z-index:2;svg{display:block;}"]);
-var ResizeHandleGlyph = exports.ResizeHandleGlyph = function ResizeHandleGlyph() {
-  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"
-  }));
-};
-/* The shell forwards its ref and spreads DOM props (tabIndex, role, aria-*, the
-   keyboard/click handlers) so the focus-model and open-vs-select demos can
-   drive it — but it owns NO drag, selection, or content logic itself. */
-var StackedCard = exports.StackedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref9, ref) {
-  var selected = _ref9.selected,
-    disabled = _ref9.disabled,
-    pending = _ref9.pending,
-    isDragSource = _ref9.isDragSource,
-    isDragPreview = _ref9.isDragPreview,
-    entered = _ref9.entered,
-    forceHover = _ref9.forceHover,
-    resizable = _ref9.resizable,
-    priorityColor = _ref9.priorityColor,
-    onResizeDelta = _ref9.onResizeDelta,
-    children = _ref9.children,
-    rest = _objectWithoutProperties(_ref9, _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(StyledCard, _extends({
-    ref: ref,
-    $selected: selected,
-    $disabled: disabled,
-    $pending: pending,
-    $isDragSource: isDragSource,
-    $isDragPreview: isDragPreview,
-    $entered: entered,
-    $forceHover: forceHover,
-    $priorityColor: priorityColor
-  }, rest), children, resizable ? /*#__PURE__*/_react.default.createElement(StyledResizeHandle, {
-    className: "sc-control",
-    onPointerDown: handlePointerDown,
-    onPointerMove: handlePointerMove,
-    onPointerUp: handlePointerUp
-  }, /*#__PURE__*/_react.default.createElement(ResizeHandleGlyph, null)) : null);
-});
-StackedCard.displayName = "StackedCard";
-//# sourceMappingURL=shell.js.map

package/dist/cjs/presentation/stackedCard/shell.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"shell.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","CARD_WIDTH","exports","CARD_RADIUS","COVER_RATIO","COVER_RATIO_HERO","COVER_RATIO_IMAGE","COVER_RATIO_SWATCH","hoverStyle","css","revealControls","StyledCard","styled","div","withConfig","displayName","componentId","_ref","$forceHover","_ref2","$priorityColor","_ref3","$selected","_ref4","$disabled","_ref5","$pending","_ref6","$isDragSource","_ref7","$isDragPreview","_ref8","$entered","StyledResizeHandle","span","ResizeHandleGlyph","createElement","width","height","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","StackedCard","React","forwardRef","_ref9","ref","selected","disabled","pending","isDragSource","isDragPreview","entered","forceHover","resizable","priorityColor","onResizeDelta","children","rest","dragOrigin","useRef","handlePointerDown","useCallback","current","x","clientX","y","clientY","target","setPointerCapture","pointerId","preventDefault","handlePointerMove","handlePointerUp","className","onPointerDown","onPointerMove","onPointerUp"],"sources":["../../../../src/presentation/stackedCard/shell.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode, useCallback, useRef } from \"react\";\n\nimport styled, { css } from \"styled-components\";\n\n/**\n * StackedCard shell (story-local, presentation-only).\n *\n * The hollow frame every typed content component composes. Extracted from the\n * concept spec story (task 2/8) so the StackedCard concept stories share one\n * shell instead of re-declaring it. The rule the whole subsystem hangs on:\n *\n *   THE SHELL STAYS HOLLOW.\n *\n * There is no `contentType` enum here, no per-type prop soup, no `if task …`.\n * The shell owns only VISUAL STATES (selected, disabled, pending, priority,\n * drag source/preview, entered) and the intent surface (`onResizeDelta`, the\n * DOM props it forwards). Content — a task, a link, an image, a swatch, a note\n * — is passed in as `children` and composes the layout primitives. A new\n * content type later is a new wrapper, with ZERO changes in this file.\n *\n * Not exported from the design-system barrel; it lives here so the concept\n * stories share one source of truth.\n */\n\n/* ------------------------------------------------------------------ */\n/* Reference dimensions (from the concept)                             */\n/* ------------------------------------------------------------------ */\n\nexport const CARD_WIDTH = 260;\nexport const CARD_RADIUS = 8;\n\n/* Cover heights are reserved with aspect-ratio (width / height) so a late image\n   never reflows the card. Per-type ratios live with the shell so every content\n   component reserves the same space its skeleton does. */\nexport const COVER_RATIO = \"260 / 132\";\nexport const COVER_RATIO_HERO = \"320 / 190\";\nexport const COVER_RATIO_IMAGE = \"260 / 168\";\nexport const COVER_RATIO_SWATCH = \"260 / 104\";\n\n/* ------------------------------------------------------------------ */\n/* Shell chrome                                                        */\n/* ------------------------------------------------------------------ */\n\ninterface StyledCardProps {\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\n/* Controls (cover + entity) share one reveal rule: hidden until the card is\n   hovered OR holds focus, so they are reachable by keyboard, not mouse-only.\n   The cover also reveals its own controls; `&&` gives the forced-on state the\n   specificity to win over that resting rule. */\nconst revealControls = css`\n  .sc-control {\n    opacity: 0;\n    transition: opacity 120ms ease;\n  }\n\n  &:hover .sc-control,\n  &:focus-within .sc-control {\n    opacity: 1;\n  }\n`;\n\nconst StyledCard = styled.div<StyledCardProps>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: ${CARD_WIDTH}px;\n  border-radius: ${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 var(--sc-selection-ring);\n  }\n\n  ${({ $forceHover }) =>\n    $forceHover &&\n    css`\n      ${hoverStyle}\n      && .sc-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: var(--sc-selection-ring);\n      box-shadow: 0 0 0 2px var(--sc-selection-ring);\n    `}\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      opacity: 0.5;\n      pointer-events: none;\n    `}\n\n  /* Pending / optimistic — the card was just created or moved and the server\n     has not confirmed it yet. Dimmed, non-interactive and NOT draggable, but\n     distinct from disabled (it is a 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 the 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 is on one of the card's inner controls. */\n  ${({ $entered }) =>\n    $entered &&\n    css`\n      && {\n        border-color: var(--sc-selection-ring);\n        box-shadow: inset 0 0 0 2px var(--sc-selection-ring),\n          0 0 0 2px var(--sc-selection-ring);\n      }\n    `}\n`;\n\n/* ------------------------------------------------------------------ */\n/* Resize (opt-in): handle on hover, card reports deltas               */\n/* ------------------------------------------------------------------ */\n\nconst StyledResizeHandle = 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`;\n\nexport const ResizeHandleGlyph = (): 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\nexport interface StackedCardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onResize\"> {\n  selected?: boolean;\n  disabled?: boolean;\n  /** Optimistic in-flight state — dimmed, non-interactive, not draggable. */\n  pending?: boolean;\n  /** Full-size outline placeholder left in the source position while dragging. */\n  isDragSource?: boolean;\n  /** The 1:1 elevated copy the host floats in the drag layer. */\n  isDragPreview?: boolean;\n  /** Focus model: the card has been entered and focus is on an inner control. */\n  entered?: boolean;\n  forceHover?: boolean;\n  resizable?: boolean;\n  priorityColor?: string;\n  onResizeDelta?: (dx: number, dy: number) => void;\n  children: ReactNode;\n}\n\n/* The shell forwards its ref and spreads DOM props (tabIndex, role, aria-*, the\n   keyboard/click handlers) so the focus-model and open-vs-select demos can\n   drive it — but it owns NO drag, selection, or content logic itself. */\nexport const StackedCard = React.forwardRef<HTMLDivElement, StackedCardProps>(\n  (\n    {\n      selected,\n      disabled,\n      pending,\n      isDragSource,\n      isDragPreview,\n      entered,\n      forceHover,\n      resizable,\n      priorityColor,\n      onResizeDelta,\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      <StyledCard\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        {...rest}\n      >\n        {children}\n        {resizable ? (\n          <StyledResizeHandle\n            className=\"sc-control\"\n            onPointerDown={handlePointerDown}\n            onPointerMove={handlePointerMove}\n            onPointerUp={handlePointerUp}\n          >\n            <ResizeHandleGlyph />\n          </StyledResizeHandle>\n        ) : null}\n      </StyledCard>\n    );\n  }\n);\n\nStackedCard.displayName = \"StackedCard\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/presentation/stackedCard/primitives.d.ts

@@ -1,84 +0,0 @@
-import { ReactElement, ReactNode } from "react";
-/**
- * StackedCard layout primitives (story-local, presentation-only).
- *
- * These are the documented foundation of the StackedCard subsystem — the
- * building blocks that every StackedCard concept story in this task set
- * imports from. They are NOT exported from the design-system barrel; they
- * live here so the concept stories share one source of truth instead of
- * re-declaring one-off styled blocks.
- *
- * Three primitives:
- *  - Stack     — the vertical column. A card is a Stack of StackRows.
- *  - StackRow  — the one layout primitive. Everything (cover, title, meta,
- *                footer) is a row; a `role` sets the default padding and the
- *                allowed direction so the anatomy stays predictable.
- *  - Cover     — sugar for a bleed row that holds media, reserves its height
- *                with `aspect-ratio` (so a late image never reflows), and
- *                carries two control slots (center + top-right).
- *
- * Colours here come exclusively from CSS variables — the dark scrim behind
- * cover controls is `--sc-scrim` / `--sc-scrim-strong` / `--sc-scrim-fg`, all
- * declared story-side as DS token candidates. No rgba/hex is hardcoded in a
- * primitive; only data colours (a swatch value, a label dot) are ever literal,
- * and those are passed in by the content, never baked in here.
- */
-export declare const Stack: import("styled-components").StyledComponent<"div", any, {}, never>;
-export type StackRowRole = "cover" | "title" | "meta" | "footer" | "custom";
-export type StackRowDirection = "row" | "column";
-/**
- * Role → default padding. The row is the increment: title/footer carry the
- * system padding, meta is a tighter properties line, cover bleeds to the edge.
- * `custom` starts from the system padding and expects the caller to adjust.
- */
-export declare const ROLE_PADDING: Record<StackRowRole, string>;
-export interface StackRowProps {
-    /** Named role → default padding + allowed direction. Defaults to `custom`. */
-    role?: StackRowRole;
-    /** Zero the padding, overriding the role (media rows, edge-to-edge bands). */
-    bleed?: boolean;
-    /** Footer bands lay their children out vertically. Defaults to `row`. */
-    direction?: StackRowDirection;
-    /** A row can carry its own background (the tinted link-footer band). */
-    background?: string;
-    className?: string;
-    children: ReactNode;
-}
-export declare const StackRow: ({ role, bleed, direction, background, className, children, }: StackRowProps) => ReactElement;
-export interface CoverProps {
-    /**
-     * CSS `aspect-ratio` value that reserves the cover's height, e.g.
-     * `"260 / 132"`. Kept as a ratio (not a pixel height) so the cover scales
-     * with the card and holds its space before media loads.
-     */
-    aspectRatio?: string;
-    /** Center slot — the media control (a play button over audio/video). */
-    centerSlot?: ReactNode;
-    /** Top-right slot — cover management (collapse, remove). */
-    topRightSlot?: ReactNode;
-    /**
-     * Collapsed cover: render the thin strip instead of the media box. The
-     * collapse *control* lives in the caller's `topRightSlot`; this flag is the
-     * resulting visual state. See the "Collapsed cover" story section.
-     */
-    collapsed?: boolean;
-    /**
-     * What the collapsed strip shows — an ~8px colour bar, or a favicon + domain
-     * row for links. Content-specific, so the caller supplies it.
-     */
-    collapsedStrip?: ReactNode;
-    /** Fired when the collapsed strip's expand affordance is activated. */
-    onExpand?: () => void;
-    /** Accessible label for the expand affordance. */
-    expandLabel?: string;
-    className?: string;
-    /** The fill: an `<img>`, an inline `<svg>`, or a solid-colour box. */
-    children: ReactNode;
-}
-export declare const Cover: ({ aspectRatio, centerSlot, topRightSlot, collapsed, collapsedStrip, onExpand, expandLabel, className, children, }: CoverProps) => ReactElement;
-export declare const PlayBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const CoverButton: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const CollapseGlyph: () => ReactElement;
-export declare const ExpandGlyph: () => ReactElement;
-export declare const RemoveCoverGlyph: () => ReactElement;
-//# sourceMappingURL=primitives.d.ts.map

package/dist/esm/presentation/stackedCard/primitives.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../../src/presentation/stackedCard/primitives.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAMH,eAAO,MAAM,KAAK,oEAIjB,CAAC;AAMF,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE5E,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAMrD,CAAC;AA0CF,MAAM,WAAW,aAAa;IAC5B,8EAA8E;IAC9E,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yEAAyE;IACzE,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,GAAI,8DAOtB,aAAa,KAAG,YAUlB,CAAC;AAuHF,MAAM,WAAW,UAAU;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,KAAK,GAAI,mHAUnB,UAAU,KAAG,YA6Bf,CAAC;AAOF,eAAO,MAAM,SAAS,qEAgBrB,CAAC;AAGF,eAAO,MAAM,WAAW,uEAsBvB,CAAC;AAGF,eAAO,MAAM,aAAa,QAAO,YAUhC,CAAC;AAGF,eAAO,MAAM,WAAW,QAAO,YAU9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,YAkBnC,CAAC"}