@mastra/playground-ui 53.0.0-alpha.9 → 53.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/dist/{code-DRGJVroV.js → code-D4Vw_fYq.js} +22 -16
  2. package/dist/code-D4Vw_fYq.js.map +1 -0
  3. package/dist/{code-BJMC6T9D.cjs → code-DhrdtZce.cjs} +22 -15
  4. package/dist/code-DhrdtZce.cjs.map +1 -0
  5. package/dist/{code-block-CBJhDEeB.js → code-block-DeksY23p.js} +2 -2
  6. package/dist/{code-block-CBJhDEeB.js.map → code-block-DeksY23p.js.map} +1 -1
  7. package/dist/{code-block-fmv8bHoT.cjs → code-block-DgHrBuR8.cjs} +2 -2
  8. package/dist/{code-block-fmv8bHoT.cjs.map → code-block-DgHrBuR8.cjs.map} +1 -1
  9. package/dist/{command-DWFd0d4c.js → command-Be-KrIAX.js} +2 -2
  10. package/dist/{command-DWFd0d4c.js.map → command-Be-KrIAX.js.map} +1 -1
  11. package/dist/{command-CUev1UxH.cjs → command-DsTBCmQq.cjs} +2 -2
  12. package/dist/{command-CUev1UxH.cjs.map → command-DsTBCmQq.cjs.map} +1 -1
  13. package/dist/components/ChatShell.cjs.js +20 -1
  14. package/dist/components/ChatShell.cjs.js.map +1 -1
  15. package/dist/components/ChatShell.es.js +20 -1
  16. package/dist/components/ChatShell.es.js.map +1 -1
  17. package/dist/components/Code.cjs.js +3 -1
  18. package/dist/components/Code.cjs.js.map +1 -1
  19. package/dist/components/Code.es.js +1 -1
  20. package/dist/components/CodeBlock.cjs.js +1 -1
  21. package/dist/components/CodeBlock.es.js +1 -1
  22. package/dist/components/CodeEditor.cjs.js +2 -1
  23. package/dist/components/CodeEditor.cjs.js.map +1 -1
  24. package/dist/components/CodeEditor.es.js +1 -1
  25. package/dist/components/Command.cjs.js +1 -1
  26. package/dist/components/Command.es.js +1 -1
  27. package/dist/components/CommandPalette.cjs.js +1 -1
  28. package/dist/components/CommandPalette.es.js +1 -1
  29. package/dist/components/DataCodeSection.cjs.js +1 -1
  30. package/dist/components/DataCodeSection.es.js +1 -1
  31. package/dist/components/DataPanel.cjs.js +1 -1
  32. package/dist/components/DataPanel.es.js +1 -1
  33. package/dist/components/Dialog.cjs.js +181 -2
  34. package/dist/components/Dialog.cjs.js.map +1 -1
  35. package/dist/components/Dialog.es.js +183 -1
  36. package/dist/components/Dialog.es.js.map +1 -1
  37. package/dist/components/HorizontalBars.cjs.js +1 -1
  38. package/dist/components/HorizontalBars.es.js +1 -1
  39. package/dist/components/IntegrationDialog.cjs.js +105 -0
  40. package/dist/components/IntegrationDialog.cjs.js.map +1 -0
  41. package/dist/components/IntegrationDialog.d.ts +2 -0
  42. package/dist/components/IntegrationDialog.es.js +101 -0
  43. package/dist/components/IntegrationDialog.es.js.map +1 -0
  44. package/dist/components/MarkdownRenderer.cjs.js +1 -1
  45. package/dist/components/MarkdownRenderer.es.js +1 -1
  46. package/dist/components/ThreadRail.cjs.js +19 -0
  47. package/dist/components/ThreadRail.cjs.js.map +1 -1
  48. package/dist/components/ThreadRail.es.js +19 -1
  49. package/dist/components/ThreadRail.es.js.map +1 -1
  50. package/dist/components/ai/plan.cjs.js +1 -1
  51. package/dist/components/ai/plan.es.js +1 -1
  52. package/dist/components/ai/tool-call.cjs.js +165 -0
  53. package/dist/components/ai/tool-call.cjs.js.map +1 -1
  54. package/dist/components/ai/tool-call.es.js +159 -3
  55. package/dist/components/ai/tool-call.es.js.map +1 -1
  56. package/dist/{data-code-section-D5I0m1cS.cjs → data-code-section-B_lg_J_0.cjs} +2 -2
  57. package/dist/{data-code-section-D5I0m1cS.cjs.map → data-code-section-B_lg_J_0.cjs.map} +1 -1
  58. package/dist/{data-code-section-d3NffL3V.js → data-code-section-Cm_W_XhO.js} +2 -2
  59. package/dist/{data-code-section-d3NffL3V.js.map → data-code-section-Cm_W_XhO.js.map} +1 -1
  60. package/dist/{data-panel-Bo2HCylZ.cjs → data-panel-Cv9j_IGQ.cjs} +2 -2
  61. package/dist/{data-panel-Bo2HCylZ.cjs.map → data-panel-Cv9j_IGQ.cjs.map} +1 -1
  62. package/dist/{data-panel-T3vp7wTD.js → data-panel-DXxeSnL1.js} +2 -2
  63. package/dist/{data-panel-T3vp7wTD.js.map → data-panel-DXxeSnL1.js.map} +1 -1
  64. package/dist/dialog-CZMPDVUj.js +259 -0
  65. package/dist/dialog-CZMPDVUj.js.map +1 -0
  66. package/dist/dialog-D-7Hkb3j.cjs +293 -0
  67. package/dist/dialog-D-7Hkb3j.cjs.map +1 -0
  68. package/dist/domains/metrics/components/token-usage-by-agent-card-view.cjs.js +1 -1
  69. package/dist/domains/metrics/components/token-usage-by-agent-card-view.es.js +1 -1
  70. package/dist/domains/metrics/components/traces-volume-card-view.cjs.js +1 -1
  71. package/dist/domains/metrics/components/traces-volume-card-view.es.js +1 -1
  72. package/dist/domains/traces/components/span-data-panel-view.cjs.js +1 -1
  73. package/dist/domains/traces/components/span-data-panel-view.es.js +1 -1
  74. package/dist/domains/traces/components/trace-columns-menu.cjs.js +1 -1
  75. package/dist/domains/traces/components/trace-columns-menu.es.js +1 -1
  76. package/dist/domains/traces/components/trace-data-panel-view.cjs.js +1 -1
  77. package/dist/domains/traces/components/trace-data-panel-view.es.js +1 -1
  78. package/dist/domains/traces/hooks/use-branch.cjs.js +2 -6
  79. package/dist/domains/traces/hooks/use-branch.cjs.js.map +1 -1
  80. package/dist/domains/traces/hooks/use-branch.es.js +2 -6
  81. package/dist/domains/traces/hooks/use-branch.es.js.map +1 -1
  82. package/dist/domains/traces/hooks/use-download-trace-json.cjs.js +4 -1
  83. package/dist/domains/traces/hooks/use-download-trace-json.cjs.js.map +1 -1
  84. package/dist/domains/traces/hooks/use-download-trace-json.es.js +4 -1
  85. package/dist/domains/traces/hooks/use-download-trace-json.es.js.map +1 -1
  86. package/dist/domains/traces/hooks/use-trace-spans.cjs.js +10 -7
  87. package/dist/domains/traces/hooks/use-trace-spans.cjs.js.map +1 -1
  88. package/dist/domains/traces/hooks/use-trace-spans.es.js +10 -7
  89. package/dist/domains/traces/hooks/use-trace-spans.es.js.map +1 -1
  90. package/dist/ee/signals/settings/signal-definition-form-dialog.cjs.js +1 -1
  91. package/dist/ee/signals/settings/signal-definition-form-dialog.es.js +1 -1
  92. package/dist/{highlight-CSJjjoqh.js → highlight-BmpoELR4.js} +6 -2
  93. package/dist/{highlight-CSJjjoqh.js.map → highlight-BmpoELR4.js.map} +1 -1
  94. package/dist/{highlight-CEt2vhD8.cjs → highlight-DK1dn-Fh.cjs} +6 -1
  95. package/dist/{highlight-CEt2vhD8.cjs.map → highlight-DK1dn-Fh.cjs.map} +1 -1
  96. package/dist/{horizontal-bars-DZ5J4TKv.js → horizontal-bars-CyP-B-BX.js} +37 -4
  97. package/dist/horizontal-bars-CyP-B-BX.js.map +1 -0
  98. package/dist/{horizontal-bars-CE1O-Y6G.cjs → horizontal-bars-Dgq3PYsg.cjs} +37 -4
  99. package/dist/horizontal-bars-Dgq3PYsg.cjs.map +1 -0
  100. package/dist/{markdown-renderer-DiJBbnYG.js → markdown-renderer-CaFpZTFS.js} +2 -2
  101. package/dist/{markdown-renderer-DiJBbnYG.js.map → markdown-renderer-CaFpZTFS.js.map} +1 -1
  102. package/dist/{markdown-renderer-DGIzNAQY.cjs → markdown-renderer-GVtZLunG.cjs} +2 -2
  103. package/dist/{markdown-renderer-DGIzNAQY.cjs.map → markdown-renderer-GVtZLunG.cjs.map} +1 -1
  104. package/dist/src/domains/traces/hooks/use-trace-spans.d.ts +3 -1
  105. package/dist/src/ds/components/ChatShell/chat-shell.d.ts +19 -2
  106. package/dist/src/ds/components/ChatShell/index.d.ts +3 -2
  107. package/dist/src/ds/components/Code/index.d.ts +1 -0
  108. package/dist/src/ds/components/Code/use-highlight.d.ts +10 -0
  109. package/dist/src/ds/components/CodeEditor/highlight.d.ts +1 -0
  110. package/dist/src/ds/components/CodeEditor/index.d.ts +1 -1
  111. package/dist/src/ds/components/Dialog/dialog-action.d.ts +9 -0
  112. package/dist/src/ds/components/Dialog/dialog-context.d.ts +16 -0
  113. package/dist/src/ds/components/Dialog/dialog-new-variant.stories.d.ts +64 -0
  114. package/dist/src/ds/components/Dialog/dialog.d.ts +15 -6
  115. package/dist/src/ds/components/Dialog/index.d.ts +2 -0
  116. package/dist/src/ds/components/HorizontalBars/horizontal-bars.stories.d.ts +2 -0
  117. package/dist/src/ds/components/IntegrationDialog/__fixtures__/integrations-catalog.d.ts +2 -0
  118. package/dist/src/ds/components/IntegrationDialog/index.d.ts +2 -0
  119. package/dist/src/ds/components/IntegrationDialog/integration-dialog.d.ts +28 -0
  120. package/dist/src/ds/components/IntegrationDialog/integration-dialog.stories.d.ts +24 -0
  121. package/dist/src/ds/components/ThreadRail/index.d.ts +1 -0
  122. package/dist/src/ds/components/ThreadRail/turn-groups.d.ts +19 -0
  123. package/dist/src/ds/components/ai/tool-call/ansi.d.ts +2 -0
  124. package/dist/src/ds/components/ai/tool-call/group-consecutive.d.ts +17 -0
  125. package/dist/src/ds/components/ai/tool-call/index.d.ts +4 -0
  126. package/dist/src/ds/components/ai/tool-call/tool-call-edit.d.ts +4 -0
  127. package/dist/src/ds/components/ai/tool-call/tool-call-group.d.ts +14 -0
  128. package/dist/src/ds/components/ai/tool-call/tool-call.d.ts +4 -0
  129. package/dist/src/ds/components/ai/tool-call/tool-presentation.d.ts +10 -0
  130. package/dist/style.css +138 -0
  131. package/package.json +8 -8
  132. package/dist/code-BJMC6T9D.cjs.map +0 -1
  133. package/dist/code-DRGJVroV.js.map +0 -1
  134. package/dist/dialog-CESxLg8S.js +0 -76
  135. package/dist/dialog-CESxLg8S.js.map +0 -1
  136. package/dist/dialog-K0q0KOOW.cjs +0 -107
  137. package/dist/dialog-K0q0KOOW.cjs.map +0 -1
  138. package/dist/horizontal-bars-CE1O-Y6G.cjs.map +0 -1
  139. package/dist/horizontal-bars-DZ5J4TKv.js.map +0 -1
