@langchain/macaw-components 1.0.0-beta.1 → 1.0.0-beta.6

package/dist/utils/chartColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"chartColors.js","names":[],"sources":["../../src/utils/chartColors.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport {\n  useColorScheme,\n  type ResolvedThemeMode,\n} from '../hooks/useColorScheme';\n\n/**\n * Semantic colors for data visualization. These values intentionally remain\n * CSS variable references because SVG fill/stroke props cannot consume\n * Tailwind classes. Theme-specific values live in `src/index.css`.\n */\nexport const CHART_CATEGORICAL_LINE_COLORS = Array.from(\n  { length: 20 },\n  (_, index) => `var(--chart-categorical-line-${index + 1})`\n);\n\nexport const CHART_CATEGORICAL_FILL_COLORS = Array.from(\n  { length: 20 },\n  (_, index) => `var(--chart-categorical-fill-${index + 1})`\n);\n\nexport const CHART_COMPARISON_COLORS = Array.from(\n  { length: 10 },\n  (_, index) => `var(--chart-comparison-${index + 1})`\n);\n\nexport const CHART_SINGLE_FILL_COLOR = 'var(--chart-single-fill)';\nexport const CHART_OTHER_COLOR = 'var(--chart-other)';\nexport const CHART_INTERACTION_CONTRAST_COLOR =\n  'var(--chart-interaction-contrast)';\nexport const CHART_ON_COLOR = 'var(--chart-on-color)';\nexport const CHART_ON_WARNING_COLOR = 'var(--chart-on-warning)';\n\nexport const CHART_STATUS_COLORS = {\n  positive: 'var(--chart-positive)',\n  warning: 'var(--chart-warning)',\n  negative: 'var(--chart-negative)',\n  negativeSubtle: 'var(--chart-negative-subtle)',\n};\n\n/** Lower-luminance semantic colors for large filled marks. */\nexport const CHART_STATUS_FILL_COLORS = {\n  positive: 'var(--chart-positive-fill)',\n  warning: 'var(--chart-warning-fill)',\n  negative: 'var(--chart-negative-fill)',\n};\n\nexport const CHART_BREAKDOWN_COLORS = {\n  input: 'var(--chart-breakdown-input)',\n  output: 'var(--chart-breakdown-output)',\n  other: 'var(--chart-breakdown-other)',\n};\n\nexport const getCategoricalLineChartColor = (index: number): string =>\n  CHART_CATEGORICAL_LINE_COLORS[index % CHART_CATEGORICAL_LINE_COLORS.length] ??\n  CHART_CATEGORICAL_LINE_COLORS[0];\n\nexport const getCategoricalFillChartColor = (index: number): string =>\n  CHART_CATEGORICAL_FILL_COLORS[index % CHART_CATEGORICAL_FILL_COLORS.length] ??\n  CHART_SINGLE_FILL_COLOR;\n\nconst getPaletteIndexForKey = (key: string): number => {\n  let hash = 0;\n  for (const character of key) {\n    hash = (hash * 31 + character.charCodeAt(0)) >>> 0;\n  }\n  return hash;\n};\n\nexport const getLineChartColorForKey = (key: string): string =>\n  getCategoricalLineChartColor(getPaletteIndexForKey(key));\n\nexport const getFillChartColorForKey = (key: string): string =>\n  getCategoricalFillChartColor(getPaletteIndexForKey(key));\n\nexport const getCategoricalFillColor = (color: string): string => {\n  const lineIndex = CHART_CATEGORICAL_LINE_COLORS.indexOf(color);\n  return lineIndex === -1\n    ? color\n    : (CHART_CATEGORICAL_FILL_COLORS[lineIndex] ?? color);\n};\n\nexport const getChartStatusColor = (\n  ...labels: Array<string | undefined>\n): string | undefined => {\n  const normalized = labels.map((label) => label?.trim().toLowerCase());\n  if (normalized.includes('success')) return CHART_STATUS_COLORS.positive;\n  if (\n    normalized.includes('error') ||\n    normalized.some((label) => /^fail(?:ed|ing|ures?|s)?$/.test(label ?? ''))\n  ) {\n    return CHART_STATUS_COLORS.negative;\n  }\n  return undefined;\n};\n\nexport type ChartColorResolver = (color: string) => string;\n\n/** Resolve semantic CSS variables for renderers that run outside the DOM. */\nconst resolveChartColor = (\n  color: string,\n  resolvedMode: ResolvedThemeMode\n): string => {\n  if (typeof document === 'undefined') return color;\n\n  const root = document.documentElement;\n  if (root.dataset.theme && root.dataset.theme !== resolvedMode) return color;\n\n  const styles = getComputedStyle(root);\n  let resolved = color;\n  for (let depth = 0; depth < 10 && resolved.includes('var('); depth += 1) {\n    resolved = resolved.replace(\n      /var\\(\\s*(--[a-z0-9-]+)\\s*(?:,\\s*((?:[^()]|[a-z-]+\\([^()]*\\))+))?\\)/gi,\n      (match, property: string, fallback: string | undefined) =>\n        styles.getPropertyValue(property).trim() || fallback?.trim() || match\n    );\n  }\n  return resolved;\n};\n\nexport const useChartColorResolver = (): ChartColorResolver => {\n  const { resolvedMode } = useColorScheme();\n\n  return useMemo(() => {\n    const cache = new Map<string, string>();\n    return (color: string) => {\n      const cached = cache.get(color);\n      if (cached !== undefined) return cached;\n\n      const resolved = resolveChartColor(color, resolvedMode);\n      if (!resolved.includes('var(')) cache.set(color, resolved);\n      return resolved;\n    };\n  }, [resolvedMode]);\n};\n"],"mappings":";;;;;;;;AAYA,IAAa,gCAAgC,MAAM,KACjD,EAAE,QAAQ,GAAG,IACZ,GAAG,UAAU,gCAAgC,QAAQ,EAAE,EAC1D;AAEA,IAAa,gCAAgC,MAAM,KACjD,EAAE,QAAQ,GAAG,IACZ,GAAG,UAAU,gCAAgC,QAAQ,EAAE,EAC1D;AAEA,IAAa,0BAA0B,MAAM,KAC3C,EAAE,QAAQ,GAAG,IACZ,GAAG,UAAU,0BAA0B,QAAQ,EAAE,EACpD;AAEA,IAAa,0BAA0B;AACvC,IAAa,oBAAoB;AACjC,IAAa,mCACX;AACF,IAAa,iBAAiB;AAC9B,IAAa,yBAAyB;AAEtC,IAAa,sBAAsB;CACjC,UAAU;CACV,SAAS;CACT,UAAU;CACV,gBAAgB;AAClB;;AAGA,IAAa,2BAA2B;CACtC,UAAU;CACV,SAAS;CACT,UAAU;AACZ;AAEA,IAAa,yBAAyB;CACpC,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,IAAa,gCAAgC,UAC3C,8BAA8B,QAAQ,8BAA8B,WACpE,8BAA8B;AAEhC,IAAa,gCAAgC,UAC3C,8BAA8B,QAAQ,8BAA8B,WAAA;AAGtE,IAAM,yBAAyB,QAAwB;CACrD,IAAI,OAAO;CACX,KAAK,MAAM,aAAa,KACtB,OAAQ,OAAO,KAAK,UAAU,WAAW,CAAC,MAAO;CAEnD,OAAO;AACT;AAEA,IAAa,2BAA2B,QACtC,6BAA6B,sBAAsB,GAAG,CAAC;AAEzD,IAAa,2BAA2B,QACtC,6BAA6B,sBAAsB,GAAG,CAAC;AAEzD,IAAa,2BAA2B,UAA0B;CAChE,MAAM,YAAY,8BAA8B,QAAQ,KAAK;CAC7D,OAAO,cAAc,KACjB,QACC,8BAA8B,cAAc;AACnD;AAEA,IAAa,uBACX,GAAG,WACoB;CACvB,MAAM,aAAa,OAAO,KAAK,UAAU,OAAO,KAAK,CAAC,CAAC,YAAY,CAAC;CACpE,IAAI,WAAW,SAAS,SAAS,GAAG,OAAO,oBAAoB;CAC/D,IACE,WAAW,SAAS,OAAO,KAC3B,WAAW,MAAM,UAAU,4BAA4B,KAAK,SAAS,EAAE,CAAC,GAExE,OAAO,oBAAoB;AAG/B;;AAKA,IAAM,qBACJ,OACA,iBACW;CACX,IAAI,OAAO,aAAa,aAAa,OAAO;CAE5C,MAAM,OAAO,SAAS;CACtB,IAAI,KAAK,QAAQ,SAAS,KAAK,QAAQ,UAAU,cAAc,OAAO;CAEtE,MAAM,SAAS,iBAAiB,IAAI;CACpC,IAAI,WAAW;CACf,KAAK,IAAI,QAAQ,GAAG,QAAQ,MAAM,SAAS,SAAS,MAAM,GAAG,SAAS,GACpE,WAAW,SAAS,QAClB,yEACC,OAAO,UAAkB,aACxB,OAAO,iBAAiB,QAAQ,CAAC,CAAC,KAAK,KAAK,UAAU,KAAK,KAAK,KACpE;CAEF,OAAO;AACT;AAEA,IAAa,8BAAkD;CAC7D,MAAM,EAAE,iBAAiB,eAAe;CAExC,OAAO,cAAc;EACnB,MAAM,wBAAQ,IAAI,IAAoB;EACtC,QAAQ,UAAkB;GACxB,MAAM,SAAS,MAAM,IAAI,KAAK;GAC9B,IAAI,WAAW,KAAA,GAAW,OAAO;GAEjC,MAAM,WAAW,kBAAkB,OAAO,YAAY;GACtD,IAAI,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,QAAQ;GACzD,OAAO;EACT;CACF,GAAG,CAAC,YAAY,CAAC;AACnB"}
+{"version":3,"file":"chartColors.js","names":[],"sources":["../../src/utils/chartColors.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport {\n  useColorScheme,\n  type ResolvedThemeMode,\n} from '../hooks/useColorScheme';\n\n/**\n * Semantic colors for data visualization. These values intentionally remain\n * CSS variable references because SVG fill/stroke props cannot consume\n * Tailwind classes. Theme-specific values come from\n * `@langchain/macaw-tokens/tokens.css`.\n */\nexport const CHART_CATEGORICAL_LINE_COLORS = Array.from(\n  { length: 20 },\n  (_, index) => `var(--chart-categorical-line-${index + 1})`\n);\n\nexport const CHART_CATEGORICAL_FILL_COLORS = Array.from(\n  { length: 20 },\n  (_, index) => `var(--chart-categorical-fill-${index + 1})`\n);\n\nexport const CHART_COMPARISON_COLORS = Array.from(\n  { length: 10 },\n  (_, index) => `var(--chart-comparison-${index + 1})`\n);\n\nexport const CHART_SINGLE_FILL_COLOR = 'var(--chart-single-fill)';\nexport const CHART_OTHER_COLOR = 'var(--chart-other)';\nexport const CHART_INTERACTION_CONTRAST_COLOR =\n  'var(--chart-interaction-contrast)';\nexport const CHART_ON_COLOR = 'var(--chart-on-color)';\nexport const CHART_ON_WARNING_COLOR = 'var(--chart-on-warning)';\n\nexport const CHART_STATUS_COLORS = {\n  positive: 'var(--chart-positive)',\n  warning: 'var(--chart-warning)',\n  negative: 'var(--chart-negative)',\n  negativeSubtle: 'var(--chart-negative-subtle)',\n};\n\n/** Lower-luminance semantic colors for large filled marks. */\nexport const CHART_STATUS_FILL_COLORS = {\n  positive: 'var(--chart-positive-fill)',\n  warning: 'var(--chart-warning-fill)',\n  negative: 'var(--chart-negative-fill)',\n};\n\nexport const CHART_BREAKDOWN_COLORS = {\n  input: 'var(--chart-breakdown-input)',\n  output: 'var(--chart-breakdown-output)',\n  other: 'var(--chart-breakdown-other)',\n};\n\nexport const getCategoricalLineChartColor = (index: number): string =>\n  CHART_CATEGORICAL_LINE_COLORS[index % CHART_CATEGORICAL_LINE_COLORS.length] ??\n  CHART_CATEGORICAL_LINE_COLORS[0];\n\nexport const getCategoricalFillChartColor = (index: number): string =>\n  CHART_CATEGORICAL_FILL_COLORS[index % CHART_CATEGORICAL_FILL_COLORS.length] ??\n  CHART_SINGLE_FILL_COLOR;\n\nconst getPaletteIndexForKey = (key: string): number => {\n  let hash = 0;\n  for (const character of key) {\n    hash = (hash * 31 + character.charCodeAt(0)) >>> 0;\n  }\n  return hash;\n};\n\nexport const getLineChartColorForKey = (key: string): string =>\n  getCategoricalLineChartColor(getPaletteIndexForKey(key));\n\nexport const getFillChartColorForKey = (key: string): string =>\n  getCategoricalFillChartColor(getPaletteIndexForKey(key));\n\nexport const getCategoricalFillColor = (color: string): string => {\n  const lineIndex = CHART_CATEGORICAL_LINE_COLORS.indexOf(color);\n  return lineIndex === -1\n    ? color\n    : (CHART_CATEGORICAL_FILL_COLORS[lineIndex] ?? color);\n};\n\nexport const getChartStatusColor = (\n  ...labels: Array<string | undefined>\n): string | undefined => {\n  const normalized = labels.map((label) => label?.trim().toLowerCase());\n  if (normalized.includes('success')) return CHART_STATUS_COLORS.positive;\n  if (\n    normalized.includes('error') ||\n    normalized.some((label) => /^fail(?:ed|ing|ures?|s)?$/.test(label ?? ''))\n  ) {\n    return CHART_STATUS_COLORS.negative;\n  }\n  return undefined;\n};\n\nexport type ChartColorResolver = (color: string) => string;\n\n/** Resolve semantic CSS variables for renderers that run outside the DOM. */\nconst resolveChartColor = (\n  color: string,\n  resolvedMode: ResolvedThemeMode\n): string => {\n  if (typeof document === 'undefined') return color;\n\n  const root = document.documentElement;\n  if (root.dataset.theme && root.dataset.theme !== resolvedMode) return color;\n\n  const styles = getComputedStyle(root);\n  let resolved = color;\n  for (let depth = 0; depth < 10 && resolved.includes('var('); depth += 1) {\n    resolved = resolved.replace(\n      /var\\(\\s*(--[a-z0-9-]+)\\s*(?:,\\s*((?:[^()]|[a-z-]+\\([^()]*\\))+))?\\)/gi,\n      (match, property: string, fallback: string | undefined) =>\n        styles.getPropertyValue(property).trim() || fallback?.trim() || match\n    );\n  }\n  return resolved;\n};\n\nexport const useChartColorResolver = (): ChartColorResolver => {\n  const { resolvedMode } = useColorScheme();\n\n  return useMemo(() => {\n    const cache = new Map<string, string>();\n    return (color: string) => {\n      const cached = cache.get(color);\n      if (cached !== undefined) return cached;\n\n      const resolved = resolveChartColor(color, resolvedMode);\n      if (!resolved.includes('var(')) cache.set(color, resolved);\n      return resolved;\n    };\n  }, [resolvedMode]);\n};\n"],"mappings":";;;;;;;;;AAaA,IAAa,gCAAgC,MAAM,KACjD,EAAE,QAAQ,GAAG,IACZ,GAAG,UAAU,gCAAgC,QAAQ,EAAE,EAC1D;AAEA,IAAa,gCAAgC,MAAM,KACjD,EAAE,QAAQ,GAAG,IACZ,GAAG,UAAU,gCAAgC,QAAQ,EAAE,EAC1D;AAEA,IAAa,0BAA0B,MAAM,KAC3C,EAAE,QAAQ,GAAG,IACZ,GAAG,UAAU,0BAA0B,QAAQ,EAAE,EACpD;AAEA,IAAa,0BAA0B;AACvC,IAAa,oBAAoB;AACjC,IAAa,mCACX;AACF,IAAa,iBAAiB;AAC9B,IAAa,yBAAyB;AAEtC,IAAa,sBAAsB;CACjC,UAAU;CACV,SAAS;CACT,UAAU;CACV,gBAAgB;AAClB;;AAGA,IAAa,2BAA2B;CACtC,UAAU;CACV,SAAS;CACT,UAAU;AACZ;AAEA,IAAa,yBAAyB;CACpC,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,IAAa,gCAAgC,UAC3C,8BAA8B,QAAQ,8BAA8B,WACpE,8BAA8B;AAEhC,IAAa,gCAAgC,UAC3C,8BAA8B,QAAQ,8BAA8B,WAAA;AAGtE,IAAM,yBAAyB,QAAwB;CACrD,IAAI,OAAO;CACX,KAAK,MAAM,aAAa,KACtB,OAAQ,OAAO,KAAK,UAAU,WAAW,CAAC,MAAO;CAEnD,OAAO;AACT;AAEA,IAAa,2BAA2B,QACtC,6BAA6B,sBAAsB,GAAG,CAAC;AAEzD,IAAa,2BAA2B,QACtC,6BAA6B,sBAAsB,GAAG,CAAC;AAEzD,IAAa,2BAA2B,UAA0B;CAChE,MAAM,YAAY,8BAA8B,QAAQ,KAAK;CAC7D,OAAO,cAAc,KACjB,QACC,8BAA8B,cAAc;AACnD;AAEA,IAAa,uBACX,GAAG,WACoB;CACvB,MAAM,aAAa,OAAO,KAAK,UAAU,OAAO,KAAK,CAAC,CAAC,YAAY,CAAC;CACpE,IAAI,WAAW,SAAS,SAAS,GAAG,OAAO,oBAAoB;CAC/D,IACE,WAAW,SAAS,OAAO,KAC3B,WAAW,MAAM,UAAU,4BAA4B,KAAK,SAAS,EAAE,CAAC,GAExE,OAAO,oBAAoB;AAG/B;;AAKA,IAAM,qBACJ,OACA,iBACW;CACX,IAAI,OAAO,aAAa,aAAa,OAAO;CAE5C,MAAM,OAAO,SAAS;CACtB,IAAI,KAAK,QAAQ,SAAS,KAAK,QAAQ,UAAU,cAAc,OAAO;CAEtE,MAAM,SAAS,iBAAiB,IAAI;CACpC,IAAI,WAAW;CACf,KAAK,IAAI,QAAQ,GAAG,QAAQ,MAAM,SAAS,SAAS,MAAM,GAAG,SAAS,GACpE,WAAW,SAAS,QAClB,yEACC,OAAO,UAAkB,aACxB,OAAO,iBAAiB,QAAQ,CAAC,CAAC,KAAK,KAAK,UAAU,KAAK,KAAK,KACpE;CAEF,OAAO;AACT;AAEA,IAAa,8BAAkD;CAC7D,MAAM,EAAE,iBAAiB,eAAe;CAExC,OAAO,cAAc;EACnB,MAAM,wBAAQ,IAAI,IAAoB;EACtC,QAAQ,UAAkB;GACxB,MAAM,SAAS,MAAM,IAAI,KAAK;GAC9B,IAAI,WAAW,KAAA,GAAW,OAAO;GAEjC,MAAM,WAAW,kBAAkB,OAAO,YAAY;GACtD,IAAI,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,QAAQ;GACzD,OAAO;EACT;CACF,GAAG,CAAC,YAAY,CAAC;AACnB"}

