@activecollab/components 2.0.369 → 2.0.370

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

@@ -1 +1 @@
-{"version":3,"file":"shared.js","names":["_react","_interopRequireDefault","require","_styledComponents","_interopRequireWildcard","_Icons","_Typography","_Typography2","_primitives","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","length","indexOf","propertyIsEnumerable","_extends","assign","bind","arguments","apply","playControl","exports","createElement","PlayBadge","PlayIcon","coverManagement","_ref","undefined","_ref$removeLabel","removeLabel","onCollapse","onRemove","Fragment","CoverButton","type","onClick","CollapseGlyph","RemoveCoverGlyph","StyledEntityDots","styled","button","withConfig","displayName","componentId","EntityDots","props","className","TreeDotsIcon","StyledClamp","Body2","StyledFavicon","span","_ref2","$bg","StyledChip","StyledColorCover","div","_ref3","$color","StyledPlaceholder","_ref4","$height","_ref5","$dashed","css","Placeholder","_ref6","icon","label","height","dashed","rest","Typography","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":[]}
+{"version":3,"file":"shared.js","names":["_react","_interopRequireDefault","require","_styledComponents","_interopRequireWildcard","_Icons","_StackedCard","_Typography","_Typography2","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","length","indexOf","propertyIsEnumerable","_extends","assign","bind","arguments","apply","COVER_RATIO_HERO","exports","COVER_RATIO_IMAGE","COVER_RATIO_SWATCH","playControl","createElement","StackedCardPlayBadge","PlayIcon","coverManagement","_ref","undefined","_ref$removeLabel","removeLabel","onCollapse","onRemove","Fragment","StackedCardCoverButton","type","onClick","StackedCardCollapseGlyph","StackedCardRemoveCoverGlyph","StyledEntityDots","styled","button","withConfig","displayName","componentId","EntityDots","props","className","STACKED_CARD_CONTROL_CLASS","TreeDotsIcon","StyledClamp","Body2","StyledFavicon","span","_ref2","$bg","StyledChip","StyledColorCover","div","_ref3","$color","StyledPlaceholder","_ref4","$height","_ref5","$dashed","css","Placeholder","_ref6","icon","label","height","dashed","rest","Typography","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 {\n  STACKED_CARD_CONTROL_CLASS,\n  StackedCardCollapseGlyph as CollapseGlyph,\n  StackedCardCoverButton as CoverButton,\n  StackedCardPlayBadge as PlayBadge,\n  StackedCardRemoveCoverGlyph as RemoveCoverGlyph,\n} from \"../../../components/StackedCard\";\nimport { Body2 } from \"../../../components/Typography\";\nimport { Typography } from \"../../../components/Typography/Typography\";\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 * The card itself — the shell, the Stack/StackRow/Cover primitives and the\n * cover chrome — is the shipped design-system component,\n * `components/StackedCard`. These stories import it under the concept\n * vocabulary (Cover, StackRow, …) so the spec prose and the code keep using\n * the same words.\n */\n\n/* ------------------------------------------------------------------ */\n/* Per-type cover ratios                                               */\n/* ------------------------------------------------------------------ */\n\n/**\n * The design system ships one default cover ratio\n * (`STACKED_CARD_COVER_RATIO`). How tall a cover reads is a decision of the\n * content type, so the variants live here with the content: a link hero, a\n * full-bleed image, a colour swatch band.\n */\nexport const COVER_RATIO_HERO = \"320 / 190\";\nexport const COVER_RATIO_IMAGE = \"260 / 168\";\nexport const COVER_RATIO_SWATCH = \"260 / 104\";\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={STACKED_CARD_CONTROL_CLASS}\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/cjs/presentation/stackedCard/storyScaffold.js

@@ -10,13 +10,15 @@ var _Typography = require("../../components/Typography");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Shared spec-sheet scaffolding for the StackedCard concept stories (Sheet,
- * Section, Labeled, Grid, Column) plus the DS token candidates the subsystem
- * needs. Presentation-only; keeps the three StackedCard stories laying out the
- * same way instead of each re-declaring the sheet chrome.
+ * Section, Labeled, Grid, Column) plus the sheet's `--sc-*` values.
+ * Presentation-only; keeps the StackedCard stories laying out the same way
+ * instead of each re-declaring the sheet chrome.
  *
- * The `--sc-*` variables are declared here as design-system PROPOSALS (a
- * selection ring + a dark scrim family). The shell and primitives reference
- * these only, so no rgba/hex is baked into a reusable style.
+ * The `--sc-*` variables (a selection ring + a dark scrim family) are the
+ * shipped component's theming hooks: `components/StackedCard` reads each one
+ * through a `var()` with a built-in fallback, and declaring them here on the
+ * sheet retints every card inside it. No rgba/hex is baked into a reusable
+ * style.
  */
 
 var StyledSheet = exports.StyledSheet = _styledComponents.default.div.withConfig({

package/dist/cjs/presentation/stackedCard/storyScaffold.js.map

@@ -1 +1 @@
-{"version":3,"file":"storyScaffold.js","names":["_react","_interopRequireDefault","require","_styledComponents","_Typography","e","__esModule","default","StyledSheet","exports","styled","div","withConfig","displayName","componentId","StyledSection","section","StyledGrid","StyledColumn","StyledLabeled","figure","Labeled","_ref","label","children","createElement","Caption1","color","Section","_ref2","caption","note","weight","className","SheetHeading","_ref3","title","Fragment","Title2"],"sources":["../../../../src/presentation/stackedCard/storyScaffold.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { Caption1, Title2 } from \"../../components/Typography\";\n\n/**\n * Shared spec-sheet scaffolding for the StackedCard concept stories (Sheet,\n * Section, Labeled, Grid, Column) plus the DS token candidates the subsystem\n * needs. Presentation-only; keeps the three StackedCard stories laying out the\n * same way instead of each re-declaring the sheet chrome.\n *\n * The `--sc-*` variables are declared here as design-system PROPOSALS (a\n * selection ring + a dark scrim family). The shell and primitives reference\n * these only, so no rgba/hex is baked into a reusable style.\n */\n\nexport const StyledSheet = styled.div`\n  --sc-selection-ring: var(--color-primary-500, #2f6bff);\n  --sc-scrim: rgba(0, 0, 0, 0.55);\n  --sc-scrim-strong: rgba(0, 0, 0, 0.72);\n  --sc-scrim-fg: #ffffff;\n  --sc-completed-tint: rgba(72, 201, 176, 0.16);\n\n  min-height: 100vh;\n  padding: 32px 40px 64px;\n  background: var(--page-paper-dimmed, var(--color-theme-200));\n\n  .sheet-title {\n    margin-bottom: 8px;\n  }\n\n  .sheet-lede {\n    display: block;\n    margin-bottom: 24px;\n    max-width: 760px;\n  }\n`;\n\nconst StyledSection = styled.section`\n  margin-top: 40px;\n\n  > .section-caption {\n    display: block;\n    margin-bottom: 4px;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n  }\n\n  > .section-note {\n    display: block;\n    margin-bottom: 16px;\n    max-width: 720px;\n  }\n`;\n\nexport const StyledGrid = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  gap: 24px;\n  align-items: flex-start;\n`;\n\nexport const StyledColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n\nconst StyledLabeled = styled.figure`\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  > figcaption {\n    order: -1;\n    max-width: 320px;\n  }\n`;\n\nexport const Labeled = ({\n  label,\n  children,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n}): ReactElement => (\n  <StyledLabeled>\n    <figcaption>\n      <Caption1 color=\"secondary\">{label}</Caption1>\n    </figcaption>\n    {children}\n  </StyledLabeled>\n);\n\nexport const Section = ({\n  caption,\n  note,\n  children,\n}: {\n  caption: string;\n  note?: ReactNode;\n  children: ReactNode;\n}): ReactElement => (\n  <StyledSection>\n    <Caption1 weight=\"bold\" color=\"tertiary\" className=\"section-caption\">\n      {caption}\n    </Caption1>\n    {note ? (\n      <Caption1 color=\"tertiary\" className=\"section-note\">\n        {note}\n      </Caption1>\n    ) : null}\n    <StyledGrid>{children}</StyledGrid>\n  </StyledSection>\n);\n\nexport const SheetHeading = ({\n  title,\n  children,\n}: {\n  title: string;\n  children: ReactNode;\n}): ReactElement => (\n  <>\n    <Title2 className=\"sheet-title\">{title}</Title2>\n    <Caption1 color=\"tertiary\" className=\"sheet-lede\">\n      {children}\n    </Caption1>\n  </>\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"storyScaffold.js","names":["_react","_interopRequireDefault","require","_styledComponents","_Typography","e","__esModule","default","StyledSheet","exports","styled","div","withConfig","displayName","componentId","StyledSection","section","StyledGrid","StyledColumn","StyledLabeled","figure","Labeled","_ref","label","children","createElement","Caption1","color","Section","_ref2","caption","note","weight","className","SheetHeading","_ref3","title","Fragment","Title2"],"sources":["../../../../src/presentation/stackedCard/storyScaffold.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { Caption1, Title2 } from \"../../components/Typography\";\n\n/**\n * Shared spec-sheet scaffolding for the StackedCard concept stories (Sheet,\n * Section, Labeled, Grid, Column) plus the sheet's `--sc-*` values.\n * Presentation-only; keeps the StackedCard stories laying out the same way\n * instead of each re-declaring the sheet chrome.\n *\n * The `--sc-*` variables (a selection ring + a dark scrim family) are the\n * shipped component's theming hooks: `components/StackedCard` reads each one\n * through a `var()` with a built-in fallback, and declaring them here on the\n * sheet retints every card inside it. No rgba/hex is baked into a reusable\n * style.\n */\n\nexport const StyledSheet = styled.div`\n  --sc-selection-ring: var(--color-primary-500, #2f6bff);\n  --sc-scrim: rgba(0, 0, 0, 0.55);\n  --sc-scrim-strong: rgba(0, 0, 0, 0.72);\n  --sc-scrim-fg: #ffffff;\n  --sc-completed-tint: rgba(72, 201, 176, 0.16);\n\n  min-height: 100vh;\n  padding: 32px 40px 64px;\n  background: var(--page-paper-dimmed, var(--color-theme-200));\n\n  .sheet-title {\n    margin-bottom: 8px;\n  }\n\n  .sheet-lede {\n    display: block;\n    margin-bottom: 24px;\n    max-width: 760px;\n  }\n`;\n\nconst StyledSection = styled.section`\n  margin-top: 40px;\n\n  > .section-caption {\n    display: block;\n    margin-bottom: 4px;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n  }\n\n  > .section-note {\n    display: block;\n    margin-bottom: 16px;\n    max-width: 720px;\n  }\n`;\n\nexport const StyledGrid = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  gap: 24px;\n  align-items: flex-start;\n`;\n\nexport const StyledColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n\nconst StyledLabeled = styled.figure`\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  > figcaption {\n    order: -1;\n    max-width: 320px;\n  }\n`;\n\nexport const Labeled = ({\n  label,\n  children,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n}): ReactElement => (\n  <StyledLabeled>\n    <figcaption>\n      <Caption1 color=\"secondary\">{label}</Caption1>\n    </figcaption>\n    {children}\n  </StyledLabeled>\n);\n\nexport const Section = ({\n  caption,\n  note,\n  children,\n}: {\n  caption: string;\n  note?: ReactNode;\n  children: ReactNode;\n}): ReactElement => (\n  <StyledSection>\n    <Caption1 weight=\"bold\" color=\"tertiary\" className=\"section-caption\">\n      {caption}\n    </Caption1>\n    {note ? (\n      <Caption1 color=\"tertiary\" className=\"section-note\">\n        {note}\n      </Caption1>\n    ) : null}\n    <StyledGrid>{children}</StyledGrid>\n  </StyledSection>\n);\n\nexport const SheetHeading = ({\n  title,\n  children,\n}: {\n  title: string;\n  children: ReactNode;\n}): ReactElement => (\n  <>\n    <Title2 className=\"sheet-title\">{title}</Title2>\n    <Caption1 color=\"tertiary\" className=\"sheet-lede\">\n      {children}\n    </Caption1>\n  </>\n);\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/StackedCard/Glyphs.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from "react";
+/**
+ * StackedCard chrome glyphs.
+ *
+ * These are part of the card's own chrome — they act on the CARD (collapse the
+ * cover, remove the cover, resize the card), never on the entity a card
+ * represents. They ship with the component rather than coming from the icon
+ * collection so a facade never has to re-pick them and every stacked card
+ * reads the same.
+ */
+/** Collapse the cover down to its thin strip. */
+export declare const StackedCardCollapseGlyph: () => ReactElement;
+/** Expand a collapsed cover — the inverse of collapse, shown on the strip. */
+export declare const StackedCardExpandGlyph: () => ReactElement;
+/** Drop the cover entirely. */
+export declare const StackedCardRemoveCoverGlyph: () => ReactElement;
+/** The bottom-right resize grip. */
+export declare const StackedCardResizeHandleGlyph: () => ReactElement;
+//# sourceMappingURL=Glyphs.d.ts.map

package/dist/esm/components/StackedCard/Glyphs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Glyphs.d.ts","sourceRoot":"","sources":["../../../../src/components/StackedCard/Glyphs.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;;;;;GAQG;AAEH,iDAAiD;AACjD,eAAO,MAAM,wBAAwB,QAAO,YAU3C,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,sBAAsB,QAAO,YAUzC,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,2BAA2B,QAAO,YAkB9C,CAAC;AAEF,oCAAoC;AACpC,eAAO,MAAM,4BAA4B,QAAO,YAe/C,CAAC"}

package/dist/esm/components/StackedCard/Glyphs.js

@@ -0,0 +1,72 @@
+import React from "react";
+
+/**
+ * StackedCard chrome glyphs.
+ *
+ * These are part of the card's own chrome — they act on the CARD (collapse the
+ * cover, remove the cover, resize the card), never on the entity a card
+ * represents. They ship with the component rather than coming from the icon
+ * collection so a facade never has to re-pick them and every stacked card
+ * reads the same.
+ */
+
+/** Collapse the cover down to its thin strip. */
+export const StackedCardCollapseGlyph = () => /*#__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 a collapsed cover — the inverse of collapse, shown on the strip. */
+export const StackedCardExpandGlyph = () => /*#__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"
+}));
+
+/** Drop the cover entirely. */
+export const StackedCardRemoveCoverGlyph = () => /*#__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"
+}));
+
+/** The bottom-right resize grip. */
+export const StackedCardResizeHandleGlyph = () => /*#__PURE__*/React.createElement("svg", {
+  width: "14",
+  height: "14",
+  viewBox: "0 0 14 14",
+  fill: "none",
+  "aria-hidden": "true"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M12 6v6H6M12 9.5L9.5 12",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round"
+}));
+//# sourceMappingURL=Glyphs.js.map

package/dist/esm/components/StackedCard/Glyphs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Glyphs.js","names":["React","StackedCardCollapseGlyph","createElement","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","StackedCardExpandGlyph","StackedCardRemoveCoverGlyph","x","y","width","height","rx","StackedCardResizeHandleGlyph"],"sources":["../../../../src/components/StackedCard/Glyphs.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\n/**\n * StackedCard chrome glyphs.\n *\n * These are part of the card's own chrome — they act on the CARD (collapse the\n * cover, remove the cover, resize the card), never on the entity a card\n * represents. They ship with the component rather than coming from the icon\n * collection so a facade never has to re-pick them and every stacked card\n * reads the same.\n */\n\n/** Collapse the cover down to its thin strip. */\nexport const StackedCardCollapseGlyph = (): 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 a collapsed cover — the inverse of collapse, shown on the strip. */\nexport const StackedCardExpandGlyph = (): 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\n/** Drop the cover entirely. */\nexport const StackedCardRemoveCoverGlyph = (): 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\n/** The bottom-right resize grip. */\nexport const StackedCardResizeHandleGlyph = (): ReactElement => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 14 14\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M12 6v6H6M12 9.5L9.5 12\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAwB,OAAO;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,OAAO,MAAMC,wBAAwB,GAAGA,CAAA,kBACtCD,KAAA,CAAAE,aAAA;EAAKC,OAAO,EAAC,WAAW;EAACC,IAAI,EAAC,MAAM;EAAC,eAAY;AAAM,gBACrDJ,KAAA,CAAAE,aAAA;EACEG,CAAC,EAAC,6BAA6B;EAC/BC,MAAM,EAAC,cAAc;EACrBC,WAAW,EAAC,KAAK;EACjBC,aAAa,EAAC,OAAO;EACrBC,cAAc,EAAC;AAAO,CACvB,CACE,CACN;;AAED;AACA,OAAO,MAAMC,sBAAsB,GAAGA,CAAA,kBACpCV,KAAA,CAAAE,aAAA;EAAKC,OAAO,EAAC,WAAW;EAACC,IAAI,EAAC,MAAM;EAAC,eAAY;AAAM,gBACrDJ,KAAA,CAAAE,aAAA;EACEG,CAAC,EAAC,6BAA6B;EAC/BC,MAAM,EAAC,cAAc;EACrBC,WAAW,EAAC,KAAK;EACjBC,aAAa,EAAC,OAAO;EACrBC,cAAc,EAAC;AAAO,CACvB,CACE,CACN;;AAED;AACA,OAAO,MAAME,2BAA2B,GAAGA,CAAA,kBACzCX,KAAA,CAAAE,aAAA;EAAKC,OAAO,EAAC,WAAW;EAACC,IAAI,EAAC,MAAM;EAAC,eAAY;AAAM,gBACrDJ,KAAA,CAAAE,aAAA;EACEU,CAAC,EAAC,MAAM;EACRC,CAAC,EAAC,MAAM;EACRC,KAAK,EAAC,MAAM;EACZC,MAAM,EAAC,KAAK;EACZC,EAAE,EAAC,KAAK;EACRV,MAAM,EAAC,cAAc;EACrBC,WAAW,EAAC;AAAK,CAClB,CAAC,eACFP,KAAA,CAAAE,aAAA;EACEG,CAAC,EAAC,wBAAwB;EAC1BC,MAAM,EAAC,cAAc;EACrBC,WAAW,EAAC,KAAK;EACjBC,aAAa,EAAC;AAAO,CACtB,CACE,CACN;;AAED;AACA,OAAO,MAAMS,4BAA4B,GAAGA,CAAA,kBAC1CjB,KAAA,CAAAE,aAAA;EACEY,KAAK,EAAC,IAAI;EACVC,MAAM,EAAC,IAAI;EACXZ,OAAO,EAAC,WAAW;EACnBC,IAAI,EAAC,MAAM;EACX,eAAY;AAAM,gBAElBJ,KAAA,CAAAE,aAAA;EACEG,CAAC,EAAC,yBAAyB;EAC3BC,MAAM,EAAC,cAAc;EACrBC,WAAW,EAAC,KAAK;EACjBC,aAAa,EAAC;AAAO,CACtB,CACE,CACN","ignoreList":[]}

package/dist/esm/components/StackedCard/Primitives.d.ts

@@ -0,0 +1,91 @@
+import React, { ReactElement, ReactNode } from "react";
+import { StackedCardRowDirection, StackedCardRowRole } from "./constants";
+/**
+ * StackedCard layout primitives.
+ *
+ * A stacked card is a portrait presentation of data: content stacks top to
+ * bottom in rows. There are three primitives and nothing else —
+ *
+ *  - StackedCardStack — the vertical column. A card IS a stack of rows; the
+ *    primitive is exported for nested stacks (a row that stacks internally).
+ *  - StackedCardRow   — the one layout primitive. Cover, title, meta, footer
+ *    are all rows; a `role` sets the default padding so the anatomy stays
+ *    predictable across every card type.
+ *  - StackedCardCover — sugar for a bleed row that holds media, reserves its
+ *    height with `aspect-ratio` so a late image never reflows the card, and
+ *    carries two control slots (center + top-right).
+ */
+/** A vertical flex column with no padding of its own. */
+export declare const StackedCardStack: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface IStackedCardRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
+    /**
+     * Named layout role → default padding. Defaults to `custom`.
+     *
+     * This shadows the DOM `role` attribute on purpose: a row is a layout
+     * increment, and the concept's vocabulary for it is the role. Rows that need
+     * an ARIA role should carry it on their own content.
+     */
+    role?: StackedCardRowRole;
+    /** 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?: StackedCardRowDirection;
+    /** A row can carry its own background (a tinted footer band, a state tint). */
+    background?: string;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * One row of a card's stack.
+ *
+ * In `row` direction the first level of children is distributed evenly along
+ * the X axis; a child carrying the `data-fixed` attribute keeps its own width
+ * and the rest share what remains.
+ */
+export declare const StackedCardRow: React.ForwardRefExoticComponent<IStackedCardRowProps & React.RefAttributes<HTMLDivElement>>;
+export interface IStackedCardCoverProps {
+    /**
+     * CSS `aspect-ratio` value that reserves the cover's height, e.g.
+     * `"260 / 132"`. A ratio, not a pixel height, so the cover scales with the
+     * card and holds its space before the 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;
+    /**
+     * Render the thin collapsed strip instead of the media box. The collapse
+     * CONTROL lives in the caller's `topRightSlot`; this flag is the resulting
+     * visual state.
+     */
+    collapsed?: boolean;
+    /**
+     * What the collapsed strip shows — an ~8px colour bar, a favicon + domain
+     * row. 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;
+}
+/**
+ * A bleed row that holds media.
+ *
+ * Controls in either slot are revealed on hover OR focus-within, so they stay
+ * reachable by keyboard. Collapsed, the media box gives way to a strip that is
+ * itself the expand button.
+ */
+export declare const StackedCardCover: {
+    ({ aspectRatio, centerSlot, topRightSlot, collapsed, collapsedStrip, onExpand, expandLabel, className, children, }: IStackedCardCoverProps): ReactElement;
+    displayName: string;
+};
+/** Centered media control (a play button). Drop the glyph inside. */
+export declare const StackedCardPlayBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+/** Top-right cover-management button (collapse, remove …). */
+export declare const StackedCardCoverButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+//# sourceMappingURL=Primitives.d.ts.map

package/dist/esm/components/StackedCard/Primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Primitives.d.ts","sourceRoot":"","sources":["../../../../src/components/StackedCard/Primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,EAGL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAerB;;;;;;;;;;;;;;GAcG;AAMH,yDAAyD;AACzD,eAAO,MAAM,gBAAgB,oEAAyB,CAAC;AAMvD,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IAC1D;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yEAAyE;IACzE,SAAS,CAAC,EAAE,uBAAuB,CAAC;IACpC,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,6FAiC1B,CAAC;AAQF,MAAM,WAAW,sBAAsB;IACrC;;;;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;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;wHAU1B,sBAAsB,GAAG,YAAY;;CA0CvC,CAAC;AAQF,qEAAqE;AACrE,eAAO,MAAM,oBAAoB,qEAA6B,CAAC;AAE/D,8DAA8D;AAC9D,eAAO,MAAM,sBAAsB,uEAA+B,CAAC"}

package/dist/esm/components/StackedCard/Primitives.js

@@ -0,0 +1,122 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["role", "bleed", "direction", "background", "className", "children"];
+import React from "react";
+import classnames from "classnames";
+import { STACKED_CARD_CONTROL_CLASS, STACKED_CARD_COVER_RATIO } from "./constants";
+import { StackedCardExpandGlyph } from "./Glyphs";
+import { StyledStackedCardCollapsedStrip, StyledStackedCardCoverButton, StyledStackedCardCoverCenter, StyledStackedCardCoverFill, StyledStackedCardCoverMedia, StyledStackedCardCoverTopRight, StyledStackedCardPlayBadge, StyledStackedCardRow, StyledStackedCardStack, StyledStackedCardStripExpand } from "./Styles";
+
+/**
+ * StackedCard layout primitives.
+ *
+ * A stacked card is a portrait presentation of data: content stacks top to
+ * bottom in rows. There are three primitives and nothing else —
+ *
+ *  - StackedCardStack — the vertical column. A card IS a stack of rows; the
+ *    primitive is exported for nested stacks (a row that stacks internally).
+ *  - StackedCardRow   — the one layout primitive. Cover, title, meta, footer
+ *    are all rows; a `role` sets the default padding so the anatomy stays
+ *    predictable across every card type.
+ *  - StackedCardCover — sugar for a bleed row that holds media, reserves its
+ *    height with `aspect-ratio` so a late image never reflows the card, and
+ *    carries two control slots (center + top-right).
+ */
+
+/* ------------------------------------------------------------------ */
+/* Stack                                                               */
+/* ------------------------------------------------------------------ */
+
+/** A vertical flex column with no padding of its own. */
+export const StackedCardStack = StyledStackedCardStack;
+
+/* ------------------------------------------------------------------ */
+/* Row                                                                 */
+/* ------------------------------------------------------------------ */
+
+/**
+ * One row of a card's stack.
+ *
+ * In `row` direction the first level of children is distributed evenly along
+ * the X axis; a child carrying the `data-fixed` attribute keeps its own width
+ * and the rest share what remains.
+ */
+export const StackedCardRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let _ref$role = _ref.role,
+    role = _ref$role === void 0 ? "custom" : _ref$role,
+    bleed = _ref.bleed,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "row" : _ref$direction,
+    background = _ref.background,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledStackedCardRow, _extends({
+    ref: ref,
+    $role: role,
+    $bleed: bleed,
+    $direction: direction,
+    $background: background,
+    className: classnames("c-stacked-card__row", "c-stacked-card__row--" + role, {
+      "c-stacked-card__row--bleed": bleed
+    }, className)
+  }, rest), children);
+});
+StackedCardRow.displayName = "StackedCardRow";
+
+/* ------------------------------------------------------------------ */
+/* Cover                                                               */
+/* ------------------------------------------------------------------ */
+
+/**
+ * A bleed row that holds media.
+ *
+ * Controls in either slot are revealed on hover OR focus-within, so they stay
+ * reachable by keyboard. Collapsed, the media box gives way to a strip that is
+ * itself the expand button.
+ */
+export const StackedCardCover = _ref2 => {
+  let _ref2$aspectRatio = _ref2.aspectRatio,
+    aspectRatio = _ref2$aspectRatio === void 0 ? STACKED_CARD_COVER_RATIO : _ref2$aspectRatio,
+    centerSlot = _ref2.centerSlot,
+    topRightSlot = _ref2.topRightSlot,
+    collapsed = _ref2.collapsed,
+    collapsedStrip = _ref2.collapsedStrip,
+    onExpand = _ref2.onExpand,
+    _ref2$expandLabel = _ref2.expandLabel,
+    expandLabel = _ref2$expandLabel === void 0 ? "Expand cover" : _ref2$expandLabel,
+    className = _ref2.className,
+    children = _ref2.children;
+  return /*#__PURE__*/React.createElement(StackedCardRow, {
+    role: "cover",
+    bleed: true,
+    className: classnames("c-stacked-card__cover", className)
+  }, collapsed ? /*#__PURE__*/React.createElement(StyledStackedCardCollapsedStrip, {
+    type: "button",
+    "aria-label": expandLabel,
+    onClick: onExpand,
+    className: "c-stacked-card__cover-strip"
+  }, collapsedStrip, /*#__PURE__*/React.createElement(StyledStackedCardStripExpand, {
+    className: STACKED_CARD_CONTROL_CLASS,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(StackedCardExpandGlyph, null))) : /*#__PURE__*/React.createElement(StyledStackedCardCoverMedia, {
+    $aspectRatio: aspectRatio,
+    className: "c-stacked-card__cover-media"
+  }, /*#__PURE__*/React.createElement(StyledStackedCardCoverFill, null, children), centerSlot ? /*#__PURE__*/React.createElement(StyledStackedCardCoverCenter, {
+    className: STACKED_CARD_CONTROL_CLASS
+  }, centerSlot) : null, topRightSlot ? /*#__PURE__*/React.createElement(StyledStackedCardCoverTopRight, {
+    className: STACKED_CARD_CONTROL_CLASS
+  }, topRightSlot) : null));
+};
+StackedCardCover.displayName = "StackedCardCover";
+
+/* ------------------------------------------------------------------ */
+/* Cover chrome                                                        */
+/* ------------------------------------------------------------------ */
+
+/** Centered media control (a play button). Drop the glyph inside. */
+export const StackedCardPlayBadge = StyledStackedCardPlayBadge;
+
+/** Top-right cover-management button (collapse, remove …). */
+export const StackedCardCoverButton = StyledStackedCardCoverButton;
+//# sourceMappingURL=Primitives.js.map

package/dist/esm/components/StackedCard/Primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Primitives.js","names":["React","classnames","STACKED_CARD_CONTROL_CLASS","STACKED_CARD_COVER_RATIO","StackedCardExpandGlyph","StyledStackedCardCollapsedStrip","StyledStackedCardCoverButton","StyledStackedCardCoverCenter","StyledStackedCardCoverFill","StyledStackedCardCoverMedia","StyledStackedCardCoverTopRight","StyledStackedCardPlayBadge","StyledStackedCardRow","StyledStackedCardStack","StyledStackedCardStripExpand","StackedCardStack","StackedCardRow","forwardRef","_ref","ref","_ref$role","role","bleed","_ref$direction","direction","background","className","children","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","$role","$bleed","$direction","$background","displayName","StackedCardCover","_ref2","_ref2$aspectRatio","aspectRatio","centerSlot","topRightSlot","collapsed","collapsedStrip","onExpand","_ref2$expandLabel","expandLabel","type","onClick","$aspectRatio","StackedCardPlayBadge","StackedCardCoverButton"],"sources":["../../../../src/components/StackedCard/Primitives.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  STACKED_CARD_CONTROL_CLASS,\n  STACKED_CARD_COVER_RATIO,\n  StackedCardRowDirection,\n  StackedCardRowRole,\n} from \"./constants\";\nimport { StackedCardExpandGlyph } from \"./Glyphs\";\nimport {\n  StyledStackedCardCollapsedStrip,\n  StyledStackedCardCoverButton,\n  StyledStackedCardCoverCenter,\n  StyledStackedCardCoverFill,\n  StyledStackedCardCoverMedia,\n  StyledStackedCardCoverTopRight,\n  StyledStackedCardPlayBadge,\n  StyledStackedCardRow,\n  StyledStackedCardStack,\n  StyledStackedCardStripExpand,\n} from \"./Styles\";\n\n/**\n * StackedCard layout primitives.\n *\n * A stacked card is a portrait presentation of data: content stacks top to\n * bottom in rows. There are three primitives and nothing else —\n *\n *  - StackedCardStack — the vertical column. A card IS a stack of rows; the\n *    primitive is exported for nested stacks (a row that stacks internally).\n *  - StackedCardRow   — the one layout primitive. Cover, title, meta, footer\n *    are all rows; a `role` sets the default padding so the anatomy stays\n *    predictable across every card type.\n *  - StackedCardCover — sugar for a bleed row that holds media, reserves its\n *    height with `aspect-ratio` so a late image never reflows the card, and\n *    carries two control slots (center + top-right).\n */\n\n/* ------------------------------------------------------------------ */\n/* Stack                                                               */\n/* ------------------------------------------------------------------ */\n\n/** A vertical flex column with no padding of its own. */\nexport const StackedCardStack = StyledStackedCardStack;\n\n/* ------------------------------------------------------------------ */\n/* Row                                                                 */\n/* ------------------------------------------------------------------ */\n\nexport interface IStackedCardRowProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"role\"> {\n  /**\n   * Named layout role → default padding. Defaults to `custom`.\n   *\n   * This shadows the DOM `role` attribute on purpose: a row is a layout\n   * increment, and the concept's vocabulary for it is the role. Rows that need\n   * an ARIA role should carry it on their own content.\n   */\n  role?: StackedCardRowRole;\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?: StackedCardRowDirection;\n  /** A row can carry its own background (a tinted footer band, a state tint). */\n  background?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * One row of a card's stack.\n *\n * In `row` direction the first level of children is distributed evenly along\n * the X axis; a child carrying the `data-fixed` attribute keeps its own width\n * and the rest share what remains.\n */\nexport const StackedCardRow = React.forwardRef<\n  HTMLDivElement,\n  IStackedCardRowProps\n>(\n  (\n    {\n      role = \"custom\",\n      bleed,\n      direction = \"row\",\n      background,\n      className,\n      children,\n      ...rest\n    },\n    ref\n  ): ReactElement => (\n    <StyledStackedCardRow\n      ref={ref}\n      $role={role}\n      $bleed={bleed}\n      $direction={direction}\n      $background={background}\n      className={classnames(\n        \"c-stacked-card__row\",\n        `c-stacked-card__row--${role}`,\n        { \"c-stacked-card__row--bleed\": bleed },\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </StyledStackedCardRow>\n  )\n);\n\nStackedCardRow.displayName = \"StackedCardRow\";\n\n/* ------------------------------------------------------------------ */\n/* Cover                                                               */\n/* ------------------------------------------------------------------ */\n\nexport interface IStackedCardCoverProps {\n  /**\n   * CSS `aspect-ratio` value that reserves the cover's height, e.g.\n   * `\"260 / 132\"`. A ratio, not a pixel height, so the cover scales with the\n   * card and holds its space before the 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   * Render the thin collapsed strip instead of the media box. The collapse\n   * CONTROL lives in the caller's `topRightSlot`; this flag is the resulting\n   * visual state.\n   */\n  collapsed?: boolean;\n  /**\n   * What the collapsed strip shows — an ~8px colour bar, a favicon + domain\n   * row. 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\n/**\n * A bleed row that holds media.\n *\n * Controls in either slot are revealed on hover OR focus-within, so they stay\n * reachable by keyboard. Collapsed, the media box gives way to a strip that is\n * itself the expand button.\n */\nexport const StackedCardCover = ({\n  aspectRatio = STACKED_CARD_COVER_RATIO,\n  centerSlot,\n  topRightSlot,\n  collapsed,\n  collapsedStrip,\n  onExpand,\n  expandLabel = \"Expand cover\",\n  className,\n  children,\n}: IStackedCardCoverProps): ReactElement => (\n  <StackedCardRow\n    role=\"cover\"\n    bleed\n    className={classnames(\"c-stacked-card__cover\", className)}\n  >\n    {collapsed ? (\n      <StyledStackedCardCollapsedStrip\n        type=\"button\"\n        aria-label={expandLabel}\n        onClick={onExpand}\n        className=\"c-stacked-card__cover-strip\"\n      >\n        {collapsedStrip}\n        <StyledStackedCardStripExpand\n          className={STACKED_CARD_CONTROL_CLASS}\n          aria-hidden=\"true\"\n        >\n          <StackedCardExpandGlyph />\n        </StyledStackedCardStripExpand>\n      </StyledStackedCardCollapsedStrip>\n    ) : (\n      <StyledStackedCardCoverMedia\n        $aspectRatio={aspectRatio}\n        className=\"c-stacked-card__cover-media\"\n      >\n        <StyledStackedCardCoverFill>{children}</StyledStackedCardCoverFill>\n        {centerSlot ? (\n          <StyledStackedCardCoverCenter className={STACKED_CARD_CONTROL_CLASS}>\n            {centerSlot}\n          </StyledStackedCardCoverCenter>\n        ) : null}\n        {topRightSlot ? (\n          <StyledStackedCardCoverTopRight\n            className={STACKED_CARD_CONTROL_CLASS}\n          >\n            {topRightSlot}\n          </StyledStackedCardCoverTopRight>\n        ) : null}\n      </StyledStackedCardCoverMedia>\n    )}\n  </StackedCardRow>\n);\n\nStackedCardCover.displayName = \"StackedCardCover\";\n\n/* ------------------------------------------------------------------ */\n/* Cover chrome                                                        */\n/* ------------------------------------------------------------------ */\n\n/** Centered media control (a play button). Drop the glyph inside. */\nexport const StackedCardPlayBadge = StyledStackedCardPlayBadge;\n\n/** Top-right cover-management button (collapse, remove …). */\nexport const StackedCardCoverButton = StyledStackedCardCoverButton;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/StackedCard/StackedCard.d.ts

@@ -0,0 +1,74 @@
+import React, { ReactNode } from "react";
+/**
+ * StackedCard — the hollow shell for cards on drag-and-drop surfaces.
+ *
+ * This is NOT the base for cards in lists. It is the card for surfaces where
+ * dragging is a primary interaction: column boards and canvases. Content is
+ * laid out top to bottom in `StackedCardRow`s, which makes every card a
+ * portrait presentation of its data.
+ *
+ * ── The rule the whole subsystem hangs on ──────────────────────────────────
+ * THE SHELL STAYS HOLLOW. There is no `contentType` enum here, no per-type
+ * prop soup, no `if task …`. The shell owns only VISUAL STATES (selected,
+ * disabled, pending, priority, drag source/preview, entered) and one intent
+ * callback (`onResizeDelta`). Content is passed as `children` and composes the
+ * layout primitives. Typed cards — an ImageCard, a LinkCard, a TaskCard — are
+ * facades built on top of it in the consuming app, and adding one requires
+ * ZERO changes in this file.
+ *
+ * ── What the shell does NOT do ────────────────────────────────────────────
+ * It implements no drag-and-drop, no selection bookkeeping, no resize policy
+ * and no keyboard navigation. The card reports; the host decides. Drag
+ * choreography (the drag layer, the landing indicator, the drop) belongs to
+ * the host surface, which then feeds the result back as `isDragSource` /
+ * `isDragPreview`. The shell forwards its ref and spreads DOM props, so a host
+ * can attach `tabIndex`, ARIA, pointer and keyboard handlers to it.
+ *
+ * ── Theming ───────────────────────────────────────────────────────────────
+ * Colours resolve through `--sc-*` custom properties with built-in fallbacks:
+ * `--sc-selection-ring` (selection / focus / entered) and the cover scrim
+ * family `--sc-scrim`, `--sc-scrim-strong`, `--sc-scrim-fg`. Declare any of
+ * them on an ancestor to retint a whole surface.
+ */
+export interface IStackedCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onResize"> {
+    /** Host-owned selection state — a ring around the card. */
+    selected?: boolean;
+    /** Policy state: the card cannot be acted on. Dimmed, inert. */
+    disabled?: boolean;
+    /**
+     * Optimistic in-flight state — created or moved, not yet confirmed. Dimmed,
+     * non-interactive and not draggable, but distinct from `disabled`: it is
+     * transient, not a policy.
+     */
+    pending?: boolean;
+    /**
+     * The full-size outline placeholder left behind in the source position while
+     * a drag is in flight. Content is hidden but keeps its box, so neighbouring
+     * cards never move.
+     */
+    isDragSource?: boolean;
+    /**
+     * The 1:1 copy the host floats in its drag layer. Elevated shadow only — no
+     * tilt, no scale, no translate.
+     */
+    isDragPreview?: boolean;
+    /** Focus model: the card has been entered and focus is on an inner control. */
+    entered?: boolean;
+    /** Pin the hover treatment on, including revealed controls. For docs and specs. */
+    forceHover?: boolean;
+    /** Show the bottom-right resize grip. Opt-in, off by default. */
+    resizable?: boolean;
+    /**
+     * Draws the emphasis border down the left edge. A data colour, passed in by
+     * the caller (high priority, a label colour) — never baked into the shell.
+     */
+    priorityColor?: string;
+    /**
+     * Fired while the resize grip is dragged, with the pointer delta since the
+     * last event. The card reports the deltas; the host decides what they mean.
+     */
+    onResizeDelta?: (dx: number, dy: number) => void;
+    children: ReactNode;
+}
+export declare const StackedCard: React.ForwardRefExoticComponent<IStackedCardProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=StackedCard.d.ts.map

package/dist/esm/components/StackedCard/StackedCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedCard.d.ts","sourceRoot":"","sources":["../../../../src/components/StackedCard/StackedCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAQ5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,0FA0EvB,CAAC"}