@medialane/ui 0.65.1 → 0.67.0

package/dist/components/launchpad-filter-bar.cjs

@@ -23,8 +23,11 @@ __export(launchpad_filter_bar_exports, {
 });
 module.exports = __toCommonJS(launchpad_filter_bar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_lucide_react = require("lucide-react");
 var import_cn = require("../utils/cn.js");
+var import_launchpad_services = require("./launchpad-services.js");
+var import_launchpad_services2 = require("../data/launchpad-services.js");
 function LaunchpadFilterBar({
   query,
   onQueryChange,
@@ -33,12 +36,28 @@ function LaunchpadFilterBar({
   onToggleGroup,
   resultCount
 }) {
+  const inputRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const onKeyDown = (e) => {
+      if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey) return;
+      const target = e.target;
+      if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) return;
+      e.preventDefault();
+      inputRef.current?.focus();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+  const countFor = (key) => import_launchpad_services2.LAUNCHPAD_SERVICE_DEFINITIONS.filter(
+    (d) => d.group === key && d.status === "live" && (0, import_launchpad_services.serviceMatchesQuery)(d, query)
+  ).length;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col sm:flex-row gap-3 sm:items-center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex-1 sm:max-w-xs", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "input",
         {
+          ref: inputRef,
           type: "text",
           value: query,
           onChange: (e) => onQueryChange(e.target.value),
@@ -46,7 +65,7 @@ function LaunchpadFilterBar({
           className: "w-full h-10 rounded-full border border-border bg-card pl-9 pr-9 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40"
         }
       ),
-      query && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      query ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "button",
         {
           type: "button",
@@ -55,21 +74,25 @@ function LaunchpadFilterBar({
           className: "absolute right-2.5 top-1/2 -translate-y-1/2 h-5 w-5 flex items-center justify-center rounded-full text-muted-foreground hover:text-foreground transition-colors",
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-3.5 w-3.5" })
         }
-      )
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { className: "absolute right-3 top-1/2 -translate-y-1/2 hidden sm:flex h-5 w-5 items-center justify-center rounded border border-border bg-muted/40 text-[11px] font-medium text-muted-foreground pointer-events-none", children: "/" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-2 flex-1", children: groups.map((group) => {
       const active = activeGroups.has(group.key);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      const count = countFor(group.key);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "button",
         {
           type: "button",
           onClick: () => onToggleGroup(group.key),
           "aria-pressed": active,
           className: (0, import_cn.cn)(
-            "h-8 px-3.5 rounded-full text-xs font-semibold transition-colors border",
+            "h-8 px-3.5 rounded-full text-xs font-semibold transition-colors border inline-flex items-center gap-1.5",
             active ? "bg-gradient-to-r from-brand-purple to-brand-blue text-white border-transparent shadow-sm" : "bg-card text-muted-foreground border-border active:bg-muted/60 sm:hover:bg-muted/40"
           ),
-          children: group.title
+          children: [
+            group.title,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_cn.cn)("tabular-nums", active ? "text-white/70" : "text-muted-foreground/60"), children: count })
+          ]
         },
         group.key
       );

package/dist/components/launchpad-filter-bar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/launchpad-filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport type { ServiceGroup, ServiceGroupDefinition } from \"../data/launchpad-services.js\";\n\nexport interface LaunchpadFilterBarProps {\n  query: string;\n  onQueryChange: (value: string) => void;\n  groups: ServiceGroupDefinition[];\n  activeGroups: Set<ServiceGroup>;\n  onToggleGroup: (key: ServiceGroup) => void;\n  resultCount: number;\n}\n\n/**\n * Search + group-filter bar sitting above the grouped launchpad sections.\n * Fully controlled — all state (query, active groups) lives in the caller\n * (`LaunchpadGroupedSections`) so the grid below can react to the same\n * state without prop-drilling through this component.\n */\nexport function LaunchpadFilterBar({\n  query,\n  onQueryChange,\n  groups,\n  activeGroups,\n  onToggleGroup,\n  resultCount,\n}: LaunchpadFilterBarProps) {\n  return (\n    <div className=\"flex flex-col sm:flex-row gap-3 sm:items-center\">\n      <div className=\"relative flex-1 sm:max-w-xs\">\n        <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none\" />\n        <input\n          type=\"text\"\n          value={query}\n          onChange={(e) => onQueryChange(e.target.value)}\n          placeholder=\"Search services\"\n          className=\"w-full h-10 rounded-full border border-border bg-card pl-9 pr-9 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40\"\n        />\n        {query && (\n          <button\n            type=\"button\"\n            onClick={() => onQueryChange(\"\")}\n            aria-label=\"Clear search\"\n            className=\"absolute right-2.5 top-1/2 -translate-y-1/2 h-5 w-5 flex items-center justify-center rounded-full text-muted-foreground hover:text-foreground transition-colors\"\n          >\n            <X className=\"h-3.5 w-3.5\" />\n          </button>\n        )}\n      </div>\n\n      <div className=\"flex flex-wrap gap-2 flex-1\">\n        {groups.map((group) => {\n          const active = activeGroups.has(group.key);\n          return (\n            <button\n              key={group.key}\n              type=\"button\"\n              onClick={() => onToggleGroup(group.key)}\n              aria-pressed={active}\n              className={cn(\n                \"h-8 px-3.5 rounded-full text-xs font-semibold transition-colors border\",\n                active\n                  ? \"bg-gradient-to-r from-brand-purple to-brand-blue text-white border-transparent shadow-sm\"\n                  : \"bg-card text-muted-foreground border-border active:bg-muted/60 sm:hover:bg-muted/40\",\n              )}\n            >\n              {group.title}\n            </button>\n          );\n        })}\n      </div>\n\n      <p className=\"text-xs text-muted-foreground whitespace-nowrap sm:pl-2\">\n        {resultCount} {resultCount === 1 ? \"service\" : \"services\"}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BM;AA7BN,0BAA0B;AAC1B,gBAAmB;AAkBZ,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,SACE,6CAAC,SAAI,WAAU,mDACb;AAAA,iDAAC,SAAI,WAAU,+BACb;AAAA,kDAAC,8BAAO,WAAU,8FAA6F;AAAA,MAC/G;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,UAC7C,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,MACC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,cAAc,EAAE;AAAA,UAC/B,cAAW;AAAA,UACX,WAAU;AAAA,UAEV,sDAAC,yBAAE,WAAU,eAAc;AAAA;AAAA,MAC7B;AAAA,OAEJ;AAAA,IAEA,4CAAC,SAAI,WAAU,+BACZ,iBAAO,IAAI,CAAC,UAAU;AACrB,YAAM,SAAS,aAAa,IAAI,MAAM,GAAG;AACzC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,cAAc,MAAM,GAAG;AAAA,UACtC,gBAAc;AAAA,UACd,eAAW;AAAA,YACT;AAAA,YACA,SACI,6FACA;AAAA,UACN;AAAA,UAEC,gBAAM;AAAA;AAAA,QAXF,MAAM;AAAA,MAYb;AAAA,IAEJ,CAAC,GACH;AAAA,IAEA,6CAAC,OAAE,WAAU,2DACV;AAAA;AAAA,MAAY;AAAA,MAAE,gBAAgB,IAAI,YAAY;AAAA,OACjD;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/launchpad-filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { serviceMatchesQuery } from \"./launchpad-services.js\";\nimport {\n  LAUNCHPAD_SERVICE_DEFINITIONS,\n  type ServiceGroup,\n  type ServiceGroupDefinition,\n} from \"../data/launchpad-services.js\";\n\nexport interface LaunchpadFilterBarProps {\n  query: string;\n  onQueryChange: (value: string) => void;\n  groups: ServiceGroupDefinition[];\n  activeGroups: Set<ServiceGroup>;\n  onToggleGroup: (key: ServiceGroup) => void;\n  resultCount: number;\n}\n\n/**\n * Search + group-filter bar above the launchpad grid. Fully controlled — all\n * state (query, active groups) lives in the caller so the grid below reacts\n * to the same state. Each pill shows the live count of services it matches\n * under the current search query. Pressing \"/\" anywhere on the page focuses\n * the search input.\n */\nexport function LaunchpadFilterBar({\n  query,\n  onQueryChange,\n  groups,\n  activeGroups,\n  onToggleGroup,\n  resultCount,\n}: LaunchpadFilterBarProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== \"/\" || e.metaKey || e.ctrlKey || e.altKey) return;\n      const target = e.target as HTMLElement | null;\n      if (target && (target.tagName === \"INPUT\" || target.tagName === \"TEXTAREA\" || target.isContentEditable)) return;\n      e.preventDefault();\n      inputRef.current?.focus();\n    };\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => window.removeEventListener(\"keydown\", onKeyDown);\n  }, []);\n\n  const countFor = (key: ServiceGroup) =>\n    LAUNCHPAD_SERVICE_DEFINITIONS.filter(\n      (d) => d.group === key && d.status === \"live\" && serviceMatchesQuery(d, query),\n    ).length;\n\n  return (\n    <div className=\"flex flex-col sm:flex-row gap-3 sm:items-center\">\n      <div className=\"relative flex-1 sm:max-w-xs\">\n        <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none\" />\n        <input\n          ref={inputRef}\n          type=\"text\"\n          value={query}\n          onChange={(e) => onQueryChange(e.target.value)}\n          placeholder=\"Search services\"\n          className=\"w-full h-10 rounded-full border border-border bg-card pl-9 pr-9 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40\"\n        />\n        {query ? (\n          <button\n            type=\"button\"\n            onClick={() => onQueryChange(\"\")}\n            aria-label=\"Clear search\"\n            className=\"absolute right-2.5 top-1/2 -translate-y-1/2 h-5 w-5 flex items-center justify-center rounded-full text-muted-foreground hover:text-foreground transition-colors\"\n          >\n            <X className=\"h-3.5 w-3.5\" />\n          </button>\n        ) : (\n          <kbd className=\"absolute right-3 top-1/2 -translate-y-1/2 hidden sm:flex h-5 w-5 items-center justify-center rounded border border-border bg-muted/40 text-[11px] font-medium text-muted-foreground pointer-events-none\">\n            /\n          </kbd>\n        )}\n      </div>\n\n      <div className=\"flex flex-wrap gap-2 flex-1\">\n        {groups.map((group) => {\n          const active = activeGroups.has(group.key);\n          const count = countFor(group.key);\n          return (\n            <button\n              key={group.key}\n              type=\"button\"\n              onClick={() => onToggleGroup(group.key)}\n              aria-pressed={active}\n              className={cn(\n                \"h-8 px-3.5 rounded-full text-xs font-semibold transition-colors border inline-flex items-center gap-1.5\",\n                active\n                  ? \"bg-gradient-to-r from-brand-purple to-brand-blue text-white border-transparent shadow-sm\"\n                  : \"bg-card text-muted-foreground border-border active:bg-muted/60 sm:hover:bg-muted/40\",\n              )}\n            >\n              {group.title}\n              <span className={cn(\"tabular-nums\", active ? \"text-white/70\" : \"text-muted-foreground/60\")}>\n                {count}\n              </span>\n            </button>\n          );\n        })}\n      </div>\n\n      <p className=\"text-xs text-muted-foreground whitespace-nowrap sm:pl-2\">\n        {resultCount} {resultCount === 1 ? \"service\" : \"services\"}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyDM;AAvDN,mBAAkC;AAClC,0BAA0B;AAC1B,gBAAmB;AACnB,gCAAoC;AACpC,IAAAA,6BAIO;AAkBA,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,eAAW,qBAAyB,IAAI;AAE9C,8BAAU,MAAM;AACd,UAAM,YAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,QAAQ,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,OAAQ;AACzD,YAAM,SAAS,EAAE;AACjB,UAAI,WAAW,OAAO,YAAY,WAAW,OAAO,YAAY,cAAc,OAAO,mBAAoB;AACzG,QAAE,eAAe;AACjB,eAAS,SAAS,MAAM;AAAA,IAC1B;AACA,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM,OAAO,oBAAoB,WAAW,SAAS;AAAA,EAC9D,GAAG,CAAC,CAAC;AAEL,QAAM,WAAW,CAAC,QAChB,yDAA8B;AAAA,IAC5B,CAAC,MAAM,EAAE,UAAU,OAAO,EAAE,WAAW,cAAU,+CAAoB,GAAG,KAAK;AAAA,EAC/E,EAAE;AAEJ,SACE,6CAAC,SAAI,WAAU,mDACb;AAAA,iDAAC,SAAI,WAAU,+BACb;AAAA,kDAAC,8BAAO,WAAU,8FAA6F;AAAA,MAC/G;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,UAC7C,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,MACC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,cAAc,EAAE;AAAA,UAC/B,cAAW;AAAA,UACX,WAAU;AAAA,UAEV,sDAAC,yBAAE,WAAU,eAAc;AAAA;AAAA,MAC7B,IAEA,4CAAC,SAAI,WAAU,2MAA0M,eAEzN;AAAA,OAEJ;AAAA,IAEA,4CAAC,SAAI,WAAU,+BACZ,iBAAO,IAAI,CAAC,UAAU;AACrB,YAAM,SAAS,aAAa,IAAI,MAAM,GAAG;AACzC,YAAM,QAAQ,SAAS,MAAM,GAAG;AAChC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,cAAc,MAAM,GAAG;AAAA,UACtC,gBAAc;AAAA,UACd,eAAW;AAAA,YACT;AAAA,YACA,SACI,6FACA;AAAA,UACN;AAAA,UAEC;AAAA,kBAAM;AAAA,YACP,4CAAC,UAAK,eAAW,cAAG,gBAAgB,SAAS,kBAAkB,0BAA0B,GACtF,iBACH;AAAA;AAAA;AAAA,QAdK,MAAM;AAAA,MAeb;AAAA,IAEJ,CAAC,GACH;AAAA,IAEA,6CAAC,OAAE,WAAU,2DACV;AAAA;AAAA,MAAY;AAAA,MAAE,gBAAgB,IAAI,YAAY;AAAA,OACjD;AAAA,KACF;AAEJ;","names":["import_launchpad_services"]}

package/dist/components/launchpad-filter-bar.d.cts

@@ -11,10 +11,11 @@ interface LaunchpadFilterBarProps {
     resultCount: number;
 }
 /**
- * Search + group-filter bar sitting above the grouped launchpad sections.
- * Fully controlled — all state (query, active groups) lives in the caller
- * (`LaunchpadGroupedSections`) so the grid below can react to the same
- * state without prop-drilling through this component.
+ * Search + group-filter bar above the launchpad grid. Fully controlled — all
+ * state (query, active groups) lives in the caller so the grid below reacts
+ * to the same state. Each pill shows the live count of services it matches
+ * under the current search query. Pressing "/" anywhere on the page focuses
+ * the search input.
  */
 declare function LaunchpadFilterBar({ query, onQueryChange, groups, activeGroups, onToggleGroup, resultCount, }: LaunchpadFilterBarProps): react_jsx_runtime.JSX.Element;
 

package/dist/components/launchpad-filter-bar.d.ts

@@ -11,10 +11,11 @@ interface LaunchpadFilterBarProps {
     resultCount: number;
 }
 /**
- * Search + group-filter bar sitting above the grouped launchpad sections.
- * Fully controlled — all state (query, active groups) lives in the caller
- * (`LaunchpadGroupedSections`) so the grid below can react to the same
- * state without prop-drilling through this component.
+ * Search + group-filter bar above the launchpad grid. Fully controlled — all
+ * state (query, active groups) lives in the caller so the grid below reacts
+ * to the same state. Each pill shows the live count of services it matches
+ * under the current search query. Pressing "/" anywhere on the page focuses
+ * the search input.
  */
 declare function LaunchpadFilterBar({ query, onQueryChange, groups, activeGroups, onToggleGroup, resultCount, }: LaunchpadFilterBarProps): react_jsx_runtime.JSX.Element;
 

package/dist/components/launchpad-filter-bar.js

@@ -1,7 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import { Search, X } from "lucide-react";
 import { cn } from "../utils/cn.js";
+import { serviceMatchesQuery } from "./launchpad-services.js";
+import {
+  LAUNCHPAD_SERVICE_DEFINITIONS
+} from "../data/launchpad-services.js";
 function LaunchpadFilterBar({
   query,
   onQueryChange,
@@ -10,12 +15,28 @@ function LaunchpadFilterBar({
   onToggleGroup,
   resultCount
 }) {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey) return;
+      const target = e.target;
+      if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) return;
+      e.preventDefault();
+      inputRef.current?.focus();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+  const countFor = (key) => LAUNCHPAD_SERVICE_DEFINITIONS.filter(
+    (d) => d.group === key && d.status === "live" && serviceMatchesQuery(d, query)
+  ).length;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-3 sm:items-center", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative flex-1 sm:max-w-xs", children: [
       /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" }),
       /* @__PURE__ */ jsx(
         "input",
         {
+          ref: inputRef,
           type: "text",
           value: query,
           onChange: (e) => onQueryChange(e.target.value),
@@ -23,7 +44,7 @@ function LaunchpadFilterBar({
           className: "w-full h-10 rounded-full border border-border bg-card pl-9 pr-9 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40"
         }
       ),
-      query && /* @__PURE__ */ jsx(
+      query ? /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -32,21 +53,25 @@ function LaunchpadFilterBar({
           className: "absolute right-2.5 top-1/2 -translate-y-1/2 h-5 w-5 flex items-center justify-center rounded-full text-muted-foreground hover:text-foreground transition-colors",
           children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
         }
-      )
+      ) : /* @__PURE__ */ jsx("kbd", { className: "absolute right-3 top-1/2 -translate-y-1/2 hidden sm:flex h-5 w-5 items-center justify-center rounded border border-border bg-muted/40 text-[11px] font-medium text-muted-foreground pointer-events-none", children: "/" })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 flex-1", children: groups.map((group) => {
       const active = activeGroups.has(group.key);
-      return /* @__PURE__ */ jsx(
+      const count = countFor(group.key);
+      return /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
           onClick: () => onToggleGroup(group.key),
           "aria-pressed": active,
           className: cn(
-            "h-8 px-3.5 rounded-full text-xs font-semibold transition-colors border",
+            "h-8 px-3.5 rounded-full text-xs font-semibold transition-colors border inline-flex items-center gap-1.5",
             active ? "bg-gradient-to-r from-brand-purple to-brand-blue text-white border-transparent shadow-sm" : "bg-card text-muted-foreground border-border active:bg-muted/60 sm:hover:bg-muted/40"
           ),
-          children: group.title
+          children: [
+            group.title,
+            /* @__PURE__ */ jsx("span", { className: cn("tabular-nums", active ? "text-white/70" : "text-muted-foreground/60"), children: count })
+          ]
         },
         group.key
       );

package/dist/components/launchpad-filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/launchpad-filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport type { ServiceGroup, ServiceGroupDefinition } from \"../data/launchpad-services.js\";\n\nexport interface LaunchpadFilterBarProps {\n  query: string;\n  onQueryChange: (value: string) => void;\n  groups: ServiceGroupDefinition[];\n  activeGroups: Set<ServiceGroup>;\n  onToggleGroup: (key: ServiceGroup) => void;\n  resultCount: number;\n}\n\n/**\n * Search + group-filter bar sitting above the grouped launchpad sections.\n * Fully controlled — all state (query, active groups) lives in the caller\n * (`LaunchpadGroupedSections`) so the grid below can react to the same\n * state without prop-drilling through this component.\n */\nexport function LaunchpadFilterBar({\n  query,\n  onQueryChange,\n  groups,\n  activeGroups,\n  onToggleGroup,\n  resultCount,\n}: LaunchpadFilterBarProps) {\n  return (\n    <div className=\"flex flex-col sm:flex-row gap-3 sm:items-center\">\n      <div className=\"relative flex-1 sm:max-w-xs\">\n        <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none\" />\n        <input\n          type=\"text\"\n          value={query}\n          onChange={(e) => onQueryChange(e.target.value)}\n          placeholder=\"Search services\"\n          className=\"w-full h-10 rounded-full border border-border bg-card pl-9 pr-9 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40\"\n        />\n        {query && (\n          <button\n            type=\"button\"\n            onClick={() => onQueryChange(\"\")}\n            aria-label=\"Clear search\"\n            className=\"absolute right-2.5 top-1/2 -translate-y-1/2 h-5 w-5 flex items-center justify-center rounded-full text-muted-foreground hover:text-foreground transition-colors\"\n          >\n            <X className=\"h-3.5 w-3.5\" />\n          </button>\n        )}\n      </div>\n\n      <div className=\"flex flex-wrap gap-2 flex-1\">\n        {groups.map((group) => {\n          const active = activeGroups.has(group.key);\n          return (\n            <button\n              key={group.key}\n              type=\"button\"\n              onClick={() => onToggleGroup(group.key)}\n              aria-pressed={active}\n              className={cn(\n                \"h-8 px-3.5 rounded-full text-xs font-semibold transition-colors border\",\n                active\n                  ? \"bg-gradient-to-r from-brand-purple to-brand-blue text-white border-transparent shadow-sm\"\n                  : \"bg-card text-muted-foreground border-border active:bg-muted/60 sm:hover:bg-muted/40\",\n              )}\n            >\n              {group.title}\n            </button>\n          );\n        })}\n      </div>\n\n      <p className=\"text-xs text-muted-foreground whitespace-nowrap sm:pl-2\">\n        {resultCount} {resultCount === 1 ? \"service\" : \"services\"}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";AA+BM,SACE,KADF;AA7BN,SAAS,QAAQ,SAAS;AAC1B,SAAS,UAAU;AAkBZ,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,SACE,qBAAC,SAAI,WAAU,mDACb;AAAA,yBAAC,SAAI,WAAU,+BACb;AAAA,0BAAC,UAAO,WAAU,8FAA6F;AAAA,MAC/G;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,UAC7C,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,MACC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,cAAc,EAAE;AAAA,UAC/B,cAAW;AAAA,UACX,WAAU;AAAA,UAEV,8BAAC,KAAE,WAAU,eAAc;AAAA;AAAA,MAC7B;AAAA,OAEJ;AAAA,IAEA,oBAAC,SAAI,WAAU,+BACZ,iBAAO,IAAI,CAAC,UAAU;AACrB,YAAM,SAAS,aAAa,IAAI,MAAM,GAAG;AACzC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,cAAc,MAAM,GAAG;AAAA,UACtC,gBAAc;AAAA,UACd,WAAW;AAAA,YACT;AAAA,YACA,SACI,6FACA;AAAA,UACN;AAAA,UAEC,gBAAM;AAAA;AAAA,QAXF,MAAM;AAAA,MAYb;AAAA,IAEJ,CAAC,GACH;AAAA,IAEA,qBAAC,OAAE,WAAU,2DACV;AAAA;AAAA,MAAY;AAAA,MAAE,gBAAgB,IAAI,YAAY;AAAA,OACjD;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/launchpad-filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { serviceMatchesQuery } from \"./launchpad-services.js\";\nimport {\n  LAUNCHPAD_SERVICE_DEFINITIONS,\n  type ServiceGroup,\n  type ServiceGroupDefinition,\n} from \"../data/launchpad-services.js\";\n\nexport interface LaunchpadFilterBarProps {\n  query: string;\n  onQueryChange: (value: string) => void;\n  groups: ServiceGroupDefinition[];\n  activeGroups: Set<ServiceGroup>;\n  onToggleGroup: (key: ServiceGroup) => void;\n  resultCount: number;\n}\n\n/**\n * Search + group-filter bar above the launchpad grid. Fully controlled — all\n * state (query, active groups) lives in the caller so the grid below reacts\n * to the same state. Each pill shows the live count of services it matches\n * under the current search query. Pressing \"/\" anywhere on the page focuses\n * the search input.\n */\nexport function LaunchpadFilterBar({\n  query,\n  onQueryChange,\n  groups,\n  activeGroups,\n  onToggleGroup,\n  resultCount,\n}: LaunchpadFilterBarProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== \"/\" || e.metaKey || e.ctrlKey || e.altKey) return;\n      const target = e.target as HTMLElement | null;\n      if (target && (target.tagName === \"INPUT\" || target.tagName === \"TEXTAREA\" || target.isContentEditable)) return;\n      e.preventDefault();\n      inputRef.current?.focus();\n    };\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => window.removeEventListener(\"keydown\", onKeyDown);\n  }, []);\n\n  const countFor = (key: ServiceGroup) =>\n    LAUNCHPAD_SERVICE_DEFINITIONS.filter(\n      (d) => d.group === key && d.status === \"live\" && serviceMatchesQuery(d, query),\n    ).length;\n\n  return (\n    <div className=\"flex flex-col sm:flex-row gap-3 sm:items-center\">\n      <div className=\"relative flex-1 sm:max-w-xs\">\n        <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none\" />\n        <input\n          ref={inputRef}\n          type=\"text\"\n          value={query}\n          onChange={(e) => onQueryChange(e.target.value)}\n          placeholder=\"Search services\"\n          className=\"w-full h-10 rounded-full border border-border bg-card pl-9 pr-9 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40\"\n        />\n        {query ? (\n          <button\n            type=\"button\"\n            onClick={() => onQueryChange(\"\")}\n            aria-label=\"Clear search\"\n            className=\"absolute right-2.5 top-1/2 -translate-y-1/2 h-5 w-5 flex items-center justify-center rounded-full text-muted-foreground hover:text-foreground transition-colors\"\n          >\n            <X className=\"h-3.5 w-3.5\" />\n          </button>\n        ) : (\n          <kbd className=\"absolute right-3 top-1/2 -translate-y-1/2 hidden sm:flex h-5 w-5 items-center justify-center rounded border border-border bg-muted/40 text-[11px] font-medium text-muted-foreground pointer-events-none\">\n            /\n          </kbd>\n        )}\n      </div>\n\n      <div className=\"flex flex-wrap gap-2 flex-1\">\n        {groups.map((group) => {\n          const active = activeGroups.has(group.key);\n          const count = countFor(group.key);\n          return (\n            <button\n              key={group.key}\n              type=\"button\"\n              onClick={() => onToggleGroup(group.key)}\n              aria-pressed={active}\n              className={cn(\n                \"h-8 px-3.5 rounded-full text-xs font-semibold transition-colors border inline-flex items-center gap-1.5\",\n                active\n                  ? \"bg-gradient-to-r from-brand-purple to-brand-blue text-white border-transparent shadow-sm\"\n                  : \"bg-card text-muted-foreground border-border active:bg-muted/60 sm:hover:bg-muted/40\",\n              )}\n            >\n              {group.title}\n              <span className={cn(\"tabular-nums\", active ? \"text-white/70\" : \"text-muted-foreground/60\")}>\n                {count}\n              </span>\n            </button>\n          );\n        })}\n      </div>\n\n      <p className=\"text-xs text-muted-foreground whitespace-nowrap sm:pl-2\">\n        {resultCount} {resultCount === 1 ? \"service\" : \"services\"}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";AAyDM,SACE,KADF;AAvDN,SAAS,WAAW,cAAc;AAClC,SAAS,QAAQ,SAAS;AAC1B,SAAS,UAAU;AACnB,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,OAGK;AAkBA,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,WAAW,OAAyB,IAAI;AAE9C,YAAU,MAAM;AACd,UAAM,YAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,QAAQ,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,OAAQ;AACzD,YAAM,SAAS,EAAE;AACjB,UAAI,WAAW,OAAO,YAAY,WAAW,OAAO,YAAY,cAAc,OAAO,mBAAoB;AACzG,QAAE,eAAe;AACjB,eAAS,SAAS,MAAM;AAAA,IAC1B;AACA,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM,OAAO,oBAAoB,WAAW,SAAS;AAAA,EAC9D,GAAG,CAAC,CAAC;AAEL,QAAM,WAAW,CAAC,QAChB,8BAA8B;AAAA,IAC5B,CAAC,MAAM,EAAE,UAAU,OAAO,EAAE,WAAW,UAAU,oBAAoB,GAAG,KAAK;AAAA,EAC/E,EAAE;AAEJ,SACE,qBAAC,SAAI,WAAU,mDACb;AAAA,yBAAC,SAAI,WAAU,+BACb;AAAA,0BAAC,UAAO,WAAU,8FAA6F;AAAA,MAC/G;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,UAC7C,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,MACC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,cAAc,EAAE;AAAA,UAC/B,cAAW;AAAA,UACX,WAAU;AAAA,UAEV,8BAAC,KAAE,WAAU,eAAc;AAAA;AAAA,MAC7B,IAEA,oBAAC,SAAI,WAAU,2MAA0M,eAEzN;AAAA,OAEJ;AAAA,IAEA,oBAAC,SAAI,WAAU,+BACZ,iBAAO,IAAI,CAAC,UAAU;AACrB,YAAM,SAAS,aAAa,IAAI,MAAM,GAAG;AACzC,YAAM,QAAQ,SAAS,MAAM,GAAG;AAChC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,cAAc,MAAM,GAAG;AAAA,UACtC,gBAAc;AAAA,UACd,WAAW;AAAA,YACT;AAAA,YACA,SACI,6FACA;AAAA,UACN;AAAA,UAEC;AAAA,kBAAM;AAAA,YACP,oBAAC,UAAK,WAAW,GAAG,gBAAgB,SAAS,kBAAkB,0BAA0B,GACtF,iBACH;AAAA;AAAA;AAAA,QAdK,MAAM;AAAA,MAeb;AAAA,IAEJ,CAAC,GACH;AAAA,IAEA,qBAAC,OAAE,WAAU,2DACV;AAAA;AAAA,MAAY;AAAA,MAAE,gBAAgB,IAAI,YAAY;AAAA,OACjD;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/launchpad-services.cjs

@@ -29,9 +29,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var launchpad_services_exports = {};
 __export(launchpad_services_exports, {
+  GROUP_ACCENTS: () => GROUP_ACCENTS,
   LaunchpadGroupedSections: () => LaunchpadGroupedSections,
   LaunchpadServiceCard: () => LaunchpadServiceCard,
   SERVICE_HUES: () => SERVICE_HUES,
+  serviceMatchesQuery: () => serviceMatchesQuery,
   useLaunchpadFilter: () => useLaunchpadFilter
 });
 module.exports = __toCommonJS(launchpad_services_exports);
@@ -42,135 +44,84 @@ var import_framer_motion = require("framer-motion");
 var import_lucide_react = require("lucide-react");
 var import_cn = require("../utils/cn.js");
 var import_launchpad_services = require("../data/launchpad-services.js");
-const DEFAULT_HUE = {
-  text: "text-sky-600 dark:text-sky-400",
-  solid: "bg-sky-600",
-  border: "border-sky-500/30 dark:border-sky-400/25",
-  tint: "bg-sky-500/10"
+const DEFAULT_ACCENT = {
+  text: "text-muted-foreground",
+  tint: "bg-muted/60",
+  hoverBorder: "sm:hover:border-border"
+};
+const GROUP_ACCENTS = {
+  "nfts": { text: "text-brand-blue", tint: "bg-brand-blue/10", hoverBorder: "sm:hover:border-brand-blue/40" },
+  "limited-editions": { text: "text-brand-purple", tint: "bg-brand-purple/10", hoverBorder: "sm:hover:border-brand-purple/40" },
+  "community": { text: "text-emerald-600 dark:text-emerald-400", tint: "bg-emerald-500/10", hoverBorder: "sm:hover:border-emerald-500/40" },
+  "coins": { text: "text-brand-orange", tint: "bg-brand-orange/10", hoverBorder: "sm:hover:border-brand-orange/40" },
+  "claims": { text: "text-brand-rose", tint: "bg-brand-rose/10", hoverBorder: "sm:hover:border-brand-rose/40" },
+  "coming-soon": DEFAULT_ACCENT
 };
 const SERVICE_HUES = {
-  // Single Editions — blue + green
-  "mint-ip-asset": { text: "text-blue-600 dark:text-blue-400", solid: "bg-blue-600", border: "border-blue-500/30 dark:border-blue-400/25", tint: "bg-blue-500/10" },
-  "create-collection": { text: "text-green-600 dark:text-green-400", solid: "bg-green-600", border: "border-green-500/30 dark:border-green-400/25", tint: "bg-green-500/10" },
-  // Limited Editions — purple + red
-  "ip-collection-1155": { text: "text-purple-600 dark:text-purple-400", solid: "bg-purple-600", border: "border-purple-500/30 dark:border-purple-400/25", tint: "bg-purple-500/10" },
-  "mint-editions": { text: "text-red-600 dark:text-red-400", solid: "bg-red-600", border: "border-red-500/30 dark:border-red-400/25", tint: "bg-red-500/10" },
-  // Creator Coins & Memecoins — yellow + orange
+  "nfts": { text: "text-blue-600 dark:text-blue-400", solid: "bg-blue-600", border: "border-blue-500/30 dark:border-blue-400/25", tint: "bg-blue-500/10" },
+  "limited-editions": { text: "text-purple-600 dark:text-purple-400", solid: "bg-purple-600", border: "border-purple-500/30 dark:border-purple-400/25", tint: "bg-purple-500/10" },
   "creator-coins": { text: "text-yellow-600 dark:text-yellow-400", solid: "bg-yellow-600", border: "border-yellow-500/30 dark:border-yellow-400/25", tint: "bg-yellow-500/10" },
   "claim-memecoin": { text: "text-orange-600 dark:text-orange-400", solid: "bg-orange-600", border: "border-orange-500/30 dark:border-orange-400/25", tint: "bg-orange-500/10" },
   "collection-drop": { text: "text-orange-600 dark:text-orange-400", solid: "bg-orange-600", border: "border-orange-500/30 dark:border-orange-400/25", tint: "bg-orange-500/10" },
   "pop-protocol": { text: "text-emerald-600 dark:text-emerald-400", solid: "bg-emerald-600", border: "border-emerald-500/30 dark:border-emerald-400/25", tint: "bg-emerald-500/10" },
+  "ip-tickets": { text: "text-teal-600 dark:text-teal-400", solid: "bg-teal-600", border: "border-teal-500/30 dark:border-teal-400/25", tint: "bg-teal-500/10" },
   "remix-asset": { text: "text-indigo-600 dark:text-indigo-400", solid: "bg-indigo-600", border: "border-indigo-500/30 dark:border-indigo-400/25", tint: "bg-indigo-500/10" },
   "claim-username": { text: "text-violet-600 dark:text-violet-400", solid: "bg-violet-600", border: "border-violet-500/30 dark:border-violet-400/25", tint: "bg-violet-500/10" },
   "claim-collection": { text: "text-cyan-600 dark:text-cyan-400", solid: "bg-cyan-600", border: "border-cyan-500/30 dark:border-cyan-400/25", tint: "bg-cyan-500/10" },
   "claim-collection-name": { text: "text-pink-600 dark:text-pink-400", solid: "bg-pink-600", border: "border-pink-500/30 dark:border-pink-400/25", tint: "bg-pink-500/10" }
 };
-function LaunchpadServiceCard({ def, override = {}, featured = false, index = 0 }) {
-  const { key, icon: Icon, title, browseLinkLabel, features } = def;
+const GROUP_TITLE_BY_KEY = Object.fromEntries(
+  import_launchpad_services.LAUNCHPAD_SERVICE_GROUPS.map((g) => [g.key, g.title])
+);
+const GROUP_KEYS = new Set(import_launchpad_services.LAUNCHPAD_SERVICE_GROUPS.map((g) => g.key));
+function LaunchpadServiceCard({ def, override = {}, index = 0 }) {
+  const { icon: Icon, title, group } = def;
   const status = override.status ?? def.status;
   const blurb = override.blurb ?? def.blurb;
-  const { href, browseHref } = override;
+  const { href } = override;
   const reduceMotion = (0, import_framer_motion.useReducedMotion)();
   const live = status === "live";
-  const hue = SERVICE_HUES[key] ?? DEFAULT_HUE;
+  const accent = GROUP_ACCENTS[group] ?? DEFAULT_ACCENT;
+  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_cn.cn)("flex h-12 w-12 items-center justify-center rounded-2xl", live ? accent.tint : "bg-muted/40"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: (0, import_cn.cn)("h-6 w-6", live ? accent.text : "text-muted-foreground/50") }) }),
+      !live && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-1 text-[11px] font-medium text-muted-foreground/60 pt-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Lock, { className: "h-3 w-3" }),
+        "Coming soon"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1.5 mt-auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { className: "flex items-center gap-1.5 text-xl font-bold tracking-tight leading-snug", children: [
+        title,
+        live && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-4 w-4 shrink-0 text-muted-foreground/40 transition-transform duration-200 sm:group-hover:translate-x-0.5 motion-reduce:transform-none" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_cn.cn)("text-sm leading-relaxed", live ? "text-muted-foreground" : "text-muted-foreground/60"), children: blurb })
+    ] })
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_framer_motion.motion.div,
     {
       layout: !reduceMotion,
-      initial: { opacity: 0, y: reduceMotion ? 0 : 16 },
-      whileInView: { opacity: 1, y: 0 },
+      initial: { opacity: 0, y: reduceMotion ? 0 : 12 },
+      animate: { opacity: 1, y: 0 },
       exit: { opacity: 0 },
-      viewport: { once: true, margin: "-40px" },
-      transition: { duration: 0.45, delay: index * 0.06, ease: [0.25, 0.46, 0.45, 0.94] },
-      className: (0, import_cn.cn)("flex", featured && "sm:col-span-2"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
+      transition: { duration: 0.35, delay: index * 0.04, ease: [0.25, 0.46, 0.45, 0.94] },
+      className: "flex",
+      children: live && href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_link.default,
         {
+          href,
           className: (0, import_cn.cn)(
-            "group relative flex flex-1 flex-col overflow-hidden min-h-[200px] rounded-2xl border bg-card transition-all duration-300 ease-out",
-            live ? (0, import_cn.cn)("active:scale-[0.985] sm:hover:-translate-y-1 motion-reduce:transform-none motion-reduce:transition-none", hue.border, "sm:hover:shadow-md sm:hover:shadow-black/5 dark:sm:hover:shadow-black/20") : "border-border/30 opacity-75"
+            "group flex flex-1 flex-col gap-5 rounded-2xl border border-border/60 bg-card p-6 min-h-[200px]",
+            "transition-colors duration-200 active:scale-[0.99] motion-reduce:transform-none",
+            accent.hoverBorder
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex flex-col flex-1 p-5 sm:p-6 gap-3 sm:gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-              live ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_cn.cn)("flex h-12 w-12 items-center justify-center rounded-xl", hue.tint), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: (0, import_cn.cn)("h-6 w-6", hue.text) }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-8 w-8 shrink-0 text-muted-foreground/50" }),
-              !live && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-1 text-[11px] font-medium text-muted-foreground/60 pt-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Lock, { className: "h-3 w-3" }),
-                "Coming soon"
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-xl sm:text-2xl font-black tracking-tight leading-snug", children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_cn.cn)("text-sm leading-relaxed", live ? "text-muted-foreground" : "text-muted-foreground/60", !featured && "max-w-[36ch]"), children: blurb })
-            ] }),
-            live && features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-1.5", children: features.slice(0, 2).map((feature) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "span",
-              {
-                className: "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-muted/40 border border-border/30 text-xs font-medium text-muted-foreground",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: (0, import_cn.cn)("h-3 w-3 shrink-0", hue.text) }),
-                  feature
-                ]
-              },
-              feature
-            )) }),
-            live && href && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href, "aria-label": `${def.cta} \u2014 ${title}`, className: "absolute inset-0 z-10" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-auto pt-1 flex items-end justify-between gap-3", children: [
-              live && browseHref && browseLinkLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                import_link.default,
-                {
-                  href: browseHref,
-                  className: "relative z-20 inline-flex items-center gap-1 text-xs font-medium text-muted-foreground active:text-foreground sm:hover:text-foreground transition-colors",
-                  children: [
-                    browseLinkLabel,
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-3 w-3" })
-                  ]
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
-              live && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                "span",
-                {
-                  className: (0, import_cn.cn)(
-                    "inline-flex items-center gap-2 h-10 px-5 rounded-full",
-                    "text-sm font-semibold text-white",
-                    hue.solid
-                  ),
-                  children: [
-                    def.cta,
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-4 w-4 transition-transform duration-300 sm:group-hover:translate-x-0.5 motion-reduce:transform-none" })
-                  ]
-                }
-              )
-            ] })
-          ] })
+          children: body
         }
