npm - @openhands/agent-canvas - Versions diffs - 1.0.0-beta.6 → 1.0.0-beta.7 - Mend

@openhands/agent-canvas 1.0.0-beta.6 → 1.0.0-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (802) hide show

package/dist/components/features/mcp-page/save-as-secret-toggle.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"save-as-secret-toggle.js","names":[],"sources":["../../../../src/components/features/mcp-page/save-as-secret-toggle.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface SaveAsSecretToggleProps {\n fieldKey: string;\n checked: boolean;\n onToggle: (value: boolean) => void;\n}\n\nexport function SaveAsSecretToggle({\n fieldKey,\n checked,\n onToggle,\n}: SaveAsSecretToggleProps) {\n const { t } = useTranslation(\"openhands\");\n\n return (\n <label\n data-testid={`mcp-install-save-secret-${fieldKey}`}\n className={cn(\n \"flex items-center gap-2 px-3 py-2 mt-0.5 rounded-lg border cursor-pointer transition-colors\",\n checked\n ? \"border-green-500/35 bg-green-500/10\"\n : \"border-[var(--oh-border)] bg-transparent hover:bg-white/[0.03]\",\n )}\n >\n {/* sr-only keeps the real checkbox in the accessibility tree so AT\n users can toggle it without seeing the custom visual track. */}\n <input\n className=\"sr-only\"\n id={`mcp-save-secret-checkbox-${fieldKey}`}\n type=\"checkbox\"\n checked={checked}\n onChange={(e) => onToggle(e.target.checked)}\n />\n {/* aria-hidden: purely decorative — the checkbox above is the semantic control. */}\n <span\n aria-hidden=\"true\"\n className={cn(\n \"relative inline-flex h-[22px] w-[40px] shrink-0 items-center rounded-full border transition-colors duration-200\",\n checked\n ? \"border-green-500 bg-green-500\"\n : \"border-[var(--oh-border)] bg-surface-raised\",\n )}\n >\n <span\n className={cn(\n \"inline-block size-4 rounded-full transition-transform duration-200\",\n checked\n ? \"translate-x-[21px] bg-white\"\n : \"translate-x-[2px] bg-[var(--oh-muted)]\",\n )}\n />\n </span>\n <span className=\"text-sm\">{t(I18nKey.MCP$ALSO_SAVE_AS_SECRET)}</span>\n <code\n className={cn(\n \"ml-auto text-[11px] font-mono tracking-tight border rounded px-1.5 py-0.5\",\n checked\n ? \"text-green-500 border-green-500/35 bg-white/[0.04]\"\n : \"text-tertiary-alt border-[var(--oh-border)]\",\n )}\n >\n {fieldKey}\n </code>\n <StyledTooltip\n content={t(I18nKey.MCP$SAVE_AS_SECRET_TOOLTIP)}\n placement=\"top\"\n >\n {/* button so the tooltip is keyboard-reachable; type=button prevents\n accidental form submission when the user presses Enter. */}\n <button\n type=\"button\"\n aria-label={t(I18nKey.MCP$SAVE_AS_SECRET_TOOLTIP)}\n className=\"flex items-center justify-center size-[15px] shrink-0 rounded-full border border-[var(--oh-muted)] text-tertiary-alt text-[9px] font-bold cursor-help\"\n onClick={(e) => e.preventDefault()}\n >\n ?\n </button>\n </StyledTooltip>\n </label>\n );\n}\n"],"mappings":";;;;;;AAWA,SAAgB,EAAmB,EACjC,aACA,YACA,eAC0B;CAC1B,IAAM,EAAE,SAAM,EAAe,YAAY;AAEzC,QACE,kBAAC,SAAD;EACE,eAAa,2BAA2B;EACxC,WAAW,EACT,+FACA,IACI,wCACA,iEACL;YAPH;GAWE,kBAAC,SAAD;IACE,WAAU;IACV,IAAI,4BAA4B;IAChC,MAAK;IACI;IACT,WAAW,MAAM,EAAS,EAAE,OAAO,QAAQ;IAC3C,CAAA;GAEF,kBAAC,QAAD;IACE,eAAY;IACZ,WAAW,EACT,mHACA,IACI,kCACA,8CACL;cAED,kBAAC,QAAD,EACE,WAAW,EACT,sEACA,IACI,gCACA,yCACL,EACD,CAAA;IACG,CAAA;GACP,kBAAC,QAAD;IAAM,WAAU;cAAW,EAAE,EAAQ,wBAAwB;IAAQ,CAAA;GACrE,kBAAC,QAAD;IACE,WAAW,EACT,6EACA,IACI,uDACA,8CACL;cAEA;IACI,CAAA;GACP,kBAAC,GAAD;IACE,SAAS,EAAE,EAAQ,2BAA2B;IAC9C,WAAU;cAIV,kBAAC,UAAD;KACE,MAAK;KACL,cAAY,EAAE,EAAQ,2BAA2B;KACjD,WAAU;KACV,UAAU,MAAM,EAAE,gBAAgB;eACnC;KAEQ,CAAA;IACK,CAAA;GACV"}

package/dist/components/features/onboarding/onboarding-modal.d.ts CHANGED Viewed

@@ -6,8 +6,8 @@ interface OnboardingModalProps {
  * Top-level onboarding modal for first-time users.
  *
  * The flow is a fixed sequence of four steps:
- *   0. Choose agent
- *   1. Check backend
+ *   0. Check backend
+ *   1. Choose agent
  *   2. Set up LLM
  *   3. Say hello (creates a fresh conversation, then closes)
  *

package/dist/components/features/onboarding/steps/check-backend-step.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 interface CheckBackendStepProps {
-    onBack: () => void;
+    onBack?: () => void;
     onNext: () => void;
 }
 /**

package/dist/components/features/onboarding/steps/choose-agent-step.d.ts CHANGED Viewed

@@ -6,7 +6,8 @@ export declare function AgentOptionIcon({ id, muted }: {
 interface ChooseAgentStepProps {
     selectedAgentId: OnboardingAgentId;
     onSelect: (agentId: OnboardingAgentId) => void;
+    onBack?: () => void;
     onNext: () => void;
 }
-export declare function ChooseAgentStep({ selectedAgentId, onSelect, onNext, }: ChooseAgentStepProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChooseAgentStep({ selectedAgentId, onSelect, onBack, onNext, }: ChooseAgentStepProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/features/onboarding/steps/setup-acp-secrets-step.d.ts CHANGED Viewed

@@ -3,25 +3,34 @@ interface SetupAcpSecretsStepProps {
     /** ACP provider whose credentials we're collecting (e.g. ``"claude-code"``).
      * Typed as {@link OnboardingAgentId} — the same type the onboarding modal
      * tracks — so a mistyped key is a compile error rather than a silently empty
-     * form. Providers without a credentials entry (``"openhands"``,
-     * ``"gemini-cli"``) simply yield no fields. */
+     * form. Providers without a credentials entry (``"openhands"``) simply yield
+     * no fields. */
     providerKey: OnboardingAgentId;
+    /**
+     * Whether this is the currently visible onboarding slide. The modal mounts
+     * every slide at once, so we only run the (subprocess-spinning) login probe
+     * once the user has actually reached this step — by which point the backend
+     * is confirmed connected.
+     */
+    isActive: boolean;
     onBack: () => void;
     onNext: () => void;
 }
 /**
- * Onboarding credentials step for ACP providers that authenticate via an
- * env-var API key (Claude Code, Codex). The fields are derived from
+ * Onboarding credentials step for ACP providers that expose an env-var API key
+ * (Claude Code, Codex, Gemini CLI). The fields are derived from
  * {@link getAcpProviderSecrets}; each one maps 1:1 to a **global secret**
  * whose name equals the env var the agent-server exports into the provider
  * subprocess. Saving here is therefore the same as adding the secret under
  * Settings → Secrets — it shows up there afterwards.
  *
- * The step is intentionally skippable: a user may authenticate Claude Code via
- * a subscription login, or already have the env var set on the backend, so we
- * never block "Next" on a value. Empty fields are simply not written; a field
- * whose secret already exists shows an "already saved" placeholder and is left
- * untouched unless the user types a replacement.
+ * The step is intentionally skippable: a user may authenticate via a
+ * subscription / OAuth login (a Claude login, or Gemini's Google login), or
+ * already have the env var set on the backend, so we never block "Next" on a
+ * value — and the login probe shows a "you're already signed in" banner when it
+ * detects one. Empty fields are simply not written; a field whose secret
+ * already exists shows an "already saved" placeholder and is left untouched
+ * unless the user types a replacement.
  */
