@activecollab/components 2.0.363 → 2.0.365

package/dist/cjs/presentation/shared/index.js

@@ -36,7 +36,12 @@ var _exportNames = {
   UserMenu: true,
   TwoFactorShield: true,
   BackupCodesDialogs: true,
-  CreateLoginCodeDialogs: true
+  CreateLoginCodeDialogs: true,
+  SettingsHeader: true,
+  SettingsContent: true,
+  StyledSettingRow: true,
+  RowText: true,
+  SettingRow: true
 };
 Object.defineProperty(exports, "BackupCodesDialogs", {
   enumerable: true,
@@ -158,6 +163,30 @@ Object.defineProperty(exports, "RoundAvatar", {
     return _RoundAvatar.RoundAvatar;
   }
 });
+Object.defineProperty(exports, "RowText", {
+  enumerable: true,
+  get: function get() {
+    return _settings.RowText;
+  }
+});
+Object.defineProperty(exports, "SettingRow", {
+  enumerable: true,
+  get: function get() {
+    return _settings.SettingRow;
+  }
+});
+Object.defineProperty(exports, "SettingsContent", {
+  enumerable: true,
+  get: function get() {
+    return _settings.SettingsContent;
+  }
+});
+Object.defineProperty(exports, "SettingsHeader", {
+  enumerable: true,
+  get: function get() {
+    return _settings.SettingsHeader;
+  }
+});
 Object.defineProperty(exports, "SourceCodeSection", {
   enumerable: true,
   get: function get() {
@@ -176,6 +205,12 @@ Object.defineProperty(exports, "StyledPagePaper", {
     return _PresentationShell.StyledPagePaper;
   }
 });
+Object.defineProperty(exports, "StyledSettingRow", {
+  enumerable: true,
+  get: function get() {
+    return _settings.StyledSettingRow;
+  }
+});
 Object.defineProperty(exports, "SuggestSubtasksButton", {
   enumerable: true,
   get: function get() {
@@ -264,4 +299,5 @@ var _TaskOptionsMenu = require("./TaskOptionsMenu");
 var _UserMenu = require("./UserMenu");
 var _TwoFactorShield = require("./TwoFactorShield");
 var _TwoFactorDialogs = require("./TwoFactorDialogs");
+var _settings = require("./settings");
 //# sourceMappingURL=index.js.map

package/dist/cjs/presentation/shared/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_tokens","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_MainLogo","_RoundAvatar","_PresentationShell","_headers","_FloatingControls","_HelpAndSupportMenu","_LinkingCommandsButton","_LinkBranchOrPullRequestDialog","_ConnectRepositoryDialog","_WebhookLogsDialog","_SourceCodeSection","_SuggestSubtasksButton","_TaskOptionsMenu","_UserMenu","_TwoFactorShield","_TwoFactorDialogs"],"sources":["../../../../src/presentation/shared/index.ts"],"sourcesContent":["/**\n * Shared building blocks for the Presentation mock-ups (`Presentation/*`\n * stories). The application shell, page headers, tab bar and small widgets are\n * defined once here and reused by the List view, Column view, Task sheet and\n * empty-page stories so the chrome stays identical and in one place.\n */\nexport * from \"./tokens\";\nexport { MainLogo } from \"./MainLogo\";\nexport { RoundAvatar } from \"./RoundAvatar\";\nexport { PresentationShell, StyledPagePaper } from \"./PresentationShell\";\nexport type { PresentationShellProps } from \"./PresentationShell\";\nexport { PageHeader, ProjectPageHeader, TabHeader } from \"./headers\";\nexport type {\n  PageHeaderProps,\n  ProjectPageHeaderProps,\n  TabHeaderProps,\n} from \"./headers\";\nexport { FloatingControls } from \"./FloatingControls\";\nexport { HelpAndSupportMenu } from \"./HelpAndSupportMenu\";\nexport type { HelpAndSupportMenuProps } from \"./HelpAndSupportMenu\";\nexport { LinkingCommandsButton } from \"./LinkingCommandsButton\";\nexport { LinkBranchOrPullRequestDialog } from \"./LinkBranchOrPullRequestDialog\";\nexport type { LinkBranchOrPullRequestDialogProps } from \"./LinkBranchOrPullRequestDialog\";\nexport {\n  ConnectRepositoryDialog,\n  RepositorySelect,\n  buildRepoOptions,\n  CONNECTIONS,\n  PROJECT_REPOSITORIES,\n  CONNECTABLE_REPOSITORIES,\n} from \"./ConnectRepositoryDialog\";\nexport type {\n  ConnectRepositoryDialogProps,\n  RepositorySelectProps,\n  Connection,\n  ConnectionService,\n  Repository,\n} from \"./ConnectRepositoryDialog\";\nexport {\n  WebhookLogsDialog,\n  WEBHOOK_CONNECTIONS,\n  WEBHOOK_REPOSITORIES,\n} from \"./WebhookLogsDialog\";\nexport type {\n  WebhookLogsDialogProps,\n  WebhookConnection,\n  WebhookRepository,\n  WebhookLog,\n} from \"./WebhookLogsDialog\";\nexport {\n  SourceCodeSection,\n  IssueRow,\n  CodeRow,\n  Spine,\n  HistoryDialog,\n  CompletedHeader,\n} from \"./SourceCodeSection\";\nexport type {\n  IssueEntry,\n  CodeEntry,\n  Stage,\n  HistoryEvent,\n  StageState,\n  CodeStatus,\n  SectionVariant,\n} from \"./SourceCodeSection\";\nexport { SuggestSubtasksButton } from \"./SuggestSubtasksButton\";\nexport { TaskOptionsMenu, TaskListOptionsMenu } from \"./TaskOptionsMenu\";\nexport type {\n  TaskOptionsMenuProps,\n  TaskListOptionsMenuProps,\n} from \"./TaskOptionsMenu\";\nexport { UserMenu } from \"./UserMenu\";\nexport type { UserMenuProps, UserMenuVariant } from \"./UserMenu\";\nexport { TwoFactorShield } from \"./TwoFactorShield\";\nexport type { TwoFactorShieldProps } from \"./TwoFactorShield\";\nexport { BackupCodesDialogs, CreateLoginCodeDialogs } from \"./TwoFactorDialogs\";\nexport type {\n  BackupCodesDialogsProps,\n  CreateLoginCodeDialogsProps,\n} from \"./TwoFactorDialogs\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAb,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,SAAA,GAAAb,OAAA;AACA,IAAAc,YAAA,GAAAd,OAAA;AACA,IAAAe,kBAAA,GAAAf,OAAA;AAEA,IAAAgB,QAAA,GAAAhB,OAAA;AAMA,IAAAiB,iBAAA,GAAAjB,OAAA;AACA,IAAAkB,mBAAA,GAAAlB,OAAA;AAEA,IAAAmB,sBAAA,GAAAnB,OAAA;AACA,IAAAoB,8BAAA,GAAApB,OAAA;AAEA,IAAAqB,wBAAA,GAAArB,OAAA;AAeA,IAAAsB,kBAAA,GAAAtB,OAAA;AAWA,IAAAuB,kBAAA,GAAAvB,OAAA;AAiBA,IAAAwB,sBAAA,GAAAxB,OAAA;AACA,IAAAyB,gBAAA,GAAAzB,OAAA;AAKA,IAAA0B,SAAA,GAAA1B,OAAA;AAEA,IAAA2B,gBAAA,GAAA3B,OAAA;AAEA,IAAA4B,iBAAA,GAAA5B,OAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_tokens","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_MainLogo","_RoundAvatar","_PresentationShell","_headers","_FloatingControls","_HelpAndSupportMenu","_LinkingCommandsButton","_LinkBranchOrPullRequestDialog","_ConnectRepositoryDialog","_WebhookLogsDialog","_SourceCodeSection","_SuggestSubtasksButton","_TaskOptionsMenu","_UserMenu","_TwoFactorShield","_TwoFactorDialogs","_settings"],"sources":["../../../../src/presentation/shared/index.ts"],"sourcesContent":["/**\n * Shared building blocks for the Presentation mock-ups (`Presentation/*`\n * stories). The application shell, page headers, tab bar and small widgets are\n * defined once here and reused by the List view, Column view, Task sheet and\n * empty-page stories so the chrome stays identical and in one place.\n */\nexport * from \"./tokens\";\nexport { MainLogo } from \"./MainLogo\";\nexport { RoundAvatar } from \"./RoundAvatar\";\nexport { PresentationShell, StyledPagePaper } from \"./PresentationShell\";\nexport type { PresentationShellProps } from \"./PresentationShell\";\nexport { PageHeader, ProjectPageHeader, TabHeader } from \"./headers\";\nexport type {\n  PageHeaderProps,\n  ProjectPageHeaderProps,\n  TabHeaderProps,\n} from \"./headers\";\nexport { FloatingControls } from \"./FloatingControls\";\nexport { HelpAndSupportMenu } from \"./HelpAndSupportMenu\";\nexport type { HelpAndSupportMenuProps } from \"./HelpAndSupportMenu\";\nexport { LinkingCommandsButton } from \"./LinkingCommandsButton\";\nexport { LinkBranchOrPullRequestDialog } from \"./LinkBranchOrPullRequestDialog\";\nexport type { LinkBranchOrPullRequestDialogProps } from \"./LinkBranchOrPullRequestDialog\";\nexport {\n  ConnectRepositoryDialog,\n  RepositorySelect,\n  buildRepoOptions,\n  CONNECTIONS,\n  PROJECT_REPOSITORIES,\n  CONNECTABLE_REPOSITORIES,\n} from \"./ConnectRepositoryDialog\";\nexport type {\n  ConnectRepositoryDialogProps,\n  RepositorySelectProps,\n  Connection,\n  ConnectionService,\n  Repository,\n} from \"./ConnectRepositoryDialog\";\nexport {\n  WebhookLogsDialog,\n  WEBHOOK_CONNECTIONS,\n  WEBHOOK_REPOSITORIES,\n} from \"./WebhookLogsDialog\";\nexport type {\n  WebhookLogsDialogProps,\n  WebhookConnection,\n  WebhookRepository,\n  WebhookLog,\n} from \"./WebhookLogsDialog\";\nexport {\n  SourceCodeSection,\n  IssueRow,\n  CodeRow,\n  Spine,\n  HistoryDialog,\n  CompletedHeader,\n} from \"./SourceCodeSection\";\nexport type {\n  IssueEntry,\n  CodeEntry,\n  Stage,\n  HistoryEvent,\n  StageState,\n  CodeStatus,\n  SectionVariant,\n} from \"./SourceCodeSection\";\nexport { SuggestSubtasksButton } from \"./SuggestSubtasksButton\";\nexport { TaskOptionsMenu, TaskListOptionsMenu } from \"./TaskOptionsMenu\";\nexport type {\n  TaskOptionsMenuProps,\n  TaskListOptionsMenuProps,\n} from \"./TaskOptionsMenu\";\nexport { UserMenu } from \"./UserMenu\";\nexport type { UserMenuProps, UserMenuVariant } from \"./UserMenu\";\nexport { TwoFactorShield } from \"./TwoFactorShield\";\nexport type { TwoFactorShieldProps } from \"./TwoFactorShield\";\nexport { BackupCodesDialogs, CreateLoginCodeDialogs } from \"./TwoFactorDialogs\";\nexport type {\n  BackupCodesDialogsProps,\n  CreateLoginCodeDialogsProps,\n} from \"./TwoFactorDialogs\";\nexport {\n  SettingsHeader,\n  SettingsContent,\n  StyledSettingRow,\n  RowText,\n  SettingRow,\n} from \"./settings\";\nexport type { SettingsHeaderProps, SettingRowProps } from \"./settings\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAb,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,SAAA,GAAAb,OAAA;AACA,IAAAc,YAAA,GAAAd,OAAA;AACA,IAAAe,kBAAA,GAAAf,OAAA;AAEA,IAAAgB,QAAA,GAAAhB,OAAA;AAMA,IAAAiB,iBAAA,GAAAjB,OAAA;AACA,IAAAkB,mBAAA,GAAAlB,OAAA;AAEA,IAAAmB,sBAAA,GAAAnB,OAAA;AACA,IAAAoB,8BAAA,GAAApB,OAAA;AAEA,IAAAqB,wBAAA,GAAArB,OAAA;AAeA,IAAAsB,kBAAA,GAAAtB,OAAA;AAWA,IAAAuB,kBAAA,GAAAvB,OAAA;AAiBA,IAAAwB,sBAAA,GAAAxB,OAAA;AACA,IAAAyB,gBAAA,GAAAzB,OAAA;AAKA,IAAA0B,SAAA,GAAA1B,OAAA;AAEA,IAAA2B,gBAAA,GAAA3B,OAAA;AAEA,IAAA4B,iBAAA,GAAA5B,OAAA;AAKA,IAAA6B,SAAA,GAAA7B,OAAA","ignoreList":[]}

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

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSettingRow = exports.SettingsHeader = exports.SettingsContent = exports.SettingRow = exports.RowText = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tokens = require("./tokens");
+var _Card = require("../../components/Card");
+var _IconButton = require("../../components/IconButton");
+var _Icons = require("../../components/Icons");
+var _Typography = require("../../components/Typography");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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.
+ */
+
+/* ------------------------------------------------------------------ */
+/* Settings page header (mirrors PageHeader.jsx + BackButton.js)       */
+/* ------------------------------------------------------------------ */
+
+var StyledSettingsHeader = _styledComponents.default.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;}}"], _tokens.SM, _tokens.MD, _tokens.MD, _tokens.MD, _tokens.SM);
+var SettingsHeader = exports.SettingsHeader = function SettingsHeader(_ref) {
+  var title = _ref.title,
+    backTitle = _ref.backTitle;
+  return /*#__PURE__*/_react.default.createElement(StyledSettingsHeader, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-left"
+  }, backTitle ? /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    variant: "text gray",
+    className: "back-button"
+  }, /*#__PURE__*/_react.default.createElement(_Icons.ArrowLeftIcon, null)) : null, /*#__PURE__*/_react.default.createElement(_Typography.Title2, {
+    className: "page-title-desktop"
+  }, title), /*#__PURE__*/_react.default.createElement(_Typography.Header2, {
+    className: "page-title-mobile"
+  }, title)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "page-header-spacer"
+  }));
+};
+
+/* ------------------------------------------------------------------ */
+/* Shared layout pieces                                                */
+/* ------------------------------------------------------------------ */
+
+/** The page body, max-width 850px and left-aligned (mirrors the app Page). */
+var SettingsContent = exports.SettingsContent = _styledComponents.default.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. */
+var StyledSettingRow = exports.StyledSettingRow = (0, _styledComponents.default)(_Card.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;", ""], function (_ref2) {
+  var $clickable = _ref2.$clickable;
+  return $clickable ? "\n    cursor: pointer;\n\n    &:hover {\n      background-color: var(--color-theme-200);\n    }\n  " : "";
+});
+var RowText = exports.RowText = _styledComponents.default.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;}"]);
+var SettingRow = exports.SettingRow = function SettingRow(_ref3) {
+  var 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.default.createElement(StyledSettingRow, {
+    variant: "paper-2",
+    $clickable: Boolean(onClick),
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(RowText, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    className: "row-title"
+  }, title), description ? /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    className: wrapDescription ? "row-description-wrap" : "row-description",
+    color: "tertiary"
+  }, description) : null), control);
+};
+//# sourceMappingURL=settings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"settings.js","names":["_react","_interopRequireDefault","require","_styledComponents","_tokens","_Card","_IconButton","_Icons","_Typography","e","__esModule","default","StyledSettingsHeader","styled","div","withConfig","displayName","componentId","SM","MD","SettingsHeader","exports","_ref","title","backTitle","createElement","className","IconButton","variant","ArrowLeftIcon","Title2","Header2","SettingsContent","StyledSettingRow","Card","_ref2","$clickable","RowText","SettingRow","_ref3","description","control","onClick","_ref3$wrapDescription","wrapDescription","Boolean","Body2","Caption1","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/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