@mastra/playground-ui 61.0.0-alpha.2 → 61.0.0-alpha.4

package/dist/{metrics-kpi-card-DxcLqbDU.js → metrics-kpi-card-CDeJ3I1-.js}

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ArrowUpRightIcon, ArrowDownRightIcon } from 'lucide-react';
 import { B as Badge } from './Badge-DId-8rYY.js';
-import { T as Txt } from './Txt-C3cYJgKU.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-DsQPiynb.js';
 import { c as cn } from './cn-65Adrsfj.js';
+import { T as Txt } from './Txt-C3cYJgKU.js';
 import { S as Spinner } from './spinner-ylbE0TJA.js';
 import { C as Card } from './Card-DVy0QS4m.js';
 
@@ -14,6 +15,7 @@ function formatChange(changePct) {
 }
 function MetricsKpiCardChange({
   changePct,
+  comparison,
   prevValue,
   lowerIsBetter,
   className
@@ -21,25 +23,24 @@ function MetricsKpiCardChange({
   const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;
   const Icon = changePct >= 0 ? ArrowUpRightIcon : ArrowDownRightIcon;
   const formattedChange = formatChange(changePct);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", className), children: [
-    /* @__PURE__ */ jsx(
-      Badge,
-      {
-        variant: isGood ? "success" : "destructive",
-        emphasis: "subtle",
-        size: "xs",
-        icon: /* @__PURE__ */ jsx(Icon, {}),
-        className: "tabular-nums",
-        children: formattedChange
-      }
-    ),
-    /* @__PURE__ */ jsxs(Txt, { as: "span", variant: "meta", tone: "faint", children: [
-      "vs prior period",
-      prevValue ? /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
-        ", previous value ",
-        prevValue
-      ] }) : null
-    ] })
+  const description = prevValue ? `${comparison} (${prevValue})` : comparison;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxs(TooltipTrigger, { render: /* @__PURE__ */ jsx("span", { tabIndex: 0, className: cn("inline-flex rounded-full", className) }), children: [
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: isGood ? "success" : "destructive",
+          emphasis: "subtle",
+          size: "xs",
+          icon: /* @__PURE__ */ jsx(Icon, {}),
+          className: "tabular-nums",
+          "aria-hidden": "true",
+          children: formattedChange
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: `${formattedChange} ${description}` })
+    ] }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: description })
   ] });
 }
 
@@ -50,6 +51,10 @@ function MetricsKpiCardError({
   return /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", className: cn("text-destructive-foreground", className), children: message });
 }
 
+function MetricsKpiCardHeader({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-x-2 gap-y-1", className), children });
+}
+
 function MetricsKpiCardLabel({ children, className }) {
   return /* @__PURE__ */ jsx(Txt, { as: "span", variant: "subheading", tone: "ink", className, children });
 }
@@ -82,6 +87,7 @@ function MetricsKpiCardValueRow({ children, className }) {
 }
 
 const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
+  Header: MetricsKpiCardHeader,
   Label: MetricsKpiCardLabel,
   ValueRow: MetricsKpiCardValueRow,
   Value: MetricsKpiCardValue,
@@ -93,4 +99,4 @@ const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
 });
 
 export { MetricsKpiCard as M };
-//# sourceMappingURL=metrics-kpi-card-DxcLqbDU.js.map
+//# sourceMappingURL=metrics-kpi-card-CDeJ3I1-.js.map