@@ -0,0 +1,2 @@
1
+ import { IntegrationDialogItem } from '../integration-dialog';
2
+ export declare const integrationsCatalog: IntegrationDialogItem[];
@@ -0,0 +1,2 @@
1
+ export { IntegrationDialog } from './integration-dialog';
2
+ export type { IntegrationDialogItem, IntegrationDialogProps } from './integration-dialog';
@@ -0,0 +1,28 @@
1
+ import { ReactNode } from 'react';
2
+ import { DialogProps } from '../Dialog';
3
+ export type IntegrationDialogItem = {
4
+ id: string;
5
+ name: string;
6
+ logo?: ReactNode;
7
+ badge?: string;
8
+ meta?: string;
9
+ disabled?: boolean;
10
+ };
11
+ export type IntegrationDialogProps = Omit<DialogProps, 'variant' | 'intent' | 'children'> & {
12
+ title: ReactNode;
13
+ description?: ReactNode;
14
+ items: IntegrationDialogItem[];
15
+ onSelect: (item: IntegrationDialogItem) => void;
16
+ searchPlaceholder?: string;
17
+ searchLabel?: string;
18
+ emptyMessage?: ReactNode;
19
+ children?: ReactNode;
20
+ className?: string;
21
+ };
22
+ declare function IntegrationDialog({ title, description, items, onSelect, searchPlaceholder, searchLabel, emptyMessage, children, className, ...props }: IntegrationDialogProps): import("react").JSX.Element;
23
+ declare namespace IntegrationDialog {
24
+ var Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogTrigger.Props<unknown> & {
25
+ asChild?: boolean;
26
+ }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
27
+ }
28
+ export { IntegrationDialog };
@@ -0,0 +1,24 @@
1
+ import { StoryObj } from '@storybook/react-vite';
2
+ import { IntegrationDialogItem } from './integration-dialog';
3
+ declare function Example({ items }: {
4
+ items?: IntegrationDialogItem[];
5
+ }): import("react").JSX.Element;
6
+ declare const meta: {
7
+ title: string;
8
+ component: typeof Example;
9
+ parameters: {
10
+ layout: string;
11
+ docs: {
12
+ description: {
13
+ component: string;
14
+ };
15
+ };
16
+ };
17
+ };
18
+ export default meta;
19
+ type Story = StoryObj<typeof meta>;
20
+ export declare const Default: Story;
21
+ export declare const FewItems: Story;
22
+ export declare const NoLogos: Story;
23
+ export declare const DisabledItem: Story;
24
+ export declare const Empty: Story;
@@ -1,2 +1,3 @@
1
1
  export * from './thread-rail';
