@activecollab/components 2.0.369 → 2.0.371

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

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

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

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

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

@@ -0,0 +1,37 @@
+/**
+ * StackedCard — shared constants and the class/token contract.
+ *
+ * Kept in their own module so `Styles.ts` can consume them without importing a
+ * component file (and creating a cycle).
+ */
+/** Reference width of a stacked card, from the concept. */
+export declare const STACKED_CARD_WIDTH = 260;
+/** Reference corner radius of a stacked card. */
+export declare const STACKED_CARD_RADIUS = 8;
+/**
+ * Default cover `aspect-ratio`. Covers reserve their height with a ratio (not a
+ * pixel height) so a late image never reflows the card, and so the skeleton
+ * that stands in for it occupies exactly the same box.
+ */
+export declare const STACKED_CARD_COVER_RATIO = "260 / 132";
+/**
+ * Controls (a cover button, an entity "…" menu, the resize handle) are hidden
+ * until the card is hovered OR holds focus. Put this class on anything that
+ * should follow that reveal rule.
+ */
+export declare const STACKED_CARD_CONTROL_CLASS = "sc-control";
+/**
+ * Marks a child of a `row`-direction `StackedCardRow` as fixed width: it keeps
+ * its own width while the remaining children share what is left.
+ */
+export declare const STACKED_CARD_FIXED_ATTR = "data-fixed";
+/**
+ * Named row roles. The row is the layout increment: `title`/`footer` carry the
+ * system padding, `meta` is a tighter properties line, `cover` bleeds to the
+ * edge, and `custom` starts from the system padding for the caller to adjust.
+ */
+export type StackedCardRowRole = "cover" | "title" | "meta" | "footer" | "custom";
+export type StackedCardRowDirection = "row" | "column";
+/** Role → default padding. */
+export declare const STACKED_CARD_ROLE_PADDING: Record<StackedCardRowRole, string>;
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/StackedCard/constants.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,2DAA2D;AAC3D,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,iDAAiD;AACjD,eAAO,MAAM,mBAAmB,IAAI,CAAC;AAErC;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,cAAc,CAAC;AAEpD;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,eAAe,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,uBAAuB,eAAe,CAAC;AAEpD;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAC1B,OAAO,GACP,OAAO,GACP,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb,MAAM,MAAM,uBAAuB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEvD,8BAA8B;AAC9B,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAMxE,CAAC"}

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

@@ -0,0 +1,48 @@
+/**
+ * StackedCard — shared constants and the class/token contract.
+ *
+ * Kept in their own module so `Styles.ts` can consume them without importing a
+ * component file (and creating a cycle).
+ */
+
+/** Reference width of a stacked card, from the concept. */
+export const STACKED_CARD_WIDTH = 260;
+
+/** Reference corner radius of a stacked card. */
+export const STACKED_CARD_RADIUS = 8;
+
+/**
+ * Default cover `aspect-ratio`. Covers reserve their height with a ratio (not a
+ * pixel height) so a late image never reflows the card, and so the skeleton
+ * that stands in for it occupies exactly the same box.
+ */
+export const STACKED_CARD_COVER_RATIO = "260 / 132";
+
+/**
+ * Controls (a cover button, an entity "…" menu, the resize handle) are hidden
+ * until the card is hovered OR holds focus. Put this class on anything that
+ * should follow that reveal rule.
+ */
+export const STACKED_CARD_CONTROL_CLASS = "sc-control";
+
+/**
+ * Marks a child of a `row`-direction `StackedCardRow` as fixed width: it keeps
+ * its own width while the remaining children share what is left.
+ */
+export const STACKED_CARD_FIXED_ATTR = "data-fixed";
+
+/**
+ * Named row roles. The row is the layout increment: `title`/`footer` carry the
+ * system padding, `meta` is a tighter properties line, `cover` bleeds to the
+ * edge, and `custom` starts from the system padding for the caller to adjust.
+ */
+
+/** Role → default padding. */
+export const STACKED_CARD_ROLE_PADDING = {
+  cover: "0",
+  title: "8px 12px",
+  meta: "2px 12px 4px",
+  footer: "8px 12px",
+  custom: "8px 12px"
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":["STACKED_CARD_WIDTH","STACKED_CARD_RADIUS","STACKED_CARD_COVER_RATIO","STACKED_CARD_CONTROL_CLASS","STACKED_CARD_FIXED_ATTR","STACKED_CARD_ROLE_PADDING","cover","title","meta","footer","custom"],"sources":["../../../../src/components/StackedCard/constants.ts"],"sourcesContent":["/**\n * StackedCard — shared constants and the class/token contract.\n *\n * Kept in their own module so `Styles.ts` can consume them without importing a\n * component file (and creating a cycle).\n */\n\n/** Reference width of a stacked card, from the concept. */\nexport const STACKED_CARD_WIDTH = 260;\n\n/** Reference corner radius of a stacked card. */\nexport const STACKED_CARD_RADIUS = 8;\n\n/**\n * Default cover `aspect-ratio`. Covers reserve their height with a ratio (not a\n * pixel height) so a late image never reflows the card, and so the skeleton\n * that stands in for it occupies exactly the same box.\n */\nexport const STACKED_CARD_COVER_RATIO = \"260 / 132\";\n\n/**\n * Controls (a cover button, an entity \"…\" menu, the resize handle) are hidden\n * until the card is hovered OR holds focus. Put this class on anything that\n * should follow that reveal rule.\n */\nexport const STACKED_CARD_CONTROL_CLASS = \"sc-control\";\n\n/**\n * Marks a child of a `row`-direction `StackedCardRow` as fixed width: it keeps\n * its own width while the remaining children share what is left.\n */\nexport const STACKED_CARD_FIXED_ATTR = \"data-fixed\";\n\n/**\n * Named row roles. The row is the layout increment: `title`/`footer` carry the\n * system padding, `meta` is a tighter properties line, `cover` bleeds to the\n * edge, and `custom` starts from the system padding for the caller to adjust.\n */\nexport type StackedCardRowRole =\n  | \"cover\"\n  | \"title\"\n  | \"meta\"\n  | \"footer\"\n  | \"custom\";\n\nexport type StackedCardRowDirection = \"row\" | \"column\";\n\n/** Role → default padding. */\nexport const STACKED_CARD_ROLE_PADDING: Record<StackedCardRowRole, string> = {\n  cover: \"0\",\n  title: \"8px 12px\",\n  meta: \"2px 12px 4px\",\n  footer: \"8px 12px\",\n  custom: \"8px 12px\",\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,OAAO,MAAMA,kBAAkB,GAAG,GAAG;;AAErC;AACA,OAAO,MAAMC,mBAAmB,GAAG,CAAC;;AAEpC;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAG,WAAW;;AAEnD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,0BAA0B,GAAG,YAAY;;AAEtD;AACA;AACA;AACA;AACA,OAAO,MAAMC,uBAAuB,GAAG,YAAY;;AAEnD;AACA;AACA;AACA;AACA;;AAUA;AACA,OAAO,MAAMC,yBAA6D,GAAG;EAC3EC,KAAK,EAAE,GAAG;EACVC,KAAK,EAAE,UAAU;EACjBC,IAAI,EAAE,cAAc;EACpBC,MAAM,EAAE,UAAU;EAClBC,MAAM,EAAE;AACV,CAAC","ignoreList":[]}

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