package/dist/metrics-kpi-card-CDeJ3I1-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpi-card-CDeJ3I1-.js","sources":["../src/ds/components/MetricsKpiCard/metrics-kpi-card-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-error.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-header.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-label.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-loading.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-data.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value-row.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card.tsx"],"sourcesContent":["import { ArrowDownRightIcon, ArrowUpRightIcon } from 'lucide-react';\nimport { Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\nconst compact = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\n// Past +1000% a percentage is unreadable, so show how many times bigger the value got instead.\nfunction formatChange(changePct: number) {\n  if (changePct >= 1000) return `×${compact.format(1 + changePct / 100)}`;\n  const digits = Math.abs(changePct) < 10 ? 1 : 0;\n  return `${changePct > 0 ? '+' : ''}${changePct.toFixed(digits)}%`;\n}\n\nexport function MetricsKpiCardChange({\n  changePct,\n  comparison,\n  prevValue,\n  lowerIsBetter,\n  className,\n}: {\n  changePct: number;\n  comparison: string;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  className?: string;\n}) {\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n  const Icon = changePct >= 0 ? ArrowUpRightIcon : ArrowDownRightIcon;\n  const formattedChange = formatChange(changePct);\n  const description = prevValue ? `${comparison} (${prevValue})` : comparison;\n\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<span tabIndex={0} className={cn('inline-flex rounded-full', className)} />}>\n        <Badge\n          variant={isGood ? 'success' : 'destructive'}\n          emphasis=\"subtle\"\n          size=\"xs\"\n          icon={<Icon />}\n          className=\"tabular-nums\"\n          aria-hidden=\"true\"\n        >\n          {formattedChange}\n        </Badge>\n        <span className=\"sr-only\">{`${formattedChange} ${description}`}</span>\n      </TooltipTrigger>\n      <TooltipContent>{description}</TooltipContent>\n    </Tooltip>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" className={cn('text-destructive-foreground', className)}>\n      {message}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardHeader({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex flex-wrap items-center gap-x-2 gap-y-1', className)}>{children}</div>;\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardLabel({ children, className }: { children: string; className?: string }) {\n  return (\n    <Txt as=\"span\" variant=\"subheading\" tone=\"ink\" className={className}>\n      {children}\n    </Txt>\n  );\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <Txt as=\"span\" className={className}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-placeholder\" />\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Card } from '@/ds/components/Card';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <Card className={cn('min-w-72 flex-1 px-5 py-4', className)}>\n      <div className=\"grid gap-1.5\">{children}</div>\n    </Card>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValue({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <strong className={cn('text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]', className)}>\n      {children}\n    </strong>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValueRow({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1', className)}>{children}</div>;\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\nimport { MetricsKpiCardHeader } from './metrics-kpi-card-header';\nimport { MetricsKpiCardLabel } from './metrics-kpi-card-label';\nimport { MetricsKpiCardLoading } from './metrics-kpi-card-loading';\nimport { MetricsKpiCardNoChange } from './metrics-kpi-card-no-change';\nimport { MetricsKpiCardNoData } from './metrics-kpi-card-no-data';\nimport { MetricsKpiCardRoot } from './metrics-kpi-card-root';\nimport { MetricsKpiCardValue } from './metrics-kpi-card-value';\nimport { MetricsKpiCardValueRow } from './metrics-kpi-card-value-row';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Header: MetricsKpiCardHeader,\n  Label: MetricsKpiCardLabel,\n  ValueRow: MetricsKpiCardValueRow,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n});\n"],"names":[],"mappings":"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"}

package/dist/{metrics-kpi-card-9L0j_oGY.cjs → metrics-kpi-card-CLlu5you.cjs}

@@ -3,8 +3,9 @@
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const Badge = require('./Badge-DB59RxT5.cjs');
-const Txt = require('./Txt-DNnvlrBo.cjs');
+const tooltip = require('./tooltip-DIZ5oqjV.cjs');
 const utils_cn = require('./cn-DG0X1KEP.cjs');
+const Txt = require('./Txt-DNnvlrBo.cjs');
 const spinner = require('./spinner-BCpN7LL9.cjs');
 const Card = require('./Card-BQsKHkyB.cjs');
 
@@ -16,6 +17,7 @@ function formatChange(changePct) {
 }
 function MetricsKpiCardChange({
   changePct,
+  comparison,
   prevValue,
   lowerIsBetter,
   className
@@ -23,25 +25,24 @@ function MetricsKpiCardChange({
   const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;
   const Icon = changePct >= 0 ? lucideReact.ArrowUpRightIcon : lucideReact.ArrowDownRightIcon;
   const formattedChange = formatChange(changePct);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex items-center gap-1.5", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Badge.Badge,
-      {
-        variant: isGood ? "success" : "destructive",
-        emphasis: "subtle",
-        size: "xs",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
-        className: "tabular-nums",
-        children: formattedChange
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(Txt.Txt, { as: "span", variant: "meta", tone: "faint", children: [
-      "vs prior period",
-      prevValue ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
-        ", previous value ",
-        prevValue
-      ] }) : null
-    ] })
+  const description = prevValue ? `${comparison} (${prevValue})` : comparison;
+  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipTrigger, { render: /* @__PURE__ */ jsxRuntime.jsx("span", { tabIndex: 0, className: utils_cn.cn("inline-flex rounded-full", className) }), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Badge.Badge,
+        {
+          variant: isGood ? "success" : "destructive",
+          emphasis: "subtle",
+          size: "xs",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+          className: "tabular-nums",
+          "aria-hidden": "true",
+          children: formattedChange
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `${formattedChange} ${description}` })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: description })
   ] });
 }
 