2
2
  export * from './thread-rail-turns';
3
+ export * from './turn-groups';
@@ -0,0 +1,19 @@
1
+ /** A user's turn and everything the run produced under it. */
2
+ export interface TurnGroup<T> {
3
+ key: string;
4
+ entries: T[];
5
+ /** Opened by a user message, so it reserves room and anchors the scroll. */
6
+ opensTurn: boolean;
7
+ }
8
+ export interface TurnRules<T> {
9
+ key: (entry: T) => string;
10
+ opensTurn: (entry: T) => boolean;
11
+ /** A marker that belongs above the turn it introduces but arrives after the previous one, so it moves down. */
12
+ introduces?: (entry: T) => boolean;
13
+ }
14
+ /**
15
+ * Cuts a timeline where the reader's attention moves: a user message starts a turn,
16
+ * and everything the run answers with belongs to it. Entries before the first opener
17
+ * form a turn of their own that opens nothing.
18
+ */
19
+ export declare function groupTurns<T>(entries: T[], { key, opensTurn, introduces }: TurnRules<T>): TurnGroup<T>[];
@@ -0,0 +1,2 @@
1
+ export declare function stripAnsi(text: string): string;
2
+ export declare function stripSerializedAnsi(text: string): string;
@@ -0,0 +1,17 @@
1
+ export interface ConsecutiveGroups<T> {
2
+ /** Each run, keyed by its first member. */
3
+ byFirstKey: Map<string, T[]>;
4
+ /** The members after the first, which draw nothing of their own. */
5
+ memberKeys: Set<string>;
6
+ }
7
+ export interface ConsecutiveRules<T, U extends T> {
8
+ key: (item: U) => string;
9
+ /** Whether an item extends the run; anything else ends it. */
10
+ joins: (item: T) => item is U;
11
+ /** Runs shorter than this stay individual rows. */
12
+ min?: number;
13
+ }
14
+ /** Consecutive tool calls this long fold into one group row. */
15
+ export declare const TOOL_GROUP_MIN = 3;
16
+ /** Cuts a list into runs of joining items, keeping only the runs long enough to fold. */
17
+ export declare function groupConsecutive<T, U extends T>(items: readonly T[], { key, joins, min }: ConsecutiveRules<T, U>): ConsecutiveGroups<U>;
@@ -1,2 +1,6 @@
1
+ export * from './ansi';
2
+ export * from './group-consecutive';
1
3
  export * from './tool-call';
4
+ export * from './tool-call-edit';
5
+ export * from './tool-call-group';
2
6
  export * from './tool-presentation';
@@ -0,0 +1,4 @@
1
+ import { ToolEdit } from './tool-presentation';
2
+ export declare function ToolCallEdit({ edit }: {
3
+ edit: ToolEdit;
4
+ }): import("react").JSX.Element;
@@ -0,0 +1,14 @@
1
+ import { ReactNode } from 'react';
2
+ import { ToolCallStatus } from './tool-call';
3
+ export interface ToolCallGroupStep {
4
+ toolName: string;
5
+ args: unknown;
6
+ status: ToolCallStatus;
7
+ }
8
+ export interface ToolCallGroupProps {
9
+ steps: ToolCallGroupStep[];
10
+ /** Rendered ahead of the icon, e.g. the time the first step began. */
11
+ leading?: ReactNode;
12
+ children: ReactNode;
13
+ }
14
+ export declare function ToolCallGroup({ steps, leading, children }: ToolCallGroupProps): import("react").JSX.Element;
@@ -38,4 +38,8 @@ export interface ToolCallMonoProps extends ComponentProps<'pre'> {
38
38
  }
39
39
  /** Monospace body block of an expanded call — arguments, command, output — with a hover copy. */
40
40
  export declare const ToolCallMono: ({ copyText, className, children, ...props }: ToolCallMonoProps) => import("react").JSX.Element;
41
+ /** A shell command as the body shows it: `$` in the margin, the copy takes the command alone. */
42
+ export declare const ToolCallCommand: ({ command }: {
43
+ command: string;
44
+ }) => import("react").JSX.Element;
41
45
  export type { ToolCallStatus };
@@ -10,3 +10,13 @@ export interface ToolPresentation {
10
10
  /** Tool arguments and results as the mono body shows them: strings verbatim, the rest pretty JSON. */
11
11
  export declare function stringifyToolValue(value: unknown): string;
12
12
  export declare function presentTool(toolName: string, args: unknown): ToolPresentation;
13
+ export type ToolEdit = {
14
+ path?: string;
15
+ } & ({
16
+ oldText: string;
17
+ newText: string;
18
+ } | {
19
+ content: string;
20
+ });
21
+ export declare function toolEdit(toolName: string, args: unknown): ToolEdit | undefined;
22
+ export declare function isTaskTool(toolName: string): boolean;
package/dist/style.css CHANGED
@@ -2234,6 +2234,10 @@
2234
2234
  max-height: calc(85vh + 3rem);
2235
2235
  }
2236
2236
 
2237
+ .max-h-\[calc\(100dvh-2rem\)\] {
2238
+ max-height: calc(100dvh - 2rem);
2239
+ }
2240
+
2237
2241
  .max-h-\[calc\(100dvh-3rem\)\] {
2238
2242
  max-height: calc(100dvh - 3rem);
2239
2243
  }
@@ -2326,14 +2330,30 @@
2326
2330
  min-height: 100dvh;
2327
2331
  }
2328
2332
 
2333
+ .min-h-form-default {
2334
+ min-height: var(--spacing-form-default);
2335
+ }
2336
+
2329
2337
  .min-h-form-md {
2330
2338
  min-height: var(--spacing-form-md);
2331
2339
  }
2332
2340
 
