@activecollab/components 2.0.362 → 2.0.364

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

@@ -0,0 +1,336 @@
+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 { formatFetchedAt } from "./unfurl";
+import { ArrowRefreshIcon, InsertLinkIcon, WarningTriangleIcon } from "../../../components/Icons";
+import { SkeletonLoader } from "../../../components/Loaders";
+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.
+ *
+ * Data climbs a progressive ladder (url → basic → full); the anatomy is
+ * CONSTANT at every tier, so each slot swaps a skeleton for real content in
+ * place and the card never reflows on upgrade. Four statuses layer on top:
+ *   resolving — climbing the ladder, aspect + rows reserved by skeletons
+ *   resolved  — the full card
+ *   stale     — resolved, but past its cache window: shows `fetchedAt` and a
+ *               re-unfurl affordance
+ *   error     — the unfurl failed: favicon + raw URL + retry, NO media
+ *
+ * Compact ↔ expanded is a user-switchable DISPLAY LEVEL on the same link
+ * entity (the data lives in the controller, so switching never refetches or
+ * loses it) — not two separate card types.
+ */
+
+/* ------------------------------------------------------------------ */
+/* Small building blocks                                               */
+/* ------------------------------------------------------------------ */
+
+const StyledDomainRow = styled.div.withConfig({
+  displayName: "LinkCard__StyledDomainRow",
+  componentId: "sc-qyea73-0"
+})(["display:flex;align-items:center;gap:8px;min-height:16px;"]);
+const StyledChips = styled.div.withConfig({
+  displayName: "LinkCard__StyledChips",
+  componentId: "sc-qyea73-1"
+})(["display:flex;align-items:center;gap:6px;min-height:18px;"]);
+
+/* The stale strip — a re-unfurl affordance with the fetch time. */
+const StyledStaleStrip = styled.div.withConfig({
+  displayName: "LinkCard__StyledStaleStrip",
+  componentId: "sc-qyea73-2"
+})(["display:flex;align-items:center;gap:8px;color:var(--color-theme-600);> span{flex:1 1 auto;min-width:0;}"]);
+const StyledReunfurl = styled.button.withConfig({
+  displayName: "LinkCard__StyledReunfurl",
+  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",
+  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;}"]);
+const StyledRetry = styled.button.withConfig({
+  displayName: "LinkCard__StyledRetry",
+  componentId: "sc-qyea73-5"
+})(["align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border-primary);border-radius:6px;background:var(--page-paper-main);color:var(--color-theme-800);cursor:pointer;svg{width:14px;height:14px;}&:hover{background:var(--color-theme-200);border-color:var(--sc-selection-ring);}"]);
+
+/* The expanded footer band — tinted, holds the title + domain under the hero. */
+const StyledFooterTitle = styled(Body2).withConfig({
+  displayName: "LinkCard__StyledFooterTitle",
+  componentId: "sc-qyea73-6"
+})(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"]);
+
+/* ------------------------------------------------------------------ */
+/* The display-level switch — lives in the entity "…" slot             */
+/* ------------------------------------------------------------------ */
+
+const StyledDisplayToggle = styled.button.withConfig({
+  displayName: "LinkCard__StyledDisplayToggle",
+  componentId: "sc-qyea73-7"
+})(["display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--border-primary);border-radius:10px;background:var(--color-theme-200);color:var(--color-theme-700);font-size:11px;cursor:pointer;white-space:nowrap;&:hover{background:var(--color-theme-300);}"]);
+const DisplayToggle = _ref => {
+  let display = _ref.display,
+    onToggle = _ref.onToggle;
+  return /*#__PURE__*/React.createElement(StyledDisplayToggle, {
+    type: "button",
+    "data-fixed": true,
+    className: "sc-control",
+    "aria-label": "Switch display level",
+    onClick: onToggle
+  }, display === "compact" ? "Expand ▾" : "Compact ▴");
+};
+
+/* ------------------------------------------------------------------ */
+/* LinkCard                                                            */
+/* ------------------------------------------------------------------ */
+
+export const LinkCard = _ref2 => {
+  var _data$heroColor2, _data$faviconColor2;
+  let unfurl = _ref2.unfurl,
+    _ref2$display = _ref2.display,
+    display = _ref2$display === void 0 ? "compact" : _ref2$display,
+    onToggleDisplay = _ref2.onToggleDisplay;
+  const status = unfurl.status,
+    tier = unfurl.tier,
+    data = unfurl.data,
+    fetchedAt = unfurl.fetchedAt,
+    retry = unfurl.retry,
+    reunfurl = unfurl.reunfurl;
+
+  // ── Error: favicon + raw URL + retry, no media ──────────────────
+  if (status === "error") {
+    return /*#__PURE__*/React.createElement(StyledErrorBody, null, /*#__PURE__*/React.createElement("div", {
+      className: "err-head"
+    }, /*#__PURE__*/React.createElement(WarningTriangleIcon, null), /*#__PURE__*/React.createElement(Caption1, {
+      weight: "bold",
+      color: "tertiary"
+    }, "Couldn\u2019t load a preview")), /*#__PURE__*/React.createElement("div", {
+      className: "err-url"
+    }, /*#__PURE__*/React.createElement(StyledFavicon, {
+      $bg: "var(--color-theme-400)",
+      "data-fixed": true
+    }), /*#__PURE__*/React.createElement(Caption1, {
+      color: "secondary"
+    }, data.url)), /*#__PURE__*/React.createElement(StyledRetry, {
+      type: "button",
+      onClick: retry
+    }, /*#__PURE__*/React.createElement(ArrowRefreshIcon, null), /*#__PURE__*/React.createElement(Typography, {
+      as: "span",
+      variant: "Caption 1"
+    }, "Retry")));
+  }
+  const hasBasic = tier === "basic" || tier === "full";
+  const hasFull = tier === "full";
+  const toggle = onToggleDisplay != null ? onToggleDisplay : () => undefined;
+
+  // ── Expanded: hero + tinted footer band (title + domain) ────────
+  if (display === "expanded") {
+    var _data$heroColor, _data$faviconColor;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cover, {
+      aspectRatio: COVER_RATIO_HERO,
+      centerSlot: hasFull && data.playable ? playControl : undefined,
+      topRightSlot: coverManagement()
+    }, hasFull ? /*#__PURE__*/React.createElement(StyledColorCover, {
+      $color: (_data$heroColor = data.heroColor) != null ? _data$heroColor : "#1D9E75"
+    }) : /*#__PURE__*/React.createElement(SkeletonLoader, {
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    })), /*#__PURE__*/React.createElement(StackRow, {
+      role: "footer",
+      direction: "column",
+      background: "var(--color-theme-200)"
+    }, /*#__PURE__*/React.createElement(StyledDomainRow, null, hasBasic ? /*#__PURE__*/React.createElement(StyledFavicon, {
+      $bg: (_data$faviconColor = data.faviconColor) != null ? _data$faviconColor : "#0F6E56",
+      "data-fixed": true
+    }) : /*#__PURE__*/React.createElement(SkeletonLoader, {
+      "data-fixed": true,
+      style: {
+        width: 16,
+        height: 16,
+        borderRadius: 4
+      }
+    }), hasBasic ? /*#__PURE__*/React.createElement(Caption1, {
+      color: "tertiary"
+    }, data.domain) : /*#__PURE__*/React.createElement(Caption1, {
+      color: "tertiary"
+    }, data.url), /*#__PURE__*/React.createElement("span", {
+      style: {
+        flex: "1 1 auto"
+      }
+    }), /*#__PURE__*/React.createElement(DisplayToggle, {
+      display: display,
+      onToggle: toggle
+    })), hasBasic ? /*#__PURE__*/React.createElement(StyledFooterTitle, {
+      weight: "bold"
+    }, data.title) : /*#__PURE__*/React.createElement(SkeletonLoader, {
+      style: {
+        height: 14,
+        width: "90%"
+      }
+    }), hasFull ? /*#__PURE__*/React.createElement(Caption1, {
+      color: "tertiary"
+    }, data.description) : /*#__PURE__*/React.createElement(SkeletonLoader, {
+      style: {
+        height: 10,
+        width: "70%"
+      }
+    })), status === "stale" ? /*#__PURE__*/React.createElement(StackRow, {
+      role: "meta"
+    }, /*#__PURE__*/React.createElement(StaleStrip, {
+      fetchedAt: fetchedAt,
+      onReunfurl: reunfurl
+    })) : null);
+  }
+
+  // ── Compact: cover + favicon/domain + title + chips ─────────────
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cover, {
+    aspectRatio: COVER_RATIO,
+    centerSlot: hasFull && data.playable ? playControl : undefined
+  }, hasFull ? /*#__PURE__*/React.createElement(StyledColorCover, {
+    $color: (_data$heroColor2 = data.heroColor) != null ? _data$heroColor2 : "#1D9E75"
+  }) : /*#__PURE__*/React.createElement(SkeletonLoader, {
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  })), /*#__PURE__*/React.createElement(StackRow, {
+    role: "custom"
+  }, /*#__PURE__*/React.createElement(StyledDomainRow, null, hasBasic ? /*#__PURE__*/React.createElement(StyledFavicon, {
+    $bg: (_data$faviconColor2 = data.faviconColor) != null ? _data$faviconColor2 : "#0F6E56",
+    "data-fixed": true
+  }) : /*#__PURE__*/React.createElement(SkeletonLoader, {
+    "data-fixed": true,
+    style: {
+      width: 16,
+      height: 16,
+      borderRadius: 4
+    }
+  }), hasBasic ? /*#__PURE__*/React.createElement(Caption1, {
+    color: "tertiary"
+  }, data.domain) : /*#__PURE__*/React.createElement(Caption1, {
+    color: "tertiary"
+  }, data.url), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: "1 1 auto"
+    }
+  }), /*#__PURE__*/React.createElement(DisplayToggle, {
+    display: display,
+    onToggle: toggle
+  }))), /*#__PURE__*/React.createElement(StackRow, {
+    role: "title"
+  }, hasBasic ? /*#__PURE__*/React.createElement(StyledClamp, null, data.title) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(SkeletonLoader, {
+    style: {
+      height: 14,
+      width: "92%"
+    }
+  }), /*#__PURE__*/React.createElement(SkeletonLoader, {
+    style: {
+      height: 14,
+      width: "60%",
+      marginTop: 6
+    }
+  }))), /*#__PURE__*/React.createElement(StackRow, {
+    role: "custom"
+  }, /*#__PURE__*/React.createElement(StyledChips, null, hasFull ? /*#__PURE__*/React.createElement(React.Fragment, null, data.kind ? /*#__PURE__*/React.createElement(StyledChip, {
+    "data-fixed": true
+  }, data.kind) : null, data.duration ? /*#__PURE__*/React.createElement(StyledChip, {
+    "data-fixed": true
+  }, data.duration) : null) : /*#__PURE__*/React.createElement(SkeletonLoader, {
+    style: {
+      height: 18,
+      width: 96,
+      borderRadius: 10
+    }
+  }))), status === "stale" ? /*#__PURE__*/React.createElement(StackRow, {
+    role: "meta"
+  }, /*#__PURE__*/React.createElement(StaleStrip, {
+    fetchedAt: fetchedAt,
+    onReunfurl: reunfurl
+  })) : null);
+};
+
+/* The stale affordance — fetch time + a manual re-unfurl button. */
+const StaleStrip = _ref3 => {
+  let fetchedAt = _ref3.fetchedAt,
+    onReunfurl = _ref3.onReunfurl;
+  return /*#__PURE__*/React.createElement(StyledStaleStrip, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "Caption 1",
+    color: "tertiary"
+  }, "Preview may be out of date \xB7 fetched ", formatFetchedAt(fetchedAt)), /*#__PURE__*/React.createElement(StyledReunfurl, {
+    type: "button",
+    onClick: onReunfurl
+  }, /*#__PURE__*/React.createElement(ArrowRefreshIcon, null), "Re-unfurl"));
+};
+
+/* ---- skeleton ---- */
+
+/* Mirrors the compact anatomy row for row (this is the `resolving` render at
+   tier `url`), so a resolving link never reflows as it climbs the ladder. */
+export const LinkSkeleton = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cover, {
+  aspectRatio: COVER_RATIO
+}, /*#__PURE__*/React.createElement(SkeletonLoader, {
+  style: {
+    width: "100%",
+    height: "100%"
+  }
+})), /*#__PURE__*/React.createElement(StackRow, {
+  role: "custom"
+}, /*#__PURE__*/React.createElement(StyledDomainRow, null, /*#__PURE__*/React.createElement(SkeletonLoader, {
+  "data-fixed": true,
+  style: {
+    width: 16,
+    height: 16,
+    borderRadius: 4
+  }
+}), /*#__PURE__*/React.createElement(SkeletonLoader, {
+  style: {
+    height: 10,
+    width: "40%"
+  }
+}))), /*#__PURE__*/React.createElement(StackRow, {
+  role: "title"
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    width: "100%"
+  }
+}, /*#__PURE__*/React.createElement(SkeletonLoader, {
+  style: {
+    height: 14,
+    width: "92%"
+  }
+}), /*#__PURE__*/React.createElement(SkeletonLoader, {
+  style: {
+    height: 14,
+    width: "60%",
+    marginTop: 6
+  }
+}))), /*#__PURE__*/React.createElement(StackRow, {
+  role: "custom"
+}, /*#__PURE__*/React.createElement(StyledChips, null, /*#__PURE__*/React.createElement(SkeletonLoader, {
+  style: {
+    height: 18,
+    width: 96,
+    borderRadius: 10
+  }
+}))));
+
+/* ---- placeholder ---- */
+
+export const LinkPlaceholder = props => /*#__PURE__*/React.createElement(Placeholder, _extends({
+  icon: /*#__PURE__*/React.createElement(InsertLinkIcon, null),
+  label: "Add a link"
+}, props));
+//# sourceMappingURL=LinkCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkCard.js","names":["React","styled","StyledChip","StyledClamp","StyledColorCover","StyledFavicon","coverManagement","playControl","Placeholder","formatFetchedAt","ArrowRefreshIcon","InsertLinkIcon","WarningTriangleIcon","SkeletonLoader","Body2","Caption1","Typography","Cover","StackRow","COVER_RATIO","COVER_RATIO_HERO","StyledDomainRow","div","withConfig","displayName","componentId","StyledChips","StyledStaleStrip","StyledReunfurl","button","StyledErrorBody","StyledRetry","StyledFooterTitle","StyledDisplayToggle","DisplayToggle","_ref","display","onToggle","createElement","type","className","onClick","LinkCard","_ref2","_data$heroColor2","_data$faviconColor2","unfurl","_ref2$display","onToggleDisplay","status","tier","data","fetchedAt","retry","reunfurl","weight","color","$bg","url","as","variant","hasBasic","hasFull","toggle","undefined","_data$heroColor","_data$faviconColor","Fragment","aspectRatio","centerSlot","playable","topRightSlot","$color","heroColor","style","width","height","role","direction","background","faviconColor","borderRadius","domain","flex","title","description","StaleStrip","onReunfurl","marginTop","kind","duration","_ref3","LinkSkeleton","LinkPlaceholder","props","_extends","icon","label"],"sources":["../../../../../src/presentation/stackedCard/content/LinkCard.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport {\n  StyledChip,\n  StyledClamp,\n  StyledColorCover,\n  StyledFavicon,\n  coverManagement,\n  playControl,\n  Placeholder,\n} from \"./shared\";\nimport { UnfurlController, formatFetchedAt } from \"./unfurl\";\nimport {\n  ArrowRefreshIcon,\n  InsertLinkIcon,\n  WarningTriangleIcon,\n} from \"../../../components/Icons\";\nimport { SkeletonLoader } from \"../../../components/Loaders\";\nimport { Body2, Caption1 } from \"../../../components/Typography\";\nimport { Typography } from \"../../../components/Typography/Typography\";\nimport { Cover, StackRow } from \"../primitives\";\nimport { COVER_RATIO, COVER_RATIO_HERO } from \"../shell\";\n\n/**\n * LinkCard — a link preview as a LIFECYCLE, not two static layouts.\n *\n * Data climbs a progressive ladder (url → basic → full); the anatomy is\n * CONSTANT at every tier, so each slot swaps a skeleton for real content in\n * place and the card never reflows on upgrade. Four statuses layer on top:\n *   resolving — climbing the ladder, aspect + rows reserved by skeletons\n *   resolved  — the full card\n *   stale     — resolved, but past its cache window: shows `fetchedAt` and a\n *               re-unfurl affordance\n *   error     — the unfurl failed: favicon + raw URL + retry, NO media\n *\n * Compact ↔ expanded is a user-switchable DISPLAY LEVEL on the same link\n * entity (the data lives in the controller, so switching never refetches or\n * loses it) — not two separate card types.\n */\n\nexport type LinkDisplay = \"compact\" | \"expanded\";\n\n/* ------------------------------------------------------------------ */\n/* Small building blocks                                               */\n/* ------------------------------------------------------------------ */\n\nconst StyledDomainRow = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 16px;\n`;\n\nconst StyledChips = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-height: 18px;\n`;\n\n/* The stale strip — a re-unfurl affordance with the fetch time. */\nconst StyledStaleStrip = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--color-theme-600);\n\n  > span {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n`;\n\nconst StyledReunfurl = styled.button`\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex: 0 0 auto;\n  padding: 3px 8px;\n  border: 1px solid var(--border-primary);\n  border-radius: 6px;\n  background: var(--page-paper-main);\n  color: var(--color-theme-800);\n  font-size: 11px;\n  cursor: pointer;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n\n  &:hover {\n    background: var(--color-theme-200);\n    border-color: var(--sc-selection-ring);\n  }\n`;\n\n/* The error body — favicon + raw URL + retry, no media (per spec §5). */\nconst StyledErrorBody = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 12px;\n\n  .err-head {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--red-alert);\n  }\n\n  .err-head svg {\n    width: 16px;\n    height: 16px;\n    flex: 0 0 auto;\n  }\n\n  .err-url {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    word-break: break-all;\n  }\n`;\n\nconst StyledRetry = styled.button`\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 10px;\n  border: 1px solid var(--border-primary);\n  border-radius: 6px;\n  background: var(--page-paper-main);\n  color: var(--color-theme-800);\n  cursor: pointer;\n\n  svg {\n    width: 14px;\n    height: 14px;\n  }\n\n  &:hover {\n    background: var(--color-theme-200);\n    border-color: var(--sc-selection-ring);\n  }\n`;\n\n/* The expanded footer band — tinted, holds the title + domain under the hero. */\nconst StyledFooterTitle = styled(Body2)`\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n`;\n\n/* ------------------------------------------------------------------ */\n/* The display-level switch — lives in the entity \"…\" slot             */\n/* ------------------------------------------------------------------ */\n\nconst StyledDisplayToggle = styled.button`\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border: 1px solid var(--border-primary);\n  border-radius: 10px;\n  background: var(--color-theme-200);\n  color: var(--color-theme-700);\n  font-size: 11px;\n  cursor: pointer;\n  white-space: nowrap;\n\n  &:hover {\n    background: var(--color-theme-300);\n  }\n`;\n\nconst DisplayToggle = ({\n  display,\n  onToggle,\n}: {\n  display: LinkDisplay;\n  onToggle: () => void;\n}): ReactElement => (\n  <StyledDisplayToggle\n    type=\"button\"\n    data-fixed\n    className=\"sc-control\"\n    aria-label=\"Switch display level\"\n    onClick={onToggle}\n  >\n    {display === \"compact\" ? \"Expand ▾\" : \"Compact ▴\"}\n  </StyledDisplayToggle>\n);\n\n/* ------------------------------------------------------------------ */\n/* LinkCard                                                            */\n/* ------------------------------------------------------------------ */\n\nexport interface LinkCardProps {\n  unfurl: UnfurlController;\n  display?: LinkDisplay;\n  onToggleDisplay?: () => void;\n}\n\nexport const LinkCard = ({\n  unfurl,\n  display = \"compact\",\n  onToggleDisplay,\n}: LinkCardProps): ReactElement => {\n  const { status, tier, data, fetchedAt, retry, reunfurl } = unfurl;\n\n  // ── Error: favicon + raw URL + retry, no media ──────────────────\n  if (status === \"error\") {\n    return (\n      <StyledErrorBody>\n        <div className=\"err-head\">\n          <WarningTriangleIcon />\n          <Caption1 weight=\"bold\" color=\"tertiary\">\n            Couldn’t load a preview\n          </Caption1>\n        </div>\n        <div className=\"err-url\">\n          <StyledFavicon $bg=\"var(--color-theme-400)\" data-fixed />\n          <Caption1 color=\"secondary\">{data.url}</Caption1>\n        </div>\n        <StyledRetry type=\"button\" onClick={retry}>\n          <ArrowRefreshIcon />\n          <Typography as=\"span\" variant=\"Caption 1\">\n            Retry\n          </Typography>\n        </StyledRetry>\n      </StyledErrorBody>\n    );\n  }\n\n  const hasBasic = tier === \"basic\" || tier === \"full\";\n  const hasFull = tier === \"full\";\n  const toggle = onToggleDisplay ?? (() => undefined);\n\n  // ── Expanded: hero + tinted footer band (title + domain) ────────\n  if (display === \"expanded\") {\n    return (\n      <>\n        <Cover\n          aspectRatio={COVER_RATIO_HERO}\n          centerSlot={hasFull && data.playable ? playControl : undefined}\n          topRightSlot={coverManagement()}\n        >\n          {hasFull ? (\n            <StyledColorCover $color={data.heroColor ?? \"#1D9E75\"} />\n          ) : (\n            <SkeletonLoader style={{ width: \"100%\", height: \"100%\" }} />\n          )}\n        </Cover>\n        <StackRow\n          role=\"footer\"\n          direction=\"column\"\n          background=\"var(--color-theme-200)\"\n        >\n          <StyledDomainRow>\n            {hasBasic ? (\n              <StyledFavicon $bg={data.faviconColor ?? \"#0F6E56\"} data-fixed />\n            ) : (\n              <SkeletonLoader\n                data-fixed\n                style={{ width: 16, height: 16, borderRadius: 4 }}\n              />\n            )}\n            {hasBasic ? (\n              <Caption1 color=\"tertiary\">{data.domain}</Caption1>\n            ) : (\n              <Caption1 color=\"tertiary\">{data.url}</Caption1>\n            )}\n            <span style={{ flex: \"1 1 auto\" }} />\n            <DisplayToggle display={display} onToggle={toggle} />\n          </StyledDomainRow>\n          {hasBasic ? (\n            <StyledFooterTitle weight=\"bold\">{data.title}</StyledFooterTitle>\n          ) : (\n            <SkeletonLoader style={{ height: 14, width: \"90%\" }} />\n          )}\n          {hasFull ? (\n            <Caption1 color=\"tertiary\">{data.description}</Caption1>\n          ) : (\n            <SkeletonLoader style={{ height: 10, width: \"70%\" }} />\n          )}\n        </StackRow>\n        {status === \"stale\" ? (\n          <StackRow role=\"meta\">\n            <StaleStrip fetchedAt={fetchedAt} onReunfurl={reunfurl} />\n          </StackRow>\n        ) : null}\n      </>\n    );\n  }\n\n  // ── Compact: cover + favicon/domain + title + chips ─────────────\n  return (\n    <>\n      <Cover\n        aspectRatio={COVER_RATIO}\n        centerSlot={hasFull && data.playable ? playControl : undefined}\n      >\n        {hasFull ? (\n          <StyledColorCover $color={data.heroColor ?? \"#1D9E75\"} />\n        ) : (\n          <SkeletonLoader style={{ width: \"100%\", height: \"100%\" }} />\n        )}\n      </Cover>\n\n      <StackRow role=\"custom\">\n        <StyledDomainRow>\n          {hasBasic ? (\n            <StyledFavicon $bg={data.faviconColor ?? \"#0F6E56\"} data-fixed />\n          ) : (\n            <SkeletonLoader\n              data-fixed\n              style={{ width: 16, height: 16, borderRadius: 4 }}\n            />\n          )}\n          {hasBasic ? (\n            <Caption1 color=\"tertiary\">{data.domain}</Caption1>\n          ) : (\n            <Caption1 color=\"tertiary\">{data.url}</Caption1>\n          )}\n          <span style={{ flex: \"1 1 auto\" }} />\n          <DisplayToggle display={display} onToggle={toggle} />\n        </StyledDomainRow>\n      </StackRow>\n\n      <StackRow role=\"title\">\n        {hasBasic ? (\n          <StyledClamp>{data.title}</StyledClamp>\n        ) : (\n          <div style={{ width: \"100%\" }}>\n            <SkeletonLoader style={{ height: 14, width: \"92%\" }} />\n            <SkeletonLoader\n              style={{ height: 14, width: \"60%\", marginTop: 6 }}\n            />\n          </div>\n        )}\n      </StackRow>\n\n      <StackRow role=\"custom\">\n        <StyledChips>\n          {hasFull ? (\n            <>\n              {data.kind ? (\n                <StyledChip data-fixed>{data.kind}</StyledChip>\n              ) : null}\n              {data.duration ? (\n                <StyledChip data-fixed>{data.duration}</StyledChip>\n              ) : null}\n            </>\n          ) : (\n            <SkeletonLoader\n              style={{ height: 18, width: 96, borderRadius: 10 }}\n            />\n          )}\n        </StyledChips>\n      </StackRow>\n\n      {status === \"stale\" ? (\n        <StackRow role=\"meta\">\n          <StaleStrip fetchedAt={fetchedAt} onReunfurl={reunfurl} />\n        </StackRow>\n      ) : null}\n    </>\n  );\n};\n\n/* The stale affordance — fetch time + a manual re-unfurl button. */\nconst StaleStrip = ({\n  fetchedAt,\n  onReunfurl,\n}: {\n  fetchedAt: number | null;\n  onReunfurl: () => void;\n}): ReactElement => (\n  <StyledStaleStrip>\n    <Typography as=\"span\" variant=\"Caption 1\" color=\"tertiary\">\n      Preview may be out of date · fetched {formatFetchedAt(fetchedAt)}\n    </Typography>\n    <StyledReunfurl type=\"button\" onClick={onReunfurl}>\n      <ArrowRefreshIcon />\n      Re-unfurl\n    </StyledReunfurl>\n  </StyledStaleStrip>\n);\n\n/* ---- skeleton ---- */\n\n/* Mirrors the compact anatomy row for row (this is the `resolving` render at\n   tier `url`), so a resolving link never reflows as it climbs the ladder. */\nexport const LinkSkeleton = (): ReactElement => (\n  <>\n    <Cover aspectRatio={COVER_RATIO}>\n      <SkeletonLoader style={{ width: \"100%\", height: \"100%\" }} />\n    </Cover>\n    <StackRow role=\"custom\">\n      <StyledDomainRow>\n        <SkeletonLoader\n          data-fixed\n          style={{ width: 16, height: 16, borderRadius: 4 }}\n        />\n        <SkeletonLoader style={{ height: 10, width: \"40%\" }} />\n      </StyledDomainRow>\n    </StackRow>\n    <StackRow role=\"title\">\n      <div style={{ width: \"100%\" }}>\n        <SkeletonLoader style={{ height: 14, width: \"92%\" }} />\n        <SkeletonLoader style={{ height: 14, width: \"60%\", marginTop: 6 }} />\n      </div>\n    </StackRow>\n    <StackRow role=\"custom\">\n      <StyledChips>\n        <SkeletonLoader style={{ height: 18, width: 96, borderRadius: 10 }} />\n      </StyledChips>\n    </StackRow>\n  </>\n);\n\n/* ---- placeholder ---- */\n\nexport const LinkPlaceholder = (\n  props: React.ButtonHTMLAttributes<HTMLButtonElement>\n): ReactElement => (\n  <Placeholder icon={<InsertLinkIcon />} label=\"Add a link\" {...props} />\n);\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/presentation/stackedCard/content/NoteCard.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactElement } from "react";
+export declare const SAMPLE_NOTE = "Kickoff open questions before we lock the columns:\n\n\u2022 Who owns the migration off react-dnd, and does it block the canvas work or run in parallel?\n\u2022 Confirm the outline-placeholder choreography reads the same in a scrolled column.\n\u2022 Do we ship the note type in v1, or defer inline editing?";
+export interface NoteCardProps {
+    title?: string;
+    body?: string;
+}
+export declare const NoteCard: ({ title, body, }: NoteCardProps) => ReactElement;
+export declare const NotePlaceholder: (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => ReactElement;
+export declare const NoteSkeleton: () => ReactElement;
+//# sourceMappingURL=NoteCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NoteCard.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/stackedCard/content/NoteCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AA4B5C,eAAO,MAAM,WAAW,wTAImC,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,QAAQ,GAAI,kBAGtB,aAAa,KAAG,YAUlB,CAAC;AAIF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,KACnD,YAEF,CAAC;AAGF,eAAO,MAAM,YAAY,QAAO,YAY/B,CAAC"}

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

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from "react";
+import styled from "styled-components";
+import { EntityDots, Placeholder } from "./shared";
+import { NoteIcon } from "../../../components/Icons";
+import { SkeletonLoader } from "../../../components/Loaders";
+import { Body2 } from "../../../components/Typography";
+import { StackRow } from "../primitives";
+
+/**
+ * NoteCard — the new fifth type. A multi-line text card (Milanote-style): a
+ * title row that owns the "…" menu, then padded body rows. The body clamps at a
+ * line limit and fades out; auto-height, so the card grows with its content.
+ * Inline editing lands in task 4/8 — this is the read view + placeholder.
+ */
+
+/* The body clamps at a max height and fades out with a mask so long notes end
+   softly instead of hard-cropping. white-space: pre-line keeps authored breaks. */
+const StyledNoteBody = styled(Body2).withConfig({
+  displayName: "NoteCard__StyledNoteBody",
+  componentId: "sc-e2a7no-0"
+})(["display:block;max-height:132px;overflow:hidden;white-space:pre-line;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent);"]);
+export const SAMPLE_NOTE = "Kickoff open questions before we lock the columns:\n\n\u2022 Who owns the migration off react-dnd, and does it block the canvas work or run in parallel?\n\u2022 Confirm the outline-placeholder choreography reads the same in a scrolled column.\n\u2022 Do we ship the note type in v1, or defer inline editing?";
+export const NoteCard = _ref => {
+  let _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "Kickoff notes" : _ref$title,
+    _ref$body = _ref.body,
+    body = _ref$body === void 0 ? SAMPLE_NOTE : _ref$body;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StackRow, {
+    role: "title"
+  }, /*#__PURE__*/React.createElement(Body2, {
+    weight: "bold"
+  }, title), /*#__PURE__*/React.createElement(EntityDots, {
+    "aria-label": "Note options"
+  })), /*#__PURE__*/React.createElement(StackRow, {
+    role: "custom",
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(StyledNoteBody, {
+    color: "secondary"
+  }, body)));
+};
+
+/* ---- placeholder + skeleton ---- */
+
+export const NotePlaceholder = props => /*#__PURE__*/React.createElement(Placeholder, _extends({
+  icon: /*#__PURE__*/React.createElement(NoteIcon, null),
+  label: "Write a note"
+}, props));
+
+/* Skeleton mirrors the note anatomy: a title line, then several body lines. */
+export const NoteSkeleton = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StackRow, {
+  role: "title"
+}, /*#__PURE__*/React.createElement(SkeletonLoader, {
+  style: {
+    height: 14,
+    width: "50%"
+  }
+})), /*#__PURE__*/React.createElement(StackRow, {
+  role: "custom",
+  direction: "column"
+}, /*#__PURE__*/React.createElement(SkeletonLoader, {
+  style: {
+    height: 10,
+    width: "100%"
+  }
+}), /*#__PURE__*/React.createElement(SkeletonLoader, {
+  style: {
+    height: 10,
+    width: "96%"
+  }
+}), /*#__PURE__*/React.createElement(SkeletonLoader, {
+  style: {
+    height: 10,
+    width: "88%"
+  }
+}), /*#__PURE__*/React.createElement(SkeletonLoader, {
+  style: {
+    height: 10,
+    width: "70%"
+  }
+})));
+//# sourceMappingURL=NoteCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NoteCard.js","names":["React","styled","EntityDots","Placeholder","NoteIcon","SkeletonLoader","Body2","StackRow","StyledNoteBody","withConfig","displayName","componentId","SAMPLE_NOTE","NoteCard","_ref","_ref$title","title","_ref$body","body","createElement","Fragment","role","weight","direction","color","NotePlaceholder","props","_extends","icon","label","NoteSkeleton","style","height","width"],"sources":["../../../../../src/presentation/stackedCard/content/NoteCard.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { EntityDots, Placeholder } from \"./shared\";\nimport { NoteIcon } from \"../../../components/Icons\";\nimport { SkeletonLoader } from \"../../../components/Loaders\";\nimport { Body2 } from \"../../../components/Typography\";\nimport { StackRow } from \"../primitives\";\n\n/**\n * NoteCard — the new fifth type. A multi-line text card (Milanote-style): a\n * title row that owns the \"…\" menu, then padded body rows. The body clamps at a\n * line limit and fades out; auto-height, so the card grows with its content.\n * Inline editing lands in task 4/8 — this is the read view + placeholder.\n */\n\n/* The body clamps at a max height and fades out with a mask so long notes end\n   softly instead of hard-cropping. white-space: pre-line keeps authored breaks. */\nconst StyledNoteBody = styled(Body2)`\n  display: block;\n  max-height: 132px;\n  overflow: hidden;\n  white-space: pre-line;\n  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);\n  mask-image: linear-gradient(180deg, #000 72%, transparent);\n`;\n\nexport const SAMPLE_NOTE = `Kickoff open questions before we lock the columns:\n\n• Who owns the migration off react-dnd, and does it block the canvas work or run in parallel?\n• Confirm the outline-placeholder choreography reads the same in a scrolled column.\n• Do we ship the note type in v1, or defer inline editing?`;\n\nexport interface NoteCardProps {\n  title?: string;\n  body?: string;\n}\n\nexport const NoteCard = ({\n  title = \"Kickoff notes\",\n  body = SAMPLE_NOTE,\n}: NoteCardProps): ReactElement => (\n  <>\n    <StackRow role=\"title\">\n      <Body2 weight=\"bold\">{title}</Body2>\n      <EntityDots aria-label=\"Note options\" />\n    </StackRow>\n    <StackRow role=\"custom\" direction=\"column\">\n      <StyledNoteBody color=\"secondary\">{body}</StyledNoteBody>\n    </StackRow>\n  </>\n);\n\n/* ---- placeholder + skeleton ---- */\n\nexport const NotePlaceholder = (\n  props: React.ButtonHTMLAttributes<HTMLButtonElement>\n): ReactElement => (\n  <Placeholder icon={<NoteIcon />} label=\"Write a note\" {...props} />\n);\n\n/* Skeleton mirrors the note anatomy: a title line, then several body lines. */\nexport const NoteSkeleton = (): ReactElement => (\n  <>\n    <StackRow role=\"title\">\n      <SkeletonLoader style={{ height: 14, width: \"50%\" }} />\n    </StackRow>\n    <StackRow role=\"custom\" direction=\"column\">\n      <SkeletonLoader style={{ height: 10, width: \"100%\" }} />\n      <SkeletonLoader style={{ height: 10, width: \"96%\" }} />\n      <SkeletonLoader style={{ height: 10, width: \"88%\" }} />\n      <SkeletonLoader style={{ height: 10, width: \"70%\" }} />\n    </StackRow>\n  </>\n);\n"],"mappings":";AAAA,OAAOA,KAAK,MAAwB,OAAO;AAE3C,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,SAASC,UAAU,EAAEC,WAAW,QAAQ,UAAU;AAClD,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,KAAK,QAAQ,gCAAgC;AACtD,SAASC,QAAQ,QAAQ,eAAe;;AAExC;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,MAAMC,cAAc,GAAGP,MAAM,CAACK,KAAK,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oMAOnC;AAED,OAAO,MAAMC,WAAW,wTAImC;AAO3D,OAAO,MAAMC,QAAQ,GAAGC,IAAA;EAAA,IAAAC,UAAA,GAAAD,IAAA,CACtBE,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,eAAe,GAAAA,UAAA;IAAAE,SAAA,GAAAH,IAAA,CACvBI,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAGL,WAAW,GAAAK,SAAA;EAAA,oBAElBjB,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAAoB,QAAA,qBACEpB,KAAA,CAAAmB,aAAA,CAACZ,QAAQ;IAACc,IAAI,EAAC;EAAO,gBACpBrB,KAAA,CAAAmB,aAAA,CAACb,KAAK;IAACgB,MAAM,EAAC;EAAM,GAAEN,KAAa,CAAC,eACpChB,KAAA,CAAAmB,aAAA,CAACjB,UAAU;IAAC,cAAW;EAAc,CAAE,CAC/B,CAAC,eACXF,KAAA,CAAAmB,aAAA,CAACZ,QAAQ;IAACc,IAAI,EAAC,QAAQ;IAACE,SAAS,EAAC;EAAQ,gBACxCvB,KAAA,CAAAmB,aAAA,CAACX,cAAc;IAACgB,KAAK,EAAC;EAAW,GAAEN,IAAqB,CAChD,CACV,CAAC;AAAA,CACJ;;AAED;;AAEA,OAAO,MAAMO,eAAe,GAC1BC,KAAoD,iBAEpD1B,KAAA,CAAAmB,aAAA,CAAChB,WAAW,EAAAwB,QAAA;EAACC,IAAI,eAAE5B,KAAA,CAAAmB,aAAA,CAACf,QAAQ,MAAE,CAAE;EAACyB,KAAK,EAAC;AAAc,GAAKH,KAAK,CAAG,CACnE;;AAED;AACA,OAAO,MAAMI,YAAY,GAAGA,CAAA,kBAC1B9B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAAoB,QAAA,qBACEpB,KAAA,CAAAmB,aAAA,CAACZ,QAAQ;EAACc,IAAI,EAAC;AAAO,gBACpBrB,KAAA,CAAAmB,aAAA,CAACd,cAAc;EAAC0B,KAAK,EAAE;IAAEC,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAM;AAAE,CAAE,CAC9C,CAAC,eACXjC,KAAA,CAAAmB,aAAA,CAACZ,QAAQ;EAACc,IAAI,EAAC,QAAQ;EAACE,SAAS,EAAC;AAAQ,gBACxCvB,KAAA,CAAAmB,aAAA,CAACd,cAAc;EAAC0B,KAAK,EAAE;IAAEC,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAO;AAAE,CAAE,CAAC,eACxDjC,KAAA,CAAAmB,aAAA,CAACd,cAAc;EAAC0B,KAAK,EAAE;IAAEC,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAM;AAAE,CAAE,CAAC,eACvDjC,KAAA,CAAAmB,aAAA,CAACd,cAAc;EAAC0B,KAAK,EAAE;IAAEC,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAM;AAAE,CAAE,CAAC,eACvDjC,KAAA,CAAAmB,aAAA,CAACd,cAAc;EAAC0B,KAAK,EAAE;IAAEC,MAAM,EAAE,EAAE;IAAEC,KAAK,EAAE;EAAM;AAAE,CAAE,CAC9C,CACV,CACH","ignoreList":[]}

