@activecollab/components 2.0.363 → 2.0.365

package/dist/esm/presentation/shared/settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../../src/presentation/shared/settings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiFvD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,GAAI,uBAG5B,mBAAmB,KAAG,YAaxB,CAAC;AAMF,8EAA8E;AAC9E,eAAO,MAAM,eAAe,oEAM3B,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,gBAAgB;iBAA+B,OAAO;SAmBlE,CAAC;AAEF,eAAO,MAAM,OAAO,oEAwBnB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,GAAI,4DAMxB,eAAe,KAAG,YAqBpB,CAAC"}

package/dist/esm/presentation/shared/settings.js

@@ -0,0 +1,84 @@
+/**
+ * Shared building blocks for the System Settings presentation stories
+ * (`Presentation/System Settings/*`). The settings page header, the max-width
+ * body column and the "row" card (title + description on the left, a control on
+ * the right) are defined once here and reused by the Index, General and
+ * Security stories so the chrome stays identical and in one place.
+ *
+ * Mirrors the app: PageHeader.jsx + BackButton.js (header) and the repeated
+ * `Card variant="paper-2"` row pattern from the SystemSettings pages.
+ */
+import React from "react";
+import styled from "styled-components";
+import { MD, SM } from "./tokens";
+import { Card } from "../../components/Card";
+import { IconButton } from "../../components/IconButton";
+import { ArrowLeftIcon } from "../../components/Icons";
+import { Body2, Caption1, Header2, Title2 } from "../../components/Typography";
+
+/* ------------------------------------------------------------------ */
+/* Settings page header (mirrors PageHeader.jsx + BackButton.js)       */
+/* ------------------------------------------------------------------ */
+
+const StyledSettingsHeader = styled.div.withConfig({
+  displayName: "settings__StyledSettingsHeader",
+  componentId: "sc-1el9eq3-0"
+})(["display:flex;align-items:center;justify-content:space-between;margin:12px 0;width:100%;height:40px;flex-shrink:0;.header-left{display:flex;align-items:center;width:100%;max-width:100%;@media (min-width:", "){min-width:0;}}.back-button{flex-shrink:0;margin-right:4px;@media (min-width:", "){margin-right:8px;}}.page-title-desktop{display:none;margin-right:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;@media (min-width:", "){display:block;}}.page-title-mobile{display:block;margin-right:8px;font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;@media (min-width:", "){display:none;}}.page-header-spacer{display:none;height:100%;width:208px;flex-shrink:0;@media (min-width:", "){display:flex;}}"], SM, MD, MD, MD, SM);
+export const SettingsHeader = _ref => {
+  let title = _ref.title,
+    backTitle = _ref.backTitle;
+  return /*#__PURE__*/React.createElement(StyledSettingsHeader, null, /*#__PURE__*/React.createElement("div", {
+    className: "header-left"
+  }, backTitle ? /*#__PURE__*/React.createElement(IconButton, {
+    variant: "text gray",
+    className: "back-button"
+  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, null)) : null, /*#__PURE__*/React.createElement(Title2, {
+    className: "page-title-desktop"
+  }, title), /*#__PURE__*/React.createElement(Header2, {
+    className: "page-title-mobile"
+  }, title)), /*#__PURE__*/React.createElement("div", {
+    className: "page-header-spacer"
+  }));
+};
+
+/* ------------------------------------------------------------------ */
+/* Shared layout pieces                                                */
+/* ------------------------------------------------------------------ */
+
+/** The page body, max-width 850px and left-aligned (mirrors the app Page). */
+export const SettingsContent = styled.div.withConfig({
+  displayName: "settings__SettingsContent",
+  componentId: "sc-1el9eq3-1"
+})(["display:flex;flex-direction:column;flex-grow:1;width:100%;max-width:850px;"]);
+
+/** A settings row card: title + description on the left, control on the right. */
+export const StyledSettingRow = styled(Card).withConfig({
+  displayName: "settings__StyledSettingRow",
+  componentId: "sc-1el9eq3-2"
+})(["box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:12px 16px 12px 20px;margin-bottom:4px;", ""], _ref2 => {
+  let $clickable = _ref2.$clickable;
+  return $clickable ? "\n    cursor: pointer;\n\n    &:hover {\n      background-color: var(--color-theme-200);\n    }\n  " : "";
+});
+export const RowText = styled.div.withConfig({
+  displayName: "settings__RowText",
+  componentId: "sc-1el9eq3-3"
+})(["display:flex;flex-direction:column;flex:1 1 0%;min-width:0;padding-right:12px;.row-title{margin-bottom:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.row-description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.row-description-wrap{white-space:normal;}"]);
+export const SettingRow = _ref3 => {
+  let title = _ref3.title,
+    description = _ref3.description,
+    control = _ref3.control,
+    onClick = _ref3.onClick,
+    _ref3$wrapDescription = _ref3.wrapDescription,
+    wrapDescription = _ref3$wrapDescription === void 0 ? false : _ref3$wrapDescription;
+  return /*#__PURE__*/React.createElement(StyledSettingRow, {
+    variant: "paper-2",
+    $clickable: Boolean(onClick),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(RowText, null, /*#__PURE__*/React.createElement(Body2, {
+    className: "row-title"
+  }, title), description ? /*#__PURE__*/React.createElement(Caption1, {
+    className: wrapDescription ? "row-description-wrap" : "row-description",
+    color: "tertiary"
+  }, description) : null), control);
+};
+//# sourceMappingURL=settings.js.map

package/dist/esm/presentation/shared/settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.js","names":["React","styled","MD","SM","Card","IconButton","ArrowLeftIcon","Body2","Caption1","Header2","Title2","StyledSettingsHeader","div","withConfig","displayName","componentId","SettingsHeader","_ref","title","backTitle","createElement","className","variant","SettingsContent","StyledSettingRow","_ref2","$clickable","RowText","SettingRow","_ref3","description","control","onClick","_ref3$wrapDescription","wrapDescription","Boolean","color"],"sources":["../../../../src/presentation/shared/settings.tsx"],"sourcesContent":["/**\n * Shared building blocks for the System Settings presentation stories\n * (`Presentation/System Settings/*`). The settings page header, the max-width\n * body column and the \"row\" card (title + description on the left, a control on\n * the right) are defined once here and reused by the Index, General and\n * Security stories so the chrome stays identical and in one place.\n *\n * Mirrors the app: PageHeader.jsx + BackButton.js (header) and the repeated\n * `Card variant=\"paper-2\"` row pattern from the SystemSettings pages.\n */\nimport React, { ReactElement, ReactNode } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { MD, SM } from \"./tokens\";\nimport { Card } from \"../../components/Card\";\nimport { IconButton } from \"../../components/IconButton\";\nimport { ArrowLeftIcon } from \"../../components/Icons\";\nimport { Body2, Caption1, Header2, Title2 } from \"../../components/Typography\";\n\n/* ------------------------------------------------------------------ */\n/* Settings page header (mirrors PageHeader.jsx + BackButton.js)       */\n/* ------------------------------------------------------------------ */\n\nconst StyledSettingsHeader = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 12px 0;\n  width: 100%;\n  height: 40px;\n  flex-shrink: 0;\n\n  .header-left {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    max-width: 100%;\n\n    @media (min-width: ${SM}) {\n      min-width: 0;\n    }\n  }\n\n  .back-button {\n    flex-shrink: 0;\n    margin-right: 4px;\n\n    @media (min-width: ${MD}) {\n      margin-right: 8px;\n    }\n  }\n\n  .page-title-desktop {\n    display: none;\n    margin-right: 8px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n\n    @media (min-width: ${MD}) {\n      display: block;\n    }\n  }\n\n  .page-title-mobile {\n    display: block;\n    margin-right: 8px;\n    font-weight: 300;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    @media (min-width: ${MD}) {\n      display: none;\n    }\n  }\n\n  /* keeps the title clear of the absolutely-positioned top-right controls */\n  .page-header-spacer {\n    display: none;\n    height: 100%;\n    width: 208px;\n    flex-shrink: 0;\n\n    @media (min-width: ${SM}) {\n      display: flex;\n    }\n  }\n`;\n\nexport interface SettingsHeaderProps {\n  title: string;\n  backTitle?: string;\n}\n\nexport const SettingsHeader = ({\n  title,\n  backTitle,\n}: SettingsHeaderProps): ReactElement => (\n  <StyledSettingsHeader>\n    <div className=\"header-left\">\n      {backTitle ? (\n        <IconButton variant=\"text gray\" className=\"back-button\">\n          <ArrowLeftIcon />\n        </IconButton>\n      ) : null}\n      <Title2 className=\"page-title-desktop\">{title}</Title2>\n      <Header2 className=\"page-title-mobile\">{title}</Header2>\n    </div>\n    <div className=\"page-header-spacer\" />\n  </StyledSettingsHeader>\n);\n\n/* ------------------------------------------------------------------ */\n/* Shared layout pieces                                                */\n/* ------------------------------------------------------------------ */\n\n/** The page body, max-width 850px and left-aligned (mirrors the app Page). */\nexport const SettingsContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  width: 100%;\n  max-width: 850px;\n`;\n\n/** A settings row card: title + description on the left, control on the right. */\nexport const StyledSettingRow = styled(Card)<{ $clickable?: boolean }>`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 68px;\n  padding: 12px 16px 12px 20px;\n  margin-bottom: 4px;\n\n  ${({ $clickable }) =>\n    $clickable\n      ? `\n    cursor: pointer;\n\n    &:hover {\n      background-color: var(--color-theme-200);\n    }\n  `\n      : \"\"}\n`;\n\nexport const RowText = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0%;\n  min-width: 0;\n  padding-right: 12px;\n\n  .row-title {\n    margin-bottom: 2px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  .row-description {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  /* Long descriptions that are allowed to wrap onto multiple lines. */\n  .row-description-wrap {\n    white-space: normal;\n  }\n`;\n\nexport interface SettingRowProps {\n  title: string;\n  description?: ReactNode;\n  control?: ReactNode;\n  onClick?: () => void;\n  /** Let a long description wrap onto multiple lines instead of truncating. */\n  wrapDescription?: boolean;\n}\n\nexport const SettingRow = ({\n  title,\n  description,\n  control,\n  onClick,\n  wrapDescription = false,\n}: SettingRowProps): ReactElement => (\n  <StyledSettingRow\n    variant=\"paper-2\"\n    $clickable={Boolean(onClick)}\n    onClick={onClick}\n  >\n    <RowText>\n      <Body2 className=\"row-title\">{title}</Body2>\n      {description ? (\n        <Caption1\n          className={\n            wrapDescription ? \"row-description-wrap\" : \"row-description\"\n          }\n          color=\"tertiary\"\n        >\n          {description}\n        </Caption1>\n      ) : null}\n    </RowText>\n    {control}\n  </StyledSettingRow>\n);\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,15 @@
+import React, { ReactElement } from "react";
+/**
+ * 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.
+ */
+export interface ImageCardProps {
+    color?: string;
+    src?: string;
+}
+export declare const ImageCard: ({ color, src, }: ImageCardProps) => ReactElement;
+export declare const ImagePlaceholder: (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => ReactElement;
+export declare const ImageSkeleton: () => ReactElement;
+//# sourceMappingURL=ImageCard.d.ts.map

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

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

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

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from "react";
+import { StyledColorCover, coverManagement, Placeholder } from "./shared";
+import { UploadIcon } from "../../../components/Icons";
+import { SkeletonLoader } from "../../../components/Loaders";
+import { Cover } from "../primitives";
+import { COVER_RATIO_IMAGE } from "../shell";
+
+/**
+ * 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.
+ */
+
+export const ImageCard = _ref => {
+  let _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#F0997B" : _ref$color,
+    src = _ref.src;
+  return /*#__PURE__*/React.createElement(Cover, {
+    aspectRatio: COVER_RATIO_IMAGE,
+    topRightSlot: coverManagement({
+      removeLabel: "Remove image"
+    })
+  }, src ? /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: ""
+  }) : /*#__PURE__*/React.createElement(StyledColorCover, {
+    $color: color
+  }));
+};
+
+/* ---- placeholder + skeleton ---- */
+
+/* The placeholder doubles as the drop target (visual only here). */
+export const ImagePlaceholder = props => /*#__PURE__*/React.createElement(Placeholder, _extends({
+  icon: /*#__PURE__*/React.createElement(UploadIcon, null),
+  label: "Drop an image or click to upload",
+  height: 168,
+  dashed: true
+}, props));
+export const ImageSkeleton = () => /*#__PURE__*/React.createElement(Cover, {
+  aspectRatio: COVER_RATIO_IMAGE
+}, /*#__PURE__*/React.createElement(SkeletonLoader, {
+  style: {
+    width: "100%",
+    height: "100%"
+  }
+}));
+//# sourceMappingURL=ImageCard.js.map

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

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

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

@@ -0,0 +1,28 @@
+import React, { ReactElement } from "react";
+import { UnfurlController } from "./unfurl";
+/**
+ * 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.
+ */
+export type LinkDisplay = "compact" | "expanded";
+export interface LinkCardProps {
+    unfurl: UnfurlController;
+    display?: LinkDisplay;
+    onToggleDisplay?: () => void;
+}
+export declare const LinkCard: ({ unfurl, display, onToggleDisplay, }: LinkCardProps) => ReactElement;
+export declare const LinkSkeleton: () => ReactElement;
+export declare const LinkPlaceholder: (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => ReactElement;
+//# sourceMappingURL=LinkCard.d.ts.map

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

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

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"}