-      )
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-1 flex-col gap-5 rounded-2xl border border-border/30 bg-card p-6 min-h-[200px] opacity-75", children: body })
     }
   );
 }
-const GROUP_TITLE_ACCENTS = {
-  "coins": "bg-gradient-to-r from-yellow-500 via-amber-500 to-orange-500 bg-clip-text text-transparent",
-  "community": "bg-gradient-to-r from-emerald-500 to-green-600 bg-clip-text text-transparent"
-};
-function GroupHeader({ group }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: (0, import_cn.cn)("text-3xl sm:text-4xl font-black tracking-tight", GROUP_TITLE_ACCENTS[group.key]), children: group.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-base sm:text-lg text-muted-foreground leading-relaxed max-w-2xl", children: group.tagline })
-  ] });
-}
-const POP_STEPS = [
-  { title: "Create your event badge", body: "Name it, add your artwork, and set who can claim \u2014 ready in minutes." },
-  { title: "Share the claim link", body: "Your community claims for free \u2014 one badge per person, no faking." },
-  { title: "It stays with them forever", body: "Badges can't be sold or transferred \u2014 lasting proof they were there." }
-];
-function PopHowItWorks() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col justify-center gap-5 sm:gap-6 px-2 py-4 sm:py-0 sm:pl-6", children: POP_STEPS.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-sm font-bold", children: i + 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-0.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-semibold", children: step.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground leading-relaxed", children: step.body })
-    ] })
-  ] }, step.title)) });
-}
 function ComingSoonStrip({ group, defs }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl border border-border/40 p-5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-semibold text-sm", children: group.title }),
@@ -181,24 +132,52 @@ function ComingSoonStrip({ group, defs }) {
     ] }, key)) })
   ] });
 }