package/dist/esm/presentation/stackedCard/content/SwatchCard.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactElement } from "react";
+/**
+ * SwatchCard — the cover IS the colour; a title row states its name and hex.
+ * The swatch value is a literal data colour by design (not a theme token).
+ */
+export interface SwatchCardProps {
+    color?: string;
+    name?: string;
+    hex?: string;
+}
+export declare const SwatchCard: ({ color, name, hex, }: SwatchCardProps) => ReactElement;
+export declare const SwatchPlaceholder: (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => ReactElement;
+export declare const SwatchSkeleton: () => ReactElement;
+//# sourceMappingURL=SwatchCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchCard.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/stackedCard/content/SwatchCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAS5C;;;GAGG;AAEH,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,UAAU,GAAI,uBAIxB,eAAe,KAAG,YAYpB,CAAC;AAIF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,KACnD,YAEF,CAAC;AAEF,eAAO,MAAM,cAAc,QAAO,YAUjC,CAAC"}

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

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from "react";
+import { StyledColorCover, Placeholder } from "./shared";
+import { ImageIcon } from "../../../components/Icons";
+import { SkeletonLoader } from "../../../components/Loaders";
+import { Body2, Caption1 } from "../../../components/Typography";
+import { Cover, StackRow } from "../primitives";
+import { COVER_RATIO_SWATCH } from "../shell";
+
+/**
+ * SwatchCard — the cover IS the colour; a title row states its name and hex.
+ * The swatch value is a literal data colour by design (not a theme token).
+ */
+
+export const SwatchCard = _ref => {
+  let _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#1D9E75" : _ref$color,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? "Teal" : _ref$name,
+    _ref$hex = _ref.hex,
+    hex = _ref$hex === void 0 ? "#1D9E75" : _ref$hex;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cover, {
+    aspectRatio: COVER_RATIO_SWATCH
+  }, /*#__PURE__*/React.createElement(StyledColorCover, {
+    $color: color
+  })), /*#__PURE__*/React.createElement(StackRow, {
+    role: "title"
+  }, /*#__PURE__*/React.createElement(Body2, null, name), /*#__PURE__*/React.createElement(Caption1, {
+    color: "tertiary",
+    "data-fixed": true,
+    style: {
+      fontFamily: "monospace"
+    }
+  }, hex)));
+};
+
+/* ---- placeholder + skeleton ---- */
+
+export const SwatchPlaceholder = props => /*#__PURE__*/React.createElement(Placeholder, _extends({
+  icon: /*#__PURE__*/React.createElement(ImageIcon, null),
+  label: "Pick a colour"
+}, props));
+export const SwatchSkeleton = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cover, {
+  aspectRatio: COVER_RATIO_SWATCH
+}, /*#__PURE__*/React.createElement(SkeletonLoader, {
+  style: {
+    width: "100%",
+    height: "100%"
+  }
+})), /*#__PURE__*/React.createElement(StackRow, {
+  role: "title"
+}, /*#__PURE__*/React.createElement(SkeletonLoader, {
+  style: {
+    height: 14,
+    width: "40%"
+  }
+}), /*#__PURE__*/React.createElement(SkeletonLoader, {
+  "data-fixed": true,
+  style: {
+    height: 12,
+    width: 60
+  }
+})));
+//# sourceMappingURL=SwatchCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchCard.js","names":["React","StyledColorCover","Placeholder","ImageIcon","SkeletonLoader","Body2","Caption1","Cover","StackRow","COVER_RATIO_SWATCH","SwatchCard","_ref","_ref$color","color","_ref$name","name","_ref$hex","hex","createElement","Fragment","aspectRatio","$color","role","style","fontFamily","SwatchPlaceholder","props","_extends","icon","label","SwatchSkeleton","width","height"],"sources":["../../../../../src/presentation/stackedCard/content/SwatchCard.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nimport { StyledColorCover, Placeholder } from \"./shared\";\nimport { ImageIcon } from \"../../../components/Icons\";\nimport { SkeletonLoader } from \"../../../components/Loaders\";\nimport { Body2, Caption1 } from \"../../../components/Typography\";\nimport { Cover, StackRow } from \"../primitives\";\nimport { COVER_RATIO_SWATCH } from \"../shell\";\n\n/**\n * SwatchCard — the cover IS the colour; a title row states its name and hex.\n * The swatch value is a literal data colour by design (not a theme token).\n */\n\nexport interface SwatchCardProps {\n  color?: string;\n  name?: string;\n  hex?: string;\n}\n\nexport const SwatchCard = ({\n  color = \"#1D9E75\",\n  name = \"Teal\",\n  hex = \"#1D9E75\",\n}: SwatchCardProps): ReactElement => (\n  <>\n    <Cover aspectRatio={COVER_RATIO_SWATCH}>\n      <StyledColorCover $color={color} />\n    </Cover>\n    <StackRow role=\"title\">\n      <Body2>{name}</Body2>\n      <Caption1 color=\"tertiary\" data-fixed style={{ fontFamily: \"monospace\" }}>\n        {hex}\n      </Caption1>\n    </StackRow>\n  </>\n);\n\n/* ---- placeholder + skeleton ---- */\n\nexport const SwatchPlaceholder = (\n  props: React.ButtonHTMLAttributes<HTMLButtonElement>\n): ReactElement => (\n  <Placeholder icon={<ImageIcon />} label=\"Pick a colour\" {...props} />\n);\n\nexport const SwatchSkeleton = (): ReactElement => (\n  <>\n    <Cover aspectRatio={COVER_RATIO_SWATCH}>\n      <SkeletonLoader style={{ width: \"100%\", height: \"100%\" }} />\n    </Cover>\n    <StackRow role=\"title\">\n      <SkeletonLoader style={{ height: 14, width: \"40%\" }} />\n      <SkeletonLoader data-fixed style={{ height: 12, width: 60 }} />\n    </StackRow>\n  </>\n);\n"],"mappings":";AAAA,OAAOA,KAAK,MAAwB,OAAO;AAE3C,SAASC,gBAAgB,EAAEC,WAAW,QAAQ,UAAU;AACxD,SAASC,SAAS,QAAQ,2BAA2B;AACrD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,KAAK,EAAEC,QAAQ,QAAQ,gCAAgC;AAChE,SAASC,KAAK,EAAEC,QAAQ,QAAQ,eAAe;AAC/C,SAASC,kBAAkB,QAAQ,UAAU;;AAE7C;AACA;AACA;AACA;;AAQA,OAAO,MAAMC,UAAU,GAAGC,IAAA;EAAA,IAAAC,UAAA,GAAAD,IAAA,CACxBE,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,SAAS,GAAAA,UAAA;IAAAE,SAAA,GAAAH,IAAA,CACjBI,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,MAAM,GAAAA,SAAA;IAAAE,QAAA,GAAAL,IAAA,CACbM,GAAG;IAAHA,GAAG,GAAAD,QAAA,cAAG,SAAS,GAAAA,QAAA;EAAA,oBAEfhB,KAAA,CAAAkB,aAAA,CAAAlB,KAAA,CAAAmB,QAAA,qBACEnB,KAAA,CAAAkB,aAAA,CAACX,KAAK;IAACa,WAAW,EAAEX;EAAmB,gBACrCT,KAAA,CAAAkB,aAAA,CAACjB,gBAAgB;IAACoB,MAAM,EAAER;EAAM,CAAE,CAC7B,CAAC,eACRb,KAAA,CAAAkB,aAAA,CAACV,QAAQ;IAACc,IAAI,EAAC;EAAO,gBACpBtB,KAAA,CAAAkB,aAAA,CAACb,KAAK,QAAEU,IAAY,CAAC,eACrBf,KAAA,CAAAkB,aAAA,CAACZ,QAAQ;IAACO,KAAK,EAAC,UAAU;IAAC,kBAAU;IAACU,KAAK,EAAE;MAAEC,UAAU,EAAE;IAAY;EAAE,GACtEP,GACO,CACF,CACV,CAAC;AAAA,CACJ;;AAED;;AAEA,OAAO,MAAMQ,iBAAiB,GAC5BC,KAAoD,iBAEpD1B,KAAA,CAAAkB,aAAA,CAAChB,WAAW,EAAAyB,QAAA;EAACC,IAAI,eAAE5B,KAAA,CAAAkB,aAAA,CAACf,SAAS,MAAE,CAAE;EAAC0B,KAAK,EAAC;AAAe,GAAKH,KAAK,CAAG,CACrE;AAED,OAAO,MAAMI,cAAc,GAAGA,CAAA,kBAC5B9B,KAAA,CAAAkB,aAAA,CAAAlB,KAAA,CAAAmB,QAAA,qBACEnB,KAAA,CAAAkB,aAAA,CAACX,KAAK;EAACa,WAAW,EAAEX;AAAmB,gBACrCT,KAAA,CAAAkB,aAAA,CAACd,cAAc;EAACmB,KAAK,EAAE;IAAEQ,KAAK,EAAE,MAAM;IAAEC,MAAM,EAAE;EAAO;AAAE,CAAE,CACtD,CAAC,eACRhC,KAAA,CAAAkB,aAAA,CAACV,QAAQ;EAACc,IAAI,EAAC;AAAO,gBACpBtB,KAAA,CAAAkB,aAAA,CAACd,cAAc;EAACmB,KAAK,EAAE;IAAES,MAAM,EAAE,EAAE;IAAED,KAAK,EAAE;EAAM;AAAE,CAAE,CAAC,eACvD/B,KAAA,CAAAkB,aAAA,CAACd,cAAc;EAAC,kBAAU;EAACmB,KAAK,EAAE;IAAES,MAAM,EAAE,EAAE;IAAED,KAAK,EAAE;EAAG;AAAE,CAAE,CACtD,CACV,CACH","ignoreList":[]}

