@activecollab/components 2.0.305 → 2.0.308

package/dist/esm/presentation/shared/PresentationShell.js

@@ -0,0 +1,272 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import { MainLogo } from "./MainLogo";
+import { BREAKPOINT, SM, TRANSITION, XL } from "./tokens";
+import { IconButton } from "../../components/IconButton";
+import { ActivityIcon, CalendarIcon, ClockStopwatchIndicatorIcon, CloseIcon, CollapsIcon, EstimatesIcon, InvoicesIcon, MobileMenuIcon, MyWorkIcon, NotificationBellIcon, PeopleIcon, ProjectsIcon, ReportTimeIcon, ReportsIcon, RocketIcon, SearchIcon } from "../../components/Icons";
+import { Modal } from "../../components/Modal";
+import { Paper } from "../../components/Paper";
+import { Tooltip } from "../../components/Tooltip";
+import { Body2, Caption1 } from "../../components/Typography";
+import { useResizeObserver } from "../../utils";
+const MENU_ITEMS = [{
+  icon: RocketIcon,
+  text: "Getting Started"
+}, {
+  icon: ProjectsIcon,
+  text: "Projects",
+  active: true
+}, {
+  icon: MyWorkIcon,
+  text: "My Work"
+}, {
+  icon: ActivityIcon,
+  text: "Activity"
+}, {
+  icon: CalendarIcon,
+  text: "Calendar"
+}, {
+  icon: PeopleIcon,
+  text: "People"
+}, {
+  icon: ReportTimeIcon,
+  text: "Time"
+}, {
+  icon: ReportsIcon,
+  text: "Reports"
+}, {
+  icon: InvoicesIcon,
+  text: "Invoices"
+}, {
+  icon: EstimatesIcon,
+  text: "Estimates"
+}];
+
+/* ------------------------------------------------------------------ */
+/* Layout shell (mirrors Layout.js)                                    */
+/* ------------------------------------------------------------------ */
+
+const StyledLayout = styled.div.withConfig({
+  displayName: "PresentationShell__StyledLayout",
+  componentId: "sc-12j90o1-0"
+})(["height:100vh;display:flex;flex-direction:column;background-color:var(--body-bg-main);"]);
+const StyledContentRow = styled.div.withConfig({
+  displayName: "PresentationShell__StyledContentRow",
+  componentId: "sc-12j90o1-1"
+})(["position:relative;display:flex;flex-direction:row-reverse;flex:1 1 0%;flex-grow:1;overflow-y:auto;"]);
+const StyledRightWindow = styled.div.withConfig({
+  displayName: "PresentationShell__StyledRightWindow",
+  componentId: "sc-12j90o1-2"
+})(["position:relative;display:flex;flex-direction:column;flex:1 1 0%;flex-grow:1;width:100%;height:100%;overflow-y:auto;padding:0 16px;@media (min-width:", "){padding-right:32px;}"], SM);
+
+/* ------------------------------------------------------------------ */
+/* Main menu (mirrors MainMenu.js + MainMenu.less)                     */
+/* ------------------------------------------------------------------ */
+
+const StyledMainMenu = styled.div.withConfig({
+  displayName: "PresentationShell__StyledMainMenu",
+  componentId: "sc-12j90o1-3"
+})(["position:relative;z-index:1;display:none;flex-direction:column;height:100%;margin-right:4px;flex-shrink:0;width:240px;transition:width ", ";@media (min-width:", "){display:flex;}&.collapsed{width:72px;}.menu-item-text,.menu-section,#logotype{transition:all ", ";}&.collapsed .menu-item-text{opacity:0;visibility:hidden;width:0;margin-left:0;}&.collapsed .menu-section{transform:scaleY(0);opacity:0;max-height:0;margin-bottom:0;}&.collapsed #logotype{transform:translateX(-5%);opacity:0;}&.collapsed .collapse-expand-menu svg{transform:rotate(180deg);}&:not(.mobile){@media (max-width:1279.98px){width:72px;.menu-item-text{opacity:0;visibility:hidden;width:0;margin-left:0;}.menu-section{transform:scaleY(0);opacity:0;max-height:0;margin-bottom:0;}#logotype{transform:translateX(-5%);opacity:0;}}}&.mobile{display:flex;position:absolute;left:0;top:0;width:240px;background-color:var(--page-paper-main);}"], TRANSITION, SM, TRANSITION);
+const StyledMenuHeader = styled.div.withConfig({
+  displayName: "PresentationShell__StyledMenuHeader",
+  componentId: "sc-12j90o1-4"
+})(["position:relative;height:68px;display:flex;align-items:center;flex-shrink:0;overflow:hidden;.main-logo{position:absolute;left:20px;color:var(--color-secondary);path{fill:var(--color-secondary);}}.collapse-expand-menu{position:absolute;right:4px;display:none;@media (min-width:", "){display:flex;}}"], XL);
+const StyledMenuScroll = styled.div.withConfig({
+  displayName: "PresentationShell__StyledMenuScroll",
+  componentId: "sc-12j90o1-5"
+})(["display:flex;flex-direction:column;flex-grow:1;min-height:0;margin:12px 0;overflow-y:auto;overflow-x:hidden;"]);
+const StyledMenuSection = styled.div.withConfig({
+  displayName: "PresentationShell__StyledMenuSection",
+  componentId: "sc-12j90o1-6"
+})(["display:flex;align-items:center;margin:0 12px 8px;padding:0 4px 0 12px;"]);
+const StyledMenuItem = styled.a.withConfig({
+  displayName: "PresentationShell__StyledMenuItem",
+  componentId: "sc-12j90o1-7"
+})(["display:flex;align-items:center;height:40px;padding:0 4px 0 12px;margin:0 12px 2px;border-radius:8px;cursor:pointer;text-decoration:none;svg{flex-shrink:0;fill:var(--color-theme-700);opacity:0.7;}.menu-item-text{margin-left:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;}&:hover{transition:all ", ";background-color:var(--color-theme-300);svg{fill:var(--color-theme-900);opacity:1;}.menu-item-text{color:var(--color-theme-900);}}&.active{background-color:var(--color-secondary-200);svg{fill:var(--color-secondary);opacity:1;}.menu-item-text{color:var(--color-secondary);}}"], TRANSITION);
+const StyledMobileMenuClose = styled(IconButton).withConfig({
+  displayName: "PresentationShell__StyledMobileMenuClose",
+  componentId: "sc-12j90o1-8"
+})(["position:absolute;right:16px;"]);
+
+/* ------------------------------------------------------------------ */
+/* Top bars                                                            */
+/* ------------------------------------------------------------------ */
+
+const StyledMobileMenuHeader = styled.div.withConfig({
+  displayName: "PresentationShell__StyledMobileMenuHeader",
+  componentId: "sc-12j90o1-9"
+})(["display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background-color:var(--color-primary);z-index:50;@media (min-width:", "){display:none;}.mobile-menu-icon{fill:var(--color-theme-300);}"], SM);
+const StyledIconRow = styled.div.withConfig({
+  displayName: "PresentationShell__StyledIconRow",
+  componentId: "sc-12j90o1-10"
+})(["display:flex;align-items:center;"]);
+const StyledTopRightControls = styled.div.withConfig({
+  displayName: "PresentationShell__StyledTopRightControls",
+  componentId: "sc-12j90o1-11"
+})(["position:absolute;top:0;right:0;display:none;align-items:center;justify-content:flex-end;padding:12px 32px 12px 0;@media (min-width:", "){display:flex;}"], SM);
+const StyledHeaderAvatar = styled.div.withConfig({
+  displayName: "PresentationShell__StyledHeaderAvatar",
+  componentId: "sc-12j90o1-12"
+})(["width:28px;height:28px;border-radius:50%;background-color:var(--color-secondary);color:var(--only-white);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;margin:0 8px;flex-shrink:0;cursor:pointer;.neon &{color:var(--page-paper-main);}"]);
+
+/* ------------------------------------------------------------------ */
+/* Page region (mirrors Page.jsx / PageBody.jsx)                       */
+/* ------------------------------------------------------------------ */
+
+const StyledPage = styled.div.withConfig({
+  displayName: "PresentationShell__StyledPage",
+  componentId: "sc-12j90o1-13"
+})(["display:flex;flex-direction:column;flex-grow:1;"]);
+const StyledPageBody = styled.div.withConfig({
+  displayName: "PresentationShell__StyledPageBody",
+  componentId: "sc-12j90o1-14"
+})(["display:flex;flex-direction:column;flex-grow:1;margin-bottom:32px;min-height:0;"]);
+
+/** The paper card that holds page content (used by list view & empty pages). */
+export const StyledPagePaper = styled(Paper).withConfig({
+  displayName: "PresentationShell__StyledPagePaper",
+  componentId: "sc-12j90o1-15"
+})(["flex-grow:1;width:100%;"]);
+
+/* ------------------------------------------------------------------ */
+/* Mocked layout building blocks                                       */
+/* ------------------------------------------------------------------ */
+
+const MenuItemsMock = _ref => {
+  let _ref$mobile = _ref.mobile,
+    mobile = _ref$mobile === void 0 ? false : _ref$mobile;
+  return /*#__PURE__*/React.createElement(StyledMenuScroll, null, /*#__PURE__*/React.createElement(StyledMenuSection, {
+    className: "menu-section"
+  }, /*#__PURE__*/React.createElement(Caption1, {
+    weight: "bold",
+    color: "tertiary"
+  }, "MENU")), MENU_ITEMS.map(_ref2 => {
+    let Icon = _ref2.icon,
+      text = _ref2.text,
+      active = _ref2.active;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      key: text,
+      title: text,
+      placement: "right",
+      disable: mobile
+    }, /*#__PURE__*/React.createElement(StyledMenuItem, {
+      className: active ? "active" : undefined
+    }, /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement(Body2, {
+      weight: "medium",
+      color: "secondary",
+      whitespace: "no-wrap",
+      className: "menu-item-text"
+    }, text)));
+  }));
+};
+const MainMenuMock = _ref3 => {
+  let collapsed = _ref3.collapsed,
+    onToggleCollapsed = _ref3.onToggleCollapsed;
+  return /*#__PURE__*/React.createElement(StyledMainMenu, {
+    className: collapsed ? "collapsed" : undefined,
+    "data-testid": "main-menu"
+  }, /*#__PURE__*/React.createElement(StyledMenuHeader, null, /*#__PURE__*/React.createElement("a", {
+    className: "main-logo"
+  }, /*#__PURE__*/React.createElement(MainLogo, null)), /*#__PURE__*/React.createElement("div", {
+    className: "collapse-expand-menu"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "text gray",
+    size: "small",
+    onClick: onToggleCollapsed
+  }, /*#__PURE__*/React.createElement(CollapsIcon, null)))), /*#__PURE__*/React.createElement(MenuItemsMock, null));
+};
+const MainMenuMobileMock = _ref4 => {
+  let open = _ref4.open,
+    close = _ref4.close;
+  return open ? /*#__PURE__*/React.createElement(Modal, {
+    open: open,
+    onClose: close
+  }, /*#__PURE__*/React.createElement(StyledMainMenu, {
+    className: "mobile",
+    "data-testid": "main-menu-mobile"
+  }, /*#__PURE__*/React.createElement(StyledMenuHeader, null, /*#__PURE__*/React.createElement("a", {
+    className: "main-logo"
+  }, /*#__PURE__*/React.createElement(MainLogo, null)), /*#__PURE__*/React.createElement(StyledMobileMenuClose, {
+    onClick: close,
+    variant: "text gray"
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(MenuItemsMock, {
+    mobile: true
+  }))) : null;
+};
+const MobileMenuHeaderMock = _ref5 => {
+  let onOpenMobileMenu = _ref5.onOpenMobileMenu;
+  return /*#__PURE__*/React.createElement(StyledMobileMenuHeader, null, /*#__PURE__*/React.createElement(IconButton, {
+    size: "big",
+    variant: "circle raised",
+    onClick: onOpenMobileMenu
+  }, /*#__PURE__*/React.createElement(MobileMenuIcon, {
+    className: "mobile-menu-icon"
+  })), /*#__PURE__*/React.createElement(StyledIconRow, null, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "text gray"
+  }, /*#__PURE__*/React.createElement(SearchIcon, null)), /*#__PURE__*/React.createElement(StyledHeaderAvatar, null, "JS"), /*#__PURE__*/React.createElement(IconButton, {
+    variant: "text gray"
+  }, /*#__PURE__*/React.createElement(NotificationBellIcon, null))));
+};
+const TopRightControlsMock = () => /*#__PURE__*/React.createElement(StyledTopRightControls, null, /*#__PURE__*/React.createElement(IconButton, {
+  variant: "text gray"
+}, /*#__PURE__*/React.createElement(ClockStopwatchIndicatorIcon, null)), /*#__PURE__*/React.createElement(IconButton, {
+  variant: "text gray"
+}, /*#__PURE__*/React.createElement(SearchIcon, null)), /*#__PURE__*/React.createElement(StyledHeaderAvatar, null, "JS"), /*#__PURE__*/React.createElement(IconButton, {
+  variant: "text gray"
+}, /*#__PURE__*/React.createElement(NotificationBellIcon, null)));
+
+/* ------------------------------------------------------------------ */
+/* PresentationShell                                                   */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The full application shell shared by every presentation mock-up: the main
+ * menu on the left (auto-collapsing below 1280px, modal below 640px), the
+ * top-right controls and the scrollable page area. Pass the page header via
+ * `header` and the body via `children`.
+ */
+export const PresentationShell = _ref6 => {
+  let header = _ref6.header,
+    children = _ref6.children,
+    floating = _ref6.floating;
+  const _useState = useState(false),
+    mobileMenuOpen = _useState[0],
+    setMobileMenuOpen = _useState[1];
+  const _useState2 = useState(false),
+    collapsed = _useState2[0],
+    setCollapsed = _useState2[1];
+  const _useState3 = useState(),
+    isMobileView = _useState3[0],
+    setIsMobileView = _useState3[1];
+  const ref = useRef(null);
+  const dimensions = useResizeObserver(ref);
+  const width = dimensions == null ? void 0 : dimensions.width;
+  useEffect(() => {
+    if (width) {
+      if (width < BREAKPOINT) {
+        setIsMobileView(true);
+      } else {
+        setIsMobileView(false);
+        setMobileMenuOpen(false);
+      }
+    }
+  }, [width]);
+  const handleOpenMobileMenu = useCallback(() => setMobileMenuOpen(true), []);
+  const handleCloseMobileMenu = useCallback(() => setMobileMenuOpen(false), []);
+  const handleToggleCollapsed = useCallback(() => setCollapsed(prev => !prev), []);
+  return /*#__PURE__*/React.createElement(StyledLayout, {
+    ref: ref
+  }, isMobileView ? /*#__PURE__*/React.createElement(MobileMenuHeaderMock, {
+    onOpenMobileMenu: handleOpenMobileMenu
+  }) : null, /*#__PURE__*/React.createElement(StyledContentRow, null, /*#__PURE__*/React.createElement(StyledRightWindow, {
+    id: "right-window"
+  }, /*#__PURE__*/React.createElement(StyledPage, null, header, /*#__PURE__*/React.createElement(StyledPageBody, null, children)), isMobileView === false ? /*#__PURE__*/React.createElement(TopRightControlsMock, null) : null), isMobileView ? /*#__PURE__*/React.createElement(MainMenuMobileMock, {
+    open: mobileMenuOpen,
+    close: handleCloseMobileMenu
+  }) : /*#__PURE__*/React.createElement(MainMenuMock, {
+    collapsed: collapsed,
+    onToggleCollapsed: handleToggleCollapsed
+  })), floating);
+};
+PresentationShell.displayName = "PresentationShell";
+//# sourceMappingURL=PresentationShell.js.map

package/dist/esm/presentation/shared/PresentationShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresentationShell.js","names":["React","useCallback","useEffect","useRef","useState","styled","MainLogo","BREAKPOINT","SM","TRANSITION","XL","IconButton","ActivityIcon","CalendarIcon","ClockStopwatchIndicatorIcon","CloseIcon","CollapsIcon","EstimatesIcon","InvoicesIcon","MobileMenuIcon","MyWorkIcon","NotificationBellIcon","PeopleIcon","ProjectsIcon","ReportTimeIcon","ReportsIcon","RocketIcon","SearchIcon","Modal","Paper","Tooltip","Body2","Caption1","useResizeObserver","MENU_ITEMS","icon","text","active","StyledLayout","div","withConfig","displayName","componentId","StyledContentRow","StyledRightWindow","StyledMainMenu","StyledMenuHeader","StyledMenuScroll","StyledMenuSection","StyledMenuItem","a","StyledMobileMenuClose","StyledMobileMenuHeader","StyledIconRow","StyledTopRightControls","StyledHeaderAvatar","StyledPage","StyledPageBody","StyledPagePaper","MenuItemsMock","_ref","_ref$mobile","mobile","createElement","className","weight","color","map","_ref2","Icon","key","title","placement","disable","undefined","whitespace","MainMenuMock","_ref3","collapsed","onToggleCollapsed","variant","size","onClick","MainMenuMobileMock","_ref4","open","close","onClose","MobileMenuHeaderMock","_ref5","onOpenMobileMenu","TopRightControlsMock","PresentationShell","_ref6","header","children","floating","_useState","mobileMenuOpen","setMobileMenuOpen","_useState2","setCollapsed","_useState3","isMobileView","setIsMobileView","ref","dimensions","width","handleOpenMobileMenu","handleCloseMobileMenu","handleToggleCollapsed","prev","id"],"sources":["../../../../src/presentation/shared/PresentationShell.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { MainLogo } from \"./MainLogo\";\nimport { BREAKPOINT, SM, TRANSITION, XL } from \"./tokens\";\nimport { IconButton } from \"../../components/IconButton\";\nimport {\n  ActivityIcon,\n  CalendarIcon,\n  ClockStopwatchIndicatorIcon,\n  CloseIcon,\n  CollapsIcon,\n  EstimatesIcon,\n  InvoicesIcon,\n  MobileMenuIcon,\n  MyWorkIcon,\n  NotificationBellIcon,\n  PeopleIcon,\n  ProjectsIcon,\n  ReportTimeIcon,\n  ReportsIcon,\n  RocketIcon,\n  SearchIcon,\n} from \"../../components/Icons\";\nimport { Modal } from \"../../components/Modal\";\nimport { Paper } from \"../../components/Paper\";\nimport { Tooltip } from \"../../components/Tooltip\";\nimport { Body2, Caption1 } from \"../../components/Typography\";\nimport { useResizeObserver } from \"../../utils\";\n\nconst MENU_ITEMS: {\n  icon: React.FC<React.SVGProps<SVGSVGElement>>;\n  text: string;\n  active?: boolean;\n}[] = [\n  { icon: RocketIcon, text: \"Getting Started\" },\n  { icon: ProjectsIcon, text: \"Projects\", active: true },\n  { icon: MyWorkIcon, text: \"My Work\" },\n  { icon: ActivityIcon, text: \"Activity\" },\n  { icon: CalendarIcon, text: \"Calendar\" },\n  { icon: PeopleIcon, text: \"People\" },\n  { icon: ReportTimeIcon, text: \"Time\" },\n  { icon: ReportsIcon, text: \"Reports\" },\n  { icon: InvoicesIcon, text: \"Invoices\" },\n  { icon: EstimatesIcon, text: \"Estimates\" },\n];\n\n/* ------------------------------------------------------------------ */\n/* Layout shell (mirrors Layout.js)                                    */\n/* ------------------------------------------------------------------ */\n\nconst StyledLayout = styled.div`\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--body-bg-main);\n`;\n\nconst StyledContentRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row-reverse;\n  flex: 1 1 0%;\n  flex-grow: 1;\n  overflow-y: auto;\n`;\n\nconst StyledRightWindow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0%;\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  padding: 0 16px;\n\n  @media (min-width: ${SM}) {\n    padding-right: 32px;\n  }\n`;\n\n/* ------------------------------------------------------------------ */\n/* Main menu (mirrors MainMenu.js + MainMenu.less)                     */\n/* ------------------------------------------------------------------ */\n\nconst StyledMainMenu = styled.div`\n  position: relative;\n  z-index: 1;\n  display: none;\n  flex-direction: column;\n  height: 100%;\n  margin-right: 4px;\n  flex-shrink: 0;\n  width: 240px;\n  transition: width ${TRANSITION};\n\n  @media (min-width: ${SM}) {\n    display: flex;\n  }\n\n  &.collapsed {\n    width: 72px;\n  }\n\n  .menu-item-text,\n  .menu-section,\n  #logotype {\n    transition: all ${TRANSITION};\n  }\n\n  &.collapsed .menu-item-text {\n    opacity: 0;\n    visibility: hidden;\n    width: 0;\n    margin-left: 0;\n  }\n\n  &.collapsed .menu-section {\n    transform: scaleY(0);\n    opacity: 0;\n    max-height: 0;\n    margin-bottom: 0;\n  }\n\n  &.collapsed #logotype {\n    transform: translateX(-5%);\n    opacity: 0;\n  }\n\n  &.collapsed .collapse-expand-menu svg {\n    transform: rotate(180deg);\n  }\n\n  &:not(.mobile) {\n    @media (max-width: 1279.98px) {\n      width: 72px;\n\n      .menu-item-text {\n        opacity: 0;\n        visibility: hidden;\n        width: 0;\n        margin-left: 0;\n      }\n\n      .menu-section {\n        transform: scaleY(0);\n        opacity: 0;\n        max-height: 0;\n        margin-bottom: 0;\n      }\n\n      #logotype {\n        transform: translateX(-5%);\n        opacity: 0;\n      }\n    }\n  }\n\n  &.mobile {\n    display: flex;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 240px;\n    background-color: var(--page-paper-main);\n  }\n`;\n\nconst StyledMenuHeader = styled.div`\n  position: relative;\n  height: 68px;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  overflow: hidden;\n\n  .main-logo {\n    position: absolute;\n    left: 20px;\n    color: var(--color-secondary);\n\n    path {\n      fill: var(--color-secondary);\n    }\n  }\n\n  .collapse-expand-menu {\n    position: absolute;\n    right: 4px;\n    display: none;\n\n    @media (min-width: ${XL}) {\n      display: flex;\n    }\n  }\n`;\n\nconst StyledMenuScroll = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  min-height: 0;\n  margin: 12px 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n`;\n\nconst StyledMenuSection = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 0 12px 8px;\n  padding: 0 4px 0 12px;\n`;\n\nconst StyledMenuItem = styled.a`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  padding: 0 4px 0 12px;\n  margin: 0 12px 2px;\n  border-radius: 8px;\n  cursor: pointer;\n  text-decoration: none;\n\n  svg {\n    flex-shrink: 0;\n    fill: var(--color-theme-700);\n    opacity: 0.7;\n  }\n\n  .menu-item-text {\n    margin-left: 12px;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &:hover {\n    transition: all ${TRANSITION};\n    background-color: var(--color-theme-300);\n\n    svg {\n      fill: var(--color-theme-900);\n      opacity: 1;\n    }\n\n    .menu-item-text {\n      color: var(--color-theme-900);\n    }\n  }\n\n  &.active {\n    background-color: var(--color-secondary-200);\n\n    svg {\n      fill: var(--color-secondary);\n      opacity: 1;\n    }\n\n    .menu-item-text {\n      color: var(--color-secondary);\n    }\n  }\n`;\n\nconst StyledMobileMenuClose = styled(IconButton)`\n  position: absolute;\n  right: 16px;\n`;\n\n/* ------------------------------------------------------------------ */\n/* Top bars                                                            */\n/* ------------------------------------------------------------------ */\n\nconst StyledMobileMenuHeader = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 16px;\n  background-color: var(--color-primary);\n  z-index: 50;\n\n  @media (min-width: ${SM}) {\n    display: none;\n  }\n\n  .mobile-menu-icon {\n    fill: var(--color-theme-300);\n  }\n`;\n\nconst StyledIconRow = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst StyledTopRightControls = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: none;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 12px 32px 12px 0;\n\n  @media (min-width: ${SM}) {\n    display: flex;\n  }\n`;\n\nconst StyledHeaderAvatar = styled.div`\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background-color: var(--color-secondary);\n  color: var(--only-white);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  font-weight: 600;\n  margin: 0 8px;\n  flex-shrink: 0;\n  cursor: pointer;\n\n  /* neon theme: use paper colour for the initials */\n  .neon & {\n    color: var(--page-paper-main);\n  }\n`;\n\n/* ------------------------------------------------------------------ */\n/* Page region (mirrors Page.jsx / PageBody.jsx)                       */\n/* ------------------------------------------------------------------ */\n\nconst StyledPage = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n`;\n\nconst StyledPageBody = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin-bottom: 32px;\n  min-height: 0;\n`;\n\n/** The paper card that holds page content (used by list view & empty pages). */\nexport const StyledPagePaper = styled(Paper)`\n  flex-grow: 1;\n  width: 100%;\n`;\n\n/* ------------------------------------------------------------------ */\n/* Mocked layout building blocks                                       */\n/* ------------------------------------------------------------------ */\n\ninterface MenuItemsProps {\n  mobile?: boolean;\n}\n\nconst MenuItemsMock = ({ mobile = false }: MenuItemsProps): ReactElement => (\n  <StyledMenuScroll>\n    <StyledMenuSection className=\"menu-section\">\n      <Caption1 weight=\"bold\" color=\"tertiary\">\n        MENU\n      </Caption1>\n    </StyledMenuSection>\n    {MENU_ITEMS.map(({ icon: Icon, text, active }) => (\n      <Tooltip key={text} title={text} placement=\"right\" disable={mobile}>\n        <StyledMenuItem className={active ? \"active\" : undefined}>\n          <Icon />\n          <Body2\n            weight=\"medium\"\n            color=\"secondary\"\n            whitespace=\"no-wrap\"\n            className=\"menu-item-text\"\n          >\n            {text}\n          </Body2>\n        </StyledMenuItem>\n      </Tooltip>\n    ))}\n  </StyledMenuScroll>\n);\n\ninterface MainMenuMockProps {\n  collapsed: boolean;\n  onToggleCollapsed: () => void;\n}\n\nconst MainMenuMock = ({\n  collapsed,\n  onToggleCollapsed,\n}: MainMenuMockProps): ReactElement => (\n  <StyledMainMenu\n    className={collapsed ? \"collapsed\" : undefined}\n    data-testid=\"main-menu\"\n  >\n    <StyledMenuHeader>\n      <a className=\"main-logo\">\n        <MainLogo />\n      </a>\n      <div className=\"collapse-expand-menu\">\n        <IconButton\n          variant=\"text gray\"\n          size=\"small\"\n          onClick={onToggleCollapsed}\n        >\n          <CollapsIcon />\n        </IconButton>\n      </div>\n    </StyledMenuHeader>\n    <MenuItemsMock />\n  </StyledMainMenu>\n);\n\ninterface MainMenuMobileMockProps {\n  open: boolean;\n  close: () => void;\n}\n\nconst MainMenuMobileMock = ({\n  open,\n  close,\n}: MainMenuMobileMockProps): ReactElement | null =>\n  open ? (\n    <Modal open={open} onClose={close}>\n      <StyledMainMenu className=\"mobile\" data-testid=\"main-menu-mobile\">\n        <StyledMenuHeader>\n          <a className=\"main-logo\">\n            <MainLogo />\n          </a>\n          <StyledMobileMenuClose onClick={close} variant=\"text gray\">\n            <CloseIcon />\n          </StyledMobileMenuClose>\n        </StyledMenuHeader>\n        <MenuItemsMock mobile />\n      </StyledMainMenu>\n    </Modal>\n  ) : null;\n\ninterface MobileMenuHeaderMockProps {\n  onOpenMobileMenu: () => void;\n}\n\nconst MobileMenuHeaderMock = ({\n  onOpenMobileMenu,\n}: MobileMenuHeaderMockProps): ReactElement => (\n  <StyledMobileMenuHeader>\n    <IconButton size=\"big\" variant=\"circle raised\" onClick={onOpenMobileMenu}>\n      <MobileMenuIcon className=\"mobile-menu-icon\" />\n    </IconButton>\n    <StyledIconRow>\n      <IconButton variant=\"text gray\">\n        <SearchIcon />\n      </IconButton>\n      <StyledHeaderAvatar>JS</StyledHeaderAvatar>\n      <IconButton variant=\"text gray\">\n        <NotificationBellIcon />\n      </IconButton>\n    </StyledIconRow>\n  </StyledMobileMenuHeader>\n);\n\nconst TopRightControlsMock = (): ReactElement => (\n  <StyledTopRightControls>\n    <IconButton variant=\"text gray\">\n      <ClockStopwatchIndicatorIcon />\n    </IconButton>\n    <IconButton variant=\"text gray\">\n      <SearchIcon />\n    </IconButton>\n    <StyledHeaderAvatar>JS</StyledHeaderAvatar>\n    <IconButton variant=\"text gray\">\n      <NotificationBellIcon />\n    </IconButton>\n  </StyledTopRightControls>\n);\n\n/* ------------------------------------------------------------------ */\n/* PresentationShell                                                   */\n/* ------------------------------------------------------------------ */\n\nexport interface PresentationShellProps {\n  /** Page header row (e.g. <ProjectPageHeader /> or <PageHeader title=\"…\" />). */\n  header: ReactNode;\n  /** Page body content rendered inside the scrollable page area. */\n  children: ReactNode;\n  /** Optional fixed controls (e.g. <FloatingControls />). */\n  floating?: ReactNode;\n}\n\n/**\n * The full application shell shared by every presentation mock-up: the main\n * menu on the left (auto-collapsing below 1280px, modal below 640px), the\n * top-right controls and the scrollable page area. Pass the page header via\n * `header` and the body via `children`.\n */\nexport const PresentationShell = ({\n  header,\n  children,\n  floating,\n}: PresentationShellProps): ReactElement => {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [collapsed, setCollapsed] = useState(false);\n  const [isMobileView, setIsMobileView] = useState<boolean>();\n\n  const ref = useRef<HTMLDivElement>(null);\n  const dimensions = useResizeObserver(ref);\n  const width = dimensions?.width;\n\n  useEffect(() => {\n    if (width) {\n      if (width < BREAKPOINT) {\n        setIsMobileView(true);\n      } else {\n        setIsMobileView(false);\n        setMobileMenuOpen(false);\n      }\n    }\n  }, [width]);\n\n  const handleOpenMobileMenu = useCallback(() => setMobileMenuOpen(true), []);\n  const handleCloseMobileMenu = useCallback(() => setMobileMenuOpen(false), []);\n  const handleToggleCollapsed = useCallback(\n    () => setCollapsed((prev) => !prev),\n    []\n  );\n\n  return (\n    <StyledLayout ref={ref}>\n      {isMobileView ? (\n        <MobileMenuHeaderMock onOpenMobileMenu={handleOpenMobileMenu} />\n      ) : null}\n      <StyledContentRow>\n        <StyledRightWindow id=\"right-window\">\n          <StyledPage>\n            {header}\n            <StyledPageBody>{children}</StyledPageBody>\n          </StyledPage>\n          {isMobileView === false ? <TopRightControlsMock /> : null}\n        </StyledRightWindow>\n        {isMobileView ? (\n          <MainMenuMobileMock\n            open={mobileMenuOpen}\n            close={handleCloseMobileMenu}\n          />\n        ) : (\n          <MainMenuMock\n            collapsed={collapsed}\n            onToggleCollapsed={handleToggleCollapsed}\n          />\n        )}\n      </StyledContentRow>\n      {floating}\n    </StyledLayout>\n  );\n};\n\nPresentationShell.displayName = \"PresentationShell\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/presentation/shared/RoundAvatar.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A simple round initials avatar used across the presentation mock-ups in
+ * place of real user images. `$overlap` makes stacked avatars overlap (task
+ * rows / cards), `$bordered` draws the paper-coloured ring that separates
+ * overlapping avatars.
+ */
+export declare const RoundAvatar: import("styled-components").StyledComponent<"div", any, {
+    $bg: string;
+    $size?: number;
+    $overlap?: boolean;
+    $bordered?: boolean;
+}, never>;
+//# sourceMappingURL=RoundAvatar.d.ts.map

package/dist/esm/presentation/shared/RoundAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundAvatar.d.ts","sourceRoot":"","sources":["../../../../src/presentation/shared/RoundAvatar.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,WAAW;SACjB,MAAM;YACH,MAAM;eACH,OAAO;gBACN,OAAO;SA0BpB,CAAC"}

package/dist/esm/presentation/shared/RoundAvatar.js

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+/**
+ * A simple round initials avatar used across the presentation mock-ups in
+ * place of real user images. `$overlap` makes stacked avatars overlap (task
+ * rows / cards), `$bordered` draws the paper-coloured ring that separates
+ * overlapping avatars.
+ */
+export const RoundAvatar = styled.div.withConfig({
+  displayName: "RoundAvatar",
+  componentId: "sc-1s5jx6y-0"
+})(["width:", "px;height:", "px;border-radius:50%;background-color:", ";color:#fff;display:flex;align-items:center;justify-content:center;font-size:", "px;font-weight:700;flex-shrink:0;", " &:not(:first-child){margin-left:", ";}"], props => {
+  var _props$$size;
+  return (_props$$size = props.$size) != null ? _props$$size : 28;
+}, props => {
+  var _props$$size2;
+  return (_props$$size2 = props.$size) != null ? _props$$size2 : 28;
+}, props => props.$bg, props => {
+  var _props$$size3;
+  const size = (_props$$size3 = props.$size) != null ? _props$$size3 : 28;
+  if (size <= 22) return 9;
+  if (size <= 26) return 10;
+  return 11;
+}, props => props.$bordered === false ? "" : "border: 2px solid var(--page-paper-main);", props => props.$overlap ? "-8px" : "0");
+RoundAvatar.displayName = "RoundAvatar";
+//# sourceMappingURL=RoundAvatar.js.map

package/dist/esm/presentation/shared/RoundAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundAvatar.js","names":["styled","RoundAvatar","div","withConfig","displayName","componentId","props","_props$$size","$size","_props$$size2","$bg","_props$$size3","size","$bordered","$overlap"],"sources":["../../../../src/presentation/shared/RoundAvatar.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\n/**\n * A simple round initials avatar used across the presentation mock-ups in\n * place of real user images. `$overlap` makes stacked avatars overlap (task\n * rows / cards), `$bordered` draws the paper-coloured ring that separates\n * overlapping avatars.\n */\nexport const RoundAvatar = styled.div<{\n  $bg: string;\n  $size?: number;\n  $overlap?: boolean;\n  $bordered?: boolean;\n}>`\n  width: ${(props) => props.$size ?? 28}px;\n  height: ${(props) => props.$size ?? 28}px;\n  border-radius: 50%;\n  background-color: ${(props) => props.$bg};\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: ${(props) => {\n    const size = props.$size ?? 28;\n    if (size <= 22) return 9;\n    if (size <= 26) return 10;\n    return 11;\n  }}px;\n  font-weight: 700;\n  flex-shrink: 0;\n  ${(props) =>\n    props.$bordered === false\n      ? \"\"\n      : \"border: 2px solid var(--page-paper-main);\"}\n\n  &:not(:first-child) {\n    margin-left: ${(props) => (props.$overlap ? \"-8px\" : \"0\")};\n  }\n`;\n\nRoundAvatar.displayName = \"RoundAvatar\";\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAGD,MAAM,CAACE,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wOAMzBC,KAAK;EAAA,IAAAC,YAAA;EAAA,QAAAA,YAAA,GAAKD,KAAK,CAACE,KAAK,YAAAD,YAAA,GAAI,EAAE;AAAA,GAC1BD,KAAK;EAAA,IAAAG,aAAA;EAAA,QAAAA,aAAA,GAAKH,KAAK,CAACE,KAAK,YAAAC,aAAA,GAAI,EAAE;AAAA,GAEjBH,KAAK,IAAKA,KAAK,CAACI,GAAG,EAK1BJ,KAAK,IAAK;EAAA,IAAAK,aAAA;EACtB,MAAMC,IAAI,IAAAD,aAAA,GAAGL,KAAK,CAACE,KAAK,YAAAG,aAAA,GAAI,EAAE;EAC9B,IAAIC,IAAI,IAAI,EAAE,EAAE,OAAO,CAAC;EACxB,IAAIA,IAAI,IAAI,EAAE,EAAE,OAAO,EAAE;EACzB,OAAO,EAAE;AACX,CAAC,EAGEN,KAAK,IACNA,KAAK,CAACO,SAAS,KAAK,KAAK,GACrB,EAAE,GACF,2CAA2C,EAG/BP,KAAK,IAAMA,KAAK,CAACQ,QAAQ,GAAG,MAAM,GAAG,GAAI,CAE5D;AAEDb,WAAW,CAACG,WAAW,GAAG,aAAa","ignoreList":[]}

