@activecollab/components 2.0.408 → 2.0.409

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

@@ -5,7 +5,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 import { PlayIcon, TreeDotsIcon } from "../../../components/Icons";
 import { STACKED_CARD_CONTROL_CLASS, StackedCardCollapseGlyph as CollapseGlyph, StackedCardCoverButton as CoverButton, StackedCardPlayBadge as PlayBadge, StackedCardRemoveCoverGlyph as RemoveCoverGlyph } from "../../../components/StackedCard";
-import { Body2 } from "../../../components/Typography";
+import { Body2, Caption2 } from "../../../components/Typography";
 import { Typography } from "../../../components/Typography/Typography";
 
 /**
@@ -23,6 +23,20 @@ import { Typography } from "../../../components/Typography/Typography";
  * the same words.
  */
 
+/* ------------------------------------------------------------------ */
+/* The font stack for raw text                                         */
+/* ------------------------------------------------------------------ */
+
+/**
+ * There is no global CSS reset in this Storybook, so a raw element (a `<span>`
+ * holding a date, a `<button>` holding a word) falls back to the browser default
+ * — a SERIF face at the UA's own size. Anything that is not a DS `Typography`
+ * has to name the font itself. Use a DS Typography where one fits; use this
+ * where the app itself sets the size in CSS (the column card's date row is a
+ * plain `div` in `view.project_tasks_column_mode.less`, not a Typography).
+ */
+export const CARD_FONT = "-apple-system, BlinkMacSystemFont, \"Roboto\",\n  \"Helvetica Neue\", Arial, sans-serif";
+
 /* ------------------------------------------------------------------ */
 /* Per-type cover ratios                                               */
 /* ------------------------------------------------------------------ */
