@ai-matrx/design-system 0.86.361 → 0.86.363

package/dist/intro-stage.cjs

@@ -106,7 +106,7 @@ function Tile({ item, size }) {
       className: cn(
         "flex shrink-0 items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-inset ring-white/15",
         "[&>svg]:shrink-0",
-        size === "feature" ? "size-11 [&>svg]:size-5" : size === "chip" ? "size-6 rounded-md [&>svg]:size-3.5" : "size-10 [&>svg]:size-5"
+        size === "feature" ? "size-11 [&>svg]:size-5" : size === "chip" ? "size-6 rounded-md [&>svg]:size-3.5" : size === "launcher" ? "size-12 rounded-2xl shadow-md transition-transform duration-300 ease-out motion-safe:group-hover:scale-105 sm:size-14 [&>svg]:size-6 sm:[&>svg]:size-7" : "size-10 [&>svg]:size-5"
       ),
       style: { background: introTileBackground(item.identity ? item.identity.color : item.tone) },
       children: itemIcon(item)
@@ -229,7 +229,8 @@ function rise(motion, index) {
   if (!motion) return { className: "" };
   return {
     className: "motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2 motion-safe:duration-500 motion-safe:fill-mode-both",
-    style: { animationDelay: `${80 + index * 45}ms` }
+    // Capped: a long launcher index never waits more than ~0.6 s for its last tile.
+    style: { animationDelay: `${80 + Math.min(index, 12) * 45}ms` }
   };
 }
 var CARD = "group relative flex min-w-0 rounded-2xl border border-border bg-card text-left outline-none transition-[border-color,box-shadow,translate] duration-200 hover:border-[color-mix(in_oklab,var(--intro-color)_50%,transparent)] hover:shadow-lg focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-safe:hover:-translate-y-0.5";
@@ -300,7 +301,7 @@ function IntroStage({
             "ul",
             {
               className: cn(
-                group.size === "chips" ? "flex flex-wrap gap-2" : "grid grid-cols-1 gap-3",
+                group.size === "chips" ? "flex flex-wrap gap-2" : group.size === "launcher" ? "grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 lg:grid-cols-4 xl:grid-cols-5" : "grid grid-cols-1 gap-3",
                 group.size === "feature" ? "md:grid-cols-3 md:gap-4" : group.size === "compact" ? "sm:grid-cols-2 lg:grid-cols-6" : ""
               ),
               children: group.items.map((item) => {
@@ -319,6 +320,26 @@ function IntroStage({
                     item.external ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "sr-only", children: " (opens in a new tab)" }) : null
                   ] }) }, item.id);
                 }
+                if (group.size === "launcher") {
+                  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { className: cn("flex", motionOf.className), style: motionOf.style, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Link, { item, href: item.href, className: cn(CARD, "w-full"), style, "data-intro-item": item.id, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      "span",
+                      {
+                        className: "relative flex w-full flex-col items-start gap-3 overflow-hidden rounded-2xl p-4 sm:gap-4 sm:p-5",
+                        style: { background: `radial-gradient(90% 70% at 0% 0%, ${soften(color, 10)}, transparent 70%)` },
+                        onClick: open,
+                        title: item.pitch || item.name,
+                        "data-intro-launcher": "",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Tile, { item, size: "launcher" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "line-clamp-2 pr-4 text-sm font-semibold leading-5 text-foreground sm:text-base", children: item.name }),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "absolute right-3 top-3 sm:right-4 sm:top-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Arrow, { external: item.external }) })
+                        ]
+                      }
+                    ),
+                    item.external ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "sr-only", children: " (opens in a new tab)" }) : null
+                  ] }) }, item.id);
+                }
                 const body = group.size === "feature" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "flex w-full flex-col overflow-hidden rounded-2xl", onClick: open, children: [
                   item.diagram ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "span",