@flanksource/clicky-ui 0.3.35 → 0.3.37

package/dist/ai.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const agentActionIcons = require("./data/ai/agent-action-icons.cjs");
+const AdvancedChatConfig = require("./data/ai/AdvancedChatConfig.cjs");
 const sessionCategories = require("./data/ai/session-categories.cjs");
 const claudeComplete = require("./data/ai/examples/sessions/claude-complete.cjs");
 const types = require("./data/chat/types.cjs");
@@ -30,10 +31,12 @@ const index$1 = require("./data/ai/PromptRunEditor/index.cjs");
 const PromptSourceBadge = require("./data/ai/PromptCatalog/PromptSourceBadge.cjs");
 const PromptSourceRepair = require("./data/ai/PromptPicker/PromptSourceRepair.cjs");
 const ProviderStatusPanel = require("./data/runtime/ProviderStatusPanel.cjs");
+const model = require("./data/ai/PromptRunEditor/model.cjs");
 const runtimeProfile = require("./data/ai/runtime-profile.cjs");
 const ResolutionInspector = require("./data/ai/runtime-profiles/ResolutionInspector.cjs");
 const ResolutionTrace = require("./data/ai/runtime-profiles/ResolutionTrace.cjs");
 const RuntimeBar = require("./data/runtime/RuntimeBar.cjs");
+const RuntimeBarActions = require("./data/runtime/RuntimeBarActions.cjs");
 const RuntimeLibraryList = require("./data/ai/runtime-profiles/RuntimeLibraryList.cjs");
 const RuntimeModePicker = require("./data/ai/RuntimeModePicker.cjs");
 const RuntimeProfilePicker = require("./data/ai/runtime-profiles/RuntimeProfilePicker.cjs");
@@ -44,6 +47,7 @@ const SpecRuntimeEditor_model = require("./data/ai/SpecRuntimeEditor.model.cjs")
 const SpecRuntimeEditor_sandboxModel = require("./data/ai/SpecRuntimeEditor.sandbox-model.cjs");
 const runtimeMode = require("./data/runtime/runtime-mode.cjs");
 const runtimeFamily = require("./lib/runtime-family.cjs");
+const types$1 = require("./data/ai/SpecRuntimeEditor/types.cjs");
 const SandboxConnectionsSection = require("./data/ai/SandboxConnectionsSection.cjs");
 const SandboxCreateWizard = require("./data/ai/SandboxCreateWizard.cjs");
 const ToolSchemaBrowser = require("./data/ai/ToolSchemaBrowser.cjs");
@@ -55,6 +59,7 @@ const SessionViewer = require("./data/ai/SessionViewer.cjs");
 const index$2 = require("./data/ai/SpecRuntimeEditor/index.cjs");
 const ThreadPicker = require("./data/ai/ThreadPicker.cjs");
 const ToolPreferences = require("./data/ai/ToolPreferences.cjs");
+const unspecified = require("./data/runtime/unspecified.cjs");
 const toolPolicy = require("./data/chat/tool-policy.cjs");
 const runtimeProfileModel = require("./lib/runtime-profile-model.cjs");
 const SandboxCreateWizard_model = require("./data/ai/SandboxCreateWizard.model.cjs");
@@ -65,21 +70,24 @@ const sessionCost = require("./data/ai/session-cost.cjs");
 const ToolPreferences_model = require("./data/ai/ToolPreferences.model.cjs");
 const modelCapabilities = require("./data/runtime/model-capabilities.cjs");
 const SessionViewer_model = require("./data/ai/SessionViewer.model.cjs");
-const types$1 = require("./data/ai/PromptPicker/types.cjs");
+const types$2 = require("./data/ai/PromptPicker/types.cjs");
 const context = require("./data/ai/context.cjs");
 const chatWindowContext = require("./data/ai/chat-window-context.cjs");
+const yaml = require("./data/ai/PromptRunEditor/yaml.cjs");
+const SessionInspector_approvalsModel = require("./data/ai/SessionInspector.approvals-model.cjs");
 const promptRuntime = require("./data/ai/PromptPicker/prompt-runtime.cjs");
 const SessionViewer_input = require("./data/ai/SessionViewer.input.cjs");
 const useRuntimeFamilies = require("./data/ai/runtime-profiles/use-runtime-families.cjs");
 const usePermissionCatalog = require("./data/ai/runtime-profiles/use-permission-catalog.cjs");
-const useRuntimeProfilePicker = require("./data/ai/runtime-profiles/use-runtime-profile-picker.cjs");
 const useResolution = require("./data/ai/runtime-profiles/use-resolution.cjs");
+const useRuntimeProfilePicker = require("./data/ai/runtime-profiles/use-runtime-profile-picker.cjs");
 exports.AGENT_RUNTIME_ICONS = agentActionIcons.AGENT_RUNTIME_ICONS;
 exports.APPROVAL_ICONS = agentActionIcons.APPROVAL_ICONS;
 exports.EFFORT_ICONS = agentActionIcons.EFFORT_ICONS;
 exports.PERMISSION_MODE_ICONS = agentActionIcons.PERMISSION_MODE_ICONS;
 exports.WORKFLOW_PHASES = agentActionIcons.WORKFLOW_PHASES;
 exports.effortIcon = agentActionIcons.effortIcon;
+exports.AdvancedChatConfig = AdvancedChatConfig.AdvancedChatConfig;
 exports.CATEGORY_ICONS = sessionCategories.CATEGORY_ICONS;
 exports.CATEGORY_LABELS = sessionCategories.CATEGORY_LABELS;
 exports.classifyCommand = sessionCategories.classifyCommand;
@@ -121,12 +129,16 @@ exports.PromptRunEditor = index$1.PromptRunEditor;
 exports.PromptSourceBadge = PromptSourceBadge.PromptSourceBadge;
 exports.PromptSourceRepair = PromptSourceRepair.PromptSourceRepair;
 exports.ProviderStatusPanel = ProviderStatusPanel.ProviderStatusPanel;
+exports.RECENT_RUNTIME_LIMIT = model.RECENT_RUNTIME_LIMIT;
+exports.recordRecentRuntimes = model.recordRecentRuntimes;
+exports.runtimeRows = model.runtimeRows;
 exports.RUNTIME_PROFILE_SCOPES = runtimeProfile.RUNTIME_PROFILE_SCOPES;
 exports.assertRuntimePresetSpec = runtimeProfile.assertRuntimePresetSpec;
 exports.projectRuntimePresetSpec = runtimeProfile.projectRuntimePresetSpec;
 exports.ResolutionInspector = ResolutionInspector.ResolutionInspector;
 exports.ResolutionTrace = ResolutionTrace.ResolutionTrace;
 exports.RuntimeBar = RuntimeBar.RuntimeBar;
+exports.RuntimeBarActions = RuntimeBarActions.RuntimeBarActions;
 exports.RuntimeLibraryList = RuntimeLibraryList.RuntimeLibraryList;
 exports.RuntimeModePicker = RuntimeModePicker.RuntimeModePicker;
 exports.RuntimeProfilePicker = RuntimeProfilePicker.RuntimeProfilePicker;
@@ -168,12 +180,12 @@ exports.SPEC_RUNTIME_MODES = runtimeFamily.SPEC_RUNTIME_MODES;
 exports.familyForModel = runtimeFamily.familyForModel;
 exports.modeOptionFor = runtimeFamily.modeOptionFor;
 exports.runtimeModeFromModel = runtimeFamily.runtimeModeFromModel;
+exports.SPEC_RUNTIME_TABS = types$1.SPEC_RUNTIME_TABS;
 exports.SandboxConnectionsSection = SandboxConnectionsSection.SandboxConnectionsSection;
 exports.SandboxCreateWizard = SandboxCreateWizard.SandboxCreateWizard;
 exports.SchemaBrowser = ToolSchemaBrowser.ToolSchemaBrowser;
 exports.ToolSchemaBrowser = ToolSchemaBrowser.ToolSchemaBrowser;
 exports.SessionApprovalsPanel = SessionInspector_approvals.SessionApprovalsPanel;
-exports.pendingApprovalRequests = SessionInspector_approvals.pendingApprovalRequests;
 exports.SessionChatComposer = SessionChatComposer.SessionChatComposer;
 exports.SessionContextMeter = SessionViewer_header.SessionContextMeter;
 exports.SessionInspector = SessionInspector.SessionInspector;
@@ -181,6 +193,11 @@ exports.SessionViewer = SessionViewer.SessionViewer;
 exports.SpecRuntimeEditor = index$2.SpecRuntimeEditor;
 exports.ThreadPicker = ThreadPicker.ThreadPicker;
 exports.ToolPreferences = ToolPreferences.ToolPreferences;
+exports.UNSPECIFIED_HINT = unspecified.UNSPECIFIED_HINT;
+exports.UNSPECIFIED_ID = unspecified.UNSPECIFIED_ID;
+exports.UNSPECIFIED_LABEL = unspecified.UNSPECIFIED_LABEL;
+exports.UNSPECIFIED_NAME = unspecified.UNSPECIFIED_NAME;
+exports.unspecifiedHint = unspecified.unspecifiedHint;
 exports.appendToolPolicy = toolPolicy.appendToolPolicy;
 exports.matchesTool = toolPolicy.matchesTool;
 exports.normalizeToolPolicyRules = toolPolicy.normalizeToolPolicyRules;