2341
+ .min-h-form-sm {
2342
+ min-height: var(--spacing-form-sm);
2343
+ }
2344
+
2345
+ .min-h-form-xs {
2346
+ min-height: var(--spacing-form-xs);
2347
+ }
2348
+
2333
2349
  .min-h-full {
2334
2350
  min-height: 100%;
2335
2351
  }
2336
2352
 
2353
+ .w-\(--bar-width\) {
2354
+ width: var(--bar-width);
2355
+ }
2356
+
2337
2357
  .w-\(--sidebar-width\) {
2338
2358
  width: var(--sidebar-width);
2339
2359
  }
@@ -2562,6 +2582,10 @@
2562
2582
  width: 33.5rem;
2563
2583
  }
2564
2584
 
2585
+ .w-\[calc\(100\%-2rem\)\] {
2586
+ width: calc(100% - 2rem);
2587
+ }
2588
+
2565
2589
  .w-\[calc\(100vw-1\.5rem\)\] {
2566
2590
  width: calc(100vw - 1.5rem);
2567
2591
  }
@@ -4474,6 +4498,16 @@
4474
4498
  }
4475
4499
  }
4476
4500
 
4501
+ .bg-error\/10 {
4502
+ background-color: var(--color-error);
4503
+ }
4504
+
4505
+ @supports (color: color-mix(in lab, red, red)) {
4506
+ .bg-error\/10 {
4507
+ background-color: color-mix(in oklab, var(--color-error) 10%, transparent);
4508
+ }
4509
+ }
4510
+
4477
4511
  .bg-gray-100 {
4478
4512
  background-color: var(--color-gray-100);
4479
4513
  }
@@ -5102,6 +5136,10 @@
5102
5136
  padding-inline: 32px;
5103
5137
  }
5104
5138
 
5139
+ .px-\[inherit\] {
5140
+ padding-inline: inherit;
5141
+ }
5142
+
5105
5143
  .py-0 {
5106
5144
  padding-block: var(--spacing-0);
5107
5145
  }
@@ -5222,6 +5260,10 @@
5222
5260
  padding-top: var(--spacing-12);
5223
5261
  }
5224
5262
 
5263
+ .pr-0 {
5264
+ padding-right: var(--spacing-0);
5265
+ }
5266
+
5225
5267
  .pr-1 {
5226
5268
  padding-right: var(--spacing-1);
5227
5269
  }
@@ -5234,6 +5276,10 @@
5234
5276
  padding-right: var(--spacing-2);
5235
5277
  }
5236
5278
 
5279
+ .pr-2\.5 {
5280
+ padding-right: var(--spacing-2_5);
5281
+ }
5282
+
5237
5283
  .pr-3 {
5238
5284
  padding-right: var(--spacing-3);
5239
5285
  }
@@ -5637,6 +5683,10 @@
5637
5683
  text-wrap: wrap;
5638
5684
  }
5639
5685
 
5686
+ .\[overflow-wrap\:anywhere\] {
5687
+ overflow-wrap: anywhere;
5688
+ }
5689
+
5640
5690
  .break-words {
5641
5691
  overflow-wrap: break-word;
5642
5692
  }
@@ -5657,6 +5707,10 @@
5657
5707
  text-overflow: ellipsis;
5658
5708
  }
5659
5709
 
5710
+ .whitespace-normal {
5711
+ white-space: normal;
5712
+ }
5713
+
5660
5714
  .whitespace-nowrap {
5661
5715
  white-space: nowrap;
5662
5716
  }
@@ -6334,6 +6388,12 @@
6334
6388
  transition-duration: var(--tw-duration, var(--default-transition-duration));
6335
6389
  }
6336
6390
 
6391
+ .transition-\[clip-path\] {
6392
+ transition-property: clip-path;
6393
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
6394
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
6395
+ }
6396
+
6337
6397
  .transition-\[color\,background-color\,opacity\] {
6338
6398
  transition-property: color, background-color, opacity;
6339
6399
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -6376,6 +6436,12 @@
6376
6436
  transition-duration: var(--tw-duration, var(--default-transition-duration));
6377
6437
  }
6378
6438
 
6439
+ .transition-\[min-height\] {
6440
+ transition-property: min-height;
6441
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
6442
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
6443
+ }
6444
+
6379
6445
  .transition-\[opacity\,filter\,scale\] {
6380
6446
  transition-property: opacity, filter, scale;
6381
6447
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -6506,6 +6572,16 @@
6506
6572
  transition-duration: 1s;
6507
6573
  }
6508
6574
 
6575
+ .duration-\[440ms\] {
6576
+ --tw-duration: .44s;
6577
+ transition-duration: .44s;
6578
+ }
6579
+
6580
+ .duration-\[1500ms\] {
6581
+ --tw-duration: 1.5s;
6582
+ transition-duration: 1.5s;
6583
+ }
6584
+
6509
6585
  .duration-normal {
6510
6586
  transition-duration: var(--duration-normal);
6511
6587
  }
@@ -6514,6 +6590,16 @@
6514
6590
  transition-duration: var(--duration-slow);
6515
6591
  }
6516
6592
 
6593
+ .ease-\[cubic-bezier\(0\.2\,0\,0\.2\,1\)\] {
6594
+ --tw-ease: cubic-bezier(.2,0,.2,1);
6595
+ transition-timing-function: cubic-bezier(.2, 0, .2, 1);
6596
+ }
6597
+
6598
+ .ease-\[cubic-bezier\(0\.3\,0\,0\.2\,1\)\] {
6599
+ --tw-ease: cubic-bezier(.3,0,.2,1);
6600
+ transition-timing-function: cubic-bezier(.3, 0, .2, 1);
6601
+ }
6602
+
6517
6603
  .ease-\[cubic-bezier\(0\.32\,0\.72\,0\,1\)\] {
6518
6604
  --tw-ease: cubic-bezier(.32,.72,0,1);
6519
6605
  transition-timing-function: cubic-bezier(.32, .72, 0, 1);
@@ -6524,6 +6610,11 @@
6524
6610
  transition-timing-function: var(--ease-in-out);
6525
6611
  }
6526
6612
 
6613
+ .ease-linear {
6614
+ --tw-ease: linear;
6615
+ transition-timing-function: linear;
6616
+ }
6617
+
6527
6618
  .ease-out {
6528
6619
  --tw-ease: var(--ease-out);
6529
6620
  transition-timing-function: var(--ease-out);
@@ -6620,6 +6711,10 @@
6620
6711
  --studio-frame-radius: 1.5rem;
6621
6712
  }
6622
6713
 
6714
+ .\[clip-path\:inset\(0_100\%_0_0\)\] {
6715
+ clip-path: inset(0 100% 0 0);
6716
+ }
6717
+
6623
6718
  .\[contain-intrinsic-size\:auto_10rem\] {
6624
6719
  contain-intrinsic-size: auto 10rem;
6625
6720
  }
