@openhands/agent-canvas 1.14.0 → 1.16.0

package/dist/components/features/skills/skill-filter.d.ts

@@ -4,13 +4,15 @@ import type { SkillInfo, SkillType } from "#/types/settings";
 import { type SkillScope } from "#/utils/skill-scope";
 export declare const SKILL_FILTER_QUERY_PARAM = "q";
 export type SkillEnabledState = "enabled" | "disabled";
-export type SkillFacetGroupId = "state" | "source" | "category" | "type";
+export type SkillRecommendation = "recommended" | "other";
+export type SkillFacetGroupId = "state" | "recommendation" | "source" | "category" | "type";
 export interface SkillFilterState {
     query: string;
     sources: Set<SkillScope>;
     categories: Set<SkillCategoryId>;
     types: Set<SkillType>;
     states: Set<SkillEnabledState>;
+    recommendations: Set<SkillRecommendation>;
 }
 export interface SkillFacetRowModel {
     value: string;
@@ -25,10 +27,13 @@ export interface SkillFacetGroup {
     rows: SkillFacetRowModel[];
 }
 export declare const EMPTY_SKILL_FILTER_STATE: SkillFilterState;
+/** Resolving the two lists behind enablement is the caller's job, not this module's. */
+type SkillEnabledPredicate = (skill: SkillInfo) => boolean;
 export declare function parseSkillFilterState(params: URLSearchParams): SkillFilterState;
 export declare function toSkillFilterSearchParams(state: SkillFilterState): URLSearchParams;
-export declare function applySkillFilters(skills: SkillInfo[], disabledSet: Set<string>, state: SkillFilterState): SkillInfo[];
-export declare function buildSkillFacetGroups(skills: SkillInfo[], disabledSet: Set<string>, state: SkillFilterState): SkillFacetGroup[];
+export declare function applySkillFilters(skills: SkillInfo[], isEnabled: SkillEnabledPredicate, state: SkillFilterState): SkillInfo[];
+export declare function buildSkillFacetGroups(skills: SkillInfo[], isEnabled: SkillEnabledPredicate, state: SkillFilterState): SkillFacetGroup[];
 export declare function toggleSkillFilterValue(state: SkillFilterState, groupId: SkillFacetGroupId, value: string): SkillFilterState;
 export declare function clearSkillFilterFacets(state: SkillFilterState): SkillFilterState;
 export declare function countActiveFilters(state: SkillFilterState): number;
+export {};

package/dist/components/features/skills/skill-filter.js

@@ -0,0 +1,183 @@
+import { I18nKey as e } from "../../../i18n/declaration.js";
+import { isRecommendedSkill as t } from "../../../utils/skill-enablement.js";
+import { SKILL_SCOPE_ORDER as n, getSkillScope as r } from "../../../utils/skill-scope.js";
+import { getSkillCardDescription as i } from "./get-skill-card-description.js";
+import { SKILL_CATEGORY_LABEL_KEYS as a, SKILL_CATEGORY_ORDER as o, getSkillCategory as s } from "../../../utils/skill-category.js";
+//#region src/components/features/skills/skill-filter.ts
+var c = "source", l = "category", u = "type", d = "state", f = "recommendation", p = ["enabled", "disabled"], m = ["recommended", "other"], h = [
+	"agentskills",
+	"knowledge",
+	"repo"
+], g = {
+	query: "",
+	sources: /* @__PURE__ */ new Set(),
+	categories: /* @__PURE__ */ new Set(),
+	types: /* @__PURE__ */ new Set(),
+	states: /* @__PURE__ */ new Set(),
+	recommendations: /* @__PURE__ */ new Set()
+};
+function _(e, t) {
+	return e.map((e) => ({
+		value: e,
+		labelKey: t[e]
+	}));
+}
+function v(e, t) {
+	return new Set(e.filter((e) => t.has(e)));
+}
+var y = {
+	project: e.SETTINGS$SKILLS_SOURCE_PROJECT,
+	personal: e.SETTINGS$SKILLS_SOURCE_PERSONAL,
+	public: e.SETTINGS$SKILLS_SOURCE_PUBLIC
+}, b = {
+	agentskills: e.SETTINGS$SKILLS_TYPE_AGENTSKILLS,
+	knowledge: e.SETTINGS$SKILLS_TYPE_KNOWLEDGE,
+	repo: e.SETTINGS$SKILLS_TYPE_REPO
+}, x = {
+	enabled: e.SETTINGS$SKILLS_ENABLED,
+	disabled: e.SETTINGS$SKILLS_DISABLED
+}, S = {
+	recommended: e.SETTINGS$SKILLS_RECOMMENDED,
+	other: e.SETTINGS$SKILLS_RECOMMENDATION_OTHER
+}, C = [
+	{
+		id: "state",
+		labelKey: e.SETTINGS$SKILLS_FACET_STATE,
+		param: d,
+		values: _(p, x),
+		valueOf: (e, t) => t(e) ? "enabled" : "disabled",
+		selected: (e) => e.states,
+		withSelected: (e, t) => ({
+			...e,
+			states: v(p, t)
+		})
+	},
+	{
+		id: "recommendation",
+		labelKey: e.SETTINGS$SKILLS_FACET_RECOMMENDATION,
+		param: f,
+		values: _(m, S),
+		valueOf: (e) => t(e.name) ? "recommended" : "other",
+		selected: (e) => e.recommendations,
+		withSelected: (e, t) => ({
+			...e,
+			recommendations: v(m, t)
+		})
+	},
+	{
+		id: "source",
+		labelKey: e.SETTINGS$SKILLS_FACET_SOURCE,
+		param: c,
+		values: _(n, y),
+		valueOf: (e) => r(e),
+		selected: (e) => e.sources,
+		withSelected: (e, t) => ({
+			...e,
+			sources: v(n, t)
+		})
+	},
+	{
+		id: "category",
+		labelKey: e.SETTINGS$SKILLS_FACET_CATEGORY,
+		param: l,
+		values: _(o, a),
+		valueOf: (e) => s(e),
+		selected: (e) => e.categories,
+		withSelected: (e, t) => ({
+			...e,
+			categories: v(o, t)
+		})
+	},
+	{
+		id: "type",
+		labelKey: e.SETTINGS$SKILLS_FACET_TYPE,
+		param: u,
+		values: _(h, b),
+		valueOf: (e) => e.type,
+		selected: (e) => e.types,
+		withSelected: (e, t) => ({
+			...e,
+			types: v(h, t)
+		})
+	}
+];
+function w(e) {
+	let t = C.find((t) => t.id === e);
+	if (!t) throw Error(`Unknown skill facet group: ${e}`);
+	return t;
+}
+function T(e, t) {
+	let n = t.trim();
+	if (!n) return !0;
+	let r = [
+		e.name,
+		i(e),
+		e.description ?? "",
+		e.content ?? "",
+		e.license ?? "",
+		e.compatibility ?? "",
+		...e.triggers ?? [],
+		...e.allowed_tools ?? []
+	], a = n.toLowerCase();
+	return r.some((e) => e.toLowerCase().includes(a));
+}
+function E(e, t, n, r) {
+	return C.every((i) => {
+		if (i.id === r) return !0;
+		let a = i.selected(n);
+		return a.size === 0 ? !0 : a.has(i.valueOf(e, t));
+	});
+}
+function D(e, t, n) {
+	return e.filter((e) => T(e, n.query) && E(e, t, n));
+}
+function O(e, t, n) {
+	let r = {};
+	for (let i of e) {
+		let e = t.valueOf(i, n);
+		r[e] = (r[e] ?? 0) + 1;
+	}
+	return r;
+}
+function k(e, t, n, r, i) {
+	let a = O(t, e, r), o = e.values.filter(({ value: e }) => (a[e] ?? 0) > 0), s = e.selected(i);
+	if (o.length < 2 && s.size === 0) return null;
+	let c = e.values.filter(({ value: e }) => (a[e] ?? 0) > 0 || s.has(e)), l = O(n.filter((t) => E(t, r, i, e.id)), e, r);
+	return {
+		id: e.id,
+		labelKey: e.labelKey,
+		rows: c.map(({ value: e, labelKey: t }) => {
+			let n = l[e] ?? 0, r = s.has(e);
+			return {
+				value: e,
+				labelKey: t,
+				count: n,
+				checked: r,
+				disabled: n === 0 && !r
+			};
+		})
+	};
+}
+function A(e, t, n) {
+	let r = e.filter((e) => T(e, n.query));
+	return C.map((i) => k(i, e, r, t, n)).filter((e) => e !== null);
+}
+function j(e, t, n) {
+	let r = w(t);
+	if (!r.values.some((e) => e.value === n)) return e;
+	let i = new Set(r.selected(e));
+	return i.has(n) ? i.delete(n) : i.add(n), r.withSelected(e, i);
+}
+function M(e) {
+	return {
+		...g,
+		query: e.query
+	};
+}
+function N(e) {
+	return C.reduce((t, n) => t + n.selected(e).size, 0);
+}
+//#endregion
+export { g as EMPTY_SKILL_FILTER_STATE, D as applySkillFilters, A as buildSkillFacetGroups, M as clearSkillFilterFacets, N as countActiveFilters, j as toggleSkillFilterValue };
+
+//# sourceMappingURL=skill-filter.js.map

package/dist/components/features/skills/skill-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill-filter.js","names":[],"sources":["../../../../src/components/features/skills/skill-filter.ts"],"sourcesContent":["import type { SkillCategoryId } from \"@openhands/extensions/skills\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { SkillInfo, SkillType } from \"#/types/settings\";\nimport {\n  getSkillCategory,\n  SKILL_CATEGORY_LABEL_KEYS,\n  SKILL_CATEGORY_ORDER,\n} from \"#/utils/skill-category\";\nimport {\n  getSkillScope,\n  SKILL_SCOPE_ORDER,\n  type SkillScope,\n} from \"#/utils/skill-scope\";\nimport { isRecommendedSkill } from \"#/utils/skill-enablement\";\nimport { getSkillCardDescription } from \"./get-skill-card-description\";\n\nexport const SKILL_FILTER_QUERY_PARAM = \"q\";\nconst SOURCE_PARAM = \"source\";\nconst CATEGORY_PARAM = \"category\";\nconst TYPE_PARAM = \"type\";\nconst STATE_PARAM = \"state\";\nconst RECOMMENDATION_PARAM = \"recommendation\";\n\nexport type SkillEnabledState = \"enabled\" | \"disabled\";\nexport type SkillRecommendation = \"recommended\" | \"other\";\nexport type SkillFacetGroupId =\n  | \"state\"\n  | \"recommendation\"\n  | \"source\"\n  | \"category\"\n  | \"type\";\n\nconst SKILL_ENABLED_STATE_ORDER: readonly SkillEnabledState[] = [\n  \"enabled\",\n  \"disabled\",\n];\nconst SKILL_RECOMMENDATION_ORDER: readonly SkillRecommendation[] = [\n  \"recommended\",\n  \"other\",\n];\nconst SKILL_TYPE_ORDER: readonly SkillType[] = [\n  \"agentskills\",\n  \"knowledge\",\n  \"repo\",\n];\n\nexport interface SkillFilterState {\n  query: string;\n  sources: Set<SkillScope>;\n  categories: Set<SkillCategoryId>;\n  types: Set<SkillType>;\n  states: Set<SkillEnabledState>;\n  recommendations: Set<SkillRecommendation>;\n}\n\nexport interface SkillFacetRowModel {\n  value: string;\n  labelKey: I18nKey;\n  count: number;\n  checked: boolean;\n  disabled: boolean;\n}\n\nexport interface SkillFacetGroup {\n  id: SkillFacetGroupId;\n  labelKey: I18nKey;\n  rows: SkillFacetRowModel[];\n}\n\nexport const EMPTY_SKILL_FILTER_STATE: SkillFilterState = {\n  query: \"\",\n  sources: new Set(),\n  categories: new Set(),\n  types: new Set(),\n  states: new Set(),\n  recommendations: new Set(),\n};\n\n/** Carrying `labelKey`s rather than translated strings keeps this module pure, so its tests need no i18n. */\ninterface GroupValue {\n  value: string;\n  labelKey: I18nKey;\n}\n\nfunction labelledValues<TValue extends string>(\n  order: readonly TValue[],\n  labelKeys: Record<TValue, I18nKey>,\n): readonly GroupValue[] {\n  return order.map((value) => ({ value, labelKey: labelKeys[value] }));\n}\n\n/** Resolving the two lists behind enablement is the caller's job, not this module's. */\ntype SkillEnabledPredicate = (skill: SkillInfo) => boolean;\n\n/** A new facet group is declared here and nowhere else: `selected` / `withSelected` are what keep every operation below driven by this table alone. */\ninterface GroupDef {\n  id: SkillFacetGroupId;\n  labelKey: I18nKey;\n  param: string;\n  values: readonly GroupValue[];\n  valueOf: (skill: SkillInfo, isEnabled: SkillEnabledPredicate) => string;\n  selected: (state: SkillFilterState) => Set<string>;\n  withSelected: (\n    state: SkillFilterState,\n    next: Set<string>,\n  ) => SkillFilterState;\n}\n\n/** Rebuilding rather than casting keeps every writer below cast-free: a value the group does not declare cannot survive. */\nfunction narrowSet<TValue extends string>(\n  order: readonly TValue[],\n  next: Set<string>,\n): Set<TValue> {\n  return new Set(order.filter((value) => next.has(value)));\n}\n\nconst SOURCE_LABEL_KEYS: Record<SkillScope, I18nKey> = {\n  project: I18nKey.SETTINGS$SKILLS_SOURCE_PROJECT,\n  personal: I18nKey.SETTINGS$SKILLS_SOURCE_PERSONAL,\n  public: I18nKey.SETTINGS$SKILLS_SOURCE_PUBLIC,\n};\n\nconst TYPE_LABEL_KEYS: Record<SkillType, I18nKey> = {\n  agentskills: I18nKey.SETTINGS$SKILLS_TYPE_AGENTSKILLS,\n  knowledge: I18nKey.SETTINGS$SKILLS_TYPE_KNOWLEDGE,\n  repo: I18nKey.SETTINGS$SKILLS_TYPE_REPO,\n};\n\nconst STATE_LABEL_KEYS: Record<SkillEnabledState, I18nKey> = {\n  enabled: I18nKey.SETTINGS$SKILLS_ENABLED,\n  disabled: I18nKey.SETTINGS$SKILLS_DISABLED,\n};\n\nconst RECOMMENDATION_LABEL_KEYS: Record<SkillRecommendation, I18nKey> = {\n  recommended: I18nKey.SETTINGS$SKILLS_RECOMMENDED,\n  other: I18nKey.SETTINGS$SKILLS_RECOMMENDATION_OTHER,\n};\n\nconst GROUP_DEFS: readonly GroupDef[] = [\n  {\n    id: \"state\",\n    labelKey: I18nKey.SETTINGS$SKILLS_FACET_STATE,\n    param: STATE_PARAM,\n    values: labelledValues(SKILL_ENABLED_STATE_ORDER, STATE_LABEL_KEYS),\n    valueOf: (skill, isEnabled) => (isEnabled(skill) ? \"enabled\" : \"disabled\"),\n    selected: (state) => state.states,\n    withSelected: (state, next) => ({\n      ...state,\n      states: narrowSet(SKILL_ENABLED_STATE_ORDER, next),\n    }),\n  },\n  {\n    id: \"recommendation\",\n    labelKey: I18nKey.SETTINGS$SKILLS_FACET_RECOMMENDATION,\n    param: RECOMMENDATION_PARAM,\n    values: labelledValues(\n      SKILL_RECOMMENDATION_ORDER,\n      RECOMMENDATION_LABEL_KEYS,\n    ),\n    valueOf: (skill) =>\n      isRecommendedSkill(skill.name) ? \"recommended\" : \"other\",\n    selected: (state) => state.recommendations,\n    withSelected: (state, next) => ({\n      ...state,\n      recommendations: narrowSet(SKILL_RECOMMENDATION_ORDER, next),\n    }),\n  },\n  {\n    id: \"source\",\n    labelKey: I18nKey.SETTINGS$SKILLS_FACET_SOURCE,\n    param: SOURCE_PARAM,\n    values: labelledValues(SKILL_SCOPE_ORDER, SOURCE_LABEL_KEYS),\n    valueOf: (skill) => getSkillScope(skill),\n    selected: (state) => state.sources,\n    withSelected: (state, next) => ({\n      ...state,\n      sources: narrowSet(SKILL_SCOPE_ORDER, next),\n    }),\n  },\n  {\n    id: \"category\",\n    labelKey: I18nKey.SETTINGS$SKILLS_FACET_CATEGORY,\n    param: CATEGORY_PARAM,\n    values: labelledValues(SKILL_CATEGORY_ORDER, SKILL_CATEGORY_LABEL_KEYS),\n    valueOf: (skill) => getSkillCategory(skill),\n    selected: (state) => state.categories,\n    withSelected: (state, next) => ({\n      ...state,\n      categories: narrowSet(SKILL_CATEGORY_ORDER, next),\n    }),\n  },\n  {\n    id: \"type\",\n    labelKey: I18nKey.SETTINGS$SKILLS_FACET_TYPE,\n    param: TYPE_PARAM,\n    values: labelledValues(SKILL_TYPE_ORDER, TYPE_LABEL_KEYS),\n    valueOf: (skill) => skill.type,\n    selected: (state) => state.types,\n    withSelected: (state, next) => ({\n      ...state,\n      types: narrowSet(SKILL_TYPE_ORDER, next),\n    }),\n  },\n];\n\nfunction groupDef(id: SkillFacetGroupId): GroupDef {\n  const def = GROUP_DEFS.find((candidate) => candidate.id === id);\n  if (!def) throw new Error(`Unknown skill facet group: ${id}`);\n  return def;\n}\n\n/** Unknown values are dropped, so a hand-edited URL cannot smuggle one in. */\nfunction parseSet(raw: string[], def: GroupDef): Set<string> {\n  const legal = new Set(def.values.map(({ value }) => value));\n  return new Set(\n    raw.map((value) => value.trim()).filter((value) => legal.has(value)),\n  );\n}\n\nexport function parseSkillFilterState(\n  params: URLSearchParams,\n): SkillFilterState {\n  return GROUP_DEFS.reduce<SkillFilterState>(\n    (state, def) =>\n      def.withSelected(state, parseSet(params.getAll(def.param), def)),\n    {\n      ...EMPTY_SKILL_FILTER_STATE,\n      query: params.get(SKILL_FILTER_QUERY_PARAM) ?? \"\",\n    },\n  );\n}\n\nexport function toSkillFilterSearchParams(\n  state: SkillFilterState,\n): URLSearchParams {\n  const params = new URLSearchParams();\n  if (state.query) params.set(SKILL_FILTER_QUERY_PARAM, state.query);\n\n  // Canonical order keeps URLs deterministic regardless of click order.\n  for (const def of GROUP_DEFS) {\n    const selected = def.selected(state);\n    for (const { value } of def.values) {\n      if (selected.has(value)) params.append(def.param, value);\n    }\n  }\n\n  return params;\n}\n\nfunction matchesQuery(skill: SkillInfo, query: string): boolean {\n  const trimmed = query.trim();\n  if (!trimmed) return true;\n\n  const haystacks = [\n    skill.name,\n    getSkillCardDescription(skill),\n    skill.description ?? \"\",\n    skill.content ?? \"\",\n    skill.license ?? \"\",\n    skill.compatibility ?? \"\",\n    ...(skill.triggers ?? []),\n    ...(skill.allowed_tools ?? []),\n  ];\n\n  const lowered = trimmed.toLowerCase();\n  return haystacks.some((value) => value.toLowerCase().includes(lowered));\n}\n\n/**\n * `exclude` omits one group's own selection so its rows stay counted against the other groups alone.\n * A row therefore reads \"this many skills carry this value, under your other filters\" — the usual disjunctive facet count — and not \"your result set will be this big\": the group ORs its values together, so on a group that already has a selection the two differ.\n */\nfunction matchesFacets(\n  skill: SkillInfo,\n  isEnabled: SkillEnabledPredicate,\n  state: SkillFilterState,\n  exclude?: SkillFacetGroupId,\n): boolean {\n  return GROUP_DEFS.every((def) => {\n    if (def.id === exclude) return true;\n    const selected = def.selected(state);\n    if (selected.size === 0) return true;\n    return selected.has(def.valueOf(skill, isEnabled));\n  });\n}\n\nexport function applySkillFilters(\n  skills: SkillInfo[],\n  isEnabled: SkillEnabledPredicate,\n  state: SkillFilterState,\n): SkillInfo[] {\n  return skills.filter(\n    (skill) =>\n      matchesQuery(skill, state.query) &&\n      matchesFacets(skill, isEnabled, state),\n  );\n}\n\nfunction countByValue(\n  skills: SkillInfo[],\n  def: GroupDef,\n  isEnabled: SkillEnabledPredicate,\n): Record<string, number> {\n  const counts: Record<string, number> = {};\n  for (const skill of skills) {\n    const value = def.valueOf(skill, isEnabled);\n    counts[value] = (counts[value] ?? 0) + 1;\n  }\n  return counts;\n}\n\nfunction buildGroup(\n  def: GroupDef,\n  allSkills: SkillInfo[],\n  searched: SkillInfo[],\n  isEnabled: SkillEnabledPredicate,\n  state: SkillFilterState,\n): SkillFacetGroup | null {\n  // Visibility and the row set come from the raw list so the rail's shape\n  // depends only on what the user has, never on the active filters. If they\n  // tracked filtered counts, narrowing could make a group vanish mid-click.\n  const rawCounts = countByValue(allSkills, def, isEnabled);\n  const discriminating = def.values.filter(\n    ({ value }) => (rawCounts[value] ?? 0) > 0,\n  );\n  const selected = def.selected(state);\n  // A group with only one (or zero) discriminating values is normally hidden,\n  // but a selection can still be carried in from the URL for a value that has\n  // no matches for this user. Hiding the group then would enforce the filter\n  // invisibly, with no row left to explain or undo it.\n  if (discriminating.length < 2 && selected.size === 0) return null;\n\n  const visibleValues = def.values.filter(\n    ({ value }) => (rawCounts[value] ?? 0) > 0 || selected.has(value),\n  );\n\n  const candidates = searched.filter((skill) =>\n    matchesFacets(skill, isEnabled, state, def.id),\n  );\n  const counts = countByValue(candidates, def, isEnabled);\n\n  return {\n    id: def.id,\n    labelKey: def.labelKey,\n    rows: visibleValues.map(({ value, labelKey }) => {\n      const count = counts[value] ?? 0;\n      const checked = selected.has(value);\n      return {\n        value,\n        labelKey,\n        count,\n        checked,\n        disabled: count === 0 && !checked,\n      };\n    }),\n  };\n}\n\nexport function buildSkillFacetGroups(\n  skills: SkillInfo[],\n  isEnabled: SkillEnabledPredicate,\n  state: SkillFilterState,\n): SkillFacetGroup[] {\n  const searched = skills.filter((skill) => matchesQuery(skill, state.query));\n\n  return GROUP_DEFS.map((def) =>\n    buildGroup(def, skills, searched, isEnabled, state),\n  ).filter((group): group is SkillFacetGroup => group !== null);\n}\n\nexport function toggleSkillFilterValue(\n  state: SkillFilterState,\n  groupId: SkillFacetGroupId,\n  value: string,\n): SkillFilterState {\n  const def = groupDef(groupId);\n  // `withSelected` would drop an unknown value anyway; returning the same\n  // state object keeps a no-op toggle from re-rendering or rewriting the URL.\n  if (!def.values.some((candidate) => candidate.value === value)) return state;\n\n  const next = new Set(def.selected(state));\n  if (next.has(value)) {\n    next.delete(value);\n  } else {\n    next.add(value);\n  }\n\n  return def.withSelected(state, next);\n}\n\nexport function clearSkillFilterFacets(\n  state: SkillFilterState,\n): SkillFilterState {\n  return { ...EMPTY_SKILL_FILTER_STATE, query: state.query };\n}\n\nexport function countActiveFilters(state: SkillFilterState): number {\n  // The query is excluded: it is already visible in its own input, so counting\n  // it would double-report in both the Filters badge and the summary row.\n  return GROUP_DEFS.reduce((total, def) => total + def.selected(state).size, 0);\n}\n"],"mappings":"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"}

