@activecollab/components 2.0.392 → 2.0.394

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

@@ -1,47 +1,151 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
+import { Button } from "../../components/Button";
 import { ChooseV2 } from "../../components/ChooseV2";
 import { Dialog } from "../../components/Dialog";
 import { IconButton } from "../../components/IconButton";
 import { CancelCrossIcon, CommandLineIcon, CopyIcon, HashIcon } from "../../components/Icons";
 import { SkeletonLoader } from "../../components/Loaders";
 import { Tooltip } from "../../components/Tooltip";
-import { Trigger } from "../../components/Trigger";
-import { Body2, Header3 } from "../../components/Typography";
+import { Body2, Caption1, Header3 } from "../../components/Typography";
 
 /**
- * "Linking and Commands" button — same small outlined shape and placement as
- * the "Suggest Subtasks" button, but without an icon or the AI gradient (this
- * is not an AI feature). Clicking it opens a reference dialog: a short pitch
- * with a one-liner each for Linking and Commands, a centered ChooseV2 to switch
- * between the two conventions (Linking default), and the full instructions for
- * whichever is selected below it.
+ * "Linking and Commands" button — a plain design-system secondary button (small,
+ * rounded, no icon, no AI gradient: this is not an AI feature). Clicking it opens
+ * a read-only reference dialog.
+ *
+ * This mock mirrors the shipped `activecollab-next` implementation
+ * (`src/components/tasks/SourceCode/LinkingAndCommandsButton.jsx` +
+ * `LinkingAndCommandsDialog.jsx`, task #457754): a 640px dialog with a short
+ * pitch, a centered ChooseV2 to switch conventions (Linking default), and two
+ * tabs. Linking shows the reference forms for this task and a copyable
+ * `git checkout -b …` suggestion; Commands shows an API-shaped table of action
+ * words and slash commands, plus a fixed example commit. Both the reference
+ * guide and the suggested-branch request are represented by short skeleton
+ * loads, the way the real dialog fetches them once it is opened.
  */
 const SANS = '-apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif';
 const MONO = "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
 
 /** The example task these instructions are written against. */
 const TASK_ID = 4231;
+/** Task URL, in production built with `~/utils/urls` `getTaskUrl`. */
+const TASK_URL = "https://app.activecollab.com/1/projects/2110/tasks/" + TASK_ID;
 /**
  * Suggested branch name for this task — in production it is resolved per repo
  * via GET .../tasks/{task_id}/source/suggest-branch-name. Mocked here.
  */