@@ -91,27 +105,60 @@ export const StyledClamp = styled(Body2).withConfig({
   componentId: "sc-1x5md9a-1"
 })(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"]);
 
+/**
+ * The title block — everything the title row stacks to the LEFT of the "…"
+ * menu. A card that only has a title puts the clamp straight in the row; a card
+ * that puts a line above or below it (the project a task belongs to, the client
+ * a project is for) stacks them here so the row keeps its two-child shape:
+ * text block, then the fixed-width menu.
+ */
+export const StyledTitleBlock = styled.div.withConfig({
+  displayName: "shared__StyledTitleBlock",
+  componentId: "sc-1x5md9a-2"
+})(["display:flex;flex-direction:column;min-width:0;"]);
+
+/**
+ * The project a card's entity lives in, above the title.
+ *
+ * On a canvas a task card has lost the column that used to say which project it
+ * came from, so the card says it itself. One line, one treatment, shared by
+ * every content type that can carry it (the whiteboard's own task face already
+ * wrote it this way: `Caption 2` tertiary, tight above the title, ellipsis on
+ * overflow — a project name is a reference, never a second title).
+ */
+export const StyledProjectLine = styled(Caption2).withConfig({
+  displayName: "shared__StyledProjectLine",
+  componentId: "sc-1x5md9a-3"
+})(["display:block;margin-bottom:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
+export const CardProjectLine = _ref2 => {
+  let children = _ref2.children;
+  return /*#__PURE__*/React.createElement(StyledProjectLine, {
+    color: "tertiary",
+    className: "sc-project"
+  }, children);
+};
+
 /** A favicon square — a solid data colour stands in for the real favicon. */
 export const StyledFavicon = styled.span.withConfig({
   displayName: "shared__StyledFavicon",
-  componentId: "sc-1x5md9a-2"
-})(["display:inline-flex;width:16px;height:16px;border-radius:4px;background:", ";flex-shrink:0;"], _ref2 => {
-  let $bg = _ref2.$bg;
+  componentId: "sc-1x5md9a-4"
+})(["display:inline-flex;width:16px;height:16px;border-radius:4px;background:", ";flex-shrink:0;"], _ref3 => {
+  let $bg = _ref3.$bg;
   return $bg;
 });
 
 /** A small pill for link metadata (media kind, duration, …). */
 export const StyledChip = styled.span.withConfig({
   displayName: "shared__StyledChip",
-  componentId: "sc-1x5md9a-3"
+  componentId: "sc-1x5md9a-5"
 })(["display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;background:var(--color-theme-300);color:var(--color-theme-800);font-size:11px;white-space:nowrap;"]);
 
 /** A solid-colour cover fill (swatch value, generic link cover, image stand-in). */
 export const StyledColorCover = styled.div.withConfig({
   displayName: "shared__StyledColorCover",
-  componentId: "sc-1x5md9a-4"
-})(["width:100%;height:100%;background:", ";"], _ref3 => {
-  let $color = _ref3.$color;
+  componentId: "sc-1x5md9a-6"
+})(["width:100%;height:100%;background:", ";"], _ref4 => {
+  let $color = _ref4.$color;
   return $color;
 });
 
@@ -121,12 +168,12 @@ export const StyledColorCover = styled.div.withConfig({
 
 const StyledPlaceholder = styled.button.withConfig({
   displayName: "shared__StyledPlaceholder",
-  componentId: "sc-1x5md9a-5"
-})(["display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:", "px;padding:0;border:0;background:transparent;color:var(--color-theme-600);text-align:center;cursor:pointer;", " > svg{width:40px;height:40px;color:var(--color-theme-500);}"], _ref4 => {
-  let $height = _ref4.$height;
+  componentId: "sc-1x5md9a-7"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:", "px;padding:0;border:0;background:transparent;color:var(--color-theme-600);text-align:center;cursor:pointer;", " > svg{width:40px;height:40px;color:var(--color-theme-500);}"], _ref5 => {
+  let $height = _ref5.$height;
   return $height != null ? $height : 150;
-}, _ref5 => {
-  let $dashed = _ref5.$dashed;
+}, _ref6 => {
+  let $dashed = _ref6.$dashed;
   return $dashed && css(["margin:8px;width:calc(100% - 16px);border:1.5px dashed var(--color-theme-400);border-radius:6px;&:hover{border-color:var(--sc-selection-ring);color:var(--color-theme-700);}"]);
 });
 
@@ -135,12 +182,12 @@ const StyledPlaceholder = styled.button.withConfig({
  * sentence-case invitation (ActiveCollab voice). Interactive by design — the
  * whole frame is a button — and distinct from the loading skeleton.
  */
-export const Placeholder = _ref6 => {
-  let icon = _ref6.icon,
-    label = _ref6.label,
-    height = _ref6.height,
-    dashed = _ref6.dashed,
-    rest = _objectWithoutPropertiesLoose(_ref6, _excluded);
+export const Placeholder = _ref7 => {
+  let icon = _ref7.icon,
+    label = _ref7.label,
+    height = _ref7.height,
+    dashed = _ref7.dashed,
+    rest = _objectWithoutPropertiesLoose(_ref7, _excluded);
   return /*#__PURE__*/React.createElement(StyledPlaceholder, _extends({
     type: "button",
     $height: height,

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

@@ -1 +1 @@
-{"version":3,"file":"shared.js","names":["React","styled","css","PlayIcon","TreeDotsIcon","STACKED_CARD_CONTROL_CLASS","StackedCardCollapseGlyph","CollapseGlyph","StackedCardCoverButton","CoverButton","StackedCardPlayBadge","PlayBadge","StackedCardRemoveCoverGlyph","RemoveCoverGlyph","Body2","Typography","COVER_RATIO_HERO","COVER_RATIO_IMAGE","COVER_RATIO_SWATCH","playControl","createElement","coverManagement","_temp","_ref","_ref$removeLabel","removeLabel","onCollapse","onRemove","Fragment","type","onClick","StyledEntityDots","button","withConfig","displayName","componentId","EntityDots","props","_extends","className","StyledClamp","StyledFavicon","span","_ref2","$bg","StyledChip","StyledColorCover","div","_ref3","$color","StyledPlaceholder","_ref4","$height","_ref5","$dashed","Placeholder","_ref6","icon","label","height","dashed","rest","_objectWithoutPropertiesLoose","_excluded","as","variant","color"],"sources":["../../../../../src/presentation/stackedCard/content/shared.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport styled, { css } from \"styled-components\";\n\nimport { PlayIcon, TreeDotsIcon } from \"../../../components/Icons\";\nimport {\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":[]}
+{"version":3,"file":"shared.js","names":["React","styled","css","PlayIcon","TreeDotsIcon","STACKED_CARD_CONTROL_CLASS","StackedCardCollapseGlyph","CollapseGlyph","StackedCardCoverButton","CoverButton","StackedCardPlayBadge","PlayBadge","StackedCardRemoveCoverGlyph","RemoveCoverGlyph","Body2","Caption2","Typography","CARD_FONT","COVER_RATIO_HERO","COVER_RATIO_IMAGE","COVER_RATIO_SWATCH","playControl","createElement","coverManagement","_temp","_ref","_ref$removeLabel","removeLabel","onCollapse","onRemove","Fragment","type","onClick","StyledEntityDots","button","withConfig","displayName","componentId","EntityDots","props","_extends","className","StyledClamp","StyledTitleBlock","div","StyledProjectLine","CardProjectLine","_ref2","children","color","StyledFavicon","span","_ref3","$bg","StyledChip","StyledColorCover","_ref4","$color","StyledPlaceholder","_ref5","$height","_ref6","$dashed","Placeholder","_ref7","icon","label","height","dashed","rest","_objectWithoutPropertiesLoose","_excluded","as","variant"],"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, Caption2 } 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/* The font stack for raw text                                         */\n/* ------------------------------------------------------------------ */\n\n/**\n * There is no global CSS reset in this Storybook, so a raw element (a `<span>`\n * holding a date, a `<button>` holding a word) falls back to the browser default\n * — a SERIF face at the UA's own size. Anything that is not a DS `Typography`\n * has to name the font itself. Use a DS Typography where one fits; use this\n * where the app itself sets the size in CSS (the column card's date row is a\n * plain `div` in `view.project_tasks_column_mode.less`, not a Typography).\n */\nexport const CARD_FONT = `-apple-system, BlinkMacSystemFont, \"Roboto\",\n  \"Helvetica Neue\", Arial, sans-serif`;\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/**\n * The title block — everything the title row stacks to the LEFT of the \"…\"\n * menu. A card that only has a title puts the clamp straight in the row; a card\n * that puts a line above or below it (the project a task belongs to, the client\n * a project is for) stacks them here so the row keeps its two-child shape:\n * text block, then the fixed-width menu.\n */\nexport const StyledTitleBlock = styled.div`\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n`;\n\n/**\n * The project a card's entity lives in, above the title.\n *\n * On a canvas a task card has lost the column that used to say which project it\n * came from, so the card says it itself. One line, one treatment, shared by\n * every content type that can carry it (the whiteboard's own task face already\n * wrote it this way: `Caption 2` tertiary, tight above the title, ellipsis on\n * overflow — a project name is a reference, never a second title).\n */\nexport const StyledProjectLine = styled(Caption2)`\n  display: block;\n  margin-bottom: 2px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nexport const CardProjectLine = ({\n  children,\n}: {\n  children: ReactNode;\n}): ReactElement => (\n  <StyledProjectLine color=\"tertiary\" className=\"sc-project\">\n    {children}\n  </StyledProjectLine>\n);\n\n/** A favicon square — a solid data colour stands in for the real favicon. */\nexport const StyledFavicon = styled.span<{ $bg: string }>`\n  display: inline-flex;\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  background: ${({ $bg }) => $bg};\n  flex-shrink: 0;\n`;\n\n/** A small pill for link metadata (media kind, duration, …). */\nexport const StyledChip = styled.span`\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: var(--color-theme-300);\n  color: var(--color-theme-800);\n  font-size: 11px;\n  white-space: nowrap;\n`;\n\n/** A solid-colour cover fill (swatch value, generic link cover, image stand-in). */\nexport const StyledColorCover = styled.div<{ $color: string }>`\n  width: 100%;\n  height: 100%;\n  background: ${({ $color }) => $color};\n`;\n\n/* ------------------------------------------------------------------ */\n/* Placeholder frame — the interactive empty state, per type           */\n/* ------------------------------------------------------------------ */\n\nconst StyledPlaceholder = styled.button<{\n  $height?: number;\n  $dashed?: boolean;\n}>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  width: 100%;\n  height: ${({ $height }) => $height ?? 150}px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--color-theme-600);\n  text-align: center;\n  cursor: pointer;\n\n  ${({ $dashed }) =>\n    $dashed &&\n    css`\n      margin: 8px;\n      width: calc(100% - 16px);\n      border: 1.5px dashed var(--color-theme-400);\n      border-radius: 6px;\n\n      &:hover {\n        border-color: var(--sc-selection-ring);\n        color: var(--color-theme-700);\n      }\n    `}\n\n  > svg {\n    width: 40px;\n    height: 40px;\n    color: var(--color-theme-500);\n  }\n`;\n\n/**\n * The shared placeholder frame. Each type supplies its own icon and verb-first,\n * sentence-case invitation (ActiveCollab voice). Interactive by design — the\n * whole frame is a button — and distinct from the loading skeleton.\n */\nexport const Placeholder = ({\n  icon,\n  label,\n  height,\n  dashed,\n  ...rest\n}: {\n  icon: ReactNode;\n  label: ReactNode;\n  height?: number;\n  dashed?: boolean;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>): ReactElement => (\n  <StyledPlaceholder type=\"button\" $height={height} $dashed={dashed} {...rest}>\n    {icon}\n    <Typography as=\"span\" variant=\"Body 2\" color=\"secondary\">\n      {label}\n    </Typography>\n  </StyledPlaceholder>\n);\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/presentation/whiteboard/bottomDock.d.ts

@@ -2,31 +2,54 @@ import React, { ReactElement, ReactNode } from "react";
 export declare const ToolSurface: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const verticalDivider = "\n  .divider {\n    width: 1px;\n    height: 24px;\n    background-color: var(--color-theme-400);\n    margin: 0 6px;\n    flex-shrink: 0;\n  }\n";
 export declare const StyledBottomDock: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledShapePicker: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * The floating second toolbar row — a small pill above the dock that holds the
+ * members of one tool family (Circle / Rectangle / Triangle, or Task / Project).
+ *
+ * It is the same surface as the dock itself, so a family reads as an extension
+ * of the button that opened it rather than as a different kind of UI. Only one
+ * pill is ever up, because only one tool is ever armed.
+ */
+export declare const StyledToolPill: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledHint: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../..").ICaptionProps & Omit<import("../../components/Typography/Typography").ITypographyProps, "variant" | "weight"> & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const TOOL_HINTS: {
     readonly circle: "Click to drop a default circle, or draw one to size. Press O for a circle.";
     readonly roundedRectangle: "Click to drop a default rectangle, or draw one to size. Press R for a rectangle.";
     readonly triangle: "Click to drop a default triangle, or draw one to size. Press Y for a triangle.";
     readonly connector: "Drag from one element to another to connect them. Press C to connect.";
+    readonly projectElements: "Put a task or a project on the board — pick which above, then draw its card.";
+    readonly project: "Draw a box to place a project card, then pick the project it shows.";
+    readonly task: "Draw a box to place a task card, then pick the task it shows.";
     readonly link: "Draw a box to place a link, or paste a URL anywhere. Press L for link.";
     readonly file: "Draw a box to place a file, or drop one on the board. Press F for file.";
     readonly sticky: "Click anywhere on the canvas to drop a sticky note. Press S for a sticky note.";
     readonly text: "Click anywhere on the canvas to start typing. Press T for text.";
     readonly draw: "Click and drag to draw freehand. Press D for the pen.";
-    readonly shapes: "Start drawing the shape on canvas to see the result. Press R to draw a rectangle.";
+    readonly shapes: "Pick a shape above, then draw it on the board. Press R for a rectangle.";
 };
 export type ToolHintKey = keyof typeof TOOL_HINTS;
 export type ShapeTool = "circle" | "roundedRectangle" | "triangle";
 /**
- * The armed board tool. Link, File and the three shapes are wired — arming one
- * turns the next canvas click into "drop the default-size element here" and a
- * drag into "draw one this big"; everything else stays a mock, so the board is
- * otherwise always in select mode.
+ * The armed board tool. Link, File, Project, Task and the three shapes are
+ * wired — arming one turns the next canvas click into "drop the default-size
+ * element here" and a drag into "draw one this big"; everything else stays a
+ * mock, so the board is otherwise always in select mode.
  */
-export type BoardTool = "select" | "link" | "file" | ShapeTool;
+export type BoardTool = "select" | "link" | "file" | "project" | "task" | ShapeTool;
 export declare const SHAPE_TOOLS: readonly ShapeTool[];
 export declare const isShapeTool: (tool: BoardTool) => tool is ShapeTool;
+/**
+ * What a dock button arms the instant its pill opens.
+ *
+ * Opening a family and choosing inside it are two separate decisions, and the
+ * second one has a right answer often enough that asking for it every time is
+ * just a toll: a shape is usually a rectangle, and the thing people put on a
+ * board is usually a task. So the pill opens with that member already armed and
+ * the gesture can start immediately — picking another member is a correction,
+ * not a required step.
+ */
+export declare const DEFAULT_SHAPE_TOOL: ShapeTool;
+export declare const DEFAULT_PROJECT_ELEMENT_TOOL: BoardTool;
 export declare const SHAPE_DEFAULT_SIZES: Record<ShapeTool, {
     width: number;
     height: number;

package/dist/esm/presentation/whiteboard/bottomDock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bottomDock.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/bottomDock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAyBjE,eAAO,MAAM,WAAW,oEASvB,CAAC;AAGF,eAAO,MAAM,eAAe,sJAQ3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAU5B,CAAC;AAGF,eAAO,MAAM,iBAAiB,oEAAwB,CAAC;AAIvD,eAAO,MAAM,UAAU,mQAQtB,CAAC;AAGF,eAAO,MAAM,UAAU;;;;;;;;;;;CAiBb,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,UAAU,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,kBAAkB,GAAG,UAAU,CAAC;AAEnE;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAE/D,eAAO,MAAM,WAAW,EAAE,SAAS,SAAS,EAI3C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,MAAM,SAAS,KAAG,IAAI,IAAI,SACH,CAAC;AAIpD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CACtC,SAAS,EACT;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAKlC,CAAC;AAIF,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAEvC,oDAAoD;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAExD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,GAAI,iEAOxB,eAAe,KAAG,YAYpB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,SAAS,CAAC;IACtB,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACzC;AAGD,eAAO,MAAM,UAAU,GAAI,+BAGxB,eAAe,KAAG,YAwGpB,CAAC"}
+{"version":3,"file":"bottomDock.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/bottomDock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AA4BjE,eAAO,MAAM,WAAW,oEA2BvB,CAAC;AAGF,eAAO,MAAM,eAAe,sJAQ3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAU5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,oEAAwB,CAAC;AAIpD,eAAO,MAAM,UAAU,mQAQtB,CAAC;AAGF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;CAsBb,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,UAAU,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,kBAAkB,GAAG,UAAU,CAAC;AAEnE;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GACjB,QAAQ,GACR,MAAM,GACN,MAAM,GACN,SAAS,GACT,MAAM,GACN,SAAS,CAAC;AAEd,eAAO,MAAM,WAAW,EAAE,SAAS,SAAS,EAI3C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,MAAM,SAAS,KAAG,IAAI,IAAI,SACH,CAAC;AAEpD;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAA8B,CAAC;AAChE,eAAO,MAAM,4BAA4B,EAAE,SAAkB,CAAC;AAI9D,eAAO,MAAM,mBAAmB,EAAE,MAAM,CACtC,SAAS,EACT;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAKlC,CAAC;AAIF,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAEvC,oDAAoD;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAExD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,GAAI,iEAOxB,eAAe,KAAG,YAYpB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,SAAS,CAAC;IACtB,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACzC;AAMD,eAAO,MAAM,UAAU,GAAI,+BAGxB,eAAe,KAAG,YAyKpB,CAAC"}

package/dist/esm/presentation/whiteboard/bottomDock.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState } from "react";
 import styled from "styled-components";
 import { IconButton } from "../../components/IconButton";
-import { AttachmentIcon, CircleIcon, ConnectionIcon, DrawIcon, InsertLinkIcon, RoundedRectangleIcon, ShapesIcon, NoteIcon, TextIcon, TriangleIcon } from "../../components/Icons";
+import { AttachmentIcon, CircleIcon, ConnectionIcon, DrawIcon, InsertLinkIcon, ProjectIcon, ProjectStarIcon, RoundedRectangleIcon, ShapesIcon, NoteIcon, TaskIcon, TextIcon, TriangleIcon } from "../../components/Icons";
 import { Tooltip } from "../../components/Tooltip";
 import { Caption1 } from "../../components/Typography";
 
@@ -14,7 +14,7 @@ import { Caption1 } from "../../components/Typography";
 export const ToolSurface = styled.div.withConfig({
   displayName: "bottomDock__ToolSurface",
   componentId: "sc-1xsxwg0-0"
-})(["display:flex;align-items:center;gap:2px;padding:6px;border-radius:14px;background-color:var(--page-paper-main);box-shadow:0 6px 24px rgba(0,0,0,0.16);border:1px solid var(--border-primary);"]);
+})(["display:flex;align-items:center;gap:2px;padding:6px;border-radius:14px;background-color:var(--page-paper-main);box-shadow:0 6px 24px rgba(0,0,0,0.16);border:1px solid var(--border-primary);svg > [stroke],svg > g [stroke]{stroke:currentColor;}"]);
 
 /* vertical separator used inside the toolbars */
 export const verticalDivider = "\n  .divider {\n    width: 1px;\n    height: 24px;\n    background-color: var(--color-theme-400);\n    margin: 0 6px;\n    flex-shrink: 0;\n  }\n";
@@ -23,9 +23,16 @@ export const StyledBottomDock = styled.div.withConfig({
   componentId: "sc-1xsxwg0-1"
 })(["position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;max-width:calc(100% - 32px);"]);
 
-/* shape sub-toolbar: Circle / Rectangle / Triangle */
-export const StyledShapePicker = styled(ToolSurface).withConfig({
-  displayName: "bottomDock__StyledShapePicker",
+/**
+ * The floating second toolbar row — a small pill above the dock that holds the
+ * members of one tool family (Circle / Rectangle / Triangle, or Task / Project).
+ *
+ * It is the same surface as the dock itself, so a family reads as an extension
+ * of the button that opened it rather than as a different kind of UI. Only one
+ * pill is ever up, because only one tool is ever armed.
+ */
+export const StyledToolPill = styled(ToolSurface).withConfig({
+  displayName: "bottomDock__StyledToolPill",
   componentId: "sc-1xsxwg0-2"
 })([""]);
 
@@ -42,24 +49,40 @@ export const TOOL_HINTS = {
   roundedRectangle: "Click to drop a default rectangle, or draw one to size. Press R for a rectangle.",
   triangle: "Click to drop a default triangle, or draw one to size. Press Y for a triangle.",
   connector: "Drag from one element to another to connect them. Press C to connect.",
+  projectElements: "Put a task or a project on the board — pick which above, then draw its card.",
+  project: "Draw a box to place a project card, then pick the project it shows.",
+  task: "Draw a box to place a task card, then pick the task it shows.",
   link: "Draw a box to place a link, or paste a URL anywhere. Press L for link.",
   file: "Draw a box to place a file, or drop one on the board. Press F for file.",
   sticky: "Click anywhere on the canvas to drop a sticky note. Press S for a sticky note.",
   text: "Click anywhere on the canvas to start typing. Press T for text.",
   draw: "Click and drag to draw freehand. Press D for the pen.",
-  shapes: "Start drawing the shape on canvas to see the result. Press R to draw a rectangle."
+  shapes: "Pick a shape above, then draw it on the board. Press R for a rectangle."
 };
 
 /**
- * The armed board tool. Link, File and the three shapes are wired — arming one
- * turns the next canvas click into "drop the default-size element here" and a
- * drag into "draw one this big"; everything else stays a mock, so the board is
- * otherwise always in select mode.
+ * The armed board tool. Link, File, Project, Task and the three shapes are
+ * wired — arming one turns the next canvas click into "drop the default-size
+ * element here" and a drag into "draw one this big"; everything else stays a
+ * mock, so the board is otherwise always in select mode.
  */
 
 export const SHAPE_TOOLS = ["circle", "roundedRectangle", "triangle"];
 export const isShapeTool = tool => SHAPE_TOOLS.includes(tool);
 
+/**
+ * What a dock button arms the instant its pill opens.
+ *
+ * Opening a family and choosing inside it are two separate decisions, and the
+ * second one has a right answer often enough that asking for it every time is
+ * just a toll: a shape is usually a rectangle, and the thing people put on a
+ * board is usually a task. So the pill opens with that member already armed and
+ * the gesture can start immediately — picking another member is a correction,
+ * not a required step.
+ */
+export const DEFAULT_SHAPE_TOOL = "roundedRectangle";
+export const DEFAULT_PROJECT_ELEMENT_TOOL = "task";
+
 /* What a plain click drops — mirrors DEFAULT_SHAPE_SIZES in
    new-activecollab-front, and is exactly what the hover preview promises. */
 export const SHAPE_DEFAULT_SIZES = {
@@ -100,7 +123,10 @@ export const ToolButton = _ref => {
     onMouseLeave: onMouseLeave
   }, children));
 };
-/* Bottom-centre tool dock (shape picker + main toolbar + hint). */
+/* Bottom-centre tool dock: the family pill (when one is open), the main
+   toolbar, and the shared hint line. The dock is anchored by its BOTTOM edge,
+   so a pill appearing or disappearing grows the stack upwards and never moves
+   the toolbar itself. */
 export const BottomDock = _ref2 => {
   let activeTool = _ref2.activeTool,
     onToolChange = _ref2.onToolChange;
@@ -116,37 +142,58 @@ export const BottomDock = _ref2 => {
      gesture happens on the canvas, so that is exactly when the instruction is
      needed. */
   const hint = hoverHint != null ? hoverHint : activeTool === "select" ? null : TOOL_HINTS[activeTool];
-  return /*#__PURE__*/React.createElement(StyledBottomDock, null, /*#__PURE__*/React.createElement(StyledShapePicker, null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Circle"
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    variant: "text gray",
+
+  /* Which pill is up. Both are DERIVED from the armed tool rather than kept as
+     their own open/closed state: opening a pill always arms one of its members,
+     so "a member of this family is armed" and "this pill is showing" are the
+     same fact. Deriving it is what makes every way of leaving the family close
+     the pill for free — another dock tool, Esc on the canvas, or the gesture
+     finishing and disarming the tool. Two states could disagree; one cannot. */
+  const shapesOpen = isShapeTool(activeTool);
+  const projectElementsOpen = activeTool === "task" || activeTool === "project";
+  return /*#__PURE__*/React.createElement(StyledBottomDock, null, shapesOpen ? /*#__PURE__*/React.createElement(StyledToolPill, null, /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Circle",
     active: activeTool === "circle",
-    onClick: () => onToolChange(activeTool === "circle" ? "select" : "circle")
-  }, hoverProps("circle")), /*#__PURE__*/React.createElement(CircleIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Rectangle"
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    variant: "text gray",
+    onClick: () => onToolChange("circle")
+  }, hoverProps("circle")), /*#__PURE__*/React.createElement(CircleIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Rectangle",
     active: activeTool === "roundedRectangle",
-    onClick: () => onToolChange(activeTool === "roundedRectangle" ? "select" : "roundedRectangle")
-  }, hoverProps("roundedRectangle")), /*#__PURE__*/React.createElement(RoundedRectangleIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Triangle"
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    variant: "text gray",
+    onClick: () => onToolChange("roundedRectangle")
+  }, hoverProps("roundedRectangle")), /*#__PURE__*/React.createElement(RoundedRectangleIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Triangle",
     active: activeTool === "triangle",
-    onClick: () => onToolChange(activeTool === "triangle" ? "select" : "triangle")
-  }, hoverProps("triangle")), /*#__PURE__*/React.createElement(TriangleIcon, null)))), /*#__PURE__*/React.createElement(ToolSurface, null, /*#__PURE__*/React.createElement(Tooltip, {
+    onClick: () => onToolChange("triangle")
+  }, hoverProps("triangle")), /*#__PURE__*/React.createElement(TriangleIcon, null))) : null, projectElementsOpen ? /*#__PURE__*/React.createElement(StyledToolPill, null, /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Task",
+    active: activeTool === "task",
+    onClick: () => onToolChange("task")
+  }, hoverProps("task")), /*#__PURE__*/React.createElement(TaskIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Project",
+    active: activeTool === "project",
+    onClick: () => onToolChange("project")
+  }, hoverProps("project")), /*#__PURE__*/React.createElement(ProjectIcon, null))) : null, /*#__PURE__*/React.createElement(ToolSurface, null, /*#__PURE__*/React.createElement(Tooltip, {
     title: "Sticky Note"
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    variant: "text gray"
+    variant: "text gray",
+    onClick: () => onToolChange("select")
   }, hoverProps("sticky")), /*#__PURE__*/React.createElement(NoteIcon, null))), /*#__PURE__*/React.createElement(ToolButton, _extends({
-    tip: "Text"
+    tip: "Text",
+    onClick: () => onToolChange("select")
   }, hoverProps("text")), /*#__PURE__*/React.createElement(TextIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
-    tip: "Draw"
+    tip: "Draw",
+    onClick: () => onToolChange("select")
   }, hoverProps("draw")), /*#__PURE__*/React.createElement(DrawIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
-    tip: "Shape"
+    tip: "Shape",
+    active: shapesOpen,
+    onClick: () => onToolChange(shapesOpen ? "select" : DEFAULT_SHAPE_TOOL)
   }, hoverProps("shapes")), /*#__PURE__*/React.createElement(ShapesIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
-    tip: "Connect"
+    tip: "Connect",
+    onClick: () => onToolChange("select")
   }, hoverProps("connector")), /*#__PURE__*/React.createElement(ConnectionIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Project Elements",
+    active: projectElementsOpen,
+    onClick: () => onToolChange(projectElementsOpen ? "select" : DEFAULT_PROJECT_ELEMENT_TOOL)
+  }, hoverProps("projectElements")), /*#__PURE__*/React.createElement(ProjectStarIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
     tip: "Link",
     active: activeTool === "link",
     onClick: () => onToolChange(activeTool === "link" ? "select" : "link")

package/dist/esm/presentation/whiteboard/bottomDock.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottomDock.js","names":["React","useState","styled","IconButton","AttachmentIcon","CircleIcon","ConnectionIcon","DrawIcon","InsertLinkIcon","RoundedRectangleIcon","ShapesIcon","NoteIcon","TextIcon","TriangleIcon","Tooltip","Caption1","ToolSurface","div","withConfig","displayName","componentId","verticalDivider","StyledBottomDock","StyledShapePicker","StyledHint","TOOL_HINTS","circle","roundedRectangle","triangle","connector","link","file","sticky","text","draw","shapes","SHAPE_TOOLS","isShapeTool","tool","includes","SHAPE_DEFAULT_SIZES","width","height","CARD_PREVIEW_HEIGHT","ToolButton","_ref","tip","active","children","onClick","onMouseEnter","onMouseLeave","createElement","title","variant","BottomDock","_ref2","activeTool","onToolChange","_useState","hoverHint","setHoverHint","hoverProps","hint","_extends","color","className","undefined"],"sources":["../../../../src/presentation/whiteboard/bottomDock.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode, useState } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { IconButton } from \"../../components/IconButton\";\nimport {\n  AttachmentIcon,\n  CircleIcon,\n  ConnectionIcon,\n  DrawIcon,\n  InsertLinkIcon,\n  RoundedRectangleIcon,\n  ShapesIcon,\n  NoteIcon,\n  TextIcon,\n  TriangleIcon,\n} from \"../../components/Icons\";\nimport { Tooltip } from \"../../components/Tooltip\";\nimport { Caption1 } from \"../../components/Typography\";\n\n/* ------------------------------------------------------------------ */\n/* Floating toolbar surfaces                                           */\n/* ------------------------------------------------------------------ */\n\n/* A floating, rounded toolbar surface (paper + shadow). */\nexport const ToolSurface = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 6px;\n  border-radius: 14px;\n  background-color: var(--page-paper-main);\n  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);\n  border: 1px solid var(--border-primary);\n`;\n\n/* vertical separator used inside the toolbars */\nexport const verticalDivider = `\n  .divider {\n    width: 1px;\n    height: 24px;\n    background-color: var(--color-theme-400);\n    margin: 0 6px;\n    flex-shrink: 0;\n  }\n`;\n\nexport const StyledBottomDock = styled.div`\n  position: absolute;\n  left: 50%;\n  bottom: 18px;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 32px);\n`;\n\n/* shape sub-toolbar: Circle / Rectangle / Triangle */\nexport const StyledShapePicker = styled(ToolSurface)``;\n\n/* Reserve two Caption1 lines (2 × 16px) so showing/hiding the hint never\n   shifts the dock; visibility keeps the reserved space when hidden. */\nexport const StyledHint = styled(Caption1)`\n  text-align: center;\n  padding: 0 16px;\n  min-height: 32px;\n\n  &.hint-hidden {\n    visibility: hidden;\n  }\n`;\n\n/* Per-tool hint shown under the dock only while that tool is hovered. */\nexport const TOOL_HINTS = {\n  circle:\n    \"Click to drop a default circle, or draw one to size. Press O for a circle.\",\n  roundedRectangle:\n    \"Click to drop a default rectangle, or draw one to size. Press R for a rectangle.\",\n  triangle:\n    \"Click to drop a default triangle, or draw one to size. Press Y for a triangle.\",\n  connector:\n    \"Drag from one element to another to connect them. Press C to connect.\",\n  link: \"Draw a box to place a link, or paste a URL anywhere. Press L for link.\",\n  file: \"Draw a box to place a file, or drop one on the board. Press F for file.\",\n  sticky:\n    \"Click anywhere on the canvas to drop a sticky note. Press S for a sticky note.\",\n  text: \"Click anywhere on the canvas to start typing. Press T for text.\",\n  draw: \"Click and drag to draw freehand. Press D for the pen.\",\n  shapes:\n    \"Start drawing the shape on canvas to see the result. Press R to draw a rectangle.\",\n} as const;\n\nexport type ToolHintKey = keyof typeof TOOL_HINTS;\n\nexport type ShapeTool = \"circle\" | \"roundedRectangle\" | \"triangle\";\n\n/**\n * The armed board tool. Link, File and the three shapes are wired — arming one\n * turns the next canvas click into \"drop the default-size element here\" and a\n * drag into \"draw one this big\"; everything else stays a mock, so the board is\n * otherwise always in select mode.\n */\nexport type BoardTool = \"select\" | \"link\" | \"file\" | ShapeTool;\n\nexport const SHAPE_TOOLS: readonly ShapeTool[] = [\n  \"circle\",\n  \"roundedRectangle\",\n  \"triangle\",\n];\n\nexport const isShapeTool = (tool: BoardTool): tool is ShapeTool =>\n  (SHAPE_TOOLS as readonly string[]).includes(tool);\n\n/* What a plain click drops — mirrors DEFAULT_SHAPE_SIZES in\n   new-activecollab-front, and is exactly what the hover preview promises. */\nexport const SHAPE_DEFAULT_SIZES: Record<\n  ShapeTool,\n  { width: number; height: number }\n> = {\n  roundedRectangle: { width: 100, height: 60 },\n  circle: { width: 80, height: 80 },\n  triangle: { width: 80, height: 80 },\n};\n\n/* Cards are auto-height, so their hover preview uses the app's nominal wire\n   height (DEFAULT_LINK_CARD_SIZE / DEFAULT_FILE_CARD_SIZE). */\nexport const CARD_PREVIEW_HEIGHT = 240;\n\n/** The kinds of card the draw gesture can place. */\nexport type DrawableTool = Exclude<BoardTool, \"select\">;\n\nexport interface ToolButtonProps {\n  tip: string;\n  active?: boolean;\n  children: ReactNode;\n  onClick?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n}\n\nexport const ToolButton = ({\n  tip,\n  active,\n  children,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n}: ToolButtonProps): ReactElement => (\n  <Tooltip title={tip}>\n    <IconButton\n      variant=\"text gray\"\n      active={active}\n      onClick={onClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {children}\n    </IconButton>\n  </Tooltip>\n);\n\nexport interface BottomDockProps {\n  activeTool: BoardTool;\n  onToolChange: (tool: BoardTool) => void;\n}\n\n/* Bottom-centre tool dock (shape picker + main toolbar + hint). */\nexport const BottomDock = ({\n  activeTool,\n  onToolChange,\n}: BottomDockProps): ReactElement => {\n  const [hoverHint, setHoverHint] = useState<string | null>(null);\n\n  const hoverProps = (tool: ToolHintKey): Record<string, () => void> => ({\n    onMouseEnter: () => setHoverHint(TOOL_HINTS[tool]),\n    onMouseLeave: () => setHoverHint(null),\n  });\n\n  /* An armed tool keeps its hint up after the pointer leaves the dock — the\n     gesture happens on the canvas, so that is exactly when the instruction is\n     needed. */\n  const hint =\n    hoverHint ?? (activeTool === \"select\" ? null : TOOL_HINTS[activeTool]);\n\n  return (\n    <StyledBottomDock>\n      <StyledShapePicker>\n        <Tooltip title=\"Circle\">\n          <IconButton\n            variant=\"text gray\"\n            active={activeTool === \"circle\"}\n            onClick={() =>\n              onToolChange(activeTool === \"circle\" ? \"select\" : \"circle\")\n            }\n            {...hoverProps(\"circle\")}\n          >\n            <CircleIcon />\n          </IconButton>\n        </Tooltip>\n        <Tooltip title=\"Rectangle\">\n          <IconButton\n            variant=\"text gray\"\n            active={activeTool === \"roundedRectangle\"}\n            onClick={() =>\n              onToolChange(\n                activeTool === \"roundedRectangle\"\n                  ? \"select\"\n                  : \"roundedRectangle\"\n              )\n            }\n            {...hoverProps(\"roundedRectangle\")}\n          >\n            <RoundedRectangleIcon />\n          </IconButton>\n        </Tooltip>\n        <Tooltip title=\"Triangle\">\n          <IconButton\n            variant=\"text gray\"\n            active={activeTool === \"triangle\"}\n            onClick={() =>\n              onToolChange(activeTool === \"triangle\" ? \"select\" : \"triangle\")\n            }\n            {...hoverProps(\"triangle\")}\n          >\n            <TriangleIcon />\n          </IconButton>\n        </Tooltip>\n      </StyledShapePicker>\n\n      <ToolSurface>\n        <Tooltip title=\"Sticky Note\">\n          <IconButton variant=\"text gray\" {...hoverProps(\"sticky\")}>\n            <NoteIcon />\n          </IconButton>\n        </Tooltip>\n        <ToolButton tip=\"Text\" {...hoverProps(\"text\")}>\n          <TextIcon />\n        </ToolButton>\n        <ToolButton tip=\"Draw\" {...hoverProps(\"draw\")}>\n          <DrawIcon />\n        </ToolButton>\n        <ToolButton tip=\"Shape\" {...hoverProps(\"shapes\")}>\n          <ShapesIcon />\n        </ToolButton>\n        <ToolButton tip=\"Connect\" {...hoverProps(\"connector\")}>\n          <ConnectionIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"Link\"\n          active={activeTool === \"link\"}\n          onClick={() =>\n            onToolChange(activeTool === \"link\" ? \"select\" : \"link\")\n          }\n          {...hoverProps(\"link\")}\n        >\n          <InsertLinkIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"File\"\n          active={activeTool === \"file\"}\n          onClick={() =>\n            onToolChange(activeTool === \"file\" ? \"select\" : \"file\")\n          }\n          {...hoverProps(\"file\")}\n        >\n          <AttachmentIcon />\n        </ToolButton>\n      </ToolSurface>\n\n      <StyledHint color=\"tertiary\" className={hint ? undefined : \"hint-hidden\"}>\n        {hint ?? \" \"}\n      </StyledHint>\n    </StyledBottomDock>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"bottomDock.js","names":["React","useState","styled","IconButton","AttachmentIcon","CircleIcon","ConnectionIcon","DrawIcon","InsertLinkIcon","ProjectIcon","ProjectStarIcon","RoundedRectangleIcon","ShapesIcon","NoteIcon","TaskIcon","TextIcon","TriangleIcon","Tooltip","Caption1","ToolSurface","div","withConfig","displayName","componentId","verticalDivider","StyledBottomDock","StyledToolPill","StyledHint","TOOL_HINTS","circle","roundedRectangle","triangle","connector","projectElements","project","task","link","file","sticky","text","draw","shapes","SHAPE_TOOLS","isShapeTool","tool","includes","DEFAULT_SHAPE_TOOL","DEFAULT_PROJECT_ELEMENT_TOOL","SHAPE_DEFAULT_SIZES","width","height","CARD_PREVIEW_HEIGHT","ToolButton","_ref","tip","active","children","onClick","onMouseEnter","onMouseLeave","createElement","title","variant","BottomDock","_ref2","activeTool","onToolChange","_useState","hoverHint","setHoverHint","hoverProps","hint","shapesOpen","projectElementsOpen","_extends","color","className","undefined"],"sources":["../../../../src/presentation/whiteboard/bottomDock.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode, useState } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { IconButton } from \"../../components/IconButton\";\nimport {\n  AttachmentIcon,\n  CircleIcon,\n  ConnectionIcon,\n  DrawIcon,\n  InsertLinkIcon,\n  ProjectIcon,\n  ProjectStarIcon,\n  RoundedRectangleIcon,\n  ShapesIcon,\n  NoteIcon,\n  TaskIcon,\n  TextIcon,\n  TriangleIcon,\n} from \"../../components/Icons\";\nimport { Tooltip } from \"../../components/Tooltip\";\nimport { Caption1 } from \"../../components/Typography\";\n\n/* ------------------------------------------------------------------ */\n/* Floating toolbar surfaces                                           */\n/* ------------------------------------------------------------------ */\n\n/* A floating, rounded toolbar surface (paper + shadow). */\nexport const ToolSurface = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 6px;\n  border-radius: 14px;\n  background-color: var(--page-paper-main);\n  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);\n  border: 1px solid var(--border-primary);\n\n  /* A DS button colours its icon by declaring svg { fill: currentColor }, so\n     every FILLED glyph follows the button's active and hover states for free.\n     Three glyphs here are not filled: RoundedRectangleIcon and TriangleIcon are\n     outlines with a stroke of var(--color-theme-600) baked into the path, and\n     ProjectIcon draws its ruler as a stroked rect. Nothing about the button\n     could ever reach them — an armed rectangle stayed exactly as grey as an\n     unarmed one. This extends the same currentColor contract to a declared\n     stroke.\n\n     Scoped to direct children and to shapes inside a <g>, NOT to every\n     descendant: ProjectIcon cuts its ruler with a <mask> whose <line> is\n     stroked BLACK on purpose. In a mask only luminance matters, so recolouring\n     that line would turn a clean diagonal cut into a half-transparent smear. */\n  svg > [stroke],\n  svg > g [stroke] {\n    stroke: currentColor;\n  }\n`;\n\n/* vertical separator used inside the toolbars */\nexport const verticalDivider = `\n  .divider {\n    width: 1px;\n    height: 24px;\n    background-color: var(--color-theme-400);\n    margin: 0 6px;\n    flex-shrink: 0;\n  }\n`;\n\nexport const StyledBottomDock = styled.div`\n  position: absolute;\n  left: 50%;\n  bottom: 18px;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 32px);\n`;\n\n/**\n * The floating second toolbar row — a small pill above the dock that holds the\n * members of one tool family (Circle / Rectangle / Triangle, or Task / Project).\n *\n * It is the same surface as the dock itself, so a family reads as an extension\n * of the button that opened it rather than as a different kind of UI. Only one\n * pill is ever up, because only one tool is ever armed.\n */\nexport const StyledToolPill = styled(ToolSurface)``;\n\n/* Reserve two Caption1 lines (2 × 16px) so showing/hiding the hint never\n   shifts the dock; visibility keeps the reserved space when hidden. */\nexport const StyledHint = styled(Caption1)`\n  text-align: center;\n  padding: 0 16px;\n  min-height: 32px;\n\n  &.hint-hidden {\n    visibility: hidden;\n  }\n`;\n\n/* Per-tool hint shown under the dock only while that tool is hovered. */\nexport const TOOL_HINTS = {\n  circle:\n    \"Click to drop a default circle, or draw one to size. Press O for a circle.\",\n  roundedRectangle:\n    \"Click to drop a default rectangle, or draw one to size. Press R for a rectangle.\",\n  triangle:\n    \"Click to drop a default triangle, or draw one to size. Press Y for a triangle.\",\n  connector:\n    \"Drag from one element to another to connect them. Press C to connect.\",\n  projectElements:\n    \"Put a task or a project on the board — pick which above, then draw its card.\",\n  project:\n    \"Draw a box to place a project card, then pick the project it shows.\",\n  task: \"Draw a box to place a task card, then pick the task it shows.\",\n  link: \"Draw a box to place a link, or paste a URL anywhere. Press L for link.\",\n  file: \"Draw a box to place a file, or drop one on the board. Press F for file.\",\n  sticky:\n    \"Click anywhere on the canvas to drop a sticky note. Press S for a sticky note.\",\n  text: \"Click anywhere on the canvas to start typing. Press T for text.\",\n  draw: \"Click and drag to draw freehand. Press D for the pen.\",\n  shapes:\n    \"Pick a shape above, then draw it on the board. Press R for a rectangle.\",\n} as const;\n\nexport type ToolHintKey = keyof typeof TOOL_HINTS;\n\nexport type ShapeTool = \"circle\" | \"roundedRectangle\" | \"triangle\";\n\n/**\n * The armed board tool. Link, File, Project, Task and the three shapes are\n * wired — arming one turns the next canvas click into \"drop the default-size\n * element here\" and a drag into \"draw one this big\"; everything else stays a\n * mock, so the board is otherwise always in select mode.\n */\nexport type BoardTool =\n  | \"select\"\n  | \"link\"\n  | \"file\"\n  | \"project\"\n  | \"task\"\n  | ShapeTool;\n\nexport const SHAPE_TOOLS: readonly ShapeTool[] = [\n  \"circle\",\n  \"roundedRectangle\",\n  \"triangle\",\n];\n\nexport const isShapeTool = (tool: BoardTool): tool is ShapeTool =>\n  (SHAPE_TOOLS as readonly string[]).includes(tool);\n\n/**\n * What a dock button arms the instant its pill opens.\n *\n * Opening a family and choosing inside it are two separate decisions, and the\n * second one has a right answer often enough that asking for it every time is\n * just a toll: a shape is usually a rectangle, and the thing people put on a\n * board is usually a task. So the pill opens with that member already armed and\n * the gesture can start immediately — picking another member is a correction,\n * not a required step.\n */\nexport const DEFAULT_SHAPE_TOOL: ShapeTool = \"roundedRectangle\";\nexport const DEFAULT_PROJECT_ELEMENT_TOOL: BoardTool = \"task\";\n\n/* What a plain click drops — mirrors DEFAULT_SHAPE_SIZES in\n   new-activecollab-front, and is exactly what the hover preview promises. */\nexport const SHAPE_DEFAULT_SIZES: Record<\n  ShapeTool,\n  { width: number; height: number }\n> = {\n  roundedRectangle: { width: 100, height: 60 },\n  circle: { width: 80, height: 80 },\n  triangle: { width: 80, height: 80 },\n};\n\n/* Cards are auto-height, so their hover preview uses the app's nominal wire\n   height (DEFAULT_LINK_CARD_SIZE / DEFAULT_FILE_CARD_SIZE). */\nexport const CARD_PREVIEW_HEIGHT = 240;\n\n/** The kinds of card the draw gesture can place. */\nexport type DrawableTool = Exclude<BoardTool, \"select\">;\n\nexport interface ToolButtonProps {\n  tip: string;\n  active?: boolean;\n  children: ReactNode;\n  onClick?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n}\n\nexport const ToolButton = ({\n  tip,\n  active,\n  children,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n}: ToolButtonProps): ReactElement => (\n  <Tooltip title={tip}>\n    <IconButton\n      variant=\"text gray\"\n      active={active}\n      onClick={onClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {children}\n    </IconButton>\n  </Tooltip>\n);\n\nexport interface BottomDockProps {\n  activeTool: BoardTool;\n  onToolChange: (tool: BoardTool) => void;\n}\n\n/* Bottom-centre tool dock: the family pill (when one is open), the main\n   toolbar, and the shared hint line. The dock is anchored by its BOTTOM edge,\n   so a pill appearing or disappearing grows the stack upwards and never moves\n   the toolbar itself. */\nexport const BottomDock = ({\n  activeTool,\n  onToolChange,\n}: BottomDockProps): ReactElement => {\n  const [hoverHint, setHoverHint] = useState<string | null>(null);\n\n  const hoverProps = (tool: ToolHintKey): Record<string, () => void> => ({\n    onMouseEnter: () => setHoverHint(TOOL_HINTS[tool]),\n    onMouseLeave: () => setHoverHint(null),\n  });\n\n  /* An armed tool keeps its hint up after the pointer leaves the dock — the\n     gesture happens on the canvas, so that is exactly when the instruction is\n     needed. */\n  const hint =\n    hoverHint ?? (activeTool === \"select\" ? null : TOOL_HINTS[activeTool]);\n\n  /* Which pill is up. Both are DERIVED from the armed tool rather than kept as\n     their own open/closed state: opening a pill always arms one of its members,\n     so \"a member of this family is armed\" and \"this pill is showing\" are the\n     same fact. Deriving it is what makes every way of leaving the family close\n     the pill for free — another dock tool, Esc on the canvas, or the gesture\n     finishing and disarming the tool. Two states could disagree; one cannot. */\n  const shapesOpen = isShapeTool(activeTool);\n  const projectElementsOpen = activeTool === \"task\" || activeTool === \"project\";\n\n  return (\n    <StyledBottomDock>\n      {/* Shapes pill — hidden until the Shape dock button opens it. Inside a\n          pill a click is a plain choice, never a toggle off: the dock button is\n          what closes the family, so clicking the armed shape again must not\n          make the row that is being used disappear. */}\n      {shapesOpen ? (\n        <StyledToolPill>\n          <ToolButton\n            tip=\"Circle\"\n            active={activeTool === \"circle\"}\n            onClick={() => onToolChange(\"circle\")}\n            {...hoverProps(\"circle\")}\n          >\n            <CircleIcon />\n          </ToolButton>\n          <ToolButton\n            tip=\"Rectangle\"\n            active={activeTool === \"roundedRectangle\"}\n            onClick={() => onToolChange(\"roundedRectangle\")}\n            {...hoverProps(\"roundedRectangle\")}\n          >\n            <RoundedRectangleIcon />\n          </ToolButton>\n          <ToolButton\n            tip=\"Triangle\"\n            active={activeTool === \"triangle\"}\n            onClick={() => onToolChange(\"triangle\")}\n            {...hoverProps(\"triangle\")}\n          >\n            <TriangleIcon />\n          </ToolButton>\n        </StyledToolPill>\n      ) : null}\n\n      {/* Project Elements pill — the same surface, the same button size and\n          spacing, in the same slot above the dock. Task comes first because it\n          is what the button arms by default. */}\n      {projectElementsOpen ? (\n        <StyledToolPill>\n          <ToolButton\n            tip=\"Task\"\n            active={activeTool === \"task\"}\n            onClick={() => onToolChange(\"task\")}\n            {...hoverProps(\"task\")}\n          >\n            <TaskIcon />\n          </ToolButton>\n          <ToolButton\n            tip=\"Project\"\n            active={activeTool === \"project\"}\n            onClick={() => onToolChange(\"project\")}\n            {...hoverProps(\"project\")}\n          >\n            <ProjectIcon />\n          </ToolButton>\n        </StyledToolPill>\n      ) : null}\n\n      <ToolSurface>\n        {/* The tools that are still mocks arm nothing — but they do DISARM, so\n            reaching for one closes whatever pill is up and ends the gesture the\n            board was waiting for. A dead button that also leaves the previous\n            tool armed would be the confusing half of \"not implemented yet\". */}\n        <Tooltip title=\"Sticky Note\">\n          <IconButton\n            variant=\"text gray\"\n            onClick={() => onToolChange(\"select\")}\n            {...hoverProps(\"sticky\")}\n          >\n            <NoteIcon />\n          </IconButton>\n        </Tooltip>\n        <ToolButton\n          tip=\"Text\"\n          onClick={() => onToolChange(\"select\")}\n          {...hoverProps(\"text\")}\n        >\n          <TextIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"Draw\"\n          onClick={() => onToolChange(\"select\")}\n          {...hoverProps(\"draw\")}\n        >\n          <DrawIcon />\n        </ToolButton>\n        {/* Opening the family and arming its default member are one click: the\n            pill appears with Rectangle already armed, so the next thing the\n            pointer does can be the drawing itself. */}\n        <ToolButton\n          tip=\"Shape\"\n          active={shapesOpen}\n          onClick={() =>\n            onToolChange(shapesOpen ? \"select\" : DEFAULT_SHAPE_TOOL)\n          }\n          {...hoverProps(\"shapes\")}\n        >\n          <ShapesIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"Connect\"\n          onClick={() => onToolChange(\"select\")}\n          {...hoverProps(\"connector\")}\n        >\n          <ConnectionIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"Project Elements\"\n          active={projectElementsOpen}\n          onClick={() =>\n            onToolChange(\n              projectElementsOpen ? \"select\" : DEFAULT_PROJECT_ELEMENT_TOOL\n            )\n          }\n          {...hoverProps(\"projectElements\")}\n        >\n          <ProjectStarIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"Link\"\n          active={activeTool === \"link\"}\n          onClick={() =>\n            onToolChange(activeTool === \"link\" ? \"select\" : \"link\")\n          }\n          {...hoverProps(\"link\")}\n        >\n          <InsertLinkIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"File\"\n          active={activeTool === \"file\"}\n          onClick={() =>\n            onToolChange(activeTool === \"file\" ? \"select\" : \"file\")\n          }\n          {...hoverProps(\"file\")}\n        >\n          <AttachmentIcon />\n        </ToolButton>\n      </ToolSurface>\n\n      <StyledHint color=\"tertiary\" className={hint ? undefined : \"hint-hidden\"}>\n        {hint ?? \" \"}\n      </StyledHint>\n    </StyledBottomDock>\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,IAA6BC,QAAQ,QAAQ,OAAO;AAEhE,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,SAASC,UAAU,QAAQ,6BAA6B;AACxD,SACEC,cAAc,EACdC,UAAU,EACVC,cAAc,EACdC,QAAQ,EACRC,cAAc,EACdC,WAAW,EACXC,eAAe,EACfC,oBAAoB,EACpBC,UAAU,EACVC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,YAAY,QACP,wBAAwB;AAC/B,SAASC,OAAO,QAAQ,0BAA0B;AAClD,SAASC,QAAQ,QAAQ,6BAA6B;;AAEtD;AACA;AACA;;AAEA;AACA,OAAO,MAAMC,WAAW,GAAGjB,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0PA2BpC;;AAED;AACA,OAAO,MAAMC,eAAe,sJAQ3B;AAED,OAAO,MAAMC,gBAAgB,GAAGvB,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qKAUzC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,cAAc,GAAGxB,MAAM,CAACiB,WAAW,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;;AAEnD;AACA;AACA,OAAO,MAAMI,UAAU,GAAGzB,MAAM,CAACgB,QAAQ,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0FAQzC;;AAED;AACA,OAAO,MAAMK,UAAU,GAAG;EACxBC,MAAM,EACJ,4EAA4E;EAC9EC,gBAAgB,EACd,kFAAkF;EACpFC,QAAQ,EACN,gFAAgF;EAClFC,SAAS,EACP,uEAAuE;EACzEC,eAAe,EACb,8EAA8E;EAChFC,OAAO,EACL,qEAAqE;EACvEC,IAAI,EAAE,+DAA+D;EACrEC,IAAI,EAAE,wEAAwE;EAC9EC,IAAI,EAAE,yEAAyE;EAC/EC,MAAM,EACJ,gFAAgF;EAClFC,IAAI,EAAE,iEAAiE;EACvEC,IAAI,EAAE,uDAAuD;EAC7DC,MAAM,EACJ;AACJ,CAAU;;AAMV;AACA;AACA;AACA;AACA;AACA;;AASA,OAAO,MAAMC,WAAiC,GAAG,CAC/C,QAAQ,EACR,kBAAkB,EAClB,UAAU,CACX;AAED,OAAO,MAAMC,WAAW,GAAIC,IAAe,IACxCF,WAAW,CAAuBG,QAAQ,CAACD,IAAI,CAAC;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,kBAA6B,GAAG,kBAAkB;AAC/D,OAAO,MAAMC,4BAAuC,GAAG,MAAM;;AAE7D;AACA;AACA,OAAO,MAAMC,mBAGZ,GAAG;EACFlB,gBAAgB,EAAE;IAAEmB,KAAK,EAAE,GAAG;IAAEC,MAAM,EAAE;EAAG,CAAC;EAC5CrB,MAAM,EAAE;IAAEoB,KAAK,EAAE,EAAE;IAAEC,MAAM,EAAE;EAAG,CAAC;EACjCnB,QAAQ,EAAE;IAAEkB,KAAK,EAAE,EAAE;IAAEC,MAAM,EAAE;EAAG;AACpC,CAAC;;AAED;AACA;AACA,OAAO,MAAMC,mBAAmB,GAAG,GAAG;;AAEtC;;AAYA,OAAO,MAAMC,UAAU,GAAGC,IAAA;EAAA,IACxBC,GAAG,GAAAD,IAAA,CAAHC,GAAG;IACHC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,YAAY,GAAAL,IAAA,CAAZK,YAAY;IACZC,YAAY,GAAAN,IAAA,CAAZM,YAAY;EAAA,oBAEZ3D,KAAA,CAAA4D,aAAA,CAAC3C,OAAO;IAAC4C,KAAK,EAAEP;EAAI,gBAClBtD,KAAA,CAAA4D,aAAA,CAACzD,UAAU;IACT2D,OAAO,EAAC,WAAW;IACnBP,MAAM,EAAEA,MAAO;IACfE,OAAO,EAAEA,OAAQ;IACjBC,YAAY,EAAEA,YAAa;IAC3BC,YAAY,EAAEA;EAAa,GAE1BH,QACS,CACL,CAAC;AAAA,CACX;AAOD;AACA;AACA;AACA;AACA,OAAO,MAAMO,UAAU,GAAGC,KAAA,IAGW;EAAA,IAFnCC,UAAU,GAAAD,KAAA,CAAVC,UAAU;IACVC,YAAY,GAAAF,KAAA,CAAZE,YAAY;EAEZ,MAAAC,SAAA,GAAkClE,QAAQ,CAAgB,IAAI,CAAC;IAAxDmE,SAAS,GAAAD,SAAA;IAAEE,YAAY,GAAAF,SAAA;EAE9B,MAAMG,UAAU,GAAI1B,IAAiB,KAAkC;IACrEc,YAAY,EAAEA,CAAA,KAAMW,YAAY,CAACzC,UAAU,CAACgB,IAAI,CAAC,CAAC;IAClDe,YAAY,EAAEA,CAAA,KAAMU,YAAY,CAAC,IAAI;EACvC,CAAC,CAAC;;EAEF;AACF;AACA;EACE,MAAME,IAAI,GACRH,SAAS,WAATA,SAAS,GAAKH,UAAU,KAAK,QAAQ,GAAG,IAAI,GAAGrC,UAAU,CAACqC,UAAU,CAAE;;EAExE;AACF;AACA;AACA;AACA;AACA;EACE,MAAMO,UAAU,GAAG7B,WAAW,CAACsB,UAAU,CAAC;EAC1C,MAAMQ,mBAAmB,GAAGR,UAAU,KAAK,MAAM,IAAIA,UAAU,KAAK,SAAS;EAE7E,oBACEjE,KAAA,CAAA4D,aAAA,CAACnC,gBAAgB,QAKd+C,UAAU,gBACTxE,KAAA,CAAA4D,aAAA,CAAClC,cAAc,qBACb1B,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,QAAQ;IACZC,MAAM,EAAEU,UAAU,KAAK,QAAS;IAChCR,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,QAAQ;EAAE,GAClCI,UAAU,CAAC,QAAQ,CAAC,gBAExBtE,KAAA,CAAA4D,aAAA,CAACvD,UAAU,MAAE,CACH,CAAC,eACbL,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,WAAW;IACfC,MAAM,EAAEU,UAAU,KAAK,kBAAmB;IAC1CR,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,kBAAkB;EAAE,GAC5CI,UAAU,CAAC,kBAAkB,CAAC,gBAElCtE,KAAA,CAAA4D,aAAA,CAACjD,oBAAoB,MAAE,CACb,CAAC,eACbX,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,UAAU;IACdC,MAAM,EAAEU,UAAU,KAAK,UAAW;IAClCR,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,UAAU;EAAE,GACpCI,UAAU,CAAC,UAAU,CAAC,gBAE1BtE,KAAA,CAAA4D,aAAA,CAAC5C,YAAY,MAAE,CACL,CACE,CAAC,GACf,IAAI,EAKPyD,mBAAmB,gBAClBzE,KAAA,CAAA4D,aAAA,CAAClC,cAAc,qBACb1B,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,MAAM;IACVC,MAAM,EAAEU,UAAU,KAAK,MAAO;IAC9BR,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,MAAM;EAAE,GAChCI,UAAU,CAAC,MAAM,CAAC,gBAEtBtE,KAAA,CAAA4D,aAAA,CAAC9C,QAAQ,MAAE,CACD,CAAC,eACbd,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,SAAS;IACbC,MAAM,EAAEU,UAAU,KAAK,SAAU;IACjCR,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,SAAS;EAAE,GACnCI,UAAU,CAAC,SAAS,CAAC,gBAEzBtE,KAAA,CAAA4D,aAAA,CAACnD,WAAW,MAAE,CACJ,CACE,CAAC,GACf,IAAI,eAERT,KAAA,CAAA4D,aAAA,CAACzC,WAAW,qBAKVnB,KAAA,CAAA4D,aAAA,CAAC3C,OAAO;IAAC4C,KAAK,EAAC;EAAa,gBAC1B7D,KAAA,CAAA4D,aAAA,CAACzD,UAAU,EAAAuE,QAAA;IACTZ,OAAO,EAAC,WAAW;IACnBL,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,QAAQ;EAAE,GAClCI,UAAU,CAAC,QAAQ,CAAC,gBAExBtE,KAAA,CAAA4D,aAAA,CAAC/C,QAAQ,MAAE,CACD,CACL,CAAC,eACVb,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,MAAM;IACVG,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,QAAQ;EAAE,GAClCI,UAAU,CAAC,MAAM,CAAC,gBAEtBtE,KAAA,CAAA4D,aAAA,CAAC7C,QAAQ,MAAE,CACD,CAAC,eACbf,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,MAAM;IACVG,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,QAAQ;EAAE,GAClCI,UAAU,CAAC,MAAM,CAAC,gBAEtBtE,KAAA,CAAA4D,aAAA,CAACrD,QAAQ,MAAE,CACD,CAAC,eAIbP,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,OAAO;IACXC,MAAM,EAAEiB,UAAW;IACnBf,OAAO,EAAEA,CAAA,KACPS,YAAY,CAACM,UAAU,GAAG,QAAQ,GAAG1B,kBAAkB;EACxD,GACGwB,UAAU,CAAC,QAAQ,CAAC,gBAExBtE,KAAA,CAAA4D,aAAA,CAAChD,UAAU,MAAE,CACH,CAAC,eACbZ,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,SAAS;IACbG,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,QAAQ;EAAE,GAClCI,UAAU,CAAC,WAAW,CAAC,gBAE3BtE,KAAA,CAAA4D,aAAA,CAACtD,cAAc,MAAE,CACP,CAAC,eACbN,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,kBAAkB;IACtBC,MAAM,EAAEkB,mBAAoB;IAC5BhB,OAAO,EAAEA,CAAA,KACPS,YAAY,CACVO,mBAAmB,GAAG,QAAQ,GAAG1B,4BACnC;EACD,GACGuB,UAAU,CAAC,iBAAiB,CAAC,gBAEjCtE,KAAA,CAAA4D,aAAA,CAAClD,eAAe,MAAE,CACR,CAAC,eACbV,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,MAAM;IACVC,MAAM,EAAEU,UAAU,KAAK,MAAO;IAC9BR,OAAO,EAAEA,CAAA,KACPS,YAAY,CAACD,UAAU,KAAK,MAAM,GAAG,QAAQ,GAAG,MAAM;EACvD,GACGK,UAAU,CAAC,MAAM,CAAC,gBAEtBtE,KAAA,CAAA4D,aAAA,CAACpD,cAAc,MAAE,CACP,CAAC,eACbR,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,MAAM;IACVC,MAAM,EAAEU,UAAU,KAAK,MAAO;IAC9BR,OAAO,EAAEA,CAAA,KACPS,YAAY,CAACD,UAAU,KAAK,MAAM,GAAG,QAAQ,GAAG,MAAM;EACvD,GACGK,UAAU,CAAC,MAAM,CAAC,gBAEtBtE,KAAA,CAAA4D,aAAA,CAACxD,cAAc,MAAE,CACP,CACD,CAAC,eAEdJ,KAAA,CAAA4D,aAAA,CAACjC,UAAU;IAACgD,KAAK,EAAC,UAAU;IAACC,SAAS,EAAEL,IAAI,GAAGM,SAAS,GAAG;EAAc,GACtEN,IAAI,WAAJA,IAAI,GAAI,GACC,CACI,CAAC;AAEvB,CAAC","ignoreList":[]}

