@activecollab/components 2.0.363 → 2.0.364

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

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageSkeleton = exports.ImagePlaceholder = exports.ImageCard = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _shared = require("./shared");
+var _Icons = require("../../../components/Icons");
+var _Loaders = require("../../../components/Loaders");
+var _primitives = require("../primitives");
+var _shell = require("../shell");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * ImageCard — a full-bleed image and little else. Cover-management controls
+ * (collapse, remove) appear on hover; there is no other chrome. Fixed-box in
+ * production (host sets width AND height, the cover scales aspect-locked); shown
+ * here in the auto-height shell with a reserved image aspect ratio.
+ */
+
+var ImageCard = exports.ImageCard = function ImageCard(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#F0997B" : _ref$color,
+    src = _ref.src;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Cover, {
+    aspectRatio: _shell.COVER_RATIO_IMAGE,
+    topRightSlot: (0, _shared.coverManagement)({
+      removeLabel: "Remove image"
+    })
+  }, src ? /*#__PURE__*/_react.default.createElement("img", {
+    src: src,
+    alt: ""
+  }) : /*#__PURE__*/_react.default.createElement(_shared.StyledColorCover, {
+    $color: color
+  }));
+};
+
+/* ---- placeholder + skeleton ---- */
+
+/* The placeholder doubles as the drop target (visual only here). */
+var ImagePlaceholder = exports.ImagePlaceholder = function ImagePlaceholder(props) {
+  return /*#__PURE__*/_react.default.createElement(_shared.Placeholder, _extends({
+    icon: /*#__PURE__*/_react.default.createElement(_Icons.UploadIcon, null),
+    label: "Drop an image or click to upload",
+    height: 168,
+    dashed: true
+  }, props));
+};
+var ImageSkeleton = exports.ImageSkeleton = function ImageSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Cover, {
+    aspectRatio: _shell.COVER_RATIO_IMAGE
+  }, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  }));
+};
+//# sourceMappingURL=ImageCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCard.js","names":["_react","_interopRequireDefault","require","_shared","_Icons","_Loaders","_primitives","_shell","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","ImageCard","exports","_ref","_ref$color","color","src","createElement","Cover","aspectRatio","COVER_RATIO_IMAGE","topRightSlot","coverManagement","removeLabel","alt","StyledColorCover","$color","ImagePlaceholder","props","Placeholder","icon","UploadIcon","label","height","dashed","ImageSkeleton","SkeletonLoader","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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAA6C,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,SAAA,WAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,CAAA,aAAAP,CAAA,MAAAA,CAAA,GAAAQ,SAAA,CAAAC,MAAA,EAAAT,CAAA,UAAAU,CAAA,GAAAF,SAAA,CAAAR,CAAA,YAAAW,CAAA,IAAAD,CAAA,OAAAE,cAAA,CAAAC,IAAA,CAAAH,CAAA,EAAAC,CAAA,MAAAJ,CAAA,CAAAI,CAAA,IAAAD,CAAA,CAAAC,CAAA,aAAAJ,CAAA,KAAAJ,QAAA,CAAAW,KAAA,OAAAN,SAAA;AAE7C;AACA;AACA;AACA;AACA;AACA;;AAOO,IAAMO,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAAE,IAAA;EAAA,IAAAC,UAAA,GAAAD,IAAA,CACpBE,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,SAAS,GAAAA,UAAA;IACjBE,GAAG,GAAAH,IAAA,CAAHG,GAAG;EAAA,oBAEH5B,MAAA,CAAAU,OAAA,CAAAmB,aAAA,CAACvB,WAAA,CAAAwB,KAAK;IACJC,WAAW,EAAEC,wBAAkB;IAC/BC,YAAY,EAAE,IAAAC,uBAAe,EAAC;MAAEC,WAAW,EAAE;IAAe,CAAC;EAAE,GAE9DP,GAAG,gBAAG5B,MAAA,CAAAU,OAAA,CAAAmB,aAAA;IAAKD,GAAG,EAAEA,GAAI;IAACQ,GAAG,EAAC;EAAE,CAAE,CAAC,gBAAGpC,MAAA,CAAAU,OAAA,CAAAmB,aAAA,CAAC1B,OAAA,CAAAkC,gBAAgB;IAACC,MAAM,EAAEX;EAAM,CAAE,CAC/D,CAAC;AAAA,CACT;;AAED;;AAEA;AACO,IAAMY,gBAAgB,GAAAf,OAAA,CAAAe,gBAAA,GAAG,SAAnBA,gBAAgBA,CAC3BC,KAAoD;EAAA,oBAEpDxC,MAAA,CAAAU,OAAA,CAAAmB,aAAA,CAAC1B,OAAA,CAAAsC,WAAW,EAAA9B,QAAA;IACV+B,IAAI,eAAE1C,MAAA,CAAAU,OAAA,CAAAmB,aAAA,CAACzB,MAAA,CAAAuC,UAAU,MAAE,CAAE;IACrBC,KAAK,EAAC,kCAAkC;IACxCC,MAAM,EAAE,GAAI;IACZC,MAAM;EAAA,GACFN,KAAK,CACV,CAAC;AAAA,CACH;AAEM,IAAMO,aAAa,GAAAvB,OAAA,CAAAuB,aAAA,GAAG,SAAhBA,aAAaA,CAAA;EAAA,oBACxB/C,MAAA,CAAAU,OAAA,CAAAmB,aAAA,CAACvB,WAAA,CAAAwB,KAAK;IAACC,WAAW,EAAEC;EAAkB,gBACpChC,MAAA,CAAAU,OAAA,CAAAmB,aAAA,CAACxB,QAAA,CAAA2C,cAAc;IAACC,KAAK,EAAE;MAAEC,KAAK,EAAE,MAAM;MAAEL,MAAM,EAAE;IAAO;EAAE,CAAE,CACtD,CAAC;AAAA,CACT","ignoreList":[]}

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

