@activecollab/components 2.0.407 → 2.0.409

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

@@ -0,0 +1,128 @@
+import React from "react";
+import styled from "styled-components";
+import { EntityDots, StyledTitleBlock } from "./shared";
+import { Chip } from "../../../components/Chip";
+import { StackedCardRow as StackRow } from "../../../components/StackedCard";
+import { Body2, Caption1, Caption2, Header3 } from "../../../components/Typography";
+import { RoundAvatar } from "../../shared";
+
+/**
+ * ProjectCard — a project as a stacked card.
+ *
+ * The sixth content type, and the second one that mirrors a project-management
+ * record rather than something authored on the surface (TaskCard is the first).
+ * It composes the same shell and the same rows; nothing in `components/StackedCard`
+ * knows it exists.
+ *
+ * The face is the app's Projects page, read off `ProjectListGroup.jsx`:
+ *   - the NAME is the card's title (`Header3`, as in the grid card);
+ *   - the CLIENT sits under it — `Entity.Property "entity-property-client"`, the
+ *     company the project is for;
+ *   - the DESCRIPTION is the project's `body`, the grid card's `Body2` tertiary
+ *     excerpt, clamped because the whole text lives on the project and this is a
+ *     reference to it, not a copy;
+ *   - the LEADER and the LABEL share one row. The label is a FILLED pill whose
+ *     background is the label's own colour and whose text is a darker shade of
+ *     it (`ProjectLabel.jsx`: `EntityLabel` with `backgroundColor: label.color`,
+ *     `color: label.darker_text_color`) — the design system's `Chip`, not the
+ *     colour-text `Tag` the column cards use for task labels.
+ *
+ * There is deliberately NO progress indicator. A single percentage is the one
+ * number on a project that cannot be read without knowing how it was computed,
+ * and a card is a place people put a project to talk ABOUT it — the number
+ * invites a conversation about the number instead.
+ */
+
+/** A project label carries both of the colours the app stores for it. */
+
+/**
+ * What an internal project's client line says.
+ *
+ * A project with no client belongs to the account's own company, and printing
+ * that company's name back at someone who works there says nothing. So the line
+ * states the fact instead.
+ */
+export const INTERNAL_CLIENT_LABEL = "Internal";
+
+/** One rule for the client line, so no surface can label the same project twice. */
+export const projectClientLine = client => client != null ? client : INTERNAL_CLIENT_LABEL;
+
+/* The description excerpt. Three lines is the most a card can carry before it
+   stops being a card, so it clamps. */
+const StyledExcerpt = styled(Body2).withConfig({
+  displayName: "ProjectCard__StyledExcerpt",
+  componentId: "sc-1afak94-0"
+})(["display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;"]);
+const StyledName = styled(Header3).withConfig({
+  displayName: "ProjectCard__StyledName",
+  componentId: "sc-1afak94-1"
+})(["overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
+const StyledClient = styled(Caption2).withConfig({
+  displayName: "ProjectCard__StyledClient",
+  componentId: "sc-1afak94-2"
+})(["display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
+
+/**
+ * One row for the two facts that are each optional: the leader on the LEFT, the
+ * label on the RIGHT. `space-between` is what keeps the label right when there is
+ * no leader beside it, and the row is not rendered at all when the project has
+ * neither — a bare project produces a small card, not a card with empty
+ * furniture in it.
+ *
+ * No rule above it: the card carries no internal separators. The row's own role
+ * padding is what sets it apart from the excerpt, the same way every other row in
+ * every other content type is set apart — a hairline here would be the only line
+ * inside any card in the set.
+ */
+const StyledMetaRow = styled(StackRow).withConfig({
+  displayName: "ProjectCard__StyledMetaRow",
+  componentId: "sc-1afak94-3"
+})(["justify-content:space-between;.sc-leader{display:flex;align-items:center;gap:8px;min-width:0;}.sc-leader > .typography{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.sc-label{flex-shrink:0;display:flex;}"]);
+export const ProjectCard = _ref => {
+  let _ref$name = _ref.name,
+    name = _ref$name === void 0 ? "Marketing Site" : _ref$name,
+    _ref$client = _ref.client,
+    client = _ref$client === void 0 ? "ActiveCollab Inc." : _ref$client,
+    description = _ref.description,
+    leader = _ref.leader,
+    label = _ref.label;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StackRow, {
+    role: "title"
+  }, /*#__PURE__*/React.createElement(StyledTitleBlock, null, /*#__PURE__*/React.createElement(StyledName, null, name), /*#__PURE__*/React.createElement(StyledClient, {
+    color: "tertiary"
+  }, projectClientLine(client))), /*#__PURE__*/React.createElement(EntityDots, {
+    "aria-label": "Project options"
+  })), description ? /*#__PURE__*/React.createElement(StackRow, {
+    role: "custom"
+  }, /*#__PURE__*/React.createElement(StyledExcerpt, {
+    color: "secondary"
+  }, description)) : null, leader || label ? /*#__PURE__*/React.createElement(StyledMetaRow, {
+    role: "footer"
+  }, leader ? /*#__PURE__*/React.createElement("span", {
+    className: "sc-leader"
+  }, /*#__PURE__*/React.createElement(RoundAvatar, {
+    $bg: leader.color,
+    $size: 24,
+    $bordered: false,
+    "data-fixed": true
+  }, leader.initials), /*#__PURE__*/React.createElement(Caption1, {
+    color: "secondary"
+  }, leader.name)) :
+  /*#__PURE__*/
+  /* Keeps the label on the right when there is no leader to push it
+     there — an empty flex item is cheaper than a second layout. */
+  React.createElement("span", null), label ? /*#__PURE__*/React.createElement("span", {
+    className: "sc-label",
+    "data-fixed": true
+  }, /*#__PURE__*/React.createElement(Chip, {
+    size: "small",
+    label: label.text,
+    backgroundColor: label.color,
+    color: label.textColor,
+    typographyProps: {
+      variant: "Caption 2",
+      weight: "bold"
+    }
+  })) : null) : null);
+};
+//# sourceMappingURL=ProjectCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectCard.js","names":["React","styled","EntityDots","StyledTitleBlock","Chip","StackedCardRow","StackRow","Body2","Caption1","Caption2","Header3","RoundAvatar","INTERNAL_CLIENT_LABEL","projectClientLine","client","StyledExcerpt","withConfig","displayName","componentId","StyledName","StyledClient","StyledMetaRow","ProjectCard","_ref","_ref$name","name","_ref$client","description","leader","label","createElement","Fragment","role","color","className","$bg","$size","$bordered","initials","size","text","backgroundColor","textColor","typographyProps","variant","weight"],"sources":["../../../../../src/presentation/stackedCard/content/ProjectCard.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { EntityDots, StyledTitleBlock } from \"./shared\";\nimport { Chip } from \"../../../components/Chip\";\nimport { StackedCardRow as StackRow } from \"../../../components/StackedCard\";\nimport {\n  Body2,\n  Caption1,\n  Caption2,\n  Header3,\n} from \"../../../components/Typography\";\nimport { RoundAvatar } from \"../../shared\";\n\n/**\n * ProjectCard — a project as a stacked card.\n *\n * The sixth content type, and the second one that mirrors a project-management\n * record rather than something authored on the surface (TaskCard is the first).\n * It composes the same shell and the same rows; nothing in `components/StackedCard`\n * knows it exists.\n *\n * The face is the app's Projects page, read off `ProjectListGroup.jsx`:\n *   - the NAME is the card's title (`Header3`, as in the grid card);\n *   - the CLIENT sits under it — `Entity.Property \"entity-property-client\"`, the\n *     company the project is for;\n *   - the DESCRIPTION is the project's `body`, the grid card's `Body2` tertiary\n *     excerpt, clamped because the whole text lives on the project and this is a\n *     reference to it, not a copy;\n *   - the LEADER and the LABEL share one row. The label is a FILLED pill whose\n *     background is the label's own colour and whose text is a darker shade of\n *     it (`ProjectLabel.jsx`: `EntityLabel` with `backgroundColor: label.color`,\n *     `color: label.darker_text_color`) — the design system's `Chip`, not the\n *     colour-text `Tag` the column cards use for task labels.\n *\n * There is deliberately NO progress indicator. A single percentage is the one\n * number on a project that cannot be read without knowing how it was computed,\n * and a card is a place people put a project to talk ABOUT it — the number\n * invites a conversation about the number instead.\n */\n\nexport interface ProjectCardPerson {\n  name: string;\n  initials: string;\n  /** Avatar colours stand in for the server-rendered avatar: data, not theme. */\n  color: string;\n}\n\n/** A project label carries both of the colours the app stores for it. */\nexport interface ProjectCardLabel {\n  text: string;\n  /** `label.color` — the pill's background. */\n  color: string;\n  /** `label.darker_text_color` — the pill's text. */\n  textColor: string;\n}\n\n/**\n * What an internal project's client line says.\n *\n * A project with no client belongs to the account's own company, and printing\n * that company's name back at someone who works there says nothing. So the line\n * states the fact instead.\n */\nexport const INTERNAL_CLIENT_LABEL = \"Internal\";\n\n/** One rule for the client line, so no surface can label the same project twice. */\nexport const projectClientLine = (client: string | null | undefined): string =>\n  client ?? INTERNAL_CLIENT_LABEL;\n\n/* The description excerpt. Three lines is the most a card can carry before it\n   stops being a card, so it clamps. */\nconst StyledExcerpt = styled(Body2)`\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n`;\n\nconst StyledName = styled(Header3)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nconst StyledClient = styled(Caption2)`\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\n/**\n * One row for the two facts that are each optional: the leader on the LEFT, the\n * label on the RIGHT. `space-between` is what keeps the label right when there is\n * no leader beside it, and the row is not rendered at all when the project has\n * neither — a bare project produces a small card, not a card with empty\n * furniture in it.\n *\n * No rule above it: the card carries no internal separators. The row's own role\n * padding is what sets it apart from the excerpt, the same way every other row in\n * every other content type is set apart — a hairline here would be the only line\n * inside any card in the set.\n */\nconst StyledMetaRow = styled(StackRow)`\n  justify-content: space-between;\n\n  .sc-leader {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n  }\n\n  .sc-leader > .typography {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  /* The Chip brings its own padding and radius, so the slot only has to refuse\n     to shrink and stay out of the leader's way. */\n  .sc-label {\n    flex-shrink: 0;\n    display: flex;\n  }\n`;\n\nexport interface ProjectCardProps {\n  name?: string;\n  /** The client company. `null` is an internal project — the line reads \"Internal\". */\n  client?: string | null;\n  /** The project's `body`; the excerpt row exists only when it has one. */\n  description?: string;\n  /** A project need not have a leader. */\n  leader?: ProjectCardPerson;\n  /** A project need not have a label. */\n  label?: ProjectCardLabel;\n}\n\nexport const ProjectCard = ({\n  name = \"Marketing Site\",\n  client = \"ActiveCollab Inc.\",\n  description,\n  leader,\n  label,\n}: ProjectCardProps): ReactElement => (\n  <>\n    <StackRow role=\"title\">\n      <StyledTitleBlock>\n        <StyledName>{name}</StyledName>\n        <StyledClient color=\"tertiary\">\n          {projectClientLine(client)}\n        </StyledClient>\n      </StyledTitleBlock>\n      <EntityDots aria-label=\"Project options\" />\n    </StackRow>\n\n    {description ? (\n      <StackRow role=\"custom\">\n        <StyledExcerpt color=\"secondary\">{description}</StyledExcerpt>\n      </StackRow>\n    ) : null}\n\n    {leader || label ? (\n      <StyledMetaRow role=\"footer\">\n        {leader ? (\n          <span className=\"sc-leader\">\n            <RoundAvatar\n              $bg={leader.color}\n              $size={24}\n              $bordered={false}\n              data-fixed\n            >\n              {leader.initials}\n            </RoundAvatar>\n            <Caption1 color=\"secondary\">{leader.name}</Caption1>\n          </span>\n        ) : (\n          /* Keeps the label on the right when there is no leader to push it\n             there — an empty flex item is cheaper than a second layout. */\n          <span />\n        )}\n        {label ? (\n          <span className=\"sc-label\" data-fixed>\n            <Chip\n              size=\"small\"\n              label={label.text}\n              backgroundColor={label.color}\n              color={label.textColor}\n              typographyProps={{ variant: \"Caption 2\", weight: \"bold\" }}\n            />\n          </span>\n        ) : null}\n      </StyledMetaRow>\n    ) : null}\n  </>\n);\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,42 @@
 import React, { ReactElement } from "react";
+/**
+ * TaskCard — the baseline-preservation card.
+ *
+ * This is the replacement for today's column card, so it must reproduce every
+ * behavior that card has (note 52104 §B2) — none of them are optional, each is
+ * a silent-regression risk. Every one is a prop here so the story can toggle it:
+ *
+ *  - task-number prefix in the title      (config-gated, mirrors `show_task_id`)
+ *  - overdue date colouring               (red ONLY when overdue AND not completed)
+ *  - dependency counter                   (behind a feature-flag prop)
+ *  - hidden-from-clients signifier        (shown only when it DIFFERS from the
+ *                                          project default)
+ *  - inline assignee affordance           (avatar, or an add-assignee placeholder)
+ *  - completed                            (teal tint, no "…" menu, no overdue colour)
+ *  - assignees appear ONCE                (in the info line when the card has no
+ *                                          date range, in the date row when it
+ *                                          has one — never in both)
+ *
+ * The pending/optimistic and priority states are SHELL states (dimmed +
+ * pointer-events off; red left bar), so the card is wrapped in a `<StackedCard
+ * pending>` / `<StackedCard priorityColor>` by the host — they are not the
+ * card's own concern and live on the shell, not here.
+ *
+ * Everything is measured against the app: `ColumnCardBody.jsx`,
+ * `ColumnCardBodyInfo.jsx`, `ColumnCardDate.jsx` and
+ * `view.project_tasks_column_mode.less`.
+ */
+export interface TaskCardLabel {
+    text: string;
+    /** The label's own colour — data, not theme. */
+    color: string;
+}
+export interface TaskCardPerson {
+    name: string;
+    initials: string;
+    /** Avatar colours stand in for the server-rendered avatar: data, not theme. */
+    color: string;
+}
 export interface TaskCardProps {
     title?: string;
     /** Optional cover — task cards in a column usually have none. */
@@ -8,7 +46,29 @@ export interface TaskCardProps {
     /** Config-gated task-number prefix (mirrors `show_task_id`). */
     showTaskId?: boolean;
     taskId?: number;
-    dateLabel?: string;
+    /**
+     * The project the task lives in, above the title. Off by default: in a column
+     * the column already says it, and only a surface that mixes projects (a
+     * canvas) needs the line.
+     */
+    showProjectName?: boolean;
+    projectName?: string;
+    /**
+     * The task's labels. Up to two read as colour text (`Tag`, the column card's
+     * treatment); more collapse to coloured dots plus an overflow count, which is
+     * what the design system maps ">2 labels" to. An empty array means the card
+     * has no labels — and then the info line must not open with a separator.
+     */
+    labels?: TaskCardLabel[];
+    /** Open-subtask and comment counters; each shows only when it is non-zero. */
+    subtaskCount?: number;
+    commentCount?: number;
+    /**
+     * The date range. `null` (or empty) means the task has none — the date row
+     * disappears and the assignees move up into the info line, so they still
+     * appear exactly once.
+     */
+    dateLabel?: string | null;
     /** Overdue date — colours the date red, but only when NOT completed. */
     overdue?: boolean;
     /** Dependency counter, gated behind a feature flag. */
@@ -20,10 +80,12 @@ export interface TaskCardProps {
     projectDefaultHidden?: boolean;
     /** Whether the task has an assignee (avatar) or shows the add affordance. */
     assigned?: boolean;
+    /** The actual assignees, when the host has them. Limited to 3, as in the app. */
+    assignees?: TaskCardPerson[];
     /** Completed — teal tint, no "…" menu, no overdue colour. */
     completed?: boolean;
 }
-export declare const TaskCard: ({ title, cover, playable, coverControls, showTaskId, taskId, dateLabel, overdue, showDependencies, dependencyCount, hiddenFromClients, projectDefaultHidden, assigned, completed, }: TaskCardProps) => ReactElement;
+export declare const TaskCard: ({ title, cover, playable, coverControls, showTaskId, taskId, showProjectName, projectName, labels, subtaskCount, commentCount, dateLabel, overdue, showDependencies, dependencyCount, hiddenFromClients, projectDefaultHidden, assigned, assignees, completed, }: TaskCardProps) => ReactElement;
 export declare const TaskPlaceholder: (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => ReactElement;
 export declare const TaskSkeleton: () => ReactElement;
 //# sourceMappingURL=TaskCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TaskCard.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/stackedCard/content/TaskCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAkJ5C,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gFAAgF;IAChF,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,GAAI,qLAetB,aAAa,KAAG,YA+FlB,CAAC;AAIF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,KACnD,YAMF,CAAC;AAGF,eAAO,MAAM,YAAY,QAAO,YAiB/B,CAAC"}
+{"version":3,"file":"TaskCard.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/stackedCard/content/TaskCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAiC5C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;CACf;AA4KD,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gFAAgF;IAChF,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iFAAiF;IACjF,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,GAAI,kQAqBtB,aAAa,KAAG,YAyJlB,CAAC;AAIF,eAAO,MAAM,eAAe,GAC1B,OAAO,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,KACnD,YAMF,CAAC;AAGF,eAAO,MAAM,YAAY,QAAO,YAiB/B,CAAC"}

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

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
 import styled, { css } from "styled-components";
-import { EntityDots, StyledClamp, coverManagement, playControl, Placeholder } from "./shared";
-import { ChecklistSmallIcon, EyeOffIcon, InsertLinkIcon, MessageSmallIcon, PersonPlusIcon } from "../../../components/Icons";
+import { CARD_FONT, CardProjectLine, EntityDots, StyledClamp, StyledTitleBlock, coverManagement, playControl, Placeholder } from "./shared";
+import { ChecklistSmallIcon, DependencySmallIcon, EyeOffSmallIcon, MessageSmallIcon, PersonPlusIcon } from "../../../components/Icons";
 import { SkeletonLoader } from "../../../components/Loaders";
+import { Signifier } from "../../../components/Signifier";
 import { STACKED_CARD_COVER_RATIO as COVER_RATIO, StackedCardCover as Cover, StackedCardRow as StackRow } from "../../../components/StackedCard";
+import { Tag } from "../../../components/Tag";
 import { Caption1 } from "../../../components/Typography";
 import { Typography } from "../../../components/Typography/Typography";
 import { RoundAvatar, AVATAR_COLORS } from "../../shared";
@@ -23,14 +25,58 @@ import { RoundAvatar, AVATAR_COLORS } from "../../shared";
  *                                          project default)
  *  - inline assignee affordance           (avatar, or an add-assignee placeholder)
  *  - completed                            (teal tint, no "…" menu, no overdue colour)
+ *  - assignees appear ONCE                (in the info line when the card has no
+ *                                          date range, in the date row when it
+ *                                          has one — never in both)
  *
  * The pending/optimistic and priority states are SHELL states (dimmed +
  * pointer-events off; red left bar), so the card is wrapped in a `<StackedCard
  * pending>` / `<StackedCard priorityColor>` by the host — they are not the
  * card's own concern and live on the shell, not here.
+ *
+ * Everything is measured against the app: `ColumnCardBody.jsx`,
+ * `ColumnCardBodyInfo.jsx`, `ColumnCardDate.jsx` and
+ * `view.project_tasks_column_mode.less`.
+ */
+
+/**
+ * Eight labels, so the default card demonstrates the collapsed form. Colours are
+ * the labels' own, which is why they are literals.
  */
+const DEMO_LABELS = [{
+  text: "DESIGN",
+  color: "#378ADD"
+}, {
+  text: "BLOCKED",
+  color: "#D85A30"
+}, {
+  text: "READY",
+  color: "#639922"
+}, {
+  text: "REVIEW",
+  color: "#EF9F27"
+}, {
+  text: "RESEARCH",
+  color: "#7F77DD"
+}, {
+  text: "COPY",
+  color: "#8C5A2B"
+}, {
+  text: "QA",
+  color: "#2F5DA8"
+}, {
+  text: "RELEASE",
+  color: "#8A3E6B"
+}];
 
-const LABEL_DOTS = ["#378ADD", "#D85A30", "#639922", "#EF9F27", "#7F77DD"];
+/**
+ * How many labels read as text before the line has to collapse them, and how
+ * many dots stand in for the rest. Two colour-text `Tag`s fit a 260px card; past
+ * that the app's own answer (and the design system's mapping) is coloured dots
+ * plus an overflow count.
+ */
+const LABELS_AS_TEXT_MAX = 2;
+const LABEL_DOTS_MAX = 5;
 
 /* The completed tint fills the card body; the shell keeps the priority bar and
    selection ring on top of it. */
@@ -41,10 +87,26 @@ const StyledBody = styled.div.withConfig({
   let $completed = _ref.$completed;
   return $completed && css(["background:var(--sc-completed-tint,rgba(72,201,176,0.16));"]);
 });
-const StyledMetaCluster = styled.div.withConfig({
-  displayName: "TaskCard__StyledMetaCluster",
+
+/**
+ * The info line — labels, then signifiers, then (only when the card has no date
+ * range) the assignees.
+ *
+ * The separator is the app's, rule for rule: a 2px round dot in
+ * `--color-theme-600` with `margin: 0 6px`, drawn by `::before` on every item
+ * EXCEPT the first (`view.project_tasks_column_mode.less`:
+ * `.c-signifier:not(:first-child):before`, `.label_single_container:not(:first-child)
+ * .label_item:before`, `.dot:before`). Because the rule keys off position rather
+ * than off "am I a signifier", a line that starts with a signifier — a task with
+ * counters but no labels — cannot open with a dangling dot.
+ *
+ * `font-size: 11px` is the `.labels` block's own; the vertical rhythm the app
+ * gets from `margin-top: 10px` comes from the `meta` row's role padding here.
+ */
+const StyledInfoLine = styled.div.withConfig({
+  displayName: "TaskCard__StyledInfoLine",
   componentId: "sc-5iuhg8-1"
-})(["display:flex;align-items:center;gap:6px;color:var(--color-theme-600);.sc-dots{display:flex;gap:4px;}.sc-sep{opacity:0.6;}.sc-count{display:inline-flex;align-items:center;gap:3px;}svg{width:14px;height:14px;}"]);
+})(["display:flex;flex-wrap:wrap;align-items:center;width:100%;font-size:11px;> *{display:flex;align-items:center;min-height:18px;}> *:not(:first-child):not(.sc-assignees)::before{content:\"\";flex-shrink:0;width:2px;height:2px;margin:0 6px;border-radius:100%;background-color:var(--color-theme-600);}.sc-label{max-width:74px;}.sc-label .c-tag > div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:60px;}.sc-dots{gap:4px;}.sc-assignees{flex:1 1 auto;justify-content:flex-end;}"]);
 const StyledDot = styled.span.withConfig({
   displayName: "TaskCard__StyledDot",
   componentId: "sc-5iuhg8-2"
@@ -53,28 +115,39 @@ const StyledDot = styled.span.withConfig({
   return $color;
 });
 
-/* Hidden-from-clients signifier — an eye-off badge, shown only when the task's
-   visibility differs from the project default. */
-const StyledHiddenBadge = styled.span.withConfig({
-  displayName: "TaskCard__StyledHiddenBadge",
-  componentId: "sc-5iuhg8-3"
-})(["display:inline-flex;align-items:center;gap:3px;color:var(--color-theme-600);svg{width:14px;height:14px;}"]);
-
-/* Date — bold; turns red only when overdue AND the task is not completed. */
+/**
+ * The date row's text.
+ *
+ * A raw `<span>` in this Storybook inherits the browser's serif default at the
+ * ancestor's size, which is why the date used to read as huge serif type. The
+ * app sets the same four values in CSS on a plain `div` (`.due_date`: 13px,
+ * bold, 24px tall, `--color-theme-900`, `--red-alert` when `.overdue`), so the
+ * fix is to state them here — plus the font stack the missing reset does not
+ * supply.
+ */
 const StyledDate = styled.span.withConfig({
   displayName: "TaskCard__StyledDate",
-  componentId: "sc-5iuhg8-4"
-})(["font-weight:bold;color:", ";"], _ref3 => {
+  componentId: "sc-5iuhg8-3"
+})(["height:24px;font-family:", ";font-size:13px;font-weight:bold;line-height:24px;letter-spacing:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:", ";"], CARD_FONT, _ref3 => {
   let $overdue = _ref3.$overdue;
   return $overdue ? "var(--red-alert)" : "var(--color-theme-900)";
 });
 
+/* Avatars are limited to 3 and overlap, as MultiAssigneesPicker does. */
+const StyledAssignees = styled.span.withConfig({
+  displayName: "TaskCard__StyledAssignees",
+  componentId: "sc-5iuhg8-4"
+})(["display:flex;align-items:center;justify-content:flex-end;"]);
+
 /* Inline assignee affordance placeholder — a dashed add-assignee target that
    stands in until the real picker is wired at integration. */
 const StyledAddAssignee = styled.button.withConfig({
   displayName: "TaskCard__StyledAddAssignee",
   componentId: "sc-5iuhg8-5"
 })(["display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:1.5px dashed var(--color-theme-400);border-radius:50%;background:transparent;color:var(--color-theme-600);cursor:pointer;svg{width:14px;height:14px;display:block;}&:hover{border-color:var(--sc-selection-ring);color:var(--color-theme-800);}"]);
+
+/** The app's assignee limit (MultiAssigneesPicker `limit={3}`). */
+const ASSIGNEE_LIMIT = 3;
 export const TaskCard = _ref4 => {
   let _ref4$title = _ref4.title,
     title = _ref4$title === void 0 ? "Implement the design from the reference on this page" : _ref4$title,
@@ -88,6 +161,16 @@ export const TaskCard = _ref4 => {
     showTaskId = _ref4$showTaskId === void 0 ? false : _ref4$showTaskId,
     _ref4$taskId = _ref4.taskId,
     taskId = _ref4$taskId === void 0 ? 4521 : _ref4$taskId,
+    _ref4$showProjectName = _ref4.showProjectName,
+    showProjectName = _ref4$showProjectName === void 0 ? false : _ref4$showProjectName,
+    _ref4$projectName = _ref4.projectName,
+    projectName = _ref4$projectName === void 0 ? "Marketing Site" : _ref4$projectName,
+    _ref4$labels = _ref4.labels,
+    labels = _ref4$labels === void 0 ? DEMO_LABELS : _ref4$labels,
+    _ref4$subtaskCount = _ref4.subtaskCount,
+    subtaskCount = _ref4$subtaskCount === void 0 ? 2 : _ref4$subtaskCount,
+    _ref4$commentCount = _ref4.commentCount,
+    commentCount = _ref4$commentCount === void 0 ? 7 : _ref4$commentCount,
     _ref4$dateLabel = _ref4.dateLabel,
     dateLabel = _ref4$dateLabel === void 0 ? "May 8 – Sep 10" : _ref4$dateLabel,
     _ref4$overdue = _ref4.overdue,
@@ -102,12 +185,77 @@ export const TaskCard = _ref4 => {
     projectDefaultHidden = _ref4$projectDefaultH === void 0 ? false : _ref4$projectDefaultH,
     _ref4$assigned = _ref4.assigned,
     assigned = _ref4$assigned === void 0 ? true : _ref4$assigned,
+    assignees = _ref4.assignees,
     _ref4$completed = _ref4.completed,
     completed = _ref4$completed === void 0 ? false : _ref4$completed;
   // Signifier appears only when the task's visibility differs from the default.
   const showHiddenSignifier = hiddenFromClients !== projectDefaultHidden;
   // Overdue colour is suppressed on completed tasks.
   const dateIsOverdue = overdue && !completed;
+  const hasDate = dateLabel != null && dateLabel !== "";
+  const collapseLabels = labels.length > LABELS_AS_TEXT_MAX;
+
+  /* The assignee slot: the real avatars when the host has them, the demo avatar
+     when it only says "assigned", the add affordance when it says nothing is. */
+  const assigneeSlot = assigned ? /*#__PURE__*/React.createElement(StyledAssignees, {
+    className: "sc-assignees",
+    "data-fixed": true
+  }, assignees ? assignees.slice(0, ASSIGNEE_LIMIT).map(person => /*#__PURE__*/React.createElement(RoundAvatar, {
+    key: person.name,
+    $bg: person.color,
+    $size: 24,
+    $overlap: true
+  }, person.initials)) : /*#__PURE__*/React.createElement(RoundAvatar, {
+    $bg: AVATAR_COLORS.teal,
+    $size: 24,
+    $bordered: false
+  }, "MS")) : /*#__PURE__*/React.createElement(StyledAssignees, {
+    className: "sc-assignees",
+    "data-fixed": true
+  }, /*#__PURE__*/React.createElement(StyledAddAssignee, {
+    type: "button",
+    "aria-label": "Assign task"
+  }, /*#__PURE__*/React.createElement(PersonPlusIcon, null)));
+
+  /* Signifiers in the app's fixed order: subtasks → comments → dependencies →
+     hidden-from-clients. Each is one child of the info line, so the line's own
+     separator rule spaces them. */
+  const signifiers = [];
+  if (subtaskCount > 0) {
+    signifiers.push(/*#__PURE__*/React.createElement(Signifier, {
+      key: "subtasks",
+      type: ChecklistSmallIcon,
+      value: subtaskCount,
+      tooltipText: "Subtasks"
+    }));
+  }
+  if (commentCount > 0) {
+    signifiers.push(/*#__PURE__*/React.createElement(Signifier, {
+      key: "comments",
+      type: MessageSmallIcon,
+      value: commentCount,
+      tooltipText: "Comments"
+    }));
+  }
+  if (showDependencies && dependencyCount > 0) {
+    signifiers.push(/*#__PURE__*/React.createElement(Signifier, {
+      key: "dependencies",
+      type: DependencySmallIcon,
+      value: dependencyCount,
+      tooltipText: "Dependencies"
+    }));
+  }
+  if (showHiddenSignifier) {
+    signifiers.push(/*#__PURE__*/React.createElement(Signifier, {
+      key: "hidden",
+      type: EyeOffSmallIcon,
+      tooltipText: "Hidden from clients"
+    }));
+  }
+
+  /* The info line exists when it has something to say — labels, signifiers, or
+     the assignees it has to carry because there is no date row. */
+  const showInfoLine = labels.length > 0 || signifiers.length > 0 || !hasDate;
   return /*#__PURE__*/React.createElement(StyledBody, {
     $completed: completed
   }, cover ? /*#__PURE__*/React.createElement(Cover, {
@@ -122,58 +270,33 @@ export const TaskCard = _ref4 => {
     }
   })) : null, /*#__PURE__*/React.createElement(StackRow, {
     role: "title"
-  }, /*#__PURE__*/React.createElement(StyledClamp, null, showTaskId ? /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(StyledTitleBlock, null, showProjectName ? /*#__PURE__*/React.createElement(CardProjectLine, null, projectName) : null, /*#__PURE__*/React.createElement(StyledClamp, null, showTaskId ? /*#__PURE__*/React.createElement(Typography, {
     as: "span",
     variant: "Caption 1",
     color: "tertiary"
-  }, "#" + taskId + " ") : null, title), completed ? null : /*#__PURE__*/React.createElement(EntityDots, {
+  }, "#" + taskId + " ") : null, title)), completed ? null : /*#__PURE__*/React.createElement(EntityDots, {
     "aria-label": "Task options"
-  })), /*#__PURE__*/React.createElement(StackRow, {
+  })), showInfoLine ? /*#__PURE__*/React.createElement(StackRow, {
     role: "meta"
-  }, /*#__PURE__*/React.createElement(StyledMetaCluster, null, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(StyledInfoLine, null, collapseLabels ? /*#__PURE__*/React.createElement("span", {
     className: "sc-dots"
-  }, LABEL_DOTS.map(color => /*#__PURE__*/React.createElement(StyledDot, {
-    key: color,
-    $color: color
-  }))), /*#__PURE__*/React.createElement(Caption1, {
-    color: "tertiary"
-  }, "+3"), /*#__PURE__*/React.createElement("span", {
-    className: "sc-sep"
-  }, "\xB7"), /*#__PURE__*/React.createElement("span", {
-    className: "sc-count"
-  }, /*#__PURE__*/React.createElement(MessageSmallIcon, null), /*#__PURE__*/React.createElement(Caption1, {
-    color: "tertiary"
-  }, "7")), /*#__PURE__*/React.createElement("span", {
-    className: "sc-sep"
-  }, "\xB7"), /*#__PURE__*/React.createElement("span", {
-    className: "sc-count"
-  }, /*#__PURE__*/React.createElement(ChecklistSmallIcon, null), /*#__PURE__*/React.createElement(Caption1, {
-    color: "tertiary"
-  }, "2")), showDependencies ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: "sc-sep"
-  }, "\xB7"), /*#__PURE__*/React.createElement("span", {
-    className: "sc-count",
-    title: "Dependencies"
-  }, /*#__PURE__*/React.createElement(InsertLinkIcon, null), /*#__PURE__*/React.createElement(Caption1, {
+  }, labels.slice(0, LABEL_DOTS_MAX).map(label => /*#__PURE__*/React.createElement(StyledDot, {
+    key: label.text,
+    $color: label.color
+  })), labels.length > LABEL_DOTS_MAX ? /*#__PURE__*/React.createElement(Caption1, {
     color: "tertiary"
-  }, dependencyCount))) : null, showHiddenSignifier ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: "sc-sep"
-  }, "\xB7"), /*#__PURE__*/React.createElement(StyledHiddenBadge, {
-    title: "Hidden from clients"
-  }, /*#__PURE__*/React.createElement(EyeOffIcon, null))) : null)), /*#__PURE__*/React.createElement(StackRow, {
+  }, "+" + (labels.length - LABEL_DOTS_MAX)) : null) : labels.map(label => /*#__PURE__*/React.createElement("span", {
+    className: "sc-label",
+    key: label.text
+  }, /*#__PURE__*/React.createElement(Tag, {
+    name: label.text,
+    color: label.color,
+    showDot: false
+  }))), signifiers, hasDate ? null : assigneeSlot)) : null, hasDate ? /*#__PURE__*/React.createElement(StackRow, {
     role: "footer"
   }, /*#__PURE__*/React.createElement(StyledDate, {
     $overdue: dateIsOverdue
-  }, dateLabel), /*#__PURE__*/React.createElement("span", null), assigned ? /*#__PURE__*/React.createElement(RoundAvatar, {
-    $bg: AVATAR_COLORS.teal,
-    $size: 24,
-    $bordered: false,
-    "data-fixed": true
-  }, "MS") : /*#__PURE__*/React.createElement(StyledAddAssignee, {
-    type: "button",
-    "aria-label": "Assign task",
-    "data-fixed": true
-  }, /*#__PURE__*/React.createElement(PersonPlusIcon, null))));
+  }, dateLabel), assigneeSlot) : null);
 };
 
 /* ---- placeholder + skeleton ---- */