-export declare function SetupAcpSecretsStep({ providerKey, onBack, onNext, }: SetupAcpSecretsStepProps): import("react/jsx-runtime").JSX.Element;
+export declare function SetupAcpSecretsStep({ providerKey, isActive, onBack, onNext, }: SetupAcpSecretsStepProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/features/settings/llm-profiles/llm-settings-local-view.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- const e=require(`../../../../_virtual/_rolldown/runtime.cjs`);require(`../../../../utils/custom-toast-handlers.cjs`),require(`../../../../api/profiles-service/profiles-service.api.cjs`),require(`../../../../hooks/query/use-llm-profiles.cjs`),require(`../../../../hooks/query/use-settings.cjs`),require(`../../../../ui/typography.cjs`),require(`../brand-button.cjs`),require(`../../../../hooks/query/use-agent-settings-schema.cjs`),require(`./profile-name-input.cjs`),require(`./llm-profiles-manager.cjs`),require(`../../../../hooks/mutation/use-save-llm-profile.cjs`),require(`../../../../contexts/settings-section-header-context.cjs`),require(`../../../../routes/llm-settings.cjs`);let t=require(`react`);t=e.__toESM(t,1),require(`react/jsx-runtime`);
1	+ const e=require(`../../../../_virtual/_rolldown/runtime.cjs`);require(`../../../../utils/custom-toast-handlers.cjs`),require(`../../../../api/profiles-service/profiles-service.api.cjs`),require(`../../../../hooks/query/use-llm-profiles.cjs`),require(`../../../../hooks/query/use-settings.cjs`),require(`../../../../ui/typography.cjs`),require(`../brand-button.cjs`),require(`../../../../hooks/query/use-agent-settings-schema.cjs`),require(`./profile-name-input.cjs`),require(`../../../../hooks/mutation/use-activate-llm-profile.cjs`),require(`./llm-profiles-manager.cjs`),require(`../../../../hooks/mutation/use-save-llm-profile.cjs`),require(`../../../shared/buttons/back-nav-button.cjs`),require(`../../../../contexts/settings-section-header-context.cjs`),require(`../../../../routes/llm-settings.cjs`);let t=require(`react`);t=e.__toESM(t,1),require(`react/jsx-runtime`);

package/dist/components/features/settings/llm-profiles/llm-settings-local-view.d.ts CHANGED Viewed

@@ -1,3 +1,8 @@
+export declare function shouldReapplyProfileAfterSave({ activeProfileName, originalName, savedName, }: {
+    activeProfileName: string | null | undefined;
+    originalName: string | null | undefined;
+    savedName: string;
+}): boolean;
 /**
  * LlmSettingsLocalView provides an integrated view for managing LLM profiles
  * in local agent-server mode. It supports listing, creating, and editing profiles.

package/dist/components/features/settings/llm-profiles/llm-settings-local-view.js CHANGED Viewed

@@ -6,8 +6,10 @@ import "../../../../ui/typography.js";
 import "../brand-button.js";
 import "../../../../hooks/query/use-agent-settings-schema.js";
 import "./profile-name-input.js";
+import "../../../../hooks/mutation/use-activate-llm-profile.js";
 import "./llm-profiles-manager.js";
 import "../../../../hooks/mutation/use-save-llm-profile.js";
+import "../../../shared/buttons/back-nav-button.js";
 import "../../../../contexts/settings-section-header-context.js";
 import "../../../../routes/llm-settings.js";
 import "react";

package/dist/components/features/settings/llm-profiles/profile-actions-menu.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- const e=require(`../../../../_virtual/_rolldown/runtime.cjs`);require(`../../../../utils/utils.cjs`),require(`../../../../icons/u-check-circle.cjs`),require(`../../../../icons/u-edit.cjs`),require(`../../../../icons/u-delete.cjs`),require(`../../conversation/conversation-name-context-menu-icon-text.cjs`),require(`react`),require(`react/jsx-runtime`);let t=require(`react-dom`);t=e.__toESM(t,1);
1	+ const e=require(`../../../../_virtual/_rolldown/runtime.cjs`);require(`../../../../utils/utils.cjs`),require(`../../../../utils/dropdown-classes.cjs`),require(`../../../../icons/u-check-circle.cjs`),require(`../../../../icons/u-edit.cjs`),require(`../../../../icons/u-delete.cjs`),require(`../../conversation/conversation-name-context-menu-icon-text.cjs`),require(`react`),require(`react/jsx-runtime`);let t=require(`react-dom`);t=e.__toESM(t,1);

package/dist/components/features/settings/llm-profiles/profile-actions-menu.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import "../../../../utils/utils.js";
+import "../../../../utils/dropdown-classes.js";
 import "../../../../icons/u-check-circle.js";
 import "../../../../icons/u-edit.js";
 import "../../../../icons/u-delete.js";

package/dist/components/features/skills/extensions-navigation.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../utils/utils.cjs`),r=require(`../../../constants/acp-providers.cjs`),i=require(`../../shared/buttons/styled-tooltip.cjs`),a=require(`../../../hooks/query/use-settings.cjs`),o=require(`../../shared/navigation-link.cjs`),s=require(`../../../icons/skills.cjs`),c=require(`../../../hooks/use-breakpoint.cjs`),l=require(`../sidebar/sidebar-layout.cjs`),u=require(`../settings/backend-synced-settings-badge.cjs`),d=require(`../../../icons/server-process.cjs`),f=require(`../../../stores/sidebar-store.cjs`);let p=require(`react/jsx-runtime`);var m=[{to:`/skills`,label:`Skills`,icon:(0,p.jsx)(s.default,{width:16,height:16,"aria-hidden":`true`}),end:!0},{to:`/mcp`,label:`MCP Servers`,icon:(0,p.jsx)(d.default,{width:16,height:16}),end:!0,disabledByAcp:!0},{to:`/plugins`,label:`Plugins`,icon:(0,p.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,width:16,height:16,"aria-hidden":`true`,children:[(0,p.jsx)(`path`,{d:`M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z`}),(0,p.jsx)(`path`,{d:`m3.3 7 8.7 5 8.7-5`}),(0,p.jsx)(`path`,{d:`M12 22V12`})]}),end:!0,comingSoon:!0}];function h(){let{t:s}=e.useTranslation(`openhands`),{data:d}=a.useSettings(),h=f.useSidebarStore(e=>e.collapsed),g=c.useBreakpoint(1023),_=c.useBreakpoint(767),v=!h&&g&&!_,y=d?.agent_settings?.agent_kind===`acp`,b=typeof d?.agent_settings?.acp_server==`string`?d.agent_settings.acp_server:void 0,x=y?r.ACP_PROVIDERS.find(({key:e})=>e===b)?.display_name??`ACP Agent`:void 0;return v?null:(0,p.jsxs)(`aside`,{"data-testid":`extensions-navbar-desktop`,className:`hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start`,children:[(0,p.jsx)(`span`,{className:`px-2 text-sm font-normal text-white`,children:s(t.I18nKey.NAV$EXTENSIONS)}),(0,p.jsx)(`div`,{className:`flex flex-col gap-0.5 pt-0.5`,children:m.map(e=>{let r=!!(y&&e.disabledByAcp),a=(0,p.jsx)(`span`,{className:`shrink-0 flex items-center justify-center`,children:e.icon}),c=(0,p.jsx)(`span`,{className:`truncate`,children:e.label}),u=e.comingSoon&&(0,p.jsx)(`span`,{className:`ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]`,children:s(t.I18nKey.NAV$COMING_SOON)});return r?(0,p.jsx)(i.StyledTooltip,{content:s(t.I18nKey.SETTINGS$AGENT_DISABLED_TOOLTIP,{agentName:x}),placement:`right`,children:(0,p.jsxs)(`span`,{"aria-disabled":`true`,"data-testid":`sidebar-extensions-${e.to}`,className:n.cn(l.sidebarNavRowClassName(),`truncate text-[var(--oh-muted)] opacity-50 cursor-not-allowed`),children:[a,c,u]})},e.to):(0,p.jsxs)(o.NavigationLink,{to:e.to,end:e.end,"data-testid":`sidebar-extensions-${e.to}`,className:({isActive:e})=>n.cn(l.sidebarNavRowClassName(),`truncate`,e?l.SIDEBAR_ROW_INTERACTIVE_CLASS.active:l.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),children:[a,c,u]},e.to)})}),(0,p.jsx)(`div`,{className:`px-2 pt-3`,children:(0,p.jsx)(u.BackendSyncedSettingsBadge,{})})]})}exports.ExtensionsNavigation=h;
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../utils/utils.cjs`),r=require(`../../../constants/acp-providers.cjs`),i=require(`../../shared/buttons/styled-tooltip.cjs`),a=require(`../../../hooks/query/use-settings.cjs`),o=require(`../../shared/navigation-link.cjs`),s=require(`../../../icons/skills.cjs`),c=require(`../../../hooks/use-breakpoint.cjs`),l=require(`../sidebar/sidebar-layout.cjs`),u=require(`../settings/backend-synced-settings-badge.cjs`),d=require(`../../../icons/server-process.cjs`),f=require(`../../../stores/sidebar-store.cjs`);let p=require(`react/jsx-runtime`);var m=[{to:`/skills`,label:`Skills`,icon:(0,p.jsx)(s.default,{width:16,height:16,"aria-hidden":`true`}),end:!0},{to:`/mcp`,label:`MCP Servers`,icon:(0,p.jsx)(d.default,{width:16,height:16}),end:!0,disabledByAcp:!0},{to:`/plugins`,label:`Plugins`,icon:(0,p.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,width:16,height:16,"aria-hidden":`true`,children:[(0,p.jsx)(`path`,{d:`M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z`}),(0,p.jsx)(`path`,{d:`m3.3 7 8.7 5 8.7-5`}),(0,p.jsx)(`path`,{d:`M12 22V12`})]}),end:!0,comingSoon:!0}];function h(){let{t:s}=e.useTranslation(`openhands`),{data:d}=a.useSettings(),h=f.useSidebarStore(e=>e.collapsed),g=c.useBreakpoint(1023),_=c.useBreakpoint(767),v=!h&&g&&!_,y=d?.agent_settings?.agent_kind===`acp`,b=typeof d?.agent_settings?.acp_server==`string`?d.agent_settings.acp_server:void 0,x=y?r.ACP_PROVIDERS.find(({key:e})=>e===b)?.display_name??`ACP Agent`:void 0;return v?null:(0,p.jsxs)(`aside`,{"data-testid":`extensions-navbar-desktop`,className:`hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start`,children:[(0,p.jsx)(`span`,{className:`px-2 text-sm font-normal text-white`,children:s(t.I18nKey.NAV$CUSTOMIZE)}),(0,p.jsx)(`div`,{className:`flex flex-col gap-0.5 pt-0.5`,children:m.map(e=>{let r=!!(y&&e.disabledByAcp),a=(0,p.jsx)(`span`,{className:`shrink-0 flex items-center justify-center`,children:e.icon}),c=(0,p.jsx)(`span`,{className:`truncate`,children:e.label}),u=e.comingSoon&&(0,p.jsx)(`span`,{className:`ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]`,children:s(t.I18nKey.NAV$COMING_SOON)});return r?(0,p.jsx)(i.StyledTooltip,{content:s(t.I18nKey.SETTINGS$AGENT_DISABLED_TOOLTIP,{agentName:x}),placement:`right`,children:(0,p.jsxs)(`span`,{"aria-disabled":`true`,"data-testid":`sidebar-extensions-${e.to}`,className:n.cn(l.sidebarNavRowClassName(),`truncate text-[var(--oh-muted)] opacity-50 cursor-not-allowed`),children:[a,c,u]})},e.to):(0,p.jsxs)(o.NavigationLink,{to:e.to,end:e.end,"data-testid":`sidebar-extensions-${e.to}`,className:({isActive:e})=>n.cn(l.sidebarNavRowClassName(),`truncate`,e?l.SIDEBAR_ROW_INTERACTIVE_CLASS.active:l.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),children:[a,c,u]},e.to)})}),(0,p.jsx)(`div`,{className:`px-2 pt-3`,children:(0,p.jsx)(u.BackendSyncedSettingsBadge,{})})]})}exports.ExtensionsNavigation=h;
 //# sourceMappingURL=extensions-navigation.cjs.map

package/dist/components/features/skills/extensions-navigation.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"extensions-navigation.cjs","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { ACP_PROVIDERS } from \"#/constants/acp-providers\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n SIDEBAR_ROW_INTERACTIVE_CLASS,\n sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useSidebarStore } from \"#/stores/sidebar-store\";\nimport { useBreakpoint } from \"#/hooks/use-breakpoint\";\n\ninterface ExtensionNavItem {\n to: string;\n label: string;\n icon: React.ReactElement;\n end?: boolean;\n comingSoon?: boolean;\n /*\n When true, this item greys out (and the /route's ``clientLoader``\n * bounces to ``/settings/agent``) while an ACP agent is active.\n * The ACP sub-agent manages its own MCP servers; the SDK rejects\n * ``mcp_config`` on ``ACPAgent`` init outright, so the OpenHands-\n * side editor would silently no-op against the running subprocess.\n */\n disabledByAcp?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n {\n to: \"/skills\",\n label: \"Skills\",\n icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n end: true,\n },\n {\n to: \"/mcp\",\n label: \"MCP Servers\",\n icon: <ServerProcessIcon width={16} height={16} />,\n end: true,\n disabledByAcp: true,\n },\n {\n to: \"/plugins\",\n label: \"Plugins\",\n icon: (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n width={16}\n height={16}\n aria-hidden=\"true\"\n >\n <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n <path d=\"m3.3 7 8.7 5 8.7-5\" />\n <path d=\"M12 22V12\" />\n </svg>\n ),\n end: true,\n comingSoon: true,\n },\n];\n\nexport function ExtensionsNavigation() {\n const { t } = useTranslation(\"openhands\");\n const { data: settings } = useSettings();\n const sidebarCollapsed = useSidebarStore((state) => state.collapsed);\n // At iPad portrait widths (md to <lg) an expanded primary Sidebar (300px)\n // plus this nav (260px) leaves the main content unreadable. Hide ourselves\n // until the user collapses the Sidebar or the viewport reaches `lg`.\n const belowLg = useBreakpoint(1023);\n const belowMd = useBreakpoint(767);\n const hideForExpandedSidebar = !sidebarCollapsed && belowLg && !belowMd;\n const isAcpAgent = settings?.agent_settings?.agent_kind === \"acp\";\n const acpServerKey =\n typeof settings?.agent_settings?.acp_server === \"string\"\n ? settings.agent_settings.acp_server\n : undefined;\n const acpServerName = isAcpAgent\n ? (ACP_PROVIDERS.find(({ key }) => key === acpServerKey)?.display_name ??\n \"ACP Agent\")\n : undefined;\n\n if (hideForExpandedSidebar) return null;\n\n return (\n <aside\n data-testid=\"extensions-navbar-desktop\"\n className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n >\n <span className=\"px-2 text-sm font-normal text-white\">\n {t(I18nKey.NAV$~~EXTENSIONS~~)}\n </span>\n <div className=\"flex flex-col gap-0.5 pt-0.5\">\n {EXTENSIONS_NAV_ITEMS.map((item) => {\n const disabled = !!(isAcpAgent && item.disabledByAcp);\n const baseRow = (\n <span className=\"shrink-0 flex items-center justify-center\">\n {item.icon}\n </span>\n );\n const label = <span className=\"truncate\">{item.label}</span>;\n const comingSoonBadge = item.comingSoon && (\n <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n {t(I18nKey.NAV$COMING_SOON)}\n </span>\n );\n\n if (disabled) {\n // Render a non-clickable surrogate so the URL and a11y tree\n // both communicate \"you can't go here right now,\" then wrap\n // in StyledTooltip for the why. Mirrors the SettingsNavLink\n // disabled rendering — same flag (``disabledByAcp``), same\n // explanatory tooltip (\"Disabled while {agentName} is the\n // active agent\"), same greyed styles.\n return (\n <StyledTooltip\n key={item.to}\n content={t(I18nKey.SETTINGS$AGENT_DISABLED_TOOLTIP, {\n agentName: acpServerName,\n })}\n placement=\"right\"\n >\n <span\n aria-disabled=\"true\"\n data-testid={`sidebar-extensions-${item.to}`}\n className={cn(\n sidebarNavRowClassName(),\n \"truncate text-[var(--oh-muted)] opacity-50 cursor-not-allowed\",\n )}\n >\n {baseRow}\n {label}\n {comingSoonBadge}\n </span>\n </StyledTooltip>\n );\n }\n\n return (\n <NavigationLink\n key={item.to}\n to={item.to}\n end={item.end}\n data-testid={`sidebar-extensions-${item.to}`}\n className={({ isActive }) =>\n cn(\n sidebarNavRowClassName(),\n \"truncate\",\n isActive\n ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n )\n }\n >\n {baseRow}\n {label}\n {comingSoonBadge}\n </NavigationLink>\n );\n })}\n </div>\n <div className=\"px-2 pt-3\">\n <BackendSyncedSettingsBadge />\n </div>\n </aside>\n );\n}\n"],"mappings":"2tBAiCA,IAAa,EAA2C,CACtD,CACE,GAAI,UACJ,MAAO,SACP,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAY,MAAO,GAAI,OAAQ,GAAI,cAAY,OAAS,CAAA,CAC9D,IAAK,GACN,CACD,CACE,GAAI,OACJ,MAAO,cACP,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAmB,MAAO,GAAI,OAAQ,GAAM,CAAA,CAClD,IAAK,GACL,cAAe,GAChB,CACD,CACE,GAAI,WACJ,MAAO,UACP,MACE,EAAA,EAAA,MAAC,MAAD,CACE,MAAM,6BACN,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,MAAO,GACP,OAAQ,GACR,cAAY,gBAVd,EAYE,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,yHAA2H,CAAA,EACnI,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,qBAAuB,CAAA,EAC/B,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,YAAc,CAAA,CAClB,GAER,IAAK,GACL,WAAY,GACb,CACF,CAED,SAAgB,GAAuB,CACrC,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,KAAM,GAAa,EAAA,aAAa,CAClC,EAAmB,EAAA,gBAAiB,GAAU,EAAM,UAAU,CAI9D,EAAU,EAAA,cAAc,KAAK,CAC7B,EAAU,EAAA,cAAc,IAAI,CAC5B,EAAyB,CAAC,GAAoB,GAAW,CAAC,EAC1D,EAAa,GAAU,gBAAgB,aAAe,MACtD,EACJ,OAAO,GAAU,gBAAgB,YAAe,SAC5C,EAAS,eAAe,WACxB,IAAA,GACA,EAAgB,EACjB,EAAA,cAAc,MAAM,CAAE,SAAU,IAAQ,EAAa,EAAE,cACxD,YACA,IAAA,GAIJ,OAFI,EAA+B,MAGjC,EAAA,EAAA,MAAC,QAAD,CACE,cAAY,4BACZ,UAAU,yGAFZ,EAIE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,+CACb,EAAE,EAAA,QAAQ,~~eAAe~~,~~CACrB~~,CAAA,EACP,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,wCACZ,EAAqB,IAAK,GAAS,CAClC,IAAM,EAAW,CAAC,EAAE,GAAc,EAAK,eACjC,GACJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,qDACb,EAAK,KACD,CAAA,CAEH,GAAQ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oBAAY,EAAK,MAAa,CAAA,CACtD,EAAkB,EAAK,aAC3B,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,2IACb,EAAE,EAAA,QAAQ,gBAAgB,CACtB,CAAA,CAkCT,OA/BI,GAQA,EAAA,EAAA,KAAC,EAAA,cAAD,CAEE,QAAS,EAAE,EAAA,QAAQ,gCAAiC,CAClD,UAAW,EACZ,CAAC,CACF,UAAU,kBAEV,EAAA,EAAA,MAAC,OAAD,CACE,gBAAc,OACd,cAAa,sBAAsB,EAAK,KACxC,UAAW,EAAA,GACT,EAAA,wBAAwB,CACxB,gEACD,UANH,CAQG,EACA,EACA,EACI,GACO,CAlBT,EAAK,GAkBI,EAKlB,EAAA,EAAA,MAAC,EAAA,eAAD,CAEE,GAAI,EAAK,GACT,IAAK,EAAK,IACV,cAAa,sBAAsB,EAAK,KACxC,WAAY,CAAE,cACZ,EAAA,GACE,EAAA,wBAAwB,CACxB,WACA,EACI,EAAA,8BAA8B,OAC9B,EAAA,8BAA8B,KACnC,UAZL,CAeG,EACA,EACA,EACc,EAjBV,EAAK,GAiBK,EAEnB,CACE,CAAA,EACN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,2BAAD,EAA8B,CAAA,CAC1B,CAAA,CACA"}
1	+ {"version":3,"file":"extensions-navigation.cjs","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { ACP_PROVIDERS } from \"#/constants/acp-providers\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n SIDEBAR_ROW_INTERACTIVE_CLASS,\n sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useSidebarStore } from \"#/stores/sidebar-store\";\nimport { useBreakpoint } from \"#/hooks/use-breakpoint\";\n\ninterface ExtensionNavItem {\n to: string;\n label: string;\n icon: React.ReactElement;\n end?: boolean;\n comingSoon?: boolean;\n /*\n When true, this item greys out (and the /route's ``clientLoader``\n * bounces to ``/settings/agent``) while an ACP agent is active.\n * The ACP sub-agent manages its own MCP servers; the SDK rejects\n * ``mcp_config`` on ``ACPAgent`` init outright, so the OpenHands-\n * side editor would silently no-op against the running subprocess.\n */\n disabledByAcp?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n {\n to: \"/skills\",\n label: \"Skills\",\n icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n end: true,\n },\n {\n to: \"/mcp\",\n label: \"MCP Servers\",\n icon: <ServerProcessIcon width={16} height={16} />,\n end: true,\n disabledByAcp: true,\n },\n {\n to: \"/plugins\",\n label: \"Plugins\",\n icon: (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n width={16}\n height={16}\n aria-hidden=\"true\"\n >\n <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n <path d=\"m3.3 7 8.7 5 8.7-5\" />\n <path d=\"M12 22V12\" />\n </svg>\n ),\n end: true,\n comingSoon: true,\n },\n];\n\nexport function ExtensionsNavigation() {\n const { t } = useTranslation(\"openhands\");\n const { data: settings } = useSettings();\n const sidebarCollapsed = useSidebarStore((state) => state.collapsed);\n // At iPad portrait widths (md to <lg) an expanded primary Sidebar (300px)\n // plus this nav (260px) leaves the main content unreadable. Hide ourselves\n // until the user collapses the Sidebar or the viewport reaches `lg`.\n const belowLg = useBreakpoint(1023);\n const belowMd = useBreakpoint(767);\n const hideForExpandedSidebar = !sidebarCollapsed && belowLg && !belowMd;\n const isAcpAgent = settings?.agent_settings?.agent_kind === \"acp\";\n const acpServerKey =\n typeof settings?.agent_settings?.acp_server === \"string\"\n ? settings.agent_settings.acp_server\n : undefined;\n const acpServerName = isAcpAgent\n ? (ACP_PROVIDERS.find(({ key }) => key === acpServerKey)?.display_name ??\n \"ACP Agent\")\n : undefined;\n\n if (hideForExpandedSidebar) return null;\n\n return (\n <aside\n data-testid=\"extensions-navbar-desktop\"\n className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n >\n <span className=\"px-2 text-sm font-normal text-white\">\n {t(I18nKey.NAV$CUSTOMIZE)}\n </span>\n <div className=\"flex flex-col gap-0.5 pt-0.5\">\n {EXTENSIONS_NAV_ITEMS.map((item) => {\n const disabled = !!(isAcpAgent && item.disabledByAcp);\n const baseRow = (\n <span className=\"shrink-0 flex items-center justify-center\">\n {item.icon}\n </span>\n );\n const label = <span className=\"truncate\">{item.label}</span>;\n const comingSoonBadge = item.comingSoon && (\n <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n {t(I18nKey.NAV$COMING_SOON)}\n </span>\n );\n\n if (disabled) {\n // Render a non-clickable surrogate so the URL and a11y tree\n // both communicate \"you can't go here right now,\" then wrap\n // in StyledTooltip for the why. Mirrors the SettingsNavLink\n // disabled rendering — same flag (``disabledByAcp``), same\n // explanatory tooltip (\"Disabled while {agentName} is the\n // active agent\"), same greyed styles.\n return (\n <StyledTooltip\n key={item.to}\n content={t(I18nKey.SETTINGS$AGENT_DISABLED_TOOLTIP, {\n agentName: acpServerName,\n })}\n placement=\"right\"\n >\n <span\n aria-disabled=\"true\"\n data-testid={`sidebar-extensions-${item.to}`}\n className={cn(\n sidebarNavRowClassName(),\n \"truncate text-[var(--oh-muted)] opacity-50 cursor-not-allowed\",\n )}\n >\n {baseRow}\n {label}\n {comingSoonBadge}\n </span>\n </StyledTooltip>\n );\n }\n\n return (\n <NavigationLink\n key={item.to}\n to={item.to}\n end={item.end}\n data-testid={`sidebar-extensions-${item.to}`}\n className={({ isActive }) =>\n cn(\n sidebarNavRowClassName(),\n \"truncate\",\n isActive\n ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n )\n }\n >\n {baseRow}\n {label}\n {comingSoonBadge}\n </NavigationLink>\n );\n })}\n </div>\n <div className=\"px-2 pt-3\">\n <BackendSyncedSettingsBadge />\n </div>\n </aside>\n );\n}\n"],"mappings":"2tBAiCA,IAAa,EAA2C,CACtD,CACE,GAAI,UACJ,MAAO,SACP,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAY,MAAO,GAAI,OAAQ,GAAI,cAAY,OAAS,CAAA,CAC9D,IAAK,GACN,CACD,CACE,GAAI,OACJ,MAAO,cACP,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAmB,MAAO,GAAI,OAAQ,GAAM,CAAA,CAClD,IAAK,GACL,cAAe,GAChB,CACD,CACE,GAAI,WACJ,MAAO,UACP,MACE,EAAA,EAAA,MAAC,MAAD,CACE,MAAM,6BACN,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,MAAO,GACP,OAAQ,GACR,cAAY,gBAVd,EAYE,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,yHAA2H,CAAA,EACnI,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,qBAAuB,CAAA,EAC/B,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,YAAc,CAAA,CAClB,GAER,IAAK,GACL,WAAY,GACb,CACF,CAED,SAAgB,GAAuB,CACrC,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,KAAM,GAAa,EAAA,aAAa,CAClC,EAAmB,EAAA,gBAAiB,GAAU,EAAM,UAAU,CAI9D,EAAU,EAAA,cAAc,KAAK,CAC7B,EAAU,EAAA,cAAc,IAAI,CAC5B,EAAyB,CAAC,GAAoB,GAAW,CAAC,EAC1D,EAAa,GAAU,gBAAgB,aAAe,MACtD,EACJ,OAAO,GAAU,gBAAgB,YAAe,SAC5C,EAAS,eAAe,WACxB,IAAA,GACA,EAAgB,EACjB,EAAA,cAAc,MAAM,CAAE,SAAU,IAAQ,EAAa,EAAE,cACxD,YACA,IAAA,GAIJ,OAFI,EAA+B,MAGjC,EAAA,EAAA,MAAC,QAAD,CACE,cAAY,4BACZ,UAAU,yGAFZ,EAIE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,+CACb,EAAE,EAAA,QAAQ,cAAc,CACpB,CAAA,EACP,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,wCACZ,EAAqB,IAAK,GAAS,CAClC,IAAM,EAAW,CAAC,EAAE,GAAc,EAAK,eACjC,GACJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,qDACb,EAAK,KACD,CAAA,CAEH,GAAQ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oBAAY,EAAK,MAAa,CAAA,CACtD,EAAkB,EAAK,aAC3B,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,2IACb,EAAE,EAAA,QAAQ,gBAAgB,CACtB,CAAA,CAkCT,OA/BI,GAQA,EAAA,EAAA,KAAC,EAAA,cAAD,CAEE,QAAS,EAAE,EAAA,QAAQ,gCAAiC,CAClD,UAAW,EACZ,CAAC,CACF,UAAU,kBAEV,EAAA,EAAA,MAAC,OAAD,CACE,gBAAc,OACd,cAAa,sBAAsB,EAAK,KACxC,UAAW,EAAA,GACT,EAAA,wBAAwB,CACxB,gEACD,UANH,CAQG,EACA,EACA,EACI,GACO,CAlBT,EAAK,GAkBI,EAKlB,EAAA,EAAA,MAAC,EAAA,eAAD,CAEE,GAAI,EAAK,GACT,IAAK,EAAK,IACV,cAAa,sBAAsB,EAAK,KACxC,WAAY,CAAE,cACZ,EAAA,GACE,EAAA,wBAAwB,CACxB,WACA,EACI,EAAA,8BAA8B,OAC9B,EAAA,8BAA8B,KACnC,UAZL,CAeG,EACA,EACA,EACc,EAjBV,EAAK,GAiBK,EAEnB,CACE,CAAA,EACN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,2BAAD,EAA8B,CAAA,CAC1B,CAAA,CACA"}