package/dist/components/features/skills/skill-filters-modal.cjs

@@ -0,0 +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("../../shared/modals/modal-backdrop.cjs"),i=require("../../shared/modals/modal-body.cjs"),a=require("../settings/brand-button.cjs"),o=require("./skill-facet-rail.cjs");let s=require("react/jsx-runtime");function c({groups:c,activeCount:l,onToggle:u,onClearAll:d,onClose:f}){let{t:p}=e.useTranslation(`openhands`);return(0,s.jsx)(r.ModalBackdrop,{onClose:f,"aria-label":p(t.I18nKey.SETTINGS$SKILLS_FILTERS_MODAL_TITLE),children:(0,s.jsxs)(i.ModalBody,{testID:`skill-filters-modal`,className:n.cn(`items-stretch`,i.MODAL_MAX_WIDTH_VIEWPORT),children:[(0,s.jsx)(`h3`,{className:`text-lg font-semibold text-foreground`,children:p(t.I18nKey.SETTINGS$SKILLS_FILTERS_MODAL_TITLE)}),(0,s.jsx)(`div`,{className:`max-h-[60vh] overflow-y-auto custom-scrollbar-always`,children:(0,s.jsx)(o.SkillFacetRail,{groups:c,onToggle:u})}),(0,s.jsxs)(`div`,{className:`flex items-center justify-end gap-2`,children:[l>0?(0,s.jsx)(a.BrandButton,{type:`button`,variant:`secondary`,testId:`skill-filters-modal-clear`,onClick:d,children:p(t.I18nKey.SETTINGS$SKILLS_CLEAR_FILTERS)}):null,(0,s.jsx)(a.BrandButton,{type:`button`,variant:`primary`,testId:`skill-filters-modal-done`,onClick:f,children:p(t.I18nKey.BUTTON$CLOSE)})]})]})})}exports.SkillFiltersModal=c;
+//# sourceMappingURL=skill-filters-modal.cjs.map