-const SUGGESTED_BRANCH = "ilija/4231-add-cacak-region-support";
+const SUGGESTED_BRANCH = "ilija/" + TASK_ID + "-add-cacak-region-support";
 
 /** POSIX-safe single-quote escaping for a value dropped into a shell command. */
 const shellQuote = value => "'" + value.replace(/'/g, "'\\''") + "'";
-const StyledButton = styled(Trigger).withConfig({
-  displayName: "LinkingCommandsButton__StyledButton",
+
+/* ------------------------------------------------------------------ */
+/* Reference-guide data — shaped like the GET .../source/reference-guide */
+/* payload the real dialog is driven by: a map of action words plus a    */
+/* flat list of slash commands. Descriptions are localised server-side;  */
+/* tokens and examples never translate.                                  */
+/* ------------------------------------------------------------------ */
+
+/** Action words act on the linked task from a title, commit, or PR body. */
+const ACTION_WORDS = {
+  close: {
+    primary: "Close",
+    example: "Close #" + TASK_ID,
+    description: "Closes the task when its pull request is merged.",
+    aliases: ["Closes", "Fixes", "Fixed", "Resolves", "Resolved"]
+  }
+};
+
+/** Slash commands act on the task from a commit message or PR description. */
+const COMMANDS = [{
+  name: "spend",
+  syntax: "/spend {duration} [of {job type}]",
+  example: "/spend 1h 30m of Design",
+  description: "Logs the time you spent on the task."
+}, {
+  name: "estimate",
+  syntax: "/estimate {duration}",
+  example: "/estimate 4h",
+  description: "Sets the task's time estimate."
+}, {
+  name: "comment",
+  syntax: "/comment {text}",
+  example: "/comment Deployed to staging",
+  description: "Posts a comment on the task."
+}, {
+  name: "done",
+  syntax: "/done",
+  example: "/done",
+  description: "Marks the task complete.",
+  aliases: ["/complete"]
+}, {
+  name: "reopen",
+  syntax: "/reopen",
+  example: "/reopen",
+  description: "Reopens a completed task."
+}, {
+  name: "assign",
+  syntax: "/assign @{member}",
+  example: "/assign @ilija",
+  description: "Assigns the task to a team member."
+}, {
+  name: "label",
+  syntax: "/label {name}",
+  example: "/label In Progress",
+  description: "Adds a label to the task."
+}];
+/** Action words first, then the slash commands — the shipped row order. */
+const TABLE_ROWS = [...Object.values(ACTION_WORDS).map(word => ({
+  key: "action-" + word.primary,
+  example: word.example,
+  description: word.description,
+  aliases: word.aliases
+})), ...COMMANDS.map(command => ({
+  key: "command-" + command.name,
+  example: command.example,
+  format: command.syntax,
+  description: command.description,
+  aliases: command.aliases
+}))];
+
+/**
+ * Illustrative commit message: closes the task on the subject line, logs time,
+ * leaves a note. Fixed sample text — only the task id is interpolated, and
+ * durations are printed verbatim (never reformatted).
+ */
+const EXAMPLE_COMMIT = "Fix ranks reset when a contract is archived, closes #" + TASK_ID + "\n\n/spend 1h 30m\n/comment Verified on staging, ranks hold after archive";
+
+/* ------------------------------------------------------------------ */
+/* Trigger button — plain DS secondary button, rounded to the compact   */
+/* "Suggest Subtasks" shape (6px), no icon, no gradient.                 */
+/* ------------------------------------------------------------------ */
+
+const TriggerButton = styled(Button).withConfig({
+  displayName: "LinkingCommandsButton__TriggerButton",
   componentId: "sc-11q4kcm-0"
-})([".lc-btn{display:inline-flex;align-items:center;color:var(--color-theme-700);border:1px solid var(--color-theme-500);background-color:transparent;padding:3px 8px;font-weight:500;font-size:12px;letter-spacing:0.5px;line-height:16px;border-radius:6px;transition:border-color 0.2s ease,color 0.2s ease;}&:hover .lc-btn{border-color:var(--color-theme-700);color:var(--color-theme-900);}"]);
+})(["&&{border-radius:6px;}"]);
+
+/** Wider than the default 540px dialog, matching the shipped 640px width. */
+const StyledDialog = styled(Dialog).withConfig({
+  displayName: "LinkingCommandsButton__StyledDialog",
+  componentId: "sc-11q4kcm-1"
+})(["&&{width:640px;max-width:calc(100vw - 64px);}"]);
 const StyledTitleRow = styled.div.withConfig({
   displayName: "LinkingCommandsButton__StyledTitleRow",
-  componentId: "sc-11q4kcm-1"
+  componentId: "sc-11q4kcm-2"
 })(["display:flex;align-items:center;justify-content:space-between;gap:12px;"]);
 const StyledBody = styled.div.withConfig({
   displayName: "LinkingCommandsButton__StyledBody",
-  componentId: "sc-11q4kcm-2"
-})(["font-family:", ";.lc-intro{margin-bottom:18px;}.lc-lead{display:flex;gap:10px;align-items:flex-start;margin-top:12px;}.lc-lead svg{flex-shrink:0;width:18px;height:18px;margin-top:2px;}.lc-term{font-weight:600;color:var(--color-theme-900);}.lc-choosectl{margin-bottom:18px;}.lc-choosectl > div{justify-content:center;}.lc-list{margin:8px 0 0;padding-left:18px;}.lc-list li{margin-bottom:6px;}.lc-invite{margin-top:14px;}.code{font-family:", ";background:var(--color-theme-200);border-radius:4px;padding:1px 5px;font-size:12px;color:var(--color-theme-900);}.lc-copy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:8px 10px;background:var(--color-theme-200);border:1px solid var(--border-primary);border-radius:6px;}.lc-copy code{font-family:", ";font-size:12px;color:var(--color-theme-900);overflow-x:auto;white-space:nowrap;}.lc-copy-btn{flex-shrink:0;display:inline-flex;align-items:center;border:none;background:transparent;cursor:pointer;padding:2px;color:var(--color-theme-600);transition:color 0.15s ease;}.lc-copy-btn:hover{color:var(--color-theme-900);}.lc-copy-btn svg{width:16px;height:16px;}.lc-copy-skel{height:37px;width:100%;margin-top:10px;border-radius:6px;}.lc-example{font-family:", ";font-size:12px;line-height:1.5;color:var(--color-theme-900);background:var(--color-theme-200);border:1px solid var(--border-primary);border-radius:6px;padding:10px 12px;margin-top:12px;white-space:pre-wrap;overflow-x:auto;}table{width:100%;border-collapse:collapse;margin-top:12px;}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-primary);vertical-align:top;}th{font-size:12px;font-weight:500;color:var(--color-theme-600);}"], SANS, MONO, MONO, MONO);
+  componentId: "sc-11q4kcm-3"
+})(["font-family:", ";display:flex;flex-direction:column;gap:16px;max-height:60vh;overflow-y:auto;.code{font-family:", ";background:var(--color-theme-200);color:var(--color-theme-900);border-radius:4px;padding:2px 6px;font-size:12px;}.lc-term{font-weight:600;color:var(--color-theme-900);}.lc-leads{display:flex;flex-direction:column;gap:8px;}.lc-lead{display:flex;align-items:flex-start;gap:8px;}.lc-lead svg{flex-shrink:0;width:16px;height:16px;margin-top:2px;color:var(--color-theme-600);}.lc-choosectl > div{justify-content:center;}.lc-tabbody{display:flex;flex-direction:column;gap:20px;}.lc-commands{gap:16px;}.lc-block{display:flex;flex-direction:column;gap:8px;}.lc-list{display:flex;flex-direction:column;gap:6px;margin:0;padding-left:20px;list-style:disc;}.lc-table{display:grid;grid-template-columns:max-content 1fr;column-gap:24px;}.lc-th{padding-bottom:8px;border-bottom:1px solid var(--border-primary);}.lc-td{padding:12px 0;border-bottom:1px solid var(--border-primary);}.lc-format{display:block;margin-top:4px;font-family:", ";}.lc-aliases{margin-top:12px;}.lc-skeleton{display:flex;flex-direction:column;gap:12px;}.lc-skel{border-radius:6px;}.lc-skel-line{height:20px;}.lc-skel-block{height:36px;width:100%;}.lc-skel-2-3{width:66%;}.lc-skel-1-2{width:50%;}.lc-branch-skel{width:100%;height:36px;border-radius:6px;}"], SANS, MONO, MONO);
+
+/* Copyable code snippet — mirrors the shared CopySnippet: a theme-200 <pre>
+   with a copy control that reveals on hover (hidden when hideCopyButton). */
+const StyledSnippet = styled.div.withConfig({
+  displayName: "LinkingCommandsButton__StyledSnippet",
+  componentId: "sc-11q4kcm-4"
+})(["position:relative;pre{margin:0;background:var(--color-theme-200);color:var(--color-theme-900);border-radius:6px;padding:12px 16px;overflow-x:auto;font-family:", ";font-size:13px;line-height:1.5;}.lc-copy-btn{position:absolute;top:6px;right:6px;opacity:0;transition:opacity 0.15s ease;}&:hover .lc-copy-btn{opacity:1;}.lc-copy-btn svg{width:16px;height:16px;}"], MONO);
 const TAB_OPTIONS = [{
   id: "linking",
   name: "Linking"
@@ -49,108 +153,114 @@ const TAB_OPTIONS = [{
   id: "commands",
   name: "Commands"
 }];
-const COMMANDS = [{
-  cmd: "Closes #34",
-  does: "Closes the task when the pull request merges"
-}, {
-  cmd: "Fixes #34",
-  does: "Same as Closes: closes on merge"
-}, {
-  cmd: "Refs #34",
-  does: "Links to the task without closing it"
-}, {
-  cmd: "/spend 1:30",
-  does: "Logs time against the task"
-}, {
-  cmd: "/estimate 4:00",
-  does: "Sets the task's time estimate"
-}, {
-  cmd: "/done",
-  does: "Marks the task complete"
-}, {
-  cmd: "/reopen",
-  does: "Reopens the task"
-}, {
-  cmd: "/assign @ilija",
-  does: "Assigns the task to a user"
-}, {
-  cmd: "/label In Progress",
-  does: "Adds a label to the task"
-}, {
-  cmd: "/comment Deployed to staging",
-  does: "Posts a comment on the task"
-}, {
-  cmd: "/relate #35",
-  does: "Relates this task to another task"
-}];
-
-/** Illustrative commit message: closes the task, logs time, leaves a note. */
-const EXAMPLE_COMMIT = "Fix ranks reset when a contract is archived\n\nCloses #" + TASK_ID + "\n/spend 1:30\n/comment Verified on staging, ranks hold after archive";
-const LinkingTab = _ref => {
-  let loading = _ref.loading,
-    branch = _ref.branch;
+const CopySnippet = _ref => {
+  let code = _ref.code,
+    _ref$hideCopyButton = _ref.hideCopyButton,
+    hideCopyButton = _ref$hideCopyButton === void 0 ? false : _ref$hideCopyButton;
   const _useState = useState(false),
     copied = _useState[0],
     setCopied = _useState[1];
-  const command = branch ? "git checkout -b " + shellQuote(branch) : "";
   const copy = () => {
     var _navigator$clipboard;
-    if (!command) return;
     // eslint-disable-next-line compat/compat
-    void ((_navigator$clipboard = navigator.clipboard) == null ? void 0 : _navigator$clipboard.writeText(command));
+    void ((_navigator$clipboard = navigator.clipboard) == null ? void 0 : _navigator$clipboard.writeText(code));
     setCopied(true);
     window.setTimeout(() => setCopied(false), 1500);
   };
+  return /*#__PURE__*/React.createElement(StyledSnippet, null, /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, code)), !hideCopyButton && /*#__PURE__*/React.createElement(Tooltip, {
+    title: copied ? "Copied!" : "Copy"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "lc-copy-btn",
+    onClick: copy,
+    "aria-label": "Copy command",
+    style: {
+      border: "none",
+      background: "transparent",
+      cursor: "pointer",
+      padding: 4,
+      display: "inline-flex",
+      color: "var(--color-theme-600)"
+    }
+  }, /*#__PURE__*/React.createElement(CopyIcon, null))));
+};
+const LinkingTab = _ref2 => {
+  let branchLoading = _ref2.branchLoading,
+    branch = _ref2.branch;
+  const command = branch ? "git checkout -b " + shellQuote(branch) : "";
   return /*#__PURE__*/React.createElement("div", {
     className: "lc-tabbody"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lc-block"
   }, /*#__PURE__*/React.createElement(Body2, {
     color: "secondary"
   }, "Mention the task in your git activity and it links to this task on its own:"), /*#__PURE__*/React.createElement("ul", {
     className: "lc-list"
-  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Body2, null, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Body2, {
+    color: "secondary"
+  }, /*#__PURE__*/React.createElement("span", {
     className: "lc-term"
   }, "In a branch name:"), " the raw task ID", " ", /*#__PURE__*/React.createElement("span", {
     className: "code"
-  }, TASK_ID))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Body2, null, /*#__PURE__*/React.createElement("span", {
+  }, TASK_ID))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Body2, {
+    color: "secondary"
+  }, /*#__PURE__*/React.createElement("span", {
     className: "lc-term"
   }, "In a title, commit message, or description:"), " ", /*#__PURE__*/React.createElement("span", {
     className: "code"
   }, "#", TASK_ID), " or", " ", /*#__PURE__*/React.createElement("span", {
     className: "code"
-  }, "AC-", TASK_ID))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Body2, null, /*#__PURE__*/React.createElement("span", {
+  }, "AC-", TASK_ID))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Body2, {
+    color: "secondary"
+  }, /*#__PURE__*/React.createElement("span", {
     className: "lc-term"
   }, "Anywhere:"), " the task URL", " ", /*#__PURE__*/React.createElement("span", {
     className: "code"
-  }, "https://app.activecollab.com/1/projects/2110/tasks/", TASK_ID)))), /*#__PURE__*/React.createElement("div", {
-    className: "lc-invite"
+  }, TASK_URL))))), branchLoading || command ? /*#__PURE__*/React.createElement("div", {
+    className: "lc-block"
   }, /*#__PURE__*/React.createElement(Body2, {
     color: "secondary"
-  }, "Give the branch a name with the task number in it and it links the moment you push. Create one from the suggested name:"), loading ? /*#__PURE__*/React.createElement(SkeletonLoader, {
-    className: "lc-copy-skel"
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: "lc-copy"
-  }, /*#__PURE__*/React.createElement("code", null, command), /*#__PURE__*/React.createElement(Tooltip, {
-    title: copied ? "Copied!" : "Copy"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "lc-copy-btn",
-    onClick: copy,
-    "aria-label": "Copy command"
-  }, /*#__PURE__*/React.createElement(CopyIcon, null))))));
+  }, "Give the branch a name with the task number in it and it links the moment you push. Create one from the suggested name:"), branchLoading ? /*#__PURE__*/React.createElement(SkeletonLoader, {
+    className: "lc-branch-skel"
+  }) : /*#__PURE__*/React.createElement(CopySnippet, {
+    code: command
+  })) : null);
 };
 const CommandsTab = () => /*#__PURE__*/React.createElement("div", {
-  className: "lc-tabbody"
+  className: "lc-tabbody lc-commands"
 }, /*#__PURE__*/React.createElement(Body2, {
   color: "secondary"
-}, "The table below lists action words and slash commands that you can use in a commit message or a pull request description to act on the linked task. Example:"), /*#__PURE__*/React.createElement("pre", {
-  className: "lc-example"
-}, EXAMPLE_COMMIT), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Command"), /*#__PURE__*/React.createElement("th", null, "What it does"))), /*#__PURE__*/React.createElement("tbody", null, COMMANDS.map(c => /*#__PURE__*/React.createElement("tr", {
-  key: c.cmd
-}, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", {
-  className: "code"
-}, c.cmd)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Body2, {
-  color: "secondary"
-}, c.does)))))));
+}, "The table below lists action words and slash commands that you can use in a commit message or a pull request description to act on the linked task. Example:"), /*#__PURE__*/React.createElement(CopySnippet, {
+  code: EXAMPLE_COMMIT,
+  hideCopyButton: true
+}), /*#__PURE__*/React.createElement("div", {
+  className: "lc-table"
+}, /*#__PURE__*/React.createElement(Caption1, {
+  color: "tertiary",
+  className: "lc-th"
+}, "Command"), /*#__PURE__*/React.createElement(Caption1, {
+  color: "tertiary",
+  className: "lc-th"
+}, "What it does"), TABLE_ROWS.map(row => {
+  var _row$aliases;
+  return /*#__PURE__*/React.createElement(React.Fragment, {
+    key: row.key
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lc-td"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "code"
+  }, row.example), row.format ? /*#__PURE__*/React.createElement(Caption1, {
+    color: "tertiary",
+    className: "lc-format"
+  }, row.format) : null), /*#__PURE__*/React.createElement("div", {
+    className: "lc-td"
+  }, /*#__PURE__*/React.createElement(Body2, {
+    color: "secondary"
+  }, row.description), (_row$aliases = row.aliases) != null && _row$aliases.length ? /*#__PURE__*/React.createElement(Body2, {
+    color: "secondary",
+    className: "lc-aliases"
+  }, "Aliases: ", row.aliases.join(", ")) : null));
+})));
 export const LinkingCommandsButton = () => {
   const _useState2 = useState(false),
     open = _useState2[0],
@@ -159,34 +269,43 @@ export const LinkingCommandsButton = () => {
     tab = _useState3[0],
     setTab = _useState3[1];
   const _useState4 = useState(true),
-    branchLoading = _useState4[0],
-    setBranchLoading = _useState4[1];
-  const _useState5 = useState(null),
-    suggestedBranch = _useState5[0],
-    setSuggestedBranch = _useState5[1];
+    guideLoading = _useState4[0],
+    setGuideLoading = _useState4[1];
+  const _useState5 = useState(true),
+    branchLoading = _useState5[0],
+    setBranchLoading = _useState5[1];
+  const _useState6 = useState(null),
+    suggestedBranch = _useState6[0],
+    setSuggestedBranch = _useState6[1];
 
-  // Mock the suggest-branch-name API load: ~1s skeleton whenever the dialog
-  // opens, then reveal the copyable git command.
+  // Mock the two endpoint loads the real dialog fires once it opens: the
+  // reference guide resolves first (~0.6s), then the suggested branch name
+  // (~1.1s), each showing its own skeleton until it lands.
   useEffect(() => {
     if (!open) return undefined;
+    setGuideLoading(true);
     setBranchLoading(true);
     setSuggestedBranch(null);
-    const timer = window.setTimeout(() => {
+    const guideTimer = window.setTimeout(() => setGuideLoading(false), 600);
+    const branchTimer = window.setTimeout(() => {
       setSuggestedBranch(SUGGESTED_BRANCH);
       setBranchLoading(false);
-    }, 1000);
-    return () => window.clearTimeout(timer);
+    }, 1100);
+    return () => {
+      window.clearTimeout(guideTimer);
+      window.clearTimeout(branchTimer);
+    };
   }, [open]);
   const openDialog = () => {
     setTab("linking");
     setOpen(true);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TriggerButton, {
     type: "button",
+    variant: "secondary",
+    size: "small",
     onClick: openDialog
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "lc-btn"
-  }, "Linking and Commands")), /*#__PURE__*/React.createElement(Dialog, {
+  }, "Linking and Commands"), /*#__PURE__*/React.createElement(StyledDialog, {
     open: open,
     onClose: () => setOpen(false),
     enableBackgroundClick: true
@@ -195,10 +314,21 @@ export const LinkingCommandsButton = () => {
   }, /*#__PURE__*/React.createElement(StyledTitleRow, null, /*#__PURE__*/React.createElement(Header3, null, "Linking and Commands"), /*#__PURE__*/React.createElement(IconButton, {
     type: "button",
     variant: "text gray",
+    "aria-label": "Close",
     onClick: () => setOpen(false)
-  }, /*#__PURE__*/React.createElement(CancelCrossIcon, null)))), /*#__PURE__*/React.createElement(Dialog.ContentDivider, null), /*#__PURE__*/React.createElement(Dialog.Content, null, /*#__PURE__*/React.createElement(StyledBody, null, /*#__PURE__*/React.createElement("div", {
-    className: "lc-intro"
-  }, /*#__PURE__*/React.createElement(Body2, null, "Keep a task in sync with your code without leaving your editor."), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CancelCrossIcon, null)))), /*#__PURE__*/React.createElement(Dialog.ContentDivider, null), /*#__PURE__*/React.createElement(Dialog.Content, null, /*#__PURE__*/React.createElement(StyledBody, null, guideLoading ? /*#__PURE__*/React.createElement("div", {
+    className: "lc-skeleton"
+  }, /*#__PURE__*/React.createElement(SkeletonLoader, {
+    className: "lc-skel lc-skel-line lc-skel-2-3"
+  }), /*#__PURE__*/React.createElement(SkeletonLoader, {
+    className: "lc-skel lc-skel-block"
+  }), /*#__PURE__*/React.createElement(SkeletonLoader, {
+    className: "lc-skel lc-skel-block"
+  }), /*#__PURE__*/React.createElement(SkeletonLoader, {
+    className: "lc-skel lc-skel-line lc-skel-1-2"
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Body2, null, "Keep a task in sync with your code without leaving your editor."), /*#__PURE__*/React.createElement("div", {
+    className: "lc-leads"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "lc-lead"
   }, /*#__PURE__*/React.createElement(HashIcon, null), /*#__PURE__*/React.createElement(Body2, {
     color: "secondary"
@@ -216,9 +346,9 @@ export const LinkingCommandsButton = () => {
     selected: [tab],
     onChange: ids => setTab(ids[0])
   }), tab === "linking" ? /*#__PURE__*/React.createElement(LinkingTab, {
-    loading: branchLoading,
+    branchLoading: branchLoading,
     branch: suggestedBranch
-  }) : /*#__PURE__*/React.createElement(CommandsTab, null)))));
+  }) : /*#__PURE__*/React.createElement(CommandsTab, null))))));
 };
 LinkingCommandsButton.displayName = "LinkingCommandsButton";
 //# sourceMappingURL=LinkingCommandsButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LinkingCommandsButton.js","names":["React","useEffect","useState","styled","ChooseV2","Dialog","IconButton","CancelCrossIcon","CommandLineIcon","CopyIcon","HashIcon","SkeletonLoader","Tooltip","Trigger","Body2","Header3","SANS","MONO","TASK_ID","SUGGESTED_BRANCH","shellQuote","value","replace","StyledButton","withConfig","displayName","componentId","StyledTitleRow","div","StyledBody","TAB_OPTIONS","id","name","COMMANDS","cmd","does","EXAMPLE_COMMIT","LinkingTab","_ref","loading","branch","_useState","copied","setCopied","command","copy","_navigator$clipboard","navigator","clipboard","writeText","window","setTimeout","createElement","className","color","title","type","onClick","CommandsTab","map","c","key","LinkingCommandsButton","_useState2","open","setOpen","_useState3","tab","setTab","_useState4","branchLoading","setBranchLoading","_useState5","suggestedBranch","setSuggestedBranch","undefined","timer","clearTimeout","openDialog","Fragment","onClose","enableBackgroundClick","Title","disableDefaultHeading","variant","ContentDivider","Content","options","selected","onChange","ids"],"sources":["../../../../src/presentation/shared/LinkingCommandsButton.tsx"],"sourcesContent":["import React, { ReactElement, useEffect, useState } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { ChooseV2, ChooseV2Option } from \"../../components/ChooseV2\";\nimport { Dialog } from \"../../components/Dialog\";\nimport { IconButton } from \"../../components/IconButton\";\nimport {\n  CancelCrossIcon,\n  CommandLineIcon,\n  CopyIcon,\n  HashIcon,\n} from \"../../components/Icons\";\nimport { SkeletonLoader } from \"../../components/Loaders\";\nimport { Tooltip } from \"../../components/Tooltip\";\nimport { Trigger } from \"../../components/Trigger\";\nimport { Body2, Header3 } from \"../../components/Typography\";\n\n/**\n * \"Linking and Commands\" button — same small outlined shape and placement as\n * the \"Suggest Subtasks\" button, but without an icon or the AI gradient (this\n * is not an AI feature). Clicking it opens a reference dialog: a short pitch\n * with a one-liner each for Linking and Commands, a centered ChooseV2 to switch\n * between the two conventions (Linking default), and the full instructions for\n * whichever is selected below it.\n */\nconst SANS =\n  '-apple-system, BlinkMacSystemFont, \"Roboto\", \"Helvetica Neue\", Arial, sans-serif';\nconst MONO = \"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace\";\n\n/** The example task these instructions are written against. */\nconst TASK_ID = 4231;\n/**\n * Suggested branch name for this task — in production it is resolved per repo\n * via GET .../tasks/{task_id}/source/suggest-branch-name. Mocked here.\n */\nconst SUGGESTED_BRANCH = \"ilija/4231-add-cacak-region-support\";\n\n/** POSIX-safe single-quote escaping for a value dropped into a shell command. */\nconst shellQuote = (value: string): string =>\n  `'${value.replace(/'/g, \"'\\\\''\")}'`;\n\nconst StyledButton = styled(Trigger)`\n  .lc-btn {\n    display: inline-flex;\n    align-items: center;\n    color: var(--color-theme-700);\n    border: 1px solid var(--color-theme-500);\n    background-color: transparent;\n    padding: 3px 8px;\n    font-weight: 500;\n    font-size: 12px;\n    letter-spacing: 0.5px;\n    line-height: 16px;\n    border-radius: 6px;\n    transition: border-color 0.2s ease, color 0.2s ease;\n  }\n  &:hover .lc-btn {\n    border-color: var(--color-theme-700);\n    color: var(--color-theme-900);\n  }\n`;\n\nconst StyledTitleRow = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n`;\n\nconst StyledBody = styled.div`\n  font-family: ${SANS};\n\n  .lc-intro {\n    margin-bottom: 18px;\n  }\n  .lc-lead {\n    display: flex;\n    gap: 10px;\n    align-items: flex-start;\n    margin-top: 12px;\n  }\n  .lc-lead svg {\n    flex-shrink: 0;\n    width: 18px;\n    height: 18px;\n    margin-top: 2px;\n  }\n  .lc-term {\n    font-weight: 600;\n    color: var(--color-theme-900);\n  }\n\n  /* ChooseV2 root is passed .lc-choosectl; its inner flex row is centered. */\n  .lc-choosectl {\n    margin-bottom: 18px;\n  }\n  .lc-choosectl > div {\n    justify-content: center;\n  }\n\n  .lc-list {\n    margin: 8px 0 0;\n    padding-left: 18px;\n  }\n  .lc-list li {\n    margin-bottom: 6px;\n  }\n  .lc-invite {\n    margin-top: 14px;\n  }\n  .code {\n    font-family: ${MONO};\n    background: var(--color-theme-200);\n    border-radius: 4px;\n    padding: 1px 5px;\n    font-size: 12px;\n    color: var(--color-theme-900);\n  }\n  .lc-copy {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 10px;\n    margin-top: 10px;\n    padding: 8px 10px;\n    background: var(--color-theme-200);\n    border: 1px solid var(--border-primary);\n    border-radius: 6px;\n  }\n  .lc-copy code {\n    font-family: ${MONO};\n    font-size: 12px;\n    color: var(--color-theme-900);\n    overflow-x: auto;\n    white-space: nowrap;\n  }\n  .lc-copy-btn {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n    padding: 2px;\n    color: var(--color-theme-600);\n    transition: color 0.15s ease;\n  }\n  .lc-copy-btn:hover {\n    color: var(--color-theme-900);\n  }\n  .lc-copy-btn svg {\n    width: 16px;\n    height: 16px;\n  }\n  .lc-copy-skel {\n    height: 37px;\n    width: 100%;\n    margin-top: 10px;\n    border-radius: 6px;\n  }\n  .lc-example {\n    font-family: ${MONO};\n    font-size: 12px;\n    line-height: 1.5;\n    color: var(--color-theme-900);\n    background: var(--color-theme-200);\n    border: 1px solid var(--border-primary);\n    border-radius: 6px;\n    padding: 10px 12px;\n    margin-top: 12px;\n    white-space: pre-wrap;\n    overflow-x: auto;\n  }\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    margin-top: 12px;\n  }\n  th,\n  td {\n    text-align: left;\n    padding: 8px 10px;\n    border-bottom: 1px solid var(--border-primary);\n    vertical-align: top;\n  }\n  th {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--color-theme-600);\n  }\n`;\n\ntype LcTab = \"linking\" | \"commands\";\n\nconst TAB_OPTIONS: ChooseV2Option[] = [\n  { id: \"linking\", name: \"Linking\" },\n  { id: \"commands\", name: \"Commands\" },\n];\n\ninterface Command {\n  cmd: string;\n  does: string;\n}\n\nconst COMMANDS: Command[] = [\n  { cmd: \"Closes #34\", does: \"Closes the task when the pull request merges\" },\n  { cmd: \"Fixes #34\", does: \"Same as Closes: closes on merge\" },\n  { cmd: \"Refs #34\", does: \"Links to the task without closing it\" },\n  { cmd: \"/spend 1:30\", does: \"Logs time against the task\" },\n  { cmd: \"/estimate 4:00\", does: \"Sets the task's time estimate\" },\n  { cmd: \"/done\", does: \"Marks the task complete\" },\n  { cmd: \"/reopen\", does: \"Reopens the task\" },\n  { cmd: \"/assign @ilija\", does: \"Assigns the task to a user\" },\n  { cmd: \"/label In Progress\", does: \"Adds a label to the task\" },\n  { cmd: \"/comment Deployed to staging\", does: \"Posts a comment on the task\" },\n  { cmd: \"/relate #35\", does: \"Relates this task to another task\" },\n];\n\n/** Illustrative commit message: closes the task, logs time, leaves a note. */\nconst EXAMPLE_COMMIT = `Fix ranks reset when a contract is archived\n\nCloses #${TASK_ID}\n/spend 1:30\n/comment Verified on staging, ranks hold after archive`;\n\ninterface LinkingTabProps {\n  loading: boolean;\n  branch: string | null;\n}\n\nconst LinkingTab = ({ loading, branch }: LinkingTabProps): ReactElement => {\n  const [copied, setCopied] = useState(false);\n  const command = branch ? `git checkout -b ${shellQuote(branch)}` : \"\";\n\n  const copy = (): void => {\n    if (!command) return;\n    // eslint-disable-next-line compat/compat\n    void navigator.clipboard?.writeText(command);\n    setCopied(true);\n    window.setTimeout(() => setCopied(false), 1500);\n  };\n\n  return (\n    <div className=\"lc-tabbody\">\n      <Body2 color=\"secondary\">\n        Mention the task in your git activity and it links to this task on its\n        own:\n      </Body2>\n      <ul className=\"lc-list\">\n        <li>\n          <Body2>\n            <span className=\"lc-term\">In a branch name:</span> the raw task ID{\" \"}\n            <span className=\"code\">{TASK_ID}</span>\n          </Body2>\n        </li>\n        <li>\n          <Body2>\n            <span className=\"lc-term\">\n              In a title, commit message, or description:\n            </span>{\" \"}\n            <span className=\"code\">#{TASK_ID}</span> or{\" \"}\n            <span className=\"code\">AC-{TASK_ID}</span>\n          </Body2>\n        </li>\n        <li>\n          <Body2>\n            <span className=\"lc-term\">Anywhere:</span> the task URL{\" \"}\n            <span className=\"code\">\n              https://app.activecollab.com/1/projects/2110/tasks/{TASK_ID}\n            </span>\n          </Body2>\n        </li>\n      </ul>\n\n      <div className=\"lc-invite\">\n        <Body2 color=\"secondary\">\n          Give the branch a name with the task number in it and it links the\n          moment you push. Create one from the suggested name:\n        </Body2>\n        {loading ? (\n          <SkeletonLoader className=\"lc-copy-skel\" />\n        ) : (\n          <div className=\"lc-copy\">\n            <code>{command}</code>\n            <Tooltip title={copied ? \"Copied!\" : \"Copy\"}>\n              <button\n                type=\"button\"\n                className=\"lc-copy-btn\"\n                onClick={copy}\n                aria-label=\"Copy command\"\n              >\n                <CopyIcon />\n              </button>\n            </Tooltip>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nconst CommandsTab = (): ReactElement => (\n  <div className=\"lc-tabbody\">\n    <Body2 color=\"secondary\">\n      The table below lists action words and slash commands that you can use in\n      a commit message or a pull request description to act on the linked task.\n      Example:\n    </Body2>\n    <pre className=\"lc-example\">{EXAMPLE_COMMIT}</pre>\n    <table>\n      <thead>\n        <tr>\n          <th>Command</th>\n          <th>What it does</th>\n        </tr>\n      </thead>\n      <tbody>\n        {COMMANDS.map((c) => (\n          <tr key={c.cmd}>\n            <td>\n              <span className=\"code\">{c.cmd}</span>\n            </td>\n            <td>\n              <Body2 color=\"secondary\">{c.does}</Body2>\n            </td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  </div>\n);\n\nexport const LinkingCommandsButton = (): ReactElement => {\n  const [open, setOpen] = useState(false);\n  const [tab, setTab] = useState<LcTab>(\"linking\");\n  const [branchLoading, setBranchLoading] = useState(true);\n  const [suggestedBranch, setSuggestedBranch] = useState<string | null>(null);\n\n  // Mock the suggest-branch-name API load: ~1s skeleton whenever the dialog\n  // opens, then reveal the copyable git command.\n  useEffect(() => {\n    if (!open) return undefined;\n    setBranchLoading(true);\n    setSuggestedBranch(null);\n    const timer = window.setTimeout(() => {\n      setSuggestedBranch(SUGGESTED_BRANCH);\n      setBranchLoading(false);\n    }, 1000);\n    return () => window.clearTimeout(timer);\n  }, [open]);\n\n  const openDialog = (): void => {\n    setTab(\"linking\");\n    setOpen(true);\n  };\n\n  return (\n    <>\n      <StyledButton type=\"button\" onClick={openDialog}>\n        <span className=\"lc-btn\">Linking and Commands</span>\n      </StyledButton>\n\n      <Dialog open={open} onClose={() => setOpen(false)} enableBackgroundClick>\n        <Dialog.Title disableDefaultHeading>\n          <StyledTitleRow>\n            <Header3>Linking and Commands</Header3>\n            <IconButton\n              type=\"button\"\n              variant=\"text gray\"\n              onClick={() => setOpen(false)}\n            >\n              <CancelCrossIcon />\n            </IconButton>\n          </StyledTitleRow>\n        </Dialog.Title>\n        <Dialog.ContentDivider />\n        <Dialog.Content>\n          <StyledBody>\n            <div className=\"lc-intro\">\n              <Body2>\n                Keep a task in sync with your code without leaving your editor.\n              </Body2>\n              <div className=\"lc-lead\">\n                <HashIcon />\n                <Body2 color=\"secondary\">\n                  <span className=\"lc-term\">Linking:</span> Mention a task in a\n                  branch, pull request, or commit and they will be connected\n                  automatically.\n                </Body2>\n              </div>\n              <div className=\"lc-lead\">\n                <CommandLineIcon />\n                <Body2 color=\"secondary\">\n                  <span className=\"lc-term\">Commands:</span> Add short\n                  instructions in a commit or pull request description to act on\n                  the task: log time, close it, or leave a comment.\n                </Body2>\n              </div>\n            </div>\n\n            <ChooseV2\n              className=\"lc-choosectl\"\n              options={TAB_OPTIONS}\n              selected={[tab]}\n              onChange={(ids) => setTab(ids[0] as LcTab)}\n            />\n\n            {tab === \"linking\" ? (\n              <LinkingTab loading={branchLoading} branch={suggestedBranch} />\n            ) : (\n              <CommandsTab />\n            )}\n          </StyledBody>\n        </Dialog.Content>\n      </Dialog>\n    </>\n  );\n};\n\nLinkingCommandsButton.displayName = \"LinkingCommandsButton\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"LinkingCommandsButton.js","names":["React","useEffect","useState","styled","Button","ChooseV2","Dialog","IconButton","CancelCrossIcon","CommandLineIcon","CopyIcon","HashIcon","SkeletonLoader","Tooltip","Body2","Caption1","Header3","SANS","MONO","TASK_ID","TASK_URL","SUGGESTED_BRANCH","shellQuote","value","replace","ACTION_WORDS","close","primary","example","description","aliases","COMMANDS","name","syntax","TABLE_ROWS","Object","values","map","word","key","command","format","EXAMPLE_COMMIT","TriggerButton","withConfig","displayName","componentId","StyledDialog","StyledTitleRow","div","StyledBody","StyledSnippet","TAB_OPTIONS","id","CopySnippet","_ref","code","_ref$hideCopyButton","hideCopyButton","_useState","copied","setCopied","copy","_navigator$clipboard","navigator","clipboard","writeText","window","setTimeout","createElement","title","type","className","onClick","style","border","background","cursor","padding","display","color","LinkingTab","_ref2","branchLoading","branch","CommandsTab","row","_row$aliases","Fragment","length","join","LinkingCommandsButton","_useState2","open","setOpen","_useState3","tab","setTab","_useState4","guideLoading","setGuideLoading","_useState5","setBranchLoading","_useState6","suggestedBranch","setSuggestedBranch","undefined","guideTimer","branchTimer","clearTimeout","openDialog","variant","size","onClose","enableBackgroundClick","Title","disableDefaultHeading","ContentDivider","Content","options","selected","onChange","ids"],"sources":["../../../../src/presentation/shared/LinkingCommandsButton.tsx"],"sourcesContent":["import React, { ReactElement, useEffect, useState } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { Button } from \"../../components/Button\";\nimport { ChooseV2, ChooseV2Option } from \"../../components/ChooseV2\";\nimport { Dialog } from \"../../components/Dialog\";\nimport { IconButton } from \"../../components/IconButton\";\nimport {\n  CancelCrossIcon,\n  CommandLineIcon,\n  CopyIcon,\n  HashIcon,\n} from \"../../components/Icons\";\nimport { SkeletonLoader } from \"../../components/Loaders\";\nimport { Tooltip } from \"../../components/Tooltip\";\nimport { Body2, Caption1, Header3 } from \"../../components/Typography\";\n\n/**\n * \"Linking and Commands\" button — a plain design-system secondary button (small,\n * rounded, no icon, no AI gradient: this is not an AI feature). Clicking it opens\n * a read-only reference dialog.\n *\n * This mock mirrors the shipped `activecollab-next` implementation\n * (`src/components/tasks/SourceCode/LinkingAndCommandsButton.jsx` +\n * `LinkingAndCommandsDialog.jsx`, task #457754): a 640px dialog with a short\n * pitch, a centered ChooseV2 to switch conventions (Linking default), and two\n * tabs. Linking shows the reference forms for this task and a copyable\n * `git checkout -b …` suggestion; Commands shows an API-shaped table of action\n * words and slash commands, plus a fixed example commit. Both the reference\n * guide and the suggested-branch request are represented by short skeleton\n * loads, the way the real dialog fetches them once it is opened.\n */\nconst SANS =\n  '-apple-system, BlinkMacSystemFont, \"Roboto\", \"Helvetica Neue\", Arial, sans-serif';\nconst MONO = \"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace\";\n\n/** The example task these instructions are written against. */\nconst TASK_ID = 4231;\n/** Task URL, in production built with `~/utils/urls` `getTaskUrl`. */\nconst TASK_URL = `https://app.activecollab.com/1/projects/2110/tasks/${TASK_ID}`;\n/**\n * Suggested branch name for this task — in production it is resolved per repo\n * via GET .../tasks/{task_id}/source/suggest-branch-name. Mocked here.\n */\nconst SUGGESTED_BRANCH = `ilija/${TASK_ID}-add-cacak-region-support`;\n\n/** POSIX-safe single-quote escaping for a value dropped into a shell command. */\nconst shellQuote = (value: string): string =>\n  `'${value.replace(/'/g, \"'\\\\''\")}'`;\n\n/* ------------------------------------------------------------------ */\n/* Reference-guide data — shaped like the GET .../source/reference-guide */\n/* payload the real dialog is driven by: a map of action words plus a    */\n/* flat list of slash commands. Descriptions are localised server-side;  */\n/* tokens and examples never translate.                                  */\n/* ------------------------------------------------------------------ */\n\ninterface ActionWord {\n  primary: string;\n  example: string;\n  description: string;\n  aliases?: string[];\n}\n\ninterface SlashCommand {\n  name: string;\n  syntax: string;\n  example: string;\n  description: string;\n  aliases?: string[];\n}\n\n/** Action words act on the linked task from a title, commit, or PR body. */\nconst ACTION_WORDS: Record<string, ActionWord> = {\n  close: {\n    primary: \"Close\",\n    example: `Close #${TASK_ID}`,\n    description: \"Closes the task when its pull request is merged.\",\n    aliases: [\"Closes\", \"Fixes\", \"Fixed\", \"Resolves\", \"Resolved\"],\n  },\n};\n\n/** Slash commands act on the task from a commit message or PR description. */\nconst COMMANDS: SlashCommand[] = [\n  {\n    name: \"spend\",\n    syntax: \"/spend {duration} [of {job type}]\",\n    example: \"/spend 1h 30m of Design\",\n    description: \"Logs the time you spent on the task.\",\n  },\n  {\n    name: \"estimate\",\n    syntax: \"/estimate {duration}\",\n    example: \"/estimate 4h\",\n    description: \"Sets the task's time estimate.\",\n  },\n  {\n    name: \"comment\",\n    syntax: \"/comment {text}\",\n    example: \"/comment Deployed to staging\",\n    description: \"Posts a comment on the task.\",\n  },\n  {\n    name: \"done\",\n    syntax: \"/done\",\n    example: \"/done\",\n    description: \"Marks the task complete.\",\n    aliases: [\"/complete\"],\n  },\n  {\n    name: \"reopen\",\n    syntax: \"/reopen\",\n    example: \"/reopen\",\n    description: \"Reopens a completed task.\",\n  },\n  {\n    name: \"assign\",\n    syntax: \"/assign @{member}\",\n    example: \"/assign @ilija\",\n    description: \"Assigns the task to a team member.\",\n  },\n  {\n    name: \"label\",\n    syntax: \"/label {name}\",\n    example: \"/label In Progress\",\n    description: \"Adds a label to the task.\",\n  },\n];\n\ninterface TableRow {\n  key: string;\n  example: string;\n  format?: string;\n  description: string;\n  aliases?: string[];\n}\n\n/** Action words first, then the slash commands — the shipped row order. */\nconst TABLE_ROWS: TableRow[] = [\n  ...Object.values(ACTION_WORDS).map((word) => ({\n    key: `action-${word.primary}`,\n    example: word.example,\n    description: word.description,\n    aliases: word.aliases,\n  })),\n  ...COMMANDS.map((command) => ({\n    key: `command-${command.name}`,\n    example: command.example,\n    format: command.syntax,\n    description: command.description,\n    aliases: command.aliases,\n  })),\n];\n\n/**\n * Illustrative commit message: closes the task on the subject line, logs time,\n * leaves a note. Fixed sample text — only the task id is interpolated, and\n * durations are printed verbatim (never reformatted).\n */\nconst EXAMPLE_COMMIT = `Fix ranks reset when a contract is archived, closes #${TASK_ID}\n\n/spend 1h 30m\n/comment Verified on staging, ranks hold after archive`;\n\n/* ------------------------------------------------------------------ */\n/* Trigger button — plain DS secondary button, rounded to the compact   */\n/* \"Suggest Subtasks\" shape (6px), no icon, no gradient.                 */\n/* ------------------------------------------------------------------ */\n\nconst TriggerButton = styled(Button)`\n  && {\n    border-radius: 6px;\n  }\n`;\n\n/** Wider than the default 540px dialog, matching the shipped 640px width. */\nconst StyledDialog = styled(Dialog)`\n  && {\n    width: 640px;\n    max-width: calc(100vw - 64px);\n  }\n`;\n\nconst StyledTitleRow = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n`;\n\nconst StyledBody = styled.div`\n  font-family: ${SANS};\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-height: 60vh;\n  overflow-y: auto;\n\n  /* Inline code chip — mirrors the app InlineCode (mono, theme-200 fill). */\n  .code {\n    font-family: ${MONO};\n    background: var(--color-theme-200);\n    color: var(--color-theme-900);\n    border-radius: 4px;\n    padding: 2px 6px;\n    font-size: 12px;\n  }\n\n  /* Bold, primary-coloured lead-in term inside a secondary body line. */\n  .lc-term {\n    font-weight: 600;\n    color: var(--color-theme-900);\n  }\n\n  /* Lead rows under the pitch. */\n  .lc-leads {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  .lc-lead {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n  }\n  .lc-lead svg {\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    margin-top: 2px;\n    color: var(--color-theme-600);\n  }\n\n  /* ChooseV2 root is passed .lc-choosectl; its inner flex row is centered. */\n  .lc-choosectl > div {\n    justify-content: center;\n  }\n\n  .lc-tabbody {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  }\n  .lc-commands {\n    gap: 16px;\n  }\n  .lc-block {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  .lc-list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin: 0;\n    padding-left: 20px;\n    list-style: disc;\n  }\n\n  /* Commands table — two-column grid, action words then slash commands. */\n  .lc-table {\n    display: grid;\n    grid-template-columns: max-content 1fr;\n    column-gap: 24px;\n  }\n  .lc-th {\n    padding-bottom: 8px;\n    border-bottom: 1px solid var(--border-primary);\n  }\n  .lc-td {\n    padding: 12px 0;\n    border-bottom: 1px solid var(--border-primary);\n  }\n  .lc-format {\n    display: block;\n    margin-top: 4px;\n    font-family: ${MONO};\n  }\n  .lc-aliases {\n    margin-top: 12px;\n  }\n\n  /* Loading skeletons for the reference guide and the suggested branch. */\n  .lc-skeleton {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n  .lc-skel {\n    border-radius: 6px;\n  }\n  .lc-skel-line {\n    height: 20px;\n  }\n  .lc-skel-block {\n    height: 36px;\n    width: 100%;\n  }\n  .lc-skel-2-3 {\n    width: 66%;\n  }\n  .lc-skel-1-2 {\n    width: 50%;\n  }\n  .lc-branch-skel {\n    width: 100%;\n    height: 36px;\n    border-radius: 6px;\n  }\n`;\n\n/* Copyable code snippet — mirrors the shared CopySnippet: a theme-200 <pre>\n   with a copy control that reveals on hover (hidden when hideCopyButton). */\nconst StyledSnippet = styled.div`\n  position: relative;\n\n  pre {\n    margin: 0;\n    background: var(--color-theme-200);\n    color: var(--color-theme-900);\n    border-radius: 6px;\n    padding: 12px 16px;\n    overflow-x: auto;\n    font-family: ${MONO};\n    font-size: 13px;\n    line-height: 1.5;\n  }\n  .lc-copy-btn {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n  }\n  &:hover .lc-copy-btn {\n    opacity: 1;\n  }\n  .lc-copy-btn svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\ntype LcTab = \"linking\" | \"commands\";\n\nconst TAB_OPTIONS: ChooseV2Option[] = [\n  { id: \"linking\", name: \"Linking\" },\n  { id: \"commands\", name: \"Commands\" },\n];\n\ninterface CopySnippetProps {\n  code: string;\n  hideCopyButton?: boolean;\n}\n\nconst CopySnippet = ({\n  code,\n  hideCopyButton = false,\n}: CopySnippetProps): ReactElement => {\n  const [copied, setCopied] = useState(false);\n\n  const copy = (): void => {\n    // eslint-disable-next-line compat/compat\n    void navigator.clipboard?.writeText(code);\n    setCopied(true);\n    window.setTimeout(() => setCopied(false), 1500);\n  };\n\n  return (\n    <StyledSnippet>\n      <pre>\n        <code>{code}</code>\n      </pre>\n      {!hideCopyButton && (\n        <Tooltip title={copied ? \"Copied!\" : \"Copy\"}>\n          <button\n            type=\"button\"\n            className=\"lc-copy-btn\"\n            onClick={copy}\n            aria-label=\"Copy command\"\n            style={{\n              border: \"none\",\n              background: \"transparent\",\n              cursor: \"pointer\",\n              padding: 4,\n              display: \"inline-flex\",\n              color: \"var(--color-theme-600)\",\n            }}\n          >\n            <CopyIcon />\n          </button>\n        </Tooltip>\n      )}\n    </StyledSnippet>\n  );\n};\n\ninterface LinkingTabProps {\n  branchLoading: boolean;\n  branch: string | null;\n}\n\nconst LinkingTab = ({\n  branchLoading,\n  branch,\n}: LinkingTabProps): ReactElement => {\n  const command = branch ? `git checkout -b ${shellQuote(branch)}` : \"\";\n\n  return (\n    <div className=\"lc-tabbody\">\n      <div className=\"lc-block\">\n        <Body2 color=\"secondary\">\n          Mention the task in your git activity and it links to this task on its\n          own:\n        </Body2>\n        <ul className=\"lc-list\">\n          <li>\n            <Body2 color=\"secondary\">\n              <span className=\"lc-term\">In a branch name:</span> the raw task ID{\" \"}\n              <span className=\"code\">{TASK_ID}</span>\n            </Body2>\n          </li>\n          <li>\n            <Body2 color=\"secondary\">\n              <span className=\"lc-term\">\n                In a title, commit message, or description:\n              </span>{\" \"}\n              <span className=\"code\">#{TASK_ID}</span> or{\" \"}\n              <span className=\"code\">AC-{TASK_ID}</span>\n            </Body2>\n          </li>\n          <li>\n            <Body2 color=\"secondary\">\n              <span className=\"lc-term\">Anywhere:</span> the task URL{\" \"}\n              <span className=\"code\">{TASK_URL}</span>\n            </Body2>\n          </li>\n        </ul>\n      </div>\n\n      {branchLoading || command ? (\n        <div className=\"lc-block\">\n          <Body2 color=\"secondary\">\n            Give the branch a name with the task number in it and it links the\n            moment you push. Create one from the suggested name:\n          </Body2>\n          {branchLoading ? (\n            <SkeletonLoader className=\"lc-branch-skel\" />\n          ) : (\n            <CopySnippet code={command} />\n          )}\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nconst CommandsTab = (): ReactElement => (\n  <div className=\"lc-tabbody lc-commands\">\n    <Body2 color=\"secondary\">\n      The table below lists action words and slash commands that you can use in\n      a commit message or a pull request description to act on the linked task.\n      Example:\n    </Body2>\n    <CopySnippet code={EXAMPLE_COMMIT} hideCopyButton />\n    <div className=\"lc-table\">\n      <Caption1 color=\"tertiary\" className=\"lc-th\">\n        Command\n      </Caption1>\n      <Caption1 color=\"tertiary\" className=\"lc-th\">\n        What it does\n      </Caption1>\n      {TABLE_ROWS.map((row) => (\n        <React.Fragment key={row.key}>\n          <div className=\"lc-td\">\n            <span className=\"code\">{row.example}</span>\n            {row.format ? (\n              <Caption1 color=\"tertiary\" className=\"lc-format\">\n                {row.format}\n              </Caption1>\n            ) : null}\n          </div>\n          <div className=\"lc-td\">\n            <Body2 color=\"secondary\">{row.description}</Body2>\n            {row.aliases?.length ? (\n              <Body2 color=\"secondary\" className=\"lc-aliases\">\n                Aliases: {row.aliases.join(\", \")}\n              </Body2>\n            ) : null}\n          </div>\n        </React.Fragment>\n      ))}\n    </div>\n  </div>\n);\n\nexport const LinkingCommandsButton = (): ReactElement => {\n  const [open, setOpen] = useState(false);\n  const [tab, setTab] = useState<LcTab>(\"linking\");\n  const [guideLoading, setGuideLoading] = useState(true);\n  const [branchLoading, setBranchLoading] = useState(true);\n  const [suggestedBranch, setSuggestedBranch] = useState<string | null>(null);\n\n  // Mock the two endpoint loads the real dialog fires once it opens: the\n  // reference guide resolves first (~0.6s), then the suggested branch name\n  // (~1.1s), each showing its own skeleton until it lands.\n  useEffect(() => {\n    if (!open) return undefined;\n    setGuideLoading(true);\n    setBranchLoading(true);\n    setSuggestedBranch(null);\n    const guideTimer = window.setTimeout(() => setGuideLoading(false), 600);\n    const branchTimer = window.setTimeout(() => {\n      setSuggestedBranch(SUGGESTED_BRANCH);\n      setBranchLoading(false);\n    }, 1100);\n    return () => {\n      window.clearTimeout(guideTimer);\n      window.clearTimeout(branchTimer);\n    };\n  }, [open]);\n\n  const openDialog = (): void => {\n    setTab(\"linking\");\n    setOpen(true);\n  };\n\n  return (\n    <>\n      <TriggerButton\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"small\"\n        onClick={openDialog}\n      >\n        Linking and Commands\n      </TriggerButton>\n\n      <StyledDialog\n        open={open}\n        onClose={() => setOpen(false)}\n        enableBackgroundClick\n      >\n        <Dialog.Title disableDefaultHeading>\n          <StyledTitleRow>\n            <Header3>Linking and Commands</Header3>\n            <IconButton\n              type=\"button\"\n              variant=\"text gray\"\n              aria-label=\"Close\"\n              onClick={() => setOpen(false)}\n            >\n              <CancelCrossIcon />\n            </IconButton>\n          </StyledTitleRow>\n        </Dialog.Title>\n        <Dialog.ContentDivider />\n        <Dialog.Content>\n          <StyledBody>\n            {guideLoading ? (\n              <div className=\"lc-skeleton\">\n                <SkeletonLoader className=\"lc-skel lc-skel-line lc-skel-2-3\" />\n                <SkeletonLoader className=\"lc-skel lc-skel-block\" />\n                <SkeletonLoader className=\"lc-skel lc-skel-block\" />\n                <SkeletonLoader className=\"lc-skel lc-skel-line lc-skel-1-2\" />\n              </div>\n            ) : (\n              <>\n                <Body2>\n                  Keep a task in sync with your code without leaving your\n                  editor.\n                </Body2>\n                <div className=\"lc-leads\">\n                  <div className=\"lc-lead\">\n                    <HashIcon />\n                    <Body2 color=\"secondary\">\n                      <span className=\"lc-term\">Linking:</span> Mention a task\n                      in a branch, pull request, or commit and they will be\n                      connected automatically.\n                    </Body2>\n                  </div>\n                  <div className=\"lc-lead\">\n                    <CommandLineIcon />\n                    <Body2 color=\"secondary\">\n                      <span className=\"lc-term\">Commands:</span> Add short\n                      instructions in a commit or pull request description to\n                      act on the task: log time, close it, or leave a comment.\n                    </Body2>\n                  </div>\n                </div>\n\n                <ChooseV2\n                  className=\"lc-choosectl\"\n                  options={TAB_OPTIONS}\n                  selected={[tab]}\n                  onChange={(ids) => setTab(ids[0] as LcTab)}\n                />\n\n                {tab === \"linking\" ? (\n                  <LinkingTab\n                    branchLoading={branchLoading}\n                    branch={suggestedBranch}\n                  />\n                ) : (\n                  <CommandsTab />\n                )}\n              </>\n            )}\n          </StyledBody>\n        </Dialog.Content>\n      </StyledDialog>\n    </>\n  );\n};\n\nLinkingCommandsButton.displayName = \"LinkingCommandsButton\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAkBC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAEhE,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,QAAQ,QAAwB,2BAA2B;AACpE,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,UAAU,QAAQ,6BAA6B;AACxD,SACEC,eAAe,EACfC,eAAe,EACfC,QAAQ,EACRC,QAAQ,QACH,wBAAwB;AAC/B,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,OAAO,QAAQ,0BAA0B;AAClD,SAASC,KAAK,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,6BAA6B;;AAEtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,IAAI,GACR,kFAAkF;AACpF,MAAMC,IAAI,GAAG,0DAA0D;;AAEvE;AACA,MAAMC,OAAO,GAAG,IAAI;AACpB;AACA,MAAMC,QAAQ,2DAAyDD,OAAS;AAChF;AACA;AACA;AACA;AACA,MAAME,gBAAgB,cAAYF,OAAO,8BAA2B;;AAEpE;AACA,MAAMG,UAAU,GAAIC,KAAa,UAC3BA,KAAK,CAACC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,MAAG;;AAErC;AACA;AACA;AACA;AACA;AACA;;AAiBA;AACA,MAAMC,YAAwC,GAAG;EAC/CC,KAAK,EAAE;IACLC,OAAO,EAAE,OAAO;IAChBC,OAAO,cAAYT,OAAS;IAC5BU,WAAW,EAAE,kDAAkD;IAC/DC,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU;EAC9D;AACF,CAAC;;AAED;AACA,MAAMC,QAAwB,GAAG,CAC/B;EACEC,IAAI,EAAE,OAAO;EACbC,MAAM,EAAE,mCAAmC;EAC3CL,OAAO,EAAE,yBAAyB;EAClCC,WAAW,EAAE;AACf,CAAC,EACD;EACEG,IAAI,EAAE,UAAU;EAChBC,MAAM,EAAE,sBAAsB;EAC9BL,OAAO,EAAE,cAAc;EACvBC,WAAW,EAAE;AACf,CAAC,EACD;EACEG,IAAI,EAAE,SAAS;EACfC,MAAM,EAAE,iBAAiB;EACzBL,OAAO,EAAE,8BAA8B;EACvCC,WAAW,EAAE;AACf,CAAC,EACD;EACEG,IAAI,EAAE,MAAM;EACZC,MAAM,EAAE,OAAO;EACfL,OAAO,EAAE,OAAO;EAChBC,WAAW,EAAE,0BAA0B;EACvCC,OAAO,EAAE,CAAC,WAAW;AACvB,CAAC,EACD;EACEE,IAAI,EAAE,QAAQ;EACdC,MAAM,EAAE,SAAS;EACjBL,OAAO,EAAE,SAAS;EAClBC,WAAW,EAAE;AACf,CAAC,EACD;EACEG,IAAI,EAAE,QAAQ;EACdC,MAAM,EAAE,mBAAmB;EAC3BL,OAAO,EAAE,gBAAgB;EACzBC,WAAW,EAAE;AACf,CAAC,EACD;EACEG,IAAI,EAAE,OAAO;EACbC,MAAM,EAAE,eAAe;EACvBL,OAAO,EAAE,oBAAoB;EAC7BC,WAAW,EAAE;AACf,CAAC,CACF;AAUD;AACA,MAAMK,UAAsB,GAAG,CAC7B,GAAGC,MAAM,CAACC,MAAM,CAACX,YAAY,CAAC,CAACY,GAAG,CAAEC,IAAI,KAAM;EAC5CC,GAAG,cAAYD,IAAI,CAACX,OAAS;EAC7BC,OAAO,EAAEU,IAAI,CAACV,OAAO;EACrBC,WAAW,EAAES,IAAI,CAACT,WAAW;EAC7BC,OAAO,EAAEQ,IAAI,CAACR;AAChB,CAAC,CAAC,CAAC,EACH,GAAGC,QAAQ,CAACM,GAAG,CAAEG,OAAO,KAAM;EAC5BD,GAAG,eAAaC,OAAO,CAACR,IAAM;EAC9BJ,OAAO,EAAEY,OAAO,CAACZ,OAAO;EACxBa,MAAM,EAAED,OAAO,CAACP,MAAM;EACtBJ,WAAW,EAAEW,OAAO,CAACX,WAAW;EAChCC,OAAO,EAAEU,OAAO,CAACV;AACnB,CAAC,CAAC,CAAC,CACJ;;AAED;AACA;AACA;AACA;AACA;AACA,MAAMY,cAAc,6DAA2DvB,OAAO,8EAG/B;;AAEvD;AACA;AACA;AACA;;AAEA,MAAMwB,aAAa,GAAGxC,MAAM,CAACC,MAAM,CAAC,CAAAwC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8BAInC;;AAED;AACA,MAAMC,YAAY,GAAG5C,MAAM,CAACG,MAAM,CAAC,CAAAsC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qDAKlC;AAED,MAAME,cAAc,GAAG7C,MAAM,CAAC8C,GAAG,CAAAL,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+EAKhC;AAED,MAAMI,UAAU,GAAG/C,MAAM,CAAC8C,GAAG,CAAAL,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uzCACZ7B,IAAI,EASFC,IAAI,EA6EJA,IAAI,CAiCtB;;AAED;AACA;AACA,MAAMiC,aAAa,GAAGhD,MAAM,CAAC8C,GAAG,CAAAL,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+WAUb5B,IAAI,CAkBtB;AAID,MAAMkC,WAA6B,GAAG,CACpC;EAAEC,EAAE,EAAE,SAAS;EAAErB,IAAI,EAAE;AAAU,CAAC,EAClC;EAAEqB,EAAE,EAAE,UAAU;EAAErB,IAAI,EAAE;AAAW,CAAC,CACrC;AAOD,MAAMsB,WAAW,GAAGC,IAAA,IAGkB;EAAA,IAFpCC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAAC,mBAAA,GAAAF,IAAA,CACJG,cAAc;IAAdA,cAAc,GAAAD,mBAAA,cAAG,KAAK,GAAAA,mBAAA;EAEtB,MAAAE,SAAA,GAA4BzD,QAAQ,CAAC,KAAK,CAAC;IAApC0D,MAAM,GAAAD,SAAA;IAAEE,SAAS,GAAAF,SAAA;EAExB,MAAMG,IAAI,GAAGA,CAAA,KAAY;IAAA,IAAAC,oBAAA;IACvB;IACA,OAAAA,oBAAA,GAAKC,SAAS,CAACC,SAAS,qBAAnBF,oBAAA,CAAqBG,SAAS,CAACV,IAAI,CAAC;IACzCK,SAAS,CAAC,IAAI,CAAC;IACfM,MAAM,CAACC,UAAU,CAAC,MAAMP,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;EACjD,CAAC;EAED,oBACE7D,KAAA,CAAAqE,aAAA,CAAClB,aAAa,qBACZnD,KAAA,CAAAqE,aAAA,2BACErE,KAAA,CAAAqE,aAAA,eAAOb,IAAW,CACf,CAAC,EACL,CAACE,cAAc,iBACd1D,KAAA,CAAAqE,aAAA,CAACxD,OAAO;IAACyD,KAAK,EAAEV,MAAM,GAAG,SAAS,GAAG;EAAO,gBAC1C5D,KAAA,CAAAqE,aAAA;IACEE,IAAI,EAAC,QAAQ;IACbC,SAAS,EAAC,aAAa;IACvBC,OAAO,EAAEX,IAAK;IACd,cAAW,cAAc;IACzBY,KAAK,EAAE;MACLC,MAAM,EAAE,MAAM;MACdC,UAAU,EAAE,aAAa;MACzBC,MAAM,EAAE,SAAS;MACjBC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE,aAAa;MACtBC,KAAK,EAAE;IACT;EAAE,gBAEFhF,KAAA,CAAAqE,aAAA,CAAC3D,QAAQ,MAAE,CACL,CACD,CAEE,CAAC;AAEpB,CAAC;AAOD,MAAMuE,UAAU,GAAGC,KAAA,IAGkB;EAAA,IAFnCC,aAAa,GAAAD,KAAA,CAAbC,aAAa;IACbC,MAAM,GAAAF,KAAA,CAANE,MAAM;EAEN,MAAM5C,OAAO,GAAG4C,MAAM,wBAAsB9D,UAAU,CAAC8D,MAAM,CAAC,GAAK,EAAE;EAErE,oBACEpF,KAAA,CAAAqE,aAAA;IAAKG,SAAS,EAAC;EAAY,gBACzBxE,KAAA,CAAAqE,aAAA;IAAKG,SAAS,EAAC;EAAU,gBACvBxE,KAAA,CAAAqE,aAAA,CAACvD,KAAK;IAACkE,KAAK,EAAC;EAAW,GAAC,6EAGlB,CAAC,eACRhF,KAAA,CAAAqE,aAAA;IAAIG,SAAS,EAAC;EAAS,gBACrBxE,KAAA,CAAAqE,aAAA,0BACErE,KAAA,CAAAqE,aAAA,CAACvD,KAAK;IAACkE,KAAK,EAAC;EAAW,gBACtBhF,KAAA,CAAAqE,aAAA;IAAMG,SAAS,EAAC;EAAS,GAAC,mBAAuB,CAAC,oBAAgB,EAAC,GAAG,eACtExE,KAAA,CAAAqE,aAAA;IAAMG,SAAS,EAAC;EAAM,GAAErD,OAAc,CACjC,CACL,CAAC,eACLnB,KAAA,CAAAqE,aAAA,0BACErE,KAAA,CAAAqE,aAAA,CAACvD,KAAK;IAACkE,KAAK,EAAC;EAAW,gBACtBhF,KAAA,CAAAqE,aAAA;IAAMG,SAAS,EAAC;EAAS,GAAC,6CAEpB,CAAC,EAAC,GAAG,eACXxE,KAAA,CAAAqE,aAAA;IAAMG,SAAS,EAAC;EAAM,GAAC,GAAC,EAACrD,OAAc,CAAC,OAAG,EAAC,GAAG,eAC/CnB,KAAA,CAAAqE,aAAA;IAAMG,SAAS,EAAC;EAAM,GAAC,KAAG,EAACrD,OAAc,CACpC,CACL,CAAC,eACLnB,KAAA,CAAAqE,aAAA,0BACErE,KAAA,CAAAqE,aAAA,CAACvD,KAAK;IAACkE,KAAK,EAAC;EAAW,gBACtBhF,KAAA,CAAAqE,aAAA;IAAMG,SAAS,EAAC;EAAS,GAAC,WAAe,CAAC,iBAAa,EAAC,GAAG,eAC3DxE,KAAA,CAAAqE,aAAA;IAAMG,SAAS,EAAC;EAAM,GAAEpD,QAAe,CAClC,CACL,CACF,CACD,CAAC,EAEL+D,aAAa,IAAI3C,OAAO,gBACvBxC,KAAA,CAAAqE,aAAA;IAAKG,SAAS,EAAC;EAAU,gBACvBxE,KAAA,CAAAqE,aAAA,CAACvD,KAAK;IAACkE,KAAK,EAAC;EAAW,GAAC,yHAGlB,CAAC,EACPG,aAAa,gBACZnF,KAAA,CAAAqE,aAAA,CAACzD,cAAc;IAAC4D,SAAS,EAAC;EAAgB,CAAE,CAAC,gBAE7CxE,KAAA,CAAAqE,aAAA,CAACf,WAAW;IAACE,IAAI,EAAEhB;EAAQ,CAAE,CAE5B,CAAC,GACJ,IACD,CAAC;AAEV,CAAC;AAED,MAAM6C,WAAW,GAAGA,CAAA,kBAClBrF,KAAA,CAAAqE,aAAA;EAAKG,SAAS,EAAC;AAAwB,gBACrCxE,KAAA,CAAAqE,aAAA,CAACvD,KAAK;EAACkE,KAAK,EAAC;AAAW,GAAC,8JAIlB,CAAC,eACRhF,KAAA,CAAAqE,aAAA,CAACf,WAAW;EAACE,IAAI,EAAEd,cAAe;EAACgB,cAAc;AAAA,CAAE,CAAC,eACpD1D,KAAA,CAAAqE,aAAA;EAAKG,SAAS,EAAC;AAAU,gBACvBxE,KAAA,CAAAqE,aAAA,CAACtD,QAAQ;EAACiE,KAAK,EAAC,UAAU;EAACR,SAAS,EAAC;AAAO,GAAC,SAEnC,CAAC,eACXxE,KAAA,CAAAqE,aAAA,CAACtD,QAAQ;EAACiE,KAAK,EAAC,UAAU;EAACR,SAAS,EAAC;AAAO,GAAC,cAEnC,CAAC,EACVtC,UAAU,CAACG,GAAG,CAAEiD,GAAG;EAAA,IAAAC,YAAA;EAAA,oBAClBvF,KAAA,CAAAqE,aAAA,CAACrE,KAAK,CAACwF,QAAQ;IAACjD,GAAG,EAAE+C,GAAG,CAAC/C;EAAI,gBAC3BvC,KAAA,CAAAqE,aAAA;IAAKG,SAAS,EAAC;EAAO,gBACpBxE,KAAA,CAAAqE,aAAA;IAAMG,SAAS,EAAC;EAAM,GAAEc,GAAG,CAAC1D,OAAc,CAAC,EAC1C0D,GAAG,CAAC7C,MAAM,gBACTzC,KAAA,CAAAqE,aAAA,CAACtD,QAAQ;IAACiE,KAAK,EAAC,UAAU;IAACR,SAAS,EAAC;EAAW,GAC7Cc,GAAG,CAAC7C,MACG,CAAC,GACT,IACD,CAAC,eACNzC,KAAA,CAAAqE,aAAA;IAAKG,SAAS,EAAC;EAAO,gBACpBxE,KAAA,CAAAqE,aAAA,CAACvD,KAAK;IAACkE,KAAK,EAAC;EAAW,GAAEM,GAAG,CAACzD,WAAmB,CAAC,EACjD,CAAA0D,YAAA,GAAAD,GAAG,CAACxD,OAAO,aAAXyD,YAAA,CAAaE,MAAM,gBAClBzF,KAAA,CAAAqE,aAAA,CAACvD,KAAK;IAACkE,KAAK,EAAC,WAAW;IAACR,SAAS,EAAC;EAAY,GAAC,WACrC,EAACc,GAAG,CAACxD,OAAO,CAAC4D,IAAI,CAAC,IAAI,CAC1B,CAAC,GACN,IACD,CACS,CAAC;AAAA,CAClB,CACE,CACF,CACN;AAED,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KAAoB;EACvD,MAAAC,UAAA,GAAwB1F,QAAQ,CAAC,KAAK,CAAC;IAAhC2F,IAAI,GAAAD,UAAA;IAAEE,OAAO,GAAAF,UAAA;EACpB,MAAAG,UAAA,GAAsB7F,QAAQ,CAAQ,SAAS,CAAC;IAAzC8F,GAAG,GAAAD,UAAA;IAAEE,MAAM,GAAAF,UAAA;EAClB,MAAAG,UAAA,GAAwChG,QAAQ,CAAC,IAAI,CAAC;IAA/CiG,YAAY,GAAAD,UAAA;IAAEE,eAAe,GAAAF,UAAA;EACpC,MAAAG,UAAA,GAA0CnG,QAAQ,CAAC,IAAI,CAAC;IAAjDiF,aAAa,GAAAkB,UAAA;IAAEC,gBAAgB,GAAAD,UAAA;EACtC,MAAAE,UAAA,GAA8CrG,QAAQ,CAAgB,IAAI,CAAC;IAApEsG,eAAe,GAAAD,UAAA;IAAEE,kBAAkB,GAAAF,UAAA;;EAE1C;EACA;EACA;EACAtG,SAAS,CAAC,MAAM;IACd,IAAI,CAAC4F,IAAI,EAAE,OAAOa,SAAS;IAC3BN,eAAe,CAAC,IAAI,CAAC;IACrBE,gBAAgB,CAAC,IAAI,CAAC;IACtBG,kBAAkB,CAAC,IAAI,CAAC;IACxB,MAAME,UAAU,GAAGxC,MAAM,CAACC,UAAU,CAAC,MAAMgC,eAAe,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC;IACvE,MAAMQ,WAAW,GAAGzC,MAAM,CAACC,UAAU,CAAC,MAAM;MAC1CqC,kBAAkB,CAACpF,gBAAgB,CAAC;MACpCiF,gBAAgB,CAAC,KAAK,CAAC;IACzB,CAAC,EAAE,IAAI,CAAC;IACR,OAAO,MAAM;MACXnC,MAAM,CAAC0C,YAAY,CAACF,UAAU,CAAC;MAC/BxC,MAAM,CAAC0C,YAAY,CAACD,WAAW,CAAC;IAClC,CAAC;EACH,CAAC,EAAE,CAACf,IAAI,CAAC,CAAC;EAEV,MAAMiB,UAAU,GAAGA,CAAA,KAAY;IAC7Bb,MAAM,CAAC,SAAS,CAAC;IACjBH,OAAO,CAAC,IAAI,CAAC;EACf,CAAC;EAED,oBACE9F,KAAA,CAAAqE,aAAA,CAAArE,KAAA,CAAAwF,QAAA,qBACExF,KAAA,CAAAqE,aAAA,CAAC1B,aAAa;IACZ4B,IAAI,EAAC,QAAQ;IACbwC,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAC,OAAO;IACZvC,OAAO,EAAEqC;EAAW,GACrB,sBAEc,CAAC,eAEhB9G,KAAA,CAAAqE,aAAA,CAACtB,YAAY;IACX8C,IAAI,EAAEA,IAAK;IACXoB,OAAO,EAAEA,CAAA,KAAMnB,OAAO,CAAC,KAAK,CAAE;IAC9BoB,qBAAqB;EAAA,gBAErBlH,KAAA,CAAAqE,aAAA,CAAC/D,MAAM,CAAC6G,KAAK;IAACC,qBAAqB;EAAA,gBACjCpH,KAAA,CAAAqE,aAAA,CAACrB,cAAc,qBACbhD,KAAA,CAAAqE,aAAA,CAACrD,OAAO,QAAC,sBAA6B,CAAC,eACvChB,KAAA,CAAAqE,aAAA,CAAC9D,UAAU;IACTgE,IAAI,EAAC,QAAQ;IACbwC,OAAO,EAAC,WAAW;IACnB,cAAW,OAAO;IAClBtC,OAAO,EAAEA,CAAA,KAAMqB,OAAO,CAAC,KAAK;EAAE,gBAE9B9F,KAAA,CAAAqE,aAAA,CAAC7D,eAAe,MAAE,CACR,CACE,CACJ,CAAC,eACfR,KAAA,CAAAqE,aAAA,CAAC/D,MAAM,CAAC+G,cAAc,MAAE,CAAC,eACzBrH,KAAA,CAAAqE,aAAA,CAAC/D,MAAM,CAACgH,OAAO,qBACbtH,KAAA,CAAAqE,aAAA,CAACnB,UAAU,QACRiD,YAAY,gBACXnG,KAAA,CAAAqE,aAAA;IAAKG,SAAS,EAAC;EAAa,gBAC1BxE,KAAA,CAAAqE,aAAA,CAACzD,cAAc;IAAC4D,SAAS,EAAC;EAAkC,CAAE,CAAC,eAC/DxE,KAAA,CAAAqE,aAAA,CAACzD,cAAc;IAAC4D,SAAS,EAAC;EAAuB,CAAE,CAAC,eACpDxE,KAAA,CAAAqE,aAAA,CAACzD,cAAc;IAAC4D,SAAS,EAAC;EAAuB,CAAE,CAAC,eACpDxE,KAAA,CAAAqE,aAAA,CAACzD,cAAc;IAAC4D,SAAS,EAAC;EAAkC,CAAE,CAC3D,CAAC,gBAENxE,KAAA,CAAAqE,aAAA,CAAArE,KAAA,CAAAwF,QAAA,qBACExF,KAAA,CAAAqE,aAAA,CAACvD,KAAK,QAAC,iEAGA,CAAC,eACRd,KAAA,CAAAqE,aAAA;IAAKG,SAAS,EAAC;EAAU,gBACvBxE,KAAA,CAAAqE,aAAA;IAAKG,SAAS,EAAC;EAAS,gBACtBxE,KAAA,CAAAqE,aAAA,CAAC1D,QAAQ,MAAE,CAAC,eACZX,KAAA,CAAAqE,aAAA,CAACvD,KAAK;IAACkE,KAAK,EAAC;EAAW,gBACtBhF,KAAA,CAAAqE,aAAA;IAAMG,SAAS,EAAC;EAAS,GAAC,UAAc,CAAC,kGAGpC,CACJ,CAAC,eACNxE,KAAA,CAAAqE,aAAA;IAAKG,SAAS,EAAC;EAAS,gBACtBxE,KAAA,CAAAqE,aAAA,CAAC5D,eAAe,MAAE,CAAC,eACnBT,KAAA,CAAAqE,aAAA,CAACvD,KAAK;IAACkE,KAAK,EAAC;EAAW,gBACtBhF,KAAA,CAAAqE,aAAA;IAAMG,SAAS,EAAC;EAAS,GAAC,WAAe,CAAC,+HAGrC,CACJ,CACF,CAAC,eAENxE,KAAA,CAAAqE,aAAA,CAAChE,QAAQ;IACPmE,SAAS,EAAC,cAAc;IACxB+C,OAAO,EAAEnE,WAAY;IACrBoE,QAAQ,EAAE,CAACxB,GAAG,CAAE;IAChByB,QAAQ,EAAGC,GAAG,IAAKzB,MAAM,CAACyB,GAAG,CAAC,CAAC,CAAU;EAAE,CAC5C,CAAC,EAED1B,GAAG,KAAK,SAAS,gBAChBhG,KAAA,CAAAqE,aAAA,CAACY,UAAU;IACTE,aAAa,EAAEA,aAAc;IAC7BC,MAAM,EAAEoB;EAAgB,CACzB,CAAC,gBAEFxG,KAAA,CAAAqE,aAAA,CAACgB,WAAW,MAAE,CAEhB,CAEM,CACE,CACJ,CACd,CAAC;AAEP,CAAC;AAEDM,qBAAqB,CAAC9C,WAAW,GAAG,uBAAuB","ignoreList":[]}

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