package/dist/esm/presentation/shared/TaskOptionsMenu.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement } from "react";
+export interface TaskOptionsMenuProps {
+    /** Class on the TreeDots trigger (parent controls its hover visibility). */
+    targetClassName?: string;
+    /** IconButton size of the trigger (omit for the default/regular size). */
+    size?: "small" | "big";
+}
+export declare const TaskOptionsMenu: {
+    ({ targetClassName, size, }: TaskOptionsMenuProps): ReactElement;
+    displayName: string;
+};
+export interface TaskListOptionsMenuProps {
+    /** Class on the TreeDots trigger (parent controls its hover visibility). */
+    targetClassName?: string;
+    /** IconButton size of the trigger (omit for the default/regular size). */
+    size?: "small" | "big";
+}
+export declare const TaskListOptionsMenu: {
+    ({ targetClassName, size, }: TaskListOptionsMenuProps): ReactElement;
+    displayName: string;
+};
+//# sourceMappingURL=TaskOptionsMenu.d.ts.map

package/dist/esm/presentation/shared/TaskOptionsMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskOptionsMenu.d.ts","sourceRoot":"","sources":["../../../../src/presentation/shared/TaskOptionsMenu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AA8DnE,MAAM,WAAW,oBAAoB;IACnC,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACxB;AAED,eAAO,MAAM,eAAe;iCAGzB,oBAAoB,GAAG,YAAY;;CA0ErC,CAAC;AAIF,MAAM,WAAW,wBAAwB;IACvC,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACxB;AAKD,eAAO,MAAM,mBAAmB;iCAG7B,wBAAwB,GAAG,YAAY;;CAoDzC,CAAC"}