package/dist/components/features/skills/skill-filters-modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill-filters-modal.cjs","names":[],"sources":["../../../../src/components/features/skills/skill-filters-modal.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n  MODAL_MAX_WIDTH_VIEWPORT,\n  ModalBody,\n} from \"#/components/shared/modals/modal-body\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { SkillFacetRail } from \"./skill-facet-rail\";\nimport type { SkillFacetGroup, SkillFacetGroupId } from \"./skill-filter\";\n\ninterface SkillFiltersModalProps {\n  groups: SkillFacetGroup[];\n  activeCount: number;\n  onToggle: (groupId: SkillFacetGroupId, value: string) => void;\n  onClearAll: () => void;\n  onClose: () => void;\n}\n\nexport function SkillFiltersModal({\n  groups,\n  activeCount,\n  onToggle,\n  onClearAll,\n  onClose,\n}: SkillFiltersModalProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <ModalBackdrop\n      onClose={onClose}\n      aria-label={t(I18nKey.SETTINGS$SKILLS_FILTERS_MODAL_TITLE)}\n    >\n      <ModalBody\n        testID=\"skill-filters-modal\"\n        className={cn(\"items-stretch\", MODAL_MAX_WIDTH_VIEWPORT)}\n      >\n        <h3 className=\"text-lg font-semibold text-foreground\">\n          {t(I18nKey.SETTINGS$SKILLS_FILTERS_MODAL_TITLE)}\n        </h3>\n\n        <div className=\"max-h-[60vh] overflow-y-auto custom-scrollbar-always\">\n          <SkillFacetRail groups={groups} onToggle={onToggle} />\n        </div>\n\n        <div className=\"flex items-center justify-end gap-2\">\n          {activeCount > 0 ? (\n            <BrandButton\n              type=\"button\"\n              variant=\"secondary\"\n              testId=\"skill-filters-modal-clear\"\n              onClick={onClearAll}\n            >\n              {t(I18nKey.SETTINGS$SKILLS_CLEAR_FILTERS)}\n            </BrandButton>\n          ) : null}\n          <BrandButton\n            type=\"button\"\n            variant=\"primary\"\n            testId=\"skill-filters-modal-done\"\n            onClick={onClose}\n          >\n            {t(I18nKey.BUTTON$CLOSE)}\n          </BrandButton>\n        </div>\n      </ModalBody>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"2aAoBA,SAAgB,EAAkB,CAChC,SACA,cACA,WACA,aACA,WACyB,CACzB,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAExC,OACE,EAAA,EAAA,KAAC,EAAA,cAAD,CACW,UACT,aAAY,EAAE,EAAA,QAAQ,mCAAmC,YAEzD,EAAA,EAAA,MAAC,EAAA,UAAD,CACE,OAAO,sBACP,UAAW,EAAA,GAAG,gBAAiB,EAAA,wBAAwB,WAFzD,EAIE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,iDACX,EAAE,EAAA,QAAQ,mCAAmC,CAC5C,CAAA,GAEJ,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,iEACb,EAAA,EAAA,KAAC,EAAA,eAAD,CAAwB,SAAkB,UAAW,CAAA,CAClD,CAAA,GAEL,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+CAAf,CACG,EAAc,GACb,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,KAAK,SACL,QAAQ,YACR,OAAO,4BACP,QAAS,WAER,EAAE,EAAA,QAAQ,6BAA6B,CAC7B,CAAA,EACX,MACJ,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,KAAK,SACL,QAAQ,UACR,OAAO,2BACP,QAAS,WAER,EAAE,EAAA,QAAQ,YAAY,CACZ,CAAA,CACV,GACI,GACE,CAAA,CAEnB"}

package/dist/components/features/skills/skill-filters-modal.js

