@medialane/ui 0.94.3 → 0.94.4

package/dist/components/portfolio-chip-filter.cjs

@@ -35,9 +35,9 @@ module.exports = __toCommonJS(portfolio_chip_filter_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_link = __toESM(require("next/link"), 1);
 var import_cn = require("../utils/cn.js");
-const CHIP_CLASS = "shrink-0 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors";
-const INACTIVE_CLASS = "bg-muted text-muted-foreground hover:text-foreground";
-const ACTIVE_CLASS = "bg-primary text-primary-foreground font-medium";
+const CHIP_CLASS = "shrink-0 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors border";
+const INACTIVE_CLASS = "bg-muted border-border/60 text-muted-foreground hover:text-foreground hover:border-border";
+const ACTIVE_CLASS = "bg-primary border-primary text-primary-foreground font-medium";
 function PortfolioChipFilter({
   options,
   value,

package/dist/components/portfolio-chip-filter.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-chip-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioChipFilterOption {\n  key: string;\n  label: string;\n  /**\n   * When set, this chip is a direct navigation link rather than an in-page\n   * filter. It's marked active when `href` equals the current `value`\n   * (pass the current pathname as `value` for a location-aware nav bar).\n   */\n  href?: string;\n}\n\nexport interface PortfolioChipFilterProps {\n  options: PortfolioChipFilterOption[];\n  /** Selected filter key, or the current pathname when used for navigation. */\n  value: string;\n  onChange: (key: string) => void;\n  /** Suppress the auto-injected \"All\" chip — for pure navigation bars where every option already has an href. Default true. */\n  showAll?: boolean;\n  className?: string;\n}\n\nconst CHIP_CLASS =\n  \"shrink-0 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors\";\nconst INACTIVE_CLASS = \"bg-muted text-muted-foreground hover:text-foreground\";\nconst ACTIVE_CLASS = \"bg-primary text-primary-foreground font-medium\";\n\n/**\n * Horizontally-scrollable chip row — the portfolio section's sole\n * navigation mechanism (Instagram/YouTube-style chips), used both as an\n * in-page filter (chips with no `href`, toggled via `onChange`) and as\n * cross-page navigation (chips with `href`, highlighted active by matching\n * `value` against the current pathname).\n */\nexport function PortfolioChipFilter({\n  options,\n  value,\n  onChange,\n  showAll = true,\n  className,\n}: PortfolioChipFilterProps) {\n  const items = showAll ? [{ key: \"all\", label: \"All\" }, ...options] : options;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-1.5 overflow-x-auto scrollbar-hide -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8\",\n        className,\n      )}\n    >\n      {items.map((item) =>\n        item.href ? (\n          <Link\n            key={item.key}\n            href={item.href}\n            className={cn(CHIP_CLASS, item.href === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </Link>\n        ) : (\n          <button\n            key={item.key}\n            type=\"button\"\n            onClick={() => onChange(item.key)}\n            className={cn(CHIP_CLASS, item.key === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </button>\n        ),\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDU;AAtDV,kBAAiB;AACjB,gBAAmB;AAuBnB,MAAM,aACJ;AACF,MAAM,iBAAiB;AACvB,MAAM,eAAe;AASd,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAA6B;AAC3B,QAAM,QAAQ,UAAU,CAAC,EAAE,KAAK,OAAO,OAAO,MAAM,GAAG,GAAG,OAAO,IAAI;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,gBAAM;AAAA,QAAI,CAAC,SACV,KAAK,OACH;AAAA,UAAC,YAAAA;AAAA,UAAA;AAAA,YAEC,MAAM,KAAK;AAAA,YACX,eAAW,cAAG,YAAY,KAAK,SAAS,QAAQ,eAAe,cAAc;AAAA,YAE5E,eAAK;AAAA;AAAA,UAJD,KAAK;AAAA,QAKZ,IAEA;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,SAAS,KAAK,GAAG;AAAA,YAChC,eAAW,cAAG,YAAY,KAAK,QAAQ,QAAQ,eAAe,cAAc;AAAA,YAE3E,eAAK;AAAA;AAAA,UALD,KAAK;AAAA,QAMZ;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":["Link"]}
+{"version":3,"sources":["../../src/components/portfolio-chip-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioChipFilterOption {\n  key: string;\n  label: string;\n  /**\n   * When set, this chip is a direct navigation link rather than an in-page\n   * filter. It's marked active when `href` equals the current `value`\n   * (pass the current pathname as `value` for a location-aware nav bar).\n   */\n  href?: string;\n}\n\nexport interface PortfolioChipFilterProps {\n  options: PortfolioChipFilterOption[];\n  /** Selected filter key, or the current pathname when used for navigation. */\n  value: string;\n  onChange: (key: string) => void;\n  /** Suppress the auto-injected \"All\" chip — for pure navigation bars where every option already has an href. Default true. */\n  showAll?: boolean;\n  className?: string;\n}\n\nconst CHIP_CLASS =\n  \"shrink-0 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors border\";\nconst INACTIVE_CLASS = \"bg-muted border-border/60 text-muted-foreground hover:text-foreground hover:border-border\";\nconst ACTIVE_CLASS = \"bg-primary border-primary text-primary-foreground font-medium\";\n\n/**\n * Horizontally-scrollable chip row — the portfolio section's sole\n * navigation mechanism (Instagram/YouTube-style chips), used both as an\n * in-page filter (chips with no `href`, toggled via `onChange`) and as\n * cross-page navigation (chips with `href`, highlighted active by matching\n * `value` against the current pathname).\n */\nexport function PortfolioChipFilter({\n  options,\n  value,\n  onChange,\n  showAll = true,\n  className,\n}: PortfolioChipFilterProps) {\n  const items = showAll ? [{ key: \"all\", label: \"All\" }, ...options] : options;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-1.5 overflow-x-auto scrollbar-hide -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8\",\n        className,\n      )}\n    >\n      {items.map((item) =>\n        item.href ? (\n          <Link\n            key={item.key}\n            href={item.href}\n            className={cn(CHIP_CLASS, item.href === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </Link>\n        ) : (\n          <button\n            key={item.key}\n            type=\"button\"\n            onClick={() => onChange(item.key)}\n            className={cn(CHIP_CLASS, item.key === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </button>\n        ),\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDU;AAtDV,kBAAiB;AACjB,gBAAmB;AAuBnB,MAAM,aACJ;AACF,MAAM,iBAAiB;AACvB,MAAM,eAAe;AASd,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAA6B;AAC3B,QAAM,QAAQ,UAAU,CAAC,EAAE,KAAK,OAAO,OAAO,MAAM,GAAG,GAAG,OAAO,IAAI;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,gBAAM;AAAA,QAAI,CAAC,SACV,KAAK,OACH;AAAA,UAAC,YAAAA;AAAA,UAAA;AAAA,YAEC,MAAM,KAAK;AAAA,YACX,eAAW,cAAG,YAAY,KAAK,SAAS,QAAQ,eAAe,cAAc;AAAA,YAE5E,eAAK;AAAA;AAAA,UAJD,KAAK;AAAA,QAKZ,IAEA;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,SAAS,KAAK,GAAG;AAAA,YAChC,eAAW,cAAG,YAAY,KAAK,QAAQ,QAAQ,eAAe,cAAc;AAAA,YAE3E,eAAK;AAAA;AAAA,UALD,KAAK;AAAA,QAMZ;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":["Link"]}

package/dist/components/portfolio-chip-filter.js

@@ -2,9 +2,9 @@
 import { jsx } from "react/jsx-runtime";
 import Link from "next/link";
 import { cn } from "../utils/cn.js";
-const CHIP_CLASS = "shrink-0 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors";
-const INACTIVE_CLASS = "bg-muted text-muted-foreground hover:text-foreground";
-const ACTIVE_CLASS = "bg-primary text-primary-foreground font-medium";
+const CHIP_CLASS = "shrink-0 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors border";
+const INACTIVE_CLASS = "bg-muted border-border/60 text-muted-foreground hover:text-foreground hover:border-border";
+const ACTIVE_CLASS = "bg-primary border-primary text-primary-foreground font-medium";
 function PortfolioChipFilter({
   options,
   value,

package/dist/components/portfolio-chip-filter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/portfolio-chip-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioChipFilterOption {\n  key: string;\n  label: string;\n  /**\n   * When set, this chip is a direct navigation link rather than an in-page\n   * filter. It's marked active when `href` equals the current `value`\n   * (pass the current pathname as `value` for a location-aware nav bar).\n   */\n  href?: string;\n}\n\nexport interface PortfolioChipFilterProps {\n  options: PortfolioChipFilterOption[];\n  /** Selected filter key, or the current pathname when used for navigation. */\n  value: string;\n  onChange: (key: string) => void;\n  /** Suppress the auto-injected \"All\" chip — for pure navigation bars where every option already has an href. Default true. */\n  showAll?: boolean;\n  className?: string;\n}\n\nconst CHIP_CLASS =\n  \"shrink-0 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors\";\nconst INACTIVE_CLASS = \"bg-muted text-muted-foreground hover:text-foreground\";\nconst ACTIVE_CLASS = \"bg-primary text-primary-foreground font-medium\";\n\n/**\n * Horizontally-scrollable chip row — the portfolio section's sole\n * navigation mechanism (Instagram/YouTube-style chips), used both as an\n * in-page filter (chips with no `href`, toggled via `onChange`) and as\n * cross-page navigation (chips with `href`, highlighted active by matching\n * `value` against the current pathname).\n */\nexport function PortfolioChipFilter({\n  options,\n  value,\n  onChange,\n  showAll = true,\n  className,\n}: PortfolioChipFilterProps) {\n  const items = showAll ? [{ key: \"all\", label: \"All\" }, ...options] : options;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-1.5 overflow-x-auto scrollbar-hide -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8\",\n        className,\n      )}\n    >\n      {items.map((item) =>\n        item.href ? (\n          <Link\n            key={item.key}\n            href={item.href}\n            className={cn(CHIP_CLASS, item.href === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </Link>\n        ) : (\n          <button\n            key={item.key}\n            type=\"button\"\n            onClick={() => onChange(item.key)}\n            className={cn(CHIP_CLASS, item.key === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </button>\n        ),\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAwDU;AAtDV,OAAO,UAAU;AACjB,SAAS,UAAU;AAuBnB,MAAM,aACJ;AACF,MAAM,iBAAiB;AACvB,MAAM,eAAe;AASd,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAA6B;AAC3B,QAAM,QAAQ,UAAU,CAAC,EAAE,KAAK,OAAO,OAAO,MAAM,GAAG,GAAG,OAAO,IAAI;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,gBAAM;AAAA,QAAI,CAAC,SACV,KAAK,OACH;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM,KAAK;AAAA,YACX,WAAW,GAAG,YAAY,KAAK,SAAS,QAAQ,eAAe,cAAc;AAAA,YAE5E,eAAK;AAAA;AAAA,UAJD,KAAK;AAAA,QAKZ,IAEA;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,SAAS,KAAK,GAAG;AAAA,YAChC,WAAW,GAAG,YAAY,KAAK,QAAQ,QAAQ,eAAe,cAAc;AAAA,YAE3E,eAAK;AAAA;AAAA,UALD,KAAK;AAAA,QAMZ;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/portfolio-chip-filter.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface PortfolioChipFilterOption {\n  key: string;\n  label: string;\n  /**\n   * When set, this chip is a direct navigation link rather than an in-page\n   * filter. It's marked active when `href` equals the current `value`\n   * (pass the current pathname as `value` for a location-aware nav bar).\n   */\n  href?: string;\n}\n\nexport interface PortfolioChipFilterProps {\n  options: PortfolioChipFilterOption[];\n  /** Selected filter key, or the current pathname when used for navigation. */\n  value: string;\n  onChange: (key: string) => void;\n  /** Suppress the auto-injected \"All\" chip — for pure navigation bars where every option already has an href. Default true. */\n  showAll?: boolean;\n  className?: string;\n}\n\nconst CHIP_CLASS =\n  \"shrink-0 rounded-full px-3.5 py-1.5 text-[13px] whitespace-nowrap transition-colors border\";\nconst INACTIVE_CLASS = \"bg-muted border-border/60 text-muted-foreground hover:text-foreground hover:border-border\";\nconst ACTIVE_CLASS = \"bg-primary border-primary text-primary-foreground font-medium\";\n\n/**\n * Horizontally-scrollable chip row — the portfolio section's sole\n * navigation mechanism (Instagram/YouTube-style chips), used both as an\n * in-page filter (chips with no `href`, toggled via `onChange`) and as\n * cross-page navigation (chips with `href`, highlighted active by matching\n * `value` against the current pathname).\n */\nexport function PortfolioChipFilter({\n  options,\n  value,\n  onChange,\n  showAll = true,\n  className,\n}: PortfolioChipFilterProps) {\n  const items = showAll ? [{ key: \"all\", label: \"All\" }, ...options] : options;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-1.5 overflow-x-auto scrollbar-hide -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8\",\n        className,\n      )}\n    >\n      {items.map((item) =>\n        item.href ? (\n          <Link\n            key={item.key}\n            href={item.href}\n            className={cn(CHIP_CLASS, item.href === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </Link>\n        ) : (\n          <button\n            key={item.key}\n            type=\"button\"\n            onClick={() => onChange(item.key)}\n            className={cn(CHIP_CLASS, item.key === value ? ACTIVE_CLASS : INACTIVE_CLASS)}\n          >\n            {item.label}\n          </button>\n        ),\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAwDU;AAtDV,OAAO,UAAU;AACjB,SAAS,UAAU;AAuBnB,MAAM,aACJ;AACF,MAAM,iBAAiB;AACvB,MAAM,eAAe;AASd,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAA6B;AAC3B,QAAM,QAAQ,UAAU,CAAC,EAAE,KAAK,OAAO,OAAO,MAAM,GAAG,GAAG,OAAO,IAAI;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,gBAAM;AAAA,QAAI,CAAC,SACV,KAAK,OACH;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM,KAAK;AAAA,YACX,WAAW,GAAG,YAAY,KAAK,SAAS,QAAQ,eAAe,cAAc;AAAA,YAE5E,eAAK;AAAA;AAAA,UAJD,KAAK;AAAA,QAKZ,IAEA;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,SAAS,KAAK,GAAG;AAAA,YAChC,WAAW,GAAG,YAAY,KAAK,QAAQ,QAAQ,eAAe,cAAc;AAAA,YAE3E,eAAK;AAAA;AAAA,UALD,KAAK;AAAA,QAMZ;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/portfolio-overview.cjs

@@ -38,7 +38,10 @@ function PortfolioOverview({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: (0, import_cn.cn)("grid gap-4 grid-cols-[repeat(auto-fit,minmax(320px,1fr))]", className),
+      className: (0, import_cn.cn)(
+        "grid gap-4 items-start grid-cols-[repeat(auto-fit,minmax(320px,1fr))]",
+        className
+      ),
       children: populatedTiles.map((tile) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_portfolio_bento_tile.PortfolioBentoTile,
         {

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  /** Tiles with nothing to show are omitted entirely, not rendered empty. */\n  isEmpty?: boolean;\n  content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n  tiles: PortfolioBentoTileConfig[];\n  /** First-run state across the whole portfolio (zero holdings, zero activity). */\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Portfolio landing page: a content-first dashboard. Each tile is a fast\n * preview of one section, expanding into its full subpage via \"See all\".\n * Navigation across portfolio sections lives one level up, in the shared\n * portfolio chip bar rendered by the app's layout on every page — this\n * component is pure tile layout, nothing else.\n *\n * Uses a CSS grid with `auto-fit` tracks rather than multi-column masonry:\n * masonry's fixed column tracks leave dead blank space when few tiles are\n * populated (a real, reproduced failure mode with sparse content). `auto-fit`\n * collapses empty tracks and stretches present tiles to fill the freed\n * width, so the layout always uses the full screen regardless of how many\n * tiles are populated.\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(\"grid gap-4 grid-cols-[repeat(auto-fit,minmax(320px,1fr))]\", className)}\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;AA4CW;AA1CX,gBAAmB;AACnB,kCAAiE;AAkC1D,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,cAAG,6DAA6D,SAAS;AAAA,MAEnF,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  /** Tiles with nothing to show are omitted entirely, not rendered empty. */\n  isEmpty?: boolean;\n  content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n  tiles: PortfolioBentoTileConfig[];\n  /** First-run state across the whole portfolio (zero holdings, zero activity). */\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Portfolio landing page: a content-first dashboard. Each tile is a fast\n * preview of one section, expanding into its full subpage via \"See all\".\n * Navigation across portfolio sections lives one level up, in the shared\n * portfolio chip bar rendered by the app's layout on every page — this\n * component is pure tile layout, nothing else.\n *\n * Uses a CSS grid with `auto-fit` tracks rather than multi-column masonry:\n * masonry's fixed column tracks leave dead blank space when few tiles are\n * populated (a real, reproduced failure mode with sparse content). `auto-fit`\n * collapses empty tracks and stretches present tiles to fill the freed\n * width, so the layout always uses the full screen regardless of how many\n * tiles are populated. `items-start` overrides grid's default row-stretch —\n * without it, a short tile sharing a row with a tall one gets stretched to\n * match, leaving dead space inside its own card (also reproduced).\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        \"grid gap-4 items-start grid-cols-[repeat(auto-fit,minmax(320px,1fr))]\",\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;AA8CW;AA5CX,gBAAmB;AACnB,kCAAiE;AAoC1D,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,QACT;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.d.cts

@@ -29,7 +29,9 @@ interface PortfolioOverviewProps {
  * populated (a real, reproduced failure mode with sparse content). `auto-fit`
  * collapses empty tracks and stretches present tiles to fill the freed
  * width, so the layout always uses the full screen regardless of how many
- * tiles are populated.
+ * tiles are populated. `items-start` overrides grid's default row-stretch —
+ * without it, a short tile sharing a row with a tall one gets stretched to
+ * match, leaving dead space inside its own card (also reproduced).
  */
 declare function PortfolioOverview({ tiles, isEmpty, emptyState, className, }: PortfolioOverviewProps): react_jsx_runtime.JSX.Element;
 

package/dist/components/portfolio-overview.d.ts

@@ -29,7 +29,9 @@ interface PortfolioOverviewProps {
  * populated (a real, reproduced failure mode with sparse content). `auto-fit`
  * collapses empty tracks and stretches present tiles to fill the freed
  * width, so the layout always uses the full screen regardless of how many
- * tiles are populated.
+ * tiles are populated. `items-start` overrides grid's default row-stretch —
+ * without it, a short tile sharing a row with a tall one gets stretched to
+ * match, leaving dead space inside its own card (also reproduced).
  */
 declare function PortfolioOverview({ tiles, isEmpty, emptyState, className, }: PortfolioOverviewProps): react_jsx_runtime.JSX.Element;
 

package/dist/components/portfolio-overview.js

@@ -15,7 +15,10 @@ function PortfolioOverview({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("grid gap-4 grid-cols-[repeat(auto-fit,minmax(320px,1fr))]", className),
+      className: cn(
+        "grid gap-4 items-start grid-cols-[repeat(auto-fit,minmax(320px,1fr))]",
+        className
+      ),
       children: populatedTiles.map((tile) => /* @__PURE__ */ jsx(
         PortfolioBentoTile,
         {

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  /** Tiles with nothing to show are omitted entirely, not rendered empty. */\n  isEmpty?: boolean;\n  content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n  tiles: PortfolioBentoTileConfig[];\n  /** First-run state across the whole portfolio (zero holdings, zero activity). */\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Portfolio landing page: a content-first dashboard. Each tile is a fast\n * preview of one section, expanding into its full subpage via \"See all\".\n * Navigation across portfolio sections lives one level up, in the shared\n * portfolio chip bar rendered by the app's layout on every page — this\n * component is pure tile layout, nothing else.\n *\n * Uses a CSS grid with `auto-fit` tracks rather than multi-column masonry:\n * masonry's fixed column tracks leave dead blank space when few tiles are\n * populated (a real, reproduced failure mode with sparse content). `auto-fit`\n * collapses empty tracks and stretches present tiles to fill the freed\n * width, so the layout always uses the full screen regardless of how many\n * tiles are populated.\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(\"grid gap-4 grid-cols-[repeat(auto-fit,minmax(320px,1fr))]\", className)}\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":";AA4CW;AA1CX,SAAS,UAAU;AACnB,SAAS,0BAAwD;AAkC1D,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,GAAG,6DAA6D,SAAS;AAAA,MAEnF,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  /** Tiles with nothing to show are omitted entirely, not rendered empty. */\n  isEmpty?: boolean;\n  content: React.ReactNode;\n}\n\nexport interface PortfolioOverviewProps {\n  tiles: PortfolioBentoTileConfig[];\n  /** First-run state across the whole portfolio (zero holdings, zero activity). */\n  isEmpty?: boolean;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Portfolio landing page: a content-first dashboard. Each tile is a fast\n * preview of one section, expanding into its full subpage via \"See all\".\n * Navigation across portfolio sections lives one level up, in the shared\n * portfolio chip bar rendered by the app's layout on every page — this\n * component is pure tile layout, nothing else.\n *\n * Uses a CSS grid with `auto-fit` tracks rather than multi-column masonry:\n * masonry's fixed column tracks leave dead blank space when few tiles are\n * populated (a real, reproduced failure mode with sparse content). `auto-fit`\n * collapses empty tracks and stretches present tiles to fill the freed\n * width, so the layout always uses the full screen regardless of how many\n * tiles are populated. `items-start` overrides grid's default row-stretch —\n * without it, a short tile sharing a row with a tall one gets stretched to\n * match, leaving dead space inside its own card (also reproduced).\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        \"grid gap-4 items-start grid-cols-[repeat(auto-fit,minmax(320px,1fr))]\",\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":";AA8CW;AA5CX,SAAS,UAAU;AACnB,SAAS,0BAAwD;AAoC1D,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,QACT;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.94.3",
+  "version": "0.94.4",
   "description": "Shared UI components for Medialane apps",
   "type": "module",
   "sideEffects": false,