@mastra/playground-ui 64.0.0 → 65.0.0-alpha.1

package/dist/domains/workflows/workflow/workflow-input-data.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"workflow-input-data.es.js","sources":["../../../../src/domains/workflows/workflow/workflow-input-data.tsx"],"sourcesContent":["import { Play } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useRef, useState } from 'react';\nimport type { ZodSchema } from 'zod';\n\nimport { createProcessorInput, parseProcessorDraft } from './input/processor-input';\nimport type { ProcessorDraft } from './input/processor-input';\nimport { WorkflowJsonInput } from './input/workflow-json-input';\nimport { WorkflowProcessorInput } from './input/workflow-processor-input';\nimport { WorkflowInputTypeToggle } from './workflow-input-type-toggle';\nimport type { WorkflowInputType } from './workflow-input-type-toggle';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { DynamicForm } from '@/lib/form';\nimport { getFormShapeError, parseJsonDraft, validateJsonDraft } from '@/lib/form/json-draft';\nimport type { JsonDraftValue } from '@/lib/form/json-draft';\nimport { cn } from '@/utils/cn';\n\nexport interface WorkflowInputDataProps {\n  schema: ZodSchema;\n  defaultValues?: unknown;\n  isSubmitLoading: boolean;\n  submitButtonLabel: string;\n  onSubmit: (data: any) => void;\n  children?: React.ReactNode;\n  isProcessorWorkflow?: boolean;\n  submitActions?: React.ReactNode;\n  leftActions?: React.ReactNode;\n  headingSlot?: ReactNode;\n  collapsible?: boolean;\n  submitButtonIcon?: ReactNode;\n  submitButtonVariant?: React.ComponentProps<typeof Button>['variant'];\n  submitButtonFullWidth?: boolean;\n  hideInputTypeLabel?: boolean;\n  inputTypeLabel?: string;\n  hideHeading?: boolean;\n}\n\ntype InputDraft =\n  | { type: 'json'; value: string }\n  | { type: 'form'; value: unknown }\n  | { type: 'simple'; value: ProcessorDraft };\n\nconst defaultSubmitIcon = (\n  <Icon>\n    <Play />\n  </Icon>\n);\n\nfunction createInitialDraft(defaultValues: unknown, isProcessorWorkflow: boolean | undefined): InputDraft {\n  if (!isProcessorWorkflow) return { type: 'form', value: defaultValues };\n  const input = defaultValues ?? createProcessorInput();\n  const draft = parseProcessorDraft(input);\n  return draft ? { type: 'simple', value: draft } : { type: 'json', value: JSON.stringify(input, null, 2) };\n}\n\nexport const WorkflowInputData = ({\n  schema,\n  defaultValues,\n  isSubmitLoading,\n  submitButtonLabel,\n  onSubmit,\n  children,\n  isProcessorWorkflow,\n  submitActions,\n  leftActions,\n  headingSlot,\n  collapsible = true,\n  submitButtonIcon = defaultSubmitIcon,\n  submitButtonVariant = 'primary',\n  submitButtonFullWidth,\n  hideInputTypeLabel,\n  inputTypeLabel = 'Run input',\n  hideHeading,\n}: WorkflowInputDataProps) => {\n  const [draft, setDraft] = useState(() => createInitialDraft(defaultValues, isProcessorWorkflow));\n  // The Form view is uncontrolled: state here would only re-render this tree on every keystroke.\n  const formValues = useRef<unknown>(defaultValues);\n  const [errors, setErrors] = useState<string[]>([]);\n\n  function readDraftValue(): JsonDraftValue {\n    if (draft.type === 'json') return parseJsonDraft(draft.value);\n    return { ok: true, value: draft.type === 'form' ? formValues.current : draft.value };\n  }\n\n  function submitJsonDraft(text: string) {\n    const result = validateJsonDraft(schema, text);\n    if (result.ok) onSubmit(result.value);\n    else setErrors(result.errors);\n  }\n\n  function changeInputType(type: WorkflowInputType) {\n    if (type === draft.type) return;\n    setErrors([]);\n    const current = readDraftValue();\n    if (!current.ok) return setErrors([current.error]);\n    if (type === 'json') {\n      return setDraft({ type, value: JSON.stringify(current.value === undefined ? {} : current.value, null, 2) });\n    }\n    if (type === 'simple') {\n      const processorDraft = parseProcessorDraft(current.value);\n      if (processorDraft) return setDraft({ type, value: processorDraft });\n      return setErrors([\n        'Simple input requires a messages array with text parts and a string phase. Correct the JSON first.',\n      ]);\n    }\n    const formShapeError = getFormShapeError(schema, current.value);\n    return formShapeError ? setErrors([formShapeError]) : setDraft({ type, value: current.value });\n  }\n\n  const defaultHeading = (\n    <Txt as=\"span\" variant=\"subheading\" tone=\"ink\">\n      Trigger a run\n    </Txt>\n  );\n  const toggleSitsInLabelRow = !collapsible && !hideHeading;\n  const toggleSitsAboveInput = collapsible || hideHeading || hideInputTypeLabel;\n  const inputTypeToggle = (\n    <WorkflowInputTypeToggle\n      value={draft.type}\n      onChange={changeInputType}\n      disabled={isSubmitLoading}\n      includeSimple={isProcessorWorkflow}\n      compact={toggleSitsInLabelRow}\n    />\n  );\n\n  const body = (\n    <>\n      {!hideInputTypeLabel && (\n        <div className=\"flex justify-between gap-3 px-5 py-3\">\n          <Txt as=\"p\" variant=\"caption\" tone=\"muted\">\n            {inputTypeLabel}\n          </Txt>\n          {toggleSitsInLabelRow && <div className=\"shrink-0\">{inputTypeToggle}</div>}\n        </div>\n      )}\n\n      <div className=\"px-5\">\n        {toggleSitsAboveInput && <div className=\"pb-4\">{inputTypeToggle}</div>}\n\n        <div\n          className={cn('pb-4', {\n            'pointer-events-none opacity-50': isSubmitLoading,\n          })}\n        >\n          {draft.type === 'json' ? (\n            <WorkflowJsonInput\n              value={draft.value}\n              onChange={value => {\n                setDraft({ type: 'json', value });\n                setErrors([]);\n              }}\n              errors={errors}\n              isSubmitLoading={isSubmitLoading}\n              submitButtonLabel={submitButtonLabel}\n              submitButtonIcon={submitButtonIcon}\n              submitButtonVariant={submitButtonVariant}\n              submitButtonFullWidth={submitButtonFullWidth}\n              onSubmit={() => submitJsonDraft(draft.value)}\n              submitActions={submitActions}\n              leftActions={leftActions}\n            >\n              {children}\n            </WorkflowJsonInput>\n          ) : draft.type === 'simple' && isProcessorWorkflow ? (\n            <WorkflowProcessorInput\n              schema={schema}\n              value={draft.value}\n              onChange={value => setDraft({ type: 'simple', value })}\n              isSubmitLoading={isSubmitLoading}\n              submitButtonLabel={submitButtonLabel}\n              submitButtonIcon={submitButtonIcon}\n              submitButtonVariant={submitButtonVariant}\n              submitButtonFullWidth={submitButtonFullWidth}\n              onSubmit={onSubmit}\n              submitActions={submitActions}\n              leftActions={leftActions}\n            >\n              {children}\n            </WorkflowProcessorInput>\n          ) : (\n            <WorkflowFormInput\n              schema={schema}\n              onValuesChange={value => {\n                formValues.current = value;\n              }}\n              defaultValues={draft.value}\n              isSubmitLoading={isSubmitLoading}\n              submitButtonLabel={submitButtonLabel}\n              submitButtonIcon={submitButtonIcon}\n              submitButtonVariant={submitButtonVariant}\n              submitButtonFullWidth={submitButtonFullWidth}\n              onSubmit={onSubmit}\n              submitActions={submitActions}\n              leftActions={leftActions}\n            >\n              {children}\n            </WorkflowFormInput>\n          )}\n        </div>\n      </div>\n    </>\n  );\n\n  if (!collapsible) {\n    return (\n      <>\n        {!hideHeading && <div className=\"border-b border-border pb-3\">{headingSlot ?? defaultHeading}</div>}\n        <div>{body}</div>\n      </>\n    );\n  }\n\n  return (\n    <Collapsible defaultOpen>\n      <CollapsibleTrigger className=\"flex w-full items-center gap-2 pb-3 text-left\">\n        <DisclosureChevron direction=\"right\" className=\"size-4 text-muted-foreground\" />\n        {headingSlot ?? defaultHeading}\n      </CollapsibleTrigger>\n\n      <CollapsibleContent keepMounted>{body}</CollapsibleContent>\n    </Collapsible>\n  );\n};\n\nconst WorkflowFormInput = ({\n  schema,\n  defaultValues,\n  isSubmitLoading,\n  submitButtonLabel,\n  onSubmit,\n  children,\n  submitActions,\n  leftActions,\n  submitButtonIcon,\n  submitButtonVariant,\n  submitButtonFullWidth,\n  onValuesChange,\n}: WorkflowInputDataProps & { onValuesChange: (value: unknown) => void }) => (\n  <DynamicForm\n    schema={schema}\n    defaultValues={defaultValues}\n    onValuesChange={onValuesChange}\n    isSubmitLoading={isSubmitLoading}\n    submitButtonLabel={submitButtonLabel}\n    submitButtonIcon={submitButtonIcon}\n    submitButtonVariant={submitButtonVariant}\n    submitButtonFullWidth={submitButtonFullWidth}\n    onSubmit={onSubmit}\n    readOnly={isSubmitLoading}\n    submitActions={submitActions}\n    leftActions={leftActions}\n  >\n    {children}\n  </DynamicForm>\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"workflow-input-data.es.js","sources":["../../../../src/domains/workflows/workflow/workflow-input-data.tsx"],"sourcesContent":["import { Play } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useRef, useState } from 'react';\nimport type { ZodSchema } from 'zod';\n\nimport { createProcessorInput, parseProcessorDraft } from './input/processor-input';\nimport type { ProcessorDraft } from './input/processor-input';\nimport { WorkflowJsonInput } from './input/workflow-json-input';\nimport { WorkflowProcessorInput } from './input/workflow-processor-input';\nimport { WorkflowInputTypeToggle } from './workflow-input-type-toggle';\nimport type { WorkflowInputType } from './workflow-input-type-toggle';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { DynamicForm } from '@/lib/form';\nimport { getFormShapeError, parseJsonDraft, validateJsonDraft } from '@/lib/form/json-draft';\nimport type { JsonDraftValue } from '@/lib/form/json-draft';\nimport { cn } from '@/utils/cn';\n\nexport interface WorkflowInputDataProps {\n  schema: ZodSchema;\n  defaultValues?: unknown;\n  isSubmitLoading: boolean;\n  submitButtonLabel: string;\n  onSubmit: (data: any) => void;\n  children?: React.ReactNode;\n  isProcessorWorkflow?: boolean;\n  submitActions?: React.ReactNode;\n  leftActions?: React.ReactNode;\n  headingSlot?: ReactNode;\n  collapsible?: boolean;\n  submitButtonIcon?: ReactNode;\n  submitButtonVariant?: React.ComponentProps<typeof Button>['variant'];\n  submitButtonFullWidth?: boolean;\n  hideInputTypeLabel?: boolean;\n  inputTypeLabel?: string;\n  hideHeading?: boolean;\n}\n\ntype InputDraft =\n  | { type: 'json'; value: string }\n  | { type: 'form'; value: unknown }\n  | { type: 'simple'; value: ProcessorDraft };\n\nconst defaultSubmitIcon = (\n  <Icon>\n    <Play />\n  </Icon>\n);\n\nfunction createInitialDraft(defaultValues: unknown, isProcessorWorkflow: boolean | undefined): InputDraft {\n  if (!isProcessorWorkflow) return { type: 'form', value: defaultValues };\n  const input = defaultValues ?? createProcessorInput();\n  const draft = parseProcessorDraft(input);\n  return draft ? { type: 'simple', value: draft } : { type: 'json', value: JSON.stringify(input, null, 2) };\n}\n\nexport const WorkflowInputData = ({\n  schema,\n  defaultValues,\n  isSubmitLoading,\n  submitButtonLabel,\n  onSubmit,\n  children,\n  isProcessorWorkflow,\n  submitActions,\n  leftActions,\n  headingSlot,\n  collapsible = true,\n  submitButtonIcon = defaultSubmitIcon,\n  submitButtonVariant = 'primary',\n  submitButtonFullWidth,\n  hideInputTypeLabel,\n  inputTypeLabel = 'Run input',\n  hideHeading,\n}: WorkflowInputDataProps) => {\n  const [draft, setDraft] = useState(() => createInitialDraft(defaultValues, isProcessorWorkflow));\n  // The Form view is uncontrolled: state here would only re-render this tree on every keystroke.\n  const formValues = useRef<unknown>(defaultValues);\n  const [errors, setErrors] = useState<string[]>([]);\n\n  function readDraftValue(): JsonDraftValue {\n    if (draft.type === 'json') return parseJsonDraft(draft.value);\n    return { ok: true, value: draft.type === 'form' ? formValues.current : draft.value };\n  }\n\n  function submitJsonDraft(text: string) {\n    const result = validateJsonDraft(schema, text);\n    if (result.ok) onSubmit(result.value);\n    else setErrors(result.errors);\n  }\n\n  function changeInputType(type: WorkflowInputType) {\n    if (type === draft.type) return;\n    setErrors([]);\n    const current = readDraftValue();\n    if (!current.ok) return setErrors([current.error]);\n    if (type === 'json') {\n      return setDraft({ type, value: JSON.stringify(current.value === undefined ? {} : current.value, null, 2) });\n    }\n    if (type === 'simple') {\n      const processorDraft = parseProcessorDraft(current.value);\n      if (processorDraft) return setDraft({ type, value: processorDraft });\n      return setErrors([\n        'Simple input requires a messages array with text parts and a string phase. Correct the JSON first.',\n      ]);\n    }\n    const formShapeError = getFormShapeError(schema, current.value);\n    return formShapeError ? setErrors([formShapeError]) : setDraft({ type, value: current.value });\n  }\n\n  const defaultHeading = (\n    <Txt as=\"span\" variant=\"subheading\" tone=\"ink\">\n      Trigger a run\n    </Txt>\n  );\n  const toggleSitsInLabelRow = !collapsible && !hideHeading;\n  const toggleSitsAboveInput = collapsible || hideHeading || hideInputTypeLabel;\n  const inputTypeToggle = (\n    <WorkflowInputTypeToggle\n      value={draft.type}\n      onChange={changeInputType}\n      disabled={isSubmitLoading}\n      includeSimple={isProcessorWorkflow}\n      compact={toggleSitsInLabelRow}\n    />\n  );\n\n  const body = (\n    <>\n      {!hideInputTypeLabel && (\n        <div className=\"flex justify-between gap-3 px-5 py-3\">\n          <Txt as=\"p\" variant=\"caption\" tone=\"muted\">\n            {inputTypeLabel}\n          </Txt>\n          {toggleSitsInLabelRow && <div className=\"shrink-0\">{inputTypeToggle}</div>}\n        </div>\n      )}\n\n      <div className=\"px-5\">\n        {toggleSitsAboveInput && <div className=\"pb-4\">{inputTypeToggle}</div>}\n\n        <div\n          className={cn('pb-4', {\n            'pointer-events-none opacity-50': isSubmitLoading,\n          })}\n        >\n          {draft.type === 'json' ? (\n            <WorkflowJsonInput\n              value={draft.value}\n              onChange={value => {\n                setDraft({ type: 'json', value });\n                setErrors([]);\n              }}\n              errors={errors}\n              isSubmitLoading={isSubmitLoading}\n              submitButtonLabel={submitButtonLabel}\n              submitButtonIcon={submitButtonIcon}\n              submitButtonVariant={submitButtonVariant}\n              submitButtonFullWidth={submitButtonFullWidth}\n              onSubmit={() => submitJsonDraft(draft.value)}\n              submitActions={submitActions}\n              leftActions={leftActions}\n            >\n              {children}\n            </WorkflowJsonInput>\n          ) : draft.type === 'simple' && isProcessorWorkflow ? (\n            <WorkflowProcessorInput\n              schema={schema}\n              value={draft.value}\n              onChange={value => setDraft({ type: 'simple', value })}\n              isSubmitLoading={isSubmitLoading}\n              submitButtonLabel={submitButtonLabel}\n              submitButtonIcon={submitButtonIcon}\n              submitButtonVariant={submitButtonVariant}\n              submitButtonFullWidth={submitButtonFullWidth}\n              onSubmit={onSubmit}\n              submitActions={submitActions}\n              leftActions={leftActions}\n            >\n              {children}\n            </WorkflowProcessorInput>\n          ) : (\n            <WorkflowFormInput\n              schema={schema}\n              onValuesChange={value => {\n                formValues.current = value;\n              }}\n              defaultValues={draft.value}\n              isSubmitLoading={isSubmitLoading}\n              submitButtonLabel={submitButtonLabel}\n              submitButtonIcon={submitButtonIcon}\n              submitButtonVariant={submitButtonVariant}\n              submitButtonFullWidth={submitButtonFullWidth}\n              onSubmit={onSubmit}\n              submitActions={submitActions}\n              leftActions={leftActions}\n            >\n              {children}\n            </WorkflowFormInput>\n          )}\n        </div>\n      </div>\n    </>\n  );\n\n  if (!collapsible) {\n    return (\n      <>\n        {!hideHeading && <div className=\"border-b border-border pb-3\">{headingSlot ?? defaultHeading}</div>}\n        <div>{body}</div>\n      </>\n    );\n  }\n\n  return (\n    <Collapsible defaultOpen>\n      <CollapsibleTrigger className=\"flex w-full items-center gap-2 pb-3 text-left\">\n        <DisclosureChevron direction=\"right\" className=\"size-4 text-muted-foreground\" />\n        {headingSlot ?? defaultHeading}\n      </CollapsibleTrigger>\n\n      <CollapsibleContent keepMounted>{body}</CollapsibleContent>\n    </Collapsible>\n  );\n};\n\nconst WorkflowFormInput = ({\n  schema,\n  defaultValues,\n  isSubmitLoading,\n  submitButtonLabel,\n  onSubmit,\n  children,\n  submitActions,\n  leftActions,\n  submitButtonIcon,\n  submitButtonVariant,\n  submitButtonFullWidth,\n  onValuesChange,\n}: WorkflowInputDataProps & { onValuesChange: (value: unknown) => void }) => (\n  <DynamicForm\n    schema={schema}\n    defaultValues={defaultValues}\n    onValuesChange={onValuesChange}\n    isSubmitLoading={isSubmitLoading}\n    submitButtonLabel={submitButtonLabel}\n    submitButtonIcon={submitButtonIcon}\n    submitButtonVariant={submitButtonVariant}\n    submitButtonFullWidth={submitButtonFullWidth}\n    onSubmit={onSubmit}\n    readOnly={isSubmitLoading}\n    submitActions={submitActions}\n    leftActions={leftActions}\n  >\n    {children}\n  </DynamicForm>\n);\n"],"names":[],"mappings":"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"}

package/dist/primitives/raised-surface.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"raised-surface.cjs.js","sources":["../../src/ds/primitives/raised-surface.ts"],"sourcesContent":["/**\n * Two recipes, because elevation encodes distance from the canvas and there are\n * only two distances in this product.\n *\n * A *raised* surface sits in the flow — card, list panel, settings container,\n * table head, app frame. It lifts a couple of pixels, which is also what keeps\n * it honest: a tile in a grid inside a scroller is clipped by that scroller, so\n * a shadow that bleeds further than the tile's own clearance gets sliced into a\n * hard line along the container edge.\n *\n * An *overlay* is detached — popover, dropdown, dialog, drawer, tooltip. It is\n * never clipped, has to separate from arbitrary content beneath it, and so\n * carries the long falloff.\n *\n * Both recipes carry a `--surface-rim` inset edge, a top highlight in dark,\n * and elevation drops. Adding a CSS border on that same edge doubles it.\n * Content dividers use `--border`; frame headers use `border-surface-rim`\n * and stay inside the inset pixel reserved by MainCard.\n *\n * Radius is deliberately absent — it belongs to the family (`rounded-xl` for a\n * popup, `rounded-studio-frame` for the app frame).\n *\n * A raised surface pins its own fill across states. Interaction is expressed by\n * the state layer below, never by swapping the background: `Button`'s variants\n * all drive `background-color` on hover, and a raised surface wearing one would\n * otherwise turn translucent mid-hover and composite over the canvas. A call\n * site that genuinely wants another fill still overrides it, since its own\n * classes come after these.\n */\nconst fieldsOnSurface =\n  '[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--field-rim-on-surface)]';\nconst fieldsOnDialog =\n  '[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--surface-rim)]';\nconst fieldsOnPage = '[--field:var(--card)] [--field-disabled:var(--fill-subtle)] [--field-rim:var(--surface-rim)]';\n\nexport const raisedSurfaceStyle = 'bg-card hover:bg-card active:bg-card shadow-raised ' + fieldsOnSurface;\n\nexport const overlaySurfaceStyle = 'bg-card shadow-overlay ' + fieldsOnSurface;\n\nexport const dialogSurfaceStyle = 'bg-dialog shadow-overlay ' + fieldsOnDialog;\n\n/**\n * The app frame and the panels docked beside it. Same elevation as a card, one\n * step lower fill: a frame is a hole cut in the rail, and what sits inside it —\n * cards, fields, tables — needs a step to rise above. `Card` is for that\n * content, never for the frame around it.\n */\nexport const frameSurfaceStyle = 'bg-background shadow-raised ' + fieldsOnPage;\n\n/**\n * The frame's fill without its elevation, for a frame that is raised only at\n * some breakpoints: `MainCard` is flat page content below `lg`.\n */\nexport const frameFillStyle = 'bg-background ' + fieldsOnPage;\n\n/**\n * Interaction states for a surface that already carries an opaque fill. The\n * `state-layer` utility in `src/index.css` holds the reasoning and the measured\n * numbers: the rung has to be layered, never swapped into `background-color`.\n */\nexport const surfaceStateLayerStyle = 'state-layer';\n\n/**\n * Same layer, driven by an ancestor marked `group` rather than the surface\n * itself. A utility cannot read an ancestor's state, so this one stays composed\n * from variants — `isolate` and the negative z-index do the same job as the\n * utility's, and `inset-px` likewise keeps the inset rim visible.\n */\nexport const surfaceGroupStateLayerStyle =\n  'relative isolate before:pointer-events-none before:absolute before:-z-1 before:inset-px before:rounded-[inherit] before:transition-colors before:duration-fast motion-reduce:before:transition-none group-hover:before:bg-fill-subtle group-focus-visible:before:bg-fill-subtle';\n"],"names":[],"mappings":";;;;AA6BA,MAAM,eAAA,GACJ,wHAAA;AACF,MAAM,cAAA,GACJ,+GAAA;AACF,MAAM,YAAA,GAAe,8FAAA;AAEd,MAAM,qBAAqB,qDAAA,GAAwD;AAEnF,MAAM,sBAAsB,yBAAA,GAA4B;AAExD,MAAM,qBAAqB,2BAAA,GAA8B;AAQzD,MAAM,oBAAoB,8BAAA,GAAiC;AAM3D,MAAM,iBAAiB,gBAAA,GAAmB;AAO1C,MAAM,sBAAA,GAAyB;AAQ/B,MAAM,2BAAA,GACX;;;;;;;;;;"}
+{"version":3,"file":"raised-surface.cjs.js","sources":["../../src/ds/primitives/raised-surface.ts"],"sourcesContent":["/**\n * Two recipes, because elevation encodes distance from the canvas and there are\n * only two distances in this product.\n *\n * A *raised* surface sits in the flow — card, list panel, settings container,\n * table head, app frame. It lifts a couple of pixels, which is also what keeps\n * it honest: a tile in a grid inside a scroller is clipped by that scroller, so\n * a shadow that bleeds further than the tile's own clearance gets sliced into a\n * hard line along the container edge.\n *\n * An *overlay* is detached — popover, dropdown, dialog, drawer, tooltip. It is\n * never clipped, has to separate from arbitrary content beneath it, and so\n * carries the long falloff.\n *\n * Both recipes carry a `--surface-rim` inset edge, a top highlight in dark,\n * and elevation drops. Adding a CSS border on that same edge doubles it.\n * Content dividers use `--border`; frame headers use `border-surface-rim`\n * and stay inside the inset pixel reserved by MainCard.\n *\n * Radius is deliberately absent — it belongs to the family (`rounded-xl` for a\n * popup, `rounded-studio-frame` for the app frame).\n *\n * A raised surface pins its own fill across states. Interaction is expressed by\n * the state layer below, never by swapping the background: `Button`'s variants\n * all drive `background-color` on hover, and a raised surface wearing one would\n * otherwise turn translucent mid-hover and composite over the canvas. A call\n * site that genuinely wants another fill still overrides it, since its own\n * classes come after these.\n */\nconst fieldsOnSurface =\n  '[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--field-rim-on-surface)]';\nconst fieldsOnDialog =\n  '[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--surface-rim)]';\nconst fieldsOnPage = '[--field:var(--card)] [--field-disabled:var(--fill-subtle)] [--field-rim:var(--surface-rim)]';\n\nexport const raisedSurfaceStyle = 'bg-card hover:bg-card active:bg-card shadow-raised ' + fieldsOnSurface;\n\nexport const overlaySurfaceStyle = 'bg-card shadow-overlay ' + fieldsOnSurface;\n\nexport const dialogSurfaceStyle = 'bg-dialog shadow-overlay ' + fieldsOnDialog;\n\n/**\n * The app frame and the panels docked beside it. Same elevation as a card, one\n * step lower fill: a frame is a hole cut in the rail, and what sits inside it —\n * cards, fields, tables — needs a step to rise above. `Card` is for that\n * content, never for the frame around it.\n */\nexport const frameSurfaceStyle = 'bg-background shadow-raised ' + fieldsOnPage;\n\n/**\n * The frame's fill without its elevation, for a frame that is raised only at\n * some breakpoints: `MainCard` is flat page content below `lg`.\n */\nexport const frameFillStyle = 'bg-background ' + fieldsOnPage;\n\n/**\n * Interaction states for a surface that already carries an opaque fill. The\n * `state-layer` utility in `components.css` holds the reasoning and the measured\n * numbers: the rung has to be layered, never swapped into `background-color`.\n */\nexport const surfaceStateLayerStyle = 'state-layer';\n\n/**\n * Same layer, driven by an ancestor marked `group` rather than the surface\n * itself. A utility cannot read an ancestor's state, so this one stays composed\n * from variants — `isolate` and the negative z-index do the same job as the\n * utility's, and `inset-px` likewise keeps the inset rim visible.\n */\nexport const surfaceGroupStateLayerStyle =\n  'relative isolate before:pointer-events-none before:absolute before:-z-1 before:inset-px before:rounded-[inherit] before:transition-colors before:duration-fast motion-reduce:before:transition-none group-hover:before:bg-fill-subtle group-focus-visible:before:bg-fill-subtle';\n"],"names":[],"mappings":";;;;AA6BA,MAAM,eAAA,GACJ,wHAAA;AACF,MAAM,cAAA,GACJ,+GAAA;AACF,MAAM,YAAA,GAAe,8FAAA;AAEd,MAAM,qBAAqB,qDAAA,GAAwD;AAEnF,MAAM,sBAAsB,yBAAA,GAA4B;AAExD,MAAM,qBAAqB,2BAAA,GAA8B;AAQzD,MAAM,oBAAoB,8BAAA,GAAiC;AAM3D,MAAM,iBAAiB,gBAAA,GAAmB;AAO1C,MAAM,sBAAA,GAAyB;AAQ/B,MAAM,2BAAA,GACX;;;;;;;;;;"}