@@ -6822,10 +6917,18 @@
6822
6917
  opacity: 1;
6823
6918
  }
6824
6919
 
6920
+ .group-data-\[completed\]\/hold\:\[clip-path\:inset\(0\)\]:is(:where(.group\/hold)[data-completed] *) {
6921
+ clip-path: inset(0);
6922
+ }
6923
+
6825
6924
  .group-data-\[disabled\]\/switch\:w-5:is(:where(.group\/switch)[data-disabled] *) {
6826
6925
  width: var(--spacing-5);
6827
6926
  }
6828
6927
 
6928
+ .group-data-\[holding\]\/hold\:\[clip-path\:inset\(0\)\]:is(:where(.group\/hold)[data-holding] *) {
6929
+ clip-path: inset(0);
6930
+ }
6931
+
6829
6932
  .group-data-\[indeterminate\]\/checkbox-indicator\:block:is(:where(.group\/checkbox-indicator)[data-indeterminate] *) {
6830
6933
  display: block;
6831
6934
  }
@@ -8141,6 +8244,10 @@
8141
8244
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
8142
8245
  }
8143
8246
 
8247
+ .disabled\:pointer-events-none:disabled {
8248
+ pointer-events: none;
8249
+ }
8250
+
8144
8251
  .disabled\:cursor-not-allowed:disabled {
8145
8252
  cursor: not-allowed;
8146
8253
  }
@@ -9237,6 +9344,16 @@
9237
9344
  --tw-duration: 0s;
9238
9345
  transition-duration: 0s;
9239
9346
  }
9347
+
9348
+ .motion-reduce\:group-data-\[holding\]\/hold\:\[clip-path\:inset\(0_50\%_0_0\)\]:is(:where(.group\/hold)[data-holding] *) {
9349
+ clip-path: inset(0 50% 0 0);
9350
+ }
9351
+ }
9352
+
9353
+ @media not all and (min-width: 22rem) {
9354
+ .max-\[22rem\]\:w-full {
9355
+ width: 100%;
9356
+ }
9240
9357
  }
9241
9358
 
9242
9359
  @media (min-width: 1536px) {
@@ -9727,6 +9844,10 @@
9727
9844
  translate: var(--tw-translate-x) var(--tw-translate-y);
9728
9845
  }
9729
9846
 
9847
+ .dark\:block:is(.dark *) {
9848
+ display: block;
9849
+ }
9850
+
9730
9851
  .dark\:border-transparent:is(.dark *) {
9731
9852
  border-color: #0000;
9732
9853
  }
@@ -9842,6 +9963,10 @@
9842
9963
  }
9843
9964
  }
9844
9965
 