package/dist/utils/componentSizes.d.ts

@@ -100,5 +100,4 @@ export declare const OPTION_ROW_SIZES: {
         readonly minHeightClassName: "min-h-8";
     };
 };
-/** @knipignore Public family type for components adopting this contract. */
 export type OptionRowSize = keyof typeof OPTION_ROW_SIZES;

package/dist/utils/componentSizes.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentSizes.js","names":[],"sources":["../../src/utils/componentSizes.ts"],"sourcesContent":["/**\n * Named outer-size contracts shared by related design-system components.\n *\n * Each family owns its supported tiers. Do not combine these into a universal\n * size type: the same name is meaningful only within its component family.\n */\n/** Components: Decorated Icon, Avatar, and Spinner. */\nexport const VISUAL_ELEMENT_SIZES = {\n  xxs: { name: 'xxs', rem: 0.75, className: 'size-3' },\n  xs: { name: 'xs', rem: 1, className: 'size-4' },\n  sm: { name: 'sm', rem: 1.25, className: 'size-5' },\n  md: { name: 'md', rem: 1.5, className: 'size-6' },\n} as const;\n\nexport type VisualElementSize = keyof typeof VISUAL_ELEMENT_SIZES;\n\n/**\n * Components: Button, IconButton, ButtonGroup, CopyButton, Input,\n * CommandInput, Select, Typeahead, and GroupedTabs.\n */\nexport const CONTROL_SIZES = {\n  xs: {\n    name: 'xs',\n    rem: 1.25,\n    heightClassName: 'h-5',\n    minHeightClassName: 'min-h-5',\n  },\n  sm: {\n    name: 'sm',\n    rem: 1.5,\n    heightClassName: 'h-6',\n    minHeightClassName: 'min-h-6',\n  },\n  md: {\n    name: 'md',\n    rem: 2,\n    heightClassName: 'h-8',\n    minHeightClassName: 'min-h-8',\n  },\n  lg: {\n    name: 'lg',\n    rem: 2.5,\n    heightClassName: 'h-10',\n    minHeightClassName: 'min-h-10',\n  },\n} as const;\n\nexport type ControlSize = keyof typeof CONTROL_SIZES;\n\n/**\n * Components: Checkbox, RadioButton, Switch, and RadioCard support every tier.\n * RadioGroupItem and Slider retain intrinsic/default geometry. Applies to\n * indicator geometry, not intrinsic row/card height.\n */\nexport const SELECTION_CONTROL_SIZES = {\n  sm: {\n    name: 'sm',\n    rem: 1,\n    className: 'size-4',\n    heightClassName: 'h-4',\n  },\n  md: {\n    name: 'md',\n    rem: 1.25,\n    className: 'size-5',\n    heightClassName: 'h-5',\n  },\n} as const;\n\nexport type SelectionControlSize = keyof typeof SELECTION_CONTROL_SIZES;\n\n/**\n * Keeps compact visual indicators at least 24px pointer targets without\n * changing their layout geometry.\n */\nexport const SELECTION_CONTROL_HIT_AREA_STYLES = `relative after:absolute after:left-1/2 after:top-1/2 after:min-h-6 after:min-w-6 after:-translate-x-1/2 after:-translate-y-1/2 after:content-['']`;\n\n/**\n * Components: CommandItem, DropdownMenuItem, DropdownMenuSubTrigger,\n * ContextMenuItem, SelectItem, and Typeahead option/create-option rows.\n */\nexport const OPTION_ROW_SIZES = {\n  sm: { name: 'sm', rem: 1.5, minHeightClassName: 'min-h-6' },\n  md: { name: 'md', rem: 2, minHeightClassName: 'min-h-8' },\n} as const;\n\n/** @knipignore Public family type for components adopting this contract. */\nexport type OptionRowSize = keyof typeof OPTION_ROW_SIZES;\n"],"mappings":";;;;;;;;AAOA,IAAa,uBAAuB;CAClC,KAAK;EAAE,MAAM;EAAO,KAAK;EAAM,WAAW;CAAS;CACnD,IAAI;EAAE,MAAM;EAAM,KAAK;EAAG,WAAW;CAAS;CAC9C,IAAI;EAAE,MAAM;EAAM,KAAK;EAAM,WAAW;CAAS;CACjD,IAAI;EAAE,MAAM;EAAM,KAAK;EAAK,WAAW;CAAS;AAClD;;;;;AAQA,IAAa,gBAAgB;CAC3B,IAAI;EACF,MAAM;EACN,KAAK;EACL,iBAAiB;EACjB,oBAAoB;CACtB;CACA,IAAI;EACF,MAAM;EACN,KAAK;EACL,iBAAiB;EACjB,oBAAoB;CACtB;CACA,IAAI;EACF,MAAM;EACN,KAAK;EACL,iBAAiB;EACjB,oBAAoB;CACtB;CACA,IAAI;EACF,MAAM;EACN,KAAK;EACL,iBAAiB;EACjB,oBAAoB;CACtB;AACF;;;;;;AASA,IAAa,0BAA0B;CACrC,IAAI;EACF,MAAM;EACN,KAAK;EACL,WAAW;EACX,iBAAiB;CACnB;CACA,IAAI;EACF,MAAM;EACN,KAAK;EACL,WAAW;EACX,iBAAiB;CACnB;AACF;;;;;AAQA,IAAa,oCAAoC;;;;;AAMjD,IAAa,mBAAmB;CAC9B,IAAI;EAAE,MAAM;EAAM,KAAK;EAAK,oBAAoB;CAAU;CAC1D,IAAI;EAAE,MAAM;EAAM,KAAK;EAAG,oBAAoB;CAAU;AAC1D"}
+{"version":3,"file":"componentSizes.js","names":[],"sources":["../../src/utils/componentSizes.ts"],"sourcesContent":["/**\n * Named outer-size contracts shared by related design-system components.\n *\n * Each family owns its supported tiers. Do not combine these into a universal\n * size type: the same name is meaningful only within its component family.\n */\n/** Components: Decorated Icon, Avatar, and Spinner. */\nexport const VISUAL_ELEMENT_SIZES = {\n  xxs: { name: 'xxs', rem: 0.75, className: 'size-3' },\n  xs: { name: 'xs', rem: 1, className: 'size-4' },\n  sm: { name: 'sm', rem: 1.25, className: 'size-5' },\n  md: { name: 'md', rem: 1.5, className: 'size-6' },\n} as const;\n\nexport type VisualElementSize = keyof typeof VISUAL_ELEMENT_SIZES;\n\n/**\n * Components: Button, IconButton, ButtonGroup, CopyButton, Input,\n * CommandInput, Select, Typeahead, and GroupedTabs.\n */\nexport const CONTROL_SIZES = {\n  xs: {\n    name: 'xs',\n    rem: 1.25,\n    heightClassName: 'h-5',\n    minHeightClassName: 'min-h-5',\n  },\n  sm: {\n    name: 'sm',\n    rem: 1.5,\n    heightClassName: 'h-6',\n    minHeightClassName: 'min-h-6',\n  },\n  md: {\n    name: 'md',\n    rem: 2,\n    heightClassName: 'h-8',\n    minHeightClassName: 'min-h-8',\n  },\n  lg: {\n    name: 'lg',\n    rem: 2.5,\n    heightClassName: 'h-10',\n    minHeightClassName: 'min-h-10',\n  },\n} as const;\n\nexport type ControlSize = keyof typeof CONTROL_SIZES;\n\n/**\n * Components: Checkbox, RadioButton, Switch, and RadioCard support every tier.\n * RadioGroupItem and Slider retain intrinsic/default geometry. Applies to\n * indicator geometry, not intrinsic row/card height.\n */\nexport const SELECTION_CONTROL_SIZES = {\n  sm: {\n    name: 'sm',\n    rem: 1,\n    className: 'size-4',\n    heightClassName: 'h-4',\n  },\n  md: {\n    name: 'md',\n    rem: 1.25,\n    className: 'size-5',\n    heightClassName: 'h-5',\n  },\n} as const;\n\nexport type SelectionControlSize = keyof typeof SELECTION_CONTROL_SIZES;\n\n/**\n * Keeps compact visual indicators at least 24px pointer targets without\n * changing their layout geometry.\n */\nexport const SELECTION_CONTROL_HIT_AREA_STYLES = `relative after:absolute after:left-1/2 after:top-1/2 after:min-h-6 after:min-w-6 after:-translate-x-1/2 after:-translate-y-1/2 after:content-['']`;\n\n/**\n * Components: CommandItem, DropdownMenuItem, DropdownMenuSubTrigger,\n * ContextMenuItem, SelectItem, and Typeahead option/create-option rows.\n */\nexport const OPTION_ROW_SIZES = {\n  sm: { name: 'sm', rem: 1.5, minHeightClassName: 'min-h-6' },\n  md: { name: 'md', rem: 2, minHeightClassName: 'min-h-8' },\n} as const;\n\nexport type OptionRowSize = keyof typeof OPTION_ROW_SIZES;\n"],"mappings":";;;;;;;;AAOA,IAAa,uBAAuB;CAClC,KAAK;EAAE,MAAM;EAAO,KAAK;EAAM,WAAW;CAAS;CACnD,IAAI;EAAE,MAAM;EAAM,KAAK;EAAG,WAAW;CAAS;CAC9C,IAAI;EAAE,MAAM;EAAM,KAAK;EAAM,WAAW;CAAS;CACjD,IAAI;EAAE,MAAM;EAAM,KAAK;EAAK,WAAW;CAAS;AAClD;;;;;AAQA,IAAa,gBAAgB;CAC3B,IAAI;EACF,MAAM;EACN,KAAK;EACL,iBAAiB;EACjB,oBAAoB;CACtB;CACA,IAAI;EACF,MAAM;EACN,KAAK;EACL,iBAAiB;EACjB,oBAAoB;CACtB;CACA,IAAI;EACF,MAAM;EACN,KAAK;EACL,iBAAiB;EACjB,oBAAoB;CACtB;CACA,IAAI;EACF,MAAM;EACN,KAAK;EACL,iBAAiB;EACjB,oBAAoB;CACtB;AACF;;;;;;AASA,IAAa,0BAA0B;CACrC,IAAI;EACF,MAAM;EACN,KAAK;EACL,WAAW;EACX,iBAAiB;CACnB;CACA,IAAI;EACF,MAAM;EACN,KAAK;EACL,WAAW;EACX,iBAAiB;CACnB;AACF;;;;;AAQA,IAAa,oCAAoC;;;;;AAMjD,IAAa,mBAAmB;CAC9B,IAAI;EAAE,MAAM;EAAM,KAAK;EAAK,oBAAoB;CAAU;CAC1D,IAAI;EAAE,MAAM;EAAM,KAAK;EAAG,oBAAoB;CAAU;AAC1D"}