package/dist/esm/presentation/shared/TaskOptionsMenu.js

@@ -0,0 +1,119 @@
+import React, { useCallback, useState } from "react";
+import styled from "styled-components";
+import { Checkbox } from "../../components/Checkbox";
+import { IconButton } from "../../components/IconButton";
+import { ArrowRightIcon, CopyIcon, DuplicateIcon, EditIcon, RecurringCheckmarkIcon, TaskListCompleteIcon, TrashIcon, TreeDotsIcon } from "../../components/Icons";
+import { List, ListItem, ListSeparator } from "../../components/List";
+import { Menu } from "../../components/Menu";
+import { Tooltip } from "../../components/Tooltip";
+
+/* Task three-dot options menu — same component as the real TaskItem
+   (Menu in "normal" mode = 260px, List/ListItem + TreeDots target), shared by
+   the List view and Column view presentations. Spacing is styled-components
+   (this Storybook has no runtime Tailwind). Clicks are intentionally no-ops. */
+const StyledTaskMenu = styled.div.withConfig({
+  displayName: "TaskOptionsMenu__StyledTaskMenu",
+  componentId: "sc-1hrykzg-0"
+})([".menu-list{padding:8px 0;}.menu-item{justify-content:space-between;}.menu-item .label{min-width:0;padding-right:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.menu-bottom{display:flex;justify-content:space-between;padding:0 16px;margin:16px 0 12px;}"]);
+const MENU_PICKER_ITEMS = ["Task List", "Assignees", "Due Date", "Label", "Estimate"];
+export const TaskOptionsMenu = _ref => {
+  let targetClassName = _ref.targetClassName,
+    size = _ref.size;
+  const _useState = useState(false),
+    open = _useState[0],
+    setOpen = _useState[1];
+  const handleOpen = useCallback(() => setOpen(true), []);
+  const handleClose = useCallback(() => setOpen(false), []);
+  const triggerClassName = [targetClassName, open ? "open" : ""].filter(Boolean).join(" ") || undefined;
+  return /*#__PURE__*/React.createElement(Menu, {
+    open: open,
+    onOpen: handleOpen,
+    onClose: handleClose,
+    position: "bottom-end",
+    target: /*#__PURE__*/React.createElement(IconButton, {
+      type: "button",
+      variant: "text gray",
+      size: size,
+      className: triggerClassName,
+      active: open
+    }, /*#__PURE__*/React.createElement(TreeDotsIcon, null))
+  }, /*#__PURE__*/React.createElement(StyledTaskMenu, null, /*#__PURE__*/React.createElement(List, {
+    className: "menu-list",
+    tabIndex: 0
+  }, MENU_PICKER_ITEMS.map(name => /*#__PURE__*/React.createElement(ListItem, {
+    key: name,
+    className: "menu-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "label"
+  }, name), /*#__PURE__*/React.createElement(ArrowRightIcon, null))), /*#__PURE__*/React.createElement(ListSeparator, null), /*#__PURE__*/React.createElement(ListItem, {
+    className: "menu-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "label"
+  }, "Hidden from clients"), /*#__PURE__*/React.createElement(Checkbox, {
+    id: "task-menu-hidden-from-clients",
+    onChange: () => undefined
+  })), /*#__PURE__*/React.createElement(ListItem, {
+    className: "menu-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "label"
+  }, "High priority"), /*#__PURE__*/React.createElement(Checkbox, {
+    id: "task-menu-high-priority",
+    onChange: () => undefined
+  })), /*#__PURE__*/React.createElement(ListSeparator, null), /*#__PURE__*/React.createElement("div", {
+    className: "menu-bottom"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Edit"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    type: "button",
+    variant: "text gray"
+  }, /*#__PURE__*/React.createElement(EditIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Duplicate"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    type: "button",
+    variant: "text gray"
+  }, /*#__PURE__*/React.createElement(DuplicateIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Create Recurring Task"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    type: "button",
+    variant: "text gray"
+  }, /*#__PURE__*/React.createElement(RecurringCheckmarkIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Delete"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    type: "button",
+    variant: "text gray"
+  }, /*#__PURE__*/React.createElement(TrashIcon, null)))))));
+};
+TaskOptionsMenu.displayName = "TaskOptionsMenu";
+/* Task-LIST three-dot menu (Menu + List with leading-icon items) — same
+   options as the real TaskListOptions. Shared by List & Column views.
+   Clicks are intentionally no-ops. */
+export const TaskListOptionsMenu = _ref2 => {
+  let targetClassName = _ref2.targetClassName,
+    size = _ref2.size;
+  const _useState2 = useState(false),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  const handleOpen = useCallback(() => setOpen(true), []);
+  const handleClose = useCallback(() => setOpen(false), []);
+  const triggerClassName = [targetClassName, open ? "open" : ""].filter(Boolean).join(" ") || undefined;
+  return /*#__PURE__*/React.createElement(Menu, {
+    open: open,
+    onOpen: handleOpen,
+    onClose: handleClose,
+    position: "bottom-end",
+    target: /*#__PURE__*/React.createElement(IconButton, {
+      type: "button",
+      variant: "text gray",
+      size: size,
+      className: triggerClassName,
+      active: open
+    }, /*#__PURE__*/React.createElement(TreeDotsIcon, null))
+  }, /*#__PURE__*/React.createElement(List, {
+    style: {
+      padding: "8px 0"
+    },
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(EditIcon, null), "Rename"), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(DuplicateIcon, null), "Duplicate"), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(CopyIcon, null), "Move/Copy to Project"), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(TaskListCompleteIcon, null), "Complete"), /*#__PURE__*/React.createElement(ListSeparator, null), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(TrashIcon, null), "Delete")));
+};
+TaskListOptionsMenu.displayName = "TaskListOptionsMenu";
+//# sourceMappingURL=TaskOptionsMenu.js.map