package/dist/components/features/skills/extensions-navigation.js CHANGED Viewed

@@ -66,7 +66,7 @@ function _() {
 		children: [
 			/* @__PURE__ */ m("span", {
 				className: "px-2 text-sm font-normal text-white",
-				children: s(t.NAV$EXTENSIONS)
+				children: s(t.NAV$CUSTOMIZE)
 			}),
 			/* @__PURE__ */ m("div", {
 				className: "flex flex-col gap-0.5 pt-0.5",

package/dist/components/features/skills/extensions-navigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"extensions-navigation.js","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { ACP_PROVIDERS } from \"#/constants/acp-providers\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n SIDEBAR_ROW_INTERACTIVE_CLASS,\n sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useSidebarStore } from \"#/stores/sidebar-store\";\nimport { useBreakpoint } from \"#/hooks/use-breakpoint\";\n\ninterface ExtensionNavItem {\n to: string;\n label: string;\n icon: React.ReactElement;\n end?: boolean;\n comingSoon?: boolean;\n /*\n When true, this item greys out (and the /route's ``clientLoader``\n * bounces to ``/settings/agent``) while an ACP agent is active.\n * The ACP sub-agent manages its own MCP servers; the SDK rejects\n * ``mcp_config`` on ``ACPAgent`` init outright, so the OpenHands-\n * side editor would silently no-op against the running subprocess.\n */\n disabledByAcp?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n {\n to: \"/skills\",\n label: \"Skills\",\n icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n end: true,\n },\n {\n to: \"/mcp\",\n label: \"MCP Servers\",\n icon: <ServerProcessIcon width={16} height={16} />,\n end: true,\n disabledByAcp: true,\n },\n {\n to: \"/plugins\",\n label: \"Plugins\",\n icon: (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n width={16}\n height={16}\n aria-hidden=\"true\"\n >\n <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n <path d=\"m3.3 7 8.7 5 8.7-5\" />\n <path d=\"M12 22V12\" />\n </svg>\n ),\n end: true,\n comingSoon: true,\n },\n];\n\nexport function ExtensionsNavigation() {\n const { t } = useTranslation(\"openhands\");\n const { data: settings } = useSettings();\n const sidebarCollapsed = useSidebarStore((state) => state.collapsed);\n // At iPad portrait widths (md to <lg) an expanded primary Sidebar (300px)\n // plus this nav (260px) leaves the main content unreadable. Hide ourselves\n // until the user collapses the Sidebar or the viewport reaches `lg`.\n const belowLg = useBreakpoint(1023);\n const belowMd = useBreakpoint(767);\n const hideForExpandedSidebar = !sidebarCollapsed && belowLg && !belowMd;\n const isAcpAgent = settings?.agent_settings?.agent_kind === \"acp\";\n const acpServerKey =\n typeof settings?.agent_settings?.acp_server === \"string\"\n ? settings.agent_settings.acp_server\n : undefined;\n const acpServerName = isAcpAgent\n ? (ACP_PROVIDERS.find(({ key }) => key === acpServerKey)?.display_name ??\n \"ACP Agent\")\n : undefined;\n\n if (hideForExpandedSidebar) return null;\n\n return (\n <aside\n data-testid=\"extensions-navbar-desktop\"\n className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n >\n <span className=\"px-2 text-sm font-normal text-white\">\n {t(I18nKey.NAV$~~EXTENSIONS~~)}\n </span>\n <div className=\"flex flex-col gap-0.5 pt-0.5\">\n {EXTENSIONS_NAV_ITEMS.map((item) => {\n const disabled = !!(isAcpAgent && item.disabledByAcp);\n const baseRow = (\n <span className=\"shrink-0 flex items-center justify-center\">\n {item.icon}\n </span>\n );\n const label = <span className=\"truncate\">{item.label}</span>;\n const comingSoonBadge = item.comingSoon && (\n <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n {t(I18nKey.NAV$COMING_SOON)}\n </span>\n );\n\n if (disabled) {\n // Render a non-clickable surrogate so the URL and a11y tree\n // both communicate \"you can't go here right now,\" then wrap\n // in StyledTooltip for the why. Mirrors the SettingsNavLink\n // disabled rendering — same flag (``disabledByAcp``), same\n // explanatory tooltip (\"Disabled while {agentName} is the\n // active agent\"), same greyed styles.\n return (\n <StyledTooltip\n key={item.to}\n content={t(I18nKey.SETTINGS$AGENT_DISABLED_TOOLTIP, {\n agentName: acpServerName,\n })}\n placement=\"right\"\n >\n <span\n aria-disabled=\"true\"\n data-testid={`sidebar-extensions-${item.to}`}\n className={cn(\n sidebarNavRowClassName(),\n \"truncate text-[var(--oh-muted)] opacity-50 cursor-not-allowed\",\n )}\n >\n {baseRow}\n {label}\n {comingSoonBadge}\n </span>\n </StyledTooltip>\n );\n }\n\n return (\n <NavigationLink\n key={item.to}\n to={item.to}\n end={item.end}\n data-testid={`sidebar-extensions-${item.to}`}\n className={({ isActive }) =>\n cn(\n sidebarNavRowClassName(),\n \"truncate\",\n isActive\n ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n )\n }\n >\n {baseRow}\n {label}\n {comingSoonBadge}\n </NavigationLink>\n );\n })}\n </div>\n <div className=\"px-2 pt-3\">\n <BackendSyncedSettingsBadge />\n </div>\n </aside>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiCA,IAAa,IAA2C;CACtD;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAY,OAAO;GAAI,QAAQ;GAAI,eAAY;GAAS,CAAA;EAC9D,KAAK;EACN;CACD;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAmB,OAAO;GAAI,QAAQ;GAAM,CAAA;EAClD,KAAK;EACL,eAAe;EAChB;CACD;EACE,IAAI;EACJ,OAAO;EACP,MACE,kBAAC,OAAD;GACE,OAAM;GACN,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,OAAO;GACP,QAAQ;GACR,eAAY;aAVd;IAYE,kBAAC,QAAD,EAAM,GAAE,0HAA2H,CAAA;IACnI,kBAAC,QAAD,EAAM,GAAE,sBAAuB,CAAA;IAC/B,kBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;IAClB;;EAER,KAAK;EACL,YAAY;EACb;CACF;AAED,SAAgB,IAAuB;CACrC,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,MAAM,MAAa,GAAa,EAClC,IAAmB,GAAiB,MAAU,EAAM,UAAU,EAI9D,IAAU,EAAc,KAAK,EAC7B,IAAU,EAAc,IAAI,EAC5B,IAAyB,CAAC,KAAoB,KAAW,CAAC,GAC1D,IAAa,GAAU,gBAAgB,eAAe,OACtD,IACJ,OAAO,GAAU,gBAAgB,cAAe,WAC5C,EAAS,eAAe,aACxB,KAAA,GACA,IAAgB,IACjB,EAAc,MAAM,EAAE,aAAU,MAAQ,EAAa,EAAE,gBACxD,cACA,KAAA;AAIJ,QAFI,IAA+B,OAGjC,kBAAC,SAAD;EACE,eAAY;EACZ,WAAU;YAFZ;GAIE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAE,EAAQ,~~eAAe~~;~~IACrB~~,CAAA;GACP,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAqB,KAAK,MAAS;KAClC,IAAM,IAAW,CAAC,EAAE,KAAc,EAAK,gBACjC,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAK;MACD,CAAA,EAEH,IAAQ,kBAAC,QAAD;MAAM,WAAU;gBAAY,EAAK;MAAa,CAAA,EACtD,IAAkB,EAAK,cAC3B,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAE,EAAQ,gBAAgB;MACtB,CAAA;AAkCT,YA/BI,IAQA,kBAAC,GAAD;MAEE,SAAS,EAAE,EAAQ,iCAAiC,EAClD,WAAW,GACZ,CAAC;MACF,WAAU;gBAEV,kBAAC,QAAD;OACE,iBAAc;OACd,eAAa,sBAAsB,EAAK;OACxC,WAAW,EACT,GAAwB,EACxB,gEACD;iBANH;QAQG;QACA;QACA;QACI;;MACO,EAlBT,EAAK,GAkBI,GAKlB,kBAAC,GAAD;MAEE,IAAI,EAAK;MACT,KAAK,EAAK;MACV,eAAa,sBAAsB,EAAK;MACxC,YAAY,EAAE,kBACZ,EACE,GAAwB,EACxB,YACA,IACI,EAA8B,SAC9B,EAA8B,KACnC;gBAZL;OAeG;OACA;OACA;OACc;QAjBV,EAAK,GAiBK;MAEnB;IACE,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAA8B,CAAA;IAC1B,CAAA;GACA"}
1	+ {"version":3,"file":"extensions-navigation.js","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { ACP_PROVIDERS } from \"#/constants/acp-providers\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n SIDEBAR_ROW_INTERACTIVE_CLASS,\n sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useSidebarStore } from \"#/stores/sidebar-store\";\nimport { useBreakpoint } from \"#/hooks/use-breakpoint\";\n\ninterface ExtensionNavItem {\n to: string;\n label: string;\n icon: React.ReactElement;\n end?: boolean;\n comingSoon?: boolean;\n /*\n When true, this item greys out (and the /route's ``clientLoader``\n * bounces to ``/settings/agent``) while an ACP agent is active.\n * The ACP sub-agent manages its own MCP servers; the SDK rejects\n * ``mcp_config`` on ``ACPAgent`` init outright, so the OpenHands-\n * side editor would silently no-op against the running subprocess.\n */\n disabledByAcp?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n {\n to: \"/skills\",\n label: \"Skills\",\n icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n end: true,\n },\n {\n to: \"/mcp\",\n label: \"MCP Servers\",\n icon: <ServerProcessIcon width={16} height={16} />,\n end: true,\n disabledByAcp: true,\n },\n {\n to: \"/plugins\",\n label: \"Plugins\",\n icon: (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n width={16}\n height={16}\n aria-hidden=\"true\"\n >\n <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n <path d=\"m3.3 7 8.7 5 8.7-5\" />\n <path d=\"M12 22V12\" />\n </svg>\n ),\n end: true,\n comingSoon: true,\n },\n];\n\nexport function ExtensionsNavigation() {\n const { t } = useTranslation(\"openhands\");\n const { data: settings } = useSettings();\n const sidebarCollapsed = useSidebarStore((state) => state.collapsed);\n // At iPad portrait widths (md to <lg) an expanded primary Sidebar (300px)\n // plus this nav (260px) leaves the main content unreadable. Hide ourselves\n // until the user collapses the Sidebar or the viewport reaches `lg`.\n const belowLg = useBreakpoint(1023);\n const belowMd = useBreakpoint(767);\n const hideForExpandedSidebar = !sidebarCollapsed && belowLg && !belowMd;\n const isAcpAgent = settings?.agent_settings?.agent_kind === \"acp\";\n const acpServerKey =\n typeof settings?.agent_settings?.acp_server === \"string\"\n ? settings.agent_settings.acp_server\n : undefined;\n const acpServerName = isAcpAgent\n ? (ACP_PROVIDERS.find(({ key }) => key === acpServerKey)?.display_name ??\n \"ACP Agent\")\n : undefined;\n\n if (hideForExpandedSidebar) return null;\n\n return (\n <aside\n data-testid=\"extensions-navbar-desktop\"\n className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n >\n <span className=\"px-2 text-sm font-normal text-white\">\n {t(I18nKey.NAV$CUSTOMIZE)}\n </span>\n <div className=\"flex flex-col gap-0.5 pt-0.5\">\n {EXTENSIONS_NAV_ITEMS.map((item) => {\n const disabled = !!(isAcpAgent && item.disabledByAcp);\n const baseRow = (\n <span className=\"shrink-0 flex items-center justify-center\">\n {item.icon}\n </span>\n );\n const label = <span className=\"truncate\">{item.label}</span>;\n const comingSoonBadge = item.comingSoon && (\n <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n {t(I18nKey.NAV$COMING_SOON)}\n </span>\n );\n\n if (disabled) {\n // Render a non-clickable surrogate so the URL and a11y tree\n // both communicate \"you can't go here right now,\" then wrap\n // in StyledTooltip for the why. Mirrors the SettingsNavLink\n // disabled rendering — same flag (``disabledByAcp``), same\n // explanatory tooltip (\"Disabled while {agentName} is the\n // active agent\"), same greyed styles.\n return (\n <StyledTooltip\n key={item.to}\n content={t(I18nKey.SETTINGS$AGENT_DISABLED_TOOLTIP, {\n agentName: acpServerName,\n })}\n placement=\"right\"\n >\n <span\n aria-disabled=\"true\"\n data-testid={`sidebar-extensions-${item.to}`}\n className={cn(\n sidebarNavRowClassName(),\n \"truncate text-[var(--oh-muted)] opacity-50 cursor-not-allowed\",\n )}\n >\n {baseRow}\n {label}\n {comingSoonBadge}\n </span>\n </StyledTooltip>\n );\n }\n\n return (\n <NavigationLink\n key={item.to}\n to={item.to}\n end={item.end}\n data-testid={`sidebar-extensions-${item.to}`}\n className={({ isActive }) =>\n cn(\n sidebarNavRowClassName(),\n \"truncate\",\n isActive\n ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n )\n }\n >\n {baseRow}\n {label}\n {comingSoonBadge}\n </NavigationLink>\n );\n })}\n </div>\n <div className=\"px-2 pt-3\">\n <BackendSyncedSettingsBadge />\n </div>\n </aside>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiCA,IAAa,IAA2C;CACtD;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAY,OAAO;GAAI,QAAQ;GAAI,eAAY;GAAS,CAAA;EAC9D,KAAK;EACN;CACD;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAmB,OAAO;GAAI,QAAQ;GAAM,CAAA;EAClD,KAAK;EACL,eAAe;EAChB;CACD;EACE,IAAI;EACJ,OAAO;EACP,MACE,kBAAC,OAAD;GACE,OAAM;GACN,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,OAAO;GACP,QAAQ;GACR,eAAY;aAVd;IAYE,kBAAC,QAAD,EAAM,GAAE,0HAA2H,CAAA;IACnI,kBAAC,QAAD,EAAM,GAAE,sBAAuB,CAAA;IAC/B,kBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;IAClB;;EAER,KAAK;EACL,YAAY;EACb;CACF;AAED,SAAgB,IAAuB;CACrC,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,MAAM,MAAa,GAAa,EAClC,IAAmB,GAAiB,MAAU,EAAM,UAAU,EAI9D,IAAU,EAAc,KAAK,EAC7B,IAAU,EAAc,IAAI,EAC5B,IAAyB,CAAC,KAAoB,KAAW,CAAC,GAC1D,IAAa,GAAU,gBAAgB,eAAe,OACtD,IACJ,OAAO,GAAU,gBAAgB,cAAe,WAC5C,EAAS,eAAe,aACxB,KAAA,GACA,IAAgB,IACjB,EAAc,MAAM,EAAE,aAAU,MAAQ,EAAa,EAAE,gBACxD,cACA,KAAA;AAIJ,QAFI,IAA+B,OAGjC,kBAAC,SAAD;EACE,eAAY;EACZ,WAAU;YAFZ;GAIE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAE,EAAQ,cAAc;IACpB,CAAA;GACP,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAqB,KAAK,MAAS;KAClC,IAAM,IAAW,CAAC,EAAE,KAAc,EAAK,gBACjC,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAK;MACD,CAAA,EAEH,IAAQ,kBAAC,QAAD;MAAM,WAAU;gBAAY,EAAK;MAAa,CAAA,EACtD,IAAkB,EAAK,cAC3B,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAE,EAAQ,gBAAgB;MACtB,CAAA;AAkCT,YA/BI,IAQA,kBAAC,GAAD;MAEE,SAAS,EAAE,EAAQ,iCAAiC,EAClD,WAAW,GACZ,CAAC;MACF,WAAU;gBAEV,kBAAC,QAAD;OACE,iBAAc;OACd,eAAa,sBAAsB,EAAK;OACxC,WAAW,EACT,GAAwB,EACxB,gEACD;iBANH;QAQG;QACA;QACA;QACI;;MACO,EAlBT,EAAK,GAkBI,GAKlB,kBAAC,GAAD;MAEE,IAAI,EAAK;MACT,KAAK,EAAK;MACV,eAAa,sBAAsB,EAAK;MACxC,YAAY,EAAE,kBACZ,EACE,GAAwB,EACxB,YACA,IACI,EAA8B,SAC9B,EAA8B,KACnC;gBAZL;OAeG;OACA;OACA;OACc;QAjBV,EAAK,GAiBK;MAEnB;IACE,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAA8B,CAAA;IAC1B,CAAA;GACA"}

package/dist/components/shared/buttons/back-nav-button.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../utils/utils.cjs`),n=require(`../../../node_modules/lucide-react/dist/esm/icons/arrow-left.cjs`),r=require(`../../../utils/form-control-classes.cjs`),i=require(`../navigation-link.cjs`);let a=require(`react`);a=e.__toESM(a,1);let o=require(`react/jsx-runtime`);function s({children:e}){return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.ArrowLeft,{size:20,"aria-hidden":!0}),e]})}function c(e){let{children:n,testId:a,className:c}=e,l=t.cn(r.formControlBackNavButtonClassName,c);return`to`in e?(0,o.jsx)(i.NavigationLink,{to:e.to,onClick:e.onClick,"data-testid":a,className:l,children:(0,o.jsx)(s,{children:n})}):(0,o.jsx)(`button`,{type:`button`,onClick:e.onClick,"data-testid":a,className:l,children:(0,o.jsx)(s,{children:n})})}exports.BackNavButton=c;
2	+ //# sourceMappingURL=back-nav-button.cjs.map

package/dist/components/shared/buttons/back-nav-button.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"back-nav-button.cjs","names":[],"sources":["../../../../src/components/shared/buttons/back-nav-button.tsx"],"sourcesContent":["import React from \"react\";\nimport { ArrowLeft } from \"lucide-react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlBackNavButtonClassName } from \"#/utils/form-control-classes\";\n\ntype BackNavButtonBaseProps = {\n children: React.ReactNode;\n testId?: string;\n className?: string;\n};\n\ntype BackNavButtonAsButtonProps = BackNavButtonBaseProps & {\n onClick: () => void;\n};\n\ntype BackNavButtonAsLinkProps = BackNavButtonBaseProps & {\n to: string;\n onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\nexport type BackNavButtonProps =\n | BackNavButtonAsButtonProps\n | BackNavButtonAsLinkProps;\n\nfunction BackNavButtonContent({\n children,\n}: Pick<BackNavButtonBaseProps, \"children\">) {\n return (\n <>\n <ArrowLeft size={20} aria-hidden />\n {children}\n </>\n );\n}\n\nexport function BackNavButton(\n props: BackNavButtonAsLinkProps,\n): React.JSX.Element;\nexport function BackNavButton(\n props: BackNavButtonAsButtonProps,\n): React.JSX.Element;\nexport function BackNavButton(props: BackNavButtonProps) {\n const { children, testId, className } = props;\n const classes = cn(formControlBackNavButtonClassName, className);\n\n if (\"to\" in props) {\n return (\n <NavigationLink\n to={props.to}\n onClick={props.onClick}\n data-testid={testId}\n className={classes}\n >\n <BackNavButtonContent>{children}</BackNavButtonContent>\n </NavigationLink>\n );\n }\n\n return (\n <button\n type=\"button\"\n onClick={props.onClick}\n data-testid={testId}\n className={classes}\n >\n <BackNavButtonContent>{children}</BackNavButtonContent>\n </button>\n );\n}\n"],"mappings":"mVAyBA,SAAS,EAAqB,CAC5B,YAC2C,CAC3C,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,UAAD,CAAW,KAAM,GAAI,cAAA,GAAc,CAAA,CAClC,EACA,CAAA,CAAA,CAUP,SAAgB,EAAc,EAA2B,CACvD,GAAM,CAAE,WAAU,SAAQ,aAAc,EAClC,EAAU,EAAA,GAAG,EAAA,kCAAmC,EAAU,CAehE,MAbI,OAAQ,GAER,EAAA,EAAA,KAAC,EAAA,eAAD,CACE,GAAI,EAAM,GACV,QAAS,EAAM,QACf,cAAa,EACb,UAAW,YAEX,EAAA,EAAA,KAAC,EAAD,CAAuB,WAAgC,CAAA,CACxC,CAAA,EAKnB,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,QAAS,EAAM,QACf,cAAa,EACb,UAAW,YAEX,EAAA,EAAA,KAAC,EAAD,CAAuB,WAAgC,CAAA,CAChD,CAAA"}

package/dist/components/shared/buttons/back-nav-button.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import React from "react";
+type BackNavButtonBaseProps = {
+    children: React.ReactNode;
+    testId?: string;
+    className?: string;
+};
+type BackNavButtonAsButtonProps = BackNavButtonBaseProps & {
+    onClick: () => void;
+};
+type BackNavButtonAsLinkProps = BackNavButtonBaseProps & {
+    to: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+};
+export type BackNavButtonProps = BackNavButtonAsButtonProps | BackNavButtonAsLinkProps;
+export declare function BackNavButton(props: BackNavButtonAsLinkProps): React.JSX.Element;
+export declare function BackNavButton(props: BackNavButtonAsButtonProps): React.JSX.Element;
+export {};

package/dist/components/shared/buttons/back-nav-button.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { cn as e } from "../../../utils/utils.js";
+import { ArrowLeft as t } from "../../../node_modules/lucide-react/dist/esm/icons/arrow-left.js";
+import { formControlBackNavButtonClassName as n } from "../../../utils/form-control-classes.js";
+import { NavigationLink as r } from "../navigation-link.js";
+import "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/shared/buttons/back-nav-button.tsx
+function s({ children: e }) {
+	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(t, {
+		size: 20,
+		"aria-hidden": !0
+	}), e] });
+}
+function c(t) {
+	let { children: i, testId: o, className: c } = t, l = e(n, c);
+	return "to" in t ? /* @__PURE__ */ a(r, {
+		to: t.to,
+		onClick: t.onClick,
+		"data-testid": o,
+		className: l,
+		children: /* @__PURE__ */ a(s, { children: i })
+	}) : /* @__PURE__ */ a("button", {
+		type: "button",
+		onClick: t.onClick,
+		"data-testid": o,
+		className: l,
+		children: /* @__PURE__ */ a(s, { children: i })
+	});
+}
+//#endregion
+export { c as BackNavButton };
+//# sourceMappingURL=back-nav-button.js.map

package/dist/components/shared/buttons/back-nav-button.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"back-nav-button.js","names":[],"sources":["../../../../src/components/shared/buttons/back-nav-button.tsx"],"sourcesContent":["import React from \"react\";\nimport { ArrowLeft } from \"lucide-react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlBackNavButtonClassName } from \"#/utils/form-control-classes\";\n\ntype BackNavButtonBaseProps = {\n children: React.ReactNode;\n testId?: string;\n className?: string;\n};\n\ntype BackNavButtonAsButtonProps = BackNavButtonBaseProps & {\n onClick: () => void;\n};\n\ntype BackNavButtonAsLinkProps = BackNavButtonBaseProps & {\n to: string;\n onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\nexport type BackNavButtonProps =\n | BackNavButtonAsButtonProps\n | BackNavButtonAsLinkProps;\n\nfunction BackNavButtonContent({\n children,\n}: Pick<BackNavButtonBaseProps, \"children\">) {\n return (\n <>\n <ArrowLeft size={20} aria-hidden />\n {children}\n </>\n );\n}\n\nexport function BackNavButton(\n props: BackNavButtonAsLinkProps,\n): React.JSX.Element;\nexport function BackNavButton(\n props: BackNavButtonAsButtonProps,\n): React.JSX.Element;\nexport function BackNavButton(props: BackNavButtonProps) {\n const { children, testId, className } = props;\n const classes = cn(formControlBackNavButtonClassName, className);\n\n if (\"to\" in props) {\n return (\n <NavigationLink\n to={props.to}\n onClick={props.onClick}\n data-testid={testId}\n className={classes}\n >\n <BackNavButtonContent>{children}</BackNavButtonContent>\n </NavigationLink>\n );\n }\n\n return (\n <button\n type=\"button\"\n onClick={props.onClick}\n data-testid={testId}\n className={classes}\n >\n <BackNavButtonContent>{children}</BackNavButtonContent>\n </button>\n );\n}\n"],"mappings":";;;;;;;AAyBA,SAAS,EAAqB,EAC5B,eAC2C;AAC3C,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAW,MAAM;EAAI,eAAA;EAAc,CAAA,EAClC,EACA,EAAA,CAAA;;AAUP,SAAgB,EAAc,GAA2B;CACvD,IAAM,EAAE,aAAU,WAAQ,iBAAc,GAClC,IAAU,EAAG,GAAmC,EAAU;AAehE,QAbI,QAAQ,IAER,kBAAC,GAAD;EACE,IAAI,EAAM;EACV,SAAS,EAAM;EACf,eAAa;EACb,WAAW;YAEX,kBAAC,GAAD,EAAuB,aAAgC,CAAA;EACxC,CAAA,GAKnB,kBAAC,UAAD;EACE,MAAK;EACL,SAAS,EAAM;EACf,eAAa;EACb,WAAW;YAEX,kBAAC,GAAD,EAAuB,aAAgC,CAAA;EAChD,CAAA"}

package/dist/components/shared/buttons/conversation-confirmation-buttons.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../types/agent-state.cjs`),r=require(`../../../types/agent-server/type-guards.cjs`),i=require(`../../../stores/use-event-store.cjs`),a=require(`../../../types/agent-server/core/base/common.cjs`),o=require(`../../../hooks/query/use-active-conversation.cjs`),s=require(`../../../hooks/use-agent-state.cjs`),c=require(`../action-tooltip.cjs`),l=require(`../risk-alert.cjs`),u=require(`../../../icons/u-warning.cjs`),d=require(`../../../stores/event-message-store.cjs`),f=require(`../../../hooks/mutation/use-respond-to-confirmation.cjs`);let p=require(`react`),m=require(`react/jsx-runtime`);function h(){let h=d.useEventMessageStore(e=>e.submittedEventIds),g=d.useEventMessageStore(e=>e.addSubmittedEventId),{t:_}=e.useTranslation(`openhands`),{data:v}=o.useActiveConversation(),{curAgentState:y}=s.useAgentState(),{mutate:b}=f.useRespondToConfirmation(),x=i.useEventStore(e=>e.events).slice().reverse().find(e=>e.source===`agent`?y===n.AgentState.AWAITING_USER_CONFIRMATION:!1),S=(0,p.useCallback)(e=>{!x||!v||(g(x.id),b({conversationId:v.id,conversationUrl:v.conversation_url||``,sessionApiKey:v.session_api_key,accept:e}))},[x,v,g,b]);return(0,p.useEffect)(()=>{if(!x)return;let e=e=>{e.shiftKey&&e.metaKey&&e.key===`Backspace`&&(e.preventDefault(),S(!1))},t=e=>{e.metaKey&&e.key===`Enter`&&(e.preventDefault(),S(!0))},n=n=>{e(n),t(n)};return document.addEventListener(`keydown`,n),()=>document.removeEventListener(`keydown`,n)},[x,S]),y!==n.AgentState.AWAITING_USER_CONFIRMATION||!x||h.includes(x.id)?null:(0,m.jsxs)(`div`,{className:`flex flex-col gap-2 pt-4`,children:[(r.isActionEvent(x)?x.security_risk:a.SecurityRisk.UNKNOWN)===a.SecurityRisk.HIGH&&(0,m.jsx)(l.RiskAlert,{content:_(t.I18nKey.CHAT_INTERFACE$HIGH_RISK_WARNING),icon:(0,m.jsx)(u.default,{width:16,height:16,color:`#fff`}),severity:`high`,title:_(t.I18nKey.COMMON$HIGH_RISK)}),(0,m.jsxs)(`div`,{className:`flex justify-between items-center`,children:[(0,m.jsx)(`p`,{className:`text-sm font-normal text-white`,children:_(t.I18nKey.CHAT_INTERFACE$USER_ASK_CONFIRMATION)}),(0,m.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,m.jsx)(c.ActionTooltip,{type:`reject`,onClick:()=>S(!1)}),(0,m.jsx)(c.ActionTooltip,{type:`confirm`,onClick:()=>S(!0)})]})]})]})}exports.ConversationConfirmationButtons=h;
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../types/agent-state.cjs`),r=require(`../../../types/agent-server/core/base/common.cjs`),i=require(`../../../types/agent-server/type-guards.cjs`),a=require(`../../../stores/use-event-store.cjs`),o=require(`../../../hooks/query/use-active-conversation.cjs`),s=require(`../../../hooks/use-agent-state.cjs`),c=require(`../action-tooltip.cjs`),l=require(`../risk-alert.cjs`),u=require(`../../../icons/u-warning.cjs`),d=require(`../../../stores/event-message-store.cjs`),f=require(`../../../hooks/mutation/use-respond-to-confirmation.cjs`);let p=require(`react`),m=require(`react/jsx-runtime`);function h(){let h=d.useEventMessageStore(e=>e.submittedEventIds),g=d.useEventMessageStore(e=>e.addSubmittedEventId),{t:_}=e.useTranslation(`openhands`),{data:v}=o.useActiveConversation(),{curAgentState:y}=s.useAgentState(),{mutate:b}=f.useRespondToConfirmation(),x=a.useEventStore(e=>e.events).slice().reverse().find(e=>e.source===`agent`?y===n.AgentState.AWAITING_USER_CONFIRMATION:!1),S=(0,p.useCallback)(e=>{!x||!v||(g(x.id),b({conversationId:v.id,conversationUrl:v.conversation_url||``,sessionApiKey:v.session_api_key,accept:e}))},[x,v,g,b]);return(0,p.useEffect)(()=>{if(!x)return;let e=e=>{e.shiftKey&&e.metaKey&&e.key===`Backspace`&&(e.preventDefault(),S(!1))},t=e=>{e.metaKey&&e.key===`Enter`&&(e.preventDefault(),S(!0))},n=n=>{e(n),t(n)};return document.addEventListener(`keydown`,n),()=>document.removeEventListener(`keydown`,n)},[x,S]),y!==n.AgentState.AWAITING_USER_CONFIRMATION||!x||h.includes(x.id)?null:(0,m.jsxs)(`div`,{className:`flex flex-col gap-2 pt-4`,children:[(i.isActionEvent(x)?x.security_risk:r.SecurityRisk.UNKNOWN)===r.SecurityRisk.HIGH&&(0,m.jsx)(l.RiskAlert,{content:_(t.I18nKey.CHAT_INTERFACE$HIGH_RISK_WARNING),icon:(0,m.jsx)(u.default,{width:16,height:16,color:`#fff`}),severity:`high`,title:_(t.I18nKey.COMMON$HIGH_RISK)}),(0,m.jsxs)(`div`,{className:`flex justify-between items-center`,children:[(0,m.jsx)(`p`,{className:`text-sm font-normal text-white`,children:_(t.I18nKey.CHAT_INTERFACE$USER_ASK_CONFIRMATION)}),(0,m.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,m.jsx)(c.ActionTooltip,{type:`reject`,onClick:()=>S(!1)}),(0,m.jsx)(c.ActionTooltip,{type:`confirm`,onClick:()=>S(!0)})]})]})]})}exports.ConversationConfirmationButtons=h;
 //# sourceMappingURL=conversation-confirmation-buttons.cjs.map