@@ -0,0 +1,53 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { cn as n } from "../../../utils/utils.js";
+import { ModalBackdrop as r } from "../../shared/modals/modal-backdrop.js";
+import { MODAL_MAX_WIDTH_VIEWPORT as i, ModalBody as a } from "../../shared/modals/modal-body.js";
+import { BrandButton as o } from "../settings/brand-button.js";
+import { SkillFacetRail as s } from "./skill-facet-rail.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/features/skills/skill-filters-modal.tsx
+function u({ groups: u, activeCount: d, onToggle: f, onClearAll: p, onClose: m }) {
+	let { t: h } = e("openhands");
+	return /* @__PURE__ */ c(r, {
+		onClose: m,
+		"aria-label": h(t.SETTINGS$SKILLS_FILTERS_MODAL_TITLE),
+		children: /* @__PURE__ */ l(a, {
+			testID: "skill-filters-modal",
+			className: n("items-stretch", i),
+			children: [
+				/* @__PURE__ */ c("h3", {
+					className: "text-lg font-semibold text-foreground",
+					children: h(t.SETTINGS$SKILLS_FILTERS_MODAL_TITLE)
+				}),
+				/* @__PURE__ */ c("div", {
+					className: "max-h-[60vh] overflow-y-auto custom-scrollbar-always",
+					children: /* @__PURE__ */ c(s, {
+						groups: u,
+						onToggle: f
+					})
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "flex items-center justify-end gap-2",
+					children: [d > 0 ? /* @__PURE__ */ c(o, {
+						type: "button",
+						variant: "secondary",
+						testId: "skill-filters-modal-clear",
+						onClick: p,
+						children: h(t.SETTINGS$SKILLS_CLEAR_FILTERS)
+					}) : null, /* @__PURE__ */ c(o, {
+						type: "button",
+						variant: "primary",
+						testId: "skill-filters-modal-done",
+						onClick: m,
+						children: h(t.BUTTON$CLOSE)
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { u as SkillFiltersModal };
+
+//# sourceMappingURL=skill-filters-modal.js.map

package/dist/components/features/skills/skill-filters-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill-filters-modal.js","names":[],"sources":["../../../../src/components/features/skills/skill-filters-modal.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n  MODAL_MAX_WIDTH_VIEWPORT,\n  ModalBody,\n} from \"#/components/shared/modals/modal-body\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { SkillFacetRail } from \"./skill-facet-rail\";\nimport type { SkillFacetGroup, SkillFacetGroupId } from \"./skill-filter\";\n\ninterface SkillFiltersModalProps {\n  groups: SkillFacetGroup[];\n  activeCount: number;\n  onToggle: (groupId: SkillFacetGroupId, value: string) => void;\n  onClearAll: () => void;\n  onClose: () => void;\n}\n\nexport function SkillFiltersModal({\n  groups,\n  activeCount,\n  onToggle,\n  onClearAll,\n  onClose,\n}: SkillFiltersModalProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <ModalBackdrop\n      onClose={onClose}\n      aria-label={t(I18nKey.SETTINGS$SKILLS_FILTERS_MODAL_TITLE)}\n    >\n      <ModalBody\n        testID=\"skill-filters-modal\"\n        className={cn(\"items-stretch\", MODAL_MAX_WIDTH_VIEWPORT)}\n      >\n        <h3 className=\"text-lg font-semibold text-foreground\">\n          {t(I18nKey.SETTINGS$SKILLS_FILTERS_MODAL_TITLE)}\n        </h3>\n\n        <div className=\"max-h-[60vh] overflow-y-auto custom-scrollbar-always\">\n          <SkillFacetRail groups={groups} onToggle={onToggle} />\n        </div>\n\n        <div className=\"flex items-center justify-end gap-2\">\n          {activeCount > 0 ? (\n            <BrandButton\n              type=\"button\"\n              variant=\"secondary\"\n              testId=\"skill-filters-modal-clear\"\n              onClick={onClearAll}\n            >\n              {t(I18nKey.SETTINGS$SKILLS_CLEAR_FILTERS)}\n            </BrandButton>\n          ) : null}\n          <BrandButton\n            type=\"button\"\n            variant=\"primary\"\n            testId=\"skill-filters-modal-done\"\n            onClick={onClose}\n          >\n            {t(I18nKey.BUTTON$CLOSE)}\n          </BrandButton>\n        </div>\n      </ModalBody>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":";;;;;;;;;AAoBA,SAAgB,EAAkB,EAChC,WACA,gBACA,aACA,eACA,cACyB;CACzB,IAAM,EAAE,SAAM,EAAe,WAAW;CAExC,OACE,kBAAC,GAAD;EACW;EACT,cAAY,EAAE,EAAQ,mCAAmC;YAEzD,kBAAC,GAAD;GACE,QAAO;GACP,WAAW,EAAG,iBAAiB,CAAwB;aAFzD;IAIE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAE,EAAQ,mCAAmC;IAC5C,CAAA;IAEJ,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MAAwB;MAAkB;KAAW,CAAA;IAClD,CAAA;IAEL,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,IAAc,IACb,kBAAC,GAAD;MACE,MAAK;MACL,SAAQ;MACR,QAAO;MACP,SAAS;gBAER,EAAE,EAAQ,6BAA6B;KAC7B,CAAA,IACX,MACJ,kBAAC,GAAD;MACE,MAAK;MACL,SAAQ;MACR,QAAO;MACP,SAAS;gBAER,EAAE,EAAQ,YAAY;KACZ,CAAA,CACV;;GACI;;CACE,CAAA;AAEnB"}

package/dist/components/features/skills/skill-icon-badge.cjs

@@ -0,0 +1,2 @@
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs"),t=require("../../../icons/skills.cjs");let n=require("react/jsx-runtime");function r({skillName:r,className:i}){return(0,n.jsx)(`span`,{"aria-hidden":`true`,title:r,"data-testid":`skill-icon-${r}`,className:e.cn(`inline-flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden`,`rounded-lg border border-white/10 bg-surface-raised text-white`,`shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]`,`[&>svg]:h-5 [&>svg]:w-5`,i),children:(0,n.jsx)(t.default,{})})}exports.SkillIconBadge=r;
+//# sourceMappingURL=skill-icon-badge.cjs.map

package/dist/components/features/skills/skill-icon-badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill-icon-badge.cjs","names":[],"sources":["../../../../src/components/features/skills/skill-icon-badge.tsx"],"sourcesContent":["import SkillsIcon from \"#/icons/skills.svg?react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface SkillIconBadgeProps {\n  skillName: string;\n  className?: string;\n}\n\nexport function SkillIconBadge({ skillName, className }: SkillIconBadgeProps) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      title={skillName}\n      data-testid={`skill-icon-${skillName}`}\n      className={cn(\n        \"inline-flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden\",\n        \"rounded-lg border border-white/10 bg-surface-raised text-white\",\n        \"shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]\",\n        \"[&>svg]:h-5 [&>svg]:w-5\",\n        className,\n      )}\n    >\n      <SkillsIcon />\n    </span>\n  );\n}\n"],"mappings":"yKAQA,SAAgB,EAAe,CAAE,YAAW,aAAkC,CAC5E,OACE,EAAA,EAAA,KAAC,OAAD,CACE,cAAY,OACZ,MAAO,EACP,cAAa,cAAc,IAC3B,UAAW,EAAA,GACT,6EACA,iEACA,gDACA,0BACA,CACF,YAEA,EAAA,EAAA,KAAC,EAAA,QAAD,CAAa,CAAA,CACT,CAAA,CAEV"}

package/dist/components/features/skills/skill-icon-badge.js

@@ -0,0 +1,17 @@
+import { cn as e } from "../../../utils/utils.js";
+import t from "../../../icons/skills.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/features/skills/skill-icon-badge.tsx
+function r({ skillName: r, className: i }) {
+	return /* @__PURE__ */ n("span", {
+		"aria-hidden": "true",
+		title: r,
+		"data-testid": `skill-icon-${r}`,
+		className: e("inline-flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden", "rounded-lg border border-white/10 bg-surface-raised text-white", "shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]", "[&>svg]:h-5 [&>svg]:w-5", i),
+		children: /* @__PURE__ */ n(t, {})
+	});
+}
+//#endregion
+export { r as SkillIconBadge };
+
+//# sourceMappingURL=skill-icon-badge.js.map

package/dist/components/features/skills/skill-icon-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill-icon-badge.js","names":[],"sources":["../../../../src/components/features/skills/skill-icon-badge.tsx"],"sourcesContent":["import SkillsIcon from \"#/icons/skills.svg?react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface SkillIconBadgeProps {\n  skillName: string;\n  className?: string;\n}\n\nexport function SkillIconBadge({ skillName, className }: SkillIconBadgeProps) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      title={skillName}\n      data-testid={`skill-icon-${skillName}`}\n      className={cn(\n        \"inline-flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden\",\n        \"rounded-lg border border-white/10 bg-surface-raised text-white\",\n        \"shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]\",\n        \"[&>svg]:h-5 [&>svg]:w-5\",\n        className,\n      )}\n    >\n      <SkillsIcon />\n    </span>\n  );\n}\n"],"mappings":";;;;AAQA,SAAgB,EAAe,EAAE,cAAW,gBAAkC;CAC5E,OACE,kBAAC,QAAD;EACE,eAAY;EACZ,OAAO;EACP,eAAa,cAAc;EAC3B,WAAW,EACT,8EACA,kEACA,iDACA,2BACA,CACF;YAEA,kBAAC,GAAD,CAAa,CAAA;CACT,CAAA;AAEV"}

package/dist/components/features/skills/skill-type-badge.cjs

@@ -0,0 +1,2 @@
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs");let n=require("react/jsx-runtime");var r=`inline-flex shrink-0 items-center whitespace-nowrap rounded-full border border-text-secondary/35 bg-text-secondary/12 px-2 py-0.5 text-[11px] font-medium leading-4 text-tertiary-light`,i={agentskills:{labelKey:t.I18nKey.SETTINGS$SKILLS_TYPE_AGENTSKILLS},knowledge:{labelKey:t.I18nKey.SETTINGS$SKILLS_TYPE_KNOWLEDGE},repo:{labelKey:t.I18nKey.SETTINGS$SKILLS_TYPE_REPO}};function a({type:t}){let{t:a}=e.useTranslation(`openhands`),o=i[t];return(0,n.jsx)(`span`,{"data-testid":`skill-type-badge-${t}`,className:r,children:a(o.labelKey)})}exports.SkillTypeBadge=a;
+//# sourceMappingURL=skill-type-badge.cjs.map

package/dist/components/features/skills/skill-type-badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill-type-badge.cjs","names":[],"sources":["../../../../src/components/features/skills/skill-type-badge.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { SkillType } from \"#/types/settings\";\n\ninterface SkillTypeBadgeProps {\n  type: SkillType;\n}\n\n/** Theme-aware pill chrome for skill type badges only (not shared metadata pills). */\nconst SKILL_TYPE_BADGE_CLASS_NAME =\n  \"inline-flex shrink-0 items-center whitespace-nowrap rounded-full border border-text-secondary/35 bg-text-secondary/12 px-2 py-0.5 text-[11px] font-medium leading-4 text-tertiary-light\";\n\nconst TYPE_CONFIG: Record<SkillType, { labelKey: I18nKey }> = {\n  agentskills: {\n    labelKey: I18nKey.SETTINGS$SKILLS_TYPE_AGENTSKILLS,\n  },\n  knowledge: {\n    labelKey: I18nKey.SETTINGS$SKILLS_TYPE_KNOWLEDGE,\n  },\n  repo: {\n    labelKey: I18nKey.SETTINGS$SKILLS_TYPE_REPO,\n  },\n};\n\nexport function getSkillTypeLabelKey(type: SkillType): I18nKey {\n  return TYPE_CONFIG[type].labelKey;\n}\n\nexport function SkillTypeBadge({ type }: SkillTypeBadgeProps) {\n  const { t } = useTranslation(\"openhands\");\n  const config = TYPE_CONFIG[type];\n  return (\n    <span\n      data-testid={`skill-type-badge-${type}`}\n      className={SKILL_TYPE_BADGE_CLASS_NAME}\n    >\n      {t(config.labelKey)}\n    </span>\n  );\n}\n"],"mappings":"mNASA,IAAM,EACJ,0LAEI,EAAwD,CAC5D,YAAa,CACX,SAAU,EAAA,QAAQ,gCACpB,EACA,UAAW,CACT,SAAU,EAAA,QAAQ,8BACpB,EACA,KAAM,CACJ,SAAU,EAAA,QAAQ,yBACpB,CACF,EAMA,SAAgB,EAAe,CAAE,QAA6B,CAC5D,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAS,EAAY,GAC3B,OACE,EAAA,EAAA,KAAC,OAAD,CACE,cAAa,oBAAoB,IACjC,UAAW,WAEV,EAAE,EAAO,QAAQ,CACd,CAAA,CAEV"}

package/dist/components/features/skills/skill-type-badge.js

@@ -0,0 +1,21 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/features/skills/skill-type-badge.tsx
+var r = "inline-flex shrink-0 items-center whitespace-nowrap rounded-full border border-text-secondary/35 bg-text-secondary/12 px-2 py-0.5 text-[11px] font-medium leading-4 text-tertiary-light", i = {
+	agentskills: { labelKey: t.SETTINGS$SKILLS_TYPE_AGENTSKILLS },
+	knowledge: { labelKey: t.SETTINGS$SKILLS_TYPE_KNOWLEDGE },
+	repo: { labelKey: t.SETTINGS$SKILLS_TYPE_REPO }
+};
+function a({ type: t }) {
+	let { t: a } = e("openhands"), o = i[t];
+	return /* @__PURE__ */ n("span", {
+		"data-testid": `skill-type-badge-${t}`,
+		className: r,
+		children: a(o.labelKey)
+	});
+}
+//#endregion
+export { a as SkillTypeBadge };
+
+//# sourceMappingURL=skill-type-badge.js.map

package/dist/components/features/skills/skill-type-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill-type-badge.js","names":[],"sources":["../../../../src/components/features/skills/skill-type-badge.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { SkillType } from \"#/types/settings\";\n\ninterface SkillTypeBadgeProps {\n  type: SkillType;\n}\n\n/** Theme-aware pill chrome for skill type badges only (not shared metadata pills). */\nconst SKILL_TYPE_BADGE_CLASS_NAME =\n  \"inline-flex shrink-0 items-center whitespace-nowrap rounded-full border border-text-secondary/35 bg-text-secondary/12 px-2 py-0.5 text-[11px] font-medium leading-4 text-tertiary-light\";\n\nconst TYPE_CONFIG: Record<SkillType, { labelKey: I18nKey }> = {\n  agentskills: {\n    labelKey: I18nKey.SETTINGS$SKILLS_TYPE_AGENTSKILLS,\n  },\n  knowledge: {\n    labelKey: I18nKey.SETTINGS$SKILLS_TYPE_KNOWLEDGE,\n  },\n  repo: {\n    labelKey: I18nKey.SETTINGS$SKILLS_TYPE_REPO,\n  },\n};\n\nexport function getSkillTypeLabelKey(type: SkillType): I18nKey {\n  return TYPE_CONFIG[type].labelKey;\n}\n\nexport function SkillTypeBadge({ type }: SkillTypeBadgeProps) {\n  const { t } = useTranslation(\"openhands\");\n  const config = TYPE_CONFIG[type];\n  return (\n    <span\n      data-testid={`skill-type-badge-${type}`}\n      className={SKILL_TYPE_BADGE_CLASS_NAME}\n    >\n      {t(config.labelKey)}\n    </span>\n  );\n}\n"],"mappings":";;;;AASA,IAAM,IACJ,2LAEI,IAAwD;CAC5D,aAAa,EACX,UAAU,EAAQ,iCACpB;CACA,WAAW,EACT,UAAU,EAAQ,+BACpB;CACA,MAAM,EACJ,UAAU,EAAQ,0BACpB;AACF;AAMA,SAAgB,EAAe,EAAE,WAA6B;CAC5D,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAS,EAAY;CAC3B,OACE,kBAAC,QAAD;EACE,eAAa,oBAAoB;EACjC,WAAW;YAEV,EAAE,EAAO,QAAQ;CACd,CAAA;AAEV"}

package/dist/components/features/skills/skills-toolbar.cjs

@@ -0,0 +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("../../../node_modules/lucide-react/dist/esm/icons/list-filter.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/search.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/x.cjs"),a=require("../../../utils/utils.cjs");let o=require("react/jsx-runtime");function s({search:s,onSearchChange:c,activeFilterCount:l,onOpenFilters:u}){let{t:d}=e.useTranslation(`openhands`);return(0,o.jsxs)(`div`,{"data-testid":`skills-toolbar`,className:`flex items-stretch gap-2`,children:[(0,o.jsxs)(`div`,{className:a.cn(`relative flex flex-1 min-w-0 items-center`,`rounded-lg border border-[var(--oh-border)] bg-base-secondary`,`focus-within:border-white/40 focus-within:ring-1 focus-within:ring-white/20`,`transition-colors`),children:[(0,o.jsx)(r.Search,{className:`ml-3 h-4 w-4 shrink-0 text-tertiary-alt`,"aria-hidden":!0}),(0,o.jsx)(`input`,{"data-testid":`skills-search-input`,type:`search`,value:s,onChange:e=>c(e.target.value),placeholder:d(t.I18nKey.SETTINGS$SKILLS_SEARCH_PLACEHOLDER),"aria-label":d(t.I18nKey.SETTINGS$SKILLS_SEARCH_PLACEHOLDER),className:a.cn(`flex-1 min-w-0 bg-transparent border-0 outline-none`,`px-3 py-2 text-sm placeholder:text-tertiary-alt`,`[&::-webkit-search-cancel-button]:hidden`)}),s?(0,o.jsx)(`button`,{type:`button`,onClick:()=>c(``),"aria-label":d(t.I18nKey.MCP$SEARCH_CLEAR),className:`mr-2 p-1 rounded text-tertiary-alt hover:text-white cursor-pointer`,children:(0,o.jsx)(i.X,{className:`h-4 w-4`,"aria-hidden":!0})}):null]}),(0,o.jsxs)(`button`,{type:`button`,"data-testid":`skills-filters-button`,onClick:u,className:a.cn(`flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm md:hidden`,`border border-[var(--oh-border)] bg-base-secondary text-white`,`cursor-pointer hover:bg-[var(--oh-interactive-hover)]`),children:[(0,o.jsx)(n.ListFilter,{className:`size-4 shrink-0`,"aria-hidden":!0}),d(t.I18nKey.SETTINGS$SKILLS_FILTERS_BUTTON),l>0?(0,o.jsx)(`span`,{className:`rounded-full bg-white px-1.5 text-[11px] font-medium text-black`,children:l}):null]})]})}exports.SkillsToolbar=s;
+//# sourceMappingURL=skills-toolbar.cjs.map

package/dist/components/features/skills/skills-toolbar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skills-toolbar.cjs","names":[],"sources":["../../../../src/components/features/skills/skills-toolbar.tsx"],"sourcesContent":["import { ListFilter, Search, X } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\ninterface SkillsToolbarProps {\n  search: string;\n  onSearchChange: (value: string) => void;\n  activeFilterCount: number;\n  onOpenFilters: () => void;\n}\n\nexport function SkillsToolbar({\n  search,\n  onSearchChange,\n  activeFilterCount,\n  onOpenFilters,\n}: SkillsToolbarProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <div data-testid=\"skills-toolbar\" className=\"flex items-stretch gap-2\">\n      <div\n        className={cn(\n          \"relative flex flex-1 min-w-0 items-center\",\n          \"rounded-lg border border-[var(--oh-border)] bg-base-secondary\",\n          \"focus-within:border-white/40 focus-within:ring-1 focus-within:ring-white/20\",\n          \"transition-colors\",\n        )}\n      >\n        <Search\n          className=\"ml-3 h-4 w-4 shrink-0 text-tertiary-alt\"\n          aria-hidden\n        />\n        <input\n          data-testid=\"skills-search-input\"\n          type=\"search\"\n          value={search}\n          onChange={(e) => onSearchChange(e.target.value)}\n          placeholder={t(I18nKey.SETTINGS$SKILLS_SEARCH_PLACEHOLDER)}\n          aria-label={t(I18nKey.SETTINGS$SKILLS_SEARCH_PLACEHOLDER)}\n          className={cn(\n            \"flex-1 min-w-0 bg-transparent border-0 outline-none\",\n            \"px-3 py-2 text-sm placeholder:text-tertiary-alt\",\n            \"[&::-webkit-search-cancel-button]:hidden\",\n          )}\n        />\n        {search ? (\n          <button\n            type=\"button\"\n            onClick={() => onSearchChange(\"\")}\n            aria-label={t(I18nKey.MCP$SEARCH_CLEAR)}\n            className=\"mr-2 p-1 rounded text-tertiary-alt hover:text-white cursor-pointer\"\n          >\n            <X className=\"h-4 w-4\" aria-hidden />\n          </button>\n        ) : null}\n      </div>\n\n      {/* The facet rail is desktop-only, so below md this is the only way in. */}\n      <button\n        type=\"button\"\n        data-testid=\"skills-filters-button\"\n        onClick={onOpenFilters}\n        className={cn(\n          \"flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm md:hidden\",\n          \"border border-[var(--oh-border)] bg-base-secondary text-white\",\n          \"cursor-pointer hover:bg-[var(--oh-interactive-hover)]\",\n        )}\n      >\n        <ListFilter className=\"size-4 shrink-0\" aria-hidden />\n        {t(I18nKey.SETTINGS$SKILLS_FILTERS_BUTTON)}\n        {activeFilterCount > 0 ? (\n          <span className=\"rounded-full bg-white px-1.5 text-[11px] font-medium text-black\">\n            {activeFilterCount}\n          </span>\n        ) : null}\n      </button>\n    </div>\n  );\n}\n"],"mappings":"udAYA,SAAgB,EAAc,CAC5B,SACA,iBACA,oBACA,iBACqB,CACrB,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAExC,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,cAAY,iBAAiB,UAAU,oCAA5C,EACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,4CACA,gEACA,8EACA,mBACF,WANF,EAQE,EAAA,EAAA,KAAC,EAAA,OAAD,CACE,UAAU,0CACV,cAAA,EACD,CAAA,GACD,EAAA,EAAA,KAAC,QAAD,CACE,cAAY,sBACZ,KAAK,SACL,MAAO,EACP,SAAW,GAAM,EAAe,EAAE,OAAO,KAAK,EAC9C,YAAa,EAAE,EAAA,QAAQ,kCAAkC,EACzD,aAAY,EAAE,EAAA,QAAQ,kCAAkC,EACxD,UAAW,EAAA,GACT,sDACA,kDACA,0CACF,CACD,CAAA,EACA,GACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,YAAe,EAAe,EAAE,EAChC,aAAY,EAAE,EAAA,QAAQ,gBAAgB,EACtC,UAAU,+EAEV,EAAA,EAAA,KAAC,EAAA,EAAD,CAAG,UAAU,UAAU,cAAA,EAAa,CAAA,CAC9B,CAAA,EACN,IACD,KAGL,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,cAAY,wBACZ,QAAS,EACT,UAAW,EAAA,GACT,0EACA,gEACA,uDACF,WARF,EAUE,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,UAAU,kBAAkB,cAAA,EAAa,CAAA,EACpD,EAAE,EAAA,QAAQ,8BAA8B,EACxC,EAAoB,GACnB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,2EACb,CACG,CAAA,EACJ,IACE,GACL,GAET"}

