@activecollab/components 2.0.363 → 2.0.365

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

@@ -0,0 +1,134 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["icon", "label", "height", "dashed"];
+import React from "react";
+import styled, { css } from "styled-components";
+import { PlayIcon, TreeDotsIcon } from "../../../components/Icons";
+import { Body2 } from "../../../components/Typography";
+import { Typography } from "../../../components/Typography/Typography";
+import { CollapseGlyph, CoverButton, PlayBadge, RemoveCoverGlyph } from "../primitives";
+
+/**
+ * Content-level chrome shared by the typed StackedCard components.
+ *
+ * These live OUTSIDE the shell on purpose. The shell is hollow; the "…" entity
+ * menu, the cover-management controls, the clamp, the favicon, the chips and
+ * the placeholder frame are content concerns, so they belong here where the
+ * typed cards (TaskCard, LinkCard, …) compose them.
+ */
+
+/* ------------------------------------------------------------------ */
+/* Cover chrome — media control + cover management                     */
+/* ------------------------------------------------------------------ */
+
+/** Centered media control (play), for a cover that wraps audio/video. */
+export const playControl = /*#__PURE__*/React.createElement(PlayBadge, null, /*#__PURE__*/React.createElement(PlayIcon, null));
+
+/**
+ * Top-right cover management. Acts on the COVER (collapse it, remove it) — not
+ * on the entity. Callers wire the click handlers; the default is inert chrome
+ * for the static demos.
+ */
+export const coverManagement = function (_temp) {
+  let _ref = _temp === void 0 ? {} : _temp,
+    _ref$removeLabel = _ref.removeLabel,
+    removeLabel = _ref$removeLabel === void 0 ? "Remove cover" : _ref$removeLabel,
+    onCollapse = _ref.onCollapse,
+    onRemove = _ref.onRemove;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CoverButton, {
+    type: "button",
+    "aria-label": "Collapse cover",
+    onClick: onCollapse
+  }, /*#__PURE__*/React.createElement(CollapseGlyph, null)), /*#__PURE__*/React.createElement(CoverButton, {
+    type: "button",
+    "aria-label": removeLabel,
+    onClick: onRemove
+  }, /*#__PURE__*/React.createElement(RemoveCoverGlyph, null)));
+};
+
+/* ------------------------------------------------------------------ */
+/* Entity "…" menu — acts on the ENTITY, lives in a content row         */
+/* ------------------------------------------------------------------ */
+
+const StyledEntityDots = styled.button.withConfig({
+  displayName: "shared__StyledEntityDots",
+  componentId: "sc-1x5md9a-0"
+})(["display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:6px;cursor:pointer;color:var(--color-theme-700);background:var(--color-theme-200);svg{width:16px;height:16px;display:block;}&:hover{background:var(--color-theme-300);}"]);
+export const EntityDots = props => /*#__PURE__*/React.createElement(StyledEntityDots, _extends({
+  type: "button",
+  "aria-label": "Options",
+  "data-fixed": true,
+  className: "sc-control"
+}, props), /*#__PURE__*/React.createElement(TreeDotsIcon, null));
+
+/* ------------------------------------------------------------------ */
+/* Text + inline bits                                                   */
+/* ------------------------------------------------------------------ */
+
+/** Two-line title clamp — the card's name row content. */
+export const StyledClamp = styled(Body2).withConfig({
+  displayName: "shared__StyledClamp",
+  componentId: "sc-1x5md9a-1"
+})(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"]);
+
+/** A favicon square — a solid data colour stands in for the real favicon. */
+export const StyledFavicon = styled.span.withConfig({
+  displayName: "shared__StyledFavicon",
+  componentId: "sc-1x5md9a-2"
+})(["display:inline-flex;width:16px;height:16px;border-radius:4px;background:", ";flex-shrink:0;"], _ref2 => {
+  let $bg = _ref2.$bg;
+  return $bg;
+});
+
+/** A small pill for link metadata (media kind, duration, …). */
+export const StyledChip = styled.span.withConfig({
+  displayName: "shared__StyledChip",
+  componentId: "sc-1x5md9a-3"
+})(["display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;background:var(--color-theme-300);color:var(--color-theme-800);font-size:11px;white-space:nowrap;"]);
+
+/** A solid-colour cover fill (swatch value, generic link cover, image stand-in). */
+export const StyledColorCover = styled.div.withConfig({
+  displayName: "shared__StyledColorCover",
+  componentId: "sc-1x5md9a-4"
+})(["width:100%;height:100%;background:", ";"], _ref3 => {
+  let $color = _ref3.$color;
+  return $color;
+});
+
+/* ------------------------------------------------------------------ */
+/* Placeholder frame — the interactive empty state, per type           */
+/* ------------------------------------------------------------------ */
+
+const StyledPlaceholder = styled.button.withConfig({
+  displayName: "shared__StyledPlaceholder",
+  componentId: "sc-1x5md9a-5"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:", "px;padding:0;border:0;background:transparent;color:var(--color-theme-600);text-align:center;cursor:pointer;", " > svg{width:40px;height:40px;color:var(--color-theme-500);}"], _ref4 => {
+  let $height = _ref4.$height;
+  return $height != null ? $height : 150;
+}, _ref5 => {
+  let $dashed = _ref5.$dashed;
+  return $dashed && css(["margin:8px;width:calc(100% - 16px);border:1.5px dashed var(--color-theme-400);border-radius:6px;&:hover{border-color:var(--sc-selection-ring);color:var(--color-theme-700);}"]);
+});
+
+/**
+ * The shared placeholder frame. Each type supplies its own icon and verb-first,
+ * sentence-case invitation (ActiveCollab voice). Interactive by design — the
+ * whole frame is a button — and distinct from the loading skeleton.
+ */
+export const Placeholder = _ref6 => {
+  let icon = _ref6.icon,
+    label = _ref6.label,
+    height = _ref6.height,
+    dashed = _ref6.dashed,
+    rest = _objectWithoutPropertiesLoose(_ref6, _excluded);
+  return /*#__PURE__*/React.createElement(StyledPlaceholder, _extends({
+    type: "button",
+    $height: height,
+    $dashed: dashed
+  }, rest), icon, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "Body 2",
+    color: "secondary"
+  }, label));
+};
+//# sourceMappingURL=shared.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","names":["React","styled","css","PlayIcon","TreeDotsIcon","Body2","Typography","CollapseGlyph","CoverButton","PlayBadge","RemoveCoverGlyph","playControl","createElement","coverManagement","_temp","_ref","_ref$removeLabel","removeLabel","onCollapse","onRemove","Fragment","type","onClick","StyledEntityDots","button","withConfig","displayName","componentId","EntityDots","props","_extends","className","StyledClamp","StyledFavicon","span","_ref2","$bg","StyledChip","StyledColorCover","div","_ref3","$color","StyledPlaceholder","_ref4","$height","_ref5","$dashed","Placeholder","_ref6","icon","label","height","dashed","rest","_objectWithoutPropertiesLoose","_excluded","as","variant","color"],"sources":["../../../../../src/presentation/stackedCard/content/shared.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport styled, { css } from \"styled-components\";\n\nimport { PlayIcon, TreeDotsIcon } from \"../../../components/Icons\";\nimport { Body2 } from \"../../../components/Typography\";\nimport { Typography } from \"../../../components/Typography/Typography\";\nimport {\n  CollapseGlyph,\n  CoverButton,\n  PlayBadge,\n  RemoveCoverGlyph,\n} from \"../primitives\";\n\n/**\n * Content-level chrome shared by the typed StackedCard components.\n *\n * These live OUTSIDE the shell on purpose. The shell is hollow; the \"…\" entity\n * menu, the cover-management controls, the clamp, the favicon, the chips and\n * the placeholder frame are content concerns, so they belong here where the\n * typed cards (TaskCard, LinkCard, …) compose them.\n */\n\n/* ------------------------------------------------------------------ */\n/* Cover chrome — media control + cover management                     */\n/* ------------------------------------------------------------------ */\n\n/** Centered media control (play), for a cover that wraps audio/video. */\nexport const playControl = (\n  <PlayBadge>\n    <PlayIcon />\n  </PlayBadge>\n);\n\n/**\n * Top-right cover management. Acts on the COVER (collapse it, remove it) — not\n * on the entity. Callers wire the click handlers; the default is inert chrome\n * for the static demos.\n */\nexport const coverManagement = ({\n  removeLabel = \"Remove cover\",\n  onCollapse,\n  onRemove,\n}: {\n  removeLabel?: string;\n  onCollapse?: () => void;\n  onRemove?: () => void;\n} = {}): ReactElement => (\n  <>\n    <CoverButton type=\"button\" aria-label=\"Collapse cover\" onClick={onCollapse}>\n      <CollapseGlyph />\n    </CoverButton>\n    <CoverButton type=\"button\" aria-label={removeLabel} onClick={onRemove}>\n      <RemoveCoverGlyph />\n    </CoverButton>\n  </>\n);\n\n/* ------------------------------------------------------------------ */\n/* Entity \"…\" menu — acts on the ENTITY, lives in a content row         */\n/* ------------------------------------------------------------------ */\n\nconst StyledEntityDots = styled.button`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  padding: 0;\n  border: 0;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--color-theme-700);\n  background: var(--color-theme-200);\n\n  svg {\n    width: 16px;\n    height: 16px;\n    display: block;\n  }\n\n  &:hover {\n    background: var(--color-theme-300);\n  }\n`;\n\nexport const EntityDots = (\n  props: React.ButtonHTMLAttributes<HTMLButtonElement>\n): ReactElement => (\n  <StyledEntityDots\n    type=\"button\"\n    aria-label=\"Options\"\n    data-fixed\n    className=\"sc-control\"\n    {...props}\n  >\n    <TreeDotsIcon />\n  </StyledEntityDots>\n);\n\n/* ------------------------------------------------------------------ */\n/* Text + inline bits                                                   */\n/* ------------------------------------------------------------------ */\n\n/** Two-line title clamp — the card's name row content. */\nexport const StyledClamp = styled(Body2)`\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n`;\n\n/** A favicon square — a solid data colour stands in for the real favicon. */\nexport const StyledFavicon = styled.span<{ $bg: string }>`\n  display: inline-flex;\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  background: ${({ $bg }) => $bg};\n  flex-shrink: 0;\n`;\n\n/** A small pill for link metadata (media kind, duration, …). */\nexport const StyledChip = styled.span`\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: var(--color-theme-300);\n  color: var(--color-theme-800);\n  font-size: 11px;\n  white-space: nowrap;\n`;\n\n/** A solid-colour cover fill (swatch value, generic link cover, image stand-in). */\nexport const StyledColorCover = styled.div<{ $color: string }>`\n  width: 100%;\n  height: 100%;\n  background: ${({ $color }) => $color};\n`;\n\n/* ------------------------------------------------------------------ */\n/* Placeholder frame — the interactive empty state, per type           */\n/* ------------------------------------------------------------------ */\n\nconst StyledPlaceholder = styled.button<{\n  $height?: number;\n  $dashed?: boolean;\n}>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  width: 100%;\n  height: ${({ $height }) => $height ?? 150}px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--color-theme-600);\n  text-align: center;\n  cursor: pointer;\n\n  ${({ $dashed }) =>\n    $dashed &&\n    css`\n      margin: 8px;\n      width: calc(100% - 16px);\n      border: 1.5px dashed var(--color-theme-400);\n      border-radius: 6px;\n\n      &:hover {\n        border-color: var(--sc-selection-ring);\n        color: var(--color-theme-700);\n      }\n    `}\n\n  > svg {\n    width: 40px;\n    height: 40px;\n    color: var(--color-theme-500);\n  }\n`;\n\n/**\n * The shared placeholder frame. Each type supplies its own icon and verb-first,\n * sentence-case invitation (ActiveCollab voice). Interactive by design — the\n * whole frame is a button — and distinct from the loading skeleton.\n */\nexport const Placeholder = ({\n  icon,\n  label,\n  height,\n  dashed,\n  ...rest\n}: {\n  icon: ReactNode;\n  label: ReactNode;\n  height?: number;\n  dashed?: boolean;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>): ReactElement => (\n  <StyledPlaceholder type=\"button\" $height={height} $dashed={dashed} {...rest}>\n    {icon}\n    <Typography as=\"span\" variant=\"Body 2\" color=\"secondary\">\n      {label}\n    </Typography>\n  </StyledPlaceholder>\n);\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,89 @@
+/**
+ * Mock unfurl service for the LinkCard concept.
+ *
+ * A link preview is a LIFECYCLE, not two static layouts. The real service is
+ * server-side (SSRF-guarded, oEmbed → OpenGraph → Twitter Cards → <title>,
+ * cached ~24h with a stored `fetchedAt` and a manual re-unfurl affordance — see
+ * note 52104 §B3). This is a promise-based fake with a configurable delay and a
+ * failure toggle so the story can drive the whole lifecycle without a network.
+ *
+ * The data arrives on a PROGRESSIVE LADDER of three tiers, each carrying more
+ * than the last:
+ *   url    → just the raw URL (nothing fetched yet)
+ *   basic  → favicon + title + domain
+ *   full   → + description, hero image, media kind / duration
+ * The card reserves the next tier's space at every tier, so climbing the ladder
+ * never reflows the card.
+ */
+export type UnfurlTier = "url" | "basic" | "full";
+export type UnfurlStatus = "resolving" | "resolved" | "stale" | "error";
+/** The cumulative data shape. Fields fill in as the ladder climbs. */
+export interface UnfurlData {
+    /** Always present — the raw pasted URL. */
+    url: string;
+    /** Tier `basic` and up: a stand-in favicon colour. */
+    faviconColor?: string;
+    /** Tier `basic` and up: page title. */
+    title?: string;
+    /** Tier `basic` and up: the display domain. */
+    domain?: string;
+    /** Tier `full`: short description / summary. */
+    description?: string;
+    /** Tier `full`: hero image src (a real <img> in production). */
+    heroSrc?: string;
+    /** Tier `full`: hero fill colour, used when there is no hero image. */
+    heroColor?: string;
+    /** Tier `full`: media kind chip (Video, Article, …). */
+    kind?: string;
+    /** Tier `full`: duration chip for playable media. */
+    duration?: string;
+    /** Tier `full`: whether the media is playable (shows the cover play badge). */
+    playable?: boolean;
+}
+/** A seed link — what the fake "server" would resolve the URL to at tier full. */
+export interface MockLink {
+    url: string;
+    faviconColor: string;
+    title: string;
+    domain: string;
+    description: string;
+    heroColor: string;
+    heroSrc?: string;
+    kind: string;
+    duration?: string;
+    playable?: boolean;
+}
+export declare const MOCK_LINKS: Record<string, MockLink>;
+export interface UnfurlConfig {
+    /** Which seed link to resolve. */
+    link: MockLink;
+    /** Per-tier delay in ms (url→basic and basic→full each wait this long). */
+    delayMs?: number;
+    /** When true, the unfurl fails partway and lands in the error state. */
+    shouldFail?: boolean;
+}
+export interface UnfurlController {
+    status: UnfurlStatus;
+    tier: UnfurlTier;
+    data: UnfurlData;
+    /** Epoch ms of the last successful resolve (drives the stale affordance). */
+    fetchedAt: number | null;
+    /** Start (or restart) the unfurl ladder from scratch. */
+    start: () => void;
+    /** Retry after an error — re-runs the simulation. */
+    retry: () => void;
+    /** Re-unfurl a resolved/stale card — re-runs the simulation. */
+    reunfurl: () => void;
+    /** Force the resolved card into the stale state (demo affordance). */
+    markStale: () => void;
+}
+/**
+ * Drives one link through the unfurl lifecycle. Climbs url → basic → full on a
+ * timer, or lands in `error` if `shouldFail`. `retry` / `reunfurl` re-run it;
+ * `markStale` moves a resolved card to the stale state so the re-unfurl
+ * affordance can be shown.
+ */
+export declare const useUnfurl: ({ link, delayMs, shouldFail, }: UnfurlConfig) => UnfurlController;
+/** Human-readable "fetched N ago" for the stale affordance. */
+export declare const formatFetchedAt: (fetchedAt: number | null) => string;
+//# sourceMappingURL=unfurl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"unfurl.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/stackedCard/content/unfurl.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AAExE,sEAAsE;AACtE,MAAM,WAAW,UAAU;IACzB,2CAA2C;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,kFAAkF;AAClF,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAyB/C,CAAC;AAgBF,MAAM,WAAW,YAAY;IAC3B,kCAAkC;IAClC,IAAI,EAAE,QAAQ,CAAC;IACf,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,YAAY,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,6EAA6E;IAC7E,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,yDAAyD;IACzD,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,qDAAqD;IACrD,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,gEAAgE;IAChE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,sEAAsE;IACtE,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,GAAI,gCAIvB,YAAY,KAAG,gBA6DjB,CAAC;AAEF,+DAA+D;AAC/D,eAAO,MAAM,eAAe,GAAI,WAAW,MAAM,GAAG,IAAI,KAAG,MAS1D,CAAC"}

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

