@ai-matrx/design-system 0.86.361 → 0.86.363

package/dist/intro-stage.d.cts

@@ -7,10 +7,14 @@ import * as React from 'react';
  * controls are the wrong register (Arman, 2026-10-12: flagship screens get an
  * elevated stage).
  *
- * Two group sizes:
+ * Group sizes:
  *   - `feature` — large cards with a small diagram panel (one node, a led
  *     ensemble, a sequence of steps), for the few pieces that matter most.
  *   - `compact` — a tile + name + pitch row, for the rest.
+ *   - `chips` — a wrapping row of small pills, for a long list of things to try.
+ *   - `launcher` — an app-launcher grid: a big gradient tile over the name, the
+ *     pitch on hover. For tool indexes and product homes (Arman, 2026-10-24: "I
+ *     don't like the tiny icons", tools pages get the welcome page's look).
  *
  * Color: an item wears either an `identity` — the platform's ONE color + icon
  * for that piece, from `@ai-matrx/icons/domain` (PRIMITIVE_IDENTITIES /
@@ -82,9 +86,11 @@ interface IntroGroup {
     label: string;
     /**
      * `feature` = big cards with diagrams; `compact` = tiles with a pitch; `chips` = a wrapping row of small
-     * pills (tile + name, the pitch rides the hover title) for a long list of things to try.
+     * pills (tile + name, the pitch rides the hover title) for a long list of things to try; `launcher` = an
+     * app-launcher grid of big tiles over their names (the pitch rides the hover title; `""` = none), for a
+     * tools index or a product home.
      */
-    size: "feature" | "compact" | "chips";
+    size: "feature" | "compact" | "chips" | "launcher";
     items: readonly IntroItem[];
 }
 interface IntroLinkProps {

package/dist/intro-stage.d.ts

@@ -7,10 +7,14 @@ import * as React from 'react';
  * controls are the wrong register (Arman, 2026-10-12: flagship screens get an
  * elevated stage).
  *
- * Two group sizes:
+ * Group sizes:
  *   - `feature` — large cards with a small diagram panel (one node, a led
  *     ensemble, a sequence of steps), for the few pieces that matter most.
  *   - `compact` — a tile + name + pitch row, for the rest.
+ *   - `chips` — a wrapping row of small pills, for a long list of things to try.
+ *   - `launcher` — an app-launcher grid: a big gradient tile over the name, the
+ *     pitch on hover. For tool indexes and product homes (Arman, 2026-10-24: "I
+ *     don't like the tiny icons", tools pages get the welcome page's look).
  *
  * Color: an item wears either an `identity` — the platform's ONE color + icon
  * for that piece, from `@ai-matrx/icons/domain` (PRIMITIVE_IDENTITIES /
@@ -82,9 +86,11 @@ interface IntroGroup {
     label: string;
     /**
      * `feature` = big cards with diagrams; `compact` = tiles with a pitch; `chips` = a wrapping row of small
-     * pills (tile + name, the pitch rides the hover title) for a long list of things to try.
+     * pills (tile + name, the pitch rides the hover title) for a long list of things to try; `launcher` = an
+     * app-launcher grid of big tiles over their names (the pitch rides the hover title; `""` = none), for a
+     * tools index or a product home.
      */
-    size: "feature" | "compact" | "chips";
+    size: "feature" | "compact" | "chips" | "launcher";
     items: readonly IntroItem[];
 }
 interface IntroLinkProps {

package/dist/intro-stage.js

@@ -50,7 +50,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)
@@ -173,7 +173,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";
@@ -244,7 +245,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) => {
@@ -263,6 +264,26 @@ function IntroStage({
                     item.external ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (opens in a new tab)" }) : null
                   ] }) }, item.id);
                 }
