@activecollab/components 2.0.362 → 2.0.364

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

package/dist/esm/presentation/stackedCard/primitives.js

@@ -0,0 +1,241 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+/**
+ * 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.
+ */
+
+/* ------------------------------------------------------------------ */
+/* Stack — vertical flex column. No own padding.                       */
+/* ------------------------------------------------------------------ */
+
+export const Stack = styled.div.withConfig({
+  displayName: "primitives__Stack",
+  componentId: "sc-1ax68l9-0"
+})(["position:relative;display:flex;flex-direction:column;"]);
+
+/* ------------------------------------------------------------------ */
+/* StackRow — the only layout primitive, differentiated by `role`.     */
+/* ------------------------------------------------------------------ */
+
+/**
+ * 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 const ROLE_PADDING = {
+  cover: "0",
+  title: "8px 12px",
+  meta: "2px 12px 4px",
+  footer: "8px 12px",
+  custom: "8px 12px"
+};
+const StyledRow = styled.div.withConfig({
+  displayName: "primitives__StyledRow",
+  componentId: "sc-1ax68l9-1"
+})(["position:relative;display:flex;flex-direction:", ";align-items:", ";gap:", ";padding:", ";", " ", ""], _ref => {
+  let $direction = _ref.$direction;
+  return $direction;
+}, _ref2 => {
+  let $direction = _ref2.$direction;
+  return $direction === "column" ? "stretch" : "center";
+}, _ref3 => {
+  let $direction = _ref3.$direction;
+  return $direction === "column" ? "4px" : "8px";
+}, _ref4 => {
+  let $role = _ref4.$role,
+    $bleed = _ref4.$bleed;
+  return $bleed ? "0" : ROLE_PADDING[$role];
+}, _ref5 => {
+  let $background = _ref5.$background;
+  return $background && css(["background:", ";"], $background);
+}, _ref6 => {
+  let $direction = _ref6.$direction;
+  return $direction === "row" && css(["> *{flex:1 1 0;min-width:0;}> [data-fixed]{flex:0 0 auto;}"]);
+});
+export const StackRow = _ref7 => {
+  let _ref7$role = _ref7.role,
+    role = _ref7$role === void 0 ? "custom" : _ref7$role,
+    bleed = _ref7.bleed,
+    _ref7$direction = _ref7.direction,
+    direction = _ref7$direction === void 0 ? "row" : _ref7$direction,
+    background = _ref7.background,
+    className = _ref7.className,
+    children = _ref7.children;
+  return /*#__PURE__*/React.createElement(StyledRow, {
+    $role: role,
+    $bleed: bleed,
+    $direction: direction,
+    $background: background,
+    className: className
+  }, children);
+};
+
+/* ------------------------------------------------------------------ */
+/* Cover — sugar for a bleed row that holds media.                     */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The media box reserves its height with `aspect-ratio` so the image (or the
+ * skeleton that stands in for it) never reflows the card when it arrives.
+ * Controls carry the `sc-control` class and are hidden until the cover is
+ * hovered OR holds focus (`:focus-within`) — the focus path keeps the cover
+ * controls reachable by keyboard, not mouse-only.
+ */
+const StyledCoverMedia = styled.div.withConfig({
+  displayName: "primitives__StyledCoverMedia",
+  componentId: "sc-1ax68l9-2"
+})(["position:relative;width:100%;aspect-ratio:", ";overflow:hidden;.sc-control{opacity:0;transition:opacity 120ms ease;}&:hover .sc-control,&:focus-within .sc-control{opacity:1;}"], _ref8 => {
+  let $aspectRatio = _ref8.$aspectRatio;
+  return $aspectRatio;
+});
+
+/* The fill (an <img>, an inline <svg> wrapper, or a solid-colour box) is laid
+   over the reserved box and made to cover it. */
+const StyledCoverFill = styled.div.withConfig({
+  displayName: "primitives__StyledCoverFill",
+  componentId: "sc-1ax68l9-3"
+})(["position:absolute;inset:0;> *{width:100%;height:100%;}> img{display:block;object-fit:cover;}"]);
+const StyledCoverCenter = styled.div.withConfig({
+  displayName: "primitives__StyledCoverCenter",
+  componentId: "sc-1ax68l9-4"
+})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;"]);
+const StyledCoverTopRight = styled.div.withConfig({
+  displayName: "primitives__StyledCoverTopRight",
+  componentId: "sc-1ax68l9-5"
+})(["position:absolute;top:8px;right:8px;display:flex;gap:6px;"]);
+
+/**
+ * Collapsed cover — the media box gives way to a thin strip. The strip is the
+ * expand affordance itself: the whole bar is a button, and a chevron hint is
+ * revealed on hover OR focus (`.sc-control`, same reveal rule as every other
+ * cover control) so it is reachable by keyboard, not mouse-only. The strip
+ * holds no reserved height of its own — the caller's `collapsedStrip` (an ~8px
+ * colour bar, or a favicon + domain row for links) sets how tall it reads.
+ */
+const StyledCollapsedStrip = styled.button.withConfig({
+  displayName: "primitives__StyledCollapsedStrip",
+  componentId: "sc-1ax68l9-6"
+})(["position:relative;display:flex;align-items:center;width:100%;min-height:16px;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;.sc-control{opacity:0;transition:opacity 120ms ease;}&:hover .sc-control,&:focus-visible .sc-control{opacity:1;}&:focus-visible{outline:2px solid var(--sc-selection-ring);outline-offset:-2px;}"]);
+
+/* The expand chevron sits at the right, vertically centred over the strip, so
+   it reads the same whether the strip is a hairline colour bar or a taller
+   favicon row. Small + theme-coloured so it fits a thin strip without a scrim
+   button (the whole strip is the button). */
+const StyledStripExpand = styled.span.withConfig({
+  displayName: "primitives__StyledStripExpand",
+  componentId: "sc-1ax68l9-7"
+})(["position:absolute;top:50%;right:8px;transform:translateY(-50%);display:inline-flex;width:16px;height:16px;color:var(--color-theme-600);svg{width:14px;height:14px;}"]);
+export const Cover = _ref9 => {
+  let _ref9$aspectRatio = _ref9.aspectRatio,
+    aspectRatio = _ref9$aspectRatio === void 0 ? "260 / 132" : _ref9$aspectRatio,
+    centerSlot = _ref9.centerSlot,
+    topRightSlot = _ref9.topRightSlot,
+    collapsed = _ref9.collapsed,
+    collapsedStrip = _ref9.collapsedStrip,
+    onExpand = _ref9.onExpand,
+    _ref9$expandLabel = _ref9.expandLabel,
+    expandLabel = _ref9$expandLabel === void 0 ? "Expand cover" : _ref9$expandLabel,
+    className = _ref9.className,
+    children = _ref9.children;
+  return /*#__PURE__*/React.createElement(StackRow, {
+    role: "cover",
+    bleed: true,
+    className: className
+  }, collapsed ? /*#__PURE__*/React.createElement(StyledCollapsedStrip, {
+    type: "button",
+    "aria-label": expandLabel,
+    onClick: onExpand
+  }, collapsedStrip, /*#__PURE__*/React.createElement(StyledStripExpand, {
+    className: "sc-control",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(ExpandGlyph, null))) : /*#__PURE__*/React.createElement(StyledCoverMedia, {
+    $aspectRatio: aspectRatio
+  }, /*#__PURE__*/React.createElement(StyledCoverFill, null, children), centerSlot ? /*#__PURE__*/React.createElement(StyledCoverCenter, {
+    className: "sc-control"
+  }, centerSlot) : null, topRightSlot ? /*#__PURE__*/React.createElement(StyledCoverTopRight, {
+    className: "sc-control"
+  }, topRightSlot) : null));
+};
+
+/* ------------------------------------------------------------------ */
+/* Cover controls — dark, scrim-backed chrome shared by every story.   */
+/* ------------------------------------------------------------------ */
+
+/* Centered media control (a play button). The caller drops the glyph inside. */
+export const PlayBadge = styled.span.withConfig({
+  displayName: "primitives__PlayBadge",
+  componentId: "sc-1ax68l9-8"
+})(["display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--sc-scrim);color:var(--sc-scrim-fg);svg{fill:currentColor;width:20px;height:20px;margin-left:2px;}"]);
+
+/* Top-right cover-management button (collapse, remove …). */
+export const CoverButton = styled.button.withConfig({
+  displayName: "primitives__CoverButton",
+  componentId: "sc-1ax68l9-9"
+})(["display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;cursor:pointer;color:var(--sc-scrim-fg);background:var(--sc-scrim);svg{width:16px;height:16px;display:block;}&:hover{background:var(--sc-scrim-strong);}"]);
+
+/* Cover-management glyphs (act on the cover itself, not the entity). */
+export const CollapseGlyph = () => /*#__PURE__*/React.createElement("svg", {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  "aria-hidden": "true"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M6.5 2.5v4h-4M9.5 13.5v-4h4",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}));
+
+/* Expand glyph — the inverse of collapse; shown on the collapsed strip. */
+export const ExpandGlyph = () => /*#__PURE__*/React.createElement("svg", {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  "aria-hidden": "true"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M2.5 6.5v-4h4M13.5 9.5v4h-4",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}));
+export const RemoveCoverGlyph = () => /*#__PURE__*/React.createElement("svg", {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  "aria-hidden": "true"
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "2.25",
+  y: "3.75",
+  width: "11.5",
+  height: "8.5",
+  rx: "1.5",
+  stroke: "currentColor",
+  strokeWidth: "1.5"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M6 9.5L10 6M10 9.5L6 6",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round"
+}));
+//# sourceMappingURL=primitives.js.map

package/dist/esm/presentation/stackedCard/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.js","names":["React","styled","css","Stack","div","withConfig","displayName","componentId","ROLE_PADDING","cover","title","meta","footer","custom","StyledRow","_ref","$direction","_ref2","_ref3","_ref4","$role","$bleed","_ref5","$background","_ref6","StackRow","_ref7","_ref7$role","role","bleed","_ref7$direction","direction","background","className","children","createElement","StyledCoverMedia","_ref8","$aspectRatio","StyledCoverFill","StyledCoverCenter","StyledCoverTopRight","StyledCollapsedStrip","button","StyledStripExpand","span","Cover","_ref9","_ref9$aspectRatio","aspectRatio","centerSlot","topRightSlot","collapsed","collapsedStrip","onExpand","_ref9$expandLabel","expandLabel","type","onClick","ExpandGlyph","PlayBadge","CoverButton","CollapseGlyph","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","RemoveCoverGlyph","x","y","width","height","rx"],"sources":["../../../../src/presentation/stackedCard/primitives.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport styled, { css } from \"styled-components\";\n\n/**\n * StackedCard layout primitives (story-local, presentation-only).\n *\n * These are the documented foundation of the StackedCard subsystem — the\n * building blocks that every StackedCard concept story in this task set\n * imports from. They are NOT exported from the design-system barrel; they\n * live here so the concept stories share one source of truth instead of\n * re-declaring one-off styled blocks.\n *\n * Three primitives:\n *  - Stack     — the vertical column. A card is a Stack of StackRows.\n *  - StackRow  — the one layout primitive. Everything (cover, title, meta,\n *                footer) is a row; a `role` sets the default padding and the\n *                allowed direction so the anatomy stays predictable.\n *  - Cover     — sugar for a bleed row that holds media, reserves its height\n *                with `aspect-ratio` (so a late image never reflows), and\n *                carries two control slots (center + top-right).\n *\n * Colours here come exclusively from CSS variables — the dark scrim behind\n * cover controls is `--sc-scrim` / `--sc-scrim-strong` / `--sc-scrim-fg`, all\n * declared story-side as DS token candidates. No rgba/hex is hardcoded in a\n * primitive; only data colours (a swatch value, a label dot) are ever literal,\n * and those are passed in by the content, never baked in here.\n */\n\n/* ------------------------------------------------------------------ */\n/* Stack — vertical flex column. No own padding.                       */\n/* ------------------------------------------------------------------ */\n\nexport const Stack = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n`;\n\n/* ------------------------------------------------------------------ */\n/* StackRow — the only layout primitive, differentiated by `role`.     */\n/* ------------------------------------------------------------------ */\n\nexport type StackRowRole = \"cover\" | \"title\" | \"meta\" | \"footer\" | \"custom\";\n\nexport type StackRowDirection = \"row\" | \"column\";\n\n/**\n * Role → default padding. The row is the increment: title/footer carry the\n * system padding, meta is a tighter properties line, cover bleeds to the edge.\n * `custom` starts from the system padding and expects the caller to adjust.\n */\nexport const ROLE_PADDING: Record<StackRowRole, string> = {\n  cover: \"0\",\n  title: \"8px 12px\",\n  meta: \"2px 12px 4px\",\n  footer: \"8px 12px\",\n  custom: \"8px 12px\",\n};\n\ninterface StyledRowProps {\n  $role: StackRowRole;\n  $bleed?: boolean;\n  $direction: StackRowDirection;\n  $background?: string;\n}\n\nconst StyledRow = styled.div<StyledRowProps>`\n  position: relative;\n  display: flex;\n  flex-direction: ${({ $direction }) => $direction};\n  align-items: ${({ $direction }) =>\n    $direction === \"column\" ? \"stretch\" : \"center\"};\n  gap: ${({ $direction }) => ($direction === \"column\" ? \"4px\" : \"8px\")};\n\n  /* bleed overrides any role and runs the row edge to edge. */\n  padding: ${({ $role, $bleed }) => ($bleed ? \"0\" : ROLE_PADDING[$role])};\n\n  ${({ $background }) =>\n    $background &&\n    css`\n      background: ${$background};\n    `}\n\n  /* Distribution (row direction only): fixed-width children keep their width,\n     the rest share what remains evenly; drop an empty spacer to push items. */\n  ${({ $direction }) =>\n    $direction === \"row\" &&\n    css`\n      > * {\n        flex: 1 1 0;\n        min-width: 0;\n      }\n\n      > [data-fixed] {\n        flex: 0 0 auto;\n      }\n    `}\n`;\n\nexport interface StackRowProps {\n  /** Named role → default padding + allowed direction. Defaults to `custom`. */\n  role?: StackRowRole;\n  /** Zero the padding, overriding the role (media rows, edge-to-edge bands). */\n  bleed?: boolean;\n  /** Footer bands lay their children out vertically. Defaults to `row`. */\n  direction?: StackRowDirection;\n  /** A row can carry its own background (the tinted link-footer band). */\n  background?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nexport const StackRow = ({\n  role = \"custom\",\n  bleed,\n  direction = \"row\",\n  background,\n  className,\n  children,\n}: StackRowProps): ReactElement => (\n  <StyledRow\n    $role={role}\n    $bleed={bleed}\n    $direction={direction}\n    $background={background}\n    className={className}\n  >\n    {children}\n  </StyledRow>\n);\n\n/* ------------------------------------------------------------------ */\n/* Cover — sugar for a bleed row that holds media.                     */\n/* ------------------------------------------------------------------ */\n\n/**\n * The media box reserves its height with `aspect-ratio` so the image (or the\n * skeleton that stands in for it) never reflows the card when it arrives.\n * Controls carry the `sc-control` class and are hidden until the cover is\n * hovered OR holds focus (`:focus-within`) — the focus path keeps the cover\n * controls reachable by keyboard, not mouse-only.\n */\nconst StyledCoverMedia = styled.div<{ $aspectRatio: string }>`\n  position: relative;\n  width: 100%;\n  aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};\n  overflow: hidden;\n\n  .sc-control {\n    opacity: 0;\n    transition: opacity 120ms ease;\n  }\n\n  &:hover .sc-control,\n  &:focus-within .sc-control {\n    opacity: 1;\n  }\n`;\n\n/* The fill (an <img>, an inline <svg> wrapper, or a solid-colour box) is laid\n   over the reserved box and made to cover it. */\nconst StyledCoverFill = styled.div`\n  position: absolute;\n  inset: 0;\n\n  > * {\n    width: 100%;\n    height: 100%;\n  }\n\n  > img {\n    display: block;\n    object-fit: cover;\n  }\n`;\n\nconst StyledCoverCenter = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst StyledCoverTopRight = styled.div`\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  gap: 6px;\n`;\n\n/**\n * Collapsed cover — the media box gives way to a thin strip. The strip is the\n * expand affordance itself: the whole bar is a button, and a chevron hint is\n * revealed on hover OR focus (`.sc-control`, same reveal rule as every other\n * cover control) so it is reachable by keyboard, not mouse-only. The strip\n * holds no reserved height of its own — the caller's `collapsedStrip` (an ~8px\n * colour bar, or a favicon + domain row for links) sets how tall it reads.\n */\nconst StyledCollapsedStrip = styled.button`\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: 16px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  text-align: left;\n\n  .sc-control {\n    opacity: 0;\n    transition: opacity 120ms ease;\n  }\n\n  &:hover .sc-control,\n  &:focus-visible .sc-control {\n    opacity: 1;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--sc-selection-ring);\n    outline-offset: -2px;\n  }\n`;\n\n/* The expand chevron sits at the right, vertically centred over the strip, so\n   it reads the same whether the strip is a hairline colour bar or a taller\n   favicon row. Small + theme-coloured so it fits a thin strip without a scrim\n   button (the whole strip is the button). */\nconst StyledStripExpand = styled.span`\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  transform: translateY(-50%);\n  display: inline-flex;\n  width: 16px;\n  height: 16px;\n  color: var(--color-theme-600);\n\n  svg {\n    width: 14px;\n    height: 14px;\n  }\n`;\n\nexport interface CoverProps {\n  /**\n   * CSS `aspect-ratio` value that reserves the cover's height, e.g.\n   * `\"260 / 132\"`. Kept as a ratio (not a pixel height) so the cover scales\n   * with the card and holds its space before media loads.\n   */\n  aspectRatio?: string;\n  /** Center slot — the media control (a play button over audio/video). */\n  centerSlot?: ReactNode;\n  /** Top-right slot — cover management (collapse, remove). */\n  topRightSlot?: ReactNode;\n  /**\n   * Collapsed cover: render the thin strip instead of the media box. The\n   * collapse *control* lives in the caller's `topRightSlot`; this flag is the\n   * resulting visual state. See the \"Collapsed cover\" story section.\n   */\n  collapsed?: boolean;\n  /**\n   * What the collapsed strip shows — an ~8px colour bar, or a favicon + domain\n   * row for links. Content-specific, so the caller supplies it.\n   */\n  collapsedStrip?: ReactNode;\n  /** Fired when the collapsed strip's expand affordance is activated. */\n  onExpand?: () => void;\n  /** Accessible label for the expand affordance. */\n  expandLabel?: string;\n  className?: string;\n  /** The fill: an `<img>`, an inline `<svg>`, or a solid-colour box. */\n  children: ReactNode;\n}\n\nexport const Cover = ({\n  aspectRatio = \"260 / 132\",\n  centerSlot,\n  topRightSlot,\n  collapsed,\n  collapsedStrip,\n  onExpand,\n  expandLabel = \"Expand cover\",\n  className,\n  children,\n}: CoverProps): ReactElement => (\n  <StackRow role=\"cover\" bleed className={className}>\n    {collapsed ? (\n      <StyledCollapsedStrip\n        type=\"button\"\n        aria-label={expandLabel}\n        onClick={onExpand}\n      >\n        {collapsedStrip}\n        <StyledStripExpand className=\"sc-control\" aria-hidden=\"true\">\n          <ExpandGlyph />\n        </StyledStripExpand>\n      </StyledCollapsedStrip>\n    ) : (\n      <StyledCoverMedia $aspectRatio={aspectRatio}>\n        <StyledCoverFill>{children}</StyledCoverFill>\n        {centerSlot ? (\n          <StyledCoverCenter className=\"sc-control\">\n            {centerSlot}\n          </StyledCoverCenter>\n        ) : null}\n        {topRightSlot ? (\n          <StyledCoverTopRight className=\"sc-control\">\n            {topRightSlot}\n          </StyledCoverTopRight>\n        ) : null}\n      </StyledCoverMedia>\n    )}\n  </StackRow>\n);\n\n/* ------------------------------------------------------------------ */\n/* Cover controls — dark, scrim-backed chrome shared by every story.   */\n/* ------------------------------------------------------------------ */\n\n/* Centered media control (a play button). The caller drops the glyph inside. */\nexport const PlayBadge = styled.span`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  border-radius: 12px;\n  background: var(--sc-scrim);\n  color: var(--sc-scrim-fg);\n\n  svg {\n    fill: currentColor;\n    width: 20px;\n    height: 20px;\n    margin-left: 2px;\n  }\n`;\n\n/* Top-right cover-management button (collapse, remove …). */\nexport const CoverButton = styled.button`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  padding: 0;\n  border: 0;\n  border-radius: 8px;\n  cursor: pointer;\n  color: var(--sc-scrim-fg);\n  background: var(--sc-scrim);\n\n  svg {\n    width: 16px;\n    height: 16px;\n    display: block;\n  }\n\n  &:hover {\n    background: var(--sc-scrim-strong);\n  }\n`;\n\n/* Cover-management glyphs (act on the cover itself, not the entity). */\nexport const CollapseGlyph = (): ReactElement => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n    <path\n      d=\"M6.5 2.5v4h-4M9.5 13.5v-4h4\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\n/* Expand glyph — the inverse of collapse; shown on the collapsed strip. */\nexport const ExpandGlyph = (): ReactElement => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n    <path\n      d=\"M2.5 6.5v-4h4M13.5 9.5v4h-4\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\nexport const RemoveCoverGlyph = (): ReactElement => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n    <rect\n      x=\"2.25\"\n      y=\"3.75\"\n      width=\"11.5\"\n      height=\"8.5\"\n      rx=\"1.5\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n    />\n    <path\n      d=\"M6 9.5L10 6M10 9.5L6 6\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,97 @@
+/**
+ * StackedCard resize policy — pure math (story-local, presentation-only).
+ *
+ * The card only reports deltas; the HOST applies a resize policy (note 52097
+ * §7). This module is that policy, packaged as pure functions so the SAME code
+ * path serves both the pointer drag and the keyboard resize (task 5/8). Nothing
+ * here touches the DOM, React, or the content — it takes a start size, a delta,
+ * and a policy, and returns a clamped size. The story wires events to it; the
+ * card's intrinsic content minimum is measured story-side and passed in as
+ * `contentMin`, so this module knows nothing about heroes or footers.
+ *
+ * The policy has four parts, all preserved from the concept:
+ *  - bounds        — optional min/max per axis; unset means unbounded.
+ *  - proportional  — lock the aspect ratio captured at the start of the gesture;
+ *                    the scale is clamped by the BINDING axis so the ratio never
+ *                    distorts at a bound.
+ *  - step          — optional grid snap; proportion wins over the grid.
+ *  - content min   — the effective min is max(policyMin, contentMin) per axis,
+ *                    so the card can never be crushed below what its content needs.
+ */
+export interface Size {
+    w: number;
+    h: number;
+}
+/** The card's intrinsic minimum, measured from its real content. */
+export interface ContentMin {
+    w: number;
+    h: number;
+}
+export interface Policy {
+    minW?: number;
+    maxW?: number;
+    minH?: number;
+    maxH?: number;
+    /** Lock the aspect ratio for the whole gesture. */
+    proportional: boolean;
+    /** Grid snap increment in px; omitted / 0 means continuous. */
+    step?: number;
+}
+/** The size captured at the start of a gesture (pointer down or a key press). */
+export interface ResizeStart {
+    w: number;
+    h: number;
+    contentMin: ContentMin;
+}
+export interface ResizeDelta {
+    dx: number;
+    dy: number;
+}
+export interface EffectiveBounds {
+    wMin: number;
+    wMax: number;
+    hMin: number;
+    hMax: number;
+}
+/** Keyboard resize nudges by the policy step, or this when no step is set. */
+export declare const DEFAULT_KEYBOARD_STEP = 8;
+/** Shift + arrow resizes by a larger increment (the familiar coarse nudge). */
+export declare const SHIFT_STEP_MULTIPLIER = 4;
+/** Keys the separator handles; everything else falls through to the browser. */
+export declare const RESIZE_KEYS: ReadonlyArray<string>;
+export declare const isResizeKey: (key: string) => boolean;
+export declare const clamp: (v: number, lo: number, hi?: number) => number;
+export declare const snap: (v: number, step?: number) => number;
+export declare const makeStart: (size: Size, contentMin: ContentMin) => ResizeStart;
+/**
+ * The effective bounds a size is clamped to: the policy min floored by the
+ * content min, and the policy max (unbounded when unset). Independent of any
+ * live gesture, so the story can also use it for the aria value and Home/End.
+ */
+export declare const effectiveBounds: (policy: Policy, contentMin: ContentMin) => EffectiveBounds;
+/**
+ * Apply a delta to the start size under the policy — the single path for both
+ * inputs. `constrain` is the transient Shift-to-constrain lock: a free-form
+ * policy behaves proportionally for that one gesture; a proportional policy is
+ * already locked and ignores it.
+ */
+export declare const applyResize: (start: ResizeStart, delta: ResizeDelta, policy: Policy, opts?: {
+    constrain?: boolean;
+}) => Size;
+/**
+ * Translate a resize key into the next size, reusing `applyResize` so the
+ * keyboard clamps exactly like the pointer. Arrows nudge by the step (Shift ×4);
+ * Home/End jump to the min/max of the allowed range. Returns null for any key
+ * the handle does not own.
+ */
+export declare const keyboardResize: (key: string, size: Size, policy: Policy, contentMin: ContentMin, opts?: {
+    shiftKey?: boolean;
+}) => Size | null;
+/**
+ * The handle's `aria-valuenow`: the current size as a percent (0–100) of its
+ * allowed range. The corner resizes both axes, but the value must be a single
+ * number, so it reports the WIDTH axis — the one axis both the fixed-box and the
+ * width-only cards share. Returns 0 when the range isn't finite (no max bound).
+ */
+export declare const measurePercent: (size: Size, policy: Policy, contentMin: ContentMin) => number;
+//# sourceMappingURL=resizePolicy.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resizePolicy.d.ts","sourceRoot":"","sources":["../../../../src/presentation/stackedCard/resizePolicy.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,oEAAoE;AACpE,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,MAAM;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,YAAY,EAAE,OAAO,CAAC;IACtB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,iFAAiF;AACjF,MAAM,WAAW,WAAW;IAC1B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,UAAU,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,8EAA8E;AAC9E,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,+EAA+E;AAC/E,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,gFAAgF;AAChF,eAAO,MAAM,WAAW,EAAE,aAAa,CAAC,MAAM,CAO7C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,KAAG,OAAoC,CAAC;AAE/E,eAAO,MAAM,KAAK,GAAI,GAAG,MAAM,EAAE,IAAI,MAAM,EAAE,KAAK,MAAM,KAAG,MACA,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,GAAG,MAAM,EAAE,OAAO,MAAM,KAAG,MACI,CAAC;AAErD,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,EAAE,YAAY,UAAU,KAAG,WAI7D,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAC1B,QAAQ,MAAM,EACd,YAAY,UAAU,KACrB,eAKD,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GACtB,OAAO,WAAW,EAClB,OAAO,WAAW,EAClB,QAAQ,MAAM,EACd,OAAM;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAO,KACjC,IAoCF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GACzB,KAAK,MAAM,EACX,MAAM,IAAI,EACV,QAAQ,MAAM,EACd,YAAY,UAAU,EACtB,OAAM;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAO,KAChC,IAAI,GAAG,IAoCT,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GACzB,MAAM,IAAI,EACV,QAAQ,MAAM,EACd,YAAY,UAAU,KACrB,MAIF,CAAC"}