@@ -0,0 +1,5 @@
+export * from "./StackedCard";
+export * from "./Primitives";
+export * from "./Glyphs";
+export * from "./constants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/StackedCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC"}

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

@@ -0,0 +1,5 @@
+export * from "./StackedCard";
+export * from "./Primitives";
+export * from "./Glyphs";
+export * from "./constants";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/StackedCard/index.ts"],"sourcesContent":["export * from \"./StackedCard\";\nexport * from \"./Primitives\";\nexport * from \"./Glyphs\";\nexport * from \"./constants\";\n"],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,aAAa","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { BoxSizingStyle } from "../BoxSizingStyle";
 import { Trigger } from "../Trigger";
-const StepSequenceStyle = css(["", " display:inline-flex;align-items:center;padding:6px 8px;.c-step-sequence__step{width:22px;height:22px;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.c-step-sequence__step--done{background:var(--color-sucess-green);}.c-step-sequence__step--progress{background:var(--color-primary);}.c-step-sequence__step--failed{background:var(--red-alert);}.c-step-sequence__step--todo{background:transparent;border:2px solid var(--color-theme-400);}.c-step-sequence__dot{border-radius:50%;}.c-step-sequence__dot--progress{width:7px;height:7px;background:#fff;}.c-step-sequence__dot--todo{width:6px;height:6px;background:var(--color-theme-500);}.c-step-sequence__connector{width:13px;height:2px;flex-shrink:0;background:var(--color-theme-400);}.c-step-sequence__connector--on{background:var(--color-sucess-green);}"], BoxSizingStyle);
+const StepSequenceStyle = css(["", " display:inline-flex;align-items:center;padding:6px 8px;.c-step-sequence__step{width:22px;height:22px;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.c-step-sequence__step--done{background:var(--color-sucess-green);}.c-step-sequence__step--progress{background:var(--color-progress-blue);}.c-step-sequence__step--failed{background:var(--red-alert);}.c-step-sequence__step--todo{background:transparent;border:2px solid var(--color-theme-400);}.c-step-sequence__dot{border-radius:50%;}.c-step-sequence__dot--progress{width:7px;height:7px;background:#fff;}.c-step-sequence__dot--todo{width:6px;height:6px;background:var(--color-theme-500);}.c-step-sequence__connector{width:13px;height:2px;flex-shrink:0;background:var(--color-theme-400);}.c-step-sequence__connector--on{background:var(--color-sucess-green);}"], BoxSizingStyle);
 export const StyledStepSequenceTrigger = styled(Trigger).withConfig({
   displayName: "Styles__StyledStepSequenceTrigger",
   componentId: "sc-hp7ywn-0"

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","Trigger","StepSequenceStyle","StyledStepSequenceTrigger","withConfig","displayName","componentId","StyledStepSequence","div"],"sources":["../../../../src/components/StepSequence/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Trigger } from \"../Trigger\";\n\nconst StepSequenceStyle = css`\n  ${BoxSizingStyle}\n\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 8px;\n\n  .c-step-sequence__step {\n    width: 22px;\n    height: 22px;\n    border-radius: 50%;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .c-step-sequence__step--done {\n    background: var(--color-sucess-green);\n  }\n  .c-step-sequence__step--progress {\n    background: var(--color-primary);\n  }\n  .c-step-sequence__step--failed {\n    background: var(--red-alert);\n  }\n  .c-step-sequence__step--todo {\n    background: transparent;\n    border: 2px solid var(--color-theme-400);\n  }\n\n  .c-step-sequence__dot {\n    border-radius: 50%;\n  }\n  .c-step-sequence__dot--progress {\n    width: 7px;\n    height: 7px;\n    background: #fff;\n  }\n  .c-step-sequence__dot--todo {\n    width: 6px;\n    height: 6px;\n    background: var(--color-theme-500);\n  }\n\n  .c-step-sequence__connector {\n    width: 13px;\n    height: 2px;\n    flex-shrink: 0;\n    background: var(--color-theme-400);\n  }\n  .c-step-sequence__connector--on {\n    background: var(--color-sucess-green);\n  }\n`;\n\nexport const StyledStepSequenceTrigger = styled(Trigger)`\n  ${StepSequenceStyle}\n\n  border-radius: 8px;\n  transition: background-color 200ms ease;\n\n  &:hover {\n    background-color: var(--color-theme-200);\n  }\n  &:focus-visible {\n    outline: 2px solid var(--color-primary);\n    outline-offset: 1px;\n  }\n`;\nStyledStepSequenceTrigger.displayName = \"StyledStepSequenceTrigger\";\n\nexport const StyledStepSequence = styled.div`\n  ${StepSequenceStyle}\n`;\nStyledStepSequence.displayName = \"StyledStepSequence\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,OAAO,QAAQ,YAAY;AAEpC,MAAMC,iBAAiB,GAAGH,GAAG,y2BACzBC,cAAc,CAsDjB;AAED,OAAO,MAAMG,yBAAyB,GAAGL,MAAM,CAACG,OAAO,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mMACpDJ,iBAAiB,CAYpB;AACDC,yBAAyB,CAACE,WAAW,GAAG,2BAA2B;AAEnE,OAAO,MAAME,kBAAkB,GAAGT,MAAM,CAACU,GAAG,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACxCJ,iBAAiB,CACpB;AACDK,kBAAkB,CAACF,WAAW,GAAG,oBAAoB","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","Trigger","StepSequenceStyle","StyledStepSequenceTrigger","withConfig","displayName","componentId","StyledStepSequence","div"],"sources":["../../../../src/components/StepSequence/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Trigger } from \"../Trigger\";\n\nconst StepSequenceStyle = css`\n  ${BoxSizingStyle}\n\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 8px;\n\n  .c-step-sequence__step {\n    width: 22px;\n    height: 22px;\n    border-radius: 50%;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .c-step-sequence__step--done {\n    background: var(--color-sucess-green);\n  }\n  .c-step-sequence__step--progress {\n    background: var(--color-progress-blue);\n  }\n  .c-step-sequence__step--failed {\n    background: var(--red-alert);\n  }\n  .c-step-sequence__step--todo {\n    background: transparent;\n    border: 2px solid var(--color-theme-400);\n  }\n\n  .c-step-sequence__dot {\n    border-radius: 50%;\n  }\n  .c-step-sequence__dot--progress {\n    width: 7px;\n    height: 7px;\n    background: #fff;\n  }\n  .c-step-sequence__dot--todo {\n    width: 6px;\n    height: 6px;\n    background: var(--color-theme-500);\n  }\n\n  .c-step-sequence__connector {\n    width: 13px;\n    height: 2px;\n    flex-shrink: 0;\n    background: var(--color-theme-400);\n  }\n  .c-step-sequence__connector--on {\n    background: var(--color-sucess-green);\n  }\n`;\n\nexport const StyledStepSequenceTrigger = styled(Trigger)`\n  ${StepSequenceStyle}\n\n  border-radius: 8px;\n  transition: background-color 200ms ease;\n\n  &:hover {\n    background-color: var(--color-theme-200);\n  }\n  &:focus-visible {\n    outline: 2px solid var(--color-primary);\n    outline-offset: 1px;\n  }\n`;\nStyledStepSequenceTrigger.displayName = \"StyledStepSequenceTrigger\";\n\nexport const StyledStepSequence = styled.div`\n  ${StepSequenceStyle}\n`;\nStyledStepSequence.displayName = \"StyledStepSequence\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,OAAO,QAAQ,YAAY;AAEpC,MAAMC,iBAAiB,GAAGH,GAAG,+2BACzBC,cAAc,CAsDjB;AAED,OAAO,MAAMG,yBAAyB,GAAGL,MAAM,CAACG,OAAO,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mMACpDJ,iBAAiB,CAYpB;AACDC,yBAAyB,CAACE,WAAW,GAAG,2BAA2B;AAEnE,OAAO,MAAME,kBAAkB,GAAGT,MAAM,CAACU,GAAG,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACxCJ,iBAAiB,CACpB;AACDK,kBAAkB,CAACF,WAAW,GAAG,oBAAoB","ignoreList":[]}

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

