@mastra/playground-ui 55.0.0 → 56.0.0-alpha.5

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

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpi-card-pmhPUTXh.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-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.tsx"],"sourcesContent":["import { TrendingUpIcon, TrendingDownIcon } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardChange({\n  changePct,\n  prevValue,\n  lowerIsBetter,\n  className,\n}: {\n  changePct: number;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  className?: string;\n}) {\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n\n  return (\n    <div className={cn('flex flex-wrap items-center gap-1 text-ui-md text-neutral1', className)}>\n      <div className=\"flex items-center gap-1\">\n        <span className={cn('[&>svg]:size-4', isGood ? 'text-green-600' : 'text-red-600')}>\n          {changePct >= 0 ? <TrendingUpIcon /> : <TrendingDownIcon />}\n        </span>\n        <span\n          className={cn(isGood ? 'text-green-600' : 'text-red-600')}\n        >{`${changePct >= 0 ? '+' : '-'}${Math.abs(changePct).toFixed(1)}%`}</span>\n      </div>\n      {prevValue && (\n        <div>\n          vs previous <b className=\"text-neutral2 font-semibold\">{prevValue}</b>\n        </div>\n      )}\n    </div>\n  );\n}\n","import { 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 <span className={cn('text-ui-sm text-accent2', className)}>{message}</span>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({ children, className }: { children: string; className?: string }) {\n  return <span className={cn('text-ui-md text-neutral3', className)}>{children}</span>;\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <span className={cn('text-ui-md', className)}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-neutral1\" />\n    </span>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return <span className={cn('text-ui-md text-neutral1', className)}>{message}</span>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return <span className={cn('text-ui-md text-neutral1', className)}>{message}</span>;\n}\n","import type { ReactNode } from 'react';\nimport { DashboardCard } from '@/ds/components/DashboardCard';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <DashboardCard className={cn('min-w-72 flex-1', className)}>\n      <div className=\"grid gap-1\">{children}</div>\n    </DashboardCard>\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 <strong className={cn('text-header-lg font-semibold text-neutral4', className)}>{children}</strong>;\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\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';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Label: MetricsKpiCardLabel,\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/new/layout/app-shell.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const utils_cn = require('../../cn-DnbTIGXa.cjs');
+const utils_cn = require('../../cn-DPfV6E6L.cjs');
 
 function AppShell({
   children,
@@ -25,17 +25,7 @@ function AppShell({
       ),
       children: [
         routeHeader,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            "data-slot": "app-shell-main",
-            "aria-label": mainLabel,
-            role: "group",
-            tabIndex: 0,
-            className: "min-h-0 overflow-y-auto",
-            children
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "app-shell-main", "aria-label": mainLabel, role: "group", className: "min-h-0 overflow-y-auto", 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"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellFrameProps {\n  children: ReactNode;\n  className: string;\n}\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mainLabel: string;\n  mobileHeader?: ReactNode;\n  renderFrame?: (props: AppShellFrameProps) => ReactNode;\n  routeHeader?: ReactNode;\n}\n\nexport function AppShell({\n  children,\n  className,\n  mainLabel,\n  mobileHeader,\n  ref,\n  renderFrame,\n  routeHeader,\n  ...props\n}: AppShellProps) {\n  const frame = (\n    <div\n      data-slot=\"app-shell-frame\"\n      className={cn(\n        'relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame border border-border1 bg-surface2 shadow-main-frame lg:m-2 lg:ml-0',\n        routeHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]',\n      )}\n    >\n      {routeHeader}\n      <div\n        data-slot=\"app-shell-main\"\n        aria-label={mainLabel}\n        role=\"group\"\n        tabIndex={0}\n        className=\"min-h-0 overflow-y-auto\"\n      >\n        {children}\n      </div>\n    </div>\n  );\n  const frameProps: AppShellFrameProps = {\n    children: frame,\n    className: 'flex min-h-0 flex-1 flex-col',\n  };\n\n  return (\n    <div ref={ref} data-slot=\"app-shell\" className={cn('flex h-full min-h-0 flex-col', className)} {...props}>\n      {mobileHeader}\n      {renderFrame ? renderFrame(frameProps) : <div className={frameProps.className}>{frame}</div>}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;;;;AAiBO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,KAAA,mBACJA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,iJAAA;AAAA,QACA,cAAc,sBAAA,GAAyB;AAAA,OACzC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,wBACDC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAU,gBAAA;AAAA,YACV,YAAA,EAAY,SAAA;AAAA,YACZ,IAAA,EAAK,OAAA;AAAA,YACL,QAAA,EAAU,CAAA;AAAA,YACV,SAAA,EAAU,yBAAA;AAAA,YAET;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEF,EAAA,MAAM,UAAA,GAAiC;AAAA,IACrC,QAAA,EAAU,KAAA;AAAA,IACV,SAAA,EAAW;AAAA,GACb;AAEA,EAAA,uBACEF,eAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,WAAA,EAAY,SAAA,EAAWC,WAAA,CAAG,8BAAA,EAAgC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChG,QAAA,EAAA;AAAA,IAAA,YAAA;AAAA,IACA,WAAA,GAAc,YAAY,UAAU,CAAA,kCAAK,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACxF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"app-shell.cjs.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellFrameProps {\n  children: ReactNode;\n  className: string;\n}\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mainLabel: string;\n  mobileHeader?: ReactNode;\n  renderFrame?: (props: AppShellFrameProps) => ReactNode;\n  routeHeader?: ReactNode;\n}\n\nexport function AppShell({\n  children,\n  className,\n  mainLabel,\n  mobileHeader,\n  ref,\n  renderFrame,\n  routeHeader,\n  ...props\n}: AppShellProps) {\n  const frame = (\n    <div\n      data-slot=\"app-shell-frame\"\n      className={cn(\n        'relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame border border-border1 bg-surface2 shadow-main-frame lg:m-2 lg:ml-0',\n        routeHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]',\n      )}\n    >\n      {routeHeader}\n      <div data-slot=\"app-shell-main\" aria-label={mainLabel} role=\"group\" className=\"min-h-0 overflow-y-auto\">\n        {children}\n      </div>\n    </div>\n  );\n  const frameProps: AppShellFrameProps = {\n    children: frame,\n    className: 'flex min-h-0 flex-1 flex-col',\n  };\n\n  return (\n    <div ref={ref} data-slot=\"app-shell\" className={cn('flex h-full min-h-0 flex-col', className)} {...props}>\n      {mobileHeader}\n      {renderFrame ? renderFrame(frameProps) : <div className={frameProps.className}>{frame}</div>}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;;;;AAiBO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,KAAA,mBACJA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,iJAAA;AAAA,QACA,cAAc,sBAAA,GAAyB;AAAA,OACzC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,wBACDC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,gBAAA,EAAiB,YAAA,EAAY,WAAW,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,yBAAA,EAC3E,QAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEF,EAAA,MAAM,UAAA,GAAiC;AAAA,IACrC,QAAA,EAAU,KAAA;AAAA,IACV,SAAA,EAAW;AAAA,GACb;AAEA,EAAA,uBACEF,eAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,WAAA,EAAY,SAAA,EAAWC,WAAA,CAAG,8BAAA,EAAgC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChG,QAAA,EAAA;AAAA,IAAA,YAAA;AAAA,IACA,WAAA,GAAc,YAAY,UAAU,CAAA,kCAAK,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACxF,CAAA;AAEJ;;;;"}

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { c as cn } from '../../cn-ByEbywDh.js';
+import { c as cn } from '../../cn-Dxjsbr9n.js';
 
 function AppShell({
   children,
@@ -21,17 +21,7 @@ function AppShell({
       ),
       children: [
         routeHeader,
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-slot": "app-shell-main",
-            "aria-label": mainLabel,
-            role: "group",
-            tabIndex: 0,
-            className: "min-h-0 overflow-y-auto",
-            children
-          }
-        )
+        /* @__PURE__ */ jsx("div", { "data-slot": "app-shell-main", "aria-label": mainLabel, role: "group", className: "min-h-0 overflow-y-auto", 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"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellFrameProps {\n  children: ReactNode;\n  className: string;\n}\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mainLabel: string;\n  mobileHeader?: ReactNode;\n  renderFrame?: (props: AppShellFrameProps) => ReactNode;\n  routeHeader?: ReactNode;\n}\n\nexport function AppShell({\n  children,\n  className,\n  mainLabel,\n  mobileHeader,\n  ref,\n  renderFrame,\n  routeHeader,\n  ...props\n}: AppShellProps) {\n  const frame = (\n    <div\n      data-slot=\"app-shell-frame\"\n      className={cn(\n        'relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame border border-border1 bg-surface2 shadow-main-frame lg:m-2 lg:ml-0',\n        routeHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]',\n      )}\n    >\n      {routeHeader}\n      <div\n        data-slot=\"app-shell-main\"\n        aria-label={mainLabel}\n        role=\"group\"\n        tabIndex={0}\n        className=\"min-h-0 overflow-y-auto\"\n      >\n        {children}\n      </div>\n    </div>\n  );\n  const frameProps: AppShellFrameProps = {\n    children: frame,\n    className: 'flex min-h-0 flex-1 flex-col',\n  };\n\n  return (\n    <div ref={ref} data-slot=\"app-shell\" className={cn('flex h-full min-h-0 flex-col', className)} {...props}>\n      {mobileHeader}\n      {renderFrame ? renderFrame(frameProps) : <div className={frameProps.className}>{frame}</div>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAiBO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,KAAA,mBACJ,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,iJAAA;AAAA,QACA,cAAc,sBAAA,GAAyB;AAAA,OACzC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,wBACD,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAU,gBAAA;AAAA,YACV,YAAA,EAAY,SAAA;AAAA,YACZ,IAAA,EAAK,OAAA;AAAA,YACL,QAAA,EAAU,CAAA;AAAA,YACV,SAAA,EAAU,yBAAA;AAAA,YAET;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEF,EAAA,MAAM,UAAA,GAAiC;AAAA,IACrC,QAAA,EAAU,KAAA;AAAA,IACV,SAAA,EAAW;AAAA,GACb;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,WAAA,EAAY,SAAA,EAAW,EAAA,CAAG,8BAAA,EAAgC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChG,QAAA,EAAA;AAAA,IAAA,YAAA;AAAA,IACA,WAAA,GAAc,YAAY,UAAU,CAAA,uBAAK,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACxF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"app-shell.es.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellFrameProps {\n  children: ReactNode;\n  className: string;\n}\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mainLabel: string;\n  mobileHeader?: ReactNode;\n  renderFrame?: (props: AppShellFrameProps) => ReactNode;\n  routeHeader?: ReactNode;\n}\n\nexport function AppShell({\n  children,\n  className,\n  mainLabel,\n  mobileHeader,\n  ref,\n  renderFrame,\n  routeHeader,\n  ...props\n}: AppShellProps) {\n  const frame = (\n    <div\n      data-slot=\"app-shell-frame\"\n      className={cn(\n        'relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame border border-border1 bg-surface2 shadow-main-frame lg:m-2 lg:ml-0',\n        routeHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]',\n      )}\n    >\n      {routeHeader}\n      <div data-slot=\"app-shell-main\" aria-label={mainLabel} role=\"group\" className=\"min-h-0 overflow-y-auto\">\n        {children}\n      </div>\n    </div>\n  );\n  const frameProps: AppShellFrameProps = {\n    children: frame,\n    className: 'flex min-h-0 flex-1 flex-col',\n  };\n\n  return (\n    <div ref={ref} data-slot=\"app-shell\" className={cn('flex h-full min-h-0 flex-col', className)} {...props}>\n      {mobileHeader}\n      {renderFrame ? renderFrame(frameProps) : <div className={frameProps.className}>{frame}</div>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAiBO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,KAAA,mBACJ,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,iJAAA;AAAA,QACA,cAAc,sBAAA,GAAyB;AAAA,OACzC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,wBACD,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,gBAAA,EAAiB,YAAA,EAAY,WAAW,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,yBAAA,EAC3E,QAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEF,EAAA,MAAM,UAAA,GAAiC;AAAA,IACrC,QAAA,EAAU,KAAA;AAAA,IACV,SAAA,EAAW;AAAA,GACb;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,WAAA,EAAY,SAAA,EAAW,EAAA,CAAG,8BAAA,EAAgC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChG,QAAA,EAAA;AAAA,IAAA,YAAA;AAAA,IACA,WAAA,GAAc,YAAY,UAAU,CAAA,uBAAK,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACxF,CAAA;AAEJ;;;;"}

package/dist/new/layout/page-header.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const pageHeader = require('../../page-header-CTdBcOWK.cjs');
+const pageHeader = require('../../page-header-AH0Kk_7X.cjs');
 
 
 

package/dist/new/layout/page-header.es.js

@@ -1,2 +1,2 @@
-export { P as PageHeader } from '../../page-header-CGRV1f_f.js';
+export { P as PageHeader } from '../../page-header-CyhgAInp.js';
 //# sourceMappingURL=page-header.es.js.map

package/dist/new/settings.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const settingsContainer = require('../settings-container-aSJeNRdZ.cjs');
+const settingsContainer = require('../settings-container-B61AM2uQ.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const Txt = require('../Txt-i-sXSs2m.cjs');
-const utils_cn = require('../cn-DnbTIGXa.cjs');
-const settingsRow = require('../settings-row-BKz6r927.cjs');
-const settingsLayout = require('../settings-layout-BjjVaZgN.cjs');
+const Txt = require('../Txt-BZXvaPLR.cjs');
+const utils_cn = require('../cn-DPfV6E6L.cjs');
+const settingsRow = require('../settings-row-BjlCkP3o.cjs');
+const settingsLayout = require('../settings-layout-e0UQtxvw.cjs');
 
 const SettingsTitleIdContext = React.createContext(void 0);
 function SettingsGroup({ className, ...props }) {

package/dist/new/settings.es.js

@@ -1,10 +1,10 @@
-export { S as SettingsContainer } from '../settings-container-C3d4Y528.js';
+export { S as SettingsContainer } from '../settings-container-XeohBaUd.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId, useContext, createContext } from 'react';
-import { T as Txt } from '../Txt-CfPhlZOu.js';
-import { c as cn } from '../cn-ByEbywDh.js';
-export { a as SettingsRow } from '../settings-row-T98nqxPD.js';
-export { S as SettingsLayout } from '../settings-layout-DlXTuCQ7.js';
+import { T as Txt } from '../Txt-23XtxAlc.js';
+import { c as cn } from '../cn-Dxjsbr9n.js';
+export { a as SettingsRow } from '../settings-row-CxdGvdwb.js';
+export { S as SettingsLayout } from '../settings-layout-0LmqNUIq.js';
 
 const SettingsTitleIdContext = createContext(void 0);
 function SettingsGroup({ className, ...props }) {

package/dist/new/sidebar.cjs.js

@@ -0,0 +1,460 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const mainSidebar = require('../main-sidebar-Dff0E73N.cjs');
+const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
+const utils_cn = require('../cn-DPfV6E6L.cjs');
+const React = require('react');
+const lucideReact = require('lucide-react');
+
+function SidebarNewBrand({ logo, title, className, ...props }) {
+  const { state } = mainSidebar.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("span", { className: "text-ui-md text-foreground truncate font-sans font-semibold tracking-tight", children: title })
+  ] });
+}
+
+function SidebarNewFooter({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { "data-slot": "sidebar-new-footer", className: utils_cn.cn("mt-auto shrink-0", className), ...props, children });
+}
+
+function SidebarNewHeader({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      "data-slot": "sidebar-new-header",
+      className: utils_cn.cn("flex h-header-default shrink-0 items-center gap-2 px-1", className),
+      ...props,
+      children
+    }
+  );
+}
+
+const NOISE = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`;
+const CARD_HEIGHT = 76;
+const BLOOM_HEIGHT = 100;
+const BLOOM_HOLD_Y = 60;
+const BLOOM_HOLD_X = 22.5;
+const GRAIN_OPACITY = 0.18;
+const GRAIN_SIZE = 110;
+const FALLOFF_RAMP = [0, 0.08, 0.16, 0.25, 0.34, 0.44, 0.55, 0.66, 0.78, 0.89, 1];
+const TONES = {
+  neutral: { colorVar: "--foreground", peak: 0.08, grain: true, text: "text-muted-foreground" },
+  warning: {
+    colorVar: "--notice-warning",
+    peak: 0.16,
+    grain: false,
+    text: "text-notice-warning-fg"
+  },
+  danger: {
+    colorVar: "--notice-destructive",
+    peak: 0.16,
+    grain: false,
+    text: "text-notice-destructive-fg"
+  }
+};
+function cubicFalloff(position) {
+  const inverse = 1 - position;
+  return inverse * inverse * inverse;
+}
+function easedBloom(colorVar, peak) {
+  const stops = FALLOFF_RAMP.map((position) => {
+    const alpha = (peak * cubicFalloff(position) * 100).toFixed(2);
+    return `color-mix(in oklch, var(${colorVar}) ${alpha}%, transparent) ${(position * 100).toFixed(0)}%`;
+  });
+  return `linear-gradient(to right, ${stops.join(", ")})`;
+}
+function easedMask(direction, hold) {
+  const stops = FALLOFF_RAMP.map((position) => {
+    const offset = (hold + (100 - hold) * position).toFixed(2);
+    return `rgb(0 0 0 / ${cubicFalloff(position).toFixed(3)}) ${offset}%`;
+  });
+  return `linear-gradient(${direction}, rgb(0 0 0 / 1) 0%, ${stops.join(", ")})`;
+}
+const BLOOM_MASK = `${easedMask("to bottom", BLOOM_HOLD_Y)}, ${easedMask("to right", BLOOM_HOLD_X)}`;
+function Bloom({ tone }) {
+  const current = TONES[tone];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "sidebar-new-meter-bloom",
+      className: "pointer-events-none absolute inset-x-0 top-0 -z-10",
+      style: {
+        height: BLOOM_HEIGHT,
+        backgroundImage: easedBloom(current.colorVar, current.peak),
+        maskImage: BLOOM_MASK,
+        maskComposite: "intersect"
+      },
+      children: current.grain ? /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "absolute inset-0",
+          style: {
+            backgroundImage: NOISE,
+            backgroundRepeat: "repeat",
+            backgroundSize: `${GRAIN_SIZE}px ${GRAIN_SIZE}px`,
+            opacity: GRAIN_OPACITY
+          }
+        }
+      ) : null
+    }
+  );
+}
+const SidebarNewMeter = React.forwardRef(function SidebarNewMeter2({
+  label,
+  value,
+  status,
+  tone = "neutral",
+  icon,
+  action,
+  href,
+  linkLabel,
+  LinkComponent: LinkProp,
+  state: stateProp,
+  className,
+  ...props
+}, ref) {
+  const ctx = mainSidebar.useMaybeSidebarState();
+  const state = stateProp ?? ctx?.state ?? "default";
+  const Link = LinkProp ?? ctx?.LinkComponent ?? "a";
+  const isCollapsed = state === "collapsed";
+  const current = TONES[tone];
+  if (isCollapsed) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "sidebar-new-meter",
+        "data-tone": tone,
+        "data-state": state,
+        className: utils_cn.cn(
+          "relative isolate flex items-center justify-center overflow-hidden rounded-lg border border-border bg-background px-1 py-2",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Bloom, { tone }),
+          href ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href, className: "absolute inset-0 rounded-lg", "aria-label": linkLabel }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-xs text-foreground pointer-events-none relative font-semibold tabular-nums", children: value })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "sidebar-new-meter",
+      "data-tone": tone,
+      "data-state": state,
+      className: utils_cn.cn(
+        "relative isolate flex flex-col justify-center overflow-hidden rounded-lg border border-border bg-background px-3",
+        href && "transition-colors hover:bg-card",
+        className
+      ),
+      style: { height: CARD_HEIGHT },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Bloom, { tone }),
+        href ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href, className: "absolute inset-0 rounded-lg", "aria-label": linkLabel }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            tone === "neutral" ? null : icon,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-muted-foreground font-medium", children: label }),
+            action ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-auto", children: action }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-lg text-foreground mt-0.5 leading-tight font-semibold tabular-nums", children: value }),
+          status ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-ui-xs mt-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: utils_cn.cn("truncate", current.text), children: status }) }) : null
+        ] })
+      ]
+    }
+  );
+});
+
+function SidebarNewNav({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    mainSidebar.MainSidebarNav,
+    {
+      className: utils_cn.cn(
+        "-mr-1.5",
+        "[&_[data-orientation=vertical]]:w-1 [&_[data-orientation=vertical]]:p-0",
+        "[&_[data-orientation=vertical][data-has-overflow-y]]:opacity-100",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pr-1.5", children })
+    }
+  );
+}
+
+function SidebarNewNavHeader({
+  children,
+  className,
+  state: stateProp,
+  href,
+  isActive,
+  LinkComponent: LinkProp,
+  ...props
+}) {
+  const context = mainSidebar.useMaybeSidebarState();
+  const state = stateProp ?? context?.state ?? "default";
+  const showTitle = state === "default";
+  const Link = LinkProp ?? context?.LinkComponent ?? "a";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("mt-2 mb-0.5 flex min-h-8 min-w-0 items-center", className), children: showTitle ? /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      ...props,
+      className: utils_cn.cn("max-w-full min-w-0 truncate pl-3 text-ui-sm font-medium", {
+        "text-foreground": isActive,
+        "text-muted-foreground": !isActive
+      }),
+      children: href ? /* @__PURE__ */ jsxRuntime.jsx(
+        Link,
+        {
+          href,
+          className: utils_cn.cn("block min-w-0 truncate transition-colors duration-normal", {
+            "hover:text-foreground": !isActive,
+            "text-foreground": isActive
+          }),
+          children
+        }
+      ) : children
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("header", { ...props, children }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "bg-border mx-3 h-px flex-1" })
+  ] }) });
+}
+
+const SidebarNewNavStackContext = React.createContext(void 0);
+function useSidebarNewNavStack() {
+  const context = React.useContext(SidebarNewNavStackContext);
+  if (!context) throw new Error("SidebarNew.NavStack components must be used within SidebarNew.NavStack.");
+  return context;
+}
+
+function SidebarNewNavStackRoot({
+  value,
+  rootValue = "root",
+  onValueChange,
+  children,
+  className,
+  ...props
+}) {
+  function closeView(returnFocusRef) {
+    onValueChange(rootValue);
+    requestAnimationFrame(() => {
+      const target = returnFocusRef?.current;
+      if (target && !target.closest("[inert]")) target.focus();
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarNewNavStackContext.Provider, { value: { activeValue: value, rootValue, closeView }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sidebar-new-nav-stack",
+      "data-value": value,
+      className: utils_cn.cn("relative grid min-w-0 overflow-hidden", className),
+      ...props,
+      children
+    }
+  ) });
+}
+
+function sidebarNewNavStackPageClasses(active, page, className) {
+  return utils_cn.cn(
+    "col-start-1 row-start-1 min-w-0 transition-[opacity,translate] duration-normal ease-out-custom will-change-[opacity,translate] motion-reduce:transition-none",
+    active && "relative translate-x-0 opacity-100",
+    !active && "pointer-events-none absolute inset-0 opacity-0",
+    !active && page === "root" && "-translate-x-2",
+    !active && page === "view" && "translate-x-2",
+    className
+  );
+}
+
+function SidebarNewNavStackRootView({ children, className, ...props }) {
+  const { state } = mainSidebar.useMainSidebar();
+  const { activeValue, rootValue } = useSidebarNewNavStack();
+  const active = state === "collapsed" || activeValue === rootValue;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      "data-slot": "sidebar-new-nav-stack-root",
+      "aria-hidden": !active,
+      inert: !active,
+      className: sidebarNewNavStackPageClasses(active, "root", className),
+      children
+    }
+  );
+}
+
+function SidebarNewNavStackView({
+  value,
+  title,
+  backLabel = "Back to main navigation",
+  returnFocusRef,
+  onBack,
+  children,
+  className,
+  ...props
+}) {
+  const { state } = mainSidebar.useMainSidebar();
+  const { activeValue, closeView } = useSidebarNewNavStack();
+  const active = state !== "collapsed" && activeValue === value;
+  const backRef = React.useRef(null);
+  const wasActiveRef = React.useRef(active);
+  React.useEffect(() => {
+    if (active && !wasActiveRef.current) backRef.current?.focus();
+    wasActiveRef.current = active;
+  }, [active]);
+  function handleBack() {
+    closeView(returnFocusRef);
+    onBack?.();
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...props,
+      "data-slot": "sidebar-new-nav-stack-view",
+      "data-value": value,
+      "aria-hidden": !active,
+      inert: !active,
+      className: sidebarNewNavStackPageClasses(active, "view", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            ref: backRef,
+            type: "button",
+            "aria-label": `${backLabel}: ${title}`,
+            onClick: handleBack,
+            className: utils_cn.cn(
+              mainSidebar.navItemClasses(),
+              "mb-2 grid grid-cols-[2rem_1fr_2rem] px-1 text-muted-foreground hover:text-foreground"
+            ),
+            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 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true" })
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+const SidebarNewNavStack = Object.assign(SidebarNewNavStackRoot, {
+  Root: SidebarNewNavStackRootView,
+  View: SidebarNewNavStackView
+});
+
+function SidebarNewRoot({ "aria-label": ariaLabel = "Sidebar", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { "aria-label": ariaLabel, className: "contents", children: /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarRoot, { ...props }) });
+}
+
+function getSidebarNewLinkKey(link) {
+  return `${link.url}:${link.name}`;
+}
+function SidebarNewSectionLink({ link, activeCandidates, level = 0, isActive }) {
+  const childLinks = link.children ?? [];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    mainSidebar.MainSidebarNavLink,
+    {
+      link,
+      isActive: isActive?.(link, activeCandidates) ?? link.isActive,
+      level,
+      subItems: childLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarNavList, { className: "mt-0.5", children: childLinks.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarNewSectionLink,
+        {
+          link: child,
+          activeCandidates,
+          level: level + 1,
+          isActive
+        },
+        getSidebarNewLinkKey(child)
+      )) }) : null
+    }
+  );
+}
+
+function getLinkKey(link) {
+  return `${link.url}:${link.name}`;
+}
+function SidebarNewSections({ sections, isActive, className }) {
+  const baseId = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: sections.map((section) => {
+    const showSeparator = section.links.length > 0 && section.separator;
+    const headerId = section.title ? `${baseId}-${section.key}` : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      mainSidebar.MainSidebarNavSection,
+      {
+        className,
+        "aria-labelledby": headerId,
+        "aria-label": !headerId ? section.key : void 0,
+        children: [
+          showSeparator ? /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarNavSeparator, {}) : null,
+          section.title ? /* @__PURE__ */ jsxRuntime.jsx(SidebarNewNavHeader, { id: headerId, href: section.href, isActive: section.isHeaderActive, children: section.title }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarNavList, { children: section.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+            SidebarNewSectionLink,
+            {
+              link,
+              activeCandidates: section.links,
+              isActive
+            },
+            getLinkKey(link)
+          )) })
+        ]
+      },
+      section.key
+    );
+  }) });
+}
+
+function SidebarNewTrigger(props) {
+  const context = mainSidebar.useMaybeSidebarState();
+  if (context?.isMobile) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(mainSidebar.MainSidebarTrigger, { ...props });
+}
+
+const SidebarNew = Object.assign(SidebarNewRoot, {
+  Brand: SidebarNewBrand,
+  Footer: SidebarNewFooter,
+  Header: SidebarNewHeader,
+  Meter: SidebarNewMeter,
+  MobileTrigger: mainSidebar.MainSidebarMobileTrigger,
+  Nav: SidebarNewNav,
+  NavHeader: SidebarNewNavHeader,
+  NavLabel: mainSidebar.MainSidebarNavLabel,
+  NavLink: mainSidebar.MainSidebarNavLink,
+  NavList: mainSidebar.MainSidebarNavList,
+  NavSection: mainSidebar.MainSidebarNavSection,
+  NavSeparator: mainSidebar.MainSidebarNavSeparator,
+  NavStack: SidebarNewNavStack,
+  Provider: mainSidebar.MainSidebarProvider,
+  Sections: SidebarNewSections,
+  Trigger: SidebarNewTrigger
+});
+
+exports.SidebarNewProvider = mainSidebar.MainSidebarProvider;
+exports.getIsLinkActive = mainSidebar.getIsLinkActive;
+exports.navItemClasses = mainSidebar.navItemClasses;
+exports.useSidebarNew = mainSidebar.useMainSidebar;
+exports.SidebarNew = SidebarNew;
+exports.SidebarNewBrand = SidebarNewBrand;
+exports.SidebarNewFooter = SidebarNewFooter;
+exports.SidebarNewHeader = SidebarNewHeader;
+exports.SidebarNewMeter = SidebarNewMeter;
+exports.SidebarNewNav = SidebarNewNav;
+exports.SidebarNewNavHeader = SidebarNewNavHeader;
+exports.SidebarNewNavStack = SidebarNewNavStack;
+exports.SidebarNewRoot = SidebarNewRoot;
+exports.SidebarNewSections = SidebarNewSections;
+exports.SidebarNewTrigger = SidebarNewTrigger;
+//# sourceMappingURL=sidebar.cjs.js.map