package/dist/utils/lazy-codemirror-loader.d.ts

@@ -20,7 +20,6 @@ import type * as CmLegacyShell from '@codemirror/legacy-modes/mode/shell';
 import type * as CmLint from '@codemirror/lint';
 import type * as CmState from '@codemirror/state';
 import type * as CmView from '@codemirror/view';
-import type * as LezerCommon from '@lezer/common';
 import type * as LezerHighlight from '@lezer/highlight';
 import type * as LezerYaml from '@lezer/yaml';
 import type * as TokyoDay from '@uiw/codemirror-theme-tokyo-night-day';
@@ -57,7 +56,6 @@ export type CMBundle = {
     lezerYamlParser: typeof LezerYaml.parser;
     lezerTagHighlighter: typeof LezerHighlight.tagHighlighter;
     lezerHighlighTree: typeof LezerHighlight.highlightTree;
-    lezerCommon: typeof LezerCommon;
     langJson: typeof CmLangJson.json;
     langJavascript: typeof CmLangJs.javascript;
     langPython: typeof CmLangPython.python;

package/dist/utils/lazy-codemirror-loader.js

@@ -15,14 +15,13 @@ function loadCodeMirror() {
 		import("@uiw/codemirror-theme-tokyo-night-storm"),
 		import("@lezer/highlight"),
 		import("@lezer/yaml"),
-		import("@lezer/common"),
 		import("@codemirror/lang-json"),
 		import("@codemirror/lang-javascript"),
 		import("@codemirror/lang-python"),
 		import("@codemirror/lang-markdown"),
 		import("@codemirror/legacy-modes/mode/shell"),
 		import("@codemirror/legacy-modes/mode/ruby")
-	]).then(([cmCore, cmCommands, cmLanguage, cmState, cmView, cmLint, tokyoDay, tokyoStorm, lezerHighlight, lezerYaml, lezerCommonModule, cmLangJson, cmLangJs, cmLangPython, cmLangMarkdown, cmLegacyShell, cmLegacyRuby]) => {
+	]).then(([cmCore, cmCommands, cmLanguage, cmState, cmView, cmLint, tokyoDay, tokyoStorm, lezerHighlight, lezerYaml, cmLangJson, cmLangJs, cmLangPython, cmLangMarkdown, cmLegacyShell, cmLegacyRuby]) => {
 		bundle = {
 			CodeMirror: cmCore.default,
 			defaultKeymap: cmCommands.defaultKeymap,
@@ -54,7 +53,6 @@ function loadCodeMirror() {
 			lezerTagHighlighter: lezerHighlight.tagHighlighter,
 			lezerHighlighTree: lezerHighlight.highlightTree,
 			lezerYamlParser: lezerYaml.parser,
-			lezerCommon: lezerCommonModule,
 			langJson: cmLangJson.json,
 			langJavascript: cmLangJs.javascript,
 			langPython: cmLangPython.python,

package/dist/utils/lazy-codemirror-loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazy-codemirror-loader.js","names":[],"sources":["../../src/utils/lazy-codemirror-loader.ts"],"sourcesContent":["/**\n * Lazy loader for CodeMirror and related packages.\n * Avoids loading @codemirror/*, @uiw/react-codemirror, and @lezer/* on initial\n * page load.\n *\n * Usage:\n *   - Call loadCodeMirror() early (e.g. in App.tsx) to kick off loading in the background.\n *   - Use the useCodeMirror() hook in components — returns CMBundle | null.\n *     null means not yet loaded; components should render a fallback (or null).\n *   - Never import @codemirror/* at the top level outside this file.\n */\n\nimport type * as CmCommands from '@codemirror/commands';\nimport type * as CmLangJs from '@codemirror/lang-javascript';\nimport type * as CmLangJson from '@codemirror/lang-json';\nimport type * as CmLangMarkdown from '@codemirror/lang-markdown';\nimport type * as CmLangPython from '@codemirror/lang-python';\nimport type * as CmLanguage from '@codemirror/language';\nimport type * as CmLegacyRuby from '@codemirror/legacy-modes/mode/ruby';\nimport type * as CmLegacyShell from '@codemirror/legacy-modes/mode/shell';\nimport type * as CmLint from '@codemirror/lint';\nimport type * as CmState from '@codemirror/state';\nimport type * as CmView from '@codemirror/view';\nimport type * as LezerCommon from '@lezer/common';\nimport type * as LezerHighlight from '@lezer/highlight';\nimport type * as LezerYaml from '@lezer/yaml';\nimport type * as TokyoDay from '@uiw/codemirror-theme-tokyo-night-day';\nimport type * as TokyoStorm from '@uiw/codemirror-theme-tokyo-night-storm';\nimport type ReactCodeMirror from '@uiw/react-codemirror';\n\nexport type CMBundle = {\n  // Core\n  CodeMirror: typeof ReactCodeMirror;\n\n  // Commands\n  defaultKeymap: typeof CmCommands.defaultKeymap;\n\n  // Language\n  LanguageSupport: typeof CmLanguage.LanguageSupport;\n  StreamLanguage: typeof CmLanguage.StreamLanguage;\n  LRLanguage: typeof CmLanguage.LRLanguage;\n  delimitedIndent: typeof CmLanguage.delimitedIndent;\n  foldEffect: typeof CmLanguage.foldEffect;\n  foldService: typeof CmLanguage.foldService;\n  foldNodeProp: typeof CmLanguage.foldNodeProp;\n  foldable: typeof CmLanguage.foldable;\n  indentNodeProp: typeof CmLanguage.indentNodeProp;\n  syntaxTree: typeof CmLanguage.syntaxTree;\n  syntaxTreeAvailable: typeof CmLanguage.syntaxTreeAvailable;\n\n  // State\n  EditorState: typeof CmState.EditorState;\n  StateEffect: typeof CmState.StateEffect;\n  StateField: typeof CmState.StateField;\n  RangeSetBuilder: typeof CmState.RangeSetBuilder;\n\n  // View\n  Decoration: typeof CmView.Decoration;\n  EditorView: typeof CmView.EditorView;\n  ViewPlugin: typeof CmView.ViewPlugin;\n  WidgetType: typeof CmView.WidgetType;\n  keymap: typeof CmView.keymap;\n\n  // Lint\n  lintGutter: typeof CmLint.lintGutter;\n  linter: typeof CmLint.linter;\n\n  // Themes\n  tokyoNightDayInit: typeof TokyoDay.tokyoNightDayInit;\n  tokyoNightStormInit: typeof TokyoStorm.tokyoNightStormInit;\n\n  // Lezer\n  lezerHighlightTags: typeof LezerHighlight.tags;\n  lezerYamlParser: typeof LezerYaml.parser;\n  lezerTagHighlighter: typeof LezerHighlight.tagHighlighter;\n  lezerHighlighTree: typeof LezerHighlight.highlightTree;\n  lezerCommon: typeof LezerCommon;\n\n  // Languages\n  langJson: typeof CmLangJson.json;\n  langJavascript: typeof CmLangJs.javascript;\n  langPython: typeof CmLangPython.python;\n  langMarkdown: typeof CmLangMarkdown.markdown;\n  legacyModeShell: typeof CmLegacyShell.shell;\n  legacyModeRuby: typeof CmLegacyRuby.ruby;\n};\n\nlet bundle: CMBundle | null = null;\nlet loadPromise: Promise<CMBundle> | null = null;\n\nexport function loadCodeMirror(): Promise<CMBundle> {\n  if (bundle) return Promise.resolve(bundle);\n  if (loadPromise) return loadPromise;\n\n  loadPromise = Promise.all([\n    import('@uiw/react-codemirror'),\n    import('@codemirror/commands'),\n    import('@codemirror/language'),\n    import('@codemirror/state'),\n    import('@codemirror/view'),\n    import('@codemirror/lint'),\n    import('@uiw/codemirror-theme-tokyo-night-day'),\n    import('@uiw/codemirror-theme-tokyo-night-storm'),\n    import('@lezer/highlight'),\n    import('@lezer/yaml'),\n    import('@lezer/common'),\n    import('@codemirror/lang-json'),\n    import('@codemirror/lang-javascript'),\n    import('@codemirror/lang-python'),\n    import('@codemirror/lang-markdown'),\n    import('@codemirror/legacy-modes/mode/shell'),\n    import('@codemirror/legacy-modes/mode/ruby'),\n  ])\n    .then(\n      ([\n        cmCore,\n        cmCommands,\n        cmLanguage,\n        cmState,\n        cmView,\n        cmLint,\n        tokyoDay,\n        tokyoStorm,\n        lezerHighlight,\n        lezerYaml,\n        lezerCommonModule,\n        cmLangJson,\n        cmLangJs,\n        cmLangPython,\n        cmLangMarkdown,\n        cmLegacyShell,\n        cmLegacyRuby,\n      ]): CMBundle => {\n        bundle = {\n          CodeMirror: cmCore.default,\n          defaultKeymap: cmCommands.defaultKeymap,\n          LanguageSupport: cmLanguage.LanguageSupport,\n          StreamLanguage: cmLanguage.StreamLanguage,\n          LRLanguage: cmLanguage.LRLanguage,\n          delimitedIndent: cmLanguage.delimitedIndent,\n          foldEffect: cmLanguage.foldEffect,\n          foldService: cmLanguage.foldService,\n          foldNodeProp: cmLanguage.foldNodeProp,\n          foldable: cmLanguage.foldable,\n          indentNodeProp: cmLanguage.indentNodeProp,\n          syntaxTree: cmLanguage.syntaxTree,\n          syntaxTreeAvailable: cmLanguage.syntaxTreeAvailable,\n          EditorState: cmState.EditorState,\n          StateEffect: cmState.StateEffect,\n          StateField: cmState.StateField,\n          RangeSetBuilder: cmState.RangeSetBuilder,\n          Decoration: cmView.Decoration,\n          EditorView: cmView.EditorView,\n          ViewPlugin: cmView.ViewPlugin,\n          WidgetType: cmView.WidgetType,\n          keymap: cmView.keymap,\n          lintGutter: cmLint.lintGutter,\n          linter: cmLint.linter,\n          tokyoNightStormInit: tokyoStorm.tokyoNightStormInit,\n          tokyoNightDayInit: tokyoDay.tokyoNightDayInit,\n          lezerHighlightTags: lezerHighlight.tags,\n          lezerTagHighlighter: lezerHighlight.tagHighlighter,\n          lezerHighlighTree: lezerHighlight.highlightTree,\n          lezerYamlParser: lezerYaml.parser,\n          lezerCommon: lezerCommonModule,\n          langJson: cmLangJson.json,\n          langJavascript: cmLangJs.javascript,\n          langPython: cmLangPython.python,\n          langMarkdown: cmLangMarkdown.markdown,\n          legacyModeShell: cmLegacyShell.shell,\n          legacyModeRuby: cmLegacyRuby.ruby,\n        };\n        return bundle;\n      }\n    )\n    .catch((err) => {\n      loadPromise = null;\n      throw err;\n    });\n\n  return loadPromise;\n}\n\n/** Returns the bundle synchronously if already loaded, otherwise null. */\nexport function getCodeMirror(): CMBundle | null {\n  return bundle;\n}\n"],"mappings":";AAuFA,IAAI,SAA0B;AAC9B,IAAI,cAAwC;AAE5C,SAAgB,iBAAoC;CAClD,IAAI,QAAQ,OAAO,QAAQ,QAAQ,MAAM;CACzC,IAAI,aAAa,OAAO;CAExB,cAAc,QAAQ,IAAI;EACxB,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;CACT,CAAC,CAAC,CACC,MACE,CACC,QACA,YACA,YACA,SACA,QACA,QACA,UACA,YACA,gBACA,WACA,mBACA,YACA,UACA,cACA,gBACA,eACA,kBACc;EACd,SAAS;GACP,YAAY,OAAO;GACnB,eAAe,WAAW;GAC1B,iBAAiB,WAAW;GAC5B,gBAAgB,WAAW;GAC3B,YAAY,WAAW;GACvB,iBAAiB,WAAW;GAC5B,YAAY,WAAW;GACvB,aAAa,WAAW;GACxB,cAAc,WAAW;GACzB,UAAU,WAAW;GACrB,gBAAgB,WAAW;GAC3B,YAAY,WAAW;GACvB,qBAAqB,WAAW;GAChC,aAAa,QAAQ;GACrB,aAAa,QAAQ;GACrB,YAAY,QAAQ;GACpB,iBAAiB,QAAQ;GACzB,YAAY,OAAO;GACnB,YAAY,OAAO;GACnB,YAAY,OAAO;GACnB,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,qBAAqB,WAAW;GAChC,mBAAmB,SAAS;GAC5B,oBAAoB,eAAe;GACnC,qBAAqB,eAAe;GACpC,mBAAmB,eAAe;GAClC,iBAAiB,UAAU;GAC3B,aAAa;GACb,UAAU,WAAW;GACrB,gBAAgB,SAAS;GACzB,YAAY,aAAa;GACzB,cAAc,eAAe;GAC7B,iBAAiB,cAAc;GAC/B,gBAAgB,aAAa;EAC/B;EACA,OAAO;CACT,CACF,CAAC,CACA,OAAO,QAAQ;EACd,cAAc;EACd,MAAM;CACR,CAAC;CAEH,OAAO;AACT;;AAGA,SAAgB,gBAAiC;CAC/C,OAAO;AACT"}
+{"version":3,"file":"lazy-codemirror-loader.js","names":[],"sources":["../../src/utils/lazy-codemirror-loader.ts"],"sourcesContent":["/**\n * Lazy loader for CodeMirror and related packages.\n * Avoids loading @codemirror/*, @uiw/react-codemirror, and @lezer/* on initial\n * page load.\n *\n * Usage:\n *   - Call loadCodeMirror() early (e.g. in App.tsx) to kick off loading in the background.\n *   - Use the useCodeMirror() hook in components — returns CMBundle | null.\n *     null means not yet loaded; components should render a fallback (or null).\n *   - Never import @codemirror/* at the top level outside this file.\n */\n\nimport type * as CmCommands from '@codemirror/commands';\nimport type * as CmLangJs from '@codemirror/lang-javascript';\nimport type * as CmLangJson from '@codemirror/lang-json';\nimport type * as CmLangMarkdown from '@codemirror/lang-markdown';\nimport type * as CmLangPython from '@codemirror/lang-python';\nimport type * as CmLanguage from '@codemirror/language';\nimport type * as CmLegacyRuby from '@codemirror/legacy-modes/mode/ruby';\nimport type * as CmLegacyShell from '@codemirror/legacy-modes/mode/shell';\nimport type * as CmLint from '@codemirror/lint';\nimport type * as CmState from '@codemirror/state';\nimport type * as CmView from '@codemirror/view';\nimport type * as LezerHighlight from '@lezer/highlight';\nimport type * as LezerYaml from '@lezer/yaml';\nimport type * as TokyoDay from '@uiw/codemirror-theme-tokyo-night-day';\nimport type * as TokyoStorm from '@uiw/codemirror-theme-tokyo-night-storm';\nimport type ReactCodeMirror from '@uiw/react-codemirror';\n\nexport type CMBundle = {\n  // Core\n  CodeMirror: typeof ReactCodeMirror;\n\n  // Commands\n  defaultKeymap: typeof CmCommands.defaultKeymap;\n\n  // Language\n  LanguageSupport: typeof CmLanguage.LanguageSupport;\n  StreamLanguage: typeof CmLanguage.StreamLanguage;\n  LRLanguage: typeof CmLanguage.LRLanguage;\n  delimitedIndent: typeof CmLanguage.delimitedIndent;\n  foldEffect: typeof CmLanguage.foldEffect;\n  foldService: typeof CmLanguage.foldService;\n  foldNodeProp: typeof CmLanguage.foldNodeProp;\n  foldable: typeof CmLanguage.foldable;\n  indentNodeProp: typeof CmLanguage.indentNodeProp;\n  syntaxTree: typeof CmLanguage.syntaxTree;\n  syntaxTreeAvailable: typeof CmLanguage.syntaxTreeAvailable;\n\n  // State\n  EditorState: typeof CmState.EditorState;\n  StateEffect: typeof CmState.StateEffect;\n  StateField: typeof CmState.StateField;\n  RangeSetBuilder: typeof CmState.RangeSetBuilder;\n\n  // View\n  Decoration: typeof CmView.Decoration;\n  EditorView: typeof CmView.EditorView;\n  ViewPlugin: typeof CmView.ViewPlugin;\n  WidgetType: typeof CmView.WidgetType;\n  keymap: typeof CmView.keymap;\n\n  // Lint\n  lintGutter: typeof CmLint.lintGutter;\n  linter: typeof CmLint.linter;\n\n  // Themes\n  tokyoNightDayInit: typeof TokyoDay.tokyoNightDayInit;\n  tokyoNightStormInit: typeof TokyoStorm.tokyoNightStormInit;\n\n  // Lezer\n  lezerHighlightTags: typeof LezerHighlight.tags;\n  lezerYamlParser: typeof LezerYaml.parser;\n  lezerTagHighlighter: typeof LezerHighlight.tagHighlighter;\n  lezerHighlighTree: typeof LezerHighlight.highlightTree;\n\n  // Languages\n  langJson: typeof CmLangJson.json;\n  langJavascript: typeof CmLangJs.javascript;\n  langPython: typeof CmLangPython.python;\n  langMarkdown: typeof CmLangMarkdown.markdown;\n  legacyModeShell: typeof CmLegacyShell.shell;\n  legacyModeRuby: typeof CmLegacyRuby.ruby;\n};\n\nlet bundle: CMBundle | null = null;\nlet loadPromise: Promise<CMBundle> | null = null;\n\nexport function loadCodeMirror(): Promise<CMBundle> {\n  if (bundle) return Promise.resolve(bundle);\n  if (loadPromise) return loadPromise;\n\n  loadPromise = Promise.all([\n    import('@uiw/react-codemirror'),\n    import('@codemirror/commands'),\n    import('@codemirror/language'),\n    import('@codemirror/state'),\n    import('@codemirror/view'),\n    import('@codemirror/lint'),\n    import('@uiw/codemirror-theme-tokyo-night-day'),\n    import('@uiw/codemirror-theme-tokyo-night-storm'),\n    import('@lezer/highlight'),\n    import('@lezer/yaml'),\n    import('@codemirror/lang-json'),\n    import('@codemirror/lang-javascript'),\n    import('@codemirror/lang-python'),\n    import('@codemirror/lang-markdown'),\n    import('@codemirror/legacy-modes/mode/shell'),\n    import('@codemirror/legacy-modes/mode/ruby'),\n  ])\n    .then(\n      ([\n        cmCore,\n        cmCommands,\n        cmLanguage,\n        cmState,\n        cmView,\n        cmLint,\n        tokyoDay,\n        tokyoStorm,\n        lezerHighlight,\n        lezerYaml,\n        cmLangJson,\n        cmLangJs,\n        cmLangPython,\n        cmLangMarkdown,\n        cmLegacyShell,\n        cmLegacyRuby,\n      ]): CMBundle => {\n        bundle = {\n          CodeMirror: cmCore.default,\n          defaultKeymap: cmCommands.defaultKeymap,\n          LanguageSupport: cmLanguage.LanguageSupport,\n          StreamLanguage: cmLanguage.StreamLanguage,\n          LRLanguage: cmLanguage.LRLanguage,\n          delimitedIndent: cmLanguage.delimitedIndent,\n          foldEffect: cmLanguage.foldEffect,\n          foldService: cmLanguage.foldService,\n          foldNodeProp: cmLanguage.foldNodeProp,\n          foldable: cmLanguage.foldable,\n          indentNodeProp: cmLanguage.indentNodeProp,\n          syntaxTree: cmLanguage.syntaxTree,\n          syntaxTreeAvailable: cmLanguage.syntaxTreeAvailable,\n          EditorState: cmState.EditorState,\n          StateEffect: cmState.StateEffect,\n          StateField: cmState.StateField,\n          RangeSetBuilder: cmState.RangeSetBuilder,\n          Decoration: cmView.Decoration,\n          EditorView: cmView.EditorView,\n          ViewPlugin: cmView.ViewPlugin,\n          WidgetType: cmView.WidgetType,\n          keymap: cmView.keymap,\n          lintGutter: cmLint.lintGutter,\n          linter: cmLint.linter,\n          tokyoNightStormInit: tokyoStorm.tokyoNightStormInit,\n          tokyoNightDayInit: tokyoDay.tokyoNightDayInit,\n          lezerHighlightTags: lezerHighlight.tags,\n          lezerTagHighlighter: lezerHighlight.tagHighlighter,\n          lezerHighlighTree: lezerHighlight.highlightTree,\n          lezerYamlParser: lezerYaml.parser,\n          langJson: cmLangJson.json,\n          langJavascript: cmLangJs.javascript,\n          langPython: cmLangPython.python,\n          langMarkdown: cmLangMarkdown.markdown,\n          legacyModeShell: cmLegacyShell.shell,\n          legacyModeRuby: cmLegacyRuby.ruby,\n        };\n        return bundle;\n      }\n    )\n    .catch((err) => {\n      loadPromise = null;\n      throw err;\n    });\n\n  return loadPromise;\n}\n\n/** Returns the bundle synchronously if already loaded, otherwise null. */\nexport function getCodeMirror(): CMBundle | null {\n  return bundle;\n}\n"],"mappings":";AAqFA,IAAI,SAA0B;AAC9B,IAAI,cAAwC;AAE5C,SAAgB,iBAAoC;CAClD,IAAI,QAAQ,OAAO,QAAQ,QAAQ,MAAM;CACzC,IAAI,aAAa,OAAO;CAExB,cAAc,QAAQ,IAAI;EACxB,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;CACT,CAAC,CAAC,CACC,MACE,CACC,QACA,YACA,YACA,SACA,QACA,QACA,UACA,YACA,gBACA,WACA,YACA,UACA,cACA,gBACA,eACA,kBACc;EACd,SAAS;GACP,YAAY,OAAO;GACnB,eAAe,WAAW;GAC1B,iBAAiB,WAAW;GAC5B,gBAAgB,WAAW;GAC3B,YAAY,WAAW;GACvB,iBAAiB,WAAW;GAC5B,YAAY,WAAW;GACvB,aAAa,WAAW;GACxB,cAAc,WAAW;GACzB,UAAU,WAAW;GACrB,gBAAgB,WAAW;GAC3B,YAAY,WAAW;GACvB,qBAAqB,WAAW;GAChC,aAAa,QAAQ;GACrB,aAAa,QAAQ;GACrB,YAAY,QAAQ;GACpB,iBAAiB,QAAQ;GACzB,YAAY,OAAO;GACnB,YAAY,OAAO;GACnB,YAAY,OAAO;GACnB,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,qBAAqB,WAAW;GAChC,mBAAmB,SAAS;GAC5B,oBAAoB,eAAe;GACnC,qBAAqB,eAAe;GACpC,mBAAmB,eAAe;GAClC,iBAAiB,UAAU;GAC3B,UAAU,WAAW;GACrB,gBAAgB,SAAS;GACzB,YAAY,aAAa;GACzB,cAAc,eAAe;GAC7B,iBAAiB,cAAc;GAC/B,gBAAgB,aAAa;EAC/B;EACA,OAAO;CACT,CACF,CAAC,CACA,OAAO,QAAQ;EACd,cAAc;EACd,MAAM;CACR,CAAC;CAEH,OAAO;AACT;;AAGA,SAAgB,gBAAiC;CAC/C,OAAO;AACT"}

package/docs/DESIGN.md

@@ -42,6 +42,7 @@ Use existing components for their interaction contracts, not just their appearan
 
 - Use `Button` for actions and `Link` for navigation.
 - Use `IconButton` for an icon-only action and provide its `label`.
+- Use `Attachment` and `AttachmentList` for file rows and thumbnails; consumers own uploads, preview safety, and file operations.
 - Use `Input` or `Textarea` for text entry, `Select` for a known option list, and `Typeahead` when the user types to search or create options.
 - Use `RadioGroup` for a short visible choice set and `RadioCard` when an option needs supporting content.
 - Use `Dialog` for a short blocking decision and `Pane` for substantial editing or detail work.
@@ -49,11 +50,25 @@ Use existing components for their interaction contracts, not just their appearan
 - Use `Banner` for persistent regional information, `useToast().createToast(...)` for the result of an action, and field hint/error APIs for validation.
 - Use `ThinkingState` for active AI work (generation, reasoning, or tool use); name the work and show elapsed time only for longer waits.
 - Use `LoadingIndicator` for the AI animation alone; announce status on its surrounding control or region.
+- Set `speed="slow"` on `ThinkingState` or `LoadingIndicator` for a slower animation; reduced-motion preferences still take precedence.
 - Use `Spinner` for routine saves, fetches, or refreshes, even within AI screens (e.g. fetching chat history).
 - Use `Skeleton` for known content shapes, `LinearProgress` for regional loading, and `ProgressBar` for measurable completion.
 
 Custom components should compose primitives and keep feature data, permissions, navigation, and domain behavior in the feature. Prefer a few composable parts over large prop surfaces and boolean-driven branches. Use named exports for new components, and update types, stories, and relevant guidance when behavior changes.
 
+## Code editors
+
+Import `Code`, `CodeToolbar`, and `CodeLanguageSelect` from
+`@langchain/macaw-components/Code`. Use `Code` for editing and the lighter
+`CodeLite` for read-only snippets. Supply a `toolbar` to compose language controls
+and actions above the editor; include `CopyButton` there when needed. Without a
+toolbar, `showCopyButton` keeps the floating copy control.
+
+`CodeLanguageSelect` accepts language aliases such as `ts` and `py`, preserves
+unknown language labels, and reports supported `CodeLanguageType` values.
+`showFoldGutter={false}` hides folding controls. Use `onChange` for user edits and
+`onUpdate` when an integration also needs selection or programmatic updates.
+
 ## Tokens
 
 Tokens flow in one direction:
@@ -81,6 +96,8 @@ Choose color by meaning:
 
 Chart SVG `fill` and `stroke` are the exception to Tailwind-only color usage. Import semantic values from `@langchain/macaw-components/utils/chartColors`; do not use raw visualization variables or literals.
 
+Import `SankeyChart` from `@langchain/macaw-components/SankeyChart` for weighted flow diagrams. Compose it with `ChartCard`, `ChartLegend`, and `ChartTooltip`; consumers own data, value formatting, tooltips, and navigation.
+
 ## Icons
 
 Use server-safe Phosphor leaf modules for general-purpose glyphs:

package/docs/STYLES.md

@@ -92,6 +92,9 @@ The same tier name is meaningful only within its family.
 - `Input`, `CommandInput`, and `Textarea` default to the `lg` compatibility tier.
   New consumers should choose `md` explicitly.
 
+`Tabs` and `TabLabel` remain intrinsic page navigation; use `GroupedTabs` for
+compact local navigation on the control scale.
+
 ## Label Casing
 
 Use **Title Case** for names of things: field labels, section headings, tabs,
@@ -171,7 +174,7 @@ dashboard visualization shells.
 - Consumers own charts, legends, data interactions, and empty states. Use the
   `state` prop for standard loading and known data-fetching error states; it
   does not catch chart-rendering exceptions.
-- Set `skeletonVariant` to `bar`, `line`, `donut`, `metric`, or `sparkline` to match the chart
+- Set `skeletonVariant` to `bar`, `line`, `donut`, `metric`, `sparkline`, or `sankey` to match the chart
   shape while loading. Use `ChartCardSkeleton` directly for a chart placeholder
   outside a card.
 - Loading and error states have a baseline minimum height. Set an explicit card

package/package.json

@@ -1,11 +1,7 @@
 {
   "name": "@langchain/macaw-components",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.6",
   "description": "React components and usage guidance for the Macaw Design System.",
-  "homepage": "https://github.com/langchain-ai/macaw-design-system#readme",
-  "bugs": {
-    "url": "https://github.com/langchain-ai/macaw-design-system/issues"
-  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,6 +28,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./Attachment": {
+      "types": "./dist/components/Attachment/index.d.ts",
+      "import": "./dist/components/Attachment/index.js"
+    },
     "./Avatar": {
       "types": "./dist/components/Avatar/index.d.ts",
       "import": "./dist/components/Avatar/index.js"
@@ -192,6 +192,10 @@
       "types": "./dist/components/RadioGroup/index.d.ts",
       "import": "./dist/components/RadioGroup/index.js"
     },
+    "./SankeyChart": {
+      "types": "./dist/components/SankeyChart/index.d.ts",
+      "import": "./dist/components/SankeyChart/index.js"
+    },
     "./Select": {
       "types": "./dist/components/Select/index.d.ts",
       "import": "./dist/components/Select/index.js"
@@ -301,6 +305,10 @@
       "types": "./dist/components/index.d.ts",
       "import": "./dist/components/index.js"
     },
+    "./components/Attachment": {
+      "types": "./dist/components/Attachment/index.d.ts",
+      "import": "./dist/components/Attachment/index.js"
+    },
     "./components/Avatar": {
       "types": "./dist/components/Avatar/index.d.ts",
       "import": "./dist/components/Avatar/index.js"
@@ -461,6 +469,10 @@
       "types": "./dist/components/RadioGroup/index.d.ts",
       "import": "./dist/components/RadioGroup/index.js"
     },
+    "./components/SankeyChart": {
+      "types": "./dist/components/SankeyChart/index.d.ts",
+      "import": "./dist/components/SankeyChart/index.js"
+    },
     "./components/Select": {
       "types": "./dist/components/Select/index.d.ts",
       "import": "./dist/components/Select/index.js"
@@ -544,6 +556,7 @@
     "@fontsource/fira-code": "^5.2.7",
     "@fontsource/inter": "^5.2.8",
     "@headlessui/react": "^2.2.10",
+    "@langchain/macaw-tokens": "1.0.0-beta.6",
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
     "@lezer/yaml": "^1.0.4",
@@ -585,8 +598,7 @@
     "tailwind-merge": "^2.6",
     "tailwindcss-animate": "^1.0.7",
     "use-debounce": "^9.0.4",
-    "yaml": "^2.8.3",
-    "@langchain/macaw-tokens": "1.0.0-beta.1"
+    "yaml": "^2.8.3"
   },
   "peerDependencies": {
     "react": ">=18.2.0 <20",
@@ -614,6 +626,7 @@
     }
   },
   "scripts": {
-    "build": "node ../../scripts/build.mjs components"
+    "build": "node ../../scripts/build-components.mjs",
+    "storybook": "storybook dev -p 5264"
   }
 }

package/dist/_chunks/LoadingIndicator-DgtU9aqD.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LoadingIndicator-DgtU9aqD.js","names":[],"sources":["../../src/components/ThinkingState/ThinkingState.module.css","../../src/components/ThinkingState/LoadingIndicator.tsx"],"sourcesContent":["/* Adapted from TurboKach/ai-native-react-components (MIT). See NOTICE. */\n.grid {\n  display: inline-grid;\n  grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));\n  gap: 10%;\n}\n\n.pixel {\n  border-radius: 1px;\n  opacity: 0.15;\n  animation: pixel-on var(--loading-cycle) ease-in-out infinite;\n}\n\n.dot {\n  @apply rounded-full;\n}\n\n.inactive {\n  opacity: 0.07;\n  animation: none;\n}\n\n.grid[data-animated='false'] .pixel {\n  animation: none;\n}\n\n.grid[data-animated='false'] .pixel:not(.inactive) {\n  opacity: 0.5;\n}\n\n.shimmer {\n  @apply bg-gradient-to-r from-text-tertiary from-35% via-text-primary via-50% to-text-tertiary to-65% bg-clip-text text-transparent;\n  background-size: 200% 100%;\n  animation: shimmer-text 1.4s linear infinite;\n}\n\n.brandShimmer {\n  @apply via-text-brand-primary to-text-tertiary;\n}\n\n@keyframes pixel-on {\n  0%,\n  100% {\n    opacity: 0.15;\n  }\n  18%,\n  42% {\n    opacity: 1;\n  }\n  62% {\n    opacity: 0.15;\n  }\n}\n\n@keyframes shimmer-text {\n  from {\n    background-position: 150% 50%;\n  }\n  to {\n    background-position: -50% 50%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pixel,\n  .shimmer {\n    animation: none;\n  }\n\n  .pixel:not(.inactive) {\n    opacity: 0.5;\n  }\n  .shimmer {\n    @apply text-secondary;\n    background: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .shimmer {\n    background: none;\n    color: CanvasText;\n  }\n  .pixel {\n    background: CanvasText;\n  }\n}\n","// Adapted from TurboKach/ai-native-react-components (MIT). See NOTICE.\nimport { forwardRef } from 'react';\nimport type { ComponentPropsWithRef, CSSProperties } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { VISUAL_ELEMENT_SIZES } from '../../utils/componentSizes';\n\nimport styles from './ThinkingState.module.css';\n\ntype ThinkingStateVariant = 'drive' | 'dots' | 'orbit';\n\nconst SIZES = {\n  sm: VISUAL_ELEMENT_SIZES.xs.className,\n  md: VISUAL_ELEMENT_SIZES.sm.className,\n  lg: VISUAL_ELEMENT_SIZES.md.className,\n};\n\ninterface LoadingIndicatorProps extends Omit<\n  ComponentPropsWithRef<'span'>,\n  'children'\n> {\n  variant?: ThinkingStateVariant;\n  /** Indicator outer size: sm=16px, md=20px, lg=24px. */\n  size?: keyof typeof SIZES;\n  tone?: 'neutral' | 'brand';\n  /** Reduced-motion preferences always take precedence. */\n  animated?: boolean;\n}\n\nconst CHEVRON_DELAYS = [90, 180, 270, 0, 90, 180, 90, 180, 270];\nconst PATTERNS: Record<\n  ThinkingStateVariant,\n  { delays: (number | null)[]; duration: string }\n> = {\n  drive: { delays: CHEVRON_DELAYS, duration: '650ms' },\n  dots: { delays: CHEVRON_DELAYS, duration: '650ms' },\n  orbit: {\n    delays: [0, 110, 220, 770, null, 330, 660, 550, 440],\n    duration: '950ms',\n  },\n};\n\ninterface IndicatorStyle extends CSSProperties {\n  '--loading-cycle': string;\n}\n\n/** Decorative indicator. Announce loading on the surrounding control or region. */\nconst LoadingIndicator = forwardRef<HTMLSpanElement, LoadingIndicatorProps>(\n  function LoadingIndicator(\n    {\n      variant = 'drive',\n      size = 'sm',\n      tone = 'neutral',\n      animated = true,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) {\n    const pattern = PATTERNS[variant];\n    const indicatorStyle: IndicatorStyle = {\n      '--loading-cycle': pattern.duration,\n      ...style,\n    };\n\n    return (\n      <span\n        {...props}\n        ref={ref}\n        aria-hidden=\"true\"\n        data-animated={animated}\n        className={cn(\n          styles.grid,\n          SIZES[size],\n          'shrink-0',\n          tone === 'brand' ? 'text-icon-brand' : 'text-icon-primary',\n          className\n        )}\n        style={indicatorStyle}\n      >\n        {pattern.delays.map((delay, index) => (\n          <span\n            key={index}\n            className={cn(\n              styles.pixel,\n              'bg-current',\n              variant === 'dots' && styles.dot,\n              delay === null && styles.inactive\n            )}\n            style={{ animationDelay: `${delay ?? 0}ms` }}\n          />\n        ))}\n      </span>\n    );\n  }\n);\n\nexport { LoadingIndicator };\nexport type { LoadingIndicatorProps, ThinkingStateVariant };\n"],"mappings":";;;;;;;;;;;;;;;;ACWA,IAAM,QAAQ;CACZ,IAAI,qBAAqB,GAAG;CAC5B,IAAI,qBAAqB,GAAG;CAC5B,IAAI,qBAAqB,GAAG;AAC9B;AAcA,IAAM,iBAAiB;CAAC;CAAI;CAAK;CAAK;CAAG;CAAI;CAAK;CAAI;CAAK;AAAG;AAC9D,IAAM,WAGF;CACF,OAAO;EAAE,QAAQ;EAAgB,UAAU;CAAQ;CACnD,MAAM;EAAE,QAAQ;EAAgB,UAAU;CAAQ;CAClD,OAAO;EACL,QAAQ;GAAC;GAAG;GAAK;GAAK;GAAK;GAAM;GAAK;GAAK;GAAK;EAAG;EACnD,UAAU;CACZ;AACF;;AAOA,IAAM,mBAAmB,WACvB,SAAS,iBACP,EACE,UAAU,SACV,OAAO,MACP,OAAO,WACP,WAAW,MACX,WACA,OACA,GAAG,SAEL,KACA;CACA,MAAM,UAAU,SAAS;CACzB,MAAM,iBAAiC;EACrC,mBAAmB,QAAQ;EAC3B,GAAG;CACL;CAEA,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,eAAY;EACZ,iBAAe;EACf,WAAW,GACT,6BAAO,MACP,MAAM,OACN,YACA,SAAS,UAAU,oBAAoB,qBACvC,SACF;EACA,OAAO;EAEN,UAAA,QAAQ,OAAO,KAAK,OAAO,UAC1B,oBAAC,QAAD;GAEE,WAAW,GACT,6BAAO,OACP,cACA,YAAY,UAAU,6BAAO,KAC7B,UAAU,QAAQ,6BAAO,QAC3B;GACA,OAAO,EAAE,gBAAgB,GAAG,SAAS,EAAE,IAAI;EAC5C,GARM,KAQN,CACF;CACG,CAAA;AAEV,CACF"}