@@ -83,4 +83,5 @@ export * from "./Toolbar";
 export * from "./InfoBox";
 export * from "./Sort";
 export * from "./StepSequence";
+export * from "./StackedCard";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}

package/dist/esm/components/index.js

@@ -83,4 +83,5 @@ export * from "./Toolbar";
 export * from "./InfoBox";
 export * from "./Sort";
 export * from "./StepSequence";
+export * from "./StackedCard";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from \"./Button\";\nexport * from \"./ButtonGroup\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./CounterButton\";\nexport * from \"./Steppers\";\nexport * from \"./Tables\";\nexport * from \"./CompleteCheckbox\";\nexport * from \"./Paper\";\nexport * from \"./ScaleBar\";\nexport * from \"./Card\";\nexport * from \"./EntityCard\";\nexport * from \"./EntitiesHeader\";\nexport * from \"./Signifier\";\nexport * from \"./Avatar\";\nexport * from \"./Tag\";\nexport * from \"./Loaders\";\nexport * from \"./Nav\";\nexport * from \"./Bubble\";\nexport * from \"./Input\";\nexport * from \"./Display\";\nexport * from \"./Menu\";\nexport * from \"./Expanders\";\nexport * from \"./DatePicker\";\nexport * from \"./List\";\nexport * from \"./MenuSelector\";\nexport * from \"./MultiAvatar\";\nexport * from \"./RadioButton\";\nexport * from \"./ScrollShadow\";\nexport * from \"./Icons\";\nexport * from \"./Textarea\";\nexport * from \"./Modal\";\nexport * from \"./Sheet\";\nexport * from \"./Header\";\nexport * from \"./AutoResizeTextarea\";\nexport * from \"./Overlay\";\nexport * from \"./Accordion\";\nexport * from \"./Choose\";\nexport * from \"./ChooseV2\";\nexport * from \"./Links\";\nexport * from \"./SelectDate\";\nexport * from \"./Popper\";\nexport * from \"./ToastMessage\";\nexport * from \"./Tooltip\";\nexport * from \"./Transitions\";\nexport * from \"./Window\";\nexport * from \"./ValueButton\";\nexport * from \"./Select\";\nexport * from \"./SelectTrigger\";\nexport * from \"./SelectTime\";\nexport * from \"./Dialog\";\nexport * from \"./ConfirmDialog\";\nexport * from \"./Checkbox\";\nexport * from \"./Toggle\";\nexport * from \"./Typography\";\nexport * from \"./Autocomplete\";\nexport * from \"./ComboBox\";\nexport * from \"./Button/AddToListButton\";\nexport * from \"./ProgressBar\";\nexport * from \"./ProgressPie\";\nexport * from \"./Reactions\";\nexport * from \"./Label\";\nexport * from \"./GlobalStyle\";\nexport * from \"./ProgressRing\";\nexport * from \"./EditableContent\";\nexport * from \"./EditableText\";\nexport * from \"./EditableHours\";\nexport * from \"./EditableCurrency\";\nexport * from \"./Folder\";\nexport * from \"./Chip\";\nexport * from \"./Trigger\";\nexport * from \"./Dot\";\nexport * from \"./Entity\";\nexport * from \"./Filter\";\nexport * from \"./Wizard\";\nexport * from \"./ContentWizard\";\nexport * from \"./IconButton\";\nexport * from \"./Typography\";\nexport * from \"./Badge\";\nexport * from \"./AvatarGroup\";\nexport * from \"./CommandPalette\";\nexport * from \"./EmptySlate\";\nexport * from \"./Toolbar\";\nexport * from \"./InfoBox\";\nexport * from \"./Sort\";\nexport * from \"./StepSequence\";\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,iBAAiB;AAC/B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,oBAAoB;AAClC,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,OAAO;AACrB,cAAc,WAAW;AACzB,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,aAAa;AAC3B,cAAc,cAAc;AAC5B,cAAc,QAAQ;AACtB,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,sBAAsB;AACpC,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,SAAS;AACvB,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,iBAAiB;AAC/B,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,iBAAiB;AAC/B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,gBAAgB;AAC9B,cAAc,YAAY;AAC1B,cAAc,0BAA0B;AACxC,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,aAAa;AAC3B,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB;AAC/B,cAAc,oBAAoB;AAClC,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,WAAW;AACzB,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,iBAAiB;AAC/B,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,gBAAgB","ignoreList":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from \"./Button\";\nexport * from \"./ButtonGroup\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./CounterButton\";\nexport * from \"./Steppers\";\nexport * from \"./Tables\";\nexport * from \"./CompleteCheckbox\";\nexport * from \"./Paper\";\nexport * from \"./ScaleBar\";\nexport * from \"./Card\";\nexport * from \"./EntityCard\";\nexport * from \"./EntitiesHeader\";\nexport * from \"./Signifier\";\nexport * from \"./Avatar\";\nexport * from \"./Tag\";\nexport * from \"./Loaders\";\nexport * from \"./Nav\";\nexport * from \"./Bubble\";\nexport * from \"./Input\";\nexport * from \"./Display\";\nexport * from \"./Menu\";\nexport * from \"./Expanders\";\nexport * from \"./DatePicker\";\nexport * from \"./List\";\nexport * from \"./MenuSelector\";\nexport * from \"./MultiAvatar\";\nexport * from \"./RadioButton\";\nexport * from \"./ScrollShadow\";\nexport * from \"./Icons\";\nexport * from \"./Textarea\";\nexport * from \"./Modal\";\nexport * from \"./Sheet\";\nexport * from \"./Header\";\nexport * from \"./AutoResizeTextarea\";\nexport * from \"./Overlay\";\nexport * from \"./Accordion\";\nexport * from \"./Choose\";\nexport * from \"./ChooseV2\";\nexport * from \"./Links\";\nexport * from \"./SelectDate\";\nexport * from \"./Popper\";\nexport * from \"./ToastMessage\";\nexport * from \"./Tooltip\";\nexport * from \"./Transitions\";\nexport * from \"./Window\";\nexport * from \"./ValueButton\";\nexport * from \"./Select\";\nexport * from \"./SelectTrigger\";\nexport * from \"./SelectTime\";\nexport * from \"./Dialog\";\nexport * from \"./ConfirmDialog\";\nexport * from \"./Checkbox\";\nexport * from \"./Toggle\";\nexport * from \"./Typography\";\nexport * from \"./Autocomplete\";\nexport * from \"./ComboBox\";\nexport * from \"./Button/AddToListButton\";\nexport * from \"./ProgressBar\";\nexport * from \"./ProgressPie\";\nexport * from \"./Reactions\";\nexport * from \"./Label\";\nexport * from \"./GlobalStyle\";\nexport * from \"./ProgressRing\";\nexport * from \"./EditableContent\";\nexport * from \"./EditableText\";\nexport * from \"./EditableHours\";\nexport * from \"./EditableCurrency\";\nexport * from \"./Folder\";\nexport * from \"./Chip\";\nexport * from \"./Trigger\";\nexport * from \"./Dot\";\nexport * from \"./Entity\";\nexport * from \"./Filter\";\nexport * from \"./Wizard\";\nexport * from \"./ContentWizard\";\nexport * from \"./IconButton\";\nexport * from \"./Typography\";\nexport * from \"./Badge\";\nexport * from \"./AvatarGroup\";\nexport * from \"./CommandPalette\";\nexport * from \"./EmptySlate\";\nexport * from \"./Toolbar\";\nexport * from \"./InfoBox\";\nexport * from \"./Sort\";\nexport * from \"./StepSequence\";\nexport * from \"./StackedCard\";\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,iBAAiB;AAC/B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,oBAAoB;AAClC,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,OAAO;AACrB,cAAc,WAAW;AACzB,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,aAAa;AAC3B,cAAc,cAAc;AAC5B,cAAc,QAAQ;AACtB,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,sBAAsB;AACpC,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,SAAS;AACvB,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,iBAAiB;AAC/B,cAAc,cAAc;AAC5B,cAAc,UAAU;AACxB,cAAc,iBAAiB;AAC/B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,gBAAgB;AAC9B,cAAc,YAAY;AAC1B,cAAc,0BAA0B;AACxC,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,aAAa;AAC3B,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB;AAC/B,cAAc,oBAAoB;AAClC,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,WAAW;AACzB,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,iBAAiB;AAC/B,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,gBAAgB;AAC9B,cAAc,eAAe","ignoreList":[]}