9966
+ .dark\:\[clip-path\:inset\(0_0_0_var\(--bar-width\)\)\]:is(.dark *) {
9967
+ clip-path: inset(0 0 0 var(--bar-width));
9968
+ }
9969
+
9845
9970
  @media (hover: hover) {
9846
9971
  .dark\:hover\:bg-accent1\/90:is(.dark *):hover {
9847
9972
  background-color: var(--color-accent1);
@@ -9859,6 +9984,10 @@
9859
9984
  }
9860
9985
 
9861
9986
  @starting-style {
9987
+ .starting\:min-h-0 {
9988
+ min-height: var(--spacing-0);
9989
+ }
9990
+
9862
9991
  .starting\:opacity-0 {
9863
9992
  opacity: 0;
9864
9993
  }
@@ -10849,6 +10978,15 @@
10849
10978
  color: var(--color-neutral5);
10850
10979
  }
10851
10980
 
10981
+ .\[\&\>img\]\:size-full > img {
10982
+ width: 100%;
10983
+ height: 100%;
10984
+ }
10985
+
10986
+ .\[\&\>img\]\:object-contain > img {
10987
+ object-fit: contain;
10988
+ }
10989
+
10852
10990
  .\[\&\>input\]\:flex-1 > input {
10853
10991
  flex: 1;
10854
10992
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mastra/playground-ui",
3
3
  "type": "module",
4
- "version": "53.0.0-alpha.9",
4
+ "version": "53.0.0",
5
5
  "description": "Mastra Playground components",
6
6
  "sideEffects": [
7
7
  "**/*.css"
@@ -160,8 +160,8 @@
160
160
  "react": ">=19.0.0",
161
161
  "react-dom": ">=19.0.0",
162
162
  "tailwindcss": "^4.0.0",
163
- "@mastra/client-js": "^1.44.0-alpha.8",
164
- "@mastra/react": "1.4.11-alpha.8"
163
+ "@mastra/react": "1.4.11",
164
+ "@mastra/client-js": "^1.44.0"
165
165
  },
166
166
  "devDependencies": {
167
167
  "@storybook/addon-a11y": "^10.4.1",
@@ -202,11 +202,11 @@
202
202
  "vite-plugin-dts": "^4.5.4",
203
203
  "vite-plugin-lib-inject-css": "^2.2.2",
204
204
  "vitest": "4.1.10",
205
- "@internal/lint": "0.0.130",
206
- "@mastra/client-js": "^1.44.0-alpha.8",
207
- "@mastra/react": "1.4.11-alpha.8",
208
- "@mastra/memory": "1.28.3-alpha.3",
209
- "@mastra/core": "1.65.0-alpha.8"
205
+ "@internal/lint": "0.0.131",
206
+ "@mastra/core": "1.65.0",
207
+ "@mastra/memory": "1.28.3",
208
+ "@mastra/react": "1.4.11",
209
+ "@mastra/client-js": "^1.44.0"
210
210
  },
211
211
  "homepage": "https://mastra.ai",
212
212
  "repository": {
@@ -1 +0,0 @@
1
- {"version":3,"file":"code-BJMC6T9D.cjs","sources":["../src/ds/components/Code/code.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ThemedToken } from 'shiki/core';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n code: string;\n lang?: string;\n}\n\nfunction tokenStyle(token: ThemedToken): React.CSSProperties | undefined {\n if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n return token.htmlStyle as React.CSSProperties;\n }\n\n return token.color ? { color: token.color } : undefined;\n}\n\ninterface Highlighted {\n code: string;\n lang: string;\n tokens: ThemedToken[][];\n}\n\n/** Colors from an earlier pass still hold when the new code only appends to the old. */\nfunction usableHighlight(highlighted: Highlighted | null, code: string, lang?: string): Highlighted | null {\n if (!highlighted || highlighted.lang !== lang) return null;\n return code.startsWith(highlighted.code) ? highlighted : null;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (index.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n *\n * A streaming fence re-renders on every delta while highlighting stays a frame\n * behind. Dropping the previous tokens each time would strobe the whole block\n * between colored and plain, so the settled prefix keeps its colors and only\n * the newly arrived tail waits, uncolored, for the next pass.\n */\nexport const Code = React.memo(function Code({ code, lang, ...props }: CodeProps) {\n const [highlighted, setHighlighted] = React.useState<Highlighted | null>(null);\n\n React.useEffect(() => {\n if (!lang) {\n setHighlighted(null);\n return;\n }\n\n let cancelled = false;\n\n void highlight(code, lang)\n .then(tokens => {\n if (!cancelled && tokens?.length) setHighlighted({ code, lang, tokens });\n })\n .catch(() => {});\n\n return () => {\n cancelled = true;\n };\n }, [code, lang]);\n\n const usable = usableHighlight(highlighted, code, lang);\n if (!usable) {\n return <pre {...props}>{code}</pre>;\n }\n\n const tail = code.slice(usable.code.length);\n let codeOffset = 0;\n\n return (\n <pre {...props}>\n <code>\n {usable.tokens.map((line, lineIndex) => {\n const lineOffset = codeOffset;\n let tokenOffset = lineOffset;\n const tokenSpans = line.map(token => {\n const key = tokenOffset;\n tokenOffset += token.content.length;\n\n return (\n <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n {token.content}\n </span>\n );\n });\n\n codeOffset = tokenOffset + 1;\n\n return (\n <React.Fragment key={lineOffset}>\n <span>{tokenSpans}</span>\n {lineIndex !== usable.tokens.length - 1 && '\\n'}\n </React.Fragment>\n );\n })}\n {tail}\n </code>\n </pre>\n );\n});\n"],"names":["React","Code","highlight","jsx","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAUA,SAAS,WAAW,KAAA,EAAqD;AACvE,EAAA,IAAI,KAAA,CAAM,SAAA,IAAa,OAAO,KAAA,CAAM,cAAc,QAAA,EAAU;AAC1D,IAAA,OAAO,KAAA,CAAM,SAAA;AAAA,EACf;AAEA,EAAA,OAAO,MAAM,KAAA,GAAQ,EAAE,KAAA,EAAO,KAAA,CAAM,OAAM,GAAI,MAAA;AAChD;AASA,SAAS,eAAA,CAAgB,WAAA,EAAiC,IAAA,EAAc,IAAA,EAAmC;AACzG,EAAA,IAAI,CAAC,WAAA,IAAe,WAAA,CAAY,IAAA,KAAS,MAAM,OAAO,IAAA;AACtD,EAAA,OAAO,IAAA,CAAK,UAAA,CAAW,WAAA,CAAY,IAAI,IAAI,WAAA,GAAc,IAAA;AAC3D;AAeO,MAAM,IAAA,GAAOA,gBAAA,CAAM,IAAA,CAAK,SAASC,KAAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,EAAc;AAChF,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAID,gBAAA,CAAM,SAA6B,IAAI,CAAA;AAE7E,EAAAA,gBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA,cAAA,CAAe,IAAI,CAAA;AACnB,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,SAAA,GAAY,KAAA;AAEhB,IAAA,KAAKE,mBAAA,CAAU,IAAA,EAAM,IAAI,CAAA,CACtB,KAAK,CAAA,MAAA,KAAU;AACd,MAAA,IAAI,CAAC,aAAa,MAAA,EAAQ,MAAA,iBAAuB,EAAE,IAAA,EAAM,IAAA,EAAM,MAAA,EAAQ,CAAA;AAAA,IACzE,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AAAA,IAAC,CAAC,CAAA;AAEjB,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,GAAY,IAAA;AAAA,IACd,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AAEf,EAAA,MAAM,MAAA,GAAS,eAAA,CAAgB,WAAA,EAAa,IAAA,EAAM,IAAI,CAAA;AACtD,EAAA,IAAI,CAAC,MAAA,EAAQ;AACX,IAAA,uBAAOC,cAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EAAQ,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EAC/B;AAEA,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,KAAA,CAAM,MAAA,CAAO,KAAK,MAAM,CAAA;AAC1C,EAAA,IAAI,UAAA,GAAa,CAAA;AAEjB,EAAA,uBACEA,cAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EACP,0CAAC,MAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,MAAA,CAAO,MAAA,CAAO,GAAA,CAAI,CAAC,IAAA,EAAM,SAAA,KAAc;AACtC,MAAA,MAAM,UAAA,GAAa,UAAA;AACnB,MAAA,IAAI,WAAA,GAAc,UAAA;AAClB,MAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,CAAA,KAAA,KAAS;AACnC,QAAA,MAAM,GAAA,GAAM,WAAA;AACZ,QAAA,WAAA,IAAe,MAAM,OAAA,CAAQ,MAAA;AAE7B,QAAA,uBACEA,cAAA,CAAC,MAAA,EAAA,EAAe,SAAA,EAAU,aAAA,EAAc,KAAA,EAAO,WAAW,KAAK,CAAA,EAC5D,QAAA,EAAA,KAAA,CAAM,OAAA,EAAA,EADE,GAEX,CAAA;AAAA,MAEJ,CAAC,CAAA;AAED,MAAA,UAAA,GAAa,WAAA,GAAc,CAAA;AAE3B,MAAA,uBACEC,eAAA,CAACJ,gBAAA,CAAM,QAAA,EAAN,EACC,QAAA,EAAA;AAAA,wBAAAG,cAAA,CAAC,UAAM,QAAA,EAAA,UAAA,EAAW,CAAA;AAAA,QACjB,SAAA,KAAc,MAAA,CAAO,MAAA,CAAO,MAAA,GAAS,CAAA,IAAK;AAAA,OAAA,EAAA,EAFxB,UAGrB,CAAA;AAAA,IAEJ,CAAC,CAAA;AAAA,IACA;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"code-DRGJVroV.js","sources":["../src/ds/components/Code/code.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ThemedToken } from 'shiki/core';\n\nimport { highlight } from '../CodeEditor/highlight';\n\nexport interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {\n code: string;\n lang?: string;\n}\n\nfunction tokenStyle(token: ThemedToken): React.CSSProperties | undefined {\n if (token.htmlStyle && typeof token.htmlStyle === 'object') {\n return token.htmlStyle as React.CSSProperties;\n }\n\n return token.color ? { color: token.color } : undefined;\n}\n\ninterface Highlighted {\n code: string;\n lang: string;\n tokens: ThemedToken[][];\n}\n\n/** Colors from an earlier pass still hold when the new code only appends to the old. */\nfunction usableHighlight(highlighted: Highlighted | null, code: string, lang?: string): Highlighted | null {\n if (!highlighted || highlighted.lang !== lang) return null;\n return code.startsWith(highlighted.code) ? highlighted : null;\n}\n\n/**\n * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.\n * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on\n * each token span; the `.shiki-token` class (index.css) picks the variant from\n * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider\n * required. Renders plain text while highlighting is pending or when the\n * language is missing/unknown.\n *\n * A streaming fence re-renders on every delta while highlighting stays a frame\n * behind. Dropping the previous tokens each time would strobe the whole block\n * between colored and plain, so the settled prefix keeps its colors and only\n * the newly arrived tail waits, uncolored, for the next pass.\n */\nexport const Code = React.memo(function Code({ code, lang, ...props }: CodeProps) {\n const [highlighted, setHighlighted] = React.useState<Highlighted | null>(null);\n\n React.useEffect(() => {\n if (!lang) {\n setHighlighted(null);\n return;\n }\n\n let cancelled = false;\n\n void highlight(code, lang)\n .then(tokens => {\n if (!cancelled && tokens?.length) setHighlighted({ code, lang, tokens });\n })\n .catch(() => {});\n\n return () => {\n cancelled = true;\n };\n }, [code, lang]);\n\n const usable = usableHighlight(highlighted, code, lang);\n if (!usable) {\n return <pre {...props}>{code}</pre>;\n }\n\n const tail = code.slice(usable.code.length);\n let codeOffset = 0;\n\n return (\n <pre {...props}>\n <code>\n {usable.tokens.map((line, lineIndex) => {\n const lineOffset = codeOffset;\n let tokenOffset = lineOffset;\n const tokenSpans = line.map(token => {\n const key = tokenOffset;\n tokenOffset += token.content.length;\n\n return (\n <span key={key} className=\"shiki-token\" style={tokenStyle(token)}>\n {token.content}\n </span>\n );\n });\n\n codeOffset = tokenOffset + 1;\n\n return (\n <React.Fragment key={lineOffset}>\n <span>{tokenSpans}</span>\n {lineIndex !== usable.tokens.length - 1 && '\\n'}\n </React.Fragment>\n );\n })}\n {tail}\n </code>\n </pre>\n );\n});\n"],"names":["Code"],"mappings":";;;;AAUA,SAAS,WAAW,KAAA,EAAqD;AACvE,EAAA,IAAI,KAAA,CAAM,SAAA,IAAa,OAAO,KAAA,CAAM,cAAc,QAAA,EAAU;AAC1D,IAAA,OAAO,KAAA,CAAM,SAAA;AAAA,EACf;AAEA,EAAA,OAAO,MAAM,KAAA,GAAQ,EAAE,KAAA,EAAO,KAAA,CAAM,OAAM,GAAI,MAAA;AAChD;AASA,SAAS,eAAA,CAAgB,WAAA,EAAiC,IAAA,EAAc,IAAA,EAAmC;AACzG,EAAA,IAAI,CAAC,WAAA,IAAe,WAAA,CAAY,IAAA,KAAS,MAAM,OAAO,IAAA;AACtD,EAAA,OAAO,IAAA,CAAK,UAAA,CAAW,WAAA,CAAY,IAAI,IAAI,WAAA,GAAc,IAAA;AAC3D;AAeO,MAAM,IAAA,GAAO,KAAA,CAAM,IAAA,CAAK,SAASA,KAAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,EAAc;AAChF,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,KAAA,CAAM,SAA6B,IAAI,CAAA;AAE7E,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA,cAAA,CAAe,IAAI,CAAA;AACnB,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,SAAA,GAAY,KAAA;AAEhB,IAAA,KAAK,SAAA,CAAU,IAAA,EAAM,IAAI,CAAA,CACtB,KAAK,CAAA,MAAA,KAAU;AACd,MAAA,IAAI,CAAC,aAAa,MAAA,EAAQ,MAAA,iBAAuB,EAAE,IAAA,EAAM,IAAA,EAAM,MAAA,EAAQ,CAAA;AAAA,IACzE,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AAAA,IAAC,CAAC,CAAA;AAEjB,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,GAAY,IAAA;AAAA,IACd,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AAEf,EAAA,MAAM,MAAA,GAAS,eAAA,CAAgB,WAAA,EAAa,IAAA,EAAM,IAAI,CAAA;AACtD,EAAA,IAAI,CAAC,MAAA,EAAQ;AACX,IAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EAAQ,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EAC/B;AAEA,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,KAAA,CAAM,MAAA,CAAO,KAAK,MAAM,CAAA;AAC1C,EAAA,IAAI,UAAA,GAAa,CAAA;AAEjB,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,KAAA,EACP,+BAAC,MAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,MAAA,CAAO,MAAA,CAAO,GAAA,CAAI,CAAC,IAAA,EAAM,SAAA,KAAc;AACtC,MAAA,MAAM,UAAA,GAAa,UAAA;AACnB,MAAA,IAAI,WAAA,GAAc,UAAA;AAClB,MAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,CAAA,KAAA,KAAS;AACnC,QAAA,MAAM,GAAA,GAAM,WAAA;AACZ,QAAA,WAAA,IAAe,MAAM,OAAA,CAAQ,MAAA;AAE7B,QAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAe,SAAA,EAAU,aAAA,EAAc,KAAA,EAAO,WAAW,KAAK,CAAA,EAC5D,QAAA,EAAA,KAAA,CAAM,OAAA,EAAA,EADE,GAEX,CAAA;AAAA,MAEJ,CAAC,CAAA;AAED,MAAA,UAAA,GAAa,WAAA,GAAc,CAAA;AAE3B,MAAA,uBACE,IAAA,CAAC,KAAA,CAAM,QAAA,EAAN,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAM,QAAA,EAAA,UAAA,EAAW,CAAA;AAAA,QACjB,SAAA,KAAc,MAAA,CAAO,MAAA,CAAO,MAAA,GAAS,CAAA,IAAK;AAAA,OAAA,EAAA,EAFxB,UAGrB,CAAA;AAAA,IAEJ,CAAC,CAAA;AAAA,IACA;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
@@ -1,76 +0,0 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
3
- import { X } from 'lucide-react';
4
- import * as React from 'react';
5
- import { B as Button } from './Button-BsfLQEC6.js';
6
- import { a as asChildRenderProps } from './as-child-N1qMDCr8.js';
7
- import { c as cn } from './cn-B4oPhFx9.js';
8
- import './dialog.css';/* empty css */
9
-
10
- const Dialog = Dialog$1.Root;
11
- const DialogTrigger = React.forwardRef(
12
- ({ asChild, children, ...props }, ref) => {
13
- return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ref, ...asChildRenderProps(asChild, children), ...props, children: asChild ? void 0 : children });
14
- }
15
- );
16
- DialogTrigger.displayName = "DialogTrigger";
17
- const DialogPortal = Dialog$1.Portal;
18
- const DialogClose = React.forwardRef(({ asChild, children, ...props }, ref) => {
19
- return /* @__PURE__ */ jsx(Dialog$1.Close, { ref, ...asChildRenderProps(asChild, children), ...props, children: asChild ? void 0 : children });
20
- });
21
- DialogClose.displayName = "DialogClose";
22
- const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
23
- Dialog$1.Backdrop,
24
- {
25
- ref,
26
- className: cn("dialog-overlay-anim fixed inset-0 z-50 bg-overlay backdrop-blur-xs", className),
27
- ...props
28
- }
29
- ));
30
- DialogOverlay.displayName = "DialogOverlay";
31
- const DialogContent = React.forwardRef(
32
- ({ className, children, showOverlay = true, overlayClassName, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
33
- showOverlay && /* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }),
34
- /* @__PURE__ */ jsxs(
35
- Dialog$1.Popup,
36
- {
37
- ref,
38
- "data-slot": "dialog-content",
39
- className: cn(
40
- "dialog-content-anim",
41
- "fixed top-[50%] left-[50%] z-50 grid translate-[-50%]",
42
- "w-full max-w-[calc(100%-2rem)] sm:max-w-lg",
43
- "rounded-xl border border-border1/40 bg-surface2/96 shadow-dialog backdrop-blur-md",
44
- "focus-visible:outline-hidden",
45
- className
46
- ),
47
- ...props,
48
- children: [
49
- children,
50
- /* @__PURE__ */ jsx(
51
- Dialog$1.Close,
52
- {
53
- render: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-3 right-3", "aria-label": "Close", children: /* @__PURE__ */ jsx(X, {}) })
54
- }
55
- )
56
- ]
57
- }
58
- )
59
- ] })
60
- );
61
- DialogContent.displayName = "DialogContent";
62
- const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-0.5 px-4 py-3 text-left", className), ...props });
63
- DialogHeader.displayName = "DialogHeader";
64
- const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col-reverse gap-1.5 px-4 py-2.5 sm:flex-row sm:justify-end", className), ...props });
65
- DialogFooter.displayName = "DialogFooter";
66
- const DialogBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("max-h-[50vh] overflow-y-auto px-4 py-3.5", className), ...props });
67
- DialogBody.displayName = "DialogBody";
68
- const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog$1.Title, { ref, className: cn("text-ui-md font-medium", className), ...props }));
69
- DialogTitle.displayName = "DialogTitle";
70
- const DialogDescription = React.forwardRef(
71
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog$1.Description, { ref, className: cn("sr-only", className), ...props })
72
- );
73
- DialogDescription.displayName = "DialogDescription";
74
-
75
- export { Dialog as D, DialogBody as a, DialogClose as b, DialogContent as c, DialogDescription as d, DialogFooter as e, DialogHeader as f, DialogOverlay as g, DialogPortal as h, DialogTitle as i, DialogTrigger as j };
76
- //# sourceMappingURL=dialog-CESxLg8S.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"dialog-CESxLg8S.js","sources":["../src/ds/components/Dialog/dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { X } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/ds/components/Button';\nimport { asChildRenderProps } from '@/lib/as-child';\nimport { cn } from '@/lib/utils';\n\nimport './dialog.css';\n\nconst Dialog = DialogPrimitive.Root;\n\ntype DialogTriggerProps = DialogPrimitive.Trigger.Props & {\n /** @deprecated Use Base UI's native `render` prop instead for stronger composition typing. */\n asChild?: boolean;\n};\n\nconst DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(\n ({ asChild, children, ...props }, ref) => {\n return (\n <DialogPrimitive.Trigger ref={ref} {...asChildRenderProps(asChild, children)} {...props}>\n {asChild ? undefined : children}\n </DialogPrimitive.Trigger>\n );\n },\n);\nDialogTrigger.displayName = 'DialogTrigger';\n\nconst DialogPortal = DialogPrimitive.Portal;\n\ntype DialogCloseProps = DialogPrimitive.Close.Props & {\n /** @deprecated Use Base UI's native `render` prop instead for stronger composition typing. */\n asChild?: boolean;\n};\n\nconst DialogClose = React.forwardRef<HTMLButtonElement, DialogCloseProps>(({ asChild, children, ...props }, ref) => {\n return (\n <DialogPrimitive.Close ref={ref} {...asChildRenderProps(asChild, children)} {...props}>\n {asChild ? undefined : children}\n </DialogPrimitive.Close>\n );\n});\nDialogClose.displayName = 'DialogClose';\n\ntype DialogOverlayProps = Omit<DialogPrimitive.Backdrop.Props, 'className'> & {\n className?: string;\n};\n\nconst DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlayProps>(({ className, ...props }, ref) => (\n <DialogPrimitive.Backdrop\n ref={ref}\n className={cn('dialog-overlay-anim fixed inset-0 z-50 bg-overlay backdrop-blur-xs', className)}\n {...props}\n />\n));\nDialogOverlay.displayName = 'DialogOverlay';\n\ntype DialogContentProps = Omit<DialogPrimitive.Popup.Props, 'className'> & {\n className?: string;\n showOverlay?: boolean;\n overlayClassName?: string;\n};\n\nconst DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(\n ({ className, children, showOverlay = true, overlayClassName, ...props }, ref) => (\n <DialogPortal>\n {showOverlay && <DialogOverlay className={overlayClassName} />}\n <DialogPrimitive.Popup\n ref={ref}\n data-slot=\"dialog-content\"\n className={cn(\n 'dialog-content-anim',\n 'fixed top-[50%] left-[50%] z-50 grid translate-[-50%]',\n 'w-full max-w-[calc(100%-2rem)] sm:max-w-lg',\n 'rounded-xl border border-border1/40 bg-surface2/96 shadow-dialog backdrop-blur-md',\n 'focus-visible:outline-hidden',\n className,\n )}\n {...props}\n >\n {children}\n <DialogPrimitive.Close\n render={\n <Button variant=\"ghost\" size=\"sm\" className=\"absolute top-3 right-3\" aria-label=\"Close\">\n <X />\n </Button>\n }\n />\n </DialogPrimitive.Popup>\n </DialogPortal>\n ),\n);\nDialogContent.displayName = 'DialogContent';\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('flex flex-col gap-0.5 px-4 py-3 text-left', className)} {...props} />\n);\nDialogHeader.displayName = 'DialogHeader';\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('flex flex-col-reverse gap-1.5 px-4 py-2.5 sm:flex-row sm:justify-end', className)} {...props} />\n);\nDialogFooter.displayName = 'DialogFooter';\n\nconst DialogBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('max-h-[50vh] overflow-y-auto px-4 py-3.5', className)} {...props} />\n);\nDialogBody.displayName = 'DialogBody';\n\ntype DialogTitleProps = Omit<DialogPrimitive.Title.Props, 'className'> & {\n className?: string;\n};\n\nconst DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title ref={ref} className={cn('text-ui-md font-medium', className)} {...props} />\n));\nDialogTitle.displayName = 'DialogTitle';\n\ntype DialogDescriptionProps = Omit<DialogPrimitive.Description.Props, 'className'> & {\n className?: string;\n};\n\nconst DialogDescription = React.forwardRef<HTMLParagraphElement, DialogDescriptionProps>(\n ({ className, ...props }, ref) => (\n <DialogPrimitive.Description ref={ref} className={cn('sr-only', className)} {...props} />\n ),\n);\nDialogDescription.displayName = 'DialogDescription';\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogTrigger,\n DialogClose,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogBody,\n DialogTitle,\n DialogDescription,\n};\n"],"names":["DialogPrimitive"],"mappings":"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"}