package/dist/esm/presentation/shared/TaskOptionsMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskOptionsMenu.js","names":["React","useCallback","useState","styled","Checkbox","IconButton","ArrowRightIcon","CopyIcon","DuplicateIcon","EditIcon","RecurringCheckmarkIcon","TaskListCompleteIcon","TrashIcon","TreeDotsIcon","List","ListItem","ListSeparator","Menu","Tooltip","StyledTaskMenu","div","withConfig","displayName","componentId","MENU_PICKER_ITEMS","TaskOptionsMenu","_ref","targetClassName","size","_useState","open","setOpen","handleOpen","handleClose","triggerClassName","filter","Boolean","join","undefined","createElement","onOpen","onClose","position","target","type","variant","className","active","tabIndex","map","name","key","id","onChange","title","TaskListOptionsMenu","_ref2","_useState2","style","padding"],"sources":["../../../../src/presentation/shared/TaskOptionsMenu.tsx"],"sourcesContent":["import React, { ReactElement, useCallback, useState } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { Checkbox } from \"../../components/Checkbox\";\nimport { IconButton } from \"../../components/IconButton\";\nimport {\n  ArrowRightIcon,\n  CopyIcon,\n  DuplicateIcon,\n  EditIcon,\n  RecurringCheckmarkIcon,\n  TaskListCompleteIcon,\n  TrashIcon,\n  TreeDotsIcon,\n} from \"../../components/Icons\";\nimport { List, ListItem, ListSeparator } from \"../../components/List\";\nimport { Menu } from \"../../components/Menu\";\nimport { Tooltip } from \"../../components/Tooltip\";\n\n/* Task three-dot options menu — same component as the real TaskItem\n   (Menu in \"normal\" mode = 260px, List/ListItem + TreeDots target), shared by\n   the List view and Column view presentations. Spacing is styled-components\n   (this Storybook has no runtime Tailwind). Clicks are intentionally no-ops. */\nconst StyledTaskMenu = styled.div`\n  /* no width — fills the 260px Menu bubble */\n\n  .menu-list {\n    padding: 8px 0;\n  }\n\n  /* text on the left, control (arrow / checkbox) on the right */\n  .menu-item {\n    justify-content: space-between;\n  }\n\n  .menu-item .label {\n    min-width: 0;\n    padding-right: 8px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  /* bottom action icons: same horizontal padding as a list item (0 1rem),\n     spread evenly */\n  .menu-bottom {\n    display: flex;\n    justify-content: space-between;\n    padding: 0 16px;\n    margin: 16px 0 12px;\n  }\n`;\n\nconst MENU_PICKER_ITEMS = [\n  \"Task List\",\n  \"Assignees\",\n  \"Due Date\",\n  \"Label\",\n  \"Estimate\",\n];\n\nexport interface TaskOptionsMenuProps {\n  /** Class on the TreeDots trigger (parent controls its hover visibility). */\n  targetClassName?: string;\n  /** IconButton size of the trigger (omit for the default/regular size). */\n  size?: \"small\" | \"big\";\n}\n\nexport const TaskOptionsMenu = ({\n  targetClassName,\n  size,\n}: TaskOptionsMenuProps): ReactElement => {\n  const [open, setOpen] = useState(false);\n  const handleOpen = useCallback(() => setOpen(true), []);\n  const handleClose = useCallback(() => setOpen(false), []);\n\n  const triggerClassName =\n    [targetClassName, open ? \"open\" : \"\"].filter(Boolean).join(\" \") ||\n    undefined;\n\n  return (\n    <Menu\n      open={open}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      position=\"bottom-end\"\n      target={\n        <IconButton\n          type=\"button\"\n          variant=\"text gray\"\n          size={size}\n          className={triggerClassName}\n          active={open}\n        >\n          <TreeDotsIcon />\n        </IconButton>\n      }\n    >\n      <StyledTaskMenu>\n        <List className=\"menu-list\" tabIndex={0}>\n          {MENU_PICKER_ITEMS.map((name) => (\n            <ListItem key={name} className=\"menu-item\">\n              <div className=\"label\">{name}</div>\n              <ArrowRightIcon />\n            </ListItem>\n          ))}\n          <ListSeparator />\n          <ListItem className=\"menu-item\">\n            <div className=\"label\">Hidden from clients</div>\n            <Checkbox\n              id=\"task-menu-hidden-from-clients\"\n              onChange={() => undefined}\n            />\n          </ListItem>\n          <ListItem className=\"menu-item\">\n            <div className=\"label\">High priority</div>\n            <Checkbox id=\"task-menu-high-priority\" onChange={() => undefined} />\n          </ListItem>\n          <ListSeparator />\n          <div className=\"menu-bottom\">\n            <Tooltip title=\"Edit\">\n              <IconButton type=\"button\" variant=\"text gray\">\n                <EditIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title=\"Duplicate\">\n              <IconButton type=\"button\" variant=\"text gray\">\n                <DuplicateIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title=\"Create Recurring Task\">\n              <IconButton type=\"button\" variant=\"text gray\">\n                <RecurringCheckmarkIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title=\"Delete\">\n              <IconButton type=\"button\" variant=\"text gray\">\n                <TrashIcon />\n              </IconButton>\n            </Tooltip>\n          </div>\n        </List>\n      </StyledTaskMenu>\n    </Menu>\n  );\n};\n\nTaskOptionsMenu.displayName = \"TaskOptionsMenu\";\n\nexport interface TaskListOptionsMenuProps {\n  /** Class on the TreeDots trigger (parent controls its hover visibility). */\n  targetClassName?: string;\n  /** IconButton size of the trigger (omit for the default/regular size). */\n  size?: \"small\" | \"big\";\n}\n\n/* Task-LIST three-dot menu (Menu + List with leading-icon items) — same\n   options as the real TaskListOptions. Shared by List & Column views.\n   Clicks are intentionally no-ops. */\nexport const TaskListOptionsMenu = ({\n  targetClassName,\n  size,\n}: TaskListOptionsMenuProps): ReactElement => {\n  const [open, setOpen] = useState(false);\n  const handleOpen = useCallback(() => setOpen(true), []);\n  const handleClose = useCallback(() => setOpen(false), []);\n\n  const triggerClassName =\n    [targetClassName, open ? \"open\" : \"\"].filter(Boolean).join(\" \") ||\n    undefined;\n\n  return (\n    <Menu\n      open={open}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      position=\"bottom-end\"\n      target={\n        <IconButton\n          type=\"button\"\n          variant=\"text gray\"\n          size={size}\n          className={triggerClassName}\n          active={open}\n        >\n          <TreeDotsIcon />\n        </IconButton>\n      }\n    >\n      <List style={{ padding: \"8px 0\" }} tabIndex={-1}>\n        <ListItem>\n          <EditIcon />\n          Rename\n        </ListItem>\n        <ListItem>\n          <DuplicateIcon />\n          Duplicate\n        </ListItem>\n        <ListItem>\n          <CopyIcon />\n          Move/Copy to Project\n        </ListItem>\n        <ListItem>\n          <TaskListCompleteIcon />\n          Complete\n        </ListItem>\n        <ListSeparator />\n        <ListItem>\n          <TrashIcon />\n          Delete\n        </ListItem>\n      </List>\n    </Menu>\n  );\n};\n\nTaskListOptionsMenu.displayName = \"TaskListOptionsMenu\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/presentation/shared/headers.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement, ReactNode } from "react";
+export interface PageHeaderProps {
+    title: string;
+    children?: ReactNode;
+}
+/** Generic page header (title + optional controls), mirrors PageHeader.jsx. */
+export declare const PageHeader: {
+    ({ title, children, }: PageHeaderProps): ReactElement;
+    displayName: string;
+};
+export interface ProjectPageHeaderProps {
+    title?: string;
+}
+/** The project page header: back arrow, title, progress, info, people, options. */
+export declare const ProjectPageHeader: {
+    ({ title, }: ProjectPageHeaderProps): ReactElement;
+    displayName: string;
+};
+export interface TabHeaderProps {
+    /** Which view-mode toggle is highlighted as active. */
+    activeView?: "list" | "column" | "timeline";
+}
+/** The Tasks/Discussions/… tab bar plus the right-hand view toolbar. */
+export declare const TabHeader: {
+    ({ activeView, }: TabHeaderProps): ReactElement;
+    displayName: string;
+};
+//# sourceMappingURL=headers.d.ts.map

package/dist/esm/presentation/shared/headers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"headers.d.ts","sourceRoot":"","sources":["../../../../src/presentation/shared/headers.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAqHjE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,+EAA+E;AAC/E,eAAO,MAAM,UAAU;2BAGpB,eAAe,GAAG,YAAY;;CAShC,CAAC;AA8GF,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,mFAAmF;AACnF,eAAO,MAAM,iBAAiB;iBAE3B,sBAAsB,GAAG,YAAY;;CAkCvC,CAAC;AAsCF,MAAM,WAAW,cAAc;IAC7B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;CAC7C;AAED,wEAAwE;AACxE,eAAO,MAAM,SAAS;sBAEnB,cAAc,GAAG,YAAY;;CA8C/B,CAAC"}