package/dist/components/features/skills/skills-toolbar.js

@@ -0,0 +1,63 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { ListFilter as n } from "../../../node_modules/lucide-react/dist/esm/icons/list-filter.js";
+import { Search as r } from "../../../node_modules/lucide-react/dist/esm/icons/search.js";
+import { X as i } from "../../../node_modules/lucide-react/dist/esm/icons/x.js";
+import { cn as a } from "../../../utils/utils.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/features/skills/skills-toolbar.tsx
+function c({ search: c, onSearchChange: l, activeFilterCount: u, onOpenFilters: d }) {
+	let { t: f } = e("openhands");
+	return /* @__PURE__ */ s("div", {
+		"data-testid": "skills-toolbar",
+		className: "flex items-stretch gap-2",
+		children: [/* @__PURE__ */ s("div", {
+			className: a("relative flex flex-1 min-w-0 items-center", "rounded-lg border border-[var(--oh-border)] bg-base-secondary", "focus-within:border-white/40 focus-within:ring-1 focus-within:ring-white/20", "transition-colors"),
+			children: [
+				/* @__PURE__ */ o(r, {
+					className: "ml-3 h-4 w-4 shrink-0 text-tertiary-alt",
+					"aria-hidden": !0
+				}),
+				/* @__PURE__ */ o("input", {
+					"data-testid": "skills-search-input",
+					type: "search",
+					value: c,
+					onChange: (e) => l(e.target.value),
+					placeholder: f(t.SETTINGS$SKILLS_SEARCH_PLACEHOLDER),
+					"aria-label": f(t.SETTINGS$SKILLS_SEARCH_PLACEHOLDER),
+					className: a("flex-1 min-w-0 bg-transparent border-0 outline-none", "px-3 py-2 text-sm placeholder:text-tertiary-alt", "[&::-webkit-search-cancel-button]:hidden")
+				}),
+				c ? /* @__PURE__ */ o("button", {
+					type: "button",
+					onClick: () => l(""),
+					"aria-label": f(t.MCP$SEARCH_CLEAR),
+					className: "mr-2 p-1 rounded text-tertiary-alt hover:text-white cursor-pointer",
+					children: /* @__PURE__ */ o(i, {
+						className: "h-4 w-4",
+						"aria-hidden": !0
+					})
+				}) : null
+			]
+		}), /* @__PURE__ */ s("button", {
+			type: "button",
+			"data-testid": "skills-filters-button",
+			onClick: d,
+			className: a("flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm md:hidden", "border border-[var(--oh-border)] bg-base-secondary text-white", "cursor-pointer hover:bg-[var(--oh-interactive-hover)]"),
+			children: [
+				/* @__PURE__ */ o(n, {
+					className: "size-4 shrink-0",
+					"aria-hidden": !0
+				}),
+				f(t.SETTINGS$SKILLS_FILTERS_BUTTON),
+				u > 0 ? /* @__PURE__ */ o("span", {
+					className: "rounded-full bg-white px-1.5 text-[11px] font-medium text-black",
+					children: u
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+export { c as SkillsToolbar };
+
+//# sourceMappingURL=skills-toolbar.js.map

package/dist/components/features/skills/skills-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skills-toolbar.js","names":[],"sources":["../../../../src/components/features/skills/skills-toolbar.tsx"],"sourcesContent":["import { ListFilter, Search, X } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\ninterface SkillsToolbarProps {\n  search: string;\n  onSearchChange: (value: string) => void;\n  activeFilterCount: number;\n  onOpenFilters: () => void;\n}\n\nexport function SkillsToolbar({\n  search,\n  onSearchChange,\n  activeFilterCount,\n  onOpenFilters,\n}: SkillsToolbarProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <div data-testid=\"skills-toolbar\" className=\"flex items-stretch gap-2\">\n      <div\n        className={cn(\n          \"relative flex flex-1 min-w-0 items-center\",\n          \"rounded-lg border border-[var(--oh-border)] bg-base-secondary\",\n          \"focus-within:border-white/40 focus-within:ring-1 focus-within:ring-white/20\",\n          \"transition-colors\",\n        )}\n      >\n        <Search\n          className=\"ml-3 h-4 w-4 shrink-0 text-tertiary-alt\"\n          aria-hidden\n        />\n        <input\n          data-testid=\"skills-search-input\"\n          type=\"search\"\n          value={search}\n          onChange={(e) => onSearchChange(e.target.value)}\n          placeholder={t(I18nKey.SETTINGS$SKILLS_SEARCH_PLACEHOLDER)}\n          aria-label={t(I18nKey.SETTINGS$SKILLS_SEARCH_PLACEHOLDER)}\n          className={cn(\n            \"flex-1 min-w-0 bg-transparent border-0 outline-none\",\n            \"px-3 py-2 text-sm placeholder:text-tertiary-alt\",\n            \"[&::-webkit-search-cancel-button]:hidden\",\n          )}\n        />\n        {search ? (\n          <button\n            type=\"button\"\n            onClick={() => onSearchChange(\"\")}\n            aria-label={t(I18nKey.MCP$SEARCH_CLEAR)}\n            className=\"mr-2 p-1 rounded text-tertiary-alt hover:text-white cursor-pointer\"\n          >\n            <X className=\"h-4 w-4\" aria-hidden />\n          </button>\n        ) : null}\n      </div>\n\n      {/* The facet rail is desktop-only, so below md this is the only way in. */}\n      <button\n        type=\"button\"\n        data-testid=\"skills-filters-button\"\n        onClick={onOpenFilters}\n        className={cn(\n          \"flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm md:hidden\",\n          \"border border-[var(--oh-border)] bg-base-secondary text-white\",\n          \"cursor-pointer hover:bg-[var(--oh-interactive-hover)]\",\n        )}\n      >\n        <ListFilter className=\"size-4 shrink-0\" aria-hidden />\n        {t(I18nKey.SETTINGS$SKILLS_FILTERS_BUTTON)}\n        {activeFilterCount > 0 ? (\n          <span className=\"rounded-full bg-white px-1.5 text-[11px] font-medium text-black\">\n            {activeFilterCount}\n          </span>\n        ) : null}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,EAAc,EAC5B,WACA,mBACA,sBACA,oBACqB;CACrB,IAAM,EAAE,SAAM,EAAe,WAAW;CAExC,OACE,kBAAC,OAAD;EAAK,eAAY;EAAiB,WAAU;YAA5C,CACE,kBAAC,OAAD;GACE,WAAW,EACT,6CACA,iEACA,+EACA,mBACF;aANF;IAQE,kBAAC,GAAD;KACE,WAAU;KACV,eAAA;IACD,CAAA;IACD,kBAAC,SAAD;KACE,eAAY;KACZ,MAAK;KACL,OAAO;KACP,WAAW,MAAM,EAAe,EAAE,OAAO,KAAK;KAC9C,aAAa,EAAE,EAAQ,kCAAkC;KACzD,cAAY,EAAE,EAAQ,kCAAkC;KACxD,WAAW,EACT,uDACA,mDACA,0CACF;IACD,CAAA;IACA,IACC,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAe,EAAE;KAChC,cAAY,EAAE,EAAQ,gBAAgB;KACtC,WAAU;eAEV,kBAAC,GAAD;MAAG,WAAU;MAAU,eAAA;KAAa,CAAA;IAC9B,CAAA,IACN;GACD;MAGL,kBAAC,UAAD;GACE,MAAK;GACL,eAAY;GACZ,SAAS;GACT,WAAW,EACT,2EACA,iEACA,uDACF;aARF;IAUE,kBAAC,GAAD;KAAY,WAAU;KAAkB,eAAA;IAAa,CAAA;IACpD,EAAE,EAAQ,8BAA8B;IACxC,IAAoB,IACnB,kBAAC,QAAD;KAAM,WAAU;eACb;IACG,CAAA,IACJ;GACE;IACL;;AAET"}

package/dist/components/shared/buttons/circle-plus-check-toggle.cjs

@@ -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("../../../icons/checkmark.cjs"),a=require("./styled-tooltip.cjs"),o=require("../../../icons/u-plus.cjs"),s=require("../../../icons/x-mark.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");function u({testId:e,isSelected:u,onToggle:d,isDisabled:f=!1,className:p,enableLabelKey:m=n.I18nKey.SETTINGS$SKILLS_ENABLE_SKILL,disableLabelKey:h=n.I18nKey.SETTINGS$SKILLS_DISABLE_SKILL,enableTooltipKey:g=n.I18nKey.COMMON$ENABLE,disableTooltipKey:_,removeTooltipKey:v=n.I18nKey.COMMON$REMOVE}){let{t:y}=t.useTranslation(`openhands`),[b,x]=c.default.useState(!1),S=e=>{e.stopPropagation(),!f&&(d(!u),e.currentTarget.blur())},C=u&&b,w=y(u?_??v:g),T=y(u?h:m);return(0,l.jsx)(a.StyledTooltip,{content:w,placement:`top`,children:(0,l.jsx)(`button`,{type:`button`,role:`switch`,"aria-checked":u,"data-testid":e,"data-showing-remove":C?`true`:`false`,disabled:f,"aria-label":T,onClick:S,onPointerEnter:()=>x(!0),onPointerLeave:()=>x(!1),className:r.cn(`inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full p-0 transition-colors`,u&&(C?`border-0 bg-[rgba(248,113,113,0.14)] text-[#ef4444] hover:bg-[rgba(248,113,113,0.24)]`:`border border-white bg-transparent text-white [&_path]:fill-current`),!u&&`border-0 bg-surface-raised text-white hover:bg-[var(--oh-interactive-hover)]`,f&&`cursor-not-allowed opacity-50`,p),children:u?C?(0,l.jsx)(s.default,{"aria-hidden":!0,width:14,height:14,className:`stroke-[2.5]`}):(0,l.jsx)(i.default,{"aria-hidden":!0,width:14,height:14}):(0,l.jsx)(o.default,{"aria-hidden":!0,className:`size-3`})})})}exports.CirclePlusCheckToggle=u;
+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("../../../icons/checkmark.cjs"),a=require("./styled-tooltip.cjs"),o=require("../../../icons/x-mark.cjs"),s=require("../../../icons/u-plus.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");function u({className:e,testId:i,tooltipKey:o=n.I18nKey.AUTOMATIONS$ADD_AUTOMATION}){let{t:c}=t.useTranslation(`openhands`);return(0,l.jsx)(a.StyledTooltip,{content:c(o),placement:`top`,children:(0,l.jsx)(`span`,{"aria-hidden":`true`,"data-testid":i,className:r.cn(`inline-flex size-7 shrink-0 items-center justify-center rounded-full bg-surface-raised text-white transition-colors hover:bg-[var(--oh-interactive-hover)]`,e),children:(0,l.jsx)(s.default,{className:`size-3`})})})}function d({testId:e,isSelected:u,onToggle:d,isDisabled:f=!1,className:p,enableLabelKey:m=n.I18nKey.SETTINGS$SKILLS_ENABLE_SKILL,disableLabelKey:h=n.I18nKey.SETTINGS$SKILLS_DISABLE_SKILL,enableTooltipKey:g=n.I18nKey.COMMON$ENABLE,disableTooltipKey:_,removeTooltipKey:v=n.I18nKey.COMMON$REMOVE}){let{t:y}=t.useTranslation(`openhands`),[b,x]=c.default.useState(!1),S=e=>{e.stopPropagation(),!f&&(d(!u),e.currentTarget.blur())},C=u&&b,w=y(u?_??v:g),T=y(u?h:m);return(0,l.jsx)(a.StyledTooltip,{content:w,placement:`top`,children:(0,l.jsx)(`button`,{type:`button`,role:`switch`,"aria-checked":u,"data-testid":e,"data-showing-remove":C?`true`:`false`,disabled:f,"aria-label":T,onClick:S,onPointerEnter:()=>x(!0),onPointerLeave:()=>x(!1),className:r.cn(`inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full p-0 transition-colors`,u&&(C?`border-0 bg-[rgba(248,113,113,0.14)] text-[#ef4444] hover:bg-[rgba(248,113,113,0.24)]`:`border border-white bg-transparent text-white [&_path]:fill-current`),!u&&`border-0 bg-surface-raised text-white hover:bg-[var(--oh-interactive-hover)]`,f&&`cursor-not-allowed opacity-50`,p),children:u?C?(0,l.jsx)(o.default,{"aria-hidden":!0,width:14,height:14,className:`stroke-[2.5]`}):(0,l.jsx)(i.default,{"aria-hidden":!0,width:14,height:14}):(0,l.jsx)(s.default,{"aria-hidden":!0,className:`size-3`})})})}exports.CirclePlusBadge=u,exports.CirclePlusCheckToggle=d;
 //# sourceMappingURL=circle-plus-check-toggle.cjs.map

package/dist/components/shared/buttons/circle-plus-check-toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"circle-plus-check-toggle.cjs","names":[],"sources":["../../../../src/components/shared/buttons/circle-plus-check-toggle.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport PlusIcon from \"#/icons/u-plus.svg?react\";\nimport CheckmarkIcon from \"#/icons/checkmark.svg?react\";\nimport RemoveIcon from \"#/icons/x-mark.svg?react\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\ninterface CirclePlusCheckToggleProps {\n  testId?: string;\n  isSelected: boolean;\n  onToggle: (selected: boolean) => void;\n  isDisabled?: boolean;\n  className?: string;\n  enableLabelKey?: I18nKey;\n  disableLabelKey?: I18nKey;\n  enableTooltipKey?: I18nKey;\n  disableTooltipKey?: I18nKey;\n  removeTooltipKey?: I18nKey;\n}\n\nexport function CirclePlusBadge({\n  className,\n  testId,\n  tooltipKey = I18nKey.AUTOMATIONS$ADD_AUTOMATION,\n}: {\n  className?: string;\n  testId?: string;\n  tooltipKey?: I18nKey;\n}) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <StyledTooltip content={t(tooltipKey)} placement=\"top\">\n      <span\n        aria-hidden=\"true\"\n        data-testid={testId}\n        className={cn(\n          \"inline-flex size-7 shrink-0 items-center justify-center rounded-full bg-surface-raised text-white transition-colors hover:bg-[var(--oh-interactive-hover)]\",\n          className,\n        )}\n      >\n        <PlusIcon className=\"size-3\" />\n      </span>\n    </StyledTooltip>\n  );\n}\n\nexport function CirclePlusCheckToggle({\n  testId,\n  isSelected,\n  onToggle,\n  isDisabled = false,\n  className,\n  enableLabelKey = I18nKey.SETTINGS$SKILLS_ENABLE_SKILL,\n  disableLabelKey = I18nKey.SETTINGS$SKILLS_DISABLE_SKILL,\n  enableTooltipKey = I18nKey.COMMON$ENABLE,\n  disableTooltipKey,\n  removeTooltipKey = I18nKey.COMMON$REMOVE,\n}: CirclePlusCheckToggleProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [isPointerOver, setIsPointerOver] = React.useState(false);\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n    if (isDisabled) {\n      return;\n    }\n    onToggle(!isSelected);\n    event.currentTarget.blur();\n  };\n\n  const showRemoveIcon = isSelected && isPointerOver;\n  const selectedTooltipKey = disableTooltipKey ?? removeTooltipKey;\n  const tooltipLabel = t(isSelected ? selectedTooltipKey : enableTooltipKey);\n  const ariaLabel = t(isSelected ? disableLabelKey : enableLabelKey);\n\n  return (\n    <StyledTooltip content={tooltipLabel} placement=\"top\">\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={isSelected}\n        data-testid={testId}\n        data-showing-remove={showRemoveIcon ? \"true\" : \"false\"}\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        onClick={handleClick}\n        onPointerEnter={() => setIsPointerOver(true)}\n        onPointerLeave={() => setIsPointerOver(false)}\n        className={cn(\n          \"inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full p-0 transition-colors\",\n          isSelected &&\n            (showRemoveIcon\n              ? \"border-0 bg-[rgba(248,113,113,0.14)] text-[#ef4444] hover:bg-[rgba(248,113,113,0.24)]\"\n              : \"border border-white bg-transparent text-white [&_path]:fill-current\"),\n          !isSelected &&\n            \"border-0 bg-surface-raised text-white hover:bg-[var(--oh-interactive-hover)]\",\n          isDisabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n      >\n        {isSelected ? (\n          showRemoveIcon ? (\n            <RemoveIcon\n              aria-hidden\n              width={14}\n              height={14}\n              className=\"stroke-[2.5]\"\n            />\n          ) : (\n            <CheckmarkIcon aria-hidden width={14} height={14} />\n          )\n        ) : (\n          <PlusIcon aria-hidden className=\"size-3\" />\n        )}\n      </button>\n    </StyledTooltip>\n  );\n}\n"],"mappings":"6bAiDA,SAAgB,EAAsB,CACpC,SACA,aACA,WACA,aAAa,GACb,YACA,iBAAiB,EAAA,QAAQ,6BACzB,kBAAkB,EAAA,QAAQ,8BAC1B,mBAAmB,EAAA,QAAQ,cAC3B,oBACA,mBAAmB,EAAA,QAAQ,eACE,CAC7B,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAC,EAAe,GAAoB,EAAA,QAAM,SAAS,EAAK,EAExD,EAAe,GAA+C,CAClE,EAAM,gBAAgB,EAClB,KAGJ,EAAS,CAAC,CAAU,EACpB,EAAM,cAAc,KAAK,EAC3B,EAEM,EAAiB,GAAc,EAE/B,EAAe,EAAE,EADI,GAAqB,EACS,CAAgB,EACnE,EAAY,EAAE,EAAa,EAAkB,CAAc,EAEjE,OACE,EAAA,EAAA,KAAC,EAAA,cAAD,CAAe,QAAS,EAAc,UAAU,gBAC9C,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,KAAK,SACL,eAAc,EACd,cAAa,EACb,sBAAqB,EAAiB,OAAS,QAC/C,SAAU,EACV,aAAY,EACZ,QAAS,EACT,mBAAsB,EAAiB,EAAI,EAC3C,mBAAsB,EAAiB,EAAK,EAC5C,UAAW,EAAA,GACT,4GACA,IACG,EACG,wFACA,uEACN,CAAC,GACC,+EACF,GAAc,gCACd,CACF,WAEC,EACC,GACE,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,cAAA,GACA,MAAO,GACP,OAAQ,GACR,UAAU,cACX,CAAA,GAED,EAAA,EAAA,KAAC,EAAA,QAAD,CAAe,cAAA,GAAY,MAAO,GAAI,OAAQ,EAAK,CAAA,GAGrD,EAAA,EAAA,KAAC,EAAA,QAAD,CAAU,cAAA,GAAY,UAAU,QAAU,CAAA,CAEtC,CAAA,CACK,CAAA,CAEnB"}
+{"version":3,"file":"circle-plus-check-toggle.cjs","names":[],"sources":["../../../../src/components/shared/buttons/circle-plus-check-toggle.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport PlusIcon from \"#/icons/u-plus.svg?react\";\nimport CheckmarkIcon from \"#/icons/checkmark.svg?react\";\nimport RemoveIcon from \"#/icons/x-mark.svg?react\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\ninterface CirclePlusCheckToggleProps {\n  testId?: string;\n  isSelected: boolean;\n  onToggle: (selected: boolean) => void;\n  isDisabled?: boolean;\n  className?: string;\n  enableLabelKey?: I18nKey;\n  disableLabelKey?: I18nKey;\n  enableTooltipKey?: I18nKey;\n  disableTooltipKey?: I18nKey;\n  removeTooltipKey?: I18nKey;\n}\n\nexport function CirclePlusBadge({\n  className,\n  testId,\n  tooltipKey = I18nKey.AUTOMATIONS$ADD_AUTOMATION,\n}: {\n  className?: string;\n  testId?: string;\n  tooltipKey?: I18nKey;\n}) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <StyledTooltip content={t(tooltipKey)} placement=\"top\">\n      <span\n        aria-hidden=\"true\"\n        data-testid={testId}\n        className={cn(\n          \"inline-flex size-7 shrink-0 items-center justify-center rounded-full bg-surface-raised text-white transition-colors hover:bg-[var(--oh-interactive-hover)]\",\n          className,\n        )}\n      >\n        <PlusIcon className=\"size-3\" />\n      </span>\n    </StyledTooltip>\n  );\n}\n\nexport function CirclePlusCheckToggle({\n  testId,\n  isSelected,\n  onToggle,\n  isDisabled = false,\n  className,\n  enableLabelKey = I18nKey.SETTINGS$SKILLS_ENABLE_SKILL,\n  disableLabelKey = I18nKey.SETTINGS$SKILLS_DISABLE_SKILL,\n  enableTooltipKey = I18nKey.COMMON$ENABLE,\n  disableTooltipKey,\n  removeTooltipKey = I18nKey.COMMON$REMOVE,\n}: CirclePlusCheckToggleProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [isPointerOver, setIsPointerOver] = React.useState(false);\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n    if (isDisabled) {\n      return;\n    }\n    onToggle(!isSelected);\n    event.currentTarget.blur();\n  };\n\n  const showRemoveIcon = isSelected && isPointerOver;\n  const selectedTooltipKey = disableTooltipKey ?? removeTooltipKey;\n  const tooltipLabel = t(isSelected ? selectedTooltipKey : enableTooltipKey);\n  const ariaLabel = t(isSelected ? disableLabelKey : enableLabelKey);\n\n  return (\n    <StyledTooltip content={tooltipLabel} placement=\"top\">\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={isSelected}\n        data-testid={testId}\n        data-showing-remove={showRemoveIcon ? \"true\" : \"false\"}\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        onClick={handleClick}\n        onPointerEnter={() => setIsPointerOver(true)}\n        onPointerLeave={() => setIsPointerOver(false)}\n        className={cn(\n          \"inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full p-0 transition-colors\",\n          isSelected &&\n            (showRemoveIcon\n              ? \"border-0 bg-[rgba(248,113,113,0.14)] text-[#ef4444] hover:bg-[rgba(248,113,113,0.24)]\"\n              : \"border border-white bg-transparent text-white [&_path]:fill-current\"),\n          !isSelected &&\n            \"border-0 bg-surface-raised text-white hover:bg-[var(--oh-interactive-hover)]\",\n          isDisabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n      >\n        {isSelected ? (\n          showRemoveIcon ? (\n            <RemoveIcon\n              aria-hidden\n              width={14}\n              height={14}\n              className=\"stroke-[2.5]\"\n            />\n          ) : (\n            <CheckmarkIcon aria-hidden width={14} height={14} />\n          )\n        ) : (\n          <PlusIcon aria-hidden className=\"size-3\" />\n        )}\n      </button>\n    </StyledTooltip>\n  );\n}\n"],"mappings":"6bAsBA,SAAgB,EAAgB,CAC9B,YACA,SACA,aAAa,EAAA,QAAQ,4BAKpB,CACD,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAExC,OACE,EAAA,EAAA,KAAC,EAAA,cAAD,CAAe,QAAS,EAAE,CAAU,EAAG,UAAU,gBAC/C,EAAA,EAAA,KAAC,OAAD,CACE,cAAY,OACZ,cAAa,EACb,UAAW,EAAA,GACT,6JACA,CACF,YAEA,EAAA,EAAA,KAAC,EAAA,QAAD,CAAU,UAAU,QAAU,CAAA,CAC1B,CAAA,CACO,CAAA,CAEnB,CAEA,SAAgB,EAAsB,CACpC,SACA,aACA,WACA,aAAa,GACb,YACA,iBAAiB,EAAA,QAAQ,6BACzB,kBAAkB,EAAA,QAAQ,8BAC1B,mBAAmB,EAAA,QAAQ,cAC3B,oBACA,mBAAmB,EAAA,QAAQ,eACE,CAC7B,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAC,EAAe,GAAoB,EAAA,QAAM,SAAS,EAAK,EAExD,EAAe,GAA+C,CAClE,EAAM,gBAAgB,EAClB,KAGJ,EAAS,CAAC,CAAU,EACpB,EAAM,cAAc,KAAK,EAC3B,EAEM,EAAiB,GAAc,EAE/B,EAAe,EAAE,EADI,GAAqB,EACS,CAAgB,EACnE,EAAY,EAAE,EAAa,EAAkB,CAAc,EAEjE,OACE,EAAA,EAAA,KAAC,EAAA,cAAD,CAAe,QAAS,EAAc,UAAU,gBAC9C,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,KAAK,SACL,eAAc,EACd,cAAa,EACb,sBAAqB,EAAiB,OAAS,QAC/C,SAAU,EACV,aAAY,EACZ,QAAS,EACT,mBAAsB,EAAiB,EAAI,EAC3C,mBAAsB,EAAiB,EAAK,EAC5C,UAAW,EAAA,GACT,4GACA,IACG,EACG,wFACA,uEACN,CAAC,GACC,+EACF,GAAc,gCACd,CACF,WAEC,EACC,GACE,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,cAAA,GACA,MAAO,GACP,OAAQ,GACR,UAAU,cACX,CAAA,GAED,EAAA,EAAA,KAAC,EAAA,QAAD,CAAe,cAAA,GAAY,MAAO,GAAI,OAAQ,EAAK,CAAA,GAGrD,EAAA,EAAA,KAAC,EAAA,QAAD,CAAU,cAAA,GAAY,UAAU,QAAU,CAAA,CAEtC,CAAA,CACK,CAAA,CAEnB"}

package/dist/components/shared/buttons/circle-plus-check-toggle.js

@@ -3,12 +3,25 @@ import { I18nKey as t } from "../../../i18n/declaration.js";
 import { cn as n } from "../../../utils/utils.js";
 import r from "../../../icons/checkmark.js";
 import { StyledTooltip as i } from "./styled-tooltip.js";
-import a from "../../../icons/u-plus.js";
-import o from "../../../icons/x-mark.js";
+import a from "../../../icons/x-mark.js";
+import o from "../../../icons/u-plus.js";
 import s from "react";
 import { jsx as c } from "react/jsx-runtime";
 //#region src/components/shared/buttons/circle-plus-check-toggle.tsx
-function l({ testId: l, isSelected: u, onToggle: d, isDisabled: f = !1, className: p, enableLabelKey: m = t.SETTINGS$SKILLS_ENABLE_SKILL, disableLabelKey: h = t.SETTINGS$SKILLS_DISABLE_SKILL, enableTooltipKey: g = t.COMMON$ENABLE, disableTooltipKey: _, removeTooltipKey: v = t.COMMON$REMOVE }) {
+function l({ className: r, testId: a, tooltipKey: s = t.AUTOMATIONS$ADD_AUTOMATION }) {
+	let { t: l } = e("openhands");
+	return /* @__PURE__ */ c(i, {
+		content: l(s),
+		placement: "top",
+		children: /* @__PURE__ */ c("span", {
+			"aria-hidden": "true",
+			"data-testid": a,
+			className: n("inline-flex size-7 shrink-0 items-center justify-center rounded-full bg-surface-raised text-white transition-colors hover:bg-[var(--oh-interactive-hover)]", r),
+			children: /* @__PURE__ */ c(o, { className: "size-3" })
+		})
+	});
+}
+function u({ testId: l, isSelected: u, onToggle: d, isDisabled: f = !1, className: p, enableLabelKey: m = t.SETTINGS$SKILLS_ENABLE_SKILL, disableLabelKey: h = t.SETTINGS$SKILLS_DISABLE_SKILL, enableTooltipKey: g = t.COMMON$ENABLE, disableTooltipKey: _, removeTooltipKey: v = t.COMMON$REMOVE }) {
 	let { t: y } = e("openhands"), [b, x] = s.useState(!1), S = (e) => {
 		e.stopPropagation(), !f && (d(!u), e.currentTarget.blur());
 	}, C = u && b, w = y(u ? _ ?? v : g), T = y(u ? h : m);
@@ -27,7 +40,7 @@ function l({ testId: l, isSelected: u, onToggle: d, isDisabled: f = !1, classNam
 			onPointerEnter: () => x(!0),
 			onPointerLeave: () => x(!1),
 			className: n("inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full p-0 transition-colors", u && (C ? "border-0 bg-[rgba(248,113,113,0.14)] text-[#ef4444] hover:bg-[rgba(248,113,113,0.24)]" : "border border-white bg-transparent text-white [&_path]:fill-current"), !u && "border-0 bg-surface-raised text-white hover:bg-[var(--oh-interactive-hover)]", f && "cursor-not-allowed opacity-50", p),
-			children: u ? C ? /* @__PURE__ */ c(o, {
+			children: u ? C ? /* @__PURE__ */ c(a, {
 				"aria-hidden": !0,
 				width: 14,
 				height: 14,
@@ -36,7 +49,7 @@ function l({ testId: l, isSelected: u, onToggle: d, isDisabled: f = !1, classNam
 				"aria-hidden": !0,
 				width: 14,
 				height: 14
-			}) : /* @__PURE__ */ c(a, {
+			}) : /* @__PURE__ */ c(o, {
 				"aria-hidden": !0,
 				className: "size-3"
 			})
@@ -44,6 +57,6 @@ function l({ testId: l, isSelected: u, onToggle: d, isDisabled: f = !1, classNam
 	});
 }
 //#endregion
-export { l as CirclePlusCheckToggle };
+export { l as CirclePlusBadge, u as CirclePlusCheckToggle };
 
 //# sourceMappingURL=circle-plus-check-toggle.js.map