package/dist/primitives/raised-surface.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"raised-surface.es.js","sources":["../../src/ds/primitives/raised-surface.ts"],"sourcesContent":["/**\n * Two recipes, because elevation encodes distance from the canvas and there are\n * only two distances in this product.\n *\n * A *raised* surface sits in the flow — card, list panel, settings container,\n * table head, app frame. It lifts a couple of pixels, which is also what keeps\n * it honest: a tile in a grid inside a scroller is clipped by that scroller, so\n * a shadow that bleeds further than the tile's own clearance gets sliced into a\n * hard line along the container edge.\n *\n * An *overlay* is detached — popover, dropdown, dialog, drawer, tooltip. It is\n * never clipped, has to separate from arbitrary content beneath it, and so\n * carries the long falloff.\n *\n * Both recipes carry a `--surface-rim` inset edge, a top highlight in dark,\n * and elevation drops. Adding a CSS border on that same edge doubles it.\n * Content dividers use `--border`; frame headers use `border-surface-rim`\n * and stay inside the inset pixel reserved by MainCard.\n *\n * Radius is deliberately absent — it belongs to the family (`rounded-xl` for a\n * popup, `rounded-studio-frame` for the app frame).\n *\n * A raised surface pins its own fill across states. Interaction is expressed by\n * the state layer below, never by swapping the background: `Button`'s variants\n * all drive `background-color` on hover, and a raised surface wearing one would\n * otherwise turn translucent mid-hover and composite over the canvas. A call\n * site that genuinely wants another fill still overrides it, since its own\n * classes come after these.\n */\nconst fieldsOnSurface =\n  '[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--field-rim-on-surface)]';\nconst fieldsOnDialog =\n  '[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--surface-rim)]';\nconst fieldsOnPage = '[--field:var(--card)] [--field-disabled:var(--fill-subtle)] [--field-rim:var(--surface-rim)]';\n\nexport const raisedSurfaceStyle = 'bg-card hover:bg-card active:bg-card shadow-raised ' + fieldsOnSurface;\n\nexport const overlaySurfaceStyle = 'bg-card shadow-overlay ' + fieldsOnSurface;\n\nexport const dialogSurfaceStyle = 'bg-dialog shadow-overlay ' + fieldsOnDialog;\n\n/**\n * The app frame and the panels docked beside it. Same elevation as a card, one\n * step lower fill: a frame is a hole cut in the rail, and what sits inside it —\n * cards, fields, tables — needs a step to rise above. `Card` is for that\n * content, never for the frame around it.\n */\nexport const frameSurfaceStyle = 'bg-background shadow-raised ' + fieldsOnPage;\n\n/**\n * The frame's fill without its elevation, for a frame that is raised only at\n * some breakpoints: `MainCard` is flat page content below `lg`.\n */\nexport const frameFillStyle = 'bg-background ' + fieldsOnPage;\n\n/**\n * Interaction states for a surface that already carries an opaque fill. The\n * `state-layer` utility in `src/index.css` holds the reasoning and the measured\n * numbers: the rung has to be layered, never swapped into `background-color`.\n */\nexport const surfaceStateLayerStyle = 'state-layer';\n\n/**\n * Same layer, driven by an ancestor marked `group` rather than the surface\n * itself. A utility cannot read an ancestor's state, so this one stays composed\n * from variants — `isolate` and the negative z-index do the same job as the\n * utility's, and `inset-px` likewise keeps the inset rim visible.\n */\nexport const surfaceGroupStateLayerStyle =\n  'relative isolate before:pointer-events-none before:absolute before:-z-1 before:inset-px before:rounded-[inherit] before:transition-colors before:duration-fast motion-reduce:before:transition-none group-hover:before:bg-fill-subtle group-focus-visible:before:bg-fill-subtle';\n"],"names":[],"mappings":"AA6BA,MAAM,eAAA,GACJ,wHAAA;AACF,MAAM,cAAA,GACJ,+GAAA;AACF,MAAM,YAAA,GAAe,8FAAA;AAEd,MAAM,qBAAqB,qDAAA,GAAwD;AAEnF,MAAM,sBAAsB,yBAAA,GAA4B;AAExD,MAAM,qBAAqB,2BAAA,GAA8B;AAQzD,MAAM,oBAAoB,8BAAA,GAAiC;AAM3D,MAAM,iBAAiB,gBAAA,GAAmB;AAO1C,MAAM,sBAAA,GAAyB;AAQ/B,MAAM,2BAAA,GACX;;;;"}
+{"version":3,"file":"raised-surface.es.js","sources":["../../src/ds/primitives/raised-surface.ts"],"sourcesContent":["/**\n * Two recipes, because elevation encodes distance from the canvas and there are\n * only two distances in this product.\n *\n * A *raised* surface sits in the flow — card, list panel, settings container,\n * table head, app frame. It lifts a couple of pixels, which is also what keeps\n * it honest: a tile in a grid inside a scroller is clipped by that scroller, so\n * a shadow that bleeds further than the tile's own clearance gets sliced into a\n * hard line along the container edge.\n *\n * An *overlay* is detached — popover, dropdown, dialog, drawer, tooltip. It is\n * never clipped, has to separate from arbitrary content beneath it, and so\n * carries the long falloff.\n *\n * Both recipes carry a `--surface-rim` inset edge, a top highlight in dark,\n * and elevation drops. Adding a CSS border on that same edge doubles it.\n * Content dividers use `--border`; frame headers use `border-surface-rim`\n * and stay inside the inset pixel reserved by MainCard.\n *\n * Radius is deliberately absent — it belongs to the family (`rounded-xl` for a\n * popup, `rounded-studio-frame` for the app frame).\n *\n * A raised surface pins its own fill across states. Interaction is expressed by\n * the state layer below, never by swapping the background: `Button`'s variants\n * all drive `background-color` on hover, and a raised surface wearing one would\n * otherwise turn translucent mid-hover and composite over the canvas. A call\n * site that genuinely wants another fill still overrides it, since its own\n * classes come after these.\n */\nconst fieldsOnSurface =\n  '[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--field-rim-on-surface)]';\nconst fieldsOnDialog =\n  '[--field:var(--field-on-surface)] [--field-disabled:var(--field-on-surface)] [--field-rim:var(--surface-rim)]';\nconst fieldsOnPage = '[--field:var(--card)] [--field-disabled:var(--fill-subtle)] [--field-rim:var(--surface-rim)]';\n\nexport const raisedSurfaceStyle = 'bg-card hover:bg-card active:bg-card shadow-raised ' + fieldsOnSurface;\n\nexport const overlaySurfaceStyle = 'bg-card shadow-overlay ' + fieldsOnSurface;\n\nexport const dialogSurfaceStyle = 'bg-dialog shadow-overlay ' + fieldsOnDialog;\n\n/**\n * The app frame and the panels docked beside it. Same elevation as a card, one\n * step lower fill: a frame is a hole cut in the rail, and what sits inside it —\n * cards, fields, tables — needs a step to rise above. `Card` is for that\n * content, never for the frame around it.\n */\nexport const frameSurfaceStyle = 'bg-background shadow-raised ' + fieldsOnPage;\n\n/**\n * The frame's fill without its elevation, for a frame that is raised only at\n * some breakpoints: `MainCard` is flat page content below `lg`.\n */\nexport const frameFillStyle = 'bg-background ' + fieldsOnPage;\n\n/**\n * Interaction states for a surface that already carries an opaque fill. The\n * `state-layer` utility in `components.css` holds the reasoning and the measured\n * numbers: the rung has to be layered, never swapped into `background-color`.\n */\nexport const surfaceStateLayerStyle = 'state-layer';\n\n/**\n * Same layer, driven by an ancestor marked `group` rather than the surface\n * itself. A utility cannot read an ancestor's state, so this one stays composed\n * from variants — `isolate` and the negative z-index do the same job as the\n * utility's, and `inset-px` likewise keeps the inset rim visible.\n */\nexport const surfaceGroupStateLayerStyle =\n  'relative isolate before:pointer-events-none before:absolute before:-z-1 before:inset-px before:rounded-[inherit] before:transition-colors before:duration-fast motion-reduce:before:transition-none group-hover:before:bg-fill-subtle group-focus-visible:before:bg-fill-subtle';\n"],"names":[],"mappings":"AA6BA,MAAM,eAAA,GACJ,wHAAA;AACF,MAAM,cAAA,GACJ,+GAAA;AACF,MAAM,YAAA,GAAe,8FAAA;AAEd,MAAM,qBAAqB,qDAAA,GAAwD;AAEnF,MAAM,sBAAsB,yBAAA,GAA4B;AAExD,MAAM,qBAAqB,2BAAA,GAA8B;AAQzD,MAAM,oBAAoB,8BAAA,GAAiC;AAM3D,MAAM,iBAAiB,gBAAA,GAAmB;AAO1C,MAAM,sBAAA,GAAyB;AAQ/B,MAAM,2BAAA,GACX;;;;"}