@@ -89,8 +89,19 @@ declare const CompletedHeader: ({ expanded, count, onToggle, }: {
     onToggle: () => void;
 }) => ReactElement;
 type SectionVariant = "mix" | "open" | "completed";
-declare const SourceCodeSection: ({ variant, }: {
+declare const SourceCodeSection: ({ variant, issues, code, showHeader, showLink, flush, }: {
     variant?: SectionVariant;
+    /** Optional per-task data. Defaults to the built-in demo mix so the existing
+        Task Source stories are unchanged. The Tasks List column passes a task's
+        own linked elements so the dialog matches the row. */
+    issues?: IssueEntry[];
+    code?: CodeEntry[];
+    /** The dialog gives its own "Source Code" title, so it hides this header. */
+    showHeader?: boolean;
+    /** The read-only Source Code dialog hides the "Link" action. */
+    showLink?: boolean;
+    /** Remove the section's outer spacing and bottom rule (used in the dialog). */
+    flush?: boolean;
 }) => ReactElement;
 export type { StageState, Stage, HistoryEvent, IssueEntry, CodeStatus, CodeEntry, SectionVariant, };
 export { Spine, HistoryDialog, IssueRow, CodeRow, CompletedHeader, SourceCodeSection, };

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

@@ -1 +1 @@
-{"version":3,"file":"SourceCodeSection.d.ts","sourceRoot":"","sources":["../../../../src/presentation/shared/SourceCodeSection.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SourceCodeSection.d.ts","sourceRoot":"","sources":["../../../../src/presentation/shared/SourceCodeSection.tsx"],"names":[],"mappings":"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"}