@@ -52,6 +53,10 @@ function MetricsKpiCardError({
   return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", className: utils_cn.cn("text-destructive-foreground", className), children: message });
 }
 
+function MetricsKpiCardHeader({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex flex-wrap items-center gap-x-2 gap-y-1", className), children });
+}
+
 function MetricsKpiCardLabel({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "subheading", tone: "ink", className, children });
 }
@@ -84,6 +89,7 @@ function MetricsKpiCardValueRow({ children, className }) {
 }
 
 const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
+  Header: MetricsKpiCardHeader,
   Label: MetricsKpiCardLabel,
   ValueRow: MetricsKpiCardValueRow,
   Value: MetricsKpiCardValue,
@@ -95,4 +101,4 @@ const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
 });
 
 exports.MetricsKpiCard = MetricsKpiCard;
-//# sourceMappingURL=metrics-kpi-card-9L0j_oGY.cjs.map
+//# sourceMappingURL=metrics-kpi-card-CLlu5you.cjs.map

package/dist/metrics-kpi-card-CLlu5you.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpi-card-CLlu5you.cjs","sources":["../src/ds/components/MetricsKpiCard/metrics-kpi-card-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-error.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-header.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-label.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-loading.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-data.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value-row.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card.tsx"],"sourcesContent":["import { ArrowDownRightIcon, ArrowUpRightIcon } from 'lucide-react';\nimport { Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\nconst compact = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\n// Past +1000% a percentage is unreadable, so show how many times bigger the value got instead.\nfunction formatChange(changePct: number) {\n  if (changePct >= 1000) return `×${compact.format(1 + changePct / 100)}`;\n  const digits = Math.abs(changePct) < 10 ? 1 : 0;\n  return `${changePct > 0 ? '+' : ''}${changePct.toFixed(digits)}%`;\n}\n\nexport function MetricsKpiCardChange({\n  changePct,\n  comparison,\n  prevValue,\n  lowerIsBetter,\n  className,\n}: {\n  changePct: number;\n  comparison: string;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  className?: string;\n}) {\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n  const Icon = changePct >= 0 ? ArrowUpRightIcon : ArrowDownRightIcon;\n  const formattedChange = formatChange(changePct);\n  const description = prevValue ? `${comparison} (${prevValue})` : comparison;\n\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<span tabIndex={0} className={cn('inline-flex rounded-full', className)} />}>\n        <Badge\n          variant={isGood ? 'success' : 'destructive'}\n          emphasis=\"subtle\"\n          size=\"xs\"\n          icon={<Icon />}\n          className=\"tabular-nums\"\n          aria-hidden=\"true\"\n        >\n          {formattedChange}\n        </Badge>\n        <span className=\"sr-only\">{`${formattedChange} ${description}`}</span>\n      </TooltipTrigger>\n      <TooltipContent>{description}</TooltipContent>\n    </Tooltip>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" className={cn('text-destructive-foreground', className)}>\n      {message}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardHeader({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex flex-wrap items-center gap-x-2 gap-y-1', className)}>{children}</div>;\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardLabel({ children, className }: { children: string; className?: string }) {\n  return (\n    <Txt as=\"span\" variant=\"subheading\" tone=\"ink\" className={className}>\n      {children}\n    </Txt>\n  );\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <Txt as=\"span\" className={className}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-placeholder\" />\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Card } from '@/ds/components/Card';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <Card className={cn('min-w-72 flex-1 px-5 py-4', className)}>\n      <div className=\"grid gap-1.5\">{children}</div>\n    </Card>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValue({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <strong className={cn('text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]', className)}>\n      {children}\n    </strong>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValueRow({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1', className)}>{children}</div>;\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\nimport { MetricsKpiCardHeader } from './metrics-kpi-card-header';\nimport { MetricsKpiCardLabel } from './metrics-kpi-card-label';\nimport { MetricsKpiCardLoading } from './metrics-kpi-card-loading';\nimport { MetricsKpiCardNoChange } from './metrics-kpi-card-no-change';\nimport { MetricsKpiCardNoData } from './metrics-kpi-card-no-data';\nimport { MetricsKpiCardRoot } from './metrics-kpi-card-root';\nimport { MetricsKpiCardValue } from './metrics-kpi-card-value';\nimport { MetricsKpiCardValueRow } from './metrics-kpi-card-value-row';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Header: MetricsKpiCardHeader,\n  Label: MetricsKpiCardLabel,\n  ValueRow: MetricsKpiCardValueRow,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n});\n"],"names":["ArrowUpRightIcon","ArrowDownRightIcon","Tooltip","jsxs","TooltipTrigger","jsx","cn","Badge","TooltipContent","Txt","Spinner","Card"],"mappings":"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"}

package/dist/new/layout/app-shell.cjs.js

@@ -47,7 +47,7 @@ function MainCard({ children, className }) {
     "div",
     {
       "data-slot": "main-card",
-      className: utils_cn.cn("relative min-h-0 flex-1 overflow-hidden rounded-studio-frame", primitives_raisedSurface.frameSurfaceStyle, className),
+      className: utils_cn.cn("relative min-h-0 flex-1 overflow-hidden rounded-studio-frame p-px", primitives_raisedSurface.frameSurfaceStyle, className),
       children
     }
   );

package/dist/new/layout/app-shell.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.cjs.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx","../../../src/ds/new/layout/app-shell/main-card.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mobileHeader?: ReactNode;\n  sidebar?: ReactNode;\n}\n\nexport function AppShell({ children, className, mobileHeader, ref, sidebar, ...props }: AppShellProps) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"app-shell\"\n      className={cn(\n        'h-full min-h-0',\n        sidebar && 'lg:grid lg:grid-cols-[auto_minmax(0,1fr)] lg:grid-rows-[1fr]',\n        className,\n      )}\n      {...props}\n    >\n      {sidebar}\n      <div data-slot=\"app-shell-content\" className=\"flex h-full min-h-0 min-w-0 flex-col\">\n        {mobileHeader}\n        <div\n          data-slot=\"app-shell-body\"\n          className={cn(\n            'flex min-h-0 flex-1 flex-col',\n            // Inset on every side; at lg with a sidebar column the sidebar's own padding provides the left gap.\n            // Disjoint longhands: consumer CSS that also emits `.p-1.5` can't override the lg inset.\n            'max-lg:p-1.5 lg:py-2 lg:pr-2',\n            sidebar ? 'lg:pl-0' : 'lg:pl-2',\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nimport { frameSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// The app frame surface inside `AppShell`. Spacing around it is owned by the shell, not the card.\nexport function MainCard({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      data-slot=\"main-card\"\n      className={cn('relative min-h-0 flex-1 overflow-hidden rounded-studio-frame', frameSurfaceStyle, className)}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","frameSurfaceStyle"],"mappings":";;;;;;;;AAUO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAW,cAAc,GAAA,EAAK,OAAA,EAAS,GAAG,KAAA,EAAM,EAAkB;AACrG,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,gBAAA;AAAA,QACA,OAAA,IAAW,8DAAA;AAAA,QACX;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBACDD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,mBAAA,EAAoB,WAAU,sCAAA,EAC1C,QAAA,EAAA;AAAA,UAAA,YAAA;AAAA,0BACDE,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,gBAAA;AAAA,cACV,SAAA,EAAWD,WAAA;AAAA,gBACT,8BAAA;AAAA;AAAA;AAAA,gBAGA,8BAAA;AAAA,gBACA,UAAU,SAAA,GAAY;AAAA,eACxB;AAAA,cAEC;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;AClCO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AAC7F,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAWD,WAAA,CAAG,8DAAA,EAAgEE,0CAAA,EAAmB,SAAS,CAAA;AAAA,MAEzG;AAAA;AAAA,GACH;AAEJ;;;;;"}
+{"version":3,"file":"app-shell.cjs.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx","../../../src/ds/new/layout/app-shell/main-card.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mobileHeader?: ReactNode;\n  sidebar?: ReactNode;\n}\n\nexport function AppShell({ children, className, mobileHeader, ref, sidebar, ...props }: AppShellProps) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"app-shell\"\n      className={cn(\n        'h-full min-h-0',\n        sidebar && 'lg:grid lg:grid-cols-[auto_minmax(0,1fr)] lg:grid-rows-[1fr]',\n        className,\n      )}\n      {...props}\n    >\n      {sidebar}\n      <div data-slot=\"app-shell-content\" className=\"flex h-full min-h-0 min-w-0 flex-col\">\n        {mobileHeader}\n        <div\n          data-slot=\"app-shell-body\"\n          className={cn(\n            'flex min-h-0 flex-1 flex-col',\n            // Inset on every side; at lg with a sidebar column the sidebar's own padding provides the left gap.\n            // Disjoint longhands: consumer CSS that also emits `.p-1.5` can't override the lg inset.\n            'max-lg:p-1.5 lg:py-2 lg:pr-2',\n            sidebar ? 'lg:pl-0' : 'lg:pl-2',\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nimport { frameSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// The app frame surface inside `AppShell`. Spacing around it is owned by the shell, not the card.\n// Reserve the 1px inset rim so child dividers don't paint over it and stack their alpha.\nexport function MainCard({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      data-slot=\"main-card\"\n      className={cn('relative min-h-0 flex-1 overflow-hidden rounded-studio-frame p-px', frameSurfaceStyle, className)}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","frameSurfaceStyle"],"mappings":";;;;;;;;AAUO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAW,cAAc,GAAA,EAAK,OAAA,EAAS,GAAG,KAAA,EAAM,EAAkB;AACrG,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,gBAAA;AAAA,QACA,OAAA,IAAW,8DAAA;AAAA,QACX;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBACDD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,mBAAA,EAAoB,WAAU,sCAAA,EAC1C,QAAA,EAAA;AAAA,UAAA,YAAA;AAAA,0BACDE,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,gBAAA;AAAA,cACV,SAAA,EAAWD,WAAA;AAAA,gBACT,8BAAA;AAAA;AAAA;AAAA,gBAGA,8BAAA;AAAA,gBACA,UAAU,SAAA,GAAY;AAAA,eACxB;AAAA,cAEC;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;ACjCO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AAC7F,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAWD,WAAA,CAAG,mEAAA,EAAqEE,0CAAA,EAAmB,SAAS,CAAA;AAAA,MAE9G;AAAA;AAAA,GACH;AAEJ;;;;;"}