package/dist/esm/presentation/stackedCard/content/ImageCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCard.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/stackedCard/content/ImageCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAQ5C;;;;;GAKG;AAEH,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,SAAS,GAAI,iBAGvB,cAAc,KAAG,YAOnB,CAAC;AAKF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,KACnD,YAQF,CAAC;AAEF,eAAO,MAAM,aAAa,QAAO,YAIhC,CAAC"}
+{"version":3,"file":"ImageCard.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/stackedCard/content/ImageCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAY5C;;;;;GAKG;AAEH,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,SAAS,GAAI,iBAGvB,cAAc,KAAG,YAOnB,CAAC;AAKF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,KACnD,YAQF,CAAC;AAEF,eAAO,MAAM,aAAa,QAAO,YAIhC,CAAC"}

package/dist/esm/presentation/stackedCard/content/ImageCard.js

@@ -1,10 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
-import { StyledColorCover, coverManagement, Placeholder } from "./shared";
+import { COVER_RATIO_IMAGE, StyledColorCover, coverManagement, Placeholder } from "./shared";
 import { UploadIcon } from "../../../components/Icons";
 import { SkeletonLoader } from "../../../components/Loaders";
-import { Cover } from "../primitives";
-import { COVER_RATIO_IMAGE } from "../shell";
+import { StackedCardCover as Cover } from "../../../components/StackedCard";
 
 /**
  * ImageCard — a full-bleed image and little else. Cover-management controls

package/dist/esm/presentation/stackedCard/content/ImageCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCard.js","names":["React","StyledColorCover","coverManagement","Placeholder","UploadIcon","SkeletonLoader","Cover","COVER_RATIO_IMAGE","ImageCard","_ref","_ref$color","color","src","createElement","aspectRatio","topRightSlot","removeLabel","alt","$color","ImagePlaceholder","props","_extends","icon","label","height","dashed","ImageSkeleton","style","width"],"sources":["../../../../../src/presentation/stackedCard/content/ImageCard.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nimport { StyledColorCover, coverManagement, Placeholder } from \"./shared\";\nimport { UploadIcon } from \"../../../components/Icons\";\nimport { SkeletonLoader } from \"../../../components/Loaders\";\nimport { Cover } from \"../primitives\";\nimport { COVER_RATIO_IMAGE } from \"../shell\";\n\n/**\n * ImageCard — a full-bleed image and little else. Cover-management controls\n * (collapse, remove) appear on hover; there is no other chrome. Fixed-box in\n * production (host sets width AND height, the cover scales aspect-locked); shown\n * here in the auto-height shell with a reserved image aspect ratio.\n */\n\nexport interface ImageCardProps {\n  color?: string;\n  src?: string;\n}\n\nexport const ImageCard = ({\n  color = \"#F0997B\",\n  src,\n}: ImageCardProps): ReactElement => (\n  <Cover\n    aspectRatio={COVER_RATIO_IMAGE}\n    topRightSlot={coverManagement({ removeLabel: \"Remove image\" })}\n  >\n    {src ? <img src={src} alt=\"\" /> : <StyledColorCover $color={color} />}\n  </Cover>\n);\n\n/* ---- placeholder + skeleton ---- */\n\n/* The placeholder doubles as the drop target (visual only here). */\nexport const ImagePlaceholder = (\n  props: React.ButtonHTMLAttributes<HTMLButtonElement>\n): ReactElement => (\n  <Placeholder\n    icon={<UploadIcon />}\n    label=\"Drop an image or click to upload\"\n    height={168}\n    dashed\n    {...props}\n  />\n);\n\nexport const ImageSkeleton = (): ReactElement => (\n  <Cover aspectRatio={COVER_RATIO_IMAGE}>\n    <SkeletonLoader style={{ width: \"100%\", height: \"100%\" }} />\n  </Cover>\n);\n"],"mappings":";AAAA,OAAOA,KAAK,MAAwB,OAAO;AAE3C,SAASC,gBAAgB,EAAEC,eAAe,EAAEC,WAAW,QAAQ,UAAU;AACzE,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,KAAK,QAAQ,eAAe;AACrC,SAASC,iBAAiB,QAAQ,UAAU;;AAE5C;AACA;AACA;AACA;AACA;AACA;;AAOA,OAAO,MAAMC,SAAS,GAAGC,IAAA;EAAA,IAAAC,UAAA,GAAAD,IAAA,CACvBE,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,SAAS,GAAAA,UAAA;IACjBE,GAAG,GAAAH,IAAA,CAAHG,GAAG;EAAA,oBAEHZ,KAAA,CAAAa,aAAA,CAACP,KAAK;IACJQ,WAAW,EAAEP,iBAAkB;IAC/BQ,YAAY,EAAEb,eAAe,CAAC;MAAEc,WAAW,EAAE;IAAe,CAAC;EAAE,GAE9DJ,GAAG,gBAAGZ,KAAA,CAAAa,aAAA;IAAKD,GAAG,EAAEA,GAAI;IAACK,GAAG,EAAC;EAAE,CAAE,CAAC,gBAAGjB,KAAA,CAAAa,aAAA,CAACZ,gBAAgB;IAACiB,MAAM,EAAEP;EAAM,CAAE,CAC/D,CAAC;AAAA,CACT;;AAED;;AAEA;AACA,OAAO,MAAMQ,gBAAgB,GAC3BC,KAAoD,iBAEpDpB,KAAA,CAAAa,aAAA,CAACV,WAAW,EAAAkB,QAAA;EACVC,IAAI,eAAEtB,KAAA,CAAAa,aAAA,CAACT,UAAU,MAAE,CAAE;EACrBmB,KAAK,EAAC,kCAAkC;EACxCC,MAAM,EAAE,GAAI;EACZC,MAAM;AAAA,GACFL,KAAK,CACV,CACF;AAED,OAAO,MAAMM,aAAa,GAAGA,CAAA,kBAC3B1B,KAAA,CAAAa,aAAA,CAACP,KAAK;EAACQ,WAAW,EAAEP;AAAkB,gBACpCP,KAAA,CAAAa,aAAA,CAACR,cAAc;EAACsB,KAAK,EAAE;IAAEC,KAAK,EAAE,MAAM;IAAEJ,MAAM,EAAE;EAAO;AAAE,CAAE,CACtD,CACR","ignoreList":[]}
+{"version":3,"file":"ImageCard.js","names":["React","COVER_RATIO_IMAGE","StyledColorCover","coverManagement","Placeholder","UploadIcon","SkeletonLoader","StackedCardCover","Cover","ImageCard","_ref","_ref$color","color","src","createElement","aspectRatio","topRightSlot","removeLabel","alt","$color","ImagePlaceholder","props","_extends","icon","label","height","dashed","ImageSkeleton","style","width"],"sources":["../../../../../src/presentation/stackedCard/content/ImageCard.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nimport {\n  COVER_RATIO_IMAGE,\n  StyledColorCover,\n  coverManagement,\n  Placeholder,\n} from \"./shared\";\nimport { UploadIcon } from \"../../../components/Icons\";\nimport { SkeletonLoader } from \"../../../components/Loaders\";\nimport { StackedCardCover as Cover } from \"../../../components/StackedCard\";\n\n/**\n * ImageCard — a full-bleed image and little else. Cover-management controls\n * (collapse, remove) appear on hover; there is no other chrome. Fixed-box in\n * production (host sets width AND height, the cover scales aspect-locked); shown\n * here in the auto-height shell with a reserved image aspect ratio.\n */\n\nexport interface ImageCardProps {\n  color?: string;\n  src?: string;\n}\n\nexport const ImageCard = ({\n  color = \"#F0997B\",\n  src,\n}: ImageCardProps): ReactElement => (\n  <Cover\n    aspectRatio={COVER_RATIO_IMAGE}\n    topRightSlot={coverManagement({ removeLabel: \"Remove image\" })}\n  >\n    {src ? <img src={src} alt=\"\" /> : <StyledColorCover $color={color} />}\n  </Cover>\n);\n\n/* ---- placeholder + skeleton ---- */\n\n/* The placeholder doubles as the drop target (visual only here). */\nexport const ImagePlaceholder = (\n  props: React.ButtonHTMLAttributes<HTMLButtonElement>\n): ReactElement => (\n  <Placeholder\n    icon={<UploadIcon />}\n    label=\"Drop an image or click to upload\"\n    height={168}\n    dashed\n    {...props}\n  />\n);\n\nexport const ImageSkeleton = (): ReactElement => (\n  <Cover aspectRatio={COVER_RATIO_IMAGE}>\n    <SkeletonLoader style={{ width: \"100%\", height: \"100%\" }} />\n  </Cover>\n);\n"],"mappings":";AAAA,OAAOA,KAAK,MAAwB,OAAO;AAE3C,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,eAAe,EACfC,WAAW,QACN,UAAU;AACjB,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,gBAAgB,IAAIC,KAAK,QAAQ,iCAAiC;;AAE3E;AACA;AACA;AACA;AACA;AACA;;AAOA,OAAO,MAAMC,SAAS,GAAGC,IAAA;EAAA,IAAAC,UAAA,GAAAD,IAAA,CACvBE,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,SAAS,GAAAA,UAAA;IACjBE,GAAG,GAAAH,IAAA,CAAHG,GAAG;EAAA,oBAEHb,KAAA,CAAAc,aAAA,CAACN,KAAK;IACJO,WAAW,EAAEd,iBAAkB;IAC/Be,YAAY,EAAEb,eAAe,CAAC;MAAEc,WAAW,EAAE;IAAe,CAAC;EAAE,GAE9DJ,GAAG,gBAAGb,KAAA,CAAAc,aAAA;IAAKD,GAAG,EAAEA,GAAI;IAACK,GAAG,EAAC;EAAE,CAAE,CAAC,gBAAGlB,KAAA,CAAAc,aAAA,CAACZ,gBAAgB;IAACiB,MAAM,EAAEP;EAAM,CAAE,CAC/D,CAAC;AAAA,CACT;;AAED;;AAEA;AACA,OAAO,MAAMQ,gBAAgB,GAC3BC,KAAoD,iBAEpDrB,KAAA,CAAAc,aAAA,CAACV,WAAW,EAAAkB,QAAA;EACVC,IAAI,eAAEvB,KAAA,CAAAc,aAAA,CAACT,UAAU,MAAE,CAAE;EACrBmB,KAAK,EAAC,kCAAkC;EACxCC,MAAM,EAAE,GAAI;EACZC,MAAM;AAAA,GACFL,KAAK,CACV,CACF;AAED,OAAO,MAAMM,aAAa,GAAGA,CAAA,kBAC3B3B,KAAA,CAAAc,aAAA,CAACN,KAAK;EAACO,WAAW,EAAEd;AAAkB,gBACpCD,KAAA,CAAAc,aAAA,CAACR,cAAc;EAACsB,KAAK,EAAE;IAAEC,KAAK,EAAE,MAAM;IAAEJ,MAAM,EAAE;EAAO;AAAE,CAAE,CACtD,CACR","ignoreList":[]}