+function serviceMatchesQuery(def, query) {
+  if (query.trim() === "") return true;
+  const haystack = `${def.title} ${def.blurb} ${def.subtitle} ${GROUP_TITLE_BY_KEY[def.group] ?? ""}`.toLowerCase();
+  return haystack.includes(query.trim().toLowerCase());
+}
+function syncFilterUrl(query, groups) {
+  if (typeof window === "undefined") return;
+  const params = new URLSearchParams(window.location.search);
+  if (query.trim()) params.set("q", query.trim());
+  else params.delete("q");
+  if (groups.size > 0) params.set("groups", [...groups].join(","));
+  else params.delete("groups");
+  const qs = params.toString();
+  window.history.replaceState(null, "", qs ? `${window.location.pathname}?${qs}` : window.location.pathname);
+}
 function useLaunchpadFilter() {
-  const [query, setQuery] = (0, import_react.useState)("");
+  const [query, setQueryState] = (0, import_react.useState)("");
   const [activeGroups, setActiveGroups] = (0, import_react.useState)(/* @__PURE__ */ new Set());
+  (0, import_react.useEffect)(() => {
+    const params = new URLSearchParams(window.location.search);
+    const q = params.get("q");
+    if (q) setQueryState(q);
+    const g = params.get("groups");
+    if (g) {
+      const groups = g.split(",").filter((k) => GROUP_KEYS.has(k));
+      if (groups.length > 0) setActiveGroups(new Set(groups));
+    }
+  }, []);
   const filterableGroups = import_launchpad_services.LAUNCHPAD_SERVICE_GROUPS.filter((g) => g.key !== "coming-soon");
+  const setQuery = (value) => {
+    setQueryState(value);
+    syncFilterUrl(value, activeGroups);
+  };
   const toggleGroup = (key) => {
     setActiveGroups((prev) => {
       const next = new Set(prev);
       if (next.has(key)) next.delete(key);
       else next.add(key);
+      syncFilterUrl(query, next);
       return next;
     });
   };
   const matches = (def) => {
     if (activeGroups.size > 0 && !activeGroups.has(def.group)) return false;
     if (def.status !== "live") return false;
-    if (query.trim() === "") return true;
-    const haystack = `${def.title} ${def.blurb} ${def.subtitle}`.toLowerCase();
-    return haystack.includes(query.trim().toLowerCase());
+    return serviceMatchesQuery(def, query);
   };
   const totalMatches = (0, import_react.useMemo)(
     () => import_launchpad_services.LAUNCHPAD_SERVICE_DEFINITIONS.filter(matches).length,
@@ -206,25 +185,22 @@ function useLaunchpadFilter() {
     [query, activeGroups]
   );
   const clear = () => {
-    setQuery("");
+    setQueryState("");
     setActiveGroups(/* @__PURE__ */ new Set());
+    syncFilterUrl("", /* @__PURE__ */ new Set());
   };
   return { query, setQuery, activeGroups, toggleGroup, filterableGroups, totalMatches, clear };
 }
 function LaunchpadGroupedSections({ overrides, query, activeGroups, onClearFilters, className }) {
-  const matches = (def) => {
-    if (activeGroups.size > 0 && !activeGroups.has(def.group)) return false;
-    if (def.status !== "live") return false;
-    if (query.trim() === "") return true;
-    const haystack = `${def.title} ${def.blurb} ${def.subtitle}`.toLowerCase();
-    return haystack.includes(query.trim().toLowerCase());
-  };
-  const totalMatches = (0, import_react.useMemo)(
-    () => import_launchpad_services.LAUNCHPAD_SERVICE_DEFINITIONS.filter(matches).length,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [query, activeGroups]
+  const inActiveGroup = (d) => activeGroups.size === 0 || activeGroups.has(d.group);
+  const inSearch = (d) => serviceMatchesQuery(d, query);
+  const groupOrder = Object.fromEntries(import_launchpad_services.LAUNCHPAD_SERVICE_GROUPS.map((g, i) => [g.key, i]));
+  const liveDefs = import_launchpad_services.LAUNCHPAD_SERVICE_DEFINITIONS.filter((d) => d.group !== "coming-soon" && d.status === "live" && inActiveGroup(d) && inSearch(d)).sort((a, b) => (groupOrder[a.group] ?? 99) - (groupOrder[b.group] ?? 99));
+  const comingSoonGroup = import_launchpad_services.LAUNCHPAD_SERVICE_GROUPS.find((g) => g.key === "coming-soon");
+  const comingSoonDefs = import_launchpad_services.LAUNCHPAD_SERVICE_DEFINITIONS.filter(
+    (d) => d.group === "coming-soon" && inActiveGroup(d) && inSearch(d)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("space-y-8 sm:space-y-10", className), children: totalMatches === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center py-16 space-y-3", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("space-y-8", className), children: liveDefs.length === 0 && comingSoonDefs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center py-16 space-y-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-lg font-semibold", children: "No services match" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground", children: "Try a different search or clear your filters." }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -236,45 +212,18 @@ function LaunchpadGroupedSections({ overrides, query, activeGroups, onClearFilte
         children: "Clear filters"
       }
     )
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-20 sm:space-y-28", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: import_launchpad_services.LAUNCHPAD_SERVICE_GROUPS.map((group) => {
-    if (group.key === "coming-soon") {
-      const inActiveGroup = (d) => activeGroups.size === 0 || activeGroups.has(d.group);
-      const inSearch = (d) => query.trim() === "" || `${d.title} ${d.blurb} ${d.subtitle}`.toLowerCase().includes(query.trim().toLowerCase());
-      const comingSoonDefs = import_launchpad_services.LAUNCHPAD_SERVICE_DEFINITIONS.filter(
-        (d) => d.group === group.key && inActiveGroup(d) && inSearch(d)
-      );
-      if (comingSoonDefs.length === 0) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComingSoonStrip, { group, defs: comingSoonDefs }, group.key);
-    }
-    const defs = import_launchpad_services.LAUNCHPAD_SERVICE_DEFINITIONS.filter((d) => d.group === group.key && matches(d));
-    if (defs.length === 0) return null;
-    const showPopHowItWorks = group.key === "community" && defs.some((d) => d.key === "pop-protocol");
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_framer_motion.motion.div,
-      {
-        layout: true,
-        initial: { opacity: 0, y: 8 },
-        animate: { opacity: 1, y: 0 },
-        exit: { opacity: 0 },
-        transition: { duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] },
-        className: "space-y-7 sm:space-y-10",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GroupHeader, { group }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5", children: [
-            defs.map((def, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LaunchpadServiceCard, { def, override: overrides[def.key], index: i }, def.key)),
-            showPopHowItWorks && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopHowItWorks, {})
-          ] })
-        ]
-      },
-      group.key
-    );
-  }) }) }) });
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { layout: true, className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { mode: "popLayout", children: liveDefs.map((def, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LaunchpadServiceCard, { def, override: overrides[def.key], index: i }, def.key)) }) }),
+    comingSoonGroup && comingSoonDefs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComingSoonStrip, { group: comingSoonGroup, defs: comingSoonDefs })
+  ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  GROUP_ACCENTS,
   LaunchpadGroupedSections,
   LaunchpadServiceCard,
   SERVICE_HUES,
+  serviceMatchesQuery,
   useLaunchpadFilter
 });
 //# sourceMappingURL=launchpad-services.cjs.map