package/dist/new/layout/app-shell.es.js

@@ -43,7 +43,7 @@ function MainCard({ children, className }) {
     "div",
     {
       "data-slot": "main-card",
-      className: cn("relative min-h-0 flex-1 overflow-hidden rounded-studio-frame", frameSurfaceStyle, className),
+      className: cn("relative min-h-0 flex-1 overflow-hidden rounded-studio-frame p-px", frameSurfaceStyle, className),
       children
     }
   );

package/dist/new/layout/app-shell.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.es.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx","../../../src/ds/new/layout/app-shell/main-card.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mobileHeader?: ReactNode;\n  sidebar?: ReactNode;\n}\n\nexport function AppShell({ children, className, mobileHeader, ref, sidebar, ...props }: AppShellProps) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"app-shell\"\n      className={cn(\n        'h-full min-h-0',\n        sidebar && 'lg:grid lg:grid-cols-[auto_minmax(0,1fr)] lg:grid-rows-[1fr]',\n        className,\n      )}\n      {...props}\n    >\n      {sidebar}\n      <div data-slot=\"app-shell-content\" className=\"flex h-full min-h-0 min-w-0 flex-col\">\n        {mobileHeader}\n        <div\n          data-slot=\"app-shell-body\"\n          className={cn(\n            'flex min-h-0 flex-1 flex-col',\n            // Inset on every side; at lg with a sidebar column the sidebar's own padding provides the left gap.\n            // Disjoint longhands: consumer CSS that also emits `.p-1.5` can't override the lg inset.\n            'max-lg:p-1.5 lg:py-2 lg:pr-2',\n            sidebar ? 'lg:pl-0' : 'lg:pl-2',\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nimport { frameSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// The app frame surface inside `AppShell`. Spacing around it is owned by the shell, not the card.\nexport function MainCard({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      data-slot=\"main-card\"\n      className={cn('relative min-h-0 flex-1 overflow-hidden rounded-studio-frame', frameSurfaceStyle, className)}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAUO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAW,cAAc,GAAA,EAAK,OAAA,EAAS,GAAG,KAAA,EAAM,EAAkB;AACrG,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,gBAAA;AAAA,QACA,OAAA,IAAW,8DAAA;AAAA,QACX;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBACD,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,mBAAA,EAAoB,WAAU,sCAAA,EAC1C,QAAA,EAAA;AAAA,UAAA,YAAA;AAAA,0BACD,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,gBAAA;AAAA,cACV,SAAA,EAAW,EAAA;AAAA,gBACT,8BAAA;AAAA;AAAA;AAAA,gBAGA,8BAAA;AAAA,gBACA,UAAU,SAAA,GAAY;AAAA,eACxB;AAAA,cAEC;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;AClCO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AAC7F,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,8DAAA,EAAgE,iBAAA,EAAmB,SAAS,CAAA;AAAA,MAEzG;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"app-shell.es.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx","../../../src/ds/new/layout/app-shell/main-card.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mobileHeader?: ReactNode;\n  sidebar?: ReactNode;\n}\n\nexport function AppShell({ children, className, mobileHeader, ref, sidebar, ...props }: AppShellProps) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"app-shell\"\n      className={cn(\n        'h-full min-h-0',\n        sidebar && 'lg:grid lg:grid-cols-[auto_minmax(0,1fr)] lg:grid-rows-[1fr]',\n        className,\n      )}\n      {...props}\n    >\n      {sidebar}\n      <div data-slot=\"app-shell-content\" className=\"flex h-full min-h-0 min-w-0 flex-col\">\n        {mobileHeader}\n        <div\n          data-slot=\"app-shell-body\"\n          className={cn(\n            'flex min-h-0 flex-1 flex-col',\n            // Inset on every side; at lg with a sidebar column the sidebar's own padding provides the left gap.\n            // Disjoint longhands: consumer CSS that also emits `.p-1.5` can't override the lg inset.\n            'max-lg:p-1.5 lg:py-2 lg:pr-2',\n            sidebar ? 'lg:pl-0' : 'lg:pl-2',\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nimport { frameSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// The app frame surface inside `AppShell`. Spacing around it is owned by the shell, not the card.\n// Reserve the 1px inset rim so child dividers don't paint over it and stack their alpha.\nexport function MainCard({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      data-slot=\"main-card\"\n      className={cn('relative min-h-0 flex-1 overflow-hidden rounded-studio-frame p-px', frameSurfaceStyle, className)}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAUO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAW,cAAc,GAAA,EAAK,OAAA,EAAS,GAAG,KAAA,EAAM,EAAkB;AACrG,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,gBAAA;AAAA,QACA,OAAA,IAAW,8DAAA;AAAA,QACX;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBACD,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,mBAAA,EAAoB,WAAU,sCAAA,EAC1C,QAAA,EAAA;AAAA,UAAA,YAAA;AAAA,0BACD,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,gBAAA;AAAA,cACV,SAAA,EAAW,EAAA;AAAA,gBACT,8BAAA;AAAA;AAAA;AAAA,gBAGA,8BAAA;AAAA,gBACA,UAAU,SAAA,GAAY;AAAA,eACxB;AAAA,cAEC;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;ACjCO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AAC7F,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,mEAAA,EAAqE,iBAAA,EAAmB,SAAS,CAAA;AAAA,MAE9G;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/new/sidebar.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('../sidebar.css');const jsxRuntime = require('react/jsx-runtime');
-const mainSidebar = require('../main-sidebar-BWKVSRoQ.cjs');
+const mainSidebarLinkActive = require('../main-sidebar-link-active-MpwV6dGL.cjs');
 const Txt = require('../Txt-DNnvlrBo.cjs');
 const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
 const utils_cn = require('../cn-DG0X1KEP.cjs');