package/dist/components/shared/buttons/conversation-confirmation-buttons.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../i18n/declaration.js";
 import { AgentState as n } from "../../../types/agent-state.js";
-import { isActionEvent as r } from "../../../types/agent-server/type-guards.js";
-import { useEventStore as i } from "../../../stores/use-event-store.js";
-import { SecurityRisk as a } from "../../../types/agent-server/core/base/common.js";
+import { SecurityRisk as r } from "../../../types/agent-server/core/base/common.js";
+import { isActionEvent as i } from "../../../types/agent-server/type-guards.js";
+import { useEventStore as a } from "../../../stores/use-event-store.js";
 import { useActiveConversation as o } from "../../../hooks/query/use-active-conversation.js";
 import { useAgentState as s } from "../../../hooks/use-agent-state.js";
 import { ActionTooltip as c } from "../action-tooltip.js";
@@ -15,7 +15,7 @@ import { useCallback as p, useEffect as m } from "react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/shared/buttons/conversation-confirmation-buttons.tsx
 function _() {
-	let _ = d((e) => e.submittedEventIds), v = d((e) => e.addSubmittedEventId), { t: y } = e("openhands"), { data: b } = o(), { curAgentState: x } = s(), { mutate: S } = f(), C = i((e) => e.events).slice().reverse().find((e) => e.source === "agent" ? x === n.AWAITING_USER_CONFIRMATION : !1), w = p((e) => {
+	let _ = d((e) => e.submittedEventIds), v = d((e) => e.addSubmittedEventId), { t: y } = e("openhands"), { data: b } = o(), { curAgentState: x } = s(), { mutate: S } = f(), C = a((e) => e.events).slice().reverse().find((e) => e.source === "agent" ? x === n.AWAITING_USER_CONFIRMATION : !1), w = p((e) => {
 		!C || !b || (v(C.id), S({
 			conversationId: b.id,
 			conversationUrl: b.conversation_url || "",
@@ -40,7 +40,7 @@ function _() {
 		return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
 	}, [C, w]), x !== n.AWAITING_USER_CONFIRMATION || !C || _.includes(C.id) ? null : /* @__PURE__ */ g("div", {
 		className: "flex flex-col gap-2 pt-4",
-		children: [(r(C) ? C.security_risk : a.UNKNOWN) === a.HIGH && /* @__PURE__ */ h(l, {
+		children: [(i(C) ? C.security_risk : r.UNKNOWN) === r.HIGH && /* @__PURE__ */ h(l, {
 			content: y(t.CHAT_INTERFACE$HIGH_RISK_WARNING),
 			icon: /* @__PURE__ */ h(u, {
 				width: 16,

package/dist/components/shared/filters/enum-filter-dropdown.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../utils/utils.cjs`),i=require(`../../../node_modules/lucide-react/dist/esm/icons/check.cjs`),a=require(`../../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs`),o=require(`../../../hooks/use-click-outside-element.cjs`);let s=require(`react`);s=e.__toESM(s,1);let c=require(`react/jsx-runtime`);function l({testId:e,value:l,onChange:u,options:d,labelKeyByValue:f}){let{t:p}=t.useTranslation(`openhands`),[m,h]=s.default.useState(!1),g=o.useClickOutsideElement(()=>h(!1)),_=d[0],v=p(f[l]);return(0,c.jsxs)(`div`,{ref:g,className:`relative shrink-0 w-auto`,"data-testid":e,children:[(0,c.jsxs)(`button`,{type:`button`,"data-testid":`dropdown-trigger`,"aria-haspopup":`menu`,"aria-expanded":m,"aria-label":p(n.I18nKey.CONVERSATION_PANEL$FILTER_LABEL),onClick:()=>h(e=>!e),className:r.cn(`inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors cursor-pointer`,`border-[var(--oh-border)] bg-base-secondary text-white`,`focus-visible:border-white/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20`,_&&l!==_&&`border-white/60 bg-white/10`),children:[(0,c.jsx)(`span`,{className:`whitespace-nowrap`,children:v}),(0,c.jsx)(a.ChevronDown,{className:r.cn(`h-4 w-4 shrink-0 text-tertiary-alt transition-transform`,m&&`rotate-180`),"aria-hidden":!0})]}),m?(0,c.jsx)(`div`,{role:`menu`,"data-testid":`${e}-menu`,"aria-label":p(n.I18nKey.CONVERSATION_PANEL$FILTER_LABEL),className:r.cn(`absolute right-0 top-full z-50 mt-1 min-w-full w-max`,`max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow`),children:d.map(t=>{let n=t===l;return(0,c.jsxs)(`button`,{type:`button`,role:`menuitemradio`,"aria-checked":n,"data-testid":`${e}-${t}`,onClick:()=>{u(t),h(!1)},className:r.cn(`flex w-full items-center gap-2 rounded px-2 py-2 text-left text-sm text-white`,`hover:bg-[var(--oh-interactive-hover)] cursor-pointer`,n&&`bg-[var(--oh-interactive-selected)]`),children:[(0,c.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:p(f[t])}),n?(0,c.jsx)(i.Check,{className:`h-4 w-4 shrink-0`,"aria-hidden":!0}):null]},t)})}):null]})}exports.EnumFilterDropdown=l;
+const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../utils/utils.cjs`),i=require(`../../../node_modules/lucide-react/dist/esm/icons/check.cjs`),a=require(`../../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs`),o=require(`../../../utils/dropdown-classes.cjs`),s=require(`../../../hooks/use-click-outside-element.cjs`);let c=require(`react`);c=e.__toESM(c,1);let l=require(`react/jsx-runtime`);function u({testId:e,value:u,onChange:d,options:f,labelKeyByValue:p}){let{t:m}=t.useTranslation(`openhands`),[h,g]=c.default.useState(!1),_=s.useClickOutsideElement(()=>g(!1)),v=f[0],y=m(p[u]);return(0,l.jsxs)(`div`,{ref:_,className:`relative shrink-0 w-auto`,"data-testid":e,children:[(0,l.jsxs)(`button`,{type:`button`,"data-testid":`dropdown-trigger`,"aria-haspopup":`menu`,"aria-expanded":h,"aria-label":m(n.I18nKey.CONVERSATION_PANEL$FILTER_LABEL),onClick:()=>g(e=>!e),className:r.cn(o.dropdownFilterTriggerClassName,v&&u!==v&&`border-white/60 bg-white/10`),children:[(0,l.jsx)(`span`,{className:`whitespace-nowrap`,children:y}),(0,l.jsx)(a.ChevronDown,{className:r.cn(`h-4 w-4 shrink-0 text-tertiary-alt transition-transform`,h&&`rotate-180`),"aria-hidden":!0})]}),h?(0,l.jsx)(`div`,{role:`menu`,"data-testid":`${e}-menu`,"aria-label":m(n.I18nKey.CONVERSATION_PANEL$FILTER_LABEL),className:r.cn(`absolute right-0 top-full z-50 mt-1 min-w-full w-max`,`max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow`,o.dropdownMenuListClassName),children:f.map(t=>{let n=t===u;return(0,l.jsxs)(`button`,{type:`button`,role:`menuitemradio`,"aria-checked":n,"data-testid":`${e}-${t}`,onClick:()=>{d(t),g(!1)},className:r.cn(o.dropdownMenuRowClassName,n&&`bg-[var(--oh-interactive-selected)]`),children:[(0,l.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:m(p[t])}),n?(0,l.jsx)(i.Check,{className:`h-4 w-4 shrink-0`,"aria-hidden":!0}):null]},t)})}):null]})}exports.EnumFilterDropdown=u;
 //# sourceMappingURL=enum-filter-dropdown.cjs.map

package/dist/components/shared/filters/enum-filter-dropdown.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"enum-filter-dropdown.cjs","names":[],"sources":["../../../../src/components/shared/filters/enum-filter-dropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\n\ninterface EnumFilterDropdownProps<T extends string> {\n testId: string;\n value: T;\n onChange: (value: T) => void;\n options: readonly T[];\n labelKeyByValue: Record<T, I18nKey>;\n}\n\nexport function EnumFilterDropdown<T extends string>({\n testId,\n value,\n onChange,\n options,\n labelKeyByValue,\n}: EnumFilterDropdownProps<T>) {\n const { t } = useTranslation(\"openhands\");\n const [open, setOpen] = React.useState(false);\n const containerRef = useClickOutsideElement<HTMLDivElement>(() =>\n setOpen(false),\n );\n\n const defaultOption = options[0];\n const selectedLabel = t(labelKeyByValue[value]);\n\n return (\n <div\n ref={containerRef}\n className=\"relative shrink-0 w-auto\"\n data-testid={testId}\n >\n <button\n type=\"button\"\n data-testid=\"dropdown-trigger\"\n aria-haspopup=\"menu\"\n aria-expanded={open}\n aria-label={t(I18nKey.CONVERSATION_PANEL$FILTER_LABEL)}\n onClick={() => setOpen((prev) => !prev)}\n className={cn(\n ~~\"inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors cursor-pointer\"~~,\n ~~\"border-[var(--oh-border)] bg-base-secondary text-white\",\n \"focus-visible:border-white/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20\",\n~~ defaultOption &&\n value !== defaultOption &&\n \"border-white/60 bg-white/10\",\n )}\n >\n <span className=\"whitespace-nowrap\">{selectedLabel}</span>\n <ChevronDown\n className={cn(\n \"h-4 w-4 shrink-0 text-tertiary-alt transition-transform\",\n open && \"rotate-180\",\n )}\n aria-hidden\n />\n </button>\n\n {open ? (\n <div\n role=\"menu\"\n data-testid={`${testId}-menu`}\n aria-label={t(I18nKey.CONVERSATION_PANEL$FILTER_LABEL)}\n className={cn(\n \"absolute right-0 top-full z-50 mt-1 min-w-full w-max\",\n \"max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow\",\n )}\n >\n {options.map((option) => {\n const selected = option === value;\n return (\n <button\n key={option}\n type=\"button\"\n role=\"menuitemradio\"\n aria-checked={selected}\n data-testid={`${testId}-${option}`}\n onClick={() => {\n onChange(option);\n setOpen(false);\n }}\n className={cn(\n ~~\"flex w-full items-center gap-2 rounded px-2 py-2 text-left text-sm text-white\"~~,\n ~~\"hover:bg-[var(--oh-interactive-hover)] cursor-pointer\",\n~~ selected && \"bg-[var(--oh-interactive-selected)]\",\n )}\n >\n <span className=\"min-w-0 flex-1 truncate\">\n {t(labelKeyByValue[option])}\n </span>\n {selected ? (\n <Check className=\"h-4 w-4 shrink-0\" aria-hidden />\n ) : null}\n </button>\n );\n })}\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":"~~sfAeA~~,SAAgB,EAAqC,CACnD,SACA,QACA,WACA,UACA,mBAC6B,CAC7B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAC,EAAM,GAAW,EAAA,QAAM,SAAS,GAAM,CACvC,EAAe,EAAA,2BACnB,EAAQ,GAAM,CACf,CAEK,EAAgB,EAAQ,GACxB,EAAgB,EAAE,EAAgB,GAAO,CAE/C,OACE,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,UAAU,2BACV,cAAa,WAHf,EAKE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,cAAY,mBACZ,gBAAc,OACd,gBAAe,EACf,aAAY,EAAE,EAAA,QAAQ,gCAAgC,CACtD,YAAe,EAAS,GAAS,CAAC,EAAK,CACvC,UAAW,EAAA,GACT,~~oHACA~~,~~yDACA,4GACA,~~GACE,IAAU,GACV,8BACH,~~UAdH~~,~~EAgBE~~,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,6BAAqB,EAAqB,CAAA,EAC1D,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,UAAW,EAAA,GACT,0DACA,GAAQ,aACT,CACD,cAAA,GACA,CAAA,CACK,GAER,GACC,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,OACL,cAAa,GAAG,EAAO,OACvB,aAAY,EAAE,EAAA,QAAQ,gCAAgC,CACtD,UAAW,EAAA,GACT,uDACA,+~~EACD~~,UAEA,EAAQ,IAAK,GAAW,CACvB,IAAM,EAAW,IAAW,EAC5B,OACE,EAAA,EAAA,MAAC,SAAD,CAEE,KAAK,SACL,KAAK,gBACL,eAAc,EACd,cAAa,GAAG,EAAO,GAAG,IAC1B,YAAe,CACb,EAAS,EAAO,CAChB,EAAQ,GAAM,EAEhB,UAAW,EAAA,GACT,~~gFACA~~,~~wDACA~~,GAAY,sCACb,~~UAdH~~,~~EAgBE~~,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,mCACb,EAAE,EAAgB,GAAQ,CACtB,CAAA,CACN,GACC,EAAA,EAAA,KAAC,EAAA,MAAD,CAAO,UAAU,mBAAmB,cAAA,GAAc,CAAA,CAChD,KACG,~~EArBF~~,~~EAqBE~~,EAEX,CACE,CAAA,CACJ,KACA"}
1	+ {"version":3,"file":"enum-filter-dropdown.cjs","names":[],"sources":["../../../../src/components/shared/filters/enum-filter-dropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport {\n dropdownFilterTriggerClassName,\n dropdownMenuListClassName,\n dropdownMenuRowClassName,\n} from \"#/utils/dropdown-classes\";\n\ninterface EnumFilterDropdownProps<T extends string> {\n testId: string;\n value: T;\n onChange: (value: T) => void;\n options: readonly T[];\n labelKeyByValue: Record<T, I18nKey>;\n}\n\nexport function EnumFilterDropdown<T extends string>({\n testId,\n value,\n onChange,\n options,\n labelKeyByValue,\n}: EnumFilterDropdownProps<T>) {\n const { t } = useTranslation(\"openhands\");\n const [open, setOpen] = React.useState(false);\n const containerRef = useClickOutsideElement<HTMLDivElement>(() =>\n setOpen(false),\n );\n\n const defaultOption = options[0];\n const selectedLabel = t(labelKeyByValue[value]);\n\n return (\n <div\n ref={containerRef}\n className=\"relative shrink-0 w-auto\"\n data-testid={testId}\n >\n <button\n type=\"button\"\n data-testid=\"dropdown-trigger\"\n aria-haspopup=\"menu\"\n aria-expanded={open}\n aria-label={t(I18nKey.CONVERSATION_PANEL$FILTER_LABEL)}\n onClick={() => setOpen((prev) => !prev)}\n className={cn(\n dropdownFilterTriggerClassName,\n defaultOption &&\n value !== defaultOption &&\n \"border-white/60 bg-white/10\",\n )}\n >\n <span className=\"whitespace-nowrap\">{selectedLabel}</span>\n <ChevronDown\n className={cn(\n \"h-4 w-4 shrink-0 text-tertiary-alt transition-transform\",\n open && \"rotate-180\",\n )}\n aria-hidden\n />\n </button>\n\n {open ? (\n <div\n role=\"menu\"\n data-testid={`${testId}-menu`}\n aria-label={t(I18nKey.CONVERSATION_PANEL$FILTER_LABEL)}\n className={cn(\n \"absolute right-0 top-full z-50 mt-1 min-w-full w-max\",\n \"max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow\",\n dropdownMenuListClassName,\n )}\n >\n {options.map((option) => {\n const selected = option === value;\n return (\n <button\n key={option}\n type=\"button\"\n role=\"menuitemradio\"\n aria-checked={selected}\n data-testid={`${testId}-${option}`}\n onClick={() => {\n onChange(option);\n setOpen(false);\n }}\n className={cn(\n dropdownMenuRowClassName,\n selected && \"bg-[var(--oh-interactive-selected)]\",\n )}\n >\n <span className=\"min-w-0 flex-1 truncate\">\n {t(labelKeyByValue[option])}\n </span>\n {selected ? (\n <Check className=\"h-4 w-4 shrink-0\" aria-hidden />\n ) : null}\n </button>\n );\n })}\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":"uiBAoBA,SAAgB,EAAqC,CACnD,SACA,QACA,WACA,UACA,mBAC6B,CAC7B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAC,EAAM,GAAW,EAAA,QAAM,SAAS,GAAM,CACvC,EAAe,EAAA,2BACnB,EAAQ,GAAM,CACf,CAEK,EAAgB,EAAQ,GACxB,EAAgB,EAAE,EAAgB,GAAO,CAE/C,OACE,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,UAAU,2BACV,cAAa,WAHf,EAKE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,cAAY,mBACZ,gBAAc,OACd,gBAAe,EACf,aAAY,EAAE,EAAA,QAAQ,gCAAgC,CACtD,YAAe,EAAS,GAAS,CAAC,EAAK,CACvC,UAAW,EAAA,GACT,EAAA,+BACA,GACE,IAAU,GACV,8BACH,UAZH,EAcE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,6BAAqB,EAAqB,CAAA,EAC1D,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,UAAW,EAAA,GACT,0DACA,GAAQ,aACT,CACD,cAAA,GACA,CAAA,CACK,GAER,GACC,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,OACL,cAAa,GAAG,EAAO,OACvB,aAAY,EAAE,EAAA,QAAQ,gCAAgC,CACtD,UAAW,EAAA,GACT,uDACA,+EACA,EAAA,0BACD,UAEA,EAAQ,IAAK,GAAW,CACvB,IAAM,EAAW,IAAW,EAC5B,OACE,EAAA,EAAA,MAAC,SAAD,CAEE,KAAK,SACL,KAAK,gBACL,eAAc,EACd,cAAa,GAAG,EAAO,GAAG,IAC1B,YAAe,CACb,EAAS,EAAO,CAChB,EAAQ,GAAM,EAEhB,UAAW,EAAA,GACT,EAAA,yBACA,GAAY,sCACb,UAbH,EAeE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,mCACb,EAAE,EAAgB,GAAQ,CACtB,CAAA,CACN,GACC,EAAA,EAAA,KAAC,EAAA,MAAD,CAAO,UAAU,mBAAmB,cAAA,GAAc,CAAA,CAChD,KACG,EApBF,EAoBE,EAEX,CACE,CAAA,CACJ,KACA"}

package/dist/components/shared/filters/enum-filter-dropdown.js CHANGED Viewed

@@ -3,51 +3,52 @@ import { I18nKey as t } from "../../../i18n/declaration.js";
 import { cn as n } from "../../../utils/utils.js";
 import { Check as r } from "../../../node_modules/lucide-react/dist/esm/icons/check.js";
 import { ChevronDown as i } from "../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
-import { useClickOutsideElement as a } from "../../../hooks/use-click-outside-element.js";
-import o from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { dropdownFilterTriggerClassName as a, dropdownMenuListClassName as o, dropdownMenuRowClassName as s } from "../../../utils/dropdown-classes.js";
+import { useClickOutsideElement as c } from "../../../hooks/use-click-outside-element.js";
+import l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/shared/filters/enum-filter-dropdown.tsx
-function l({ testId: l, value: u, onChange: d, options: f, labelKeyByValue: p }) {
-	let { t: m } = e("openhands"), [h, g] = o.useState(!1), _ = a(() => g(!1)), v = f[0], y = m(p[u]);
-	return /* @__PURE__ */ c("div", {
-		ref: _,
+function f({ testId: f, value: p, onChange: m, options: h, labelKeyByValue: g }) {
+	let { t: _ } = e("openhands"), [v, y] = l.useState(!1), b = c(() => y(!1)), x = h[0], S = _(g[p]);
+	return /* @__PURE__ */ d("div", {
+		ref: b,
 		className: "relative shrink-0 w-auto",
-		"data-testid": l,
-		children: [/* @__PURE__ */ c("button", {
+		"data-testid": f,
+		children: [/* @__PURE__ */ d("button", {
 			type: "button",
 			"data-testid": "dropdown-trigger",
 			"aria-haspopup": "menu",
-			"aria-expanded": h,
-			"aria-label": m(t.CONVERSATION_PANEL$FILTER_LABEL),
-			onClick: () => g((e) => !e),
-			className: n("inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors cursor-pointer", "border-[var(--oh-border)] bg-base-secondary text-white", "focus-visible:border-white/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20", v && u !== v && "border-white/60 bg-white/10"),
-			children: [/* @__PURE__ */ s("span", {
+			"aria-expanded": v,
+			"aria-label": _(t.CONVERSATION_PANEL$FILTER_LABEL),
+			onClick: () => y((e) => !e),
+			className: n(a, x && p !== x && "border-white/60 bg-white/10"),
+			children: [/* @__PURE__ */ u("span", {
 				className: "whitespace-nowrap",
-				children: y
-			}), /* @__PURE__ */ s(i, {
-				className: n("h-4 w-4 shrink-0 text-tertiary-alt transition-transform", h && "rotate-180"),
+				children: S
+			}), /* @__PURE__ */ u(i, {
+				className: n("h-4 w-4 shrink-0 text-tertiary-alt transition-transform", v && "rotate-180"),
 				"aria-hidden": !0
 			})]
-		}), h ? /* @__PURE__ */ s("div", {
+		}), v ? /* @__PURE__ */ u("div", {
 			role: "menu",
-			"data-testid": `${l}-menu`,
-			"aria-label": m(t.CONVERSATION_PANEL$FILTER_LABEL),
-			className: n("absolute right-0 top-full z-50 mt-1 min-w-full w-max", "max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow"),
-			children: f.map((e) => {
-				let t = e === u;
-				return /* @__PURE__ */ c("button", {
+			"data-testid": `${f}-menu`,
+			"aria-label": _(t.CONVERSATION_PANEL$FILTER_LABEL),
+			className: n("absolute right-0 top-full z-50 mt-1 min-w-full w-max", "max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow", o),
+			children: h.map((e) => {
+				let t = e === p;
+				return /* @__PURE__ */ d("button", {
 					type: "button",
 					role: "menuitemradio",
 					"aria-checked": t,
-					"data-testid": `${l}-${e}`,
+					"data-testid": `${f}-${e}`,
 					onClick: () => {
-						d(e), g(!1);
+						m(e), y(!1);
 					},
-					className: n("flex w-full items-center gap-2 rounded px-2 py-2 text-left text-sm text-white", "hover:bg-[var(--oh-interactive-hover)] cursor-pointer", t && "bg-[var(--oh-interactive-selected)]"),
-					children: [/* @__PURE__ */ s("span", {
+					className: n(s, t && "bg-[var(--oh-interactive-selected)]"),
+					children: [/* @__PURE__ */ u("span", {
 						className: "min-w-0 flex-1 truncate",
-						children: m(p[e])
-					}), t ? /* @__PURE__ */ s(r, {
+						children: _(g[e])
+					}), t ? /* @__PURE__ */ u(r, {
 						className: "h-4 w-4 shrink-0",
 						"aria-hidden": !0
 					}) : null]
@@ -57,6 +58,6 @@ function l({ testId: l, value: u, onChange: d, options: f, labelKeyByValue: p })
 	});
 }
 //#endregion
-export { l as EnumFilterDropdown };
+export { f as EnumFilterDropdown };
 //# sourceMappingURL=enum-filter-dropdown.js.map

package/dist/components/shared/filters/enum-filter-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"enum-filter-dropdown.js","names":[],"sources":["../../../../src/components/shared/filters/enum-filter-dropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\n\ninterface EnumFilterDropdownProps<T extends string> {\n testId: string;\n value: T;\n onChange: (value: T) => void;\n options: readonly T[];\n labelKeyByValue: Record<T, I18nKey>;\n}\n\nexport function EnumFilterDropdown<T extends string>({\n testId,\n value,\n onChange,\n options,\n labelKeyByValue,\n}: EnumFilterDropdownProps<T>) {\n const { t } = useTranslation(\"openhands\");\n const [open, setOpen] = React.useState(false);\n const containerRef = useClickOutsideElement<HTMLDivElement>(() =>\n setOpen(false),\n );\n\n const defaultOption = options[0];\n const selectedLabel = t(labelKeyByValue[value]);\n\n return (\n <div\n ref={containerRef}\n className=\"relative shrink-0 w-auto\"\n data-testid={testId}\n >\n <button\n type=\"button\"\n data-testid=\"dropdown-trigger\"\n aria-haspopup=\"menu\"\n aria-expanded={open}\n aria-label={t(I18nKey.CONVERSATION_PANEL$FILTER_LABEL)}\n onClick={() => setOpen((prev) => !prev)}\n className={cn(\n ~~\"inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition-colors cursor-pointer\"~~,\n ~~\"border-[var(--oh-border)] bg-base-secondary text-white\",\n \"focus-visible:border-white/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20\",\n~~ defaultOption &&\n value !== defaultOption &&\n \"border-white/60 bg-white/10\",\n )}\n >\n <span className=\"whitespace-nowrap\">{selectedLabel}</span>\n <ChevronDown\n className={cn(\n \"h-4 w-4 shrink-0 text-tertiary-alt transition-transform\",\n open && \"rotate-180\",\n )}\n aria-hidden\n />\n </button>\n\n {open ? (\n <div\n role=\"menu\"\n data-testid={`${testId}-menu`}\n aria-label={t(I18nKey.CONVERSATION_PANEL$FILTER_LABEL)}\n className={cn(\n \"absolute right-0 top-full z-50 mt-1 min-w-full w-max\",\n \"max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow\",\n )}\n >\n {options.map((option) => {\n const selected = option === value;\n return (\n <button\n key={option}\n type=\"button\"\n role=\"menuitemradio\"\n aria-checked={selected}\n data-testid={`${testId}-${option}`}\n onClick={() => {\n onChange(option);\n setOpen(false);\n }}\n className={cn(\n ~~\"flex w-full items-center gap-2 rounded px-2 py-2 text-left text-sm text-white\"~~,\n ~~\"hover:bg-[var(--oh-interactive-hover)] cursor-pointer\",\n~~ selected && \"bg-[var(--oh-interactive-selected)]\",\n )}\n >\n <span className=\"min-w-0 flex-1 truncate\">\n {t(labelKeyByValue[option])}\n </span>\n {selected ? (\n <Check className=\"h-4 w-4 shrink-0\" aria-hidden />\n ) : null}\n </button>\n );\n })}\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":"~~;;;;;;;;;AAeA~~,SAAgB,EAAqC,EACnD,WACA,UACA,aACA,YACA,sBAC6B;CAC7B,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,CAAC,GAAM,KAAW,EAAM,SAAS,GAAM,EACvC,IAAe,QACnB,EAAQ,GAAM,CACf,EAEK,IAAgB,EAAQ,IACxB,IAAgB,EAAE,EAAgB,GAAO;AAE/C,QACE,kBAAC,OAAD;EACE,KAAK;EACL,WAAU;EACV,eAAa;YAHf,CAKE,kBAAC,UAAD;GACE,MAAK;GACL,eAAY;GACZ,iBAAc;GACd,iBAAe;GACf,cAAY,EAAE,EAAQ,gCAAgC;GACtD,eAAe,GAAS,MAAS,CAAC,EAAK;GACvC,WAAW,EACT,~~qHACA~~,~~0DACA,6GACA,~~KACE,MAAU,KACV,8BACH;~~aAdH~~,~~CAgBE~~,kBAAC,QAAD;IAAM,WAAU;cAAqB;IAAqB,CAAA,EAC1D,kBAAC,GAAD;IACE,WAAW,EACT,2DACA,KAAQ,aACT;IACD,eAAA;IACA,CAAA,CACK;MAER,IACC,kBAAC,OAAD;GACE,MAAK;GACL,eAAa,GAAG,EAAO;GACvB,cAAY,EAAE,EAAQ,gCAAgC;GACtD,WAAW,EACT,wDACA,+EACD;aAEA,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAW,MAAW;AAC5B,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,eAAa,GAAG,EAAO,GAAG;KAC1B,eAAe;AAEb,MADA,EAAS,EAAO,EAChB,EAAQ,GAAM;;KAEhB,WAAW,EACT,~~iFACA~~,~~yDACA,~~KAAY,sCACb;~~eAdH~~,~~CAgBE~~,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAE,EAAgB,GAAQ;MACtB,CAAA,EACN,IACC,kBAAC,GAAD;MAAO,WAAU;MAAmB,eAAA;MAAc,CAAA,GAChD,KACG;~~OArBF~~,~~EAqBE~~;KAEX;GACE,CAAA,GACJ,KACA"}
1	+ {"version":3,"file":"enum-filter-dropdown.js","names":[],"sources":["../../../../src/components/shared/filters/enum-filter-dropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport {\n dropdownFilterTriggerClassName,\n dropdownMenuListClassName,\n dropdownMenuRowClassName,\n} from \"#/utils/dropdown-classes\";\n\ninterface EnumFilterDropdownProps<T extends string> {\n testId: string;\n value: T;\n onChange: (value: T) => void;\n options: readonly T[];\n labelKeyByValue: Record<T, I18nKey>;\n}\n\nexport function EnumFilterDropdown<T extends string>({\n testId,\n value,\n onChange,\n options,\n labelKeyByValue,\n}: EnumFilterDropdownProps<T>) {\n const { t } = useTranslation(\"openhands\");\n const [open, setOpen] = React.useState(false);\n const containerRef = useClickOutsideElement<HTMLDivElement>(() =>\n setOpen(false),\n );\n\n const defaultOption = options[0];\n const selectedLabel = t(labelKeyByValue[value]);\n\n return (\n <div\n ref={containerRef}\n className=\"relative shrink-0 w-auto\"\n data-testid={testId}\n >\n <button\n type=\"button\"\n data-testid=\"dropdown-trigger\"\n aria-haspopup=\"menu\"\n aria-expanded={open}\n aria-label={t(I18nKey.CONVERSATION_PANEL$FILTER_LABEL)}\n onClick={() => setOpen((prev) => !prev)}\n className={cn(\n dropdownFilterTriggerClassName,\n defaultOption &&\n value !== defaultOption &&\n \"border-white/60 bg-white/10\",\n )}\n >\n <span className=\"whitespace-nowrap\">{selectedLabel}</span>\n <ChevronDown\n className={cn(\n \"h-4 w-4 shrink-0 text-tertiary-alt transition-transform\",\n open && \"rotate-180\",\n )}\n aria-hidden\n />\n </button>\n\n {open ? (\n <div\n role=\"menu\"\n data-testid={`${testId}-menu`}\n aria-label={t(I18nKey.CONVERSATION_PANEL$FILTER_LABEL)}\n className={cn(\n \"absolute right-0 top-full z-50 mt-1 min-w-full w-max\",\n \"max-h-60 overflow-auto rounded-[6px] bg-tertiary p-1 context-menu-box-shadow\",\n dropdownMenuListClassName,\n )}\n >\n {options.map((option) => {\n const selected = option === value;\n return (\n <button\n key={option}\n type=\"button\"\n role=\"menuitemradio\"\n aria-checked={selected}\n data-testid={`${testId}-${option}`}\n onClick={() => {\n onChange(option);\n setOpen(false);\n }}\n className={cn(\n dropdownMenuRowClassName,\n selected && \"bg-[var(--oh-interactive-selected)]\",\n )}\n >\n <span className=\"min-w-0 flex-1 truncate\">\n {t(labelKeyByValue[option])}\n </span>\n {selected ? (\n <Check className=\"h-4 w-4 shrink-0\" aria-hidden />\n ) : null}\n </button>\n );\n })}\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;AAoBA,SAAgB,EAAqC,EACnD,WACA,UACA,aACA,YACA,sBAC6B;CAC7B,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,CAAC,GAAM,KAAW,EAAM,SAAS,GAAM,EACvC,IAAe,QACnB,EAAQ,GAAM,CACf,EAEK,IAAgB,EAAQ,IACxB,IAAgB,EAAE,EAAgB,GAAO;AAE/C,QACE,kBAAC,OAAD;EACE,KAAK;EACL,WAAU;EACV,eAAa;YAHf,CAKE,kBAAC,UAAD;GACE,MAAK;GACL,eAAY;GACZ,iBAAc;GACd,iBAAe;GACf,cAAY,EAAE,EAAQ,gCAAgC;GACtD,eAAe,GAAS,MAAS,CAAC,EAAK;GACvC,WAAW,EACT,GACA,KACE,MAAU,KACV,8BACH;aAZH,CAcE,kBAAC,QAAD;IAAM,WAAU;cAAqB;IAAqB,CAAA,EAC1D,kBAAC,GAAD;IACE,WAAW,EACT,2DACA,KAAQ,aACT;IACD,eAAA;IACA,CAAA,CACK;MAER,IACC,kBAAC,OAAD;GACE,MAAK;GACL,eAAa,GAAG,EAAO;GACvB,cAAY,EAAE,EAAQ,gCAAgC;GACtD,WAAW,EACT,wDACA,gFACA,EACD;aAEA,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAW,MAAW;AAC5B,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,eAAa,GAAG,EAAO,GAAG;KAC1B,eAAe;AAEb,MADA,EAAS,EAAO,EAChB,EAAQ,GAAM;;KAEhB,WAAW,EACT,GACA,KAAY,sCACb;eAbH,CAeE,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAE,EAAgB,GAAQ;MACtB,CAAA,EACN,IACC,kBAAC,GAAD;MAAO,WAAU;MAAmB,eAAA;MAAc,CAAA,GAChD,KACG;OApBF,EAoBE;KAEX;GACE,CAAA,GACJ,KACA"}

package/dist/components/shared/modals/confirmation-modals/base-modal.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../../utils/utils.cjs`),n=require(`../modal-body.cjs`),r=require(`../../buttons/modal-button.cjs`);let i=require(`react`);i=e.__toESM(i,1);let a=require(`react/jsx-runtime`);function o({title:e,id:n,className:r}){return(0,a.jsx)(`span`,{id:n,className:t.cn(`text-xl leading-6 -tracking-[0.01em] font-medium text-content-2`,r),children:e})}function s({description:e,children:t}){return(0,a.jsx)(`span`,{className:`text-xs text-modal-muted`,children:t||e})}function c({testId:e,title:t,description:i,buttons:c}){return(0,a.jsxs)(n.ModalBody,{testID:e,children:[(0,a.jsxs)(`div`,{className:`flex flex-col gap-2 self-start`,children:[(0,a.jsx)(o,{title:t}),(0,a.jsx)(s,{description:i})]}),(0,a.jsx)(`div`,{className:`flex flex-col gap-2 w-full`,children:c.map((e,t)=>(0,a.jsx)(r.ModalButton,{onClick:e.onClick,text:e.text,className:e.className},t))})]})}exports.BaseModal=c,exports.BaseModalDescription=s,exports.BaseModalTitle=o;
+const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../../utils/utils.cjs`),n=require(`../modal-body.cjs`),r=require(`../../buttons/modal-button.cjs`),i=require(`../../../../utils/modal-classes.cjs`);let a=require(`react`);a=e.__toESM(a,1);let o=require(`react/jsx-runtime`);function s({title:e,id:n,className:r}){return(0,o.jsx)(`span`,{id:n,className:t.cn(i.modalTitleClassName,r),children:e})}function c({description:e,children:t}){return(0,o.jsx)(`span`,{className:`text-xs text-modal-muted`,children:t||e})}function l({testId:e,title:t,description:i,buttons:a}){return(0,o.jsxs)(n.ModalBody,{testID:e,children:[(0,o.jsxs)(`div`,{className:`flex flex-col gap-2 self-start`,children:[(0,o.jsx)(s,{title:t}),(0,o.jsx)(c,{description:i})]}),(0,o.jsx)(`div`,{className:`flex flex-col gap-2 w-full`,children:a.map((e,t)=>(0,o.jsx)(r.ModalButton,{onClick:e.onClick,text:e.text,className:e.className},t))})]})}exports.BaseModal=l,exports.BaseModalDescription=c,exports.BaseModalTitle=s;
 //# sourceMappingURL=base-modal.cjs.map

package/dist/components/shared/modals/confirmation-modals/base-modal.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base-modal.cjs","names":[],"sources":["../../../../../src/components/shared/modals/confirmation-modals/base-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { ModalBody } from \"../modal-body\";\nimport { ModalButton } from \"../../buttons/modal-button\";\nimport { cn } from \"#/utils/utils\";\n\ninterface ButtonConfig {\n text: string;\n onClick: () => void;\n className: React.HTMLProps<HTMLButtonElement>[\"className\"];\n}\n\ninterface BaseModalTitleProps {\n title: React.ReactNode;\n id?: string;\n className?: string;\n}\n\nexport function BaseModalTitle({ title, id, className }: BaseModalTitleProps) {\n return (\n <span\n id={id}\n className={cn(~~\n \"text-xl~~ ~~leading-6 -tracking-[0.01em] font-medium text-content-2\",\n~~ className~~,\n~~ )}\n >\n {title}\n </span>\n );\n}\n\ninterface BaseModalDescriptionProps {\n description?: React.ReactNode;\n children?: React.ReactNode;\n}\n\nexport function BaseModalDescription({\n description,\n children,\n}: BaseModalDescriptionProps) {\n return (\n <span className=\"text-xs text-modal-muted\">{children \|\| description}</span>\n );\n}\n\ninterface BaseModalProps {\n testId?: string;\n title: string;\n description: string;\n buttons: ButtonConfig[];\n}\n\nexport function BaseModal({\n testId,\n title,\n description,\n buttons,\n}: BaseModalProps) {\n return (\n <ModalBody testID={testId}>\n <div className=\"flex flex-col gap-2 self-start\">\n <BaseModalTitle title={title} />\n <BaseModalDescription description={description} />\n </div>\n\n <div className=\"flex flex-col gap-2 w-full\">\n {buttons.map((button, index) => (\n <ModalButton\n key={index}\n onClick={button.onClick}\n text={button.text}\n className={button.className}\n />\n ))}\n </div>\n </ModalBody>\n );\n}\n"],"mappings":"~~6PAiBA~~,SAAgB,EAAe,CAAE,QAAO,KAAI,aAAkC,CAC5E,OACE,EAAA,EAAA,KAAC,OAAD,~~CACM~~,~~KACJ~~,UAAW,EAAA,~~GACT~~,~~kEACA~~,~~EACD~~,~~UAEA~~,EACI,CAAA,CASX,SAAgB,EAAqB,CACnC,cACA,YAC4B,CAC5B,OACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oCAA4B,GAAY,EAAmB,CAAA,CAW/E,SAAgB,EAAU,CACxB,SACA,QACA,cACA,WACiB,CACjB,OACE,EAAA,EAAA,MAAC,EAAA,UAAD,CAAW,OAAQ,WAAnB,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,0CAAf,EACE,EAAA,EAAA,KAAC,EAAD,CAAuB,QAAS,CAAA,EAChC,EAAA,EAAA,KAAC,EAAD,CAAmC,cAAe,CAAA,CAC9C,IAEN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sCACZ,EAAQ,KAAK,EAAQ,KACpB,EAAA,EAAA,KAAC,EAAA,YAAD,CAEE,QAAS,EAAO,QAChB,KAAM,EAAO,KACb,UAAW,EAAO,UAClB,CAJK,EAIL,CACF,CACE,CAAA,CACI"}
1	+ {"version":3,"file":"base-modal.cjs","names":[],"sources":["../../../../../src/components/shared/modals/confirmation-modals/base-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { ModalBody } from \"../modal-body\";\nimport { ModalButton } from \"../../buttons/modal-button\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleClassName } from \"#/utils/modal-classes\";\n\ninterface ButtonConfig {\n text: string;\n onClick: () => void;\n className: React.HTMLProps<HTMLButtonElement>[\"className\"];\n}\n\ninterface BaseModalTitleProps {\n title: React.ReactNode;\n id?: string;\n className?: string;\n}\n\nexport function BaseModalTitle({ title, id, className }: BaseModalTitleProps) {\n return (\n <span id={id} className={cn(modalTitleClassName, className)}>\n {title}\n </span>\n );\n}\n\ninterface BaseModalDescriptionProps {\n description?: React.ReactNode;\n children?: React.ReactNode;\n}\n\nexport function BaseModalDescription({\n description,\n children,\n}: BaseModalDescriptionProps) {\n return (\n <span className=\"text-xs text-modal-muted\">{children \|\| description}</span>\n );\n}\n\ninterface BaseModalProps {\n testId?: string;\n title: string;\n description: string;\n buttons: ButtonConfig[];\n}\n\nexport function BaseModal({\n testId,\n title,\n description,\n buttons,\n}: BaseModalProps) {\n return (\n <ModalBody testID={testId}>\n <div className=\"flex flex-col gap-2 self-start\">\n <BaseModalTitle title={title} />\n <BaseModalDescription description={description} />\n </div>\n\n <div className=\"flex flex-col gap-2 w-full\">\n {buttons.map((button, index) => (\n <ModalButton\n key={index}\n onClick={button.onClick}\n text={button.text}\n className={button.className}\n />\n ))}\n </div>\n </ModalBody>\n );\n}\n"],"mappings":"8SAkBA,SAAgB,EAAe,CAAE,QAAO,KAAI,aAAkC,CAC5E,OACE,EAAA,EAAA,KAAC,OAAD,CAAU,KAAI,UAAW,EAAA,GAAG,EAAA,oBAAqB,EAAU,UACxD,EACI,CAAA,CASX,SAAgB,EAAqB,CACnC,cACA,YAC4B,CAC5B,OACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oCAA4B,GAAY,EAAmB,CAAA,CAW/E,SAAgB,EAAU,CACxB,SACA,QACA,cACA,WACiB,CACjB,OACE,EAAA,EAAA,MAAC,EAAA,UAAD,CAAW,OAAQ,WAAnB,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,0CAAf,EACE,EAAA,EAAA,KAAC,EAAD,CAAuB,QAAS,CAAA,EAChC,EAAA,EAAA,KAAC,EAAD,CAAmC,cAAe,CAAA,CAC9C,IAEN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sCACZ,EAAQ,KAAK,EAAQ,KACpB,EAAA,EAAA,KAAC,EAAA,YAAD,CAEE,QAAS,EAAO,QAChB,KAAM,EAAO,KACb,UAAW,EAAO,UAClB,CAJK,EAIL,CACF,CACE,CAAA,CACI"}