package/dist/esm/presentation/stackedCard/content/TaskCard.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactElement } from "react";
+export interface TaskCardProps {
+    title?: string;
+    /** Optional cover — task cards in a column usually have none. */
+    cover?: boolean;
+    playable?: boolean;
+    coverControls?: boolean;
+    /** Config-gated task-number prefix (mirrors `show_task_id`). */
+    showTaskId?: boolean;
+    taskId?: number;
+    dateLabel?: string;
+    /** Overdue date — colours the date red, but only when NOT completed. */
+    overdue?: boolean;
+    /** Dependency counter, gated behind a feature flag. */
+    showDependencies?: boolean;
+    dependencyCount?: number;
+    /** The task's hidden-from-clients flag. */
+    hiddenFromClients?: boolean;
+    /** The project default for client visibility; the signifier shows on a diff. */
+    projectDefaultHidden?: boolean;
+    /** Whether the task has an assignee (avatar) or shows the add affordance. */
+    assigned?: boolean;
+    /** Completed — teal tint, no "…" menu, no overdue colour. */
+    completed?: boolean;
+}
+export declare const TaskCard: ({ title, cover, playable, coverControls, showTaskId, taskId, dateLabel, overdue, showDependencies, dependencyCount, hiddenFromClients, projectDefaultHidden, assigned, completed, }: TaskCardProps) => ReactElement;
+export declare const TaskPlaceholder: (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => ReactElement;
+export declare const TaskSkeleton: () => ReactElement;
+//# sourceMappingURL=TaskCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskCard.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/stackedCard/content/TaskCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AA+I5C,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gFAAgF;IAChF,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,GAAI,qLAetB,aAAa,KAAG,YA+FlB,CAAC;AAIF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,KACnD,YAMF,CAAC;AAGF,eAAO,MAAM,YAAY,QAAO,YAiB/B,CAAC"}