@@ -230,12 +247,15 @@ exports.normalizeMessages = SessionViewer_model.normalizeMessages;
 exports.normalizeSession = SessionViewer_model.normalizeSession;
 exports.splitMcpTool = SessionViewer_model.splitMcpTool;
 exports.summarizeSession = SessionViewer_model.summarizeSession;
-exports.isValidPromptSpecDetail = types$1.isValidPromptSpecDetail;
+exports.isValidPromptSpecDetail = types$2.isValidPromptSpecDetail;
 exports.makeContextId = context.makeContextId;
 exports.parseContextPrefix = context.parseContextPrefix;
 exports.serializeContext = context.serializeContext;
 exports.nextPromptId = chatWindowContext.nextPromptId;
 exports.useChatWindowManager = chatWindowContext.useChatWindowManager;
+exports.parsePromptRunYaml = yaml.parsePromptRunYaml;
+exports.promptRunYaml = yaml.promptRunYaml;
+exports.pendingApprovalRequests = SessionInspector_approvalsModel.pendingApprovalRequests;
 exports.promptPreviewText = promptRuntime.promptPreviewText;
 exports.promptRuntimeValueToPayload = promptRuntime.promptRuntimeValueToPayload;
 exports.specToPromptRuntimeValue = promptRuntime.specToPromptRuntimeValue;
@@ -245,6 +265,7 @@ exports.toolDiff = SessionViewer_input.toolDiff;
 exports.toolInputParams = SessionViewer_input.toolInputParams;
 exports.useRuntimeFamilies = useRuntimeFamilies.useRuntimeFamilies;
 exports.useRuntimePermissionCatalog = usePermissionCatalog.useRuntimePermissionCatalog;
-exports.useRuntimeProfilePicker = useRuntimeProfilePicker.useRuntimeProfilePicker;
+exports.useRuntimePresetResolution = useResolution.useRuntimePresetResolution;
 exports.useRuntimeProfileResolution = useResolution.useRuntimeProfileResolution;
+exports.useRuntimeProfilePicker = useRuntimeProfilePicker.useRuntimeProfilePicker;
 //# sourceMappingURL=ai.cjs.map

package/dist/ai.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ai.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ai.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ai.js

@@ -1,4 +1,5 @@
 import { AGENT_RUNTIME_ICONS, APPROVAL_ICONS, EFFORT_ICONS, PERMISSION_MODE_ICONS, WORKFLOW_PHASES, effortIcon } from "./data/ai/agent-action-icons.js";
+import { AdvancedChatConfig } from "./data/ai/AdvancedChatConfig.js";
 import { CATEGORY_ICONS, CATEGORY_LABELS, classifyCommand, classifyToolCategory, collectSessionFilters, eventCategory, isEventVisible } from "./data/ai/session-categories.js";
 import { CLAUDE_COMPLETE_SESSION } from "./data/ai/examples/sessions/claude-complete.js";
 import { CLAUDE_PERMISSION_MODES, CLAUDE_PERMISSION_MODE_OPTIONS, normalizeToolPolicy } from "./data/chat/types.js";
@@ -28,10 +29,12 @@ import { PromptRunEditor } from "./data/ai/PromptRunEditor/index.js";
 import { PromptSourceBadge } from "./data/ai/PromptCatalog/PromptSourceBadge.js";
 import { PromptSourceRepair } from "./data/ai/PromptPicker/PromptSourceRepair.js";
 import { ProviderStatusPanel } from "./data/runtime/ProviderStatusPanel.js";
+import { RECENT_RUNTIME_LIMIT, recordRecentRuntimes, runtimeRows } from "./data/ai/PromptRunEditor/model.js";
 import { RUNTIME_PROFILE_SCOPES, assertRuntimePresetSpec, projectRuntimePresetSpec } from "./data/ai/runtime-profile.js";
 import { ResolutionInspector } from "./data/ai/runtime-profiles/ResolutionInspector.js";
 import { ResolutionTrace } from "./data/ai/runtime-profiles/ResolutionTrace.js";
 import { RuntimeBar } from "./data/runtime/RuntimeBar.js";
+import { RuntimeBarActions } from "./data/runtime/RuntimeBarActions.js";
 import { RuntimeLibraryList } from "./data/ai/runtime-profiles/RuntimeLibraryList.js";
 import { RuntimeModePicker } from "./data/ai/RuntimeModePicker.js";
 import { RuntimeProfilePicker } from "./data/ai/runtime-profiles/RuntimeProfilePicker.js";