+                if (group.size === "launcher") {
+                  return /* @__PURE__ */ jsx("li", { className: cn("flex", motionOf.className), style: motionOf.style, children: /* @__PURE__ */ jsxs(Link, { item, href: item.href, className: cn(CARD, "w-full"), style, "data-intro-item": item.id, children: [
+                    /* @__PURE__ */ 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__ */ jsx(Tile, { item, size: "launcher" }),
+                          /* @__PURE__ */ jsx("span", { className: "line-clamp-2 pr-4 text-sm font-semibold leading-5 text-foreground sm:text-base", children: item.name }),
+                          /* @__PURE__ */ jsx("span", { className: "absolute right-3 top-3 sm:right-4 sm:top-4", children: /* @__PURE__ */ jsx(Arrow, { external: item.external }) })
+                        ]
+                      }
+                    ),
+                    item.external ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (opens in a new tab)" }) : null
+                  ] }) }, item.id);
+                }
                 const body = group.size === "feature" ? /* @__PURE__ */ jsxs("span", { className: "flex w-full flex-col overflow-hidden rounded-2xl", onClick: open, children: [
                   item.diagram ? /* @__PURE__ */ jsx(
                     "span",

package/dist/intro-stage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/intro-stage/IntroStage.tsx"],"sourcesContent":["/**\n * IntroStage — THE flagship introduction stage: a display title, then groups of\n * named pieces, each a link to its real place with a few-word pitch. Built for\n * first-run moments (\"Meet Matrx\" on the sign-up welcome), where the app's 28px\n * controls are the wrong register (Arman, 2026-10-12: flagship screens get an\n * elevated stage).\n *\n * Two group sizes:\n *   - `feature` — large cards with a small diagram panel (one node, a led\n *     ensemble, a sequence of steps), for the few pieces that matter most.\n *   - `compact` — a tile + name + pitch row, for the rest.\n *\n * Color: an item wears either an `identity` — the platform's ONE color + icon\n * for that piece, from `@ai-matrx/icons/domain` (PRIMITIVE_IDENTITIES /\n * PLATFORM_IDENTITIES), so the stage matches every other place the piece\n * appears — or a `tone` 1–10, the design system's categorical hues\n * (`--matrx-chart-N`). The tile, diagram and hover border are all built from\n * that one color. Text uses only the two text tokens.\n *\n * Motion: a short staggered rise on mount (transform + opacity only — nothing\n * moves another box) and a lift on hover; both off under reduced motion or\n * `motion={false}`.\n *\n * Links: a plain `<a>` by default; a host passes `renderLink` to use its router\n * link. `external` items open a new tab and say so with the external glyph.\n */\n\nimport * as React from \"react\";\nimport { cn } from \"../cn\";\nimport { ArrowRightIcon, ExternalLinkIcon } from \"../icons\";\n\n/** The categorical hue an item wears (`--matrx-chart-<tone>`). */\nexport type IntroTone = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n\n/** The diagram a `feature` card draws: one node, a lead with members, or steps in a row. */\nexport type IntroDiagram = \"single\" | \"ensemble\" | \"sequence\";\n\n/**\n * An official identity (structurally `PrimitiveIdentity` / `PlatformIdentity` from\n * `@ai-matrx/icons/domain`): a hex tile color and its icon component.\n */\nexport interface IntroIdentity {\n  /** `#rrggbb`. */\n  color: string;\n  icon?: React.ComponentType<{ className?: string }> | undefined;\n}\n\ninterface IntroItemBase {\n  id: string;\n  /** The piece's canonical name, shown as written. */\n  name: string;\n  /** A few plain words: what it is for. */\n  pitch: string;\n  href: string;\n  /** Opens in a new tab (another app or site). */\n  external?: boolean | undefined;\n  /** `feature` groups only; omitted = no diagram panel. */\n  diagram?: IntroDiagram | undefined;\n  /**\n   * The hero treatment, `compact` groups only: the card takes a whole row and draws a small\n   * picture of what flows in (`flow`) to one place that `flowTo` then draws on. Put it first in\n   * its group. Omitted = an ordinary tile.\n   */\n  featured?: boolean | undefined;\n  /** `featured` only: the names of what flows in (real sources only), shown as chips. */\n  flow?: readonly string[] | undefined;\n  /** `featured` only: who draws on it, shown after the flow (\"Every agent\"). */\n  flowTo?: string | undefined;\n}\n\n/** A piece on the stage: colored by its official `identity` (preferred) or by a chart `tone`. */\nexport type IntroItem = IntroItemBase &\n  (\n    | {\n        /** The piece's official identity; its icon is used unless `icon` is passed. */\n        identity: IntroIdentity;\n        tone?: undefined;\n        icon?: React.ReactNode;\n      }\n    | {\n        tone: IntroTone;\n        identity?: undefined;\n        /** The piece's official icon (an SVG component instance); sized by the stage. */\n        icon: React.ReactNode;\n      }\n  );\n\nexport interface IntroGroup {\n  id: string;\n  /** The group's small heading. Empty = none (the host's own frame already names it). */\n  label: string;\n  /**\n   * `feature` = big cards with diagrams; `compact` = tiles with a pitch; `chips` = a wrapping row of small\n   * pills (tile + name, the pitch rides the hover title) for a long list of things to try.\n   */\n  size: \"feature\" | \"compact\" | \"chips\";\n  items: readonly IntroItem[];\n}\n\nexport interface IntroLinkProps {\n  item: IntroItem;\n  href: string;\n  className: string;\n  style?: React.CSSProperties | undefined;\n  children: React.ReactNode;\n  \"data-intro-item\": string;\n}\n\nexport interface IntroStageProps {\n  /** A short line above the title (a greeting). */\n  eyebrow?: React.ReactNode | undefined;\n  /**\n   * The title's first words, in the foreground color. Omitted (with no `eyebrow`, `accent` or `lead`) =\n   * no header at all: the groups alone, for a host that places one group as a part of a larger page\n   * (a launchpad widget showing only \"The studios\").\n   */\n  title?: string | undefined;\n  /** The title's last word(s), drawn in the brand gradient. */\n  accent?: string | undefined;\n  /** One line under the title. */\n  lead?: React.ReactNode | undefined;\n  groups: readonly IntroGroup[];\n  /** The host's link (router link). Default: a plain anchor. */\n  renderLink?: ((props: IntroLinkProps) => React.ReactNode) | undefined;\n  /** Called on every open (analytics, closing a dialog). */\n  onOpen?: ((item: IntroItem) => void) | undefined;\n  /** Entrance and hover motion. Default true (still off under reduced motion). */\n  motion?: boolean | undefined;\n  className?: string | undefined;\n  /** Rendered after the groups (the host's own next step). */\n  children?: React.ReactNode | undefined;\n}\n\nconst HEX = /^#[0-9a-f]{6}$/i;\n\n/** A CSS color for a tone (`hsl(var(--matrx-chart-N))`) or an identity's hex color. */\nfunction paint(c: IntroTone | string): string {\n  if (typeof c === \"number\") return `hsl(var(--matrx-chart-${c}))`;\n  if (!HEX.test(c)) throw new Error(`IntroStage: identity color must be #rrggbb, got \"${c}\"`);\n  return c;\n}\n\n/** The color an item wears: its identity's, else its tone's. */\nfunction itemColor(item: IntroItem): string {\n  return item.identity ? paint(item.identity.color) : paint(item.tone);\n}\n\n/** `c` at `pct`% over transparent. */\nconst soften = (c: string, pct: number) => `color-mix(in oklab, ${c} ${pct}%, transparent)`;\n\n/** The tile's fill: the color, deepening to the lower right so a white glyph stays crisp on every hue. */\nexport function introTileBackground(t: IntroTone | string): string {\n  const c = paint(t);\n  return `linear-gradient(145deg, color-mix(in oklab, ${c} 86%, white), ${c} 45%, color-mix(in oklab, ${c} 74%, black))`;\n}\n\nfunction itemIcon(item: IntroItem): React.ReactNode {\n  if (item.icon) return item.icon;\n  const Icon = item.identity?.icon;\n  return Icon ? <Icon /> : null;\n}\n\nfunction DefaultLink({ item, href, className, style, children, ...rest }: IntroLinkProps) {\n  return (\n    <a\n      href={href}\n      className={className}\n      style={style}\n      data-intro-item={rest[\"data-intro-item\"]}\n      {...(item.external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : {})}\n    >\n      {children}\n    </a>\n  );\n}\n\nfunction Tile({ item, size }: { item: IntroItem; size: \"feature\" | \"compact\" | \"chip\" }) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-intro-tile=\"\"\n      className={cn(\n        \"flex shrink-0 items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-inset ring-white/15\",\n        \"[&>svg]:shrink-0\",\n        size === \"feature\" ? \"size-11 [&>svg]:size-5\" : size === \"chip\" ? \"size-6 rounded-md [&>svg]:size-3.5\" : \"size-10 [&>svg]:size-5\",\n      )}\n      style={{ background: introTileBackground(item.identity ? item.identity.color : item.tone) }}\n    >\n      {itemIcon(item)}\n    </span>\n  );\n}\n\n/** The feature card's diagram, drawn in the item's hue. Decorative. */\nfunction Diagram({ kind, color }: { kind: IntroDiagram; color: string }) {\n  const stroke = color;\n  const soft = soften(color, 22);\n  const common = { stroke, strokeWidth: 1.75, strokeLinecap: \"round\" as const };\n  return (\n    <svg\n      viewBox=\"0 0 200 72\"\n      aria-hidden=\"true\"\n      className=\"h-12 w-auto overflow-visible sm:h-20 transition-transform duration-300 ease-out motion-safe:group-hover:scale-105\"\n    >\n      {kind === \"single\" ? (\n        <g>\n          <circle cx=\"100\" cy=\"36\" r=\"30\" fill=\"none\" stroke={soft} strokeWidth=\"1.5\" strokeDasharray=\"3 5\" />\n          <circle cx=\"100\" cy=\"36\" r=\"19\" fill={soft} />\n          <circle cx=\"100\" cy=\"36\" r=\"11\" fill={stroke} />\n          <circle cx=\"129\" cy=\"20\" r=\"3.5\" fill={stroke} />\n        </g>\n      ) : null}\n      {kind === \"ensemble\" ? (\n        <g>\n          {[14, 36, 58].map((y) => (\n            <path key={y} d={`M70 36 C 100 36, 110 ${y}, 140 ${y}`} fill=\"none\" {...common} stroke={soft} />\n          ))}\n          <circle cx=\"58\" cy=\"36\" r=\"17\" fill={soft} />\n          <circle cx=\"58\" cy=\"36\" r=\"10\" fill={stroke} />\n          {[14, 36, 58].map((y) => (\n            <circle key={y} cx=\"148\" cy={y} r=\"7\" fill=\"none\" {...common} />\n          ))}\n        </g>\n      ) : null}\n      {kind === \"sequence\" ? (\n        <g>\n          {[30, 80, 130].map((x) => (\n            <path key={x} d={`M${x + 14} 36 H ${x + 36}`} fill=\"none\" {...common} stroke={soft} />\n          ))}\n          {[16, 66, 116, 166].map((x, i) => (\n            <rect\n              key={x}\n              x={x}\n              y=\"22\"\n              width=\"28\"\n              height=\"28\"\n              rx=\"8\"\n              fill={i === 0 ? stroke : \"none\"}\n              {...common}\n            />\n          ))}\n        </g>\n      ) : null}\n    </svg>\n  );\n}\n\nfunction Arrow({ external }: { external?: boolean | undefined }) {\n  const Glyph = external ? ExternalLinkIcon : ArrowRightIcon;\n  return (\n    <Glyph\n      data-intro-arrow={external ? \"external\" : \"internal\"}\n      className=\"size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-foreground\"\n    />\n  );\n}\n\n/** The featured card's picture: what flows in, one place, who draws on it. Decorative lines; the chips are real text. */\nfunction Flow({ item, color }: { item: IntroItem; color: string }) {\n  const soft = soften(color, 40);\n  const ys = [8, 26, 44, 62, 80];\n  return (\n    <span\n      data-intro-flow=\"\"\n      className=\"flex flex-col gap-3 border-t border-border px-4 py-4 sm:px-5 md:flex-row md:items-center md:gap-0\"\n      style={{ background: `linear-gradient(180deg, ${soften(color, 6)}, transparent)` }}\n    >\n      <span className=\"flex min-w-0 flex-wrap gap-1.5 md:max-w-[28rem] md:shrink-0\" data-intro-flow-sources=\"\">\n        {item.flow?.map((label) => (\n          <span\n            key={label}\n            className=\"inline-flex h-7 items-center rounded-full border px-3 text-xs font-medium text-foreground\"\n            style={{ borderColor: soften(color, 40), background: soften(color, 9) }}\n          >\n            {label}\n          </span>\n        ))}\n      </span>\n      <svg\n        viewBox=\"0 0 120 88\"\n        preserveAspectRatio=\"none\"\n        aria-hidden=\"true\"\n        className=\"hidden h-[88px] min-w-16 flex-1 overflow-visible md:block\"\n      >\n        {ys.map((y) => (\n          <path\n            key={y}\n            d={`M0 ${y} C 60 ${y}, 60 44, 120 44`}\n            fill=\"none\"\n            stroke={soft}\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            vectorEffect=\"non-scaling-stroke\"\n          />\n        ))}\n      </svg>\n      <span aria-hidden=\"true\" className=\"hidden size-7 shrink-0 items-center justify-center rounded-full md:flex\" style={{ background: soften(color, 22) }}>\n        <span className=\"size-3.5 rounded-full\" style={{ background: color }} />\n      </span>\n      <svg viewBox=\"0 0 24 28\" aria-hidden=\"true\" className=\"h-7 w-6 shrink-0 self-start md:hidden\">\n        <path d=\"M12 0 V 14\" fill=\"none\" stroke={soft} strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n        <circle cx=\"12\" cy=\"20\" r=\"7\" fill={soften(color, 22)} />\n        <circle cx=\"12\" cy=\"20\" r=\"3.5\" fill={color} />\n      </svg>\n      {item.flowTo ? (\n        <span\n          data-intro-flow-to=\"\"\n          className=\"inline-flex h-9 shrink-0 items-center self-start rounded-full border px-3.5 text-sm font-semibold text-foreground md:ml-2 md:self-auto\"\n          style={{ borderColor: soften(color, 55), background: soften(color, 12) }}\n        >\n          {item.flowTo}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n\nfunction rise(motion: boolean, index: number): { className: string; style?: React.CSSProperties } {\n  if (!motion) return { className: \"\" };\n  return {\n    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\",\n    style: { animationDelay: `${80 + index * 45}ms` },\n  };\n}\n\nconst CARD =\n  \"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\";\n\n/** A `chips` pill: the card's border and hover, sized to its content. */\nconst CHIP =\n  \"group relative inline-flex min-w-0 rounded-full border border-border bg-card text-left outline-none transition-[border-color,box-shadow] duration-200 hover:border-[color-mix(in_oklab,var(--intro-color)_50%,transparent)] hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\";\n\n/**\n * A `compact` tile's column span on the 6-column desktop grid (2 columns = the old third) and the\n * 2-column tablet grid. A featured card takes the whole row; the tiles after it fill their last\n * row evenly (two left over = halves, one left over = the full row), so a featured card never\n * leaves a hole. A group with no featured card and a full last row gets exactly the old layout.\n */\nfunction tileSpan(group: IntroGroup, item: IntroItem): string {\n  if (item.featured) return \"sm:col-span-2 lg:col-span-6\";\n  const plain = group.items.filter((i) => !i.featured);\n  const idx = plain.indexOf(item);\n  const left = plain.length - idx; // tiles from here to the end\n  const desktopRest = plain.length % 3;\n  const tabletRest = plain.length % 2;\n  const lg =\n    desktopRest === 2 && left <= 2 ? \"lg:col-span-3\" : desktopRest === 1 && left === 1 ? \"lg:col-span-6\" : \"lg:col-span-2\";\n  const sm = tabletRest === 1 && left === 1 ? \"sm:col-span-2\" : \"\";\n  return cn(sm, lg);\n}\n\nexport function IntroStage({\n  eyebrow,\n  title,\n  accent,\n  lead,\n  groups,\n  renderLink,\n  onOpen,\n  motion = true,\n  className,\n  children,\n}: IntroStageProps) {\n  const Link = renderLink ?? DefaultLink;\n  const headed = Boolean(title || accent || eyebrow || lead);\n  let order = 0;\n  return (\n    <section className={cn(\"relative isolate w-full\", className)} data-intro-stage=\"\">\n      {/* The stage light: a soft glow behind the title, never under the cards' text. */}\n      {title || accent ? (\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-x-0 -top-24 -z-10 mx-auto h-72 max-w-3xl blur-3xl\"\n        style={{\n          background:\n            \"radial-gradient(50% 60% at 35% 50%, hsl(var(--primary) / 0.16), transparent 70%), radial-gradient(45% 55% at 68% 45%, hsl(var(--matrx-chart-7) / 0.14), transparent 70%)\",\n        }}\n      />\n      ) : null}\n      {headed ? (\n      <header className={cn(\"text-center\", rise(motion, 0).className)} style={rise(motion, 0).style}>\n        {eyebrow ? <p className=\"text-sm font-medium text-muted-foreground\">{eyebrow}</p> : null}\n        {title || accent ? (\n        <h1 className=\"mt-2 text-balance text-4xl font-semibold tracking-tight text-foreground sm:text-6xl\">\n          {title}\n          {accent ? (\n            <>\n              {\" \"}\n              <span\n                className=\"bg-clip-text text-transparent\"\n                style={{ backgroundImage: \"linear-gradient(95deg, hsl(var(--primary)), hsl(var(--matrx-chart-7)) 55%, hsl(var(--matrx-chart-9)))\" }}\n              >\n                {accent}\n              </span>\n            </>\n          ) : null}\n        </h1>\n        ) : null}\n        {lead ? <p className=\"mx-auto mt-4 max-w-xl text-balance text-base text-muted-foreground sm:text-lg\">{lead}</p> : null}\n      </header>\n      ) : null}\n\n      {groups.map((group, groupIndex) => (\n        <div\n          key={group.id}\n          className={groupIndex === 0 && !headed ? \"mt-0\" : \"mt-12 first-of-type:mt-10\"}\n          data-intro-group={group.id}\n        >\n          {group.label ? (\n            <h2 className=\"mb-4 text-xs font-semibold uppercase tracking-widest text-muted-foreground\">{group.label}</h2>\n          ) : null}\n          <ul\n            className={cn(\n              group.size === \"chips\" ? \"flex flex-wrap gap-2\" : \"grid grid-cols-1 gap-3\",\n              group.size === \"feature\" ? \"md:grid-cols-3 md:gap-4\" : group.size === \"compact\" ? \"sm:grid-cols-2 lg:grid-cols-6\" : \"\",\n            )}\n          >\n            {group.items.map((item) => {\n              const spanClass = group.size === \"compact\" ? tileSpan(group, item) : \"\";\n              order += 1;\n              const motionOf = rise(motion, order);\n              const color = itemColor(item);\n              const style = { [\"--intro-color\" as string]: color, ...motionOf.style } as React.CSSProperties;\n              const open = onOpen ? () => onOpen(item) : undefined;\n              if (group.size === \"chips\") {\n                return (\n                  <li key={item.id} className={cn(\"flex\", motionOf.className)} style={motionOf.style}>\n                    <Link item={item} href={item.href} className={CHIP} style={style} data-intro-item={item.id}>\n                      <span className=\"flex items-center gap-2 py-1 pl-1 pr-3\" onClick={open} title={item.pitch || undefined}>\n                        <Tile item={item} size=\"chip\" />\n                        <span className=\"text-sm font-medium text-foreground\">{item.name}</span>\n                      </span>\n                      {item.external ? <span className=\"sr-only\"> (opens in a new tab)</span> : null}\n                    </Link>\n                  </li>\n                );\n              }\n              const body =\n                group.size === \"feature\" ? (\n                  <span className=\"flex w-full flex-col overflow-hidden rounded-2xl\" onClick={open}>\n                    {item.diagram ? (\n                      <span\n                        className=\"flex h-20 items-center justify-center border-b border-border sm:h-32\"\n                        style={{ background: `radial-gradient(70% 110% at 50% 100%, ${soften(color, 18)}, transparent 72%), linear-gradient(180deg, ${soften(color, 5)}, transparent)` }}\n                      >\n                        <Diagram kind={item.diagram} color={color} />\n                      </span>\n                    ) : null}\n                    <span className=\"flex items-center gap-3.5 p-4 sm:p-5\">\n                      <Tile item={item} size=\"feature\" />\n                      <span className=\"min-w-0 flex-1\">\n                        <span className=\"block text-lg font-semibold leading-6 text-foreground\">{item.name}</span>\n                        <span className=\"mt-0.5 block text-balance text-sm leading-5 text-muted-foreground\">{item.pitch}</span>\n                      </span>\n                      <Arrow external={item.external} />\n                    </span>\n                  </span>\n                ) : item.featured ? (\n                  <span className=\"flex w-full flex-col overflow-hidden rounded-2xl\" onClick={open}>\n                    <span className=\"flex items-center gap-3.5 p-4 sm:p-5\">\n                      <Tile item={item} size=\"feature\" />\n                      <span className=\"min-w-0 flex-1\">\n                        <span className=\"block text-lg font-semibold leading-6 text-foreground\">{item.name}</span>\n                        <span className=\"mt-0.5 block text-balance text-sm leading-5 text-muted-foreground\">{item.pitch}</span>\n                      </span>\n                      <Arrow external={item.external} />\n                    </span>\n                    <Flow item={item} color={color} />\n                  </span>\n                ) : (\n                  <span className=\"flex w-full items-center gap-3.5 p-4\" onClick={open}>\n                    <Tile item={item} size=\"compact\" />\n                    <span className=\"min-w-0 flex-1\">\n                      <span className=\"block text-base font-semibold leading-5 text-foreground\">{item.name}</span>\n                      <span className=\"mt-0.5 block text-balance text-sm leading-5 text-muted-foreground\">{item.pitch}</span>\n                    </span>\n                    <Arrow external={item.external} />\n                  </span>\n                );\n              return (\n                <li key={item.id} className={cn(\"flex\", spanClass, motionOf.className)} style={motionOf.style}>\n                  <Link\n                    item={item}\n                    href={item.href}\n                    className={cn(CARD, \"w-full\")}\n                    style={style}\n                    data-intro-item={item.id}\n                  >\n                    {body}\n                    {item.external ? <span className=\"sr-only\"> (opens in a new tab)</span> : null}\n                  </Link>\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      ))}\n      {children}\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/intro-stage/IntroStage.tsx"],"sourcesContent":["/**\n * IntroStage — THE flagship introduction stage: a display title, then groups of\n * named pieces, each a link to its real place with a few-word pitch. Built for\n * first-run moments (\"Meet Matrx\" on the sign-up welcome), where the app's 28px\n * controls are the wrong register (Arman, 2026-10-12: flagship screens get an\n * elevated stage).\n *\n * Group sizes:\n *   - `feature` — large cards with a small diagram panel (one node, a led\n *     ensemble, a sequence of steps), for the few pieces that matter most.\n *   - `compact` — a tile + name + pitch row, for the rest.\n *   - `chips` — a wrapping row of small pills, for a long list of things to try.\n *   - `launcher` — an app-launcher grid: a big gradient tile over the name, the\n *     pitch on hover. For tool indexes and product homes (Arman, 2026-10-24: \"I\n *     don't like the tiny icons\", tools pages get the welcome page's look).\n *\n * Color: an item wears either an `identity` — the platform's ONE color + icon\n * for that piece, from `@ai-matrx/icons/domain` (PRIMITIVE_IDENTITIES /\n * PLATFORM_IDENTITIES), so the stage matches every other place the piece\n * appears — or a `tone` 1–10, the design system's categorical hues\n * (`--matrx-chart-N`). The tile, diagram and hover border are all built from\n * that one color. Text uses only the two text tokens.\n *\n * Motion: a short staggered rise on mount (transform + opacity only — nothing\n * moves another box) and a lift on hover; both off under reduced motion or\n * `motion={false}`.\n *\n * Links: a plain `<a>` by default; a host passes `renderLink` to use its router\n * link. `external` items open a new tab and say so with the external glyph.\n */\n\nimport * as React from \"react\";\nimport { cn } from \"../cn\";\nimport { ArrowRightIcon, ExternalLinkIcon } from \"../icons\";\n\n/** The categorical hue an item wears (`--matrx-chart-<tone>`). */\nexport type IntroTone = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n\n/** The diagram a `feature` card draws: one node, a lead with members, or steps in a row. */\nexport type IntroDiagram = \"single\" | \"ensemble\" | \"sequence\";\n\n/**\n * An official identity (structurally `PrimitiveIdentity` / `PlatformIdentity` from\n * `@ai-matrx/icons/domain`): a hex tile color and its icon component.\n */\nexport interface IntroIdentity {\n  /** `#rrggbb`. */\n  color: string;\n  icon?: React.ComponentType<{ className?: string }> | undefined;\n}\n\ninterface IntroItemBase {\n  id: string;\n  /** The piece's canonical name, shown as written. */\n  name: string;\n  /** A few plain words: what it is for. */\n  pitch: string;\n  href: string;\n  /** Opens in a new tab (another app or site). */\n  external?: boolean | undefined;\n  /** `feature` groups only; omitted = no diagram panel. */\n  diagram?: IntroDiagram | undefined;\n  /**\n   * The hero treatment, `compact` groups only: the card takes a whole row and draws a small\n   * picture of what flows in (`flow`) to one place that `flowTo` then draws on. Put it first in\n   * its group. Omitted = an ordinary tile.\n   */\n  featured?: boolean | undefined;\n  /** `featured` only: the names of what flows in (real sources only), shown as chips. */\n  flow?: readonly string[] | undefined;\n  /** `featured` only: who draws on it, shown after the flow (\"Every agent\"). */\n  flowTo?: string | undefined;\n}\n\n/** A piece on the stage: colored by its official `identity` (preferred) or by a chart `tone`. */\nexport type IntroItem = IntroItemBase &\n  (\n    | {\n        /** The piece's official identity; its icon is used unless `icon` is passed. */\n        identity: IntroIdentity;\n        tone?: undefined;\n        icon?: React.ReactNode;\n      }\n    | {\n        tone: IntroTone;\n        identity?: undefined;\n        /** The piece's official icon (an SVG component instance); sized by the stage. */\n        icon: React.ReactNode;\n      }\n  );\n\nexport interface IntroGroup {\n  id: string;\n  /** The group's small heading. Empty = none (the host's own frame already names it). */\n  label: string;\n  /**\n   * `feature` = big cards with diagrams; `compact` = tiles with a pitch; `chips` = a wrapping row of small\n   * pills (tile + name, the pitch rides the hover title) for a long list of things to try; `launcher` = an\n   * app-launcher grid of big tiles over their names (the pitch rides the hover title; `\"\"` = none), for a\n   * tools index or a product home.\n   */\n  size: \"feature\" | \"compact\" | \"chips\" | \"launcher\";\n  items: readonly IntroItem[];\n}\n\nexport interface IntroLinkProps {\n  item: IntroItem;\n  href: string;\n  className: string;\n  style?: React.CSSProperties | undefined;\n  children: React.ReactNode;\n  \"data-intro-item\": string;\n}\n\nexport interface IntroStageProps {\n  /** A short line above the title (a greeting). */\n  eyebrow?: React.ReactNode | undefined;\n  /**\n   * The title's first words, in the foreground color. Omitted (with no `eyebrow`, `accent` or `lead`) =\n   * no header at all: the groups alone, for a host that places one group as a part of a larger page\n   * (a launchpad widget showing only \"The studios\").\n   */\n  title?: string | undefined;\n  /** The title's last word(s), drawn in the brand gradient. */\n  accent?: string | undefined;\n  /** One line under the title. */\n  lead?: React.ReactNode | undefined;\n  groups: readonly IntroGroup[];\n  /** The host's link (router link). Default: a plain anchor. */\n  renderLink?: ((props: IntroLinkProps) => React.ReactNode) | undefined;\n  /** Called on every open (analytics, closing a dialog). */\n  onOpen?: ((item: IntroItem) => void) | undefined;\n  /** Entrance and hover motion. Default true (still off under reduced motion). */\n  motion?: boolean | undefined;\n  className?: string | undefined;\n  /** Rendered after the groups (the host's own next step). */\n  children?: React.ReactNode | undefined;\n}\n\nconst HEX = /^#[0-9a-f]{6}$/i;\n\n/** A CSS color for a tone (`hsl(var(--matrx-chart-N))`) or an identity's hex color. */\nfunction paint(c: IntroTone | string): string {\n  if (typeof c === \"number\") return `hsl(var(--matrx-chart-${c}))`;\n  if (!HEX.test(c)) throw new Error(`IntroStage: identity color must be #rrggbb, got \"${c}\"`);\n  return c;\n}\n\n/** The color an item wears: its identity's, else its tone's. */\nfunction itemColor(item: IntroItem): string {\n  return item.identity ? paint(item.identity.color) : paint(item.tone);\n}\n\n/** `c` at `pct`% over transparent. */\nconst soften = (c: string, pct: number) => `color-mix(in oklab, ${c} ${pct}%, transparent)`;\n\n/** The tile's fill: the color, deepening to the lower right so a white glyph stays crisp on every hue. */\nexport function introTileBackground(t: IntroTone | string): string {\n  const c = paint(t);\n  return `linear-gradient(145deg, color-mix(in oklab, ${c} 86%, white), ${c} 45%, color-mix(in oklab, ${c} 74%, black))`;\n}\n\nfunction itemIcon(item: IntroItem): React.ReactNode {\n  if (item.icon) return item.icon;\n  const Icon = item.identity?.icon;\n  return Icon ? <Icon /> : null;\n}\n\nfunction DefaultLink({ item, href, className, style, children, ...rest }: IntroLinkProps) {\n  return (\n    <a\n      href={href}\n      className={className}\n      style={style}\n      data-intro-item={rest[\"data-intro-item\"]}\n      {...(item.external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : {})}\n    >\n      {children}\n    </a>\n  );\n}\n\nfunction Tile({ item, size }: { item: IntroItem; size: \"feature\" | \"compact\" | \"chip\" | \"launcher\" }) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-intro-tile=\"\"\n      className={cn(\n        \"flex shrink-0 items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-inset ring-white/15\",\n        \"[&>svg]:shrink-0\",\n        size === \"feature\"\n          ? \"size-11 [&>svg]:size-5\"\n          : size === \"chip\"\n            ? \"size-6 rounded-md [&>svg]:size-3.5\"\n            : size === \"launcher\"\n              ? \"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\"\n              : \"size-10 [&>svg]:size-5\",\n      )}\n      style={{ background: introTileBackground(item.identity ? item.identity.color : item.tone) }}\n    >\n      {itemIcon(item)}\n    </span>\n  );\n}\n\n/** The feature card's diagram, drawn in the item's hue. Decorative. */\nfunction Diagram({ kind, color }: { kind: IntroDiagram; color: string }) {\n  const stroke = color;\n  const soft = soften(color, 22);\n  const common = { stroke, strokeWidth: 1.75, strokeLinecap: \"round\" as const };\n  return (\n    <svg\n      viewBox=\"0 0 200 72\"\n      aria-hidden=\"true\"\n      className=\"h-12 w-auto overflow-visible sm:h-20 transition-transform duration-300 ease-out motion-safe:group-hover:scale-105\"\n    >\n      {kind === \"single\" ? (\n        <g>\n          <circle cx=\"100\" cy=\"36\" r=\"30\" fill=\"none\" stroke={soft} strokeWidth=\"1.5\" strokeDasharray=\"3 5\" />\n          <circle cx=\"100\" cy=\"36\" r=\"19\" fill={soft} />\n          <circle cx=\"100\" cy=\"36\" r=\"11\" fill={stroke} />\n          <circle cx=\"129\" cy=\"20\" r=\"3.5\" fill={stroke} />\n        </g>\n      ) : null}\n      {kind === \"ensemble\" ? (\n        <g>\n          {[14, 36, 58].map((y) => (\n            <path key={y} d={`M70 36 C 100 36, 110 ${y}, 140 ${y}`} fill=\"none\" {...common} stroke={soft} />\n          ))}\n          <circle cx=\"58\" cy=\"36\" r=\"17\" fill={soft} />\n          <circle cx=\"58\" cy=\"36\" r=\"10\" fill={stroke} />\n          {[14, 36, 58].map((y) => (\n            <circle key={y} cx=\"148\" cy={y} r=\"7\" fill=\"none\" {...common} />\n          ))}\n        </g>\n      ) : null}\n      {kind === \"sequence\" ? (\n        <g>\n          {[30, 80, 130].map((x) => (\n            <path key={x} d={`M${x + 14} 36 H ${x + 36}`} fill=\"none\" {...common} stroke={soft} />\n          ))}\n          {[16, 66, 116, 166].map((x, i) => (\n            <rect\n              key={x}\n              x={x}\n              y=\"22\"\n              width=\"28\"\n              height=\"28\"\n              rx=\"8\"\n              fill={i === 0 ? stroke : \"none\"}\n              {...common}\n            />\n          ))}\n        </g>\n      ) : null}\n    </svg>\n  );\n}\n\nfunction Arrow({ external }: { external?: boolean | undefined }) {\n  const Glyph = external ? ExternalLinkIcon : ArrowRightIcon;\n  return (\n    <Glyph\n      data-intro-arrow={external ? \"external\" : \"internal\"}\n      className=\"size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-foreground\"\n    />\n  );\n}\n\n/** The featured card's picture: what flows in, one place, who draws on it. Decorative lines; the chips are real text. */\nfunction Flow({ item, color }: { item: IntroItem; color: string }) {\n  const soft = soften(color, 40);\n  const ys = [8, 26, 44, 62, 80];\n  return (\n    <span\n      data-intro-flow=\"\"\n      className=\"flex flex-col gap-3 border-t border-border px-4 py-4 sm:px-5 md:flex-row md:items-center md:gap-0\"\n      style={{ background: `linear-gradient(180deg, ${soften(color, 6)}, transparent)` }}\n    >\n      <span className=\"flex min-w-0 flex-wrap gap-1.5 md:max-w-[28rem] md:shrink-0\" data-intro-flow-sources=\"\">\n        {item.flow?.map((label) => (\n          <span\n            key={label}\n            className=\"inline-flex h-7 items-center rounded-full border px-3 text-xs font-medium text-foreground\"\n            style={{ borderColor: soften(color, 40), background: soften(color, 9) }}\n          >\n            {label}\n          </span>\n        ))}\n      </span>\n      <svg\n        viewBox=\"0 0 120 88\"\n        preserveAspectRatio=\"none\"\n        aria-hidden=\"true\"\n        className=\"hidden h-[88px] min-w-16 flex-1 overflow-visible md:block\"\n      >\n        {ys.map((y) => (\n          <path\n            key={y}\n            d={`M0 ${y} C 60 ${y}, 60 44, 120 44`}\n            fill=\"none\"\n            stroke={soft}\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            vectorEffect=\"non-scaling-stroke\"\n          />\n        ))}\n      </svg>\n      <span aria-hidden=\"true\" className=\"hidden size-7 shrink-0 items-center justify-center rounded-full md:flex\" style={{ background: soften(color, 22) }}>\n        <span className=\"size-3.5 rounded-full\" style={{ background: color }} />\n      </span>\n      <svg viewBox=\"0 0 24 28\" aria-hidden=\"true\" className=\"h-7 w-6 shrink-0 self-start md:hidden\">\n        <path d=\"M12 0 V 14\" fill=\"none\" stroke={soft} strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n        <circle cx=\"12\" cy=\"20\" r=\"7\" fill={soften(color, 22)} />\n        <circle cx=\"12\" cy=\"20\" r=\"3.5\" fill={color} />\n      </svg>\n      {item.flowTo ? (\n        <span\n          data-intro-flow-to=\"\"\n          className=\"inline-flex h-9 shrink-0 items-center self-start rounded-full border px-3.5 text-sm font-semibold text-foreground md:ml-2 md:self-auto\"\n          style={{ borderColor: soften(color, 55), background: soften(color, 12) }}\n        >\n          {item.flowTo}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n\nfunction rise(motion: boolean, index: number): { className: string; style?: React.CSSProperties } {\n  if (!motion) return { className: \"\" };\n  return {\n    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\",\n    // Capped: a long launcher index never waits more than ~0.6 s for its last tile.\n    style: { animationDelay: `${80 + Math.min(index, 12) * 45}ms` },\n  };\n}\n\nconst CARD =\n  \"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\";\n\n/** A `chips` pill: the card's border and hover, sized to its content. */\nconst CHIP =\n  \"group relative inline-flex min-w-0 rounded-full border border-border bg-card text-left outline-none transition-[border-color,box-shadow] duration-200 hover:border-[color-mix(in_oklab,var(--intro-color)_50%,transparent)] hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\";\n\n/**\n * A `compact` tile's column span on the 6-column desktop grid (2 columns = the old third) and the\n * 2-column tablet grid. A featured card takes the whole row; the tiles after it fill their last\n * row evenly (two left over = halves, one left over = the full row), so a featured card never\n * leaves a hole. A group with no featured card and a full last row gets exactly the old layout.\n */\nfunction tileSpan(group: IntroGroup, item: IntroItem): string {\n  if (item.featured) return \"sm:col-span-2 lg:col-span-6\";\n  const plain = group.items.filter((i) => !i.featured);\n  const idx = plain.indexOf(item);\n  const left = plain.length - idx; // tiles from here to the end\n  const desktopRest = plain.length % 3;\n  const tabletRest = plain.length % 2;\n  const lg =\n    desktopRest === 2 && left <= 2 ? \"lg:col-span-3\" : desktopRest === 1 && left === 1 ? \"lg:col-span-6\" : \"lg:col-span-2\";\n  const sm = tabletRest === 1 && left === 1 ? \"sm:col-span-2\" : \"\";\n  return cn(sm, lg);\n}\n\nexport function IntroStage({\n  eyebrow,\n  title,\n  accent,\n  lead,\n  groups,\n  renderLink,\n  onOpen,\n  motion = true,\n  className,\n  children,\n}: IntroStageProps) {\n  const Link = renderLink ?? DefaultLink;\n  const headed = Boolean(title || accent || eyebrow || lead);\n  let order = 0;\n  return (\n    <section className={cn(\"relative isolate w-full\", className)} data-intro-stage=\"\">\n      {/* The stage light: a soft glow behind the title, never under the cards' text. */}\n      {title || accent ? (\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-x-0 -top-24 -z-10 mx-auto h-72 max-w-3xl blur-3xl\"\n        style={{\n          background:\n            \"radial-gradient(50% 60% at 35% 50%, hsl(var(--primary) / 0.16), transparent 70%), radial-gradient(45% 55% at 68% 45%, hsl(var(--matrx-chart-7) / 0.14), transparent 70%)\",\n        }}\n      />\n      ) : null}\n      {headed ? (\n      <header className={cn(\"text-center\", rise(motion, 0).className)} style={rise(motion, 0).style}>\n        {eyebrow ? <p className=\"text-sm font-medium text-muted-foreground\">{eyebrow}</p> : null}\n        {title || accent ? (\n        <h1 className=\"mt-2 text-balance text-4xl font-semibold tracking-tight text-foreground sm:text-6xl\">\n          {title}\n          {accent ? (\n            <>\n              {\" \"}\n              <span\n                className=\"bg-clip-text text-transparent\"\n                style={{ backgroundImage: \"linear-gradient(95deg, hsl(var(--primary)), hsl(var(--matrx-chart-7)) 55%, hsl(var(--matrx-chart-9)))\" }}\n              >\n                {accent}\n              </span>\n            </>\n          ) : null}\n        </h1>\n        ) : null}\n        {lead ? <p className=\"mx-auto mt-4 max-w-xl text-balance text-base text-muted-foreground sm:text-lg\">{lead}</p> : null}\n      </header>\n      ) : null}\n\n      {groups.map((group, groupIndex) => (\n        <div\n          key={group.id}\n          className={groupIndex === 0 && !headed ? \"mt-0\" : \"mt-12 first-of-type:mt-10\"}\n          data-intro-group={group.id}\n        >\n          {group.label ? (\n            <h2 className=\"mb-4 text-xs font-semibold uppercase tracking-widest text-muted-foreground\">{group.label}</h2>\n          ) : null}\n          <ul\n            className={cn(\n              group.size === \"chips\"\n                ? \"flex flex-wrap gap-2\"\n                : group.size === \"launcher\"\n                  ? \"grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 lg:grid-cols-4 xl:grid-cols-5\"\n                  : \"grid grid-cols-1 gap-3\",\n              group.size === \"feature\" ? \"md:grid-cols-3 md:gap-4\" : group.size === \"compact\" ? \"sm:grid-cols-2 lg:grid-cols-6\" : \"\",\n            )}\n          >\n            {group.items.map((item) => {\n              const spanClass = group.size === \"compact\" ? tileSpan(group, item) : \"\";\n              order += 1;\n              const motionOf = rise(motion, order);\n              const color = itemColor(item);\n              const style = { [\"--intro-color\" as string]: color, ...motionOf.style } as React.CSSProperties;\n              const open = onOpen ? () => onOpen(item) : undefined;\n              if (group.size === \"chips\") {\n                return (\n                  <li key={item.id} className={cn(\"flex\", motionOf.className)} style={motionOf.style}>\n                    <Link item={item} href={item.href} className={CHIP} style={style} data-intro-item={item.id}>\n                      <span className=\"flex items-center gap-2 py-1 pl-1 pr-3\" onClick={open} title={item.pitch || undefined}>\n                        <Tile item={item} size=\"chip\" />\n                        <span className=\"text-sm font-medium text-foreground\">{item.name}</span>\n                      </span>\n                      {item.external ? <span className=\"sr-only\"> (opens in a new tab)</span> : null}\n                    </Link>\n                  </li>\n                );\n              }\n              if (group.size === \"launcher\") {\n                return (\n                  <li key={item.id} className={cn(\"flex\", motionOf.className)} style={motionOf.style}>\n                    <Link item={item} href={item.href} className={cn(CARD, \"w-full\")} style={style} data-intro-item={item.id}>\n                      <span\n                        className=\"relative flex w-full flex-col items-start gap-3 overflow-hidden rounded-2xl p-4 sm:gap-4 sm:p-5\"\n                        style={{ background: `radial-gradient(90% 70% at 0% 0%, ${soften(color, 10)}, transparent 70%)` }}\n                        onClick={open}\n                        title={item.pitch || item.name}\n                        data-intro-launcher=\"\"\n                      >\n                        <Tile item={item} size=\"launcher\" />\n                        <span className=\"line-clamp-2 pr-4 text-sm font-semibold leading-5 text-foreground sm:text-base\">\n                          {item.name}\n                        </span>\n                        <span className=\"absolute right-3 top-3 sm:right-4 sm:top-4\">\n                          <Arrow external={item.external} />\n                        </span>\n                      </span>\n                      {item.external ? <span className=\"sr-only\"> (opens in a new tab)</span> : null}\n                    </Link>\n                  </li>\n                );\n              }\n              const body =\n                group.size === \"feature\" ? (\n                  <span className=\"flex w-full flex-col overflow-hidden rounded-2xl\" onClick={open}>\n                    {item.diagram ? (\n                      <span\n                        className=\"flex h-20 items-center justify-center border-b border-border sm:h-32\"\n                        style={{ background: `radial-gradient(70% 110% at 50% 100%, ${soften(color, 18)}, transparent 72%), linear-gradient(180deg, ${soften(color, 5)}, transparent)` }}\n                      >\n                        <Diagram kind={item.diagram} color={color} />\n                      </span>\n                    ) : null}\n                    <span className=\"flex items-center gap-3.5 p-4 sm:p-5\">\n                      <Tile item={item} size=\"feature\" />\n                      <span className=\"min-w-0 flex-1\">\n                        <span className=\"block text-lg font-semibold leading-6 text-foreground\">{item.name}</span>\n                        <span className=\"mt-0.5 block text-balance text-sm leading-5 text-muted-foreground\">{item.pitch}</span>\n                      </span>\n                      <Arrow external={item.external} />\n                    </span>\n                  </span>\n                ) : item.featured ? (\n                  <span className=\"flex w-full flex-col overflow-hidden rounded-2xl\" onClick={open}>\n                    <span className=\"flex items-center gap-3.5 p-4 sm:p-5\">\n                      <Tile item={item} size=\"feature\" />\n                      <span className=\"min-w-0 flex-1\">\n                        <span className=\"block text-lg font-semibold leading-6 text-foreground\">{item.name}</span>\n                        <span className=\"mt-0.5 block text-balance text-sm leading-5 text-muted-foreground\">{item.pitch}</span>\n                      </span>\n                      <Arrow external={item.external} />\n                    </span>\n                    <Flow item={item} color={color} />\n                  </span>\n                ) : (\n                  <span className=\"flex w-full items-center gap-3.5 p-4\" onClick={open}>\n                    <Tile item={item} size=\"compact\" />\n                    <span className=\"min-w-0 flex-1\">\n                      <span className=\"block text-base font-semibold leading-5 text-foreground\">{item.name}</span>\n                      <span className=\"mt-0.5 block text-balance text-sm leading-5 text-muted-foreground\">{item.pitch}</span>\n                    </span>\n                    <Arrow external={item.external} />\n                  </span>\n                );\n              return (\n                <li key={item.id} className={cn(\"flex\", spanClass, motionOf.className)} style={motionOf.style}>\n                  <Link\n                    item={item}\n                    href={item.href}\n                    className={cn(CARD, \"w-full\")}\n                    style={style}\n                    data-intro-item={item.id}\n                  >\n                    {body}\n                    {item.external ? <span className=\"sr-only\"> (opens in a new tab)</span> : null}\n                  </Link>\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      ))}\n      {children}\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/item.cjs

@@ -598,14 +598,18 @@ var DropdownMenuSubTrigger = React6.forwardRef(({ className, inset, children, ..
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React6.forwardRef(({ className, container, surface = "default", sideOffset = 2, alignOffset = -4, collisionPadding, onFocusOutside, children, ...props }, ref) => {
+var DropdownMenuSubContent = React6.forwardRef(({ container, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(OpenDropdownMenuSubContent, { ref, ...props }) });
+});
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var OpenDropdownMenuSubContent = React6.forwardRef(({ className, surface = "default", sideOffset = 2, alignOffset = -4, collisionPadding, onFocusOutside, children, ...props }, ref) => {
   const [bottomClearance] = React6.useState(sharedBottomClearance);
   const padding = menuCollisionPadding(collisionPadding ?? 8, 0, bottomClearance);
   const nested = useNestedSubmenuPlacement(ref, padding);
   const keep = useSubmenuSurvivesParentPanelFocus(nested.ref, onFocusOutside);
   const edges = useMenuScrollEdges(keep.ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DropdownMenuPrimitive.SubContent,
     {
       ref: edges.ref,
@@ -619,9 +623,9 @@ var DropdownMenuSubContent = React6.forwardRef(({ className, container, surface
       ...props,
       children: nested.wrap(edges.wrap(children))
     }
-  ) });
+  );
 });
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+OpenDropdownMenuSubContent.displayName = "OpenDropdownMenuSubContent";
 function menuCollisionPadding(caller, top, bottom, fallback = 0) {
   const side = (key) => typeof caller === "number" ? caller : caller?.[key] ?? fallback;
   return { top: Math.max(side("top"), top), right: side("right"), bottom: Math.max(side("bottom"), bottom), left: side("left") };
@@ -650,12 +654,16 @@ function measureClearance(height) {
   probe.remove();
   return Number.isFinite(px) ? Math.ceil(px) : 0;
 }
-var DropdownMenuContent = React6.forwardRef(({ className, sideOffset = 4, container, surface = "default", children, onCloseAutoFocus, collisionPadding, ...props }, ref) => {
+var DropdownMenuContent = React6.forwardRef(({ container, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(OpenDropdownMenuContent, { ref, ...props }) });
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var OpenDropdownMenuContent = React6.forwardRef(({ className, sideOffset = 4, surface = "default", children, onCloseAutoFocus, collisionPadding, ...props }, ref) => {
   const [topClearance] = React6.useState(sharedTopClearance);
   const [bottomClearance] = React6.useState(sharedBottomClearance);
   const edges = useMenuScrollEdges(ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DropdownMenuPrimitive.Content,
     {
       ref: edges.ref,
@@ -675,9 +683,9 @@ var DropdownMenuContent = React6.forwardRef(({ className, sideOffset = 4, contai
       onCloseAutoFocus: keepMovedFocus(onCloseAutoFocus),
       children: edges.wrap(children)
     }
-  ) });
+  );
 });
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+OpenDropdownMenuContent.displayName = "OpenDropdownMenuContent";
 var DropdownMenuItem = React6.forwardRef(({ className, inset, tone, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   DropdownMenuPrimitive.Item,
   {