@medialane/ui 0.121.0 → 0.122.0

package/dist/components/portfolio-bento-tile.cjs

@@ -36,11 +36,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_link = __toESM(require("next/link"), 1);
 var import_lucide_react = require("lucide-react");
 var import_cn = require("../utils/cn.js");
-const SIZE_SPAN = {
-  default: "",
-  wide: "sm:col-span-2",
-  large: "sm:col-span-2 sm:row-span-2"
-};
 function PortfolioBentoTile({
   title,
   href,
@@ -52,8 +47,9 @@ function PortfolioBentoTile({
     "section",
     {
       className: (0, import_cn.cn)(
-        "rounded-2xl bg-foreground/[0.04] min-w-0 flex flex-col transition-colors hover:bg-foreground/[0.07]",
-        SIZE_SPAN[size],
+        "rounded-2xl bg-foreground/[0.04] min-w-0 transition-colors hover:bg-foreground/[0.07]",
+        "mb-4 break-inside-avoid",
+        size === "wide" && "[column-span:all]",
         className
       ),
       children: [
@@ -71,7 +67,7 @@ function PortfolioBentoTile({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 pb-4 flex-1 min-h-0", children })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 pb-4", children })
       ]
     }
   );

package/dist/components/portfolio-bento-tile.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-bento-tile.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioBentoTileProps {\n\n  title: string;\n\n  href: string;\n\n  /** Cell footprint in the bento-masonry grid (see PortfolioOverview):\n   * \"default\" = 1x1, \"wide\" = 2x1 (list-like content), \"large\" = 2x2 (the\n   * hero tile — the grid is sized so exactly one \"large\" tile per screen\n   * packs edge-to-edge with the rest, no gaps). */\n  size?: \"default\" | \"wide\" | \"large\";\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst SIZE_SPAN: Record<NonNullable<PortfolioBentoTileProps[\"size\"]>, string> = {\n  default: \"\",\n  wide: \"sm:col-span-2\",\n  large: \"sm:col-span-2 sm:row-span-2\",\n};\n\nexport function PortfolioBentoTile({\n  title,\n  href,\n  size = \"default\",\n  children,\n  className,\n}: PortfolioBentoTileProps) {\n  return (\n    <section\n      className={cn(\n        \"rounded-2xl bg-foreground/[0.04] min-w-0 flex flex-col transition-colors hover:bg-foreground/[0.07]\",\n        SIZE_SPAN[size],\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-3 px-4 pt-4 pb-3\">\n        <h2 className=\"text-sm font-black text-foreground tracking-tight\">\n          {title}\n        </h2>\n        <Link\n          href={href}\n          className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n        >\n          See all\n          <ArrowRight className=\"h-3 w-3\" />\n        </Link>\n      </div>\n      <div className=\"px-4 pb-4 flex-1 min-h-0\">{children}</div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CQ;AAzCR,kBAAiB;AACjB,0BAA2B;AAC3B,gBAAmB;AAiBnB,MAAM,YAA0E;AAAA,EAC9E,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AACT;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,UAAU,IAAI;AAAA,QACd;AAAA,MACF;AAAA,MAEA;AAAA,qDAAC,SAAI,WAAU,0DACb;AAAA,sDAAC,QAAG,WAAU,qDACX,iBACH;AAAA,UACA;AAAA,YAAC,YAAAA;AAAA,YAAA;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACX;AAAA;AAAA,gBAEC,4CAAC,kCAAW,WAAU,WAAU;AAAA;AAAA;AAAA,UAClC;AAAA,WACF;AAAA,QACA,4CAAC,SAAI,WAAU,4BAA4B,UAAS;AAAA;AAAA;AAAA,EACtD;AAEJ;","names":["Link"]}
+{"version":3,"sources":["../../src/components/portfolio-bento-tile.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioBentoTileProps {\n\n  title: string;\n\n  href: string;\n\n  /** \"default\" flows into whichever column is currently shortest (true\n   * masonry, via PortfolioOverview's CSS multi-column container) — each\n   * tile keeps its own natural height, nothing stretches to match a\n   * sibling. \"wide\" breaks out to full width instead (list-like content\n   * such as Activity, which reads better edge-to-edge than column-width). */\n  size?: \"default\" | \"wide\";\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function PortfolioBentoTile({\n  title,\n  href,\n  size = \"default\",\n  children,\n  className,\n}: PortfolioBentoTileProps) {\n  return (\n    <section\n      className={cn(\n        \"rounded-2xl bg-foreground/[0.04] min-w-0 transition-colors hover:bg-foreground/[0.07]\",\n        \"mb-4 break-inside-avoid\",\n        size === \"wide\" && \"[column-span:all]\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-3 px-4 pt-4 pb-3\">\n        <h2 className=\"text-sm font-black text-foreground tracking-tight\">\n          {title}\n        </h2>\n        <Link\n          href={href}\n          className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n        >\n          See all\n          <ArrowRight className=\"h-3 w-3\" />\n        </Link>\n      </div>\n      <div className=\"px-4 pb-4\">{children}</div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCQ;AArCR,kBAAiB;AACjB,0BAA2B;AAC3B,gBAAmB;AAkBZ,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,SAAS,UAAU;AAAA,QACnB;AAAA,MACF;AAAA,MAEA;AAAA,qDAAC,SAAI,WAAU,0DACb;AAAA,sDAAC,QAAG,WAAU,qDACX,iBACH;AAAA,UACA;AAAA,YAAC,YAAAA;AAAA,YAAA;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACX;AAAA;AAAA,gBAEC,4CAAC,kCAAW,WAAU,WAAU;AAAA;AAAA;AAAA,UAClC;AAAA,WACF;AAAA,QACA,4CAAC,SAAI,WAAU,aAAa,UAAS;AAAA;AAAA;AAAA,EACvC;AAEJ;","names":["Link"]}

package/dist/components/portfolio-bento-tile.d.cts

@@ -3,11 +3,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 interface PortfolioBentoTileProps {
     title: string;
     href: string;
-    /** Cell footprint in the bento-masonry grid (see PortfolioOverview):
-     * "default" = 1x1, "wide" = 2x1 (list-like content), "large" = 2x2 (the
-     * hero tile — the grid is sized so exactly one "large" tile per screen
-     * packs edge-to-edge with the rest, no gaps). */
-    size?: "default" | "wide" | "large";
+    /** "default" flows into whichever column is currently shortest (true
+     * masonry, via PortfolioOverview's CSS multi-column container) — each
+     * tile keeps its own natural height, nothing stretches to match a
+     * sibling. "wide" breaks out to full width instead (list-like content
+     * such as Activity, which reads better edge-to-edge than column-width). */
+    size?: "default" | "wide";
     children: React.ReactNode;
     className?: string;
 }

package/dist/components/portfolio-bento-tile.d.ts

@@ -3,11 +3,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 interface PortfolioBentoTileProps {
     title: string;
     href: string;
-    /** Cell footprint in the bento-masonry grid (see PortfolioOverview):
-     * "default" = 1x1, "wide" = 2x1 (list-like content), "large" = 2x2 (the
-     * hero tile — the grid is sized so exactly one "large" tile per screen
-     * packs edge-to-edge with the rest, no gaps). */
-    size?: "default" | "wide" | "large";
+    /** "default" flows into whichever column is currently shortest (true
+     * masonry, via PortfolioOverview's CSS multi-column container) — each
+     * tile keeps its own natural height, nothing stretches to match a
+     * sibling. "wide" breaks out to full width instead (list-like content
+     * such as Activity, which reads better edge-to-edge than column-width). */
+    size?: "default" | "wide";
     children: React.ReactNode;
     className?: string;
 }

package/dist/components/portfolio-bento-tile.js

@@ -3,11 +3,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
 import { cn } from "../utils/cn.js";
-const SIZE_SPAN = {
-  default: "",
-  wide: "sm:col-span-2",
-  large: "sm:col-span-2 sm:row-span-2"
-};
 function PortfolioBentoTile({
   title,
   href,
@@ -19,8 +14,9 @@ function PortfolioBentoTile({
     "section",
     {
       className: cn(
-        "rounded-2xl bg-foreground/[0.04] min-w-0 flex flex-col transition-colors hover:bg-foreground/[0.07]",
-        SIZE_SPAN[size],
+        "rounded-2xl bg-foreground/[0.04] min-w-0 transition-colors hover:bg-foreground/[0.07]",
+        "mb-4 break-inside-avoid",
+        size === "wide" && "[column-span:all]",
         className
       ),
       children: [
@@ -38,7 +34,7 @@ function PortfolioBentoTile({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 flex-1 min-h-0", children })
+        /* @__PURE__ */ jsx("div", { className: "px-4 pb-4", children })
       ]
     }
   );

package/dist/components/portfolio-bento-tile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-bento-tile.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioBentoTileProps {\n\n  title: string;\n\n  href: string;\n\n  /** Cell footprint in the bento-masonry grid (see PortfolioOverview):\n   * \"default\" = 1x1, \"wide\" = 2x1 (list-like content), \"large\" = 2x2 (the\n   * hero tile — the grid is sized so exactly one \"large\" tile per screen\n   * packs edge-to-edge with the rest, no gaps). */\n  size?: \"default\" | \"wide\" | \"large\";\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst SIZE_SPAN: Record<NonNullable<PortfolioBentoTileProps[\"size\"]>, string> = {\n  default: \"\",\n  wide: \"sm:col-span-2\",\n  large: \"sm:col-span-2 sm:row-span-2\",\n};\n\nexport function PortfolioBentoTile({\n  title,\n  href,\n  size = \"default\",\n  children,\n  className,\n}: PortfolioBentoTileProps) {\n  return (\n    <section\n      className={cn(\n        \"rounded-2xl bg-foreground/[0.04] min-w-0 flex flex-col transition-colors hover:bg-foreground/[0.07]\",\n        SIZE_SPAN[size],\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-3 px-4 pt-4 pb-3\">\n        <h2 className=\"text-sm font-black text-foreground tracking-tight\">\n          {title}\n        </h2>\n        <Link\n          href={href}\n          className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n        >\n          See all\n          <ArrowRight className=\"h-3 w-3\" />\n        </Link>\n      </div>\n      <div className=\"px-4 pb-4 flex-1 min-h-0\">{children}</div>\n    </section>\n  );\n}\n"],"mappings":";AA2CQ,cAGA,YAHA;AAzCR,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAiBnB,MAAM,YAA0E;AAAA,EAC9E,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AACT;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,UAAU,IAAI;AAAA,QACd;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,0DACb;AAAA,8BAAC,QAAG,WAAU,qDACX,iBACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACX;AAAA;AAAA,gBAEC,oBAAC,cAAW,WAAU,WAAU;AAAA;AAAA;AAAA,UAClC;AAAA,WACF;AAAA,QACA,oBAAC,SAAI,WAAU,4BAA4B,UAAS;AAAA;AAAA;AAAA,EACtD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/portfolio-bento-tile.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioBentoTileProps {\n\n  title: string;\n\n  href: string;\n\n  /** \"default\" flows into whichever column is currently shortest (true\n   * masonry, via PortfolioOverview's CSS multi-column container) — each\n   * tile keeps its own natural height, nothing stretches to match a\n   * sibling. \"wide\" breaks out to full width instead (list-like content\n   * such as Activity, which reads better edge-to-edge than column-width). */\n  size?: \"default\" | \"wide\";\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function PortfolioBentoTile({\n  title,\n  href,\n  size = \"default\",\n  children,\n  className,\n}: PortfolioBentoTileProps) {\n  return (\n    <section\n      className={cn(\n        \"rounded-2xl bg-foreground/[0.04] min-w-0 transition-colors hover:bg-foreground/[0.07]\",\n        \"mb-4 break-inside-avoid\",\n        size === \"wide\" && \"[column-span:all]\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-3 px-4 pt-4 pb-3\">\n        <h2 className=\"text-sm font-black text-foreground tracking-tight\">\n          {title}\n        </h2>\n        <Link\n          href={href}\n          className=\"inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors\"\n        >\n          See all\n          <ArrowRight className=\"h-3 w-3\" />\n        </Link>\n      </div>\n      <div className=\"px-4 pb-4\">{children}</div>\n    </section>\n  );\n}\n"],"mappings":";AAuCQ,cAGA,YAHA;AArCR,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAkBZ,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,SAAS,UAAU;AAAA,QACnB;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,0DACb;AAAA,8BAAC,QAAG,WAAU,qDACX,iBACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACX;AAAA;AAAA,gBAEC,oBAAC,cAAW,WAAU,WAAU;AAAA;AAAA;AAAA,UAClC;AAAA,WACF;AAAA,QACA,oBAAC,SAAI,WAAU,aAAa,UAAS;AAAA;AAAA;AAAA,EACvC;AAEJ;","names":[]}

package/dist/components/portfolio-overview.cjs

@@ -39,12 +39,13 @@ function PortfolioOverview({
     "div",
     {
       className: (0, import_cn.cn)(
-        // Bento-masonry: a fixed 3-column grid (not auto-fit) so each
-        // tile's declared col/row span composes into a gapless pack via
-        // `dense` auto-flow — auto-fit's variable column count can't
-        // support that. Row height is fixed so a "large" (2x2) tile lines
-        // up exactly with two stacked "default" (1x1) tiles beside it.
-        "grid gap-4 grid-flow-dense auto-rows-[minmax(220px,auto)] grid-cols-1 sm:grid-cols-3",
+        // True masonry: a CSS multi-column container. Each tile keeps its
+        // own natural height and flows into whichever column is currently
+        // shortest — unlike a grid, nothing stretches to match a taller
+        // sibling in the same row, which is what real (unevenly-sized)
+        // portfolio content needs. "wide" tiles opt out via column-span:
+        // all (set on PortfolioBentoTile itself, not here).
+        "columns-1 sm:columns-2 lg:columns-3 gap-4",
         className
       ),
       children: populatedTiles.map((tile) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/components/portfolio-overview.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { PortfolioBentoTile, type PortfolioBentoTileProps } from \"./portfolio-bento-tile.js\";\n\nexport interface PortfolioBentoTileConfig {\n  key: string;\n  title: string;\n  href: string;\n  size?: PortfolioBentoTileProps[\"size\"];\n\n  isEmpty?: boolean;\n  content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n  tiles: PortfolioBentoTileConfig[];\n\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\nexport function PortfolioOverview({\n  tiles,\n  isEmpty,\n  emptyState,\n  className,\n}: PortfolioOverviewProps) {\n  if (isEmpty) {\n    return <div className={className}>{emptyState}</div>;\n  }\n\n  const populatedTiles = tiles.filter((t) => !t.isEmpty);\n\n  return (\n    <div\n      className={cn(\n        // Bento-masonry: a fixed 3-column grid (not auto-fit) so each\n        // tile's declared col/row span composes into a gapless pack via\n        // `dense` auto-flow — auto-fit's variable column count can't\n        // support that. Row height is fixed so a \"large\" (2x2) tile lines\n        // up exactly with two stacked \"default\" (1x1) tiles beside it.\n        \"grid gap-4 grid-flow-dense auto-rows-[minmax(220px,auto)] grid-cols-1 sm:grid-cols-3\",\n        className,\n      )}\n    >\n      {populatedTiles.map((tile) => (\n        <PortfolioBentoTile\n          key={tile.key}\n          title={tile.title}\n          href={tile.href}\n          size={tile.size}\n        >\n          {tile.content}\n        </PortfolioBentoTile>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BW;AA5BX,gBAAmB;AACnB,kCAAiE;AAoB1D,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,MAAI,SAAS;AACX,WAAO,4CAAC,SAAI,WAAuB,sBAAW;AAAA,EAChD;AAEA,QAAM,iBAAiB,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,yBAAe,IAAI,CAAC,SACnB;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,UACX,MAAM,KAAK;AAAA,UAEV,eAAK;AAAA;AAAA,QALD,KAAK;AAAA,MAMZ,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { PortfolioBentoTile, type PortfolioBentoTileProps } from \"./portfolio-bento-tile.js\";\n\nexport interface PortfolioBentoTileConfig {\n  key: string;\n  title: string;\n  href: string;\n  size?: PortfolioBentoTileProps[\"size\"];\n\n  isEmpty?: boolean;\n  content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n  tiles: PortfolioBentoTileConfig[];\n\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\nexport function PortfolioOverview({\n  tiles,\n  isEmpty,\n  emptyState,\n  className,\n}: PortfolioOverviewProps) {\n  if (isEmpty) {\n    return <div className={className}>{emptyState}</div>;\n  }\n\n  const populatedTiles = tiles.filter((t) => !t.isEmpty);\n\n  return (\n    <div\n      className={cn(\n        // True masonry: a CSS multi-column container. Each tile keeps its\n        // own natural height and flows into whichever column is currently\n        // shortest — unlike a grid, nothing stretches to match a taller\n        // sibling in the same row, which is what real (unevenly-sized)\n        // portfolio content needs. \"wide\" tiles opt out via column-span:\n        // all (set on PortfolioBentoTile itself, not here).\n        \"columns-1 sm:columns-2 lg:columns-3 gap-4\",\n        className,\n      )}\n    >\n      {populatedTiles.map((tile) => (\n        <PortfolioBentoTile\n          key={tile.key}\n          title={tile.title}\n          href={tile.href}\n          size={tile.size}\n        >\n          {tile.content}\n        </PortfolioBentoTile>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BW;AA5BX,gBAAmB;AACnB,kCAAiE;AAoB1D,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,MAAI,SAAS;AACX,WAAO,4CAAC,SAAI,WAAuB,sBAAW;AAAA,EAChD;AAEA,QAAM,iBAAiB,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,yBAAe,IAAI,CAAC,SACnB;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,UACX,MAAM,KAAK;AAAA,UAEV,eAAK;AAAA;AAAA,QALD,KAAK;AAAA,MAMZ,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/portfolio-overview.js

@@ -16,12 +16,13 @@ function PortfolioOverview({
     "div",
     {
       className: cn(
-        // Bento-masonry: a fixed 3-column grid (not auto-fit) so each
-        // tile's declared col/row span composes into a gapless pack via
-        // `dense` auto-flow — auto-fit's variable column count can't
-        // support that. Row height is fixed so a "large" (2x2) tile lines
-        // up exactly with two stacked "default" (1x1) tiles beside it.
-        "grid gap-4 grid-flow-dense auto-rows-[minmax(220px,auto)] grid-cols-1 sm:grid-cols-3",
+        // True masonry: a CSS multi-column container. Each tile keeps its
+        // own natural height and flows into whichever column is currently
+        // shortest — unlike a grid, nothing stretches to match a taller
+        // sibling in the same row, which is what real (unevenly-sized)
+        // portfolio content needs. "wide" tiles opt out via column-span:
+        // all (set on PortfolioBentoTile itself, not here).
+        "columns-1 sm:columns-2 lg:columns-3 gap-4",
         className
       ),
       children: populatedTiles.map((tile) => /* @__PURE__ */ jsx(

package/dist/components/portfolio-overview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { PortfolioBentoTile, type PortfolioBentoTileProps } from \"./portfolio-bento-tile.js\";\n\nexport interface PortfolioBentoTileConfig {\n  key: string;\n  title: string;\n  href: string;\n  size?: PortfolioBentoTileProps[\"size\"];\n\n  isEmpty?: boolean;\n  content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n  tiles: PortfolioBentoTileConfig[];\n\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\nexport function PortfolioOverview({\n  tiles,\n  isEmpty,\n  emptyState,\n  className,\n}: PortfolioOverviewProps) {\n  if (isEmpty) {\n    return <div className={className}>{emptyState}</div>;\n  }\n\n  const populatedTiles = tiles.filter((t) => !t.isEmpty);\n\n  return (\n    <div\n      className={cn(\n        // Bento-masonry: a fixed 3-column grid (not auto-fit) so each\n        // tile's declared col/row span composes into a gapless pack via\n        // `dense` auto-flow — auto-fit's variable column count can't\n        // support that. Row height is fixed so a \"large\" (2x2) tile lines\n        // up exactly with two stacked \"default\" (1x1) tiles beside it.\n        \"grid gap-4 grid-flow-dense auto-rows-[minmax(220px,auto)] grid-cols-1 sm:grid-cols-3\",\n        className,\n      )}\n    >\n      {populatedTiles.map((tile) => (\n        <PortfolioBentoTile\n          key={tile.key}\n          title={tile.title}\n          href={tile.href}\n          size={tile.size}\n        >\n          {tile.content}\n        </PortfolioBentoTile>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AA8BW;AA5BX,SAAS,UAAU;AACnB,SAAS,0BAAwD;AAoB1D,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,MAAI,SAAS;AACX,WAAO,oBAAC,SAAI,WAAuB,sBAAW;AAAA,EAChD;AAEA,QAAM,iBAAiB,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,yBAAe,IAAI,CAAC,SACnB;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,UACX,MAAM,KAAK;AAAA,UAEV,eAAK;AAAA;AAAA,QALD,KAAK;AAAA,MAMZ,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/portfolio-overview.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { PortfolioBentoTile, type PortfolioBentoTileProps } from \"./portfolio-bento-tile.js\";\n\nexport interface PortfolioBentoTileConfig {\n  key: string;\n  title: string;\n  href: string;\n  size?: PortfolioBentoTileProps[\"size\"];\n\n  isEmpty?: boolean;\n  content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n  tiles: PortfolioBentoTileConfig[];\n\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\nexport function PortfolioOverview({\n  tiles,\n  isEmpty,\n  emptyState,\n  className,\n}: PortfolioOverviewProps) {\n  if (isEmpty) {\n    return <div className={className}>{emptyState}</div>;\n  }\n\n  const populatedTiles = tiles.filter((t) => !t.isEmpty);\n\n  return (\n    <div\n      className={cn(\n        // True masonry: a CSS multi-column container. Each tile keeps its\n        // own natural height and flows into whichever column is currently\n        // shortest — unlike a grid, nothing stretches to match a taller\n        // sibling in the same row, which is what real (unevenly-sized)\n        // portfolio content needs. \"wide\" tiles opt out via column-span:\n        // all (set on PortfolioBentoTile itself, not here).\n        \"columns-1 sm:columns-2 lg:columns-3 gap-4\",\n        className,\n      )}\n    >\n      {populatedTiles.map((tile) => (\n        <PortfolioBentoTile\n          key={tile.key}\n          title={tile.title}\n          href={tile.href}\n          size={tile.size}\n        >\n          {tile.content}\n        </PortfolioBentoTile>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AA8BW;AA5BX,SAAS,UAAU;AACnB,SAAS,0BAAwD;AAoB1D,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,MAAI,SAAS;AACX,WAAO,oBAAC,SAAI,WAAuB,sBAAW;AAAA,EAChD;AAEA,QAAM,iBAAiB,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,yBAAe,IAAI,CAAC,SACnB;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,KAAK;AAAA,UACZ,MAAM,KAAK;AAAA,UACX,MAAM,KAAK;AAAA,UAEV,eAAK;AAAA;AAAA,QALD,KAAK;AAAA,MAMZ,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medialane/ui",
-  "version": "0.121.0",
+  "version": "0.122.0",
   "description": "Shared UI components for Medialane apps",
   "type": "module",
   "sideEffects": false,