package/dist/esm/presentation/stackedCard/content/LinkCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkCard.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/stackedCard/content/LinkCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAa5C,OAAO,EAAE,gBAAgB,EAAmB,MAAM,UAAU,CAAC;AAY7D;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;AA+JjD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,gBAAgB,CAAC;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,QAAQ,GAAI,uCAItB,aAAa,KAAG,YAiKlB,CAAC;AAyBF,eAAO,MAAM,YAAY,QAAO,YA0B/B,CAAC;AAIF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,KACnD,YAEF,CAAC"}
+{"version":3,"file":"LinkCard.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/stackedCard/content/LinkCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAc5C,OAAO,EAAE,gBAAgB,EAAmB,MAAM,UAAU,CAAC;AAgB7D;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;AA+JjD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,gBAAgB,CAAC;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,QAAQ,GAAI,uCAItB,aAAa,KAAG,YAiKlB,CAAC;AAyBF,eAAO,MAAM,YAAY,QAAO,YA0B/B,CAAC;AAIF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,KACnD,YAEF,CAAC"}

package/dist/esm/presentation/stackedCard/content/LinkCard.js

@@ -1,14 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
 import styled from "styled-components";
-import { StyledChip, StyledClamp, StyledColorCover, StyledFavicon, coverManagement, playControl, Placeholder } from "./shared";
+import { COVER_RATIO_HERO, StyledChip, StyledClamp, StyledColorCover, StyledFavicon, coverManagement, playControl, Placeholder } from "./shared";
 import { formatFetchedAt } from "./unfurl";
 import { ArrowRefreshIcon, InsertLinkIcon, WarningTriangleIcon } from "../../../components/Icons";
 import { SkeletonLoader } from "../../../components/Loaders";