@@ -42,10 +45,11 @@ import { SPEC_CHECKOUT_MODES, SPEC_CLONE_MODES, SPEC_COMMIT_CONDITIONS, SPEC_COM
 import { SPEC_PERMISSION_MODES } from "./data/ai/SpecRuntimeEditor.sandbox-model.js";
 import { SPEC_RUNTIME_FAMILIES, familiesFromRuntimeCatalog, familyById, familyForMode, labelForMode, modeForFamily, modelBelongsToFamily, modelsForFamily, runtimeModeError, runtimeModeOptions, runtimeModelError, selectionForMode, selectionForRuntime } from "./data/runtime/runtime-mode.js";
 import { SPEC_RUNTIME_MODES, familyForModel, modeOptionFor, runtimeModeFromModel } from "./lib/runtime-family.js";
+import { SPEC_RUNTIME_TABS } from "./data/ai/SpecRuntimeEditor/types.js";
 import { SandboxConnectionsSection } from "./data/ai/SandboxConnectionsSection.js";
 import { SandboxCreateWizard } from "./data/ai/SandboxCreateWizard.js";
 import { ToolSchemaBrowser, ToolSchemaBrowser as ToolSchemaBrowser2 } from "./data/ai/ToolSchemaBrowser.js";
-import { SessionApprovalsPanel, pendingApprovalRequests } from "./data/ai/SessionInspector.approvals.js";
+import { SessionApprovalsPanel } from "./data/ai/SessionInspector.approvals.js";
 import { SessionChatComposer } from "./data/ai/SessionChatComposer.js";
 import { SessionContextMeter } from "./data/ai/SessionViewer.header.js";
 import { SessionInspector } from "./data/ai/SessionInspector.js";
@@ -53,6 +57,7 @@ import { SessionViewer } from "./data/ai/SessionViewer.js";
 import { SpecRuntimeEditor } from "./data/ai/SpecRuntimeEditor/index.js";
 import { ThreadPicker } from "./data/ai/ThreadPicker.js";
 import { ToolPreferences } from "./data/ai/ToolPreferences.js";
+import { UNSPECIFIED_HINT, UNSPECIFIED_ID, UNSPECIFIED_LABEL, UNSPECIFIED_NAME, unspecifiedHint } from "./data/runtime/unspecified.js";
 import { appendToolPolicy, matchesTool, normalizeToolPolicyRules, resolveToolPolicy, toolPolicyFromPreferences } from "./data/chat/tool-policy.js";
 import { authoredRuntimeSpec, duplicateName, mergeRuntimeSpec, nextNewName, permissionTarget, presetForRef, presetsOf, referencedBy, reorderProfilePresets, uniqueName } from "./lib/runtime-profile-model.js";
 import { buildSandboxCreateInput, emptySandboxCreateDraft, toggleSandboxCredential } from "./data/ai/SandboxCreateWizard.model.js";
@@ -66,15 +71,18 @@ import { getSessionAction, getSessionMetadata, normalizeMessages, normalizeSessi
 import { isValidPromptSpecDetail } from "./data/ai/PromptPicker/types.js";
 import { makeContextId, parseContextPrefix, serializeContext } from "./data/ai/context.js";
 import { nextPromptId, useChatWindowManager } from "./data/ai/chat-window-context.js";
+import { parsePromptRunYaml, promptRunYaml } from "./data/ai/PromptRunEditor/yaml.js";
+import { pendingApprovalRequests } from "./data/ai/SessionInspector.approvals-model.js";
 import { promptPreviewText, promptRuntimeValueToPayload, specToPromptRuntimeValue } from "./data/ai/PromptPicker/prompt-runtime.js";
 import { questionsFromToolInput, summarizeToolInput, toolDiff, toolInputParams } from "./data/ai/SessionViewer.input.js";
 import { useRuntimeFamilies } from "./data/ai/runtime-profiles/use-runtime-families.js";
 import { useRuntimePermissionCatalog } from "./data/ai/runtime-profiles/use-permission-catalog.js";
+import { useRuntimePresetResolution, useRuntimeProfileResolution } from "./data/ai/runtime-profiles/use-resolution.js";
 import { useRuntimeProfilePicker } from "./data/ai/runtime-profiles/use-runtime-profile-picker.js";
-import { useRuntimeProfileResolution } from "./data/ai/runtime-profiles/use-resolution.js";
 export {
   AGENT_RUNTIME_ICONS,
   APPROVAL_ICONS,
+  AdvancedChatConfig,
   CATEGORY_ICONS,
   CATEGORY_LABELS,
   CLAUDE_COMPLETE_SESSION,
@@ -111,10 +119,12 @@ export {
   PromptSourceBadge,
   PromptSourceRepair,
   ProviderStatusPanel,
+  RECENT_RUNTIME_LIMIT,
   RUNTIME_PROFILE_SCOPES,
   ResolutionInspector,
   ResolutionTrace,
   RuntimeBar,
+  RuntimeBarActions,
   RuntimeLibraryList,
   RuntimeModePicker,
   RuntimeProfilePicker,
@@ -131,6 +141,7 @@ export {
   SPEC_PERMISSION_MODES,
   SPEC_RUNTIME_FAMILIES,
   SPEC_RUNTIME_MODES,
+  SPEC_RUNTIME_TABS,
   SPEC_SCHEMA_STRICTNESS,
   SPEC_STASH_MODES,
   SPEC_VERIFY_SCOPES,
@@ -148,6 +159,10 @@ export {
   ThreadPicker,
   ToolPreferences,
   ToolSchemaBrowser2 as ToolSchemaBrowser,
+  UNSPECIFIED_HINT,
+  UNSPECIFIED_ID,
+  UNSPECIFIED_LABEL,
+  UNSPECIFIED_NAME,
   WORKFLOW_PHASES,
   appendToolPolicy,
   assertRuntimePresetSpec,
@@ -205,6 +220,7 @@ export {
   normalizeToolPolicy,
   normalizeToolPolicyRules,
   parseContextPrefix,
+  parsePromptRunYaml,
   pendingApprovalRequests,
   permissionTarget,
   presetForRef,
@@ -212,10 +228,12 @@ export {
   previewText,
   projectRuntimePresetSpec,
   promptPreviewText,
+  promptRunYaml,
   promptRuntimeValueToPayload,
   provenanceSummary,
   questionsFromToolInput,
   reconcileModelCapabilities,
+  recordRecentRuntimes,
   referencedBy,
   reorderProfilePresets,
   resolveToolPolicy,
@@ -223,6 +241,7 @@ export {
   runtimeModeFromModel,
   runtimeModeOptions,
   runtimeModelError,
+  runtimeRows,
   runtimeSummary,
   selectionForMode,
   selectionForRuntime,
@@ -240,9 +259,11 @@ export {
   toolInputParams,
   toolPolicyFromPreferences,
   uniqueName,
+  unspecifiedHint,
   useChatWindowManager,
   useRuntimeFamilies,
   useRuntimePermissionCatalog,
+  useRuntimePresetResolution,
   useRuntimeProfilePicker,
   useRuntimeProfileResolution,
   withUserRule

package/dist/ai.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ai.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/clicky.d.ts

@@ -1,2 +1,2 @@
-export { Clicky, ClickyNodeView, ClickyTable, type ClickyCommandRequest, type ClickyCommandRuntime, type ClickyLinkTarget, type ClickyResolvedCommand, type ClickyColumn, type ClickyDownloadOptions, type ClickyDownloadScope, type ClickyDocument, type ClickyField, type ClickyNode, type ClickyNodeViewProps, type ClickyProps, type ClickyRemoteFormat, type ClickyRow, type ClickyStyle, type ClickyTableProps, type ClickyTableRowHref, type ClickyTableRowClick, type ClickyTableRowPredicate, type ClickyTableRowSelection, type ClickyTreeItem, type ClickyViewOptions, } from './data/Clicky';
+export { Clicky, ClickyNodeView, ClickyTable, type ClickyCommandRequest, type ClickyCommandRuntime, type ClickyLinkTarget, type ClickyResolvedCommand, type ClickyColumn, type ClickyDownloadOptions, type ClickyDownloadScope, type ClickyDocument, type ClickyField, type ClickyNode, type ClickyNodeViewProps, type ClickyProps, type ClickyRemoteFormat, type ClickyRow, type ClickyRowDetailRenderer, type ClickyStyle, type ClickyTableProps, type ClickyTableRowHref, type ClickyTableRowClick, type ClickyTableRowPredicate, type ClickyTableRowSelection, type ClickyTreeItem, type ClickyViewOptions, } from './data/Clicky';
 //# sourceMappingURL=clicky.d.ts.map

package/dist/clicky.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clicky.d.ts","sourceRoot":"","sources":["../src/clicky.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,cAAc,EACd,WAAW,EACX,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,uBAAuB,EAC5B,KAAK,cAAc,EACnB,KAAK,iBAAiB,GACvB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"clicky.d.ts","sourceRoot":"","sources":["../src/clicky.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,cAAc,EACd,WAAW,EACX,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACd,KAAK,uBAAuB,EAC5B,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,uBAAuB,EAC5B,KAAK,cAAc,EACnB,KAAK,iBAAiB,GACvB,MAAM,eAAe,CAAC"}

package/dist/comments/CommentComposer.cjs

@@ -92,6 +92,7 @@ function CommentComposer({
   autoFocus = false,
   placeholder = "Add a comment…",
   onCreate,
+  createActions,
   onMention
 }) {
   const [open, setOpen] = react.useState(!collapsible || autoFocus);
@@ -117,7 +118,7 @@ function CommentComposer({
       return { ...prev, [key]: value };
     });
   }
-  async function submit() {
+  async function submit(actionId) {
     const text = body.trim();
     if (!text && !rating || submittingRef.current) return;
     submittingRef.current = true;
@@ -126,13 +127,15 @@ function CommentComposer({
       (m) => body.toLowerCase().includes(`@${m.name.toLowerCase()}`)
     );
     try {
-      await (onCreate == null ? void 0 : onCreate({
+      const input = {
         body: text,
         anchor: anchor ?? null,
         ...rating ? { rating } : {},
         ...Object.keys(facets).length > 0 ? { facets } : {},
         ...mentions.length > 0 ? { mentions } : {}
-      }));
+      };
+      if (actionId === void 0) await (onCreate == null ? void 0 : onCreate(input));
+      else await (onCreate == null ? void 0 : onCreate(input, actionId));
       for (const mention of mentions) onMention == null ? void 0 : onMention(mention, { body: text });
       reset();
       if (collapsible) setOpen(false);
@@ -173,7 +176,7 @@ function CommentComposer({
               if (collapsible) setOpen(false);
             },
             placeholder,
-            autoFocus: autoFocus || open,
+            autoFocus: autoFocus || collapsible && open,
             "data-testid": "comment-compose-input",
             className: "min-h-[48px] pr-10"
           }
@@ -219,7 +222,17 @@ function CommentComposer({
             },
             facet.key
           )),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          (createActions == null ? void 0 : createActions.length) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex gap-1", children: createActions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => void submit(action.id),
+              disabled: submitting || !body.trim() && !rating,
+              className: "whitespace-nowrap rounded-md bg-primary px-1.5 py-1 text-[10px] font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground",
+              children: action.label
+            },
+            action.id
+          )) }) : /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",

package/dist/comments/CommentComposer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommentComposer.cjs","sources":["../../src/comments/CommentComposer.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { UiArrowUp, UiClose, UiThumbsDown, UiThumbsUp } from \"../icons\";\nimport type { BadgeTone } from \"../data/Badge\";\nimport { MentionTextarea } from \"./MentionTextarea\";\nimport { toneToBadgeTone } from \"./comment-utils\";\nimport type {\n  CommentAnchor,\n  CommentConfig,\n  CommentCreateInput,\n  CommentFacet,\n  CommentMention,\n  CommentRating,\n} from \"./comment-types\";\n\n// Static literals so Tailwind's source scanner emits these utilities.\nconst FACET_DOT_CLASS: Record<BadgeTone, string> = {\n  neutral: \"bg-muted-foreground\",\n  success: \"bg-green-500\",\n  danger: \"bg-red-500\",\n  warning: \"bg-yellow-500\",\n  info: \"bg-blue-500\",\n};\n\nexport type CommentComposerProps = {\n  config: CommentConfig;\n  /** Anchor stamped onto created comments. */\n  anchor?: CommentAnchor | null;\n  /** Start collapsed as an \"Add a comment…\" pill until clicked. */\n  collapsible?: boolean;\n  autoFocus?: boolean;\n  placeholder?: string;\n  /** Create a new root comment. */\n  onCreate?: (input: CommentCreateInput) => void | Promise<void>;\n  /** Fired once per mention referenced by a posted comment. */\n  onMention?: (mention: CommentMention, context: { body: string }) => void;\n};\n\nfunction FacetPicker({\n  facet,\n  value,\n  onChange,\n}: {\n  facet: CommentFacet;\n  value: string | undefined;\n  onChange: (value: string | undefined) => void;\n}) {\n  const selected = facet.options.find((o) => o.value === value);\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuClassName=\"min-w-[150px]\"\n      trigger={\n        <span\n          role=\"button\"\n          tabIndex={0}\n          className={cn(\n            \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium transition-colors\",\n            selected\n              ? \"bg-muted text-foreground\"\n              : \"text-muted-foreground hover:bg-muted/60\",\n          )}\n        >\n          {selected ? selected.label : facet.label}\n          {selected && (\n            <span\n              role=\"presentation\"\n              className=\"ml-0.5 cursor-pointer hover:text-foreground\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onChange(undefined);\n              }}\n            >\n              ×\n            </span>\n          )}\n        </span>\n      }\n    >\n      {(close) => (\n        <div className=\"py-1\">\n          {facet.options.map((option) => (\n            <button\n              key={option.value}\n              type=\"button\"\n              onClick={() => {\n                onChange(option.value === value ? undefined : option.value);\n                close();\n              }}\n              className={cn(\n                \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent hover:text-accent-foreground\",\n                option.value === value && \"bg-muted font-semibold\",\n              )}\n            >\n              <span\n                className={cn(\n                  \"inline-block size-2 rounded-full\",\n                  FACET_DOT_CLASS[toneToBadgeTone(option.tone)],\n                )}\n              />\n              {option.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\n/**\n * The new-comment composer: a mention-aware textarea, one picker per configured\n * facet, and a send button. Starts as a pill when `collapsible`. Owns only its\n * own draft state; posting is delegated to `onCreate`.\n */\nexport function CommentComposer({\n  config,\n  anchor,\n  collapsible = true,\n  autoFocus = false,\n  placeholder = \"Add a comment…\",\n  onCreate,\n  onMention,\n}: CommentComposerProps) {\n  const [open, setOpen] = useState(!collapsible || autoFocus);\n  const [body, setBody] = useState(\"\");\n  const [facets, setFacets] = useState<Record<string, string>>({});\n  const [rating, setRating] = useState<CommentRating | undefined>();\n  const [submitting, setSubmitting] = useState(false);\n  const submittingRef = useRef(false);\n  const mentionsRef = useRef<Map<string, CommentMention>>(new Map());\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  function reset() {\n    setBody(\"\");\n    setFacets({});\n    setRating(undefined);\n    mentionsRef.current.clear();\n  }\n\n  function setFacet(key: string, value: string | undefined) {\n    setFacets((prev) => {\n      if (value === undefined) {\n        const { [key]: _drop, ...rest } = prev;\n        return rest;\n      }\n      return { ...prev, [key]: value };\n    });\n  }\n\n  async function submit() {\n    const text = body.trim();\n    if ((!text && !rating) || submittingRef.current) return;\n    submittingRef.current = true;\n    setSubmitting(true);\n    const mentions = [...mentionsRef.current.values()].filter((m) =>\n      body.toLowerCase().includes(`@${m.name.toLowerCase()}`),\n    );\n    try {\n      await onCreate?.({\n        body: text,\n        anchor: anchor ?? null,\n        ...(rating ? { rating } : {}),\n        ...(Object.keys(facets).length > 0 ? { facets } : {}),\n        ...(mentions.length > 0 ? { mentions } : {}),\n      });\n      for (const mention of mentions) onMention?.(mention, { body: text });\n      reset();\n      if (collapsible) setOpen(false);\n    } finally {\n      submittingRef.current = false;\n      setSubmitting(false);\n    }\n  }\n\n  if (!open && body.trim().length === 0) {\n    return (\n      <button\n        type=\"button\"\n        onClick={() => setOpen(true)}\n        className=\"w-full rounded-full border border-border bg-muted/25 px-4 py-2 text-left text-sm text-muted-foreground/70 shadow-sm transition-colors hover:border-primary/30 hover:bg-muted/40\"\n      >\n        {placeholder}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"comment-compose-box\"\n      aria-busy={submitting}\n      className=\"relative rounded-2xl border border-border bg-muted/25 px-3 pt-3 pb-10 shadow-sm transition-[border-color,box-shadow] focus-within:border-primary/40 focus-within:shadow-md\"\n    >\n      <MentionTextarea\n        ref={inputRef}\n        value={body}\n        onChange={setBody}\n        mentionables={config.mentionables ?? []}\n        onMentionSelect={(m) => mentionsRef.current.set(m.id, m)}\n        onSubmit={() => void submit()}\n        onCancel={() => {\n          reset();\n          if (collapsible) setOpen(false);\n        }}\n        placeholder={placeholder}\n        autoFocus={autoFocus || open}\n        data-testid=\"comment-compose-input\"\n        className=\"min-h-[48px] pr-10\"\n      />\n      {collapsible && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            reset();\n            setOpen(false);\n          }}\n          aria-label=\"Close composer\"\n          className=\"absolute right-3 top-3 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground\"\n        >\n          <Icon icon={UiClose} className=\"text-xs\" />\n        </button>\n      )}\n      <div className=\"absolute inset-x-3 bottom-2.5 flex items-center gap-1.5\">\n        {(\n          [\n            [\"positive\", \"Positive rating\", UiThumbsUp],\n            [\"negative\", \"Negative rating\", UiThumbsDown],\n          ] as const\n        ).map(([value, label, icon]) => (\n          <button\n            key={value}\n            type=\"button\"\n            aria-label={label}\n            aria-pressed={rating === value}\n            onClick={() =>\n              setRating((current) => (current === value ? undefined : value))\n            }\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n              rating === value &&\n                (value === \"positive\"\n                  ? \"bg-green-100 text-green-700 [[data-theme=dark]_&]:bg-green-500/20 [[data-theme=dark]_&]:text-green-300\"\n                  : \"bg-red-100 text-red-700 [[data-theme=dark]_&]:bg-red-500/20 [[data-theme=dark]_&]:text-red-300\"),\n            )}\n          >\n            <Icon icon={icon} className=\"text-sm\" />\n          </button>\n        ))}\n        {(config.facets ?? []).map((facet) => (\n          <FacetPicker\n            key={facet.key}\n            facet={facet}\n            value={facets[facet.key]}\n            onChange={(value) => setFacet(facet.key, value)}\n          />\n        ))}\n        <button\n          type=\"button\"\n          data-testid=\"comment-compose-send\"\n          aria-label=\"Post comment\"\n          onClick={() => void submit()}\n          disabled={submitting || (!body.trim() && !rating)}\n          className=\"ml-auto inline-flex size-7 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n        >\n          <Icon icon={UiArrowUp} className=\"text-xs\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","DropdownMenu","jsxs","cn","toneToBadgeTone","useState","useRef","MentionTextarea","Icon","UiClose","UiThumbsUp","UiThumbsDown","UiArrowUp"],"mappings":"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"}
+{"version":3,"file":"CommentComposer.cjs","sources":["../../src/comments/CommentComposer.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { UiArrowUp, UiClose, UiThumbsDown, UiThumbsUp } from \"../icons\";\nimport type { BadgeTone } from \"../data/Badge\";\nimport { MentionTextarea } from \"./MentionTextarea\";\nimport { toneToBadgeTone } from \"./comment-utils\";\nimport type {\n  CommentAnchor,\n  CommentConfig,\n  CommentCreateAction,\n  CommentCreateInput,\n  CommentFacet,\n  CommentMention,\n  CommentRating,\n} from \"./comment-types\";\n\n// Static literals so Tailwind's source scanner emits these utilities.\nconst FACET_DOT_CLASS: Record<BadgeTone, string> = {\n  neutral: \"bg-muted-foreground\",\n  success: \"bg-green-500\",\n  danger: \"bg-red-500\",\n  warning: \"bg-yellow-500\",\n  info: \"bg-blue-500\",\n};\n\nexport type CommentComposerProps = {\n  config: CommentConfig;\n  /** Anchor stamped onto created comments. */\n  anchor?: CommentAnchor | null;\n  /** Start collapsed as an \"Add a comment…\" pill until clicked. */\n  collapsible?: boolean;\n  /** Focus the input on mount. A collapsible composer also focuses when the user expands it. */\n  autoFocus?: boolean;\n  placeholder?: string;\n  /** Create a new root comment. */\n  onCreate?: (input: CommentCreateInput, actionId?: string) => void | Promise<void>;\n  createActions?: readonly CommentCreateAction[];\n  /** Fired once per mention referenced by a posted comment. */\n  onMention?: (mention: CommentMention, context: { body: string }) => void;\n};\n\nfunction FacetPicker({\n  facet,\n  value,\n  onChange,\n}: {\n  facet: CommentFacet;\n  value: string | undefined;\n  onChange: (value: string | undefined) => void;\n}) {\n  const selected = facet.options.find((o) => o.value === value);\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuClassName=\"min-w-[150px]\"\n      trigger={\n        <span\n          role=\"button\"\n          tabIndex={0}\n          className={cn(\n            \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium transition-colors\",\n            selected\n              ? \"bg-muted text-foreground\"\n              : \"text-muted-foreground hover:bg-muted/60\",\n          )}\n        >\n          {selected ? selected.label : facet.label}\n          {selected && (\n            <span\n              role=\"presentation\"\n              className=\"ml-0.5 cursor-pointer hover:text-foreground\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onChange(undefined);\n              }}\n            >\n              ×\n            </span>\n          )}\n        </span>\n      }\n    >\n      {(close) => (\n        <div className=\"py-1\">\n          {facet.options.map((option) => (\n            <button\n              key={option.value}\n              type=\"button\"\n              onClick={() => {\n                onChange(option.value === value ? undefined : option.value);\n                close();\n              }}\n              className={cn(\n                \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent hover:text-accent-foreground\",\n                option.value === value && \"bg-muted font-semibold\",\n              )}\n            >\n              <span\n                className={cn(\n                  \"inline-block size-2 rounded-full\",\n                  FACET_DOT_CLASS[toneToBadgeTone(option.tone)],\n                )}\n              />\n              {option.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\n/**\n * The new-comment composer: a mention-aware textarea, one picker per configured\n * facet, and a send button. Starts as a pill when `collapsible`. Owns only its\n * own draft state; posting is delegated to `onCreate`.\n */\nexport function CommentComposer({\n  config,\n  anchor,\n  collapsible = true,\n  autoFocus = false,\n  placeholder = \"Add a comment…\",\n  onCreate,\n  createActions,\n  onMention,\n}: CommentComposerProps) {\n  const [open, setOpen] = useState(!collapsible || autoFocus);\n  const [body, setBody] = useState(\"\");\n  const [facets, setFacets] = useState<Record<string, string>>({});\n  const [rating, setRating] = useState<CommentRating | undefined>();\n  const [submitting, setSubmitting] = useState(false);\n  const submittingRef = useRef(false);\n  const mentionsRef = useRef<Map<string, CommentMention>>(new Map());\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  function reset() {\n    setBody(\"\");\n    setFacets({});\n    setRating(undefined);\n    mentionsRef.current.clear();\n  }\n\n  function setFacet(key: string, value: string | undefined) {\n    setFacets((prev) => {\n      if (value === undefined) {\n        const { [key]: _drop, ...rest } = prev;\n        return rest;\n      }\n      return { ...prev, [key]: value };\n    });\n  }\n\n  async function submit(actionId?: string) {\n    const text = body.trim();\n    if ((!text && !rating) || submittingRef.current) return;\n    submittingRef.current = true;\n    setSubmitting(true);\n    const mentions = [...mentionsRef.current.values()].filter((m) =>\n      body.toLowerCase().includes(`@${m.name.toLowerCase()}`),\n    );\n    try {\n      const input: CommentCreateInput = {\n        body: text,\n        anchor: anchor ?? null,\n        ...(rating ? { rating } : {}),\n        ...(Object.keys(facets).length > 0 ? { facets } : {}),\n        ...(mentions.length > 0 ? { mentions } : {}),\n      };\n      if (actionId === undefined) await onCreate?.(input);\n      else await onCreate?.(input, actionId);\n      for (const mention of mentions) onMention?.(mention, { body: text });\n      reset();\n      if (collapsible) setOpen(false);\n    } finally {\n      submittingRef.current = false;\n      setSubmitting(false);\n    }\n  }\n\n  if (!open && body.trim().length === 0) {\n    return (\n      <button\n        type=\"button\"\n        onClick={() => setOpen(true)}\n        className=\"w-full rounded-full border border-border bg-muted/25 px-4 py-2 text-left text-sm text-muted-foreground/70 shadow-sm transition-colors hover:border-primary/30 hover:bg-muted/40\"\n      >\n        {placeholder}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"comment-compose-box\"\n      aria-busy={submitting}\n      className=\"relative rounded-2xl border border-border bg-muted/25 px-3 pt-3 pb-10 shadow-sm transition-[border-color,box-shadow] focus-within:border-primary/40 focus-within:shadow-md\"\n    >\n      <MentionTextarea\n        ref={inputRef}\n        value={body}\n        onChange={setBody}\n        mentionables={config.mentionables ?? []}\n        onMentionSelect={(m) => mentionsRef.current.set(m.id, m)}\n        onSubmit={() => void submit()}\n        onCancel={() => {\n          reset();\n          if (collapsible) setOpen(false);\n        }}\n        placeholder={placeholder}\n        // An always-open composer is page chrome: focusing it on mount would\n        // scroll its host to it and steal the keyboard from the page.\n        autoFocus={autoFocus || (collapsible && open)}\n        data-testid=\"comment-compose-input\"\n        className=\"min-h-[48px] pr-10\"\n      />\n      {collapsible && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            reset();\n            setOpen(false);\n          }}\n          aria-label=\"Close composer\"\n          className=\"absolute right-3 top-3 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground\"\n        >\n          <Icon icon={UiClose} className=\"text-xs\" />\n        </button>\n      )}\n      <div className=\"absolute inset-x-3 bottom-2.5 flex items-center gap-1.5\">\n        {(\n          [\n            [\"positive\", \"Positive rating\", UiThumbsUp],\n            [\"negative\", \"Negative rating\", UiThumbsDown],\n          ] as const\n        ).map(([value, label, icon]) => (\n          <button\n            key={value}\n            type=\"button\"\n            aria-label={label}\n            aria-pressed={rating === value}\n            onClick={() =>\n              setRating((current) => (current === value ? undefined : value))\n            }\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n              rating === value &&\n                (value === \"positive\"\n                  ? \"bg-green-100 text-green-700 [[data-theme=dark]_&]:bg-green-500/20 [[data-theme=dark]_&]:text-green-300\"\n                  : \"bg-red-100 text-red-700 [[data-theme=dark]_&]:bg-red-500/20 [[data-theme=dark]_&]:text-red-300\"),\n            )}\n          >\n            <Icon icon={icon} className=\"text-sm\" />\n          </button>\n        ))}\n        {(config.facets ?? []).map((facet) => (\n          <FacetPicker\n            key={facet.key}\n            facet={facet}\n            value={facets[facet.key]}\n            onChange={(value) => setFacet(facet.key, value)}\n          />\n        ))}\n        {createActions?.length ? (\n          <div className=\"ml-auto flex gap-1\">\n            {createActions.map((action) => (\n              <button\n                key={action.id}\n                type=\"button\"\n                onClick={() => void submit(action.id)}\n                disabled={submitting || (!body.trim() && !rating)}\n                className=\"whitespace-nowrap rounded-md bg-primary px-1.5 py-1 text-[10px] font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n              >\n                {action.label}\n              </button>\n            ))}\n          </div>\n        ) : (\n          <button\n            type=\"button\"\n            data-testid=\"comment-compose-send\"\n            aria-label=\"Post comment\"\n            onClick={() => void submit()}\n            disabled={submitting || (!body.trim() && !rating)}\n            className=\"ml-auto inline-flex size-7 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n          >\n            <Icon icon={UiArrowUp} className=\"text-xs\" />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","DropdownMenu","jsxs","cn","toneToBadgeTone","useState","useRef","MentionTextarea","Icon","UiClose","UiThumbsUp","UiThumbsDown","UiArrowUp"],"mappings":"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"}

package/dist/comments/CommentComposer.d.ts

@@ -1,14 +1,16 @@
-import { CommentAnchor, CommentConfig, CommentCreateInput, CommentMention } from './comment-types';
+import { CommentAnchor, CommentConfig, CommentCreateAction, CommentCreateInput, CommentMention } from './comment-types';
 export type CommentComposerProps = {
     config: CommentConfig;
     /** Anchor stamped onto created comments. */
     anchor?: CommentAnchor | null;
     /** Start collapsed as an "Add a comment…" pill until clicked. */
     collapsible?: boolean;
+    /** Focus the input on mount. A collapsible composer also focuses when the user expands it. */
     autoFocus?: boolean;
     placeholder?: string;
     /** Create a new root comment. */
-    onCreate?: (input: CommentCreateInput) => void | Promise<void>;
+    onCreate?: (input: CommentCreateInput, actionId?: string) => void | Promise<void>;
+    createActions?: readonly CommentCreateAction[];
     /** Fired once per mention referenced by a posted comment. */
     onMention?: (mention: CommentMention, context: {
         body: string;
@@ -19,5 +21,5 @@ export type CommentComposerProps = {
  * facet, and a send button. Starts as a pill when `collapsible`. Owns only its
  * own draft state; posting is delegated to `onCreate`.
  */
-export declare function CommentComposer({ config, anchor, collapsible, autoFocus, placeholder, onCreate, onMention, }: CommentComposerProps): import("react").JSX.Element;
+export declare function CommentComposer({ config, anchor, collapsible, autoFocus, placeholder, onCreate, createActions, onMention, }: CommentComposerProps): import("react").JSX.Element;
 //# sourceMappingURL=CommentComposer.d.ts.map

package/dist/comments/CommentComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentComposer.d.ts","sourceRoot":"","sources":["../../src/comments/CommentComposer.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,kBAAkB,EAElB,cAAc,EAEf,MAAM,iBAAiB,CAAC;AAWzB,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,aAAa,CAAC;IACtB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,6DAA6D;IAC7D,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC1E,CAAC;AAyEF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,MAAM,EACN,WAAkB,EAClB,SAAiB,EACjB,WAA8B,EAC9B,QAAQ,EACR,SAAS,GACV,EAAE,oBAAoB,+BAkJtB"}
+{"version":3,"file":"CommentComposer.d.ts","sourceRoot":"","sources":["../../src/comments/CommentComposer.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAElB,cAAc,EAEf,MAAM,iBAAiB,CAAC;AAWzB,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,aAAa,CAAC;IACtB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8FAA8F;IAC9F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClF,aAAa,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAC/C,6DAA6D;IAC7D,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC1E,CAAC;AAyEF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,MAAM,EACN,WAAkB,EAClB,SAAiB,EACjB,WAA8B,EAC9B,QAAQ,EACR,aAAa,EACb,SAAS,GACV,EAAE,oBAAoB,+BAsKtB"}

package/dist/comments/CommentComposer.js

@@ -90,6 +90,7 @@ function CommentComposer({
   autoFocus = false,
   placeholder = "Add a comment…",
   onCreate,
+  createActions,
   onMention
 }) {
   const [open, setOpen] = useState(!collapsible || autoFocus);
@@ -115,7 +116,7 @@ function CommentComposer({
       return { ...prev, [key]: value };
     });
   }
-  async function submit() {
+  async function submit(actionId) {
     const text = body.trim();
     if (!text && !rating || submittingRef.current) return;
     submittingRef.current = true;
@@ -124,13 +125,15 @@ function CommentComposer({
       (m) => body.toLowerCase().includes(`@${m.name.toLowerCase()}`)
     );
     try {
-      await (onCreate == null ? void 0 : onCreate({
+      const input = {
         body: text,
         anchor: anchor ?? null,
         ...rating ? { rating } : {},
         ...Object.keys(facets).length > 0 ? { facets } : {},
         ...mentions.length > 0 ? { mentions } : {}
-      }));
+      };
+      if (actionId === void 0) await (onCreate == null ? void 0 : onCreate(input));
+      else await (onCreate == null ? void 0 : onCreate(input, actionId));
       for (const mention of mentions) onMention == null ? void 0 : onMention(mention, { body: text });
       reset();
       if (collapsible) setOpen(false);
@@ -171,7 +174,7 @@ function CommentComposer({
               if (collapsible) setOpen(false);
             },
             placeholder,
-            autoFocus: autoFocus || open,
+            autoFocus: autoFocus || collapsible && open,
             "data-testid": "comment-compose-input",
             className: "min-h-[48px] pr-10"
           }
@@ -217,7 +220,17 @@ function CommentComposer({
             },
             facet.key
           )),
-          /* @__PURE__ */ jsx(
+          (createActions == null ? void 0 : createActions.length) ? /* @__PURE__ */ jsx("div", { className: "ml-auto flex gap-1", children: createActions.map((action) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => void submit(action.id),
+              disabled: submitting || !body.trim() && !rating,
+              className: "whitespace-nowrap rounded-md bg-primary px-1.5 py-1 text-[10px] font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground",
+              children: action.label
+            },
+            action.id
+          )) }) : /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",

package/dist/comments/CommentComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentComposer.js","sources":["../../src/comments/CommentComposer.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { UiArrowUp, UiClose, UiThumbsDown, UiThumbsUp } from \"../icons\";\nimport type { BadgeTone } from \"../data/Badge\";\nimport { MentionTextarea } from \"./MentionTextarea\";\nimport { toneToBadgeTone } from \"./comment-utils\";\nimport type {\n  CommentAnchor,\n  CommentConfig,\n  CommentCreateInput,\n  CommentFacet,\n  CommentMention,\n  CommentRating,\n} from \"./comment-types\";\n\n// Static literals so Tailwind's source scanner emits these utilities.\nconst FACET_DOT_CLASS: Record<BadgeTone, string> = {\n  neutral: \"bg-muted-foreground\",\n  success: \"bg-green-500\",\n  danger: \"bg-red-500\",\n  warning: \"bg-yellow-500\",\n  info: \"bg-blue-500\",\n};\n\nexport type CommentComposerProps = {\n  config: CommentConfig;\n  /** Anchor stamped onto created comments. */\n  anchor?: CommentAnchor | null;\n  /** Start collapsed as an \"Add a comment…\" pill until clicked. */\n  collapsible?: boolean;\n  autoFocus?: boolean;\n  placeholder?: string;\n  /** Create a new root comment. */\n  onCreate?: (input: CommentCreateInput) => void | Promise<void>;\n  /** Fired once per mention referenced by a posted comment. */\n  onMention?: (mention: CommentMention, context: { body: string }) => void;\n};\n\nfunction FacetPicker({\n  facet,\n  value,\n  onChange,\n}: {\n  facet: CommentFacet;\n  value: string | undefined;\n  onChange: (value: string | undefined) => void;\n}) {\n  const selected = facet.options.find((o) => o.value === value);\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuClassName=\"min-w-[150px]\"\n      trigger={\n        <span\n          role=\"button\"\n          tabIndex={0}\n          className={cn(\n            \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium transition-colors\",\n            selected\n              ? \"bg-muted text-foreground\"\n              : \"text-muted-foreground hover:bg-muted/60\",\n          )}\n        >\n          {selected ? selected.label : facet.label}\n          {selected && (\n            <span\n              role=\"presentation\"\n              className=\"ml-0.5 cursor-pointer hover:text-foreground\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onChange(undefined);\n              }}\n            >\n              ×\n            </span>\n          )}\n        </span>\n      }\n    >\n      {(close) => (\n        <div className=\"py-1\">\n          {facet.options.map((option) => (\n            <button\n              key={option.value}\n              type=\"button\"\n              onClick={() => {\n                onChange(option.value === value ? undefined : option.value);\n                close();\n              }}\n              className={cn(\n                \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent hover:text-accent-foreground\",\n                option.value === value && \"bg-muted font-semibold\",\n              )}\n            >\n              <span\n                className={cn(\n                  \"inline-block size-2 rounded-full\",\n                  FACET_DOT_CLASS[toneToBadgeTone(option.tone)],\n                )}\n              />\n              {option.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\n/**\n * The new-comment composer: a mention-aware textarea, one picker per configured\n * facet, and a send button. Starts as a pill when `collapsible`. Owns only its\n * own draft state; posting is delegated to `onCreate`.\n */\nexport function CommentComposer({\n  config,\n  anchor,\n  collapsible = true,\n  autoFocus = false,\n  placeholder = \"Add a comment…\",\n  onCreate,\n  onMention,\n}: CommentComposerProps) {\n  const [open, setOpen] = useState(!collapsible || autoFocus);\n  const [body, setBody] = useState(\"\");\n  const [facets, setFacets] = useState<Record<string, string>>({});\n  const [rating, setRating] = useState<CommentRating | undefined>();\n  const [submitting, setSubmitting] = useState(false);\n  const submittingRef = useRef(false);\n  const mentionsRef = useRef<Map<string, CommentMention>>(new Map());\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  function reset() {\n    setBody(\"\");\n    setFacets({});\n    setRating(undefined);\n    mentionsRef.current.clear();\n  }\n\n  function setFacet(key: string, value: string | undefined) {\n    setFacets((prev) => {\n      if (value === undefined) {\n        const { [key]: _drop, ...rest } = prev;\n        return rest;\n      }\n      return { ...prev, [key]: value };\n    });\n  }\n\n  async function submit() {\n    const text = body.trim();\n    if ((!text && !rating) || submittingRef.current) return;\n    submittingRef.current = true;\n    setSubmitting(true);\n    const mentions = [...mentionsRef.current.values()].filter((m) =>\n      body.toLowerCase().includes(`@${m.name.toLowerCase()}`),\n    );\n    try {\n      await onCreate?.({\n        body: text,\n        anchor: anchor ?? null,\n        ...(rating ? { rating } : {}),\n        ...(Object.keys(facets).length > 0 ? { facets } : {}),\n        ...(mentions.length > 0 ? { mentions } : {}),\n      });\n      for (const mention of mentions) onMention?.(mention, { body: text });\n      reset();\n      if (collapsible) setOpen(false);\n    } finally {\n      submittingRef.current = false;\n      setSubmitting(false);\n    }\n  }\n\n  if (!open && body.trim().length === 0) {\n    return (\n      <button\n        type=\"button\"\n        onClick={() => setOpen(true)}\n        className=\"w-full rounded-full border border-border bg-muted/25 px-4 py-2 text-left text-sm text-muted-foreground/70 shadow-sm transition-colors hover:border-primary/30 hover:bg-muted/40\"\n      >\n        {placeholder}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"comment-compose-box\"\n      aria-busy={submitting}\n      className=\"relative rounded-2xl border border-border bg-muted/25 px-3 pt-3 pb-10 shadow-sm transition-[border-color,box-shadow] focus-within:border-primary/40 focus-within:shadow-md\"\n    >\n      <MentionTextarea\n        ref={inputRef}\n        value={body}\n        onChange={setBody}\n        mentionables={config.mentionables ?? []}\n        onMentionSelect={(m) => mentionsRef.current.set(m.id, m)}\n        onSubmit={() => void submit()}\n        onCancel={() => {\n          reset();\n          if (collapsible) setOpen(false);\n        }}\n        placeholder={placeholder}\n        autoFocus={autoFocus || open}\n        data-testid=\"comment-compose-input\"\n        className=\"min-h-[48px] pr-10\"\n      />\n      {collapsible && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            reset();\n            setOpen(false);\n          }}\n          aria-label=\"Close composer\"\n          className=\"absolute right-3 top-3 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground\"\n        >\n          <Icon icon={UiClose} className=\"text-xs\" />\n        </button>\n      )}\n      <div className=\"absolute inset-x-3 bottom-2.5 flex items-center gap-1.5\">\n        {(\n          [\n            [\"positive\", \"Positive rating\", UiThumbsUp],\n            [\"negative\", \"Negative rating\", UiThumbsDown],\n          ] as const\n        ).map(([value, label, icon]) => (\n          <button\n            key={value}\n            type=\"button\"\n            aria-label={label}\n            aria-pressed={rating === value}\n            onClick={() =>\n              setRating((current) => (current === value ? undefined : value))\n            }\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n              rating === value &&\n                (value === \"positive\"\n                  ? \"bg-green-100 text-green-700 [[data-theme=dark]_&]:bg-green-500/20 [[data-theme=dark]_&]:text-green-300\"\n                  : \"bg-red-100 text-red-700 [[data-theme=dark]_&]:bg-red-500/20 [[data-theme=dark]_&]:text-red-300\"),\n            )}\n          >\n            <Icon icon={icon} className=\"text-sm\" />\n          </button>\n        ))}\n        {(config.facets ?? []).map((facet) => (\n          <FacetPicker\n            key={facet.key}\n            facet={facet}\n            value={facets[facet.key]}\n            onChange={(value) => setFacet(facet.key, value)}\n          />\n        ))}\n        <button\n          type=\"button\"\n          data-testid=\"comment-compose-send\"\n          aria-label=\"Post comment\"\n          onClick={() => void submit()}\n          disabled={submitting || (!body.trim() && !rating)}\n          className=\"ml-auto inline-flex size-7 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n        >\n          <Icon icon={UiArrowUp} className=\"text-xs\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CommentComposer.js","sources":["../../src/comments/CommentComposer.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { UiArrowUp, UiClose, UiThumbsDown, UiThumbsUp } from \"../icons\";\nimport type { BadgeTone } from \"../data/Badge\";\nimport { MentionTextarea } from \"./MentionTextarea\";\nimport { toneToBadgeTone } from \"./comment-utils\";\nimport type {\n  CommentAnchor,\n  CommentConfig,\n  CommentCreateAction,\n  CommentCreateInput,\n  CommentFacet,\n  CommentMention,\n  CommentRating,\n} from \"./comment-types\";\n\n// Static literals so Tailwind's source scanner emits these utilities.\nconst FACET_DOT_CLASS: Record<BadgeTone, string> = {\n  neutral: \"bg-muted-foreground\",\n  success: \"bg-green-500\",\n  danger: \"bg-red-500\",\n  warning: \"bg-yellow-500\",\n  info: \"bg-blue-500\",\n};\n\nexport type CommentComposerProps = {\n  config: CommentConfig;\n  /** Anchor stamped onto created comments. */\n  anchor?: CommentAnchor | null;\n  /** Start collapsed as an \"Add a comment…\" pill until clicked. */\n  collapsible?: boolean;\n  /** Focus the input on mount. A collapsible composer also focuses when the user expands it. */\n  autoFocus?: boolean;\n  placeholder?: string;\n  /** Create a new root comment. */\n  onCreate?: (input: CommentCreateInput, actionId?: string) => void | Promise<void>;\n  createActions?: readonly CommentCreateAction[];\n  /** Fired once per mention referenced by a posted comment. */\n  onMention?: (mention: CommentMention, context: { body: string }) => void;\n};\n\nfunction FacetPicker({\n  facet,\n  value,\n  onChange,\n}: {\n  facet: CommentFacet;\n  value: string | undefined;\n  onChange: (value: string | undefined) => void;\n}) {\n  const selected = facet.options.find((o) => o.value === value);\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuClassName=\"min-w-[150px]\"\n      trigger={\n        <span\n          role=\"button\"\n          tabIndex={0}\n          className={cn(\n            \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium transition-colors\",\n            selected\n              ? \"bg-muted text-foreground\"\n              : \"text-muted-foreground hover:bg-muted/60\",\n          )}\n        >\n          {selected ? selected.label : facet.label}\n          {selected && (\n            <span\n              role=\"presentation\"\n              className=\"ml-0.5 cursor-pointer hover:text-foreground\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onChange(undefined);\n              }}\n            >\n              ×\n            </span>\n          )}\n        </span>\n      }\n    >\n      {(close) => (\n        <div className=\"py-1\">\n          {facet.options.map((option) => (\n            <button\n              key={option.value}\n              type=\"button\"\n              onClick={() => {\n                onChange(option.value === value ? undefined : option.value);\n                close();\n              }}\n              className={cn(\n                \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent hover:text-accent-foreground\",\n                option.value === value && \"bg-muted font-semibold\",\n              )}\n            >\n              <span\n                className={cn(\n                  \"inline-block size-2 rounded-full\",\n                  FACET_DOT_CLASS[toneToBadgeTone(option.tone)],\n                )}\n              />\n              {option.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\n/**\n * The new-comment composer: a mention-aware textarea, one picker per configured\n * facet, and a send button. Starts as a pill when `collapsible`. Owns only its\n * own draft state; posting is delegated to `onCreate`.\n */\nexport function CommentComposer({\n  config,\n  anchor,\n  collapsible = true,\n  autoFocus = false,\n  placeholder = \"Add a comment…\",\n  onCreate,\n  createActions,\n  onMention,\n}: CommentComposerProps) {\n  const [open, setOpen] = useState(!collapsible || autoFocus);\n  const [body, setBody] = useState(\"\");\n  const [facets, setFacets] = useState<Record<string, string>>({});\n  const [rating, setRating] = useState<CommentRating | undefined>();\n  const [submitting, setSubmitting] = useState(false);\n  const submittingRef = useRef(false);\n  const mentionsRef = useRef<Map<string, CommentMention>>(new Map());\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  function reset() {\n    setBody(\"\");\n    setFacets({});\n    setRating(undefined);\n    mentionsRef.current.clear();\n  }\n\n  function setFacet(key: string, value: string | undefined) {\n    setFacets((prev) => {\n      if (value === undefined) {\n        const { [key]: _drop, ...rest } = prev;\n        return rest;\n      }\n      return { ...prev, [key]: value };\n    });\n  }\n\n  async function submit(actionId?: string) {\n    const text = body.trim();\n    if ((!text && !rating) || submittingRef.current) return;\n    submittingRef.current = true;\n    setSubmitting(true);\n    const mentions = [...mentionsRef.current.values()].filter((m) =>\n      body.toLowerCase().includes(`@${m.name.toLowerCase()}`),\n    );\n    try {\n      const input: CommentCreateInput = {\n        body: text,\n        anchor: anchor ?? null,\n        ...(rating ? { rating } : {}),\n        ...(Object.keys(facets).length > 0 ? { facets } : {}),\n        ...(mentions.length > 0 ? { mentions } : {}),\n      };\n      if (actionId === undefined) await onCreate?.(input);\n      else await onCreate?.(input, actionId);\n      for (const mention of mentions) onMention?.(mention, { body: text });\n      reset();\n      if (collapsible) setOpen(false);\n    } finally {\n      submittingRef.current = false;\n      setSubmitting(false);\n    }\n  }\n\n  if (!open && body.trim().length === 0) {\n    return (\n      <button\n        type=\"button\"\n        onClick={() => setOpen(true)}\n        className=\"w-full rounded-full border border-border bg-muted/25 px-4 py-2 text-left text-sm text-muted-foreground/70 shadow-sm transition-colors hover:border-primary/30 hover:bg-muted/40\"\n      >\n        {placeholder}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"comment-compose-box\"\n      aria-busy={submitting}\n      className=\"relative rounded-2xl border border-border bg-muted/25 px-3 pt-3 pb-10 shadow-sm transition-[border-color,box-shadow] focus-within:border-primary/40 focus-within:shadow-md\"\n    >\n      <MentionTextarea\n        ref={inputRef}\n        value={body}\n        onChange={setBody}\n        mentionables={config.mentionables ?? []}\n        onMentionSelect={(m) => mentionsRef.current.set(m.id, m)}\n        onSubmit={() => void submit()}\n        onCancel={() => {\n          reset();\n          if (collapsible) setOpen(false);\n        }}\n        placeholder={placeholder}\n        // An always-open composer is page chrome: focusing it on mount would\n        // scroll its host to it and steal the keyboard from the page.\n        autoFocus={autoFocus || (collapsible && open)}\n        data-testid=\"comment-compose-input\"\n        className=\"min-h-[48px] pr-10\"\n      />\n      {collapsible && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            reset();\n            setOpen(false);\n          }}\n          aria-label=\"Close composer\"\n          className=\"absolute right-3 top-3 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground\"\n        >\n          <Icon icon={UiClose} className=\"text-xs\" />\n        </button>\n      )}\n      <div className=\"absolute inset-x-3 bottom-2.5 flex items-center gap-1.5\">\n        {(\n          [\n            [\"positive\", \"Positive rating\", UiThumbsUp],\n            [\"negative\", \"Negative rating\", UiThumbsDown],\n          ] as const\n        ).map(([value, label, icon]) => (\n          <button\n            key={value}\n            type=\"button\"\n            aria-label={label}\n            aria-pressed={rating === value}\n            onClick={() =>\n              setRating((current) => (current === value ? undefined : value))\n            }\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n              rating === value &&\n                (value === \"positive\"\n                  ? \"bg-green-100 text-green-700 [[data-theme=dark]_&]:bg-green-500/20 [[data-theme=dark]_&]:text-green-300\"\n                  : \"bg-red-100 text-red-700 [[data-theme=dark]_&]:bg-red-500/20 [[data-theme=dark]_&]:text-red-300\"),\n            )}\n          >\n            <Icon icon={icon} className=\"text-sm\" />\n          </button>\n        ))}\n        {(config.facets ?? []).map((facet) => (\n          <FacetPicker\n            key={facet.key}\n            facet={facet}\n            value={facets[facet.key]}\n            onChange={(value) => setFacet(facet.key, value)}\n          />\n        ))}\n        {createActions?.length ? (\n          <div className=\"ml-auto flex gap-1\">\n            {createActions.map((action) => (\n              <button\n                key={action.id}\n                type=\"button\"\n                onClick={() => void submit(action.id)}\n                disabled={submitting || (!body.trim() && !rating)}\n                className=\"whitespace-nowrap rounded-md bg-primary px-1.5 py-1 text-[10px] font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n              >\n                {action.label}\n              </button>\n            ))}\n          </div>\n        ) : (\n          <button\n            type=\"button\"\n            data-testid=\"comment-compose-send\"\n            aria-label=\"Post comment\"\n            onClick={() => void submit()}\n            disabled={submitting || (!body.trim() && !rating)}\n            className=\"ml-auto inline-flex size-7 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n          >\n            <Icon icon={UiArrowUp} className=\"text-xs\" />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAmBA,MAAM,kBAA6C;AAAA,EACjD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;AAkBA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,WAAW,MAAM,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK;AAC5D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,eAAc;AAAA,MACd,SACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA,WACI,6BACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAA,WAAW,SAAS,QAAQ,MAAM;AAAA,YAClC,YACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS,CAAC,MAAM;AACd,oBAAE,gBAAA;AACF,2BAAS,MAAS;AAAA,gBACpB;AAAA,gBACD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAKL,UAAA,CAAC,UACA,oBAAC,OAAA,EAAI,WAAU,QACZ,UAAA,MAAM,QAAQ,IAAI,CAAC,WAClB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM;AACb,qBAAS,OAAO,UAAU,QAAQ,SAAY,OAAO,KAAK;AAC1D,kBAAA;AAAA,UACF;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA,OAAO,UAAU,SAAS;AAAA,UAAA;AAAA,UAG5B,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,gBAAgB,gBAAgB,OAAO,IAAI,CAAC;AAAA,gBAAA;AAAA,cAC9C;AAAA,YAAA;AAAA,YAED,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAjBH,OAAO;AAAA,MAAA,CAmBf,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAIR;AAOO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC,eAAe,SAAS;AAC1D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiC,CAAA,CAAE;AAC/D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAA;AAC5B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,gBAAgB,OAAO,KAAK;AAClC,QAAM,cAAc,OAAoC,oBAAI,KAAK;AACjE,QAAM,WAAW,OAA4B,IAAI;AAEjD,WAAS,QAAQ;AACf,YAAQ,EAAE;AACV,cAAU,CAAA,CAAE;AACZ,cAAU,MAAS;AACnB,gBAAY,QAAQ,MAAA;AAAA,EACtB;AAEA,WAAS,SAAS,KAAa,OAA2B;AACxD,cAAU,CAAC,SAAS;AAClB,UAAI,UAAU,QAAW;AACvB,cAAM,EAAE,CAAC,GAAG,GAAG,OAAO,GAAG,SAAS;AAClC,eAAO;AAAA,MACT;AACA,aAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAA;AAAA,IAC3B,CAAC;AAAA,EACH;AAEA,iBAAe,OAAO,UAAmB;AACvC,UAAM,OAAO,KAAK,KAAA;AAClB,QAAK,CAAC,QAAQ,CAAC,UAAW,cAAc,QAAS;AACjD,kBAAc,UAAU;AACxB,kBAAc,IAAI;AAClB,UAAM,WAAW,CAAC,GAAG,YAAY,QAAQ,OAAA,CAAQ,EAAE;AAAA,MAAO,CAAC,MACzD,KAAK,YAAA,EAAc,SAAS,IAAI,EAAE,KAAK,YAAA,CAAa,EAAE;AAAA,IAAA;AAExD,QAAI;AACF,YAAM,QAA4B;AAAA,QAChC,MAAM;AAAA,QACN,QAAQ,UAAU;AAAA,QAClB,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,QAC1B,GAAI,OAAO,KAAK,MAAM,EAAE,SAAS,IAAI,EAAE,OAAA,IAAW,CAAA;AAAA,QAClD,GAAI,SAAS,SAAS,IAAI,EAAE,SAAA,IAAa,CAAA;AAAA,MAAC;AAE5C,UAAI,aAAa,OAAW,QAAM,qCAAW;AAAA,UACxC,QAAM,qCAAW,OAAO;AAC7B,iBAAW,WAAW,SAAU,wCAAY,SAAS,EAAE,MAAM;AAC7D,YAAA;AACA,UAAI,qBAAqB,KAAK;AAAA,IAChC,UAAA;AACE,oBAAc,UAAU;AACxB,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF;AAEA,MAAI,CAAC,QAAQ,KAAK,KAAA,EAAO,WAAW,GAAG;AACrC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,QAAQ,IAAI;AAAA,QAC3B,WAAU;AAAA,QAET,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,aAAW;AAAA,MACX,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,OAAO;AAAA,YACP,UAAU;AAAA,YACV,cAAc,OAAO,gBAAgB,CAAA;AAAA,YACrC,iBAAiB,CAAC,MAAM,YAAY,QAAQ,IAAI,EAAE,IAAI,CAAC;AAAA,YACvD,UAAU,MAAM,KAAK,OAAA;AAAA,YACrB,UAAU,MAAM;AACd,oBAAA;AACA,kBAAI,qBAAqB,KAAK;AAAA,YAChC;AAAA,YACA;AAAA,YAGA,WAAW,aAAc,eAAe;AAAA,YACxC,eAAY;AAAA,YACZ,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEX,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;AACb,oBAAA;AACA,sBAAQ,KAAK;AAAA,YACf;AAAA,YACA,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,SAAS,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAG7C,qBAAC,OAAA,EAAI,WAAU,2DAEX,UAAA;AAAA,UAAA;AAAA,YACE,CAAC,YAAY,mBAAmB,UAAU;AAAA,YAC1C,CAAC,YAAY,mBAAmB,YAAY;AAAA,UAAA,EAE9C,IAAI,CAAC,CAAC,OAAO,OAAO,IAAI,MACxB;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,gBAAc,WAAW;AAAA,cACzB,SAAS,MACP,UAAU,CAAC,YAAa,YAAY,QAAQ,SAAY,KAAM;AAAA,cAEhE,WAAW;AAAA,gBACT;AAAA,gBACA,WAAW,UACR,UAAU,aACP,2GACA;AAAA,cAAA;AAAA,cAGR,UAAA,oBAAC,MAAA,EAAK,MAAY,WAAU,UAAA,CAAU;AAAA,YAAA;AAAA,YAfjC;AAAA,UAAA,CAiBR;AAAA,WACC,OAAO,UAAU,CAAA,GAAI,IAAI,CAAC,UAC1B;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC;AAAA,cACA,OAAO,OAAO,MAAM,GAAG;AAAA,cACvB,UAAU,CAAC,UAAU,SAAS,MAAM,KAAK,KAAK;AAAA,YAAA;AAAA,YAHzC,MAAM;AAAA,UAAA,CAKd;AAAA,WACA,+CAAe,UACd,oBAAC,OAAA,EAAI,WAAU,sBACZ,UAAA,cAAc,IAAI,CAAC,WAClB;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,MAAK;AAAA,cACL,SAAS,MAAM,KAAK,OAAO,OAAO,EAAE;AAAA,cACpC,UAAU,cAAe,CAAC,KAAK,KAAA,KAAU,CAAC;AAAA,cAC1C,WAAU;AAAA,cAET,UAAA,OAAO;AAAA,YAAA;AAAA,YANH,OAAO;AAAA,UAAA,CAQf,GACH,IAEA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,eAAY;AAAA,cACZ,cAAW;AAAA,cACX,SAAS,MAAM,KAAK,OAAA;AAAA,cACpB,UAAU,cAAe,CAAC,KAAK,KAAA,KAAU,CAAC;AAAA,cAC1C,WAAU;AAAA,cAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,WAAW,WAAU,UAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC7C,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/comments/CommentSidePanel.cjs

@@ -156,7 +156,8 @@ function FocusedComments({
   anchor,
   label,
   compact,
-  threadToMarkdown
+  threadToMarkdown,
+  createActions
 }) {
   const comments = commentUtils.selectAnchorThreads(visible, anchor);
   const hasComments = comments.length > 0;
@@ -178,6 +179,7 @@ function FocusedComments({
         defaultExpanded: hasComments,
         composerPlaceholder: hasComments ? "Add another top-level comment…" : "Add a comment…",
         ...ctx.callbacks,
+        ...createActions ? { createActions } : {},
         ...threadToMarkdown ? { threadToMarkdown } : {}
       }
     )
@@ -329,6 +331,7 @@ function CommentSidePanel(props) {
                 ctx,
                 comments: ctx.comments,
                 anchor: ctx.focusedAnchor,
+                ...props.createActions ? { createActions: props.createActions } : {},
                 label: label(ctx.focusedAnchor),
                 ...props.compact !== void 0 ? { compact: props.compact } : {},
                 ...props.threadToMarkdown ? { threadToMarkdown: props.threadToMarkdown } : {}