@@ -17,7 +17,7 @@ const v4 = require('zod/v4');
 const hooks_useLocalStorageState = require('../hooks/use-local-storage-state.cjs.js');
 
 function SidebarNewBrand({ logo, title, className, ...props }) {
-  const { state } = mainSidebar.useMainSidebar();
+  const { state } = mainSidebarLinkActive.useMainSidebar();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "sidebar-new-brand", className: utils_cn.cn("flex min-w-0 flex-1 items-center gap-2", className), ...props, children: [
     logo ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: logo }) : null,
     state === "collapsed" ? /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: title }) : /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "subheading", tone: "ink", className: "truncate font-body tracking-tight", children: title })
@@ -26,7 +26,7 @@ function SidebarNewBrand({ logo, title, className, ...props }) {
 
 const SidebarNewCommandHeader = React.forwardRef(
   function SidebarNewCommandHeader2({ className, children, ...props }, ref) {
-    const { state, isMobile } = mainSidebar.useMainSidebar();
+    const { state, isMobile } = mainSidebarLinkActive.useMainSidebar();
     return /* @__PURE__ */ jsxRuntime.jsx(
       "header",
       {
@@ -52,7 +52,7 @@ function SidebarNewFooter({ className, children, ...props }) {
 }
 
 const SidebarNewFooterMeta = React.forwardRef(function SidebarNewFooterMeta2({ className, children, action, ...props }, ref) {
-  const { state } = mainSidebar.useMainSidebar();
+  const { state } = mainSidebarLinkActive.useMainSidebar();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -86,14 +86,14 @@ const SidebarNewFooterMeta = React.forwardRef(function SidebarNewFooterMeta2({ c
 });
 
 function SidebarNewTrigger(props) {
-  const context = mainSidebar.useMaybeSidebarState();
+  const context = mainSidebarLinkActive.useMaybeSidebarState();
   if (context?.isMobile) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarTrigger, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(mainSidebarLinkActive.MainSidebarTrigger, { ...props });
 }
 
 const hold = "animate-[sidebar-hold_var(--resize-dur)] motion-reduce:animate-none";
 function SidebarNewHeader({ className, children, collapsedLogo, ...props }) {
-  const sidebar = mainSidebar.useMaybeSidebarState();
+  const sidebar = mainSidebarLinkActive.useMaybeSidebarState();
   const collapsed = sidebar?.state === "collapsed";
   const isMobile = sidebar?.isMobile ?? false;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -223,7 +223,7 @@ const SidebarNewMeter = React.forwardRef(function SidebarNewMeter2({
   className,
   ...props
 }, ref) {
-  const ctx = mainSidebar.useMaybeSidebarState();
+  const ctx = mainSidebarLinkActive.useMaybeSidebarState();
   const state = stateProp ?? ctx?.state ?? "default";
   const Link = LinkProp ?? ctx?.LinkComponent ?? "a";
   const isCollapsed = state === "collapsed";
@@ -281,9 +281,9 @@ const SidebarNewMeter = React.forwardRef(function SidebarNewMeter2({
 });
 
 function SidebarNewNav({ children, className, ...props }) {
-  const isMobile = mainSidebar.useMaybeSidebarState()?.isMobile ?? false;
+  const isMobile = mainSidebarLinkActive.useMaybeSidebarState()?.isMobile ?? false;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    mainSidebar.MainSidebarNav,
+    mainSidebarLinkActive.MainSidebarNav,
     {
       className: utils_cn.cn(
         "-mr-1.5",
@@ -307,7 +307,7 @@ function SidebarNewNavHeader({
   LinkComponent: LinkProp,
   ...props
 }) {
-  const context = mainSidebar.useMaybeSidebarState();
+  const context = mainSidebarLinkActive.useMaybeSidebarState();
   const state = stateProp ?? context?.state ?? "default";
   const showTitle = state === "default";
   const Link = LinkProp ?? context?.LinkComponent ?? "a";
@@ -386,7 +386,7 @@ function sidebarNewNavStackPageClasses(active, page, className) {
 }
 
 function SidebarNewNavStackRootView({ children, className, ...props }) {
-  const { state } = mainSidebar.useMainSidebar();
+  const { state } = mainSidebarLinkActive.useMainSidebar();
   const { activeValue, rootValue } = useSidebarNewNavStack();
   const active = state === "collapsed" || activeValue === rootValue;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -412,7 +412,7 @@ function SidebarNewNavStackView({
   className,
   ...props
 }) {
-  const { state } = mainSidebar.useMainSidebar();
+  const { state } = mainSidebarLinkActive.useMainSidebar();
   const { activeValue, closeView } = useSidebarNewNavStack();
   const active = state !== "collapsed" && activeValue === value;
   const backRef = React.useRef(null);
@@ -453,7 +453,7 @@ function SidebarNewNavStackView({
             type: "button",
             "aria-label": `${backLabel}: ${title}`,
             onClick: handleBack,
-            className: utils_cn.cn(mainSidebar.navItemClasses(), "mb-2 grid grid-cols-[2rem_1fr_2rem] px-1"),
+            className: utils_cn.cn(mainSidebarLinkActive.navItemClasses(), "mb-2 grid grid-cols-[2rem_1fr_2rem] px-1"),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, { className: "justify-self-center", "aria-hidden": "true" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-center", children: title }),
@@ -479,9 +479,9 @@ function SidebarNewRoot({
   children,
   ...props
 }) {
-  const sidebar = mainSidebar.useMaybeSidebarState();
+  const sidebar = mainSidebarLinkActive.useMaybeSidebarState();
   const isRaised = variant === "raised" && !sidebar?.isMobile;
-  return /* @__PURE__ */ jsxRuntime.jsx("aside", { "aria-label": ariaLabel, className: "contents", children: /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarRoot, { mobileMode, ...props, children: isRaised ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { "aria-label": ariaLabel, className: "contents", children: /* @__PURE__ */ jsxRuntime.jsx(mainSidebarLinkActive.MainSidebarRoot, { mobileMode, ...props, children: isRaised ? /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-slot": "sidebar-new-surface",
@@ -534,7 +534,7 @@ function SidebarNewSectionLink({
 }) {
   const childLinks = link.children ?? [];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    mainSidebar.MainSidebarNavLink,
+    mainSidebarLinkActive.MainSidebarNavLink,
     {
       link,
       isActive: isActive?.(link, activeCandidates) ?? link.isActive,
@@ -543,7 +543,7 @@ function SidebarNewSectionLink({
         if (event.target instanceof Element && event.target.closest("li") !== event.currentTarget) return;
         onSelect?.(link);
       },
-      subItems: childLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarNavList, { className: "mt-0.5", children: childLinks.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      subItems: childLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(mainSidebarLinkActive.MainSidebarNavList, { className: "mt-0.5", children: childLinks.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
         SidebarNewSectionLink,
         {
           link: child,
@@ -585,7 +585,7 @@ function SidebarNewMoreLinks({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     surfacedLinks.map(renderLink),
     foldedLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-      mainSidebar.MainSidebarNavLink,
+      mainSidebarLinkActive.MainSidebarNavLink,
       {
         link: { name: "More", url: "", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontalIcon, {}) },
         render: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -597,7 +597,7 @@ function SidebarNewMoreLinks({
             onClick: () => setExpanded((current) => !current),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontalIcon, { "aria-hidden": "true" }),
-              /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarNavLabel, { children: "More" })
+              /* @__PURE__ */ jsxRuntime.jsx(mainSidebarLinkActive.MainSidebarNavLabel, { children: "More" })
             ]
           }
         ),
@@ -645,15 +645,15 @@ function SidebarNewSections({
     const headerId = section.title ? `${baseId}-${section.key}` : void 0;
     const activeCandidates = [...section.links, ...section.moreLinks ?? []];
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      mainSidebar.MainSidebarNavSection,
+      mainSidebarLinkActive.MainSidebarNavSection,
       {
         className,
         "aria-labelledby": headerId,
         "aria-label": !headerId ? section.key : void 0,
         children: [
-          showSeparator ? /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarNavSeparator, { className: "[&:after]:border-border" }) : null,
+          showSeparator ? /* @__PURE__ */ jsxRuntime.jsx(mainSidebarLinkActive.MainSidebarNavSeparator, { className: "[&:after]:border-border" }) : null,
           section.title ? /* @__PURE__ */ jsxRuntime.jsx(SidebarNewNavHeader, { id: headerId, href: section.href, isActive: section.isHeaderActive, children: section.title }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs(mainSidebar.MainSidebarNavList, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(mainSidebarLinkActive.MainSidebarNavList, { children: [
             section.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
               SidebarNewSectionLink,
               {
@@ -689,25 +689,25 @@ const SidebarNew = Object.assign(SidebarNewRoot, {
   FooterMeta: SidebarNewFooterMeta,
   Header: SidebarNewHeader,
   Meter: SidebarNewMeter,
-  MobileTrigger: mainSidebar.MainSidebarMobileTrigger,
+  MobileTrigger: mainSidebarLinkActive.MainSidebarMobileTrigger,
   Nav: SidebarNewNav,
   NavHeader: SidebarNewNavHeader,
-  NavLabel: mainSidebar.MainSidebarNavLabel,
-  NavLink: mainSidebar.MainSidebarNavLink,
-  NavList: mainSidebar.MainSidebarNavList,
-  NavSection: mainSidebar.MainSidebarNavSection,
-  NavSeparator: mainSidebar.MainSidebarNavSeparator,
+  NavLabel: mainSidebarLinkActive.MainSidebarNavLabel,
+  NavLink: mainSidebarLinkActive.MainSidebarNavLink,
+  NavList: mainSidebarLinkActive.MainSidebarNavList,
+  NavSection: mainSidebarLinkActive.MainSidebarNavSection,
+  NavSeparator: mainSidebarLinkActive.MainSidebarNavSeparator,
   NavStack: SidebarNewNavStack,
-  Provider: mainSidebar.MainSidebarProvider,
+  Provider: mainSidebarLinkActive.MainSidebarProvider,
   SearchTrigger: SidebarNewSearchTrigger,
   Sections: SidebarNewSections,
   Trigger: SidebarNewTrigger
 });
 
-exports.SidebarNewProvider = mainSidebar.MainSidebarProvider;
-exports.getIsLinkActive = mainSidebar.getIsLinkActive;
-exports.navItemClasses = mainSidebar.navItemClasses;
-exports.useSidebarNew = mainSidebar.useMainSidebar;
+exports.SidebarNewProvider = mainSidebarLinkActive.MainSidebarProvider;
+exports.getIsLinkActive = mainSidebarLinkActive.getIsLinkActive;
+exports.navItemClasses = mainSidebarLinkActive.navItemClasses;
+exports.useSidebarNew = mainSidebarLinkActive.useMainSidebar;
 exports.SidebarNew = SidebarNew;
 exports.SidebarNewBrand = SidebarNewBrand;
 exports.SidebarNewCommandHeader = SidebarNewCommandHeader;