@@ -0,0 +1,348 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkSkeleton = exports.LinkPlaceholder = exports.LinkCard = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _shared = require("./shared");
+var _unfurl = require("./unfurl");
+var _Icons = require("../../../components/Icons");
+var _Loaders = require("../../../components/Loaders");
+var _Typography = require("../../../components/Typography");
+var _Typography2 = require("../../../components/Typography/Typography");
+var _primitives = require("../primitives");
+var _shell = require("../shell");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * 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                                               */
+/* ------------------------------------------------------------------ */
+
+var StyledDomainRow = _styledComponents.default.div.withConfig({
+  displayName: "LinkCard__StyledDomainRow",
+  componentId: "sc-qyea73-0"
+})(["display:flex;align-items:center;gap:8px;min-height:16px;"]);
+var StyledChips = _styledComponents.default.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. */
+var StyledStaleStrip = _styledComponents.default.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;}"]);
+var StyledReunfurl = _styledComponents.default.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). */
+var StyledErrorBody = _styledComponents.default.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;}"]);
+var StyledRetry = _styledComponents.default.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. */
+var StyledFooterTitle = (0, _styledComponents.default)(_Typography.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             */
+/* ------------------------------------------------------------------ */
+
+var StyledDisplayToggle = _styledComponents.default.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);}"]);
+var DisplayToggle = function DisplayToggle(_ref) {
+  var display = _ref.display,
+    onToggle = _ref.onToggle;
+  return /*#__PURE__*/_react.default.createElement(StyledDisplayToggle, {
+    type: "button",
+    "data-fixed": true,
+    className: "sc-control",
+    "aria-label": "Switch display level",
+    onClick: onToggle
+  }, display === "compact" ? "Expand ▾" : "Compact ▴");
+};
+
+/* ------------------------------------------------------------------ */
+/* LinkCard                                                            */
+/* ------------------------------------------------------------------ */
+
+var LinkCard = exports.LinkCard = function LinkCard(_ref2) {
+  var _data$heroColor2, _data$faviconColor2;
+  var unfurl = _ref2.unfurl,
+    _ref2$display = _ref2.display,
+    display = _ref2$display === void 0 ? "compact" : _ref2$display,
+    onToggleDisplay = _ref2.onToggleDisplay;
+  var 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.default.createElement(StyledErrorBody, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "err-head"
+    }, /*#__PURE__*/_react.default.createElement(_Icons.WarningTriangleIcon, null), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+      weight: "bold",
+      color: "tertiary"
+    }, "Couldn\u2019t load a preview")), /*#__PURE__*/_react.default.createElement("div", {
+      className: "err-url"
+    }, /*#__PURE__*/_react.default.createElement(_shared.StyledFavicon, {
+      $bg: "var(--color-theme-400)",
+      "data-fixed": true
+    }), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+      color: "secondary"
+    }, data.url)), /*#__PURE__*/_react.default.createElement(StyledRetry, {
+      type: "button",
+      onClick: retry
+    }, /*#__PURE__*/_react.default.createElement(_Icons.ArrowRefreshIcon, null), /*#__PURE__*/_react.default.createElement(_Typography2.Typography, {
+      as: "span",
+      variant: "Caption 1"
+    }, "Retry")));
+  }
+  var hasBasic = tier === "basic" || tier === "full";
+  var hasFull = tier === "full";
+  var toggle = onToggleDisplay !== null && onToggleDisplay !== void 0 ? onToggleDisplay : function () {
+    return undefined;
+  };
+
+  // ── Expanded: hero + tinted footer band (title + domain) ────────
+  if (display === "expanded") {
+    var _data$heroColor, _data$faviconColor;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Cover, {
+      aspectRatio: _shell.COVER_RATIO_HERO,
+      centerSlot: hasFull && data.playable ? _shared.playControl : undefined,
+      topRightSlot: (0, _shared.coverManagement)()
+    }, hasFull ? /*#__PURE__*/_react.default.createElement(_shared.StyledColorCover, {
+      $color: (_data$heroColor = data.heroColor) !== null && _data$heroColor !== void 0 ? _data$heroColor : "#1D9E75"
+    }) : /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    })), /*#__PURE__*/_react.default.createElement(_primitives.StackRow, {
+      role: "footer",
+      direction: "column",
+      background: "var(--color-theme-200)"
+    }, /*#__PURE__*/_react.default.createElement(StyledDomainRow, null, hasBasic ? /*#__PURE__*/_react.default.createElement(_shared.StyledFavicon, {
+      $bg: (_data$faviconColor = data.faviconColor) !== null && _data$faviconColor !== void 0 ? _data$faviconColor : "#0F6E56",
+      "data-fixed": true
+    }) : /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+      "data-fixed": true,
+      style: {
+        width: 16,
+        height: 16,
+        borderRadius: 4
+      }
+    }), hasBasic ? /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+      color: "tertiary"
+    }, data.domain) : /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+      color: "tertiary"
+    }, data.url), /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        flex: "1 1 auto"
+      }
+    }), /*#__PURE__*/_react.default.createElement(DisplayToggle, {
+      display: display,
+      onToggle: toggle
+    })), hasBasic ? /*#__PURE__*/_react.default.createElement(StyledFooterTitle, {
+      weight: "bold"
+    }, data.title) : /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+      style: {
+        height: 14,
+        width: "90%"
+      }
+    }), hasFull ? /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+      color: "tertiary"
+    }, data.description) : /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+      style: {
+        height: 10,
+        width: "70%"
+      }
+    })), status === "stale" ? /*#__PURE__*/_react.default.createElement(_primitives.StackRow, {
+      role: "meta"
+    }, /*#__PURE__*/_react.default.createElement(StaleStrip, {
+      fetchedAt: fetchedAt,
+      onReunfurl: reunfurl
+    })) : null);
+  }
+
+  // ── Compact: cover + favicon/domain + title + chips ─────────────
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Cover, {
+    aspectRatio: _shell.COVER_RATIO,
+    centerSlot: hasFull && data.playable ? _shared.playControl : undefined
+  }, hasFull ? /*#__PURE__*/_react.default.createElement(_shared.StyledColorCover, {
+    $color: (_data$heroColor2 = data.heroColor) !== null && _data$heroColor2 !== void 0 ? _data$heroColor2 : "#1D9E75"
+  }) : /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  })), /*#__PURE__*/_react.default.createElement(_primitives.StackRow, {
+    role: "custom"
+  }, /*#__PURE__*/_react.default.createElement(StyledDomainRow, null, hasBasic ? /*#__PURE__*/_react.default.createElement(_shared.StyledFavicon, {
+    $bg: (_data$faviconColor2 = data.faviconColor) !== null && _data$faviconColor2 !== void 0 ? _data$faviconColor2 : "#0F6E56",
+    "data-fixed": true
+  }) : /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    "data-fixed": true,
+    style: {
+      width: 16,
+      height: 16,
+      borderRadius: 4
+    }
+  }), hasBasic ? /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    color: "tertiary"
+  }, data.domain) : /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    color: "tertiary"
+  }, data.url), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      flex: "1 1 auto"
+    }
+  }), /*#__PURE__*/_react.default.createElement(DisplayToggle, {
+    display: display,
+    onToggle: toggle
+  }))), /*#__PURE__*/_react.default.createElement(_primitives.StackRow, {
+    role: "title"
+  }, hasBasic ? /*#__PURE__*/_react.default.createElement(_shared.StyledClamp, null, data.title) : /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      height: 14,
+      width: "92%"
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      height: 14,
+      width: "60%",
+      marginTop: 6
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_primitives.StackRow, {
+    role: "custom"
+  }, /*#__PURE__*/_react.default.createElement(StyledChips, null, hasFull ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.kind ? /*#__PURE__*/_react.default.createElement(_shared.StyledChip, {
+    "data-fixed": true
+  }, data.kind) : null, data.duration ? /*#__PURE__*/_react.default.createElement(_shared.StyledChip, {
+    "data-fixed": true
+  }, data.duration) : null) : /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      height: 18,
+      width: 96,
+      borderRadius: 10
+    }
+  }))), status === "stale" ? /*#__PURE__*/_react.default.createElement(_primitives.StackRow, {
+    role: "meta"
+  }, /*#__PURE__*/_react.default.createElement(StaleStrip, {
+    fetchedAt: fetchedAt,
+    onReunfurl: reunfurl
+  })) : null);
+};
+
+/* The stale affordance — fetch time + a manual re-unfurl button. */
+var StaleStrip = function StaleStrip(_ref3) {
+  var fetchedAt = _ref3.fetchedAt,
+    onReunfurl = _ref3.onReunfurl;
+  return /*#__PURE__*/_react.default.createElement(StyledStaleStrip, null, /*#__PURE__*/_react.default.createElement(_Typography2.Typography, {
+    as: "span",
+    variant: "Caption 1",
+    color: "tertiary"
+  }, "Preview may be out of date \xB7 fetched ", (0, _unfurl.formatFetchedAt)(fetchedAt)), /*#__PURE__*/_react.default.createElement(StyledReunfurl, {
+    type: "button",
+    onClick: onReunfurl
+  }, /*#__PURE__*/_react.default.createElement(_Icons.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. */
+var LinkSkeleton = exports.LinkSkeleton = function LinkSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Cover, {
+    aspectRatio: _shell.COVER_RATIO
+  }, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      width: "100%",
+      height: "100%"
+    }
+  })), /*#__PURE__*/_react.default.createElement(_primitives.StackRow, {
+    role: "custom"
+  }, /*#__PURE__*/_react.default.createElement(StyledDomainRow, null, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    "data-fixed": true,
+    style: {
+      width: 16,
+      height: 16,
+      borderRadius: 4
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      height: 10,
+      width: "40%"
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_primitives.StackRow, {
+    role: "title"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      height: 14,
+      width: "92%"
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      height: 14,
+      width: "60%",
+      marginTop: 6
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_primitives.StackRow, {
+    role: "custom"
+  }, /*#__PURE__*/_react.default.createElement(StyledChips, null, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      height: 18,
+      width: 96,
+      borderRadius: 10
+    }
+  }))));
+};
+
+/* ---- placeholder ---- */
+
+var LinkPlaceholder = exports.LinkPlaceholder = function LinkPlaceholder(props) {
+  return /*#__PURE__*/_react.default.createElement(_shared.Placeholder, _extends({
+    icon: /*#__PURE__*/_react.default.createElement(_Icons.InsertLinkIcon, null),
+    label: "Add a link"
+  }, props));
+};
+//# sourceMappingURL=LinkCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkCard.js","names":["_react","_interopRequireDefault","require","_styledComponents","_shared","_unfurl","_Icons","_Loaders","_Typography","_Typography2","_primitives","_shell","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","StyledDomainRow","styled","div","withConfig","displayName","componentId","StyledChips","StyledStaleStrip","StyledReunfurl","button","StyledErrorBody","StyledRetry","StyledFooterTitle","Body2","StyledDisplayToggle","DisplayToggle","_ref","display","onToggle","createElement","type","className","onClick","LinkCard","exports","_ref2","_data$heroColor2","_data$faviconColor2","unfurl","_ref2$display","onToggleDisplay","status","tier","data","fetchedAt","retry","reunfurl","WarningTriangleIcon","Caption1","weight","color","StyledFavicon","$bg","url","ArrowRefreshIcon","Typography","as","variant","hasBasic","hasFull","toggle","undefined","_data$heroColor","_data$faviconColor","Fragment","Cover","aspectRatio","COVER_RATIO_HERO","centerSlot","playable","playControl","topRightSlot","coverManagement","StyledColorCover","$color","heroColor","SkeletonLoader","style","width","height","StackRow","role","direction","background","faviconColor","borderRadius","domain","flex","title","description","StaleStrip","onReunfurl","COVER_RATIO","StyledClamp","marginTop","kind","StyledChip","duration","_ref3","formatFetchedAt","LinkSkeleton","LinkPlaceholder","props","Placeholder","icon","InsertLinkIcon","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/cjs/presentation/stackedCard/content/NoteCard.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SAMPLE_NOTE = exports.NoteSkeleton = exports.NotePlaceholder = exports.NoteCard = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _shared = require("./shared");
+var _Icons = require("../../../components/Icons");
+var _Loaders = require("../../../components/Loaders");
+var _Typography = require("../../../components/Typography");
+var _primitives = require("../primitives");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * 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. */
+var StyledNoteBody = (0, _styledComponents.default)(_Typography.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);"]);
+var SAMPLE_NOTE = exports.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?";
+var NoteCard = exports.NoteCard = function NoteCard(_ref) {
+  var _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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.StackRow, {
+    role: "title"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    weight: "bold"
+  }, title), /*#__PURE__*/_react.default.createElement(_shared.EntityDots, {
+    "aria-label": "Note options"
+  })), /*#__PURE__*/_react.default.createElement(_primitives.StackRow, {
+    role: "custom",
+    direction: "column"
+  }, /*#__PURE__*/_react.default.createElement(StyledNoteBody, {
+    color: "secondary"
+  }, body)));
+};
+
+/* ---- placeholder + skeleton ---- */
+
+var NotePlaceholder = exports.NotePlaceholder = function NotePlaceholder(props) {
+  return /*#__PURE__*/_react.default.createElement(_shared.Placeholder, _extends({
+    icon: /*#__PURE__*/_react.default.createElement(_Icons.NoteIcon, null),
+    label: "Write a note"
+  }, props));
+};
+
+/* Skeleton mirrors the note anatomy: a title line, then several body lines. */
+var NoteSkeleton = exports.NoteSkeleton = function NoteSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.StackRow, {
+    role: "title"
+  }, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      height: 14,
+      width: "50%"
+    }
+  })), /*#__PURE__*/_react.default.createElement(_primitives.StackRow, {
+    role: "custom",
+    direction: "column"
+  }, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      height: 10,
+      width: "100%"
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      height: 10,
+      width: "96%"
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      height: 10,
+      width: "88%"
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
+    style: {
+      height: 10,
+      width: "70%"
+    }
+  })));
+};
+//# sourceMappingURL=NoteCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NoteCard.js","names":["_react","_interopRequireDefault","require","_styledComponents","_shared","_Icons","_Loaders","_Typography","_primitives","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","StyledNoteBody","styled","Body2","withConfig","displayName","componentId","SAMPLE_NOTE","exports","NoteCard","_ref","_ref$title","title","_ref$body","body","createElement","Fragment","StackRow","role","weight","EntityDots","direction","color","NotePlaceholder","props","Placeholder","icon","NoteIcon","label","NoteSkeleton","SkeletonLoader","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":"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","ignoreList":[]}