@mastra/playground-ui 65.0.0-alpha.5 → 65.0.0-alpha.7

package/dist/{code-editor-8Fpinga4.js → code-editor-DOv4jc-0.js}

@@ -1,18 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { jsonLanguage } from '@codemirror/lang-json';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
-import { LanguageDescription, LanguageSupport, StreamLanguage, HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { LanguageDescription, LanguageSupport, StreamLanguage, syntaxHighlighting } from '@codemirror/language';
 import { EditorState, Prec } from '@codemirror/state';
 import { ViewPlugin, MatchDecorator, Decoration, EditorView } from '@codemirror/view';
-import { tags } from '@lezer/highlight';
-import { draculaInit } from '@uiw/codemirror-theme-dracula';
 import CodeMirror from '@uiw/react-codemirror';
 import { c as cva } from './index-CHS9F_Eo.js';
 import { useMemo, forwardRef } from 'react';
+import { s as syntaxHighlighter } from './highlight-CXDme3FZ.js';
 import { autocompletion } from '@codemirror/autocomplete';
 import { C as CopyButton } from './copy-button-B_i9lwFJ.js';
 import { u as useFieldControlAria } from './field-control-aria-DB6y41tQ.js';
-import { u as useTheme } from './theme-provider-BbMYMtxP.js';
 import { fieldErrorRimWithin, inputSurfaceAndFocusWithinStyle } from './primitives/form-element.es.js';
 import { c as cn } from './cn-CQUhN5Jx.js';
 
@@ -180,94 +178,7 @@ const variableHighlightPlugin = ViewPlugin.fromClass(
 );
 const variableHighlight = variableHighlightPlugin;
 
-function buildDarkTheme(font) {
-  const baseTheme = draculaInit({
-    settings: {
-      fontFamily: `var(--font-${font})`,
-      fontSize: "var(--text-body-sm)",
-      lineHighlight: "transparent",
-      gutterBackground: "transparent",
-      gutterForeground: "var(--placeholder)",
-      background: "transparent",
-      foreground: "var(--foreground)",
-      caret: "var(--foreground)"
-    },
-    styles: [
-      { tag: [tags.className, tags.propertyName], color: "var(--foreground)" },
-      { tag: tags.heading, color: "var(--info-indicator)", fontWeight: "bold" },
-      {
-        tag: [tags.heading1, tags.heading2, tags.heading3, tags.heading4, tags.heading5, tags.heading6],
-        color: "var(--info-indicator)",
-        fontWeight: "bold"
-      },
-      { tag: tags.emphasis, fontStyle: "italic", color: "var(--foreground)" },
-      { tag: tags.strong, fontWeight: "bold", color: "var(--foreground)" },
-      { tag: tags.link, color: "var(--info-indicator)", textDecoration: "underline" },
-      { tag: tags.url, color: "var(--info-indicator)" },
-      { tag: tags.monospace, color: "var(--foreground)" },
-      { tag: tags.strikethrough, textDecoration: "line-through" },
-      { tag: tags.quote, fontStyle: "italic", color: "var(--placeholder)" }
-    ]
-  });
-  const customLineNumberTheme = EditorView.theme({
-    ".cm-editor": {
-      backgroundColor: "transparent"
-    },
-    ".cm-content": {
-      color: "var(--foreground)",
-      caretColor: "var(--foreground)"
-    },
-    ".cm-lineNumbers .cm-gutterElement": {
-      color: "var(--placeholder)"
-    },
-    ".cm-activeLineGutter": {
-      color: "var(--muted-foreground)"
-    },
-    ".cm-cursor": {
-      borderLeftColor: "var(--foreground)"
-    },
-    ".cm-selectionBackground, .cm-content ::selection": {
-      backgroundColor: "var(--info-subtle)"
-    },
-    ".cm-tooltip-autocomplete": {
-      backgroundColor: "var(--background)",
-      border: "1px solid var(--border)",
-      borderRadius: "6px",
-      boxShadow: "var(--elevation-overlay)"
-    },
-    ".cm-tooltip-autocomplete > ul": {
-      fontFamily: "var(--font-mono)"
-    },
-    ".cm-completionLabel": {
-      color: "var(--foreground)"
-    },
-    ".cm-completionDetail": {
-      color: "var(--muted-foreground)",
-      fontSize: "var(--text-caption)",
-      marginLeft: "auto",
-      paddingLeft: "12px"
-    },
-    ".cm-completionInfo": {
-      backgroundColor: "var(--background)",
-      border: "1px solid var(--border)",
-      color: "var(--muted-foreground)",
-      padding: "8px 12px"
-    },
-    ".cm-completionIcon": {
-      display: "none"
-    },
-    "ul.cm-completionList li[aria-selected]": {
-      backgroundColor: "var(--fill-hover)",
-      color: "var(--foreground)"
-    },
-    ".cm-line .cm-variable-highlight": {
-      color: "var(--warning-foreground) !important",
-      fontWeight: "500"
-    }
-  });
-  return [baseTheme, customLineNumberTheme];
-}
-function buildLightTheme(font) {
+function buildCodemirrorTheme(font) {
   const editorTheme = EditorView.theme({
     "&": {
       backgroundColor: "transparent",
@@ -338,39 +249,10 @@ function buildLightTheme(font) {
       fontWeight: "500"
     }
   });
-  const highlightStyle = HighlightStyle.define([
-    { tag: [tags.comment, tags.bracket], color: "var(--placeholder)" },
-    { tag: [tags.string, tags.meta, tags.regexp], color: "var(--syntax-string)" },
-    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: "var(--syntax-literal)" },
-    { tag: [tags.keyword, tags.operator, tags.tagName], color: "var(--syntax-keyword)" },
-    { tag: [tags.function(tags.propertyName), tags.propertyName], color: "var(--syntax-name)" },
-    {
-      tag: [tags.definition(tags.variableName), tags.function(tags.variableName), tags.className, tags.attributeName],
-      color: "var(--syntax-link)"
-    },
-    { tag: [tags.variableName, tags.number], color: "var(--syntax-name)" },
-    { tag: [tags.name, tags.quote], color: "var(--syntax-string)" },
-    { tag: tags.heading, color: "var(--syntax-link)", fontWeight: "bold" },
-    {
-      tag: [tags.heading1, tags.heading2, tags.heading3, tags.heading4, tags.heading5, tags.heading6],
-      color: "var(--syntax-link)",
-      fontWeight: "bold"
-    },
-    { tag: [tags.emphasis], fontStyle: "italic", color: "var(--foreground)" },
-    { tag: [tags.strong], fontWeight: "bold", color: "var(--foreground)" },
-    { tag: tags.link, color: "var(--syntax-link)", textDecoration: "underline" },
-    { tag: tags.url, color: "var(--syntax-link)" },
-    { tag: tags.monospace, color: "var(--foreground)" },
-    { tag: tags.strikethrough, textDecoration: "line-through" },
-    { tag: [tags.deleted], color: "var(--syntax-keyword)" },
-    { tag: tags.invalid, color: "var(--destructive-foreground)" },
-    { tag: [tags.standard(tags.tagName)], color: "var(--syntax-string)" }
-  ]);
-  return [editorTheme, syntaxHighlighting(highlightStyle)];
+  return [editorTheme, syntaxHighlighting(syntaxHighlighter)];
 }
 const useCodemirrorTheme = (font = "mono") => {
-  const isDark = useTheme().resolvedTheme === "dark";
-  return useMemo(() => isDark ? buildDarkTheme(font) : buildLightTheme(font), [isDark, font]);
+  return useMemo(() => buildCodemirrorTheme(font), [font]);
 };
 const codeEditorVariants = cva(
   cn(
@@ -507,4 +389,4 @@ const CodeEditor = forwardRef(
 );
 
 export { CodeEditor as C, VARIABLE_PATTERN as V, createVariableAutocomplete as a, codeLanguages as c, flattenSchemaToVariables as f, useCodemirrorTheme as u, variableHighlight as v };
-//# sourceMappingURL=code-editor-8Fpinga4.js.map
+//# sourceMappingURL=code-editor-DOv4jc-0.js.map

package/dist/code-editor-DOv4jc-0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor-DOv4jc-0.js","sources":["../src/ds/components/CodeEditor/code-languages.ts","../src/ds/components/CodeEditor/schema-to-variables.ts","../src/ds/components/CodeEditor/variable-autocomplete-extension.ts","../src/ds/components/CodeEditor/variable-highlight-extension.ts","../src/ds/components/CodeEditor/code-editor.tsx"],"sourcesContent":["import { LanguageDescription, LanguageSupport, StreamLanguage } from '@codemirror/language';\n\nfunction legacy(parser: Parameters<typeof StreamLanguage.define>[0]) {\n  return new LanguageSupport(StreamLanguage.define(parser));\n}\n\n/**\n * A minimal subset of CodeMirror language descriptions used for fenced code\n * blocks inside markdown. Mirrors the relevant entries from\n * `@codemirror/language-data` but only the languages we actually support, so\n * bundlers don't have to emit a chunk for every known language.\n */\nexport const codeLanguages = [\n  LanguageDescription.of({\n    name: 'JavaScript',\n    alias: ['ecmascript', 'js', 'node'],\n    extensions: ['js', 'mjs', 'cjs'],\n    load() {\n      return import('@codemirror/lang-javascript').then(m => m.javascript());\n    },\n  }),\n  LanguageDescription.of({\n    name: 'JSON',\n    alias: ['json5'],\n    extensions: ['json', 'map'],\n    load() {\n      return import('@codemirror/lang-json').then(m => m.json());\n    },\n  }),\n  LanguageDescription.of({\n    name: 'JSX',\n    extensions: ['jsx'],\n    load() {\n      return import('@codemirror/lang-javascript').then(m => m.javascript({ jsx: true }));\n    },\n  }),\n  LanguageDescription.of({\n    name: 'Markdown',\n    extensions: ['md', 'markdown', 'mkd'],\n    load() {\n      return import('@codemirror/lang-markdown').then(m => m.markdown());\n    },\n  }),\n  LanguageDescription.of({\n    name: 'TSX',\n    extensions: ['tsx'],\n    load() {\n      return import('@codemirror/lang-javascript').then(m => m.javascript({ jsx: true, typescript: true }));\n    },\n  }),\n  LanguageDescription.of({\n    name: 'TypeScript',\n    alias: ['ts'],\n    extensions: ['ts', 'mts', 'cts'],\n    load() {\n      return import('@codemirror/lang-javascript').then(m => m.javascript({ typescript: true }));\n    },\n  }),\n  LanguageDescription.of({\n    name: 'Shell',\n    alias: ['bash', 'sh', 'zsh'],\n    extensions: ['sh', 'ksh', 'bash'],\n    filename: /^PKGBUILD$/,\n    load() {\n      return import('@codemirror/legacy-modes/mode/shell').then(m => legacy(m.shell));\n    },\n  }),\n];\n","import type { JsonSchema, JsonSchemaProperty } from '@/lib/json-schema';\n\n/**\n * Represents a variable completion option derived from a schema\n */\nexport interface VariableCompletion {\n  /** The dot-notation path (e.g., \"user.name\") */\n  path: string;\n  /** Display label for the autocomplete */\n  label: string;\n  /** Description from the schema, if available */\n  description?: string;\n  /** The type of the property */\n  type?: string;\n}\n\n/**\n * Flattens a JSON Schema into a list of variable completions for autocomplete.\n * Recursively extracts property paths using dot-notation.\n *\n * @param schema - The JSON Schema to flatten\n * @param maxDepth - Maximum recursion depth (default: 5)\n * @returns Array of variable completions\n *\n * @example\n * ```ts\n * const schema = {\n *   type: 'object',\n *   properties: {\n *     user: {\n *       type: 'object',\n *       properties: {\n *         name: { type: 'string' },\n *         email: { type: 'string' }\n *       }\n *     }\n *   }\n * };\n *\n * flattenSchemaToVariables(schema);\n * // Returns:\n * // [\n * //   { path: 'user', label: 'user', type: 'object' },\n * //   { path: 'user.name', label: 'user.name', type: 'string' },\n * //   { path: 'user.email', label: 'user.email', type: 'string' }\n * // ]\n * ```\n */\nexport function flattenSchemaToVariables(schema: JsonSchema | undefined, maxDepth = 5): VariableCompletion[] {\n  if (!schema?.properties) {\n    return [];\n  }\n\n  const results: VariableCompletion[] = [];\n\n  function processProperty(property: JsonSchemaProperty, path: string, depth: number): void {\n    if (depth > maxDepth) {\n      return;\n    }\n\n    const type = Array.isArray(property.type) ? property.type.join(' | ') : property.type;\n\n    results.push({\n      path,\n      label: path,\n      description: property.description ?? property.title,\n      type,\n    });\n\n    // Recurse into nested object properties\n    if (property.properties) {\n      for (const [key, nestedProperty] of Object.entries(property.properties)) {\n        processProperty(nestedProperty, `${path}.${key}`, depth + 1);\n      }\n    }\n\n    // Handle array items if they have properties (array of objects)\n    if (property.items?.properties) {\n      // Add a placeholder for array item access (e.g., items[0].name)\n      for (const [key, itemProperty] of Object.entries(property.items.properties)) {\n        processProperty(itemProperty, `${path}[].${key}`, depth + 1);\n      }\n    }\n  }\n\n  for (const [key, property] of Object.entries(schema.properties)) {\n    processProperty(property, key, 1);\n  }\n\n  return results;\n}\n","import { autocompletion } from '@codemirror/autocomplete';\nimport type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';\nimport type { Extension } from '@codemirror/state';\nimport { flattenSchemaToVariables } from './schema-to-variables';\nimport type { VariableCompletion } from './schema-to-variables';\nimport type { JsonSchema } from '@/lib/json-schema';\n\n/**\n * Creates a CodeMirror autocomplete extension for {{variable}} placeholders.\n * Triggers when the user types `{{` and shows suggestions derived from the schema.\n *\n * @param schema - JSON Schema to derive variable suggestions from\n * @returns CodeMirror Extension that provides variable autocomplete\n *\n * @example\n * ```tsx\n * const schema = {\n *   type: 'object',\n *   properties: {\n *     user: { type: 'object', properties: { name: { type: 'string' } } }\n *   }\n * };\n *\n * <CodeMirror extensions={[createVariableAutocomplete(schema)]} />\n * // Typing \"{{\" will show: user, user.name\n * ```\n */\nexport function createVariableAutocomplete(schema: JsonSchema | undefined): Extension {\n  const variables = flattenSchemaToVariables(schema);\n\n  return autocompletion({\n    override: [createVariableCompletionSource(variables)],\n    defaultKeymap: true,\n    closeOnBlur: true,\n    icons: false,\n  });\n}\n\n/**\n * Creates a completion source function for CodeMirror's autocompletion.\n */\nexport function createVariableCompletionSource(\n  variables: VariableCompletion[],\n): (context: CompletionContext) => CompletionResult | null {\n  return (context: CompletionContext): CompletionResult | null => {\n    // Look for {{ pattern before cursor\n    const beforeCursor = context.state.sliceDoc(Math.max(0, context.pos - 50), context.pos);\n    const match = beforeCursor.match(/\\{\\{([a-zA-Z0-9_.\\[\\]]*)?$/);\n\n    if (!match) {\n      return null;\n    }\n\n    // The text after {{ that we're matching against\n    const prefix = match[1] ?? '';\n    const startPos = context.pos - prefix.length;\n\n    // Filter variables based on what the user has typed\n    const filteredVariables = prefix\n      ? variables.filter(v => v.path.toLowerCase().startsWith(prefix.toLowerCase()))\n      : variables;\n\n    if (filteredVariables.length === 0) {\n      return null;\n    }\n\n    const completions: Completion[] = filteredVariables.map(variable => ({\n      label: variable.path,\n      displayLabel: variable.path,\n      detail: variable.type,\n      info: variable.description,\n      apply: (view, completion, from, to) => {\n        // Inside an existing placeholder, replace the rest of the identifier and reuse its closing }}\n        const rest = view.state.sliceDoc(to);\n        const identifierEnd = to + (rest.match(/^[a-zA-Z0-9_.\\[\\]]*/)?.[0].length ?? 0);\n        const hasClosingBraces = view.state.sliceDoc(identifierEnd, identifierEnd + 2) === '}}';\n        const end = hasClosingBraces ? identifierEnd : to;\n\n        const insertText = hasClosingBraces ? completion.label : `${completion.label}}}`;\n\n        view.dispatch({\n          changes: { from, to: end, insert: insertText },\n          selection: { anchor: from + insertText.length },\n        });\n      },\n    }));\n\n    return {\n      from: startPos,\n      options: completions,\n      validFor: /^[a-zA-Z0-9_.\\[\\]]*$/,\n    };\n  };\n}\n","import type { DecorationSet, EditorView, ViewUpdate } from '@codemirror/view';\nimport { Decoration, MatchDecorator, ViewPlugin } from '@codemirror/view';\n\n/**\n * Regex pattern to match variable placeholders like {{variableName}} or {{user.name}}\n * Matches: {{ followed by a valid identifier path (with optional dot notation), then }}\n */\nexport const VARIABLE_PATTERN = /\\{\\{([a-zA-Z_][a-zA-Z0-9_]*(?:\\.[a-zA-Z_][a-zA-Z0-9_]*)*)\\}\\}/g;\n\nconst variableDecoration = Decoration.mark({\n  class: 'cm-variable-highlight',\n});\n\nconst variableMatcher = new MatchDecorator({\n  regexp: VARIABLE_PATTERN,\n  decoration: () => variableDecoration,\n});\n\nconst variableHighlightPlugin = ViewPlugin.fromClass(\n  class {\n    decorations: DecorationSet;\n\n    constructor(view: EditorView) {\n      this.decorations = variableMatcher.createDeco(view);\n    }\n\n    update(update: ViewUpdate) {\n      this.decorations = variableMatcher.updateDeco(update, this.decorations);\n    }\n  },\n  {\n    decorations: v => v.decorations,\n  },\n);\n\n/**\n * CodeMirror extension that highlights {{variableName}} patterns\n * with orange color and semibold weight\n */\nexport const variableHighlight = variableHighlightPlugin;\n","import { jsonLanguage } from '@codemirror/lang-json';\nimport { markdown, markdownLanguage } from '@codemirror/lang-markdown';\nimport { syntaxHighlighting } from '@codemirror/language';\nimport { EditorState, Prec } from '@codemirror/state';\nimport type { Extension } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport CodeMirror from '@uiw/react-codemirror';\nimport type { ReactCodeMirrorRef } from '@uiw/react-codemirror';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { forwardRef, useMemo } from 'react';\nimport type { HTMLAttributes } from 'react';\nimport { codeLanguages } from './code-languages';\nimport { syntaxHighlighter } from './highlight';\nimport { createVariableAutocomplete } from './variable-autocomplete-extension';\nimport { variableHighlight } from './variable-highlight-extension';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { useFieldControlAria } from '@/ds/components/Field/field-control-aria';\nimport { fieldErrorRimWithin, inputSurfaceAndFocusWithinStyle } from '@/ds/primitives/form-element';\nimport type { JsonSchema } from '@/lib/json-schema';\nimport { cn } from '@/lib/utils';\n\nexport type CodeEditorLanguage = 'json' | 'markdown';\ntype CodeEditorFont = 'body' | 'mono';\n\n/**\n * The single CodeMirror theme for every editor. Chrome and syntax colors come\n * from CSS variables that flip under `.dark`, and syntax roles use the same\n * `syntaxHighlighter` as the read-only `<Code>` viewer, so editors and viewers\n * look identical in both modes.\n */\nfunction buildCodemirrorTheme(font: CodeEditorFont): Extension {\n  const editorTheme = EditorView.theme({\n    '&': {\n      backgroundColor: 'transparent',\n      color: 'var(--foreground)',\n      fontSize: 'var(--text-body-sm)',\n    },\n    '&.cm-editor .cm-scroller': {\n      fontFamily: `var(--font-${font})`,\n    },\n    '.cm-gutters': {\n      backgroundColor: 'transparent',\n      color: 'var(--placeholder)',\n      borderRight: 'none',\n    },\n    '.cm-content': {\n      color: 'var(--foreground)',\n      caretColor: 'var(--foreground)',\n    },\n    '.cm-activeLine': {\n      backgroundColor: 'transparent',\n    },\n    '.cm-lineNumbers .cm-gutterElement': {\n      color: 'var(--placeholder)',\n    },\n    '.cm-activeLineGutter': {\n      backgroundColor: 'transparent',\n      color: 'var(--muted-foreground)',\n    },\n    '.cm-cursor, .cm-dropCursor': {\n      borderLeftColor: 'var(--foreground)',\n    },\n    '&.cm-focused .cm-selectionBackground, & .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection':\n      {\n        background: 'var(--info-edge) !important',\n      },\n    '.cm-tooltip-autocomplete': {\n      backgroundColor: 'var(--background)',\n      border: '1px solid var(--border)',\n      borderRadius: '6px',\n      boxShadow: 'var(--elevation-overlay)',\n    },\n    '.cm-tooltip-autocomplete > ul': {\n      fontFamily: 'var(--font-mono)',\n    },\n    '.cm-completionLabel': {\n      color: 'var(--foreground)',\n    },\n    '.cm-completionDetail': {\n      color: 'var(--muted-foreground)',\n      fontSize: 'var(--text-caption)',\n      marginLeft: 'auto',\n      paddingLeft: '12px',\n    },\n    '.cm-completionInfo': {\n      backgroundColor: 'var(--background)',\n      border: '1px solid var(--border)',\n      color: 'var(--muted-foreground)',\n      padding: '8px 12px',\n    },\n    '.cm-completionIcon': {\n      display: 'none',\n    },\n    'ul.cm-completionList li[aria-selected]': {\n      backgroundColor: 'var(--fill-hover)',\n      color: 'var(--foreground)',\n    },\n    '.cm-line .cm-variable-highlight': {\n      color: 'var(--warning-foreground) !important',\n      fontWeight: '500',\n    },\n  });\n\n  return [editorTheme, syntaxHighlighting(syntaxHighlighter)];\n}\n\n// eslint-disable-next-line react-refresh/only-export-components -- shared hook intentionally co-located with the editor it themes\nexport const useCodemirrorTheme = (font: CodeEditorFont = 'mono'): Extension => {\n  return useMemo(() => buildCodemirrorTheme(font), [font]);\n};\n\nconst codeEditorVariants = cva(\n  cn(\n    'relative overflow-hidden font-mono outline-hidden focus-within:outline-hidden focus:outline-hidden',\n    'transition-colors duration-normal ease-out-custom',\n  ),\n  {\n    variants: {\n      variant: {\n        default: cn(inputSurfaceAndFocusWithinStyle, 'rounded-md p-1', fieldErrorRimWithin),\n        embedded: 'rounded-none border-none bg-transparent p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nconst editorFocusAttributes = Prec.highest(\n  EditorView.editorAttributes.of({\n    style: 'outline: none',\n  }),\n);\n\nconst editorFocusTheme = Prec.highest(\n  EditorView.theme({\n    '&': {\n      outline: 'none',\n    },\n    '&.cm-focused': {\n      outline: 'none',\n    },\n    '.cm-scroller': {\n      outline: 'none',\n    },\n    '.cm-content': {\n      outline: 'none',\n    },\n    '.cm-content:focus': {\n      outline: 'none',\n    },\n  }),\n);\n\nconst editorFocusExtensions: Extension[] = [editorFocusAttributes, editorFocusTheme];\n\ntype CodeEditorContentAttributes = {\n  'aria-label': string;\n  id?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  'aria-invalid'?: string;\n};\n\nexport type CodeEditorProps = {\n  /** Prose editors can opt into the body face; code stays monospace by default. */\n  font?: CodeEditorFont;\n  data?: Record<string, unknown> | Array<Record<string, unknown>>;\n  value?: string;\n  onChange?: (value: string) => void;\n  showCopyButton?: boolean;\n  className?: string;\n  highlightVariables?: boolean;\n  language?: CodeEditorLanguage;\n  placeholder?: string;\n  /** JSON Schema to enable variable autocomplete for {{variable}} placeholders (markdown only) */\n  schema?: JsonSchema;\n  autoFocus?: boolean;\n  /** Show line numbers in the gutter (default: true) */\n  lineNumbers?: boolean;\n  /** Wrap long lines within the editor viewport (default: true) */\n  lineWrapping?: boolean;\n  /** When false, makes the editor read-only */\n  editable?: boolean;\n} & VariantProps<typeof codeEditorVariants> &\n  Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeEditor = forwardRef<ReactCodeMirrorRef, CodeEditorProps>(\n  (\n    {\n      data,\n      value,\n      onChange,\n      showCopyButton = true,\n      className,\n      language = 'json',\n      font = 'mono',\n      highlightVariables = false,\n      placeholder,\n      schema,\n      autoFocus,\n      lineNumbers = true,\n      lineWrapping = true,\n      editable,\n      variant,\n      id,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-invalid': ariaInvalidProp,\n      ...props\n    },\n    ref,\n  ) => {\n    const fieldAria = useFieldControlAria({ 'aria-label': ariaLabelProp });\n    const ariaLabel = ariaLabelProp ?? 'Code editor';\n    const controlId = id ?? fieldAria.id;\n    const ariaLabelledBy = ariaLabelledByProp ?? fieldAria['aria-labelledby'];\n    const ariaDescribedBy = ariaDescribedByProp ?? fieldAria['aria-describedby'];\n    const ariaInvalid = ariaInvalidProp ?? fieldAria['aria-invalid'];\n    const theme = useCodemirrorTheme(font);\n    const formattedCode = data ? JSON.stringify(data, null, 2) : (value ?? '');\n\n    const extensions = useMemo(() => {\n      const contentAttributes: CodeEditorContentAttributes = { 'aria-label': ariaLabel };\n      if (controlId) contentAttributes.id = controlId;\n      if (ariaLabelledBy) contentAttributes['aria-labelledby'] = ariaLabelledBy;\n      if (ariaDescribedBy) contentAttributes['aria-describedby'] = ariaDescribedBy;\n      if (ariaInvalid !== undefined) contentAttributes['aria-invalid'] = String(ariaInvalid);\n\n      const exts: Extension[] = [...editorFocusExtensions, EditorView.contentAttributes.of(contentAttributes)];\n\n      if (lineWrapping) {\n        exts.push(EditorView.lineWrapping);\n      }\n\n      if (language === 'json') {\n        exts.push(jsonLanguage);\n      } else if (language === 'markdown') {\n        exts.push(markdown({ base: markdownLanguage, codeLanguages }));\n      }\n\n      if (highlightVariables && language === 'markdown') {\n        exts.push(variableHighlight);\n      }\n\n      if (schema && language === 'markdown') {\n        exts.push(createVariableAutocomplete(schema));\n      }\n\n      if (editable === false) {\n        exts.push(EditorState.readOnly.of(true));\n      }\n\n      return exts;\n    }, [\n      language,\n      highlightVariables,\n      schema,\n      editable,\n      lineWrapping,\n      controlId,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy,\n      ariaInvalid,\n    ]);\n\n    return (\n      <div className={cn(codeEditorVariants({ variant }), className)} {...props}>\n        {showCopyButton && <CopyButton content={formattedCode} className=\"absolute top-2 right-2 z-20\" />}\n        <CodeMirror\n          ref={ref}\n          value={formattedCode}\n          theme={theme}\n          extensions={extensions}\n          onChange={onChange}\n          editable={editable}\n          aria-label={ariaLabel}\n          placeholder={placeholder}\n          height=\"100%\"\n          style={{ height: '100%' }}\n          autoFocus={autoFocus}\n          basicSetup={{ lineNumbers }}\n        />\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/components/BillingIllustration.cjs.js

@@ -0,0 +1,223 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const utils_cn = require('../cn-DlOJCxrS.cjs');
+
+const oneUnit = {
+  paths: [
+    [
+      "solid",
+      "m33.12 65.12.41-1.04 1.17-.87 20.05-10.02 1.75-.59 2.07-.21 2.06.21 1.76.59L85.3 64.64l1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-20.05 10.02-1.75.58-2.07.21-2.06-.21-1.76-.58L34.7 70.53l-1.17-.87-.41-1.04Z"
+    ],
+    ["edge", "m85.12 66.55-.27.7-.79.59-20.05 10.02-1.18.4-1.4.14-1.39-.14-1.19-.4-22.91-11.45-.79-.6-.27-.69"]
+  ],
+  lifts: [
+    [
+      [
+        "solid",
+        "m40.2 46.41.31-.77.88-.66 14.31-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.31 7.16-1.32.44-1.55.15-1.55-.15-1.31-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m78.05 47.84-.18.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.18-8.59-.5-.37-.18-.44"],
+      [
+        "light",
+        "m55.99 64.5-.01-.25-.05-.25-.07-.26-.11-.25-.12-.25-.15-.23-.17-.2-.18-.19-.19-.15-.19-.11-.19-.08-.19-.04h-.18l-.17.04-.15.08-.12.12-.11.16-.07.18-.05.21-.01.23.01.24.05.26.07.26.11.25.12.24.15.23.17.21.18.18.19.15.19.12.19.08.19.04.18-.01.17-.04.15-.08.12-.12.11-.15.07-.18.05-.21z"
+      ]
+    ]
+  ]
+};
+const serverlessArt = { viewBox: [32, 32, 56, 56], ...oneUnit, dashed: true };
+const smallArt = { viewBox: [32, 32, 56, 56], ...oneUnit };
+const mediumArt = {
+  viewBox: [20, 20, 80, 80],
+  paths: [
+    [
+      "solid",
+      "m21.19 59.15.41-1.04 1.17-.87 20.05-10.03 1.75-.58 2.07-.21 2.06.21 1.75.58L97.23 70.6l1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-20.05 10.02-1.75.59-2.07.2-2.06-.2-1.75-.59-46.78-23.39-1.17-.87-.41-1.04Z"
+    ],
+    ["edge", "m97.06 72.51-.28.7-.79.59-20.05 10.02-1.18.4-1.4.14-1.39-.14-1.18-.4-46.78-23.39-.79-.59-.28-.69"]
+  ],
+  lifts: [
+    [
+      [
+        "solid",
+        "m28.27 40.44.31-.77.87-.66 14.32-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.31-.44-17.19-8.59-.87-.66-.31-.77Z"
+      ],
+      ["edge", "m66.11 41.87-.17.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.19-8.59-.49-.37-.18-.44"],
+      [
+        "idle",
+        "m44.06 58.53-.02-.25-.04-.25-.08-.26-.1-.25-.13-.25-.14-.23-.17-.21-.18-.18-.19-.15-.19-.11-.2-.08-.19-.04h-.18l-.16.04-.15.08-.13.12-.1.15-.07.19-.05.21-.01.23.01.24.05.26.07.25.1.26.13.24.15.23.16.21.18.18.19.15.2.12.19.08.19.03h.18l.17-.04.14-.08.13-.12.1-.15.08-.18.04-.21z"
+      ]
+    ],
+    [
+      [
+        "solid",
+        "m52.13 52.37.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.31.44 17.19 8.59.87.66.31.77v18.71l-.31.78-.87.65-14.32 7.16-1.32.44-1.55.16-1.55-.16-1.31-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m89.98 53.8-.18.44-.49.38-14.32 7.16-.75.24-.88.09-.87-.09-.75-.24-17.18-8.6-.5-.37-.17-.44"],
+      [
+        "light",
+        "m67.92 70.46-.01-.25-.05-.25-.07-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.18-.19-.15-.2-.12-.19-.08-.19-.04h-.18l-.17.05-.15.08-.12.11-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.12.25.15.22.17.21.18.18.19.15.19.12.2.08.19.04h.18l.16-.05.15-.08.13-.12.1-.15.07-.18.05-.21z"
+      ]
+    ]
+  ]
+};
+const largeArt = {
+  viewBox: [9, 9, 102, 102],
+  paths: [
+    [
+      "solid",
+      "m10.21 64.64.41-1.04 1.17-.87L53.8 41.72l1.75-.58 2.06-.21 2.07.21 1.75.58 46.78 23.39 1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-42.01 21-1.75.58-2.06.21-2.07-.21-1.75-.58-46.78-23.39-1.17-.87-.41-1.04Z"
+    ],
+    ["edge", "m108.03 67.02-.27.7-.79.59-42.01 21-1.18.4-1.39.14-1.4-.14-1.18-.4-46.78-23.39-.79-.59-.27-.69"]
+  ],
+  lifts: [
+    [
+      [
+        "solid",
+        "m39.24 34.95.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.32.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.32-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m77.09 36.38-.17.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.75-.25-17.18-8.59-.5-.37-.17-.44"],
+      [
+        "idle",
+        "m55.04 53.04-.02-.25-.04-.25-.08-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.19-.19-.15-.19-.11-.2-.08-.19-.04h-.18l-.16.04-.15.08-.13.12-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.13.24.15.23.16.21.18.18.19.15.2.12.19.08.19.04.18-.01.16-.04.15-.08.13-.12.1-.15.08-.18.04-.21z"
+      ]
+    ],
+    [
+      [
+        "solid",
+        "m17.29 45.93.31-.78.88-.65 14.31-7.16 1.32-.44 1.55-.16 1.55.16 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.31 7.16-1.32.44-1.55.15-1.55-.15-1.31-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m55.14 47.36-.18.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.18-8.59-.5-.37-.18-.44"],
+      [
+        "idle",
+        "m33.08 64.02-.01-.25-.05-.25-.07-.26-.11-.26-.12-.24-.15-.23-.17-.21-.18-.18-.19-.15-.19-.11-.19-.08-.19-.04h-.18l-.17.04-.15.08-.12.12-.11.15-.07.19-.05.21-.01.23.01.24.05.26.07.25.11.26.12.24.15.23.17.21.18.18.19.15.19.12.19.07.19.04h.18l.17-.04.15-.08.12-.12.11-.15.07-.18.05-.21z"
+      ]
+    ],
+    [
+      [
+        "solid",
+        "m63.11 46.88.31-.77.88-.66 14.31-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.78v18.7l-.31.78-.88.65-14.31 7.16-1.32.44-1.55.16-1.55-.16-1.31-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m100.96 48.32-.18.43-.5.38-14.32 7.16-.74.25-.88.08-.88-.08-.74-.25-17.18-8.59-.5-.38-.18-.44"],
+      [
+        "idle",
+        "m78.9 64.97-.01-.24-.05-.26-.07-.26-.11-.25-.12-.25-.15-.22-.17-.21-.18-.18-.19-.15-.19-.12-.19-.08-.19-.04h-.18l-.17.05-.15.08-.12.12-.11.15-.07.18-.05.21-.01.23.01.25.05.25.07.26.11.25.12.25.15.23.17.2.18.18.19.15.19.12.19.08.19.04h.18l.17-.04.15-.09.12-.11.11-.16.07-.18.05-.21z"
+      ]
+    ],
+    [
+      [
+        "solid",
+        "m41.15 57.86.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.32.44 17.18 8.59.88.66.31.77V78l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.32-.44L42.34 78l-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m79 59.29-.17.44-.5.37-14.32 7.16-.75.25-.87.09-.88-.09-.75-.25-17.18-8.59-.5-.37-.17-.44"],
+      [
+        "light",
+        "m56.95 75.95-.02-.25-.05-.25-.07-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.19-.19-.15-.2-.11-.19-.08-.19-.04h-.18l-.17.04-.14.09-.13.11-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.13.24.14.23.17.21.18.18.19.15.19.12.2.08.19.04.18-.01.16-.04.15-.08.13-.12.1-.15.07-.18.05-.21z"
+      ]
+    ]
+  ]
+};
+
+const billingIllustrationHoverGroup = "group/billing-illustration";
+const artByName = {
+  serverless: serverlessArt,
+  small: smallArt,
+  medium: mediumArt,
+  large: largeArt
+};
+const inkByTone = {
+  ink: "fill-foreground",
+  muted: "fill-muted-foreground",
+  faded: "fill-fill-strong"
+};
+const maskPaintByStroke = {
+  solid: { fill: "black", stroke: "white", strokeOpacity: 0.7 },
+  edge: { stroke: "white", strokeOpacity: 0.35 },
+  line: { stroke: "white" },
+  light: { fill: "white", stroke: "white" },
+  idle: { fill: "white", stroke: "white" }
+};
+const hoverTransition = "motion-safe:duration-slow motion-safe:ease-out-custom";
+const staggerMs = 50;
+const classByStroke = {
+  idle: utils_cn.cn(
+    "[fill-opacity:0] [stroke-opacity:0.35]",
+    "group-hover/billing-illustration:[fill-opacity:1] group-hover/billing-illustration:[stroke-opacity:1]",
+    "group-focus-within/billing-illustration:[fill-opacity:1] group-focus-within/billing-illustration:[stroke-opacity:1]",
+    "motion-safe:transition-[fill-opacity,stroke-opacity]",
+    hoverTransition
+  )
+};
+const dashedClass = utils_cn.cn(
+  "[stroke-dasharray:1.5_1.25]",
+  "group-focus-within/billing-illustration:[stroke-dasharray:1.5_0] group-hover/billing-illustration:[stroke-dasharray:1.5_0]",
+  "motion-safe:transition-[stroke-dasharray]",
+  hoverTransition
+);
+const liftClass = utils_cn.cn(
+  "motion-safe:transition-[translate]",
+  "motion-safe:group-focus-within/billing-illustration:[translate:0_-3px] motion-safe:group-hover/billing-illustration:[translate:0_-3px]",
+  hoverTransition
+);
+const enterClass = utils_cn.cn(
+  "opacity-0 group-focus-within/billing-illustration:opacity-100 group-hover/billing-illustration:opacity-100",
+  "motion-safe:[translate:0_-8px] motion-safe:group-focus-within/billing-illustration:[translate:0_0] motion-safe:group-hover/billing-illustration:[translate:0_0]",
+  "motion-safe:transition-[opacity,translate]",
+  hoverTransition
+);
+const countIdle = (paths) => paths.filter(([stroke]) => stroke === "idle").length;
+function ArtPaths({ paths, dashed, firstIdle }) {
+  let idle = firstIdle;
+  return paths.map(([stroke, d], index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d,
+      ...maskPaintByStroke[stroke],
+      className: utils_cn.cn(classByStroke[stroke], dashed && stroke !== "light" && dashedClass),
+      style: stroke === "idle" ? { transitionDelay: `${idle++ * staggerMs}ms` } : void 0,
+      vectorEffect: "non-scaling-stroke"
+    },
+    index
+  ));
+}
+function BillingIllustration({ name, tone = "ink", className, ...props }) {
+  const maskId = `billing-illustration-${React.useId().replace(/[^\w-]/g, "")}`;
+  const { viewBox, paths, lifts = [], enters = [], dashed } = artByName[name];
+  const parts = [
+    ...lifts.map((part, index) => ({ part, className: liftClass, delay: index * staggerMs })),
+    ...enters.map((part) => ({ part, className: enterClass, delay: 0 }))
+  ];
+  const [x, y, width, height] = viewBox;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: viewBox.join(" "),
+      fill: "none",
+      "aria-hidden": "true",
+      "data-illustration": name,
+      className: utils_cn.cn(billingIllustrationHoverGroup, "block size-30 shrink-0", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("mask", { id: maskId, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ArtPaths, { paths, dashed, firstIdle: 0 }),
+          parts.map(({ part, className: className2, delay }, index) => /* @__PURE__ */ jsxRuntime.jsx("g", { className: className2, style: { transitionDelay: `${delay}ms` }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            ArtPaths,
+            {
+              paths: part,
+              dashed,
+              firstIdle: countIdle(paths) + parts.slice(0, index).reduce((sum, earlier) => sum + countIdle(earlier.part), 0)
+            }
+          ) }, index))
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y, width, height, mask: `url(#${maskId})`, className: inkByTone[tone] })
+      ]
+    }
+  );
+}
+
+exports.BillingIllustration = BillingIllustration;
+exports.billingIllustrationHoverGroup = billingIllustrationHoverGroup;
+//# sourceMappingURL=BillingIllustration.cjs.js.map

package/dist/components/BillingIllustration.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingIllustration.cjs.js","sources":["../../src/ds/components/BillingIllustration/art/project-size-art.ts","../../src/ds/components/BillingIllustration/billing-illustration.tsx"],"sourcesContent":["import type { BillingArt } from './billing-art';\n\nconst oneUnit = {\n  paths: [\n    [\n      'solid',\n      'm33.12 65.12.41-1.04 1.17-.87 20.05-10.02 1.75-.59 2.07-.21 2.06.21 1.76.59L85.3 64.64l1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-20.05 10.02-1.75.58-2.07.21-2.06-.21-1.76-.58L34.7 70.53l-1.17-.87-.41-1.04Z',\n    ],\n    ['edge', 'm85.12 66.55-.27.7-.79.59-20.05 10.02-1.18.4-1.4.14-1.39-.14-1.19-.4-22.91-11.45-.79-.6-.27-.69'],\n  ],\n  lifts: [\n    [\n      [\n        'solid',\n        'm40.2 46.41.31-.77.88-.66 14.31-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.31 7.16-1.32.44-1.55.15-1.55-.15-1.31-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm78.05 47.84-.18.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.18-8.59-.5-.37-.18-.44'],\n      [\n        'light',\n        'm55.99 64.5-.01-.25-.05-.25-.07-.26-.11-.25-.12-.25-.15-.23-.17-.2-.18-.19-.19-.15-.19-.11-.19-.08-.19-.04h-.18l-.17.04-.15.08-.12.12-.11.16-.07.18-.05.21-.01.23.01.24.05.26.07.26.11.25.12.24.15.23.17.21.18.18.19.15.19.12.19.08.19.04.18-.01.17-.04.15-.08.12-.12.11-.15.07-.18.05-.21z',\n      ],\n    ],\n  ],\n} satisfies Pick<BillingArt, 'paths' | 'lifts'>;\n\nexport const serverlessArt: BillingArt = { viewBox: [32, 32, 56, 56], ...oneUnit, dashed: true };\n\nexport const smallArt: BillingArt = { viewBox: [32, 32, 56, 56], ...oneUnit };\n\nexport const mediumArt: BillingArt = {\n  viewBox: [20, 20, 80, 80],\n  paths: [\n    [\n      'solid',\n      'm21.19 59.15.41-1.04 1.17-.87 20.05-10.03 1.75-.58 2.07-.21 2.06.21 1.75.58L97.23 70.6l1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-20.05 10.02-1.75.59-2.07.2-2.06-.2-1.75-.59-46.78-23.39-1.17-.87-.41-1.04Z',\n    ],\n    ['edge', 'm97.06 72.51-.28.7-.79.59-20.05 10.02-1.18.4-1.4.14-1.39-.14-1.18-.4-46.78-23.39-.79-.59-.28-.69'],\n  ],\n  lifts: [\n    [\n      [\n        'solid',\n        'm28.27 40.44.31-.77.87-.66 14.32-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.31-.44-17.19-8.59-.87-.66-.31-.77Z',\n      ],\n      ['edge', 'm66.11 41.87-.17.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.19-8.59-.49-.37-.18-.44'],\n      [\n        'idle',\n        'm44.06 58.53-.02-.25-.04-.25-.08-.26-.1-.25-.13-.25-.14-.23-.17-.21-.18-.18-.19-.15-.19-.11-.2-.08-.19-.04h-.18l-.16.04-.15.08-.13.12-.1.15-.07.19-.05.21-.01.23.01.24.05.26.07.25.1.26.13.24.15.23.16.21.18.18.19.15.2.12.19.08.19.03h.18l.17-.04.14-.08.13-.12.1-.15.08-.18.04-.21z',\n      ],\n    ],\n    [\n      [\n        'solid',\n        'm52.13 52.37.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.31.44 17.19 8.59.87.66.31.77v18.71l-.31.78-.87.65-14.32 7.16-1.32.44-1.55.16-1.55-.16-1.31-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm89.98 53.8-.18.44-.49.38-14.32 7.16-.75.24-.88.09-.87-.09-.75-.24-17.18-8.6-.5-.37-.17-.44'],\n      [\n        'light',\n        'm67.92 70.46-.01-.25-.05-.25-.07-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.18-.19-.15-.2-.12-.19-.08-.19-.04h-.18l-.17.05-.15.08-.12.11-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.12.25.15.22.17.21.18.18.19.15.19.12.2.08.19.04h.18l.16-.05.15-.08.13-.12.1-.15.07-.18.05-.21z',\n      ],\n    ],\n  ],\n};\n\nexport const largeArt: BillingArt = {\n  viewBox: [9, 9, 102, 102],\n  paths: [\n    [\n      'solid',\n      'm10.21 64.64.41-1.04 1.17-.87L53.8 41.72l1.75-.58 2.06-.21 2.07.21 1.75.58 46.78 23.39 1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-42.01 21-1.75.58-2.06.21-2.07-.21-1.75-.58-46.78-23.39-1.17-.87-.41-1.04Z',\n    ],\n    ['edge', 'm108.03 67.02-.27.7-.79.59-42.01 21-1.18.4-1.39.14-1.4-.14-1.18-.4-46.78-23.39-.79-.59-.27-.69'],\n  ],\n  lifts: [\n    [\n      [\n        'solid',\n        'm39.24 34.95.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.32.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.32-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm77.09 36.38-.17.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.75-.25-17.18-8.59-.5-.37-.17-.44'],\n      [\n        'idle',\n        'm55.04 53.04-.02-.25-.04-.25-.08-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.19-.19-.15-.19-.11-.2-.08-.19-.04h-.18l-.16.04-.15.08-.13.12-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.13.24.15.23.16.21.18.18.19.15.2.12.19.08.19.04.18-.01.16-.04.15-.08.13-.12.1-.15.08-.18.04-.21z',\n      ],\n    ],\n    [\n      [\n        'solid',\n        'm17.29 45.93.31-.78.88-.65 14.31-7.16 1.32-.44 1.55-.16 1.55.16 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.31 7.16-1.32.44-1.55.15-1.55-.15-1.31-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm55.14 47.36-.18.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.18-8.59-.5-.37-.18-.44'],\n      [\n        'idle',\n        'm33.08 64.02-.01-.25-.05-.25-.07-.26-.11-.26-.12-.24-.15-.23-.17-.21-.18-.18-.19-.15-.19-.11-.19-.08-.19-.04h-.18l-.17.04-.15.08-.12.12-.11.15-.07.19-.05.21-.01.23.01.24.05.26.07.25.11.26.12.24.15.23.17.21.18.18.19.15.19.12.19.07.19.04h.18l.17-.04.15-.08.12-.12.11-.15.07-.18.05-.21z',\n      ],\n    ],\n    [\n      [\n        'solid',\n        'm63.11 46.88.31-.77.88-.66 14.31-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.78v18.7l-.31.78-.88.65-14.31 7.16-1.32.44-1.55.16-1.55-.16-1.31-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm100.96 48.32-.18.43-.5.38-14.32 7.16-.74.25-.88.08-.88-.08-.74-.25-17.18-8.59-.5-.38-.18-.44'],\n      [\n        'idle',\n        'm78.9 64.97-.01-.24-.05-.26-.07-.26-.11-.25-.12-.25-.15-.22-.17-.21-.18-.18-.19-.15-.19-.12-.19-.08-.19-.04h-.18l-.17.05-.15.08-.12.12-.11.15-.07.18-.05.21-.01.23.01.25.05.25.07.26.11.25.12.25.15.23.17.2.18.18.19.15.19.12.19.08.19.04h.18l.17-.04.15-.09.12-.11.11-.16.07-.18.05-.21z',\n      ],\n    ],\n    [\n      [\n        'solid',\n        'm41.15 57.86.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.32.44 17.18 8.59.88.66.31.77V78l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.32-.44L42.34 78l-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm79 59.29-.17.44-.5.37-14.32 7.16-.75.25-.87.09-.88-.09-.75-.25-17.18-8.59-.5-.37-.17-.44'],\n      [\n        'light',\n        'm56.95 75.95-.02-.25-.05-.25-.07-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.19-.19-.15-.2-.11-.19-.08-.19-.04h-.18l-.17.04-.14.09-.13.11-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.13.24.14.23.17.21.18.18.19.15.19.12.2.08.19.04.18-.01.16-.04.15-.08.13-.12.1-.15.07-.18.05-.21z',\n      ],\n    ],\n  ],\n};\n","import { useId } from 'react';\nimport type { ComponentProps, SVGProps } from 'react';\nimport type { BillingArt, BillingArtPaths, BillingArtStroke } from './art/billing-art';\nimport { largeArt, mediumArt, serverlessArt, smallArt } from './art/project-size-art';\nimport { cn } from '@/lib/utils';\n\nexport type BillingIllustrationName = 'serverless' | 'small' | 'medium' | 'large';\n\nexport type BillingIllustrationTone = 'ink' | 'muted' | 'faded';\n\nexport type BillingIllustrationProps = Omit<ComponentProps<'svg'>, 'children' | 'viewBox'> & {\n  name: BillingIllustrationName;\n  tone?: BillingIllustrationTone;\n};\n\nexport const billingIllustrationHoverGroup = 'group/billing-illustration';\n\nconst artByName = {\n  serverless: serverlessArt,\n  small: smallArt,\n  medium: mediumArt,\n  large: largeArt,\n} satisfies Record<BillingIllustrationName, BillingArt>;\n\nconst inkByTone = {\n  ink: 'fill-foreground',\n  muted: 'fill-muted-foreground',\n  faded: 'fill-fill-strong',\n} satisfies Record<BillingIllustrationTone, string>;\n\nconst maskPaintByStroke = {\n  solid: { fill: 'black', stroke: 'white', strokeOpacity: 0.7 },\n  edge: { stroke: 'white', strokeOpacity: 0.35 },\n  line: { stroke: 'white' },\n  light: { fill: 'white', stroke: 'white' },\n  idle: { fill: 'white', stroke: 'white' },\n} satisfies Record<BillingArtStroke, SVGProps<SVGPathElement>>;\n\nconst hoverTransition = 'motion-safe:duration-slow motion-safe:ease-out-custom';\n\nconst staggerMs = 50;\n\nconst classByStroke: Partial<Record<BillingArtStroke, string>> = {\n  idle: cn(\n    '[fill-opacity:0] [stroke-opacity:0.35]',\n    'group-hover/billing-illustration:[fill-opacity:1] group-hover/billing-illustration:[stroke-opacity:1]',\n    'group-focus-within/billing-illustration:[fill-opacity:1] group-focus-within/billing-illustration:[stroke-opacity:1]',\n    'motion-safe:transition-[fill-opacity,stroke-opacity]',\n    hoverTransition,\n  ),\n};\n\nconst dashedClass = cn(\n  '[stroke-dasharray:1.5_1.25]',\n  'group-focus-within/billing-illustration:[stroke-dasharray:1.5_0] group-hover/billing-illustration:[stroke-dasharray:1.5_0]',\n  'motion-safe:transition-[stroke-dasharray]',\n  hoverTransition,\n);\n\nconst liftClass = cn(\n  'motion-safe:transition-[translate]',\n  'motion-safe:group-focus-within/billing-illustration:[translate:0_-3px] motion-safe:group-hover/billing-illustration:[translate:0_-3px]',\n  hoverTransition,\n);\n\nconst enterClass = cn(\n  'opacity-0 group-focus-within/billing-illustration:opacity-100 group-hover/billing-illustration:opacity-100',\n  'motion-safe:[translate:0_-8px] motion-safe:group-focus-within/billing-illustration:[translate:0_0] motion-safe:group-hover/billing-illustration:[translate:0_0]',\n  'motion-safe:transition-[opacity,translate]',\n  hoverTransition,\n);\n\nconst countIdle = (paths: BillingArtPaths) => paths.filter(([stroke]) => stroke === 'idle').length;\n\nfunction ArtPaths({ paths, dashed, firstIdle }: { paths: BillingArtPaths; dashed?: boolean; firstIdle: number }) {\n  let idle = firstIdle;\n  return paths.map(([stroke, d], index) => (\n    <path\n      key={index}\n      d={d}\n      {...maskPaintByStroke[stroke]}\n      className={cn(classByStroke[stroke], dashed && stroke !== 'light' && dashedClass)}\n      style={stroke === 'idle' ? { transitionDelay: `${idle++ * staggerMs}ms` } : undefined}\n      vectorEffect=\"non-scaling-stroke\"\n    />\n  ));\n}\n\nexport function BillingIllustration({ name, tone = 'ink', className, ...props }: BillingIllustrationProps) {\n  const maskId = `billing-illustration-${useId().replace(/[^\\w-]/g, '')}`;\n  const { viewBox, paths, lifts = [], enters = [], dashed } = artByName[name];\n  const parts = [\n    ...lifts.map((part, index) => ({ part, className: liftClass, delay: index * staggerMs })),\n    ...enters.map(part => ({ part, className: enterClass, delay: 0 })),\n  ];\n  const [x, y, width, height] = viewBox;\n\n  return (\n    <svg\n      viewBox={viewBox.join(' ')}\n      fill=\"none\"\n      aria-hidden=\"true\"\n      data-illustration={name}\n      className={cn(billingIllustrationHoverGroup, 'block size-30 shrink-0', className)}\n      {...props}\n    >\n      <mask id={maskId}>\n        <g strokeWidth={1} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <ArtPaths paths={paths} dashed={dashed} firstIdle={0} />\n          {parts.map(({ part, className, delay }, index) => (\n            <g key={index} className={className} style={{ transitionDelay: `${delay}ms` }}>\n              <ArtPaths\n                paths={part}\n                dashed={dashed}\n                firstIdle={\n                  countIdle(paths) + parts.slice(0, index).reduce((sum, earlier) => sum + countIdle(earlier.part), 0)\n                }\n              />\n            </g>\n          ))}\n        </g>\n      </mask>\n      <rect x={x} y={y} width={width} height={height} mask={`url(#${maskId})`} className={inkByTone[tone]} />\n    </svg>\n  );\n}\n"],"names":["cn","jsx","useId","jsxs","className"],"mappings":"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"}

package/dist/components/BillingIllustration.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/components/BillingIllustration/index'
+export {}