import { e as createComponent, m as maybeRenderHead, g as addAttribute, r as renderTemplate, h as createAstro, k as renderComponent, l as renderScript } from '../chunks/astro/server_B-2LxKLH.mjs';
import 'piccolore';
import { _ as _export_sfc, $ as $$Base } from '../chunks/_plugin-vue_export-helper_B1lnwsE2.mjs';
import 'clsx';
import { useSSRContext, defineComponent, ref, watch, mergeProps } from 'vue';
import { ssrRenderAttrs, ssrRenderAttr } from 'vue/server-renderer';
import { l as listSkills } from '../chunks/skills_COWfD5oy.mjs';
import { b as buildSyncScript } from '../chunks/sync_B_Og9xl3.mjs';
export { renderers } from '../renderers.mjs';

const $$Astro$1 = createAstro();
const $$SkillCard = createComponent(($$result, $$props, $$slots) => {
  const Astro2 = $$result.createAstro($$Astro$1, $$props, $$slots);
  Astro2.self = $$SkillCard;
  const { slug, name, description, "allowed-tools": allowedTools } = Astro2.props;
  const truncated = description.length > 120 ? description.slice(0, 120) + "..." : description;
  return renderTemplate`${maybeRenderHead()}<a${addAttribute(`/${slug}`, "href")} class="group relative block rounded-2xl border border-white/[0.06] bg-surface-100 p-6 hover:border-accent-500/30 hover:bg-surface-200/80 transition-all duration-300"> <div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-accent-500/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="relative"> <div class="flex items-start justify-between mb-2"> <h2 class="text-[15px] font-semibold text-white group-hover:text-accent-400 transition-colors">${name}</h2> <svg class="h-4 w-4 text-gray-600 group-hover:text-accent-500 group-hover:translate-x-0.5 transition-all shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path> </svg> </div> ${truncated && renderTemplate`<p class="text-sm text-gray-500 leading-relaxed mb-4">${truncated}</p>`} ${allowedTools.length > 0 && renderTemplate`<div class="flex flex-wrap gap-1.5"> ${allowedTools.map((tool) => renderTemplate`<span class="rounded-md bg-white/[0.04] border border-white/[0.06] px-2 py-0.5 text-xs font-medium text-gray-400"> ${tool} </span>`)} </div>`} </div> </a>`;
}, "/Users/alex/projects/skillit/src/components/SkillCard.astro", void 0);

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "SkillSearch",
  setup(__props, { expose: __expose }) {
    __expose();
    const query = ref("");
    watch(query, (val) => {
      const q = val.toLowerCase().trim();
      const cards = document.querySelectorAll("[data-skill]");
      cards.forEach((card) => {
        const name = card.dataset.name || "";
        const desc = card.dataset.description || "";
        const tools = card.dataset.tools || "";
        const match = !q || name.includes(q) || desc.includes(q) || tools.includes(q);
        card.style.display = match ? "" : "none";
      });
    });
    const __returned__ = { query };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});
function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
  _push(`<div${ssrRenderAttrs(mergeProps({ class: "mb-6 max-w-md" }, _attrs))}><div class="relative"><svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path></svg><input${ssrRenderAttr("value", $setup.query)} type="text" placeholder="Search skills..." class="w-full rounded-xl border border-white/[0.06] bg-[var(--color-surface-100)] pl-10 pr-4 py-2.5 text-sm text-white placeholder-gray-600 focus:border-[var(--color-accent-500)]/50 focus:outline-none focus:ring-1 focus:ring-[var(--color-accent-500)]/20 transition-all"></div></div>`);
}
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/SkillSearch.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const SkillSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);