+import { STACKED_CARD_COVER_RATIO as COVER_RATIO, STACKED_CARD_CONTROL_CLASS, StackedCardCover as Cover, StackedCardRow as StackRow } from "../../../components/StackedCard";
 import { Body2, Caption1 } from "../../../components/Typography";
 import { Typography } from "../../../components/Typography/Typography";
-import { Cover, StackRow } from "../primitives";
-import { COVER_RATIO, COVER_RATIO_HERO } from "../shell";
 
 /**
  * LinkCard — a link preview as a LIFECYCLE, not two static layouts.
@@ -50,11 +49,14 @@ const StyledReunfurl = styled.button.withConfig({
   componentId: "sc-qyea73-3"
 })(["display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;padding:3px 8px;border:1px solid var(--border-primary);border-radius:6px;background:var(--page-paper-main);color:var(--color-theme-800);font-size:11px;cursor:pointer;svg{width:12px;height:12px;}&:hover{background:var(--color-theme-200);border-color:var(--sc-selection-ring);}"]);
 
-/* The error body — favicon + raw URL + retry, no media (per spec §5). */
-const StyledErrorBody = styled.div.withConfig({
-  displayName: "LinkCard__StyledErrorBody",
+/* The error body — favicon + raw URL + retry, no media (per spec §5). It is a
+   column row like any other: the padding comes from the role, so the error
+   state lines up with the states it replaces instead of setting its own inset.
+   Only the gap is widened — three stacked blocks, not four text lines. */
+const StyledErrorRow = styled(StackRow).withConfig({
+  displayName: "LinkCard__StyledErrorRow",
   componentId: "sc-qyea73-4"
-})(["display:flex;flex-direction:column;gap:10px;padding:12px;.err-head{display:flex;align-items:center;gap:8px;color:var(--red-alert);}.err-head svg{width:16px;height:16px;flex:0 0 auto;}.err-url{display:flex;align-items:center;gap:8px;word-break:break-all;}"]);
+})(["gap:10px;.err-head{display:flex;align-items:center;gap:8px;color:var(--red-alert);}.err-head svg{width:16px;height:16px;flex:0 0 auto;}.err-url{display:flex;align-items:center;gap:8px;word-break:break-all;}"]);
 const StyledRetry = styled.button.withConfig({
   displayName: "LinkCard__StyledRetry",
   componentId: "sc-qyea73-5"
@@ -80,7 +82,7 @@ const DisplayToggle = _ref => {
   return /*#__PURE__*/React.createElement(StyledDisplayToggle, {
     type: "button",
     "data-fixed": true,
-    className: "sc-control",
+    className: STACKED_CARD_CONTROL_CLASS,
     "aria-label": "Switch display level",
     onClick: onToggle
   }, display === "compact" ? "Expand ▾" : "Compact ▴");
@@ -105,7 +107,10 @@ export const LinkCard = _ref2 => {
 
   // ── Error: favicon + raw URL + retry, no media ──────────────────
   if (status === "error") {
-    return /*#__PURE__*/React.createElement(StyledErrorBody, null, /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(StyledErrorRow, {
+      role: "custom",
+      direction: "column"
+    }, /*#__PURE__*/React.createElement("div", {
       className: "err-head"
     }, /*#__PURE__*/React.createElement(WarningTriangleIcon, null), /*#__PURE__*/React.createElement(Caption1, {
       weight: "bold",