@@ -0,0 +1,147 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Mock unfurl service for the LinkCard concept.
+ *
+ * A link preview is a LIFECYCLE, not two static layouts. The real service is
+ * server-side (SSRF-guarded, oEmbed → OpenGraph → Twitter Cards → <title>,
+ * cached ~24h with a stored `fetchedAt` and a manual re-unfurl affordance — see
+ * note 52104 §B3). This is a promise-based fake with a configurable delay and a
+ * failure toggle so the story can drive the whole lifecycle without a network.
+ *
+ * The data arrives on a PROGRESSIVE LADDER of three tiers, each carrying more
+ * than the last:
+ *   url    → just the raw URL (nothing fetched yet)
+ *   basic  → favicon + title + domain
+ *   full   → + description, hero image, media kind / duration
+ * The card reserves the next tier's space at every tier, so climbing the ladder
+ * never reflows the card.
+ */
+
+/** The cumulative data shape. Fields fill in as the ladder climbs. */
+
+/** A seed link — what the fake "server" would resolve the URL to at tier full. */
+
+export const MOCK_LINKS = {
+  vimeo: {
+    url: "https://vimeo.com/876631121",
+    faviconColor: "#0F6E56",
+    title: "Brand refresh — motion explorations for the spring launch",
+    domain: "vimeo.com",
+    description: "A reel of motion studies exploring the refreshed brand system: type in motion, the new mark, and transitions for the marketing site.",
+    heroColor: "#1D9E75",
+    kind: "Video",
+    duration: "4:32",
+    playable: true
+  },
+  history: {
+    url: "https://ww2history.org/timeline",
+    faviconColor: "#8C5A2B",
+    title: "The Second World War • Timeline, key battles, and firsthand accounts",
+    domain: "ww2history.org",
+    description: "An illustrated timeline of the Second World War with primary sources, maps, and firsthand accounts from each theatre of the war.",
+    heroColor: "#B5793B",
+    kind: "Article",
+    playable: false
+  }
+};
+
+/** Progressive tier data derived from a seed link. */
+const tierData = (link, tier) => {
+  if (tier === "url") return {
+    url: link.url
+  };
+  if (tier === "basic") {
+    return {
+      url: link.url,
+      faviconColor: link.faviconColor,
+      title: link.title,
+      domain: link.domain
+    };
+  }
+  return _extends({}, link);
+};
+/**
+ * Drives one link through the unfurl lifecycle. Climbs url → basic → full on a
+ * timer, or lands in `error` if `shouldFail`. `retry` / `reunfurl` re-run it;
+ * `markStale` moves a resolved card to the stale state so the re-unfurl
+ * affordance can be shown.
+ */
+export const useUnfurl = _ref => {
+  let link = _ref.link,
+    _ref$delayMs = _ref.delayMs,
+    delayMs = _ref$delayMs === void 0 ? 900 : _ref$delayMs,
+    _ref$shouldFail = _ref.shouldFail,
+    shouldFail = _ref$shouldFail === void 0 ? false : _ref$shouldFail;
+  const _useState = useState("resolving"),
+    status = _useState[0],
+    setStatus = _useState[1];
+  const _useState2 = useState("url"),
+    tier = _useState2[0],
+    setTier = _useState2[1];
+  const _useState3 = useState(() => tierData(link, "url")),
+    data = _useState3[0],
+    setData = _useState3[1];
+  const _useState4 = useState(null),
+    fetchedAt = _useState4[0],
+    setFetchedAt = _useState4[1];
+  const timers = useRef([]);
+  const clearTimers = useCallback(() => {
+    timers.current.forEach(clearTimeout);
+    timers.current = [];
+  }, []);
+  const start = useCallback(() => {
+    clearTimers();
+    setStatus("resolving");
+    setTier("url");
+    setData(tierData(link, "url"));
+    if (shouldFail) {
+      // Fail partway: the favicon + title never arrive; we keep the raw URL.
+      timers.current.push(setTimeout(() => setStatus("error"), delayMs));
+      return;
+    }
+    timers.current.push(setTimeout(() => {
+      setTier("basic");
+      setData(tierData(link, "basic"));
+    }, delayMs));
+    timers.current.push(setTimeout(() => {
+      setTier("full");
+      setData(tierData(link, "full"));
+      setStatus("resolved");
+      setFetchedAt(Date.now());
+    }, delayMs * 2));
+  }, [clearTimers, link, delayMs, shouldFail]);
+  const markStale = useCallback(() => {
+    setStatus(prev => prev === "resolved" ? "stale" : prev);
+  }, []);
+
+  // Kick off on mount and whenever the config that defines the run changes.
+  useEffect(() => {
+    start();
+    return clearTimers;
+  }, [start, clearTimers]);
+  return {
+    status,
+    tier,
+    data,
+    fetchedAt,
+    start,
+    retry: start,
+    reunfurl: start,
+    markStale
+  };
+};
+
+/** Human-readable "fetched N ago" for the stale affordance. */
+export const formatFetchedAt = fetchedAt => {
+  if (!fetchedAt) return "";
+  const seconds = Math.max(1, Math.round((Date.now() - fetchedAt) / 1000));
+  if (seconds < 60) return seconds + "s ago";
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return minutes + "m ago";
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return hours + "h ago";
+  return Math.round(hours / 24) + "d ago";
+};
+//# sourceMappingURL=unfurl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"unfurl.js","names":["useCallback","useEffect","useRef","useState","MOCK_LINKS","vimeo","url","faviconColor","title","domain","description","heroColor","kind","duration","playable","history","tierData","link","tier","_extends","useUnfurl","_ref","_ref$delayMs","delayMs","_ref$shouldFail","shouldFail","_useState","status","setStatus","_useState2","setTier","_useState3","data","setData","_useState4","fetchedAt","setFetchedAt","timers","clearTimers","current","forEach","clearTimeout","start","push","setTimeout","Date","now","markStale","prev","retry","reunfurl","formatFetchedAt","seconds","Math","max","round","minutes","hours"],"sources":["../../../../../src/presentation/stackedCard/content/unfurl.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\n/**\n * Mock unfurl service for the LinkCard concept.\n *\n * A link preview is a LIFECYCLE, not two static layouts. The real service is\n * server-side (SSRF-guarded, oEmbed → OpenGraph → Twitter Cards → <title>,\n * cached ~24h with a stored `fetchedAt` and a manual re-unfurl affordance — see\n * note 52104 §B3). This is a promise-based fake with a configurable delay and a\n * failure toggle so the story can drive the whole lifecycle without a network.\n *\n * The data arrives on a PROGRESSIVE LADDER of three tiers, each carrying more\n * than the last:\n *   url    → just the raw URL (nothing fetched yet)\n *   basic  → favicon + title + domain\n *   full   → + description, hero image, media kind / duration\n * The card reserves the next tier's space at every tier, so climbing the ladder\n * never reflows the card.\n */\n\nexport type UnfurlTier = \"url\" | \"basic\" | \"full\";\n\nexport type UnfurlStatus = \"resolving\" | \"resolved\" | \"stale\" | \"error\";\n\n/** The cumulative data shape. Fields fill in as the ladder climbs. */\nexport interface UnfurlData {\n  /** Always present — the raw pasted URL. */\n  url: string;\n  /** Tier `basic` and up: a stand-in favicon colour. */\n  faviconColor?: string;\n  /** Tier `basic` and up: page title. */\n  title?: string;\n  /** Tier `basic` and up: the display domain. */\n  domain?: string;\n  /** Tier `full`: short description / summary. */\n  description?: string;\n  /** Tier `full`: hero image src (a real <img> in production). */\n  heroSrc?: string;\n  /** Tier `full`: hero fill colour, used when there is no hero image. */\n  heroColor?: string;\n  /** Tier `full`: media kind chip (Video, Article, …). */\n  kind?: string;\n  /** Tier `full`: duration chip for playable media. */\n  duration?: string;\n  /** Tier `full`: whether the media is playable (shows the cover play badge). */\n  playable?: boolean;\n}\n\n/** A seed link — what the fake \"server\" would resolve the URL to at tier full. */\nexport interface MockLink {\n  url: string;\n  faviconColor: string;\n  title: string;\n  domain: string;\n  description: string;\n  heroColor: string;\n  heroSrc?: string;\n  kind: string;\n  duration?: string;\n  playable?: boolean;\n}\n\nexport const MOCK_LINKS: Record<string, MockLink> = {\n  vimeo: {\n    url: \"https://vimeo.com/876631121\",\n    faviconColor: \"#0F6E56\",\n    title: \"Brand refresh — motion explorations for the spring launch\",\n    domain: \"vimeo.com\",\n    description:\n      \"A reel of motion studies exploring the refreshed brand system: type in motion, the new mark, and transitions for the marketing site.\",\n    heroColor: \"#1D9E75\",\n    kind: \"Video\",\n    duration: \"4:32\",\n    playable: true,\n  },\n  history: {\n    url: \"https://ww2history.org/timeline\",\n    faviconColor: \"#8C5A2B\",\n    title:\n      \"The Second World War • Timeline, key battles, and firsthand accounts\",\n    domain: \"ww2history.org\",\n    description:\n      \"An illustrated timeline of the Second World War with primary sources, maps, and firsthand accounts from each theatre of the war.\",\n    heroColor: \"#B5793B\",\n    kind: \"Article\",\n    playable: false,\n  },\n};\n\n/** Progressive tier data derived from a seed link. */\nconst tierData = (link: MockLink, tier: UnfurlTier): UnfurlData => {\n  if (tier === \"url\") return { url: link.url };\n  if (tier === \"basic\") {\n    return {\n      url: link.url,\n      faviconColor: link.faviconColor,\n      title: link.title,\n      domain: link.domain,\n    };\n  }\n  return { ...link };\n};\n\nexport interface UnfurlConfig {\n  /** Which seed link to resolve. */\n  link: MockLink;\n  /** Per-tier delay in ms (url→basic and basic→full each wait this long). */\n  delayMs?: number;\n  /** When true, the unfurl fails partway and lands in the error state. */\n  shouldFail?: boolean;\n}\n\nexport interface UnfurlController {\n  status: UnfurlStatus;\n  tier: UnfurlTier;\n  data: UnfurlData;\n  /** Epoch ms of the last successful resolve (drives the stale affordance). */\n  fetchedAt: number | null;\n  /** Start (or restart) the unfurl ladder from scratch. */\n  start: () => void;\n  /** Retry after an error — re-runs the simulation. */\n  retry: () => void;\n  /** Re-unfurl a resolved/stale card — re-runs the simulation. */\n  reunfurl: () => void;\n  /** Force the resolved card into the stale state (demo affordance). */\n  markStale: () => void;\n}\n\n/**\n * Drives one link through the unfurl lifecycle. Climbs url → basic → full on a\n * timer, or lands in `error` if `shouldFail`. `retry` / `reunfurl` re-run it;\n * `markStale` moves a resolved card to the stale state so the re-unfurl\n * affordance can be shown.\n */\nexport const useUnfurl = ({\n  link,\n  delayMs = 900,\n  shouldFail = false,\n}: UnfurlConfig): UnfurlController => {\n  const [status, setStatus] = useState<UnfurlStatus>(\"resolving\");\n  const [tier, setTier] = useState<UnfurlTier>(\"url\");\n  const [data, setData] = useState<UnfurlData>(() => tierData(link, \"url\"));\n  const [fetchedAt, setFetchedAt] = useState<number | null>(null);\n\n  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);\n\n  const clearTimers = useCallback(() => {\n    timers.current.forEach(clearTimeout);\n    timers.current = [];\n  }, []);\n\n  const start = useCallback(() => {\n    clearTimers();\n    setStatus(\"resolving\");\n    setTier(\"url\");\n    setData(tierData(link, \"url\"));\n\n    if (shouldFail) {\n      // Fail partway: the favicon + title never arrive; we keep the raw URL.\n      timers.current.push(setTimeout(() => setStatus(\"error\"), delayMs));\n      return;\n    }\n\n    timers.current.push(\n      setTimeout(() => {\n        setTier(\"basic\");\n        setData(tierData(link, \"basic\"));\n      }, delayMs)\n    );\n    timers.current.push(\n      setTimeout(() => {\n        setTier(\"full\");\n        setData(tierData(link, \"full\"));\n        setStatus(\"resolved\");\n        setFetchedAt(Date.now());\n      }, delayMs * 2)\n    );\n  }, [clearTimers, link, delayMs, shouldFail]);\n\n  const markStale = useCallback(() => {\n    setStatus((prev) => (prev === \"resolved\" ? \"stale\" : prev));\n  }, []);\n\n  // Kick off on mount and whenever the config that defines the run changes.\n  useEffect(() => {\n    start();\n    return clearTimers;\n  }, [start, clearTimers]);\n\n  return {\n    status,\n    tier,\n    data,\n    fetchedAt,\n    start,\n    retry: start,\n    reunfurl: start,\n    markStale,\n  };\n};\n\n/** Human-readable \"fetched N ago\" for the stale affordance. */\nexport const formatFetchedAt = (fetchedAt: number | null): string => {\n  if (!fetchedAt) return \"\";\n  const seconds = Math.max(1, Math.round((Date.now() - fetchedAt) / 1000));\n  if (seconds < 60) return `${seconds}s ago`;\n  const minutes = Math.round(seconds / 60);\n  if (minutes < 60) return `${minutes}m ago`;\n  const hours = Math.round(minutes / 60);\n  if (hours < 24) return `${hours}h ago`;\n  return `${Math.round(hours / 24)}d ago`;\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/presentation/stackedCard/primitives.d.ts