const $$Astro = createAstro();
const $$Index = createComponent(async ($$result, $$props, $$slots) => {
  const Astro2 = $$result.createAstro($$Astro, $$props, $$slots);
  Astro2.self = $$Index;
  const accept = Astro2.request.headers.get("accept") || "";
  if (!accept.includes("text/html")) {
    const script = await buildSyncScript(Astro2.url.origin, ".claude/skills");
    return new Response(script, {
      headers: { "Content-Type": "text/plain; charset=utf-8" }
    });
  }
  const skills = await listSkills();
  return renderTemplate`${renderComponent($$result, "Base", $$Base, { "title": "Skillit \u2014 Claude Code Skills" }, { "default": async ($$result2) => renderTemplate`${skills.length === 0 ? renderTemplate`${maybeRenderHead()}<div class="text-center py-24"> <div class="inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-surface-200 border border-white/[0.06] mb-6"> <svg class="h-7 w-7 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path> </svg> </div> <p class="text-gray-500 text-lg mb-2">No skills yet</p> <p class="text-gray-600 text-sm mb-6">Create your first skill to get started.</p> <a href="/new" class="inline-flex items-center gap-1.5 rounded-lg bg-accent-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-accent-500/20 hover:bg-accent-600 transition-all"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path> </svg>
Create your first skill
</a> </div>` : renderTemplate`<div> <!-- Hero / Quick install --> <div class="mb-10"> <h1 class="text-3xl font-extrabold tracking-tight text-white mb-2">Skills</h1> <p class="text-gray-500 mb-5 max-w-xl">Manage and distribute Claude Code skills. Skills are prompt files that Claude loads automatically to learn custom behaviors and workflows.</p> <!-- Install instructions --> <div class="rounded-2xl border border-white/[0.06] bg-surface-100 p-6 max-w-2xl space-y-4"> <h2 class="text-sm font-semibold text-white">Quick install</h2> <p class="text-xs text-gray-500 leading-relaxed">Run this in your project root to sync all skills. They'll be saved to <code class="text-gray-400 font-mono bg-white/[0.04] px-1 py-0.5 rounded">.claude/skills/</code> and Claude Code will pick them up automatically on the next conversation.</p> <div class="flex items-center gap-3 rounded-xl bg-surface-50 border border-white/[0.06] px-4 py-3"> <code id="install-cmd" class="flex-1 text-sm font-mono text-gray-400 select-all truncate">curl -fsSL ${Astro2.url.origin} | bash</code> <button id="copy-btn" class="shrink-0 rounded-md bg-white/[0.06] border border-white/[0.06] px-2.5 py-1 text-xs font-medium text-gray-400 hover:text-white hover:bg-white/[0.1] transition-all">
Copy
</button> </div> <details class="group"> <summary class="text-xs text-gray-600 cursor-pointer hover:text-gray-400 transition-colors">More options</summary> <div class="mt-3 space-y-3 text-xs text-gray-500"> <div> <p class="mb-1.5">Install globally (available in all projects):</p> <div class="flex items-center gap-3 rounded-lg bg-surface-50 border border-white/[0.06] px-3 py-2"> <code class="flex-1 font-mono text-gray-400 select-all truncate">curl -fsSL ${Astro2.url.origin}/gi | bash</code> <button data-copy class="shrink-0 rounded bg-white/[0.06] border border-white/[0.06] px-2 py-0.5 font-medium text-gray-500 hover:text-white hover:bg-white/[0.1] transition-all">Copy</button> </div> </div> <div> <p class="mb-1.5">Push local skills to the server:</p> <div class="flex items-center gap-3 rounded-lg bg-surface-50 border border-white/[0.06] px-3 py-2"> <code class="flex-1 font-mono text-gray-400 select-all truncate">curl -fsSL ${Astro2.url.origin}/p | bash</code> <button data-copy class="shrink-0 rounded bg-white/[0.06] border border-white/[0.06] px-2 py-0.5 font-medium text-gray-500 hover:text-white hover:bg-white/[0.1] transition-all">Copy</button> </div> </div> </div> </details> </div> </div> <!-- Search + Grid --> ${renderComponent($$result2, "SkillSearch", SkillSearch, { "client:load": true, "client:component-hydration": "load", "client:component-path": "/Users/alex/projects/skillit/src/components/SkillSearch.vue", "client:component-export": "default" })} <div id="skills-grid" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"> ${skills.map((skill) => renderTemplate`<div data-skill${addAttribute(skill.name.toLowerCase(), "data-name")}${addAttribute(skill.description.toLowerCase(), "data-description")}${addAttribute(skill["allowed-tools"].join(" ").toLowerCase(), "data-tools")}> ${renderComponent($$result2, "SkillCard", $$SkillCard, { ...skill })} </div>`)} </div> </div>`}` })} ${renderScript($$result, "/Users/alex/projects/skillit/src/pages/index.astro?astro&type=script&index=0&lang.ts")}`;
}, "/Users/alex/projects/skillit/src/pages/index.astro", void 0);

const $$file = "/Users/alex/projects/skillit/src/pages/index.astro";
const $$url = "";

const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
  __proto__: null,
  default: $$Index,
  file: $$file,
  url: $$url
}, Symbol.toStringTag, { value: 'Module' }));

const page = () => _page;

export { page };