package/dist/src/domains/datasets/components/index.d.ts

@@ -1 +1 @@
-export { SaveAsDatasetItemDialog, type SaveAsDatasetItemDialogProps } from './save-as-dataset-item-dialog';
+export { SaveAsDatasetItemDialog, type SaveAsDatasetItemDialogProps, type CreateDatasetDialogRenderProps, } from './save-as-dataset-item-dialog';

package/dist/src/domains/datasets/components/save-as-dataset-item-dialog.d.ts

@@ -1,5 +1,10 @@
 import { ReactNode } from 'react';
-import { SideDialogRootProps } from '../../../ds/components/SideDialog';
+import { DataPanelProps } from '../../../ds/components/DataPanel';
+export type CreateDatasetDialogRenderProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSuccess: (datasetId: string) => void;
+};
 export type SaveAsDatasetItemDialogProps = {
     initialInput: string;
     initialGroundTruth: string;
@@ -12,10 +17,16 @@ export type SaveAsDatasetItemDialogProps = {
     breadcrumb: ReactNode;
     isOpen: boolean;
     onClose: () => void;
-    level?: SideDialogRootProps['level'];
+    /** Sibling-drawer elevation (see `DataPanel`); render after the panel it covers. */
+    depth?: DataPanelProps['depth'];
     source?: {
         type: 'csv' | 'json' | 'trace' | 'llm' | 'experiment-result' | 'candidate-screener';
         referenceId?: string;
     };
+    /**
+     * Renders a create-dataset dialog. When set, the Dataset select offers "Create dataset" as its
+     * first option and selects the new dataset once created.
+     */
+    renderCreateDatasetDialog?: (props: CreateDatasetDialogRenderProps) => ReactNode;
 };
-export declare function SaveAsDatasetItemDialog({ initialInput, initialGroundTruth, initialTrajectory, trajectoryLoading, initialToolMocks, breadcrumb, isOpen, onClose, level, source, }: SaveAsDatasetItemDialogProps): import("react").JSX.Element;
+export declare function SaveAsDatasetItemDialog({ initialInput, initialGroundTruth, initialTrajectory, trajectoryLoading, initialToolMocks, breadcrumb, isOpen, onClose, depth, source, renderCreateDatasetDialog, }: SaveAsDatasetItemDialogProps): import("react").JSX.Element;

package/dist/src/domains/observability/components/trace-as-item-dialog.d.ts

@@ -1,5 +1,6 @@
+import { SaveAsDatasetItemDialogProps } from '../../datasets';
 import { SpanRecord } from '../../traces/types';
-import { SideDialogRootProps } from '../../../ds/components/SideDialog';
+import { DataPanelProps } from '../../../ds/components/DataPanel';
 type TraceAsItemDialogProps = {
     /** Full span record — if provided, used directly (no fetch). */
     traceDetails?: SpanRecord;
@@ -8,7 +9,8 @@ type TraceAsItemDialogProps = {
     traceId?: string;
     isOpen: boolean;
     onClose: () => void;
-    level?: SideDialogRootProps['level'];
+    depth?: DataPanelProps['depth'];
+    renderCreateDatasetDialog?: SaveAsDatasetItemDialogProps['renderCreateDatasetDialog'];
 };
-export declare function TraceAsItemDialog({ traceDetails: externalTraceDetails, rootSpanId, traceId, isOpen, onClose, level, }: TraceAsItemDialogProps): import("react").JSX.Element;
+export declare function TraceAsItemDialog({ traceDetails: externalTraceDetails, rootSpanId, traceId, isOpen, onClose, depth, renderCreateDatasetDialog, }: TraceAsItemDialogProps): import("react").JSX.Element;
 export {};

package/dist/src/domains/scores/components/score-as-item-dialog.d.ts

@@ -1,12 +1,12 @@
 import { ClientScoreRowData } from '@mastra/client-js';
 import { ScoreRowData } from '@mastra/core/evals';
-import { SideDialogRootProps } from '../../../ds/components/SideDialog';
+import { DataPanelProps } from '../../../ds/components/DataPanel';
 type ScoreForDatasetItem = ScoreRowData | ClientScoreRowData;
 export type ScoreAsItemDialogProps = {
     score?: ScoreForDatasetItem;
     isOpen: boolean;
     onClose: () => void;
-    level?: SideDialogRootProps['level'];
+    depth?: DataPanelProps['depth'];
 };
-export declare function ScoreAsItemDialog({ score, isOpen, onClose, level }: ScoreAsItemDialogProps): import("react").JSX.Element;
+export declare function ScoreAsItemDialog({ score, isOpen, onClose, depth }: ScoreAsItemDialogProps): import("react").JSX.Element;
 export {};

package/dist/src/ds/components/Breadcrumb/Breadcrumb.d.ts

@@ -24,7 +24,7 @@ export interface CrumbProps {
     action?: React.ReactNode;
     /**
      * Entity switcher rendered next to the label; spread `crumbSwitcherTriggerProps` on it.
-     * On the current crumb there is nowhere to navigate, so its hit area covers the whole crumb.
+     * When the crumb doesn't navigate (current crumb, or no `to`), its hit area covers the whole crumb.
      */
     switcher?: React.ReactNode;
     'data-testid'?: string;
@@ -32,4 +32,4 @@ export interface CrumbProps {
 export declare const CrumbSkeleton: (props: {
     "data-testid"?: string;
 }) => React.JSX.Element;
-export declare const Crumb: ({ className, as, isCurrent, action, switcher, icon, isLoading, children, ...props }: CrumbProps) => React.JSX.Element;
+export declare const Crumb: ({ className, as, to, isCurrent, action, switcher, icon, isLoading, children, ...props }: CrumbProps) => React.JSX.Element;

package/dist/src/ds/components/Code/code.d.ts

@@ -8,7 +8,7 @@ export interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {
 /**
  * Low-level shiki token renderer shared by `CodeBlock` and `MarkdownRenderer`.
  * Dual-theme colors stay as `--shiki-light` / `--shiki-dark` CSS variables on
- * each token span; the `.shiki-token` class (index.css) picks the variant from
+ * each token span; the `.shiki-token` class (components.css) picks the variant from
  * the `.dark` root class, so theme switching is pure CSS — no ThemeProvider
  * required. Renders plain text while highlighting is pending or when the
  * language is missing/unknown.

package/dist/src/ds/primitives/raised-surface.d.ts

@@ -15,7 +15,7 @@ export declare const frameSurfaceStyle: string;
 export declare const frameFillStyle: string;
 /**
  * Interaction states for a surface that already carries an opaque fill. The
- * `state-layer` utility in `src/index.css` holds the reasoning and the measured
+ * `state-layer` utility in `components.css` holds the reasoning and the measured
  * numbers: the rung has to be layered, never swapped into `background-color`.
  */
 export declare const surfaceStateLayerStyle = "state-layer";

package/dist/style.css

@@ -193,8 +193,6 @@
     --color-brand-blue: #6ccdfb;
     --color-brand-red: #ff4758;
     --color-brand-yellow: #e7e67b;
-    --color-warning-subtle: var(--warning-subtle);
-    --color-warning-indicator: var(--warning-indicator);
     --color-scrim: var(--scrim);
     --color-surface-overlay-soft: var(--surface-overlay-soft);
     --color-surface-overlay-strong: var(--surface-overlay-strong);
@@ -279,7 +277,6 @@
     --duration-slow: .3s;
     --ease-out-custom: cubic-bezier(.33, 1, .68, 1);
     --color-background: var(--background);
-    --color-sidebar: var(--sidebar);
   }
 }
 
@@ -3919,6 +3916,12 @@
     animation: var(--animate-spin);
   }
 
+  .time-input::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    filter: invert(50%);
+    background: url("/icons/clock.svg") center / 1em 1em no-repeat;
+  }
+
   .cursor-col-resize {
     cursor: col-resize;
   }
@@ -14180,6 +14183,22 @@ html.light {
   --chart-sequential-5: var(--purple-500);
 }
 
+:root {
+  --syntax-string: var(--green-300);
+  --syntax-keyword: var(--red-400);
+  --syntax-literal: var(--amber-300);
+  --syntax-name: var(--cyan-300);
+  --syntax-link: var(--blue-400);
+}
+
+html.light {
+  --syntax-string: var(--green-700);
+  --syntax-keyword: var(--red-600);
+  --syntax-literal: var(--amber-800);
+  --syntax-name: var(--cyan-800);
+  --syntax-link: var(--blue-600);
+}
+
 :root {
   --fill-tint: 100%;
   --fill-subtle: oklch(var(--fill-tint) 0 0 / 4%);
@@ -14292,22 +14311,6 @@ html.light {
   --placeholder: var(--gray-7);
 }
 
-.cm-editor {
-  --syntax-string: var(--green-300);
-  --syntax-keyword: var(--red-400);
-  --syntax-literal: var(--amber-300);
-  --syntax-name: var(--cyan-300);
-  --syntax-link: var(--blue-400);
-}
-
-html.light .cm-editor {
-  --syntax-string: var(--green-700);
-  --syntax-keyword: var(--red-600);
-  --syntax-literal: var(--amber-800);
-  --syntax-name: var(--cyan-800);
-  --syntax-link: var(--blue-600);
-}
-
 .thread-viewport > [data-radix-scroll-area-content] {
   background-color: inherit;
   flex-direction: column;

package/dist/toast.css

@@ -1,5 +1,5 @@
 /* Toast tokens live here — only consumed by `.mastra-toaster` so they don't need to ship in
-   index.css for every component. The bg/border alias theme-scoped status roles, so the single
+   components.css for every component. The bg/border alias theme-scoped status roles, so the single
    :root declaration flips with the theme. */
 :root {
   --toast-success-bg: var(--success-subtle);

package/dist/tokens.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.cjs.js","sources":["../src/ds/tokens/animations.ts","../src/ds/tokens/borders.ts","../src/ds/tokens/fonts.ts","../src/ds/tokens/shadows.ts","../src/ds/tokens/sizes.ts"],"sourcesContent":["/** Named duration rungs, one per `@utility duration-*` in `theme/motion.css`. Tailwind cannot\n * infer a custom utility, so `lib/tw-merge-config.ts` registers these names to keep\n * `duration-fast` and `duration-slow` from both surviving a merge. */\nexport const Durations = ['fast', 'normal', 'slow'] as const;\n\n/** Entrance played by anything the reader watches arrive. Defined in `ds/components/Arrival/arrival.css`. */\nexport const ARRIVING_CLASS = 'mastra-arriving';\n\n/** How long that entrance runs, and so how long a word counts as new. Kept in step with `arrival.css`. */\nexport const ARRIVING_MS = 800;\n","export const BorderRadius = {\n  none: 'var(--radius-none)',\n  sm: 'var(--radius-sm)',\n  md: 'var(--radius-md)',\n  lg: 'var(--radius-lg)',\n  xl: 'var(--radius-xl)',\n};\n","// Every `--text-*` role in `theme/typography.css`, in scale order. `lib/tw-merge-config.ts`\n// turns this list into the `font-size` conflict group, so one role class cleanly replaces\n// another in `cn()`; a role added to the CSS and missing here silently stops deduping.\n// `theme-export.test.ts` holds the two sides in step.\n//\n// A role is a complete text style: the size arrives with the weight, line height and\n// tracking declared beside it in the CSS. Components pick a role; they never assemble one,\n// and nothing mirrors those values here — the foundations story reads them off the element.\nexport const TextRoles = [\n  'hero',\n  'lead',\n  'display',\n  'title',\n  'heading',\n  'subheading',\n  'body',\n  'label',\n  'card-title',\n  'card-title-tight',\n  'card-title-strong',\n  'body-sm',\n  'column',\n  'caption',\n  'eyebrow',\n  'meta',\n] as const;\n\nexport type TextRole = (typeof TextRoles)[number];\n\n/** SVG/canvas text can't read CSS tokens; these mirror `meta` (10px) and `caption` (12px). */\nexport const CHART_TICK_FONT_SIZE = 10;\nexport const CHART_LABEL_FONT_SIZE = 12;\n","// The `shadow-raised` / `shadow-overlay` utilities compose lip + rim + drops on\n// the element (see `src/index.css`); these are the drop layers they pull in.\nexport const Shadows = {\n  raised: 'var(--elevation-raised)',\n  overlay: 'var(--elevation-overlay)',\n  input: 'var(--elevation-raised)',\n};\n","export const Sizes = {\n  'icon-xs': '12px',\n  'icon-sm': '14px',\n  'icon-md': '16px',\n  'icon-lg': '20px',\n  'control-sm': '1.75rem',\n  'control-md': '1.875rem',\n  'control-lg': '2rem',\n  'header-default': '40px',\n  'table-header': '28px',\n  'table-row': '40px',\n  'table-row-small': '32px',\n  'avatar-sm': '24px',\n  'avatar-md': '32px',\n  'avatar-lg': '40px',\n  dropdown: '300px',\n};\n"],"names":[],"mappings":";;;;;;AAGO,MAAM,SAAA,GAAY,CAAC,MAAA,EAAQ,QAAA,EAAU,MAAM;AAG3C,MAAM,cAAA,GAAiB;AAGvB,MAAM,WAAA,GAAc;;ACTpB,MAAM,YAAA,GAAe;AAAA,EAC1B,IAAA,EAAM,oBAAA;AAAA,EACN,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI;AACN;;ACEO,MAAM,SAAA,GAAY;AAAA,EACvB,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAA;AAAA,EACA,mBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAKO,MAAM,oBAAA,GAAuB;AAC7B,MAAM,qBAAA,GAAwB;;AC7B9B,MAAM,OAAA,GAAU;AAAA,EACrB,MAAA,EAAQ,yBAAA;AAAA,EACR,OAAA,EAAS,0BAAA;AAAA,EACT,KAAA,EAAO;AACT;;ACNO,MAAM,KAAA,GAAQ;AAAA,EACnB,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,YAAA,EAAc,SAAA;AAAA,EACd,YAAA,EAAc,UAAA;AAAA,EACd,YAAA,EAAc,MAAA;AAAA,EACd,gBAAA,EAAkB,MAAA;AAAA,EAClB,cAAA,EAAgB,MAAA;AAAA,EAChB,WAAA,EAAa,MAAA;AAAA,EACb,iBAAA,EAAmB,MAAA;AAAA,EACnB,WAAA,EAAa,MAAA;AAAA,EACb,WAAA,EAAa,MAAA;AAAA,EACb,WAAA,EAAa,MAAA;AAAA,EACb,QAAA,EAAU;AACZ;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tokens.cjs.js","sources":["../src/ds/tokens/animations.ts","../src/ds/tokens/borders.ts","../src/ds/tokens/fonts.ts","../src/ds/tokens/shadows.ts","../src/ds/tokens/sizes.ts"],"sourcesContent":["/** Named duration rungs, one per `@utility duration-*` in `theme/motion.css`. Tailwind cannot\n * infer a custom utility, so `lib/tw-merge-config.ts` registers these names to keep\n * `duration-fast` and `duration-slow` from both surviving a merge. */\nexport const Durations = ['fast', 'normal', 'slow'] as const;\n\n/** Entrance played by anything the reader watches arrive. Defined in `ds/components/Arrival/arrival.css`. */\nexport const ARRIVING_CLASS = 'mastra-arriving';\n\n/** How long that entrance runs, and so how long a word counts as new. Kept in step with `arrival.css`. */\nexport const ARRIVING_MS = 800;\n","export const BorderRadius = {\n  none: 'var(--radius-none)',\n  sm: 'var(--radius-sm)',\n  md: 'var(--radius-md)',\n  lg: 'var(--radius-lg)',\n  xl: 'var(--radius-xl)',\n};\n","// Every `--text-*` role in `theme/typography.css`, in scale order. `lib/tw-merge-config.ts`\n// turns this list into the `font-size` conflict group, so one role class cleanly replaces\n// another in `cn()`; a role added to the CSS and missing here silently stops deduping.\n// `theme-export.test.ts` holds the two sides in step.\n//\n// A role is a complete text style: the size arrives with the weight, line height and\n// tracking declared beside it in the CSS. Components pick a role; they never assemble one,\n// and nothing mirrors those values here — the foundations story reads them off the element.\nexport const TextRoles = [\n  'hero',\n  'lead',\n  'display',\n  'title',\n  'heading',\n  'subheading',\n  'body',\n  'label',\n  'card-title',\n  'card-title-tight',\n  'card-title-strong',\n  'body-sm',\n  'column',\n  'caption',\n  'eyebrow',\n  'meta',\n] as const;\n\nexport type TextRole = (typeof TextRoles)[number];\n\n/** SVG/canvas text can't read CSS tokens; these mirror `meta` (10px) and `caption` (12px). */\nexport const CHART_TICK_FONT_SIZE = 10;\nexport const CHART_LABEL_FONT_SIZE = 12;\n","// The `shadow-raised` / `shadow-overlay` utilities compose lip + rim + drops on\n// the element (see `components.css`); these are the drop layers they pull in.\nexport const Shadows = {\n  raised: 'var(--elevation-raised)',\n  overlay: 'var(--elevation-overlay)',\n  input: 'var(--elevation-raised)',\n};\n","export const Sizes = {\n  'icon-xs': '12px',\n  'icon-sm': '14px',\n  'icon-md': '16px',\n  'icon-lg': '20px',\n  'control-sm': '1.75rem',\n  'control-md': '1.875rem',\n  'control-lg': '2rem',\n  'header-default': '40px',\n  'table-header': '28px',\n  'table-row': '40px',\n  'table-row-small': '32px',\n  'avatar-sm': '24px',\n  'avatar-md': '32px',\n  'avatar-lg': '40px',\n  dropdown: '300px',\n};\n"],"names":[],"mappings":";;;;;;AAGO,MAAM,SAAA,GAAY,CAAC,MAAA,EAAQ,QAAA,EAAU,MAAM;AAG3C,MAAM,cAAA,GAAiB;AAGvB,MAAM,WAAA,GAAc;;ACTpB,MAAM,YAAA,GAAe;AAAA,EAC1B,IAAA,EAAM,oBAAA;AAAA,EACN,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI;AACN;;ACEO,MAAM,SAAA,GAAY;AAAA,EACvB,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAA;AAAA,EACA,mBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAKO,MAAM,oBAAA,GAAuB;AAC7B,MAAM,qBAAA,GAAwB;;AC7B9B,MAAM,OAAA,GAAU;AAAA,EACrB,MAAA,EAAQ,yBAAA;AAAA,EACR,OAAA,EAAS,0BAAA;AAAA,EACT,KAAA,EAAO;AACT;;ACNO,MAAM,KAAA,GAAQ;AAAA,EACnB,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,YAAA,EAAc,SAAA;AAAA,EACd,YAAA,EAAc,UAAA;AAAA,EACd,YAAA,EAAc,MAAA;AAAA,EACd,gBAAA,EAAkB,MAAA;AAAA,EAClB,cAAA,EAAgB,MAAA;AAAA,EAChB,WAAA,EAAa,MAAA;AAAA,EACb,iBAAA,EAAmB,MAAA;AAAA,EACnB,WAAA,EAAa,MAAA;AAAA,EACb,WAAA,EAAa,MAAA;AAAA,EACb,WAAA,EAAa,MAAA;AAAA,EACb,QAAA,EAAU;AACZ;;;;;;;;;;;;;;;"}

package/dist/tokens.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.es.js","sources":["../src/ds/tokens/animations.ts","../src/ds/tokens/borders.ts","../src/ds/tokens/fonts.ts","../src/ds/tokens/shadows.ts","../src/ds/tokens/sizes.ts"],"sourcesContent":["/** Named duration rungs, one per `@utility duration-*` in `theme/motion.css`. Tailwind cannot\n * infer a custom utility, so `lib/tw-merge-config.ts` registers these names to keep\n * `duration-fast` and `duration-slow` from both surviving a merge. */\nexport const Durations = ['fast', 'normal', 'slow'] as const;\n\n/** Entrance played by anything the reader watches arrive. Defined in `ds/components/Arrival/arrival.css`. */\nexport const ARRIVING_CLASS = 'mastra-arriving';\n\n/** How long that entrance runs, and so how long a word counts as new. Kept in step with `arrival.css`. */\nexport const ARRIVING_MS = 800;\n","export const BorderRadius = {\n  none: 'var(--radius-none)',\n  sm: 'var(--radius-sm)',\n  md: 'var(--radius-md)',\n  lg: 'var(--radius-lg)',\n  xl: 'var(--radius-xl)',\n};\n","// Every `--text-*` role in `theme/typography.css`, in scale order. `lib/tw-merge-config.ts`\n// turns this list into the `font-size` conflict group, so one role class cleanly replaces\n// another in `cn()`; a role added to the CSS and missing here silently stops deduping.\n// `theme-export.test.ts` holds the two sides in step.\n//\n// A role is a complete text style: the size arrives with the weight, line height and\n// tracking declared beside it in the CSS. Components pick a role; they never assemble one,\n// and nothing mirrors those values here — the foundations story reads them off the element.\nexport const TextRoles = [\n  'hero',\n  'lead',\n  'display',\n  'title',\n  'heading',\n  'subheading',\n  'body',\n  'label',\n  'card-title',\n  'card-title-tight',\n  'card-title-strong',\n  'body-sm',\n  'column',\n  'caption',\n  'eyebrow',\n  'meta',\n] as const;\n\nexport type TextRole = (typeof TextRoles)[number];\n\n/** SVG/canvas text can't read CSS tokens; these mirror `meta` (10px) and `caption` (12px). */\nexport const CHART_TICK_FONT_SIZE = 10;\nexport const CHART_LABEL_FONT_SIZE = 12;\n","// The `shadow-raised` / `shadow-overlay` utilities compose lip + rim + drops on\n// the element (see `src/index.css`); these are the drop layers they pull in.\nexport const Shadows = {\n  raised: 'var(--elevation-raised)',\n  overlay: 'var(--elevation-overlay)',\n  input: 'var(--elevation-raised)',\n};\n","export const Sizes = {\n  'icon-xs': '12px',\n  'icon-sm': '14px',\n  'icon-md': '16px',\n  'icon-lg': '20px',\n  'control-sm': '1.75rem',\n  'control-md': '1.875rem',\n  'control-lg': '2rem',\n  'header-default': '40px',\n  'table-header': '28px',\n  'table-row': '40px',\n  'table-row-small': '32px',\n  'avatar-sm': '24px',\n  'avatar-md': '32px',\n  'avatar-lg': '40px',\n  dropdown: '300px',\n};\n"],"names":[],"mappings":";;AAGO,MAAM,SAAA,GAAY,CAAC,MAAA,EAAQ,QAAA,EAAU,MAAM;AAG3C,MAAM,cAAA,GAAiB;AAGvB,MAAM,WAAA,GAAc;;ACTpB,MAAM,YAAA,GAAe;AAAA,EAC1B,IAAA,EAAM,oBAAA;AAAA,EACN,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI;AACN;;ACEO,MAAM,SAAA,GAAY;AAAA,EACvB,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAA;AAAA,EACA,mBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAKO,MAAM,oBAAA,GAAuB;AAC7B,MAAM,qBAAA,GAAwB;;AC7B9B,MAAM,OAAA,GAAU;AAAA,EACrB,MAAA,EAAQ,yBAAA;AAAA,EACR,OAAA,EAAS,0BAAA;AAAA,EACT,KAAA,EAAO;AACT;;ACNO,MAAM,KAAA,GAAQ;AAAA,EACnB,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,YAAA,EAAc,SAAA;AAAA,EACd,YAAA,EAAc,UAAA;AAAA,EACd,YAAA,EAAc,MAAA;AAAA,EACd,gBAAA,EAAkB,MAAA;AAAA,EAClB,cAAA,EAAgB,MAAA;AAAA,EAChB,WAAA,EAAa,MAAA;AAAA,EACb,iBAAA,EAAmB,MAAA;AAAA,EACnB,WAAA,EAAa,MAAA;AAAA,EACb,WAAA,EAAa,MAAA;AAAA,EACb,WAAA,EAAa,MAAA;AAAA,EACb,QAAA,EAAU;AACZ;;;;"}
+{"version":3,"file":"tokens.es.js","sources":["../src/ds/tokens/animations.ts","../src/ds/tokens/borders.ts","../src/ds/tokens/fonts.ts","../src/ds/tokens/shadows.ts","../src/ds/tokens/sizes.ts"],"sourcesContent":["/** Named duration rungs, one per `@utility duration-*` in `theme/motion.css`. Tailwind cannot\n * infer a custom utility, so `lib/tw-merge-config.ts` registers these names to keep\n * `duration-fast` and `duration-slow` from both surviving a merge. */\nexport const Durations = ['fast', 'normal', 'slow'] as const;\n\n/** Entrance played by anything the reader watches arrive. Defined in `ds/components/Arrival/arrival.css`. */\nexport const ARRIVING_CLASS = 'mastra-arriving';\n\n/** How long that entrance runs, and so how long a word counts as new. Kept in step with `arrival.css`. */\nexport const ARRIVING_MS = 800;\n","export const BorderRadius = {\n  none: 'var(--radius-none)',\n  sm: 'var(--radius-sm)',\n  md: 'var(--radius-md)',\n  lg: 'var(--radius-lg)',\n  xl: 'var(--radius-xl)',\n};\n","// Every `--text-*` role in `theme/typography.css`, in scale order. `lib/tw-merge-config.ts`\n// turns this list into the `font-size` conflict group, so one role class cleanly replaces\n// another in `cn()`; a role added to the CSS and missing here silently stops deduping.\n// `theme-export.test.ts` holds the two sides in step.\n//\n// A role is a complete text style: the size arrives with the weight, line height and\n// tracking declared beside it in the CSS. Components pick a role; they never assemble one,\n// and nothing mirrors those values here — the foundations story reads them off the element.\nexport const TextRoles = [\n  'hero',\n  'lead',\n  'display',\n  'title',\n  'heading',\n  'subheading',\n  'body',\n  'label',\n  'card-title',\n  'card-title-tight',\n  'card-title-strong',\n  'body-sm',\n  'column',\n  'caption',\n  'eyebrow',\n  'meta',\n] as const;\n\nexport type TextRole = (typeof TextRoles)[number];\n\n/** SVG/canvas text can't read CSS tokens; these mirror `meta` (10px) and `caption` (12px). */\nexport const CHART_TICK_FONT_SIZE = 10;\nexport const CHART_LABEL_FONT_SIZE = 12;\n","// The `shadow-raised` / `shadow-overlay` utilities compose lip + rim + drops on\n// the element (see `components.css`); these are the drop layers they pull in.\nexport const Shadows = {\n  raised: 'var(--elevation-raised)',\n  overlay: 'var(--elevation-overlay)',\n  input: 'var(--elevation-raised)',\n};\n","export const Sizes = {\n  'icon-xs': '12px',\n  'icon-sm': '14px',\n  'icon-md': '16px',\n  'icon-lg': '20px',\n  'control-sm': '1.75rem',\n  'control-md': '1.875rem',\n  'control-lg': '2rem',\n  'header-default': '40px',\n  'table-header': '28px',\n  'table-row': '40px',\n  'table-row-small': '32px',\n  'avatar-sm': '24px',\n  'avatar-md': '32px',\n  'avatar-lg': '40px',\n  dropdown: '300px',\n};\n"],"names":[],"mappings":";;AAGO,MAAM,SAAA,GAAY,CAAC,MAAA,EAAQ,QAAA,EAAU,MAAM;AAG3C,MAAM,cAAA,GAAiB;AAGvB,MAAM,WAAA,GAAc;;ACTpB,MAAM,YAAA,GAAe;AAAA,EAC1B,IAAA,EAAM,oBAAA;AAAA,EACN,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI;AACN;;ACEO,MAAM,SAAA,GAAY;AAAA,EACvB,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAA;AAAA,EACA,mBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAKO,MAAM,oBAAA,GAAuB;AAC7B,MAAM,qBAAA,GAAwB;;AC7B9B,MAAM,OAAA,GAAU;AAAA,EACrB,MAAA,EAAQ,yBAAA;AAAA,EACR,OAAA,EAAS,0BAAA;AAAA,EACT,KAAA,EAAO;AACT;;ACNO,MAAM,KAAA,GAAQ;AAAA,EACnB,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,SAAA,EAAW,MAAA;AAAA,EACX,YAAA,EAAc,SAAA;AAAA,EACd,YAAA,EAAc,UAAA;AAAA,EACd,YAAA,EAAc,MAAA;AAAA,EACd,gBAAA,EAAkB,MAAA;AAAA,EAClB,cAAA,EAAgB,MAAA;AAAA,EAChB,WAAA,EAAa,MAAA;AAAA,EACb,iBAAA,EAAmB,MAAA;AAAA,EACnB,WAAA,EAAa,MAAA;AAAA,EACb,WAAA,EAAa,MAAA;AAAA,EACb,WAAA,EAAa,MAAA;AAAA,EACb,QAAA,EAAU;AACZ;;;;"}

package/dist/use-text-highlight.css

@@ -3,14 +3,14 @@
    and text-shadow are honoured by `::highlight()` — border, padding and border-radius are
    ignored by the spec, so the highlight cannot have rounded corners. */
 ::highlight(search-result) {
-  background-color: var(--color-warning-indicator);
-  color: var(--color-sidebar);
+  background-color: var(--warning-indicator);
+  color: var(--sidebar);
 }
 
 /* The indirect match is a hint, not the answer: same hue, muted pairing (`warning-subtle`
    background with `warning-indicator` text) so it reads as related
    to the direct highlight without competing with it. Both themes define the pair. */
 ::highlight(search-result-indirect) {
-  background-color: var(--color-warning-subtle);
-  color: var(--color-warning-indicator);
+  background-color: var(--warning-subtle);
+  color: var(--warning-indicator);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "64.0.0",
+  "version": "65.0.0-alpha.1",
   "description": "Mastra Playground components",
   "sideEffects": [
     "**/*.css"
@@ -9,11 +9,15 @@
   "files": [
     "dist",
     "theme.css",
+    "components.css",
+    "sources.css",
     "theme"
   ],
   "exports": {
     "./style.css": "./dist/style.css",
     "./theme.css": "./theme.css",
+    "./components.css": "./components.css",
+    "./sources.css": "./sources.css",
     "./tokens": {
       "import": {
         "types": "./dist/tokens.d.ts",
@@ -170,6 +174,7 @@
     "@mcp-ui/client": "^7.1.0",
     "@pierre/diffs": "1.5.1",
     "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-virtual": "^3.13.22",
     "@uiw/codemirror-theme-dracula": "^4.25.11",
     "@uiw/react-codemirror": "^4.25.11",
@@ -191,6 +196,7 @@
     "shiki": "^1.29.2",
     "sonner": "^2.0.7",
     "superjson": "^2.2.6",
+    "tw-animate-css": "^1.4.0",
     "use-debounce": "^10.1.0",
     "zod": "^3.25.0"
   },
@@ -202,9 +208,9 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/ai-sdk": "^1.11.1",
-    "@mastra/react": "1.11.0",
-    "@mastra/client-js": "^1.55.0"
+    "@mastra/ai-sdk": "^1.11.2-alpha.0",
+    "@mastra/client-js": "^1.56.0-alpha.1",
+    "@mastra/react": "1.11.1-alpha.1"
   },
   "devDependencies": {
     "@modelcontextprotocol/sdk": "^1.32.1",
@@ -215,7 +221,6 @@
     "@stryker-mutator/core": "10.0.0",
     "@stryker-mutator/vitest-runner": "10.0.0",
     "@tailwindcss/postcss": "^4.3.3",
-    "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "4.3.3",
     "@tanstack/react-query": "^5.90.21",
     "@testing-library/react": "^16.3.2",
@@ -243,19 +248,18 @@
     "storybook": "^10.6.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "4.3.3",
-    "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.11",
-    "@mastra/client-js": "^1.55.0",
     "@internal/lint": "0.0.144",
-    "@mastra/memory": "1.38.0",
-    "@mastra/react": "1.11.0",
-    "@mastra/schema-compat": "1.3.15",
-    "@mastra/core": "1.78.0",
-    "@mastra/ai-sdk": "1.11.1"
+    "@mastra/ai-sdk": "1.11.2-alpha.0",
+    "@mastra/client-js": "^1.56.0-alpha.1",
+    "@mastra/react": "1.11.1-alpha.1",
+    "@mastra/schema-compat": "1.3.16-alpha.0",
+    "@mastra/core": "1.79.0-alpha.1",
+    "@mastra/memory": "1.39.0-alpha.0"
   },
   "homepage": "https://mastra.ai",
   "repository": {

package/sources.css

@@ -0,0 +1 @@
+@source './dist/**/*.js';

package/theme/code.css

@@ -0,0 +1,17 @@
+/* Syntax highlight roles the CodeMirror themes read, one chromatic ramp step per role. */
+
+:root {
+  --syntax-string: var(--green-300);
+  --syntax-keyword: var(--red-400);
+  --syntax-literal: var(--amber-300);
+  --syntax-name: var(--cyan-300);
+  --syntax-link: var(--blue-400);
+}
+
+html.light {
+  --syntax-string: var(--green-700);
+  --syntax-keyword: var(--red-600);
+  --syntax-literal: var(--amber-800);
+  --syntax-name: var(--cyan-800);
+  --syntax-link: var(--blue-600);
+}

package/theme/surfaces.css

@@ -100,7 +100,7 @@
    * overlay (popover, dropdown, dialog, drawer, tooltip).
    *
    * These are the drop layers only. The `shadow-raised` / `shadow-overlay`
-   * utilities in `src/index.css` assemble lip + rim + drops on the element
+   * utilities in `components.css` assemble lip + rim + drops on the element
    * itself, which is what lets a state repaint the rim: a custom property
    * holding `var(--surface-rim)` would be substituted here, on the root, and
    * every descendant would inherit the finished string.
@@ -117,7 +117,7 @@
    * `border` beside it, which would read as two lines — and is why a field and
    * a card can be the same material. Hover does not touch it: the rim is the
    * loudest part of a borderless surface, so a pointer wash goes through
-   * `--surface-tint` (see `src/index.css`) and leaves the boundary alone.
+   * `--surface-tint` (see `components.css`) and leaves the boundary alone.
    *
    * The rim is inset, so it cannot be clipped: the app frame and every
    * ScrollArea viewport are `overflow-hidden`, and an outer ring on a surface

package/theme.css

@@ -10,6 +10,7 @@
  *   colors      raw ramps — background, gray, gray-alpha, chromatic hues, Mastra brand
  *   status      status, badge, and product roles
  *   data-viz    chart series and span-type hues
+ *   code        syntax highlight roles
  *   surfaces    fill ladder, boundary ladder, elevation, scrim
  *   typography  text roles and font families
  *   scale       spacing multiplier, named rungs, radii, breakpoints
@@ -23,6 +24,7 @@
 @import './theme/colors.css';
 @import './theme/status.css';
 @import './theme/data-viz.css';
+@import './theme/code.css';
 @import './theme/surfaces.css';
 @import './theme/typography.css';
 @import './theme/scale.css';