@@ -0,0 +1,84 @@
+import { ReactElement, ReactNode } from "react";
+/**
+ * StackedCard layout primitives (story-local, presentation-only).
+ *
+ * These are the documented foundation of the StackedCard subsystem — the
+ * building blocks that every StackedCard concept story in this task set
+ * imports from. They are NOT exported from the design-system barrel; they
+ * live here so the concept stories share one source of truth instead of
+ * re-declaring one-off styled blocks.
+ *
+ * Three primitives:
+ *  - Stack     — the vertical column. A card is a Stack of StackRows.
+ *  - StackRow  — the one layout primitive. Everything (cover, title, meta,
+ *                footer) is a row; a `role` sets the default padding and the
+ *                allowed direction so the anatomy stays predictable.
+ *  - Cover     — sugar for a bleed row that holds media, reserves its height
+ *                with `aspect-ratio` (so a late image never reflows), and
+ *                carries two control slots (center + top-right).
+ *
+ * Colours here come exclusively from CSS variables — the dark scrim behind
+ * cover controls is `--sc-scrim` / `--sc-scrim-strong` / `--sc-scrim-fg`, all
+ * declared story-side as DS token candidates. No rgba/hex is hardcoded in a
+ * primitive; only data colours (a swatch value, a label dot) are ever literal,
+ * and those are passed in by the content, never baked in here.
+ */
+export declare const Stack: import("styled-components").StyledComponent<"div", any, {}, never>;
+export type StackRowRole = "cover" | "title" | "meta" | "footer" | "custom";
+export type StackRowDirection = "row" | "column";
+/**
+ * Role → default padding. The row is the increment: title/footer carry the
+ * system padding, meta is a tighter properties line, cover bleeds to the edge.
+ * `custom` starts from the system padding and expects the caller to adjust.
+ */
+export declare const ROLE_PADDING: Record<StackRowRole, string>;
+export interface StackRowProps {
+    /** Named role → default padding + allowed direction. Defaults to `custom`. */
+    role?: StackRowRole;
+    /** Zero the padding, overriding the role (media rows, edge-to-edge bands). */
+    bleed?: boolean;
+    /** Footer bands lay their children out vertically. Defaults to `row`. */
+    direction?: StackRowDirection;
+    /** A row can carry its own background (the tinted link-footer band). */
+    background?: string;
+    className?: string;
+    children: ReactNode;
+}
+export declare const StackRow: ({ role, bleed, direction, background, className, children, }: StackRowProps) => ReactElement;
+export interface CoverProps {
+    /**
+     * CSS `aspect-ratio` value that reserves the cover's height, e.g.
+     * `"260 / 132"`. Kept as a ratio (not a pixel height) so the cover scales
+     * with the card and holds its space before media loads.
+     */
+    aspectRatio?: string;
+    /** Center slot — the media control (a play button over audio/video). */
+    centerSlot?: ReactNode;
+    /** Top-right slot — cover management (collapse, remove). */
+    topRightSlot?: ReactNode;
+    /**
+     * Collapsed cover: render the thin strip instead of the media box. The
+     * collapse *control* lives in the caller's `topRightSlot`; this flag is the
+     * resulting visual state. See the "Collapsed cover" story section.
+     */
+    collapsed?: boolean;
+    /**
+     * What the collapsed strip shows — an ~8px colour bar, or a favicon + domain
+     * row for links. Content-specific, so the caller supplies it.
+     */
+    collapsedStrip?: ReactNode;
+    /** Fired when the collapsed strip's expand affordance is activated. */
+    onExpand?: () => void;
+    /** Accessible label for the expand affordance. */
+    expandLabel?: string;
+    className?: string;
+    /** The fill: an `<img>`, an inline `<svg>`, or a solid-colour box. */
+    children: ReactNode;
+}
+export declare const Cover: ({ aspectRatio, centerSlot, topRightSlot, collapsed, collapsedStrip, onExpand, expandLabel, className, children, }: CoverProps) => ReactElement;
+export declare const PlayBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const CoverButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const CollapseGlyph: () => ReactElement;
+export declare const ExpandGlyph: () => ReactElement;
+export declare const RemoveCoverGlyph: () => ReactElement;
+//# sourceMappingURL=primitives.d.ts.map

package/dist/esm/presentation/stackedCard/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../../src/presentation/stackedCard/primitives.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAMH,eAAO,MAAM,KAAK,oEAIjB,CAAC;AAMF,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE5E,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAMrD,CAAC;AA0CF,MAAM,WAAW,aAAa;IAC5B,8EAA8E;IAC9E,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yEAAyE;IACzE,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,GAAI,8DAOtB,aAAa,KAAG,YAUlB,CAAC;AAuHF,MAAM,WAAW,UAAU;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,KAAK,GAAI,mHAUnB,UAAU,KAAG,YA6Bf,CAAC;AAOF,eAAO,MAAM,SAAS,qEAgBrB,CAAC;AAGF,eAAO,MAAM,WAAW,uEAsBvB,CAAC;AAGF,eAAO,MAAM,aAAa,QAAO,YAUhC,CAAC;AAGF,eAAO,MAAM,WAAW,QAAO,YAU9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,YAkBnC,CAAC"}