import{a as e,n as t}from"./lit-xS7RrYW6.js";import{K as n,R as r,t as i}from"./index-Bt8RaTD0.js";var a=null,o=null,s=new Set([`openclaw-workspace`,`openclaw-extra`]),c=null,l=null,u=!1,d=null,f=e`
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="9" cy="5" r="1" />
    <circle cx="9" cy="12" r="1" />
    <circle cx="9" cy="19" r="1" />
    <circle cx="15" cy="5" r="1" />
    <circle cx="15" cy="12" r="1" />
    <circle cx="15" cy="19" r="1" />
  </svg>
`;function p(i){var a;let o=(((a=i.mySkillsReport)==null?void 0:a.skills)??[]).filter(e=>e.extra!==void 0||s.has(e.source)),c=i.selectedSkillGroupId===null?o:o.filter(e=>i.skillGroupMap[e.skillKey]===i.selectedSkillGroupId),l=c.filter(e=>!e.disabled),u=c.filter(e=>e.disabled),d=o.length>0||i.skillGroups.length>0||i.creatingSkillGroup;return e`
    <div class="sc">
      <!-- 技能中心 tab -->
      ${i.tab===`center`?e`
            <!-- Filter row: categories + search -->
            <div class="sc__filter-row">
              <div class="sc__cats">
                <button
                  class="sc__cat ${i.selectedCategory===null?`sc__cat--active`:``}"
                  @click=${()=>i.onCategoryChange(null)}
                >
                  全部
                </button>
                ${(i.categories??[]).map(t=>e`
                    <button
                      class="sc__cat ${i.selectedCategory===t.id?`sc__cat--active`:``}"
                      @click=${()=>i.onCategoryChange(t.id)}
                    >
                      ${t.name}
                    </button>
                  `)}
              </div>
              <div class="sc__search-wrap">
                <span class="sc__search-icon">${r.search}</span>
                <input
                  class="sc__search"
                  type="search"
                  placeholder="搜索技能…"
                  .value=${i.searchQuery}
                  @input=${e=>i.onSearchChange(e.target.value)}
                />
              </div>
            </div>

            <!-- Error banner -->
            ${i.itemError?e`<div class="sc__error">
                  <svg
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <circle cx="12" cy="12" r="10" />
                    <line x1="12" y1="8" x2="12" y2="12" />
                    <line x1="12" y1="16" x2="12.01" y2="16" />
                  </svg>
                  <span>${i.itemError}</span>
                </div>`:t}

            <!-- Store grid -->
            <div class="sc__body">
              ${i.storeSkillsLoading?e`<div class="sc__loading">
                    <span class="sc__spinner-lg"></span>
                  </div>`:(()=>{let t=i.searchQuery.toLowerCase(),n=(i.storeSkills??[]).filter(e=>!(i.selectedCategory!==null&&e.categoryId!==i.selectedCategory||t&&!(e.title??``).toLowerCase().includes(t)&&!(e.name??``).toLowerCase().includes(t)&&!(e.description??``).toLowerCase().includes(t)));return n.length===0?e`<div class="sc__empty">
                          ${r.zap}
                          <p class="sc__empty-title">暂无可用技能</p>
                          <p class="sc__empty-sub">尝试调整分类或搜索关键词</p>
                        </div>`:e`<div class="sc__grid">
                          ${n.map(e=>T(e,i))}
                        </div>`})()}
            </div>
          `:t}

      <!-- 我的技能 tab -->
      ${i.tab===`mine`?e`
            <div class="sc__body">
              ${d?C(i):t}
              ${i.mySkillsLoading&&o.length===0?e`<div class="sc__loading">
                    <span class="sc__spinner-lg"></span>
                  </div>`:o.length===0?e`
                      <div class="sc__empty">
                        ${r.zap}
                        <p class="sc__empty-title">暂无已安装的技能</p>
                        <p class="sc__empty-sub">前往技能中心浏览并安装你需要的技能</p>
                        <button class="sc__empty-link" @click=${i.onNavigateToCenter}>
                          前往技能中心
                        </button>
                      </div>
                    `:c.length===0?e`
                        <div class="sc__empty">
                          ${r.zap}
                          <p class="sc__empty-title">该分组暂无技能</p>
                          <p class="sc__empty-sub">从全部中移动技能到此分组</p>
                          <button
                            class="sc__empty-link"
                            @click=${()=>i.onSelectSkillGroup(null)}
                          >
                            返回全部
                          </button>
                        </div>
                      `:e`
                        ${l.length>0?e`
                              <section class="sc__section">
                                <h2 class="sc__section-title">
                                  已启用
                                  <span class="sc__section-count">${l.length}</span>
                                </h2>
                                <div class="sc__grid">
                                  ${n(l,e=>e.skillKey,e=>E(e,i))}
                                </div>
                              </section>
                            `:t}
                        ${u.length>0?e`
                              <section class="sc__section">
                                <h2 class="sc__section-title">
                                  已停用
                                  <span class="sc__section-count">${u.length}</span>
                                </h2>
                                <div class="sc__grid">
                                  ${n(u,e=>e.skillKey,e=>E(e,i))}
                                </div>
                              </section>
                            `:t}
                      `}
            </div>
          `:t}
    </div>
    ${m(i)}
  `}function m(n){let r=n.deleteSkillGroupTarget;if(!r)return t;let i=`删除分组`,a=`确定删除分组「${r.label}」吗？分组内的技能不会被卸载，将移回未分组区域。`;return e`
    <openclaw-modal-dialog
      label=${i}
      description=${a}
      @modal-cancel=${n.onCancelDeleteSkillGroup}
    >
      <div class="exec-approval-card">
        <div class="exec-approval-header">
          <div>
            <div class="exec-approval-title">${i}</div>
            <div class="exec-approval-sub">${a}</div>
          </div>
        </div>
        <div class="exec-approval-actions">
          <button class="btn" @click=${n.onCancelDeleteSkillGroup}>取消</button>
          <button class="btn danger" @click=${n.onConfirmDeleteSkillGroup}>删除</button>
        </div>
      </div>
    </openclaw-modal-dialog>
  `}function h(e){var t;return a??((t=e.dataTransfer)==null?void 0:t.getData(`text/plain`))??``}function g(e,t){e.currentTarget.classList.toggle(`sc__group-pill--drag-over`,t)}function _(e){let t=e instanceof Element?e:null,n=t==null?void 0:t.closest(`details`);n&&(n.open=!1)}function v(e){c!==null&&(c=null,l=null,e==null||e())}function y(e){u||(u=!0,d=t=>{if(c===null)return;let n=t.target;n!=null&&n.closest(`.sc__group-menu-panel`)||n!=null&&n.closest(`.sc__group-menu-trigger`)||v(e)},document.addEventListener(`mousedown`,d))}function b(e){let t=window.getComputedStyle(e);return t.transform!==`none`||t.perspective!==`none`||t.filter!==`none`||t.backdropFilter!==`none`||t.contain.includes(`paint`)||t.contain.includes(`layout`)||t.willChange.includes(`transform`)||t.willChange.includes(`perspective`)||t.willChange.includes(`filter`)}function x(e){let t=e.parentElement;for(;t&&t!==document.documentElement;){if(b(t))return t.getBoundingClientRect();t=t.parentElement}return null}function S(e,t,n){let r=t.getBoundingClientRect(),i=x(t),a=Math.max(8,Math.min(r.right-112,window.innerWidth-112-8)),o=r.bottom+6;l={left:a-((i==null?void 0:i.left)??0),top:o-((i==null?void 0:i.top)??0)},c=e,y(n),n==null||n()}function C(t){let n=i(t.skillGroups);return e`
    <div class="sc__group-row">
      <button
        class="sc__group-pill ${t.selectedSkillGroupId===null?`sc__group-pill--active`:``}"
        @click=${()=>t.onSelectSkillGroup(null)}
        @dragover=${e=>{e.preventDefault(),g(e,!0)}}
        @dragleave=${e=>g(e,!1)}
        @drop=${e=>{e.preventDefault(),g(e,!1);let n=h(e);n&&t.onMoveSkillToGroup(n,null)}}
      >
        全部
      </button>
      ${n.map(e=>w(e,t))}
      ${t.creatingSkillGroup?e`
            <input
              class="sc__group-input"
              placeholder="分组名称"
              maxlength="30"
              autofocus
              @keydown=${e=>{e.key===`Enter`&&e.currentTarget.blur(),e.key===`Escape`&&(e.currentTarget.value=``,t.onCancelCreateSkillGroup())}}
              @blur=${e=>{let n=e.currentTarget.value;n.trim()?t.onCreateSkillGroup(n):t.onCancelCreateSkillGroup()}}
            />
          `:e`
            <button
              class="sc__group-pill sc__group-pill--add"
              @click=${t.onStartCreateSkillGroup}
            >
              ${r.plus} 新建分组
            </button>
          `}
    </div>
  `}function w(n,i){return i.renamingSkillGroupId===n.id?e`
      <input
        class="sc__group-input"
        .value=${n.label}
        maxlength="30"
        autofocus
        @keydown=${e=>{e.key===`Enter`&&e.currentTarget.blur(),e.key===`Escape`&&(e.currentTarget.value=n.label,i.onCancelRenameSkillGroup())}}
        @blur=${e=>{i.onRenameSkillGroup(n.id,e.currentTarget.value)}}
      />
    `:e`
    <span
      class="sc__group-wrap sc__group-pill ${i.selectedSkillGroupId===n.id?`sc__group-pill--active`:``}"
      @dragover=${e=>{e.preventDefault(),g(e,!0)}}
      @dragleave=${e=>g(e,!1)}
      @drop=${e=>{e.preventDefault(),g(e,!1);let t=h(e);t&&i.onMoveSkillToGroup(t,n.id)}}
    >
      <button class="sc__group-main" @click=${()=>i.onSelectSkillGroup(n.id)}>
        <span class="sc__group-label">${n.label}</span>
      </button>
      <span
        class="sc__group-menu-trigger ${i.selectedSkillGroupId===n.id?`sc__group-menu-trigger--active`:``}"
        role="button"
        aria-label="分组操作"
        @click=${e=>{e.stopPropagation(),c===n.id?v(i.requestUpdate):S(n.id,e.currentTarget,i.requestUpdate)}}
      >
        ${r.moreHorizontal}
      </span>
      ${c===n.id?e`
            <div
              class="sc__group-menu-panel"
              style=${l?`left:${l.left}px;top:${l.top}px;`:``}
            >
              <button
                @click=${()=>{v(i.requestUpdate),i.onStartRenameSkillGroup(n.id)}}
              >
                ${r.edit} 重命名
              </button>
              <button
                class="sc__group-menu-danger"
                @click=${()=>{v(i.requestUpdate),i.onDeleteSkillGroup(n)}}
              >
                ${r.trash} 删除
              </button>
            </div>
          `:t}
    </span>
  `}function T(n,i){var a;let o=i.installedSkillsMap.get(n.name),s=o!==void 0,c=o==null||(a=o.storeExtra)==null?void 0:a.currentVersion,l=s&&c!==void 0&&n.currentVersion!==c,u=i.itemBusy===n.name;return e`
    <div class="sc-card">
      <!-- Row 1: title + version badge + installed badge -->
      <div class="sc-card__top">
        <span class="sc-card__title">${n.title}</span>
        ${n.currentVersion?e`<span class="sc-card__version">v${n.currentVersion}</span>`:t}
        ${s?l?e`<span class="sc-card__badge--update">有新版本</span>`:e`<span class="sc-card__badge--installed">${r.check} 已下载</span>`:t}
      </div>
      <!-- Row 2: description -->
      ${n.description?e`<p class="sc-card__desc" title=${n.description}>${n.description}</p>`:t}
      <!-- Row 3: author + actions -->
      <div class="sc-card__bottom">
        <span class="sc-card__author">
          <svg
            width="10"
            height="10"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
            <circle cx="12" cy="7" r="4" />
          </svg>
          ${n.authorName||`SealSeek 商店`}${i.proMode&&o?e` (${o.source.replace(/^openclaw-/,``)})`:t}
        </span>
        <div class="sc-card__actions">
          ${s?e`
                <button
                  class="sc-card__btn sc-card__btn--uninstall"
                  ?disabled=${u}
                  @click=${()=>i.onUninstallByName(n.name)}
                  title="卸载"
                >
                  ${r.trash}
                </button>
                <button
                  class="sc-card__btn ${l?`sc-card__btn--install`:`sc-card__btn--use`}"
                  ?disabled=${u}
                  @click=${()=>i.onUseSkill(n)}
                >
                  ${u?e`<span class="sc-card__btn-spinner"></span>`:r.zap}
                  ${l?`更新`:`使用`}
                </button>
              `:e`
                <button
                  class="sc-card__btn sc-card__btn--install"
                  ?disabled=${u||i.itemBusy!=null}
                  @click=${()=>i.onUseSkill(n)}
                >
                  ${u?e`<span class="sc-card__btn-spinner"></span> 安装中`:`使用`}
                </button>
              `}
        </div>
      </div>
    </div>
  `}function E(n,i){var s,c,l,u,d;let p=i.itemBusy===n.name||i.itemBusy===n.skillKey,m=(s=i.storeSkills)==null?void 0:s.find(e=>{var t;return e.id===((t=n.extra)==null?void 0:t.id)}),h=(c=n.storeExtra)==null?void 0:c.currentVersion,g=!!m&&h!==void 0&&h!==m.currentVersion,_=((l=n.extra)==null?void 0:l.title)??n.name,v=((u=n.extra)==null?void 0:u.description)??n.description,y=(d=n.extra)==null?void 0:d.currentVersion,b=n.extra?n.extra.authorName||`SealSeek 商店`:`自定义`;return e`
    <div
      class="sc-card ${n.disabled?`sc-card--disabled`:``}"
      draggable="true"
      @dragstart=${e=>{var t,r;if(o!==n.skillKey){e.preventDefault();return}a=n.skillKey,(t=e.dataTransfer)==null||t.setData(`text/plain`,n.skillKey),e.dataTransfer&&(e.dataTransfer.effectAllowed=`move`);let i=document.createElement(`div`);i.textContent=_,i.className=`sc-drag-ghost`,document.body.appendChild(i),(r=e.dataTransfer)==null||r.setDragImage(i,i.offsetWidth/2,i.offsetHeight/2),requestAnimationFrame(()=>i.remove())}}
      @dragend=${()=>{a=null,o=null}}
    >
      <!-- Row 1: drag handle + title + version badge + installed/update badge | move + toggle -->
      <div class="sc-card__top">
        <span
          class="sc-card__drag-handle"
          @mousedown=${()=>{o=n.skillKey}}
          @mouseup=${()=>{o=null}}
        >
          ${f}
        </span>
        <span class="sc-card__title">${_}</span>
        ${y?e`<span class="sc-card__version">v${y}</span>`:t}
        ${g?e`<span class="sc-card__badge--update">有新版本</span>`:t}
        <span class="sc-card__top-spacer"></span>
        ${D(n,i)}
        <label
          class="sc-my-card__toggle sc-card__toggle-push"
          title="${n.disabled?`启用`:`停用`}"
        >
          <input
            type="checkbox"
            class="sc-my-card__toggle-input"
            .checked=${!n.disabled}
            @change=${e=>i.onToggleSkill(n.skillKey,e.target.checked)}
          />
          <span class="sc-my-card__toggle-track"></span>
        </label>
      </div>
      <!-- Row 2: description -->
      ${v?e`<p class="sc-card__desc" title=${v}>${v}</p>`:t}
      <!-- Row 3: author + actions -->
      <div class="sc-card__bottom">
        <span class="sc-card__author">
          <svg
            width="10"
            height="10"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
            <circle cx="12" cy="7" r="4" />
          </svg>
          ${b}${i.proMode?e` (${n.source.replace(/^openclaw-/,``)})`:t}
        </span>
        <div class="sc-card__actions">
          <button
            class="sc-card__btn sc-card__btn--uninstall"
            ?disabled=${p}
            @click=${()=>i.onUninstallSkill(n.skillKey)}
            title="卸载"
          >
            ${r.trash}
          </button>
          ${g&&m?e`
                <button
                  class="sc-card__btn sc-card__btn--install"
                  ?disabled=${p}
                  @click=${()=>i.onUseSkill(m)}
                >
                  ${p?e`<span class="sc-card__btn-spinner"></span>`:r.zap} 更新
                </button>
              `:n.disabled?t:e`
                  <button
                    class="sc-card__btn sc-card__btn--use"
                    ?disabled=${p}
                    @click=${()=>i.onUseInstalledSkill(n)}
                  >
                    ${r.zap} 使用
                  </button>
                `}
        </div>
      </div>
    </div>
  `}function D(n,a){let o=i(a.skillGroups);if(o.length===0)return t;let s=a.skillGroupMap[n.skillKey]??null;return e`
    <details
      class="sc-card__move"
      @focusout=${e=>{let t=e.relatedTarget;t&&e.currentTarget.contains(t)||_(e.currentTarget)}}
    >
      <summary aria-label="移动到分组">${r.moreHorizontal}</summary>
      <div
        class="sc-card__move-backdrop"
        @click=${e=>{e.preventDefault(),_(e.currentTarget)}}
      ></div>
      <div class="sc-card__move-menu">
        <div class="sc-card__move-title">移动到分组</div>
        ${o.map(i=>e`
            <button
              class="${s===i.id?`sc-card__move-item--active`:``}"
              @click=${e=>{_(e.currentTarget),a.onMoveSkillToGroup(n.skillKey,i.id)}}
            >
              <span>${i.label}</span>
              ${s===i.id?r.check:t}
            </button>
          `)}
        ${s?e`
              <div class="sc-card__move-separator"></div>
              <button
                @click=${e=>{_(e.currentTarget),a.onMoveSkillToGroup(n.skillKey,null)}}
              >
                移出分组
              </button>
            `:t}
      </div>
    </details>
  `}export{p as renderSkillCenter};
//# sourceMappingURL=skill-center-bu90gYQJ.js.map