package/dist/esm/presentation/whiteboard/canvasElements.d.ts

@@ -3,6 +3,7 @@ import { BoardTool } from "./bottomDock";
 import { CanvasElementDef, GridSize, ShapeElementState, StickyTextStyle } from "./elements";
 import { FileElementDef } from "./fileElement";
 import { LinkElementDef } from "./linkElement";
+import { ProjectElementDef } from "./projectElements";
 /**
  * A card is full of its own controls — the URL field, the display toggle, the
  * retry button, the toolbar. A mousedown on any of them selects the element but
@@ -47,6 +48,8 @@ export interface CanvasElementsProps {
     setLinks: React.Dispatch<React.SetStateAction<LinkElementDef[]>>;
     files: FileElementDef[];
     setFiles: React.Dispatch<React.SetStateAction<FileElementDef[]>>;
+    projectElements: ProjectElementDef[];
+    setProjectElements: React.Dispatch<React.SetStateAction<ProjectElementDef[]>>;
     createdShapes: CanvasElementDef[];
     setCreatedShapes: React.Dispatch<React.SetStateAction<CanvasElementDef[]>>;
     sizes: Record<string, {
@@ -57,5 +60,5 @@ export interface CanvasElementsProps {
     locks: Record<string, boolean>;
     setLocks: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
 }
-export declare const CanvasElements: ({ gridSize, snapToGrid, activeTool, onToolUsed, selectedId, onSelectedIdChange: setSelectedId, positions, setPositions, shapes, setShapes, stickyStyle, setStickyStyle, links, setLinks, files, setFiles, createdShapes, setCreatedShapes, sizes, rotations, locks, setLocks, }: CanvasElementsProps) => ReactElement;
+export declare const CanvasElements: ({ gridSize, snapToGrid, activeTool, onToolUsed, selectedId, onSelectedIdChange: setSelectedId, positions, setPositions, shapes, setShapes, stickyStyle, setStickyStyle, links, setLinks, files, setFiles, projectElements, setProjectElements, createdShapes, setCreatedShapes, sizes, rotations, locks, setLocks, }: CanvasElementsProps) => ReactElement;
 //# sourceMappingURL=canvasElements.d.ts.map

package/dist/esm/presentation/whiteboard/canvasElements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvasElements.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/canvasElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAKb,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAMV,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,gBAAgB,EAChB,QAAQ,EAGR,iBAAiB,EAEjB,eAAe,EAShB,MAAM,YAAY,CAAC;AACpB,OAAO,EAGL,cAAc,EAIf,MAAM,eAAe,CAAC;AACvB,OAAO,EAIL,cAAc,EAMf,MAAM,eAAe,CAAC;AAEvB;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,+CAA+C,CAAC;AAE7E;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,SAAS,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IAKvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAKxE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,YAAY,EAAE,KAAK,CAAC,QAAQ,CAC1B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAC/D,CAAC;IACF,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC1C,SAAS,EAAE,KAAK,CAAC,QAAQ,CACvB,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CACxD,CAAC;IACF,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAGtE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IACjE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IAGjE,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAE3E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAGlC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACzE;AAUD,eAAO,MAAM,cAAc,GAAI,iRAuB5B,mBAAmB,KAAG,YAw3BxB,CAAC"}
+{"version":3,"file":"canvasElements.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/canvasElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAKb,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAMV,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,gBAAgB,EAChB,QAAQ,EAGR,iBAAiB,EAEjB,eAAe,EAShB,MAAM,YAAY,CAAC;AACpB,OAAO,EAGL,cAAc,EAIf,MAAM,eAAe,CAAC;AACvB,OAAO,EAIL,cAAc,EAMf,MAAM,eAAe,CAAC;AACvB,OAAO,EAKL,iBAAiB,EASlB,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,+CAA+C,CAAC;AAE7E;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,SAAS,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IAKvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAKxE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,YAAY,EAAE,KAAK,CAAC,QAAQ,CAC1B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAC/D,CAAC;IACF,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC1C,SAAS,EAAE,KAAK,CAAC,QAAQ,CACvB,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CACxD,CAAC;IACF,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAGtE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IACjE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IAGjE,eAAe,EAAE,iBAAiB,EAAE,CAAC;IACrC,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC;IAG9E,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAE3E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAGlC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACzE;AAUD,eAAO,MAAM,cAAc,GAAI,sTAyB5B,mBAAmB,KAAG,YA6lCxB,CAAC"}