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

package/dist/markdown-renderer-hBiN_N_-.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-renderer-hBiN_N_-.cjs","sources":["../src/ds/components/MarkdownRenderer/arriving.ts","../src/ds/components/MarkdownRenderer/blocks.ts","../src/ds/components/MarkdownRenderer/table-csv.ts","../src/ds/components/MarkdownRenderer/markdown-table.tsx","../src/ds/components/MarkdownRenderer/table-markdown.ts","../src/ds/components/MarkdownRenderer/use-settled.ts","../src/ds/components/MarkdownRenderer/markdown-renderer.tsx"],"sourcesContent":["import type { ExtraProps } from 'react-markdown';\n\nimport { ARRIVING_CLASS } from '@/ds/tokens';\n\nimport '@/ds/components/Arrival/arrival.css';\n\ntype MarkdownElement = NonNullable<ExtraProps['node']>;\ntype MarkdownChild = MarkdownElement['children'][number];\n\n/** Fades whole: a fence renders through `CodeBlock`, and inline code carries a background. */\nconst UNBROKEN = new Set(['pre', 'code']);\n\nconst wrap = (value: string, arriving: boolean): MarkdownChild => ({\n  type: 'element',\n  tagName: 'span',\n  properties: arriving ? { className: [ARRIVING_CLASS] } : {},\n  children: [{ type: 'text', value }],\n});\n\nfunction markArriving(node: MarkdownElement): void {\n  const classes = node.properties.className;\n\n  node.properties.className = Array.isArray(classes) ? [...classes, ARRIVING_CLASS] : [ARRIVING_CLASS];\n}\n\nfunction rebuild(nodes: MarkdownChild[], arriving: () => boolean): MarkdownChild[] {\n  const out: MarkdownChild[] = [];\n\n  for (const node of nodes) {\n    if (node.type === 'text') {\n      for (const piece of node.value.match(/\\S+|\\s+/g) ?? []) {\n        if (/\\S/.test(piece)) out.push(wrap(piece, arriving()));\n        else out.push({ type: 'text', value: piece });\n      }\n\n      continue;\n    }\n\n    out.push(node);\n\n    if (node.type !== 'element') continue;\n\n    if (!UNBROKEN.has(node.tagName)) node.children = rebuild(node.children, arriving);\n    else if (arriving()) markArriving(node);\n  }\n\n  return out;\n}\n\n/**\n * Gives every word of a block an element of its own, and the entrance class to\n * those past the first `settled` — the words that were not on screen yet when\n * the reader joined this reply.\n *\n * Every word, not just the arriving ones: react-markdown parses afresh on each\n * landing and React matches the children it already mounted by position, so a\n * wrapper that came and went would land where a bare text node used to be and\n * remount half the paragraph, replaying entrances that had long finished.\n * Wrapping the lot keeps every position fixed — a new word only ever appends —\n * and a word never gains the class it did not mount with, so nothing replays.\n */\nexport function rehypeArriving(settled: number) {\n  return function attach() {\n    return (tree: { children: MarkdownChild[] }) => {\n      let word = 0;\n\n      tree.children = rebuild(tree.children, () => word++ >= settled);\n    };\n  };\n}\n","const FENCE_OPEN = /^ {0,3}(`{3,}|~{3,})/;\nconst FENCE_CLOSE = /^ {0,3}(`{3,}|~{3,})[ \\t]*$/;\nconst LIST_ITEM = /^ {0,3}(?:[-*+]|\\d{1,9}[.)])(?:[ \\t]|$)/;\nconst INDENTED = /^(?:\\t| {2,})/;\nconst DEFINITION = /^ {0,3}\\[[^\\]]+\\]:/;\n\nfunction fenceOpenedBy(line: string): string | undefined {\n  return FENCE_OPEN.exec(line)?.[1];\n}\n\n// Both are runs of one character, so `startsWith` is \"same marker, at least as long\".\nfunction closesFence(line: string, marker: string): boolean {\n  return FENCE_CLOSE.exec(line)?.[1]?.startsWith(marker) ?? false;\n}\n\nfunction startsBlock(line: string, inList: boolean): boolean {\n  if (INDENTED.test(line)) return false;\n\n  return !(inList && LIST_ITEM.test(line));\n}\n\n/**\n * Cuts markdown into top-level blocks so a growing reply re-parses its last\n * block instead of all of them. Rejoining the result returns the input, and\n * every block renders as it would have inside the whole.\n *\n * Each rule only ever merges: over-merging costs a re-parse, while cutting a\n * construct in two changes what it renders as. Link reference and footnote\n * definitions resolve across blank lines, which no line-level rule can see, so\n * reaching one outside a fence abandons the split for the whole text.\n */\nexport function splitBlocks(markdown: string): string[] {\n  const lines = markdown.split('\\n');\n  const starts = [0];\n  let fence: string | undefined;\n  let started = false;\n  let broken = false;\n  let inList = false;\n\n  for (const [index, line] of lines.entries()) {\n    if (fence) {\n      if (closesFence(line, fence)) fence = undefined;\n      continue;\n    }\n\n    if (line.trim() === '') {\n      broken = started;\n      continue;\n    }\n\n    if (DEFINITION.test(line)) return [markdown];\n\n    if (broken && startsBlock(line, inList)) {\n      starts.push(index);\n      started = false;\n    }\n\n    if (!started) inList = LIST_ITEM.test(line);\n\n    started = true;\n    broken = false;\n    fence = fenceOpenedBy(line);\n  }\n\n  return starts.map((start, position) => {\n    const end = starts[position + 1];\n    const block = lines.slice(start, end ?? lines.length).join('\\n');\n\n    return end === undefined ? block : `${block}\\n`;\n  });\n}\n","function spreadsheetCell(value: string): string {\n  // Quoting alone does not stop spreadsheet apps from evaluating formulas.\n  const numeric = /^[+-]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:e[+-]?\\d+)?$/i.test(value.trim());\n  const formula = /^[\\s\\uFEFF]*[=+\\-@＝＋－＠]/u.test(value);\n  const controlPrefix = /^[\\t\\r\\n]/.test(value);\n  const safe = controlPrefix || (formula && !numeric) ? `'${value}` : value;\n  return `\"${safe.replaceAll('\"', '\"\"')}\"`;\n}\n\nexport function tableToCsv(rows: string[][]): string {\n  return rows.map(row => row.map(spreadsheetCell).join(',')).join('\\r\\n');\n}\n\nexport function downloadTableCsv(csv: string): void {\n  const blob = new Blob(['\\uFEFF', csv], { type: 'text/csv;charset=utf-8' });\n  const url = URL.createObjectURL(blob);\n  const anchor = document.createElement('a');\n  anchor.href = url;\n  anchor.download = 'table.csv';\n  document.body.appendChild(anchor);\n  anchor.click();\n  anchor.remove();\n  URL.revokeObjectURL(url);\n}\n","import { CheckIcon, ChevronDownIcon, CopyIcon, DownloadIcon } from 'lucide-react';\nimport type { ComponentProps } from 'react';\nimport type { ExtraProps } from 'react-markdown';\nimport { downloadTableCsv } from './table-csv';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\n\nexport function MarkdownTable({ node, children }: ComponentProps<'table'> & ExtraProps) {\n  const markdown = node?.properties.tableMarkdown;\n  const csv = node?.properties.tableCsv;\n  const { isCopied, copyToClipboard } = useCopyToClipboard({ copyMessage: 'Copied table markdown' });\n\n  return (\n    <div className=\"my-3 w-fit max-w-full min-w-0\">\n      <div className=\"flex justify-end\">\n        <ButtonsGroup spacing=\"close\" aria-label=\"Table actions\">\n          <Button\n            type=\"button\"\n            size=\"xs\"\n            variant=\"ghost\"\n            disabled={typeof markdown !== 'string'}\n            onClick={() => {\n              if (typeof markdown === 'string') copyToClipboard(markdown);\n            }}\n            aria-label=\"Copy table as markdown\"\n          >\n            {isCopied ? <CheckIcon /> : <CopyIcon />}\n            {isCopied ? 'Copied!' : 'Copy table as markdown'}\n          </Button>\n          <DropdownMenu>\n            <DropdownMenu.Trigger\n              disabled={typeof csv !== 'string'}\n              render={\n                <Button type=\"button\" size=\"icon-xs\" variant=\"ghost\" aria-label=\"More table options\">\n                  <ChevronDownIcon />\n                </Button>\n              }\n            />\n            <DropdownMenu.Content align=\"end\" size=\"sm\" className=\"w-max min-w-0\">\n              <DropdownMenu.Item\n                size=\"sm\"\n                onClick={() => {\n                  if (typeof csv === 'string') downloadTableCsv(csv);\n                }}\n              >\n                <DownloadIcon />\n                Download CSV\n              </DropdownMenu.Item>\n            </DropdownMenu.Content>\n          </DropdownMenu>\n        </ButtonsGroup>\n      </div>\n      <div className=\"max-w-full overflow-x-auto\">\n        <table className=\"table min-w-full\">{children}</table>\n      </div>\n    </div>\n  );\n}\n","import type { Definition, FootnoteDefinition, Nodes, Root, Table } from 'mdast';\nimport { gfmToMarkdown } from 'mdast-util-gfm';\nimport { toMarkdown } from 'mdast-util-to-markdown';\nimport { tableToCsv } from './table-csv';\n\nfunction cellText(node: Nodes): string {\n  if (node.type === 'footnoteReference') return `[^${node.label ?? node.identifier}]`;\n  if ('value' in node) return node.value;\n  if (node.type === 'image' || node.type === 'imageReference') return node.alt ?? '';\n  return 'children' in node ? node.children.map(cellText).join('') : '';\n}\n\nfunction walk(node: Nodes, visit: (node: Nodes) => void): void {\n  visit(node);\n  if ('children' in node) node.children.forEach(child => walk(child, visit));\n}\n\nconst SERIALIZE_OPTIONS = { extensions: [gfmToMarkdown()] };\n\n/** Capture table exports before rehype replaces text with animation spans. */\nexport function remarkTableMarkdown() {\n  return (tree: Root, file: { value: unknown }) => {\n    const source = String(file.value);\n    const definitions = new Map<string, Definition | FootnoteDefinition>();\n    const tables: Table[] = [];\n    walk(tree, node => {\n      if (node.type === 'definition' || node.type === 'footnoteDefinition') {\n        const key = `${node.type}:${node.identifier}`;\n        if (!definitions.has(key)) definitions.set(key, node);\n      }\n      if (node.type === 'table') tables.push(node);\n    });\n\n    const lines = source.split(/\\r\\n|\\r|\\n/);\n    for (const table of tables) {\n      const header = table.children[0];\n      if (!header?.position) continue;\n      const rows = table.children.map(row => {\n        const start = row.position?.start.offset;\n        const end = row.position?.end.offset;\n        return start === undefined || end === undefined ? undefined : source.slice(start, end);\n      });\n      // Only offer exports when the parser supplied the original row locations.\n      if (!rows.every(row => row !== undefined)) continue;\n      // Row positions exclude list/blockquote prefixes. The delimiter has no AST node.\n      const delimiter = lines[header.position.start.line]?.replace(/^[\\t >]*/, '');\n      if (delimiter === undefined) continue;\n      const markdown = [rows[0], delimiter, ...rows.slice(1)];\n      const used = new Set<string>();\n      const collectReference = (node: Nodes) => {\n        if (node.type === 'linkReference' || node.type === 'imageReference') {\n          used.add(`definition:${node.identifier}`);\n        } else if (node.type === 'footnoteReference') {\n          used.add(`footnoteDefinition:${node.identifier}`);\n        }\n      };\n      walk(table, collectReference);\n      // Visiting appended definitions also collects links/footnotes they depend on.\n      // The set prevents duplicates and cycles, including self-referencing footnotes.\n      for (const key of used) {\n        const definition = definitions.get(key);\n        if (!definition) continue;\n        markdown.push('', toMarkdown(definition, SERIALIZE_OPTIONS).trimEnd());\n        walk(definition, collectReference);\n      }\n      const cells = table.children.map(row =>\n        Array.from({ length: header.children.length }, (_, index) => {\n          const cell = row.children[index];\n          return cell ? cellText(cell) : '';\n        }),\n      );\n      table.data = {\n        ...table.data,\n        hProperties: {\n          ...table.data?.hProperties,\n          tableMarkdown: markdown.join('\\n'),\n          tableCsv: tableToCsv(cells),\n        },\n      };\n    }\n  };\n}\n","import { useEffect, useRef, useState } from 'react';\n\nimport { useWatched } from '@/ds/components/Arrival';\nimport { ARRIVING_MS } from '@/ds/tokens';\n\ninterface Landing {\n  words: number;\n  at: number;\n}\n\n/**\n * How many of a reply's words have been on screen long enough that their entrance is over.\n *\n * The entrance plays on whatever mounts carrying the class, so it replays every time a\n * word's element is rebuilt — and markdown rebuilds a growing tail constantly: a `-`\n * turns a paragraph into a list item, a closing `**` splits it around a `<strong>`, the\n * stream ends and the mend comes off. Each of those swaps the element a settled word\n * lives in, which is what makes a word already read fade in again.\n *\n * Ageing them out is the whole answer: a word carries the class only while it is new,\n * so however often the tail is rebuilt, only what is genuinely arriving animates.\n *\n * What counts as new at mount is not this hook's call. A reply the reader was handed\n * is already there, and a block that mounts complete — a card's output, an expanded\n * body — enters with its container. Only a passage born streaming under the reader's\n * eyes is new from its first word: the reveal often lands several words in its first\n * commit, and they enter like every word after them.\n */\nexport function useSettledWords(words: number, streaming: boolean): number {\n  const watched = useWatched();\n  const [settled, setSettled] = useState(() => (watched && streaming ? 0 : words));\n  const landings = useRef<Landing[]>([]);\n  const recorded = useRef(settled);\n\n  useEffect(() => {\n    if (recorded.current !== words) {\n      landings.current.push({ words, at: performance.now() });\n      recorded.current = words;\n    }\n\n    const waiting = landings.current[0];\n    if (!waiting) return;\n\n    const timer = setTimeout(\n      () => {\n        landings.current.shift();\n        setSettled(waiting.words);\n      },\n      Math.max(0, waiting.at + ARRIVING_MS - performance.now()),\n    );\n\n    return () => clearTimeout(timer);\n  }, [settled, words]);\n\n  // A shorter reply replacing the one on screen settles at once: nothing of it is new.\n  return Math.min(settled, words);\n}\n","import { memo, useMemo } from 'react';\nimport type { MouseEvent, MouseEventHandler, ReactNode } from 'react';\nimport Markdown from 'react-markdown';\nimport type { Components, ExtraProps, Options } from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport remend from 'remend';\n\nimport { rehypeArriving } from './arriving';\nimport { splitBlocks } from './blocks';\nimport { MarkdownTable } from './markdown-table';\nimport { remarkTableMarkdown } from './table-markdown';\nimport { useSettledWords } from './use-settled';\nimport { CodeBlock } from '@/ds/components/CodeBlock';\nimport { cn } from '@/lib/utils';\n\nimport './markdown-renderer.css';\n\nexport type MarkdownExternalLinkTarget = 'tab' | 'window';\n\nexport interface MarkdownRendererProps {\n  children: string;\n  className?: string;\n  externalLinkTarget?: MarkdownExternalLinkTarget;\n  /** The text is a prefix of one still being written: close the markers the stream has not reached. */\n  streaming?: boolean;\n  /** Opt in to table copy/download controls; disabled while this text is streaming. */\n  tableActions?: boolean;\n}\n\n/**\n * Renders a markdown string. Agent output can carry attacker-influenced text\n * (file contents, tool output, web pages): react-markdown escapes raw HTML and\n * drops dangerous link schemes, so nothing here reaches the DOM as markup.\n *\n * react-markdown re-parses on every render, and a streaming reply re-renders\n * its whole transcript on every delta. Memoizing spares the settled messages;\n * rendering block by block — streaming or not — spares every block of the live\n * one but the last, and lets a reply settle without remounting what is already\n * on screen.\n *\n * The text is drawn as given: pacing a stream is `useRevealedText`, and belongs to\n * whoever owns the whole of what is being laid down — a reply is prose, tool rows\n * and cards, and they have to arrive in the order they were written. Only what\n * lands after the reader joined plays an entrance, and only while it is still new:\n * a reply opened part-written is already there, and fading in what someone is\n * halfway through reading would be both a lie and a screenful of animations at\n * once.\n */\nexport const MarkdownRenderer = memo(function MarkdownRenderer({\n  children,\n  className,\n  externalLinkTarget = 'tab',\n  streaming = false,\n  tableActions = false,\n}: MarkdownRendererProps) {\n  const shown = decodeEscapedNewlines(children);\n  const blocks = useMemo(() => splitBlocks(shown), [shown]);\n  const last = blocks.length - 1;\n  const components = (tableActions ? TABLE_COMPONENTS : DEFAULT_COMPONENTS)[externalLinkTarget];\n\n  const spans = wordSpans(blocks);\n  const settled = useSettledWords(spans.at(-1)?.end ?? 0, streaming);\n\n  // A block whose words have all finished their entrance has nothing left to play,\n  // which is what `undefined` says: leave it as plain text, no spans at all.\n  const settledWords = (span: WordSpan | undefined): number | undefined =>\n    !span || settled >= span.end ? undefined : Math.max(0, settled - span.start);\n\n  const tail = blocks[last] ?? '';\n  const mended = useMemo(() => (streaming ? remend(tail, REMEND_OPTIONS) : tail), [streaming, tail]);\n\n  return (\n    <div className={cn('mastra-markdown', className)}>\n      {blocks.map((block, index) => (\n        <MarkdownBlock\n          key={index}\n          content={index === last ? mended : block}\n          settledWords={settledWords(spans[index])}\n          components={components}\n          streaming={streaming}\n          tableActions={tableActions}\n        />\n      ))}\n    </div>\n  );\n});\n\n/** Keyed by position at the call site: a content key remounts on every character. */\nconst MarkdownBlock = memo(function MarkdownBlock({\n  components,\n  content,\n  settledWords,\n  streaming,\n  tableActions,\n}: {\n  components: Components;\n  content: string;\n  settledWords?: number;\n  streaming: boolean;\n  tableActions: boolean;\n}) {\n  const rehypePlugins = useMemo(\n    () => (settledWords === undefined ? SETTLED : [rehypeArriving(settledWords)]),\n    [settledWords],\n  );\n\n  return (\n    <Markdown\n      remarkPlugins={tableActions && !streaming ? COPYABLE_REMARK_PLUGINS : REMARK_PLUGINS}\n      rehypePlugins={rehypePlugins}\n      components={components}\n    >\n      {content}\n    </Markdown>\n  );\n});\n\nconst SETTLED: Options['rehypePlugins'] = [];\n\ninterface WordSpan {\n  start: number;\n  end: number;\n}\n\n/**\n * Where each block's words fall in the reply's own count, so one settled count covers\n * them all. Counting the source counts its markers too, so the boundary only ever errs\n * towards leaving a word unanimated.\n */\nfunction wordSpans(blocks: string[]): WordSpan[] {\n  let read = 0;\n\n  return blocks.map(block => {\n    const span = { start: read, end: read + countWords(block) };\n    read = span.end;\n\n    return span;\n  });\n}\n\nfunction countWords(text: string): number {\n  return text.match(/\\S+/g)?.length ?? 0;\n}\n\n// Agent networks emit their text with literal `\\n`. Only unescape when the text\n// has no real newline, otherwise a `\"a\\nb\"` inside a code fence gets shredded.\nfunction decodeEscapedNewlines(text: string): string {\n  return text.includes('\\n') ? text : text.replace(/\\\\n/g, '\\n');\n}\n\ntype MarkdownNode = NonNullable<ExtraProps['node']>;\n\nfunction languageOf(node: MarkdownNode): string | undefined {\n  const classNames = node.properties.className;\n  if (!Array.isArray(classNames)) return undefined;\n\n  const language = classNames.find(entry => typeof entry === 'string' && entry.startsWith('language-'));\n  return typeof language === 'string' ? language.slice('language-'.length) : undefined;\n}\n\nfunction fencedCode(node: MarkdownNode | undefined): { code: string; language?: string } | undefined {\n  const child = node?.children.find(entry => entry.type === 'element' && entry.tagName === 'code');\n  if (child?.type !== 'element') return undefined;\n\n  const code = child.children.map(entry => (entry.type === 'text' ? entry.value : '')).join('');\n  return { code: code.replace(/\\n$/, ''), language: languageOf(child) };\n}\n\nfunction MarkdownCodeBlock({\n  node,\n  children,\n  className,\n}: {\n  node?: MarkdownNode;\n  children?: ReactNode;\n  className?: string;\n}) {\n  const fenced = fencedCode(node);\n  if (!fenced) return <pre className={className}>{children}</pre>;\n\n  return (\n    <CodeBlock\n      code={fenced.code}\n      lang={fenced.language}\n      overflow=\"scroll\"\n      className={cn('my-3 bg-surface1', className)}\n      copyMessage=\"Copied code to clipboard\"\n    />\n  );\n}\n\nconst POPUP_WINDOW_FEATURES = 'popup=yes,width=720,height=800,resizable=yes,scrollbars=yes';\n\nfunction isPlainLeftClick(event: MouseEvent): boolean {\n  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;\n}\n\nfunction markdownLink(externalLinkTarget: MarkdownExternalLinkTarget): NonNullable<Components['a']> {\n  return function MarkdownLink({ href, title, children }) {\n    const isExternal = /^https?:\\/\\//i.test(href ?? '');\n\n    const openInPopup: MouseEventHandler<HTMLAnchorElement> = event => {\n      if (!isExternal || externalLinkTarget !== 'window' || !isPlainLeftClick(event)) return;\n\n      const popup = window.open(href, '_blank', POPUP_WINDOW_FEATURES);\n      if (!popup) return;\n\n      popup.opener = null;\n      event.preventDefault();\n    };\n\n    return (\n      <a\n        href={href}\n        title={title}\n        onClick={openInPopup}\n        target={isExternal ? '_blank' : undefined}\n        rel={isExternal ? 'noopener noreferrer' : undefined}\n      >\n        {children}\n      </a>\n    );\n  };\n}\n\nconst REMARK_PLUGINS = [remarkGfm];\nconst COPYABLE_REMARK_PLUGINS = [remarkGfm, remarkTableMarkdown];\n\n// Links stay text until their URL lands: remend's placeholder href would render\n// a live anchor to nowhere. No math is rendered here, so pairing `$$` would only\n// turn one literal into another.\nconst REMEND_OPTIONS = { katex: false, linkMode: 'text-only' } as const;\n\n// Elements are listed one by one: react-markdown also passes its `node`, which\n// React would forward to the DOM as a stray attribute. Everything else is\n// styled from markdown-renderer.css.\nconst COMPONENTS: Components = {\n  pre: MarkdownCodeBlock,\n  a: markdownLink('tab'),\n};\n\nconst WINDOW_COMPONENTS: Components = {\n  ...COMPONENTS,\n  a: markdownLink('window'),\n};\n\nconst DEFAULT_COMPONENTS = { tab: COMPONENTS, window: WINDOW_COMPONENTS };\nconst TABLE_COMPONENTS = {\n  tab: { ...COMPONENTS, table: MarkdownTable },\n  window: { ...WINDOW_COMPONENTS, table: MarkdownTable },\n};\n"],"names":["ARRIVING_CLASS","useCopyToClipboard","jsxs","jsx","ButtonsGroup","Button","CheckIcon","CopyIcon","DropdownMenu","ChevronDownIcon","DownloadIcon","gfmToMarkdown","toMarkdown","useWatched","useState","useRef","useEffect","ARRIVING_MS","memo","MarkdownRenderer","useMemo","cn","MarkdownBlock","CodeBlock"],"mappings":"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"}

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

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('../../cn-DnbTIGXa.cjs');
+
+function AppShell({
+  children,
+  className,
+  mainLabel,
+  mobileHeader,
+  ref,
+  renderFrame,
+  routeHeader,
+  ...props
+}) {
+  const frame = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "app-shell-frame",
+      className: utils_cn.cn(
+        "relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame border border-border1 bg-surface2 shadow-main-frame lg:m-2 lg:ml-0",
+        routeHeader ? "grid-rows-[auto_1fr]" : "grid-rows-[1fr]"
+      ),
+      children: [
+        routeHeader,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "app-shell-main",
+            "aria-label": mainLabel,
+            role: "group",
+            tabIndex: 0,
+            className: "min-h-0 overflow-y-auto",
+            children
+          }
+        )
+      ]
+    }
+  );
+  const frameProps = {
+    children: frame,
+    className: "flex min-h-0 flex-1 flex-col"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, "data-slot": "app-shell", className: utils_cn.cn("flex h-full min-h-0 flex-col", className), ...props, children: [
+    mobileHeader,
+    renderFrame ? renderFrame(frameProps) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: frameProps.className, children: frame })
+  ] });
+}
+
+exports.AppShell = AppShell;
+//# sourceMappingURL=app-shell.cjs.js.map

package/dist/new/layout/app-shell.cjs.js.map

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

package/dist/new/layout/app-shell.d.ts

@@ -0,0 +1,2 @@
+export * from '../../src/ds/new/layout/app-shell/index'
+export {}

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

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { c as cn } from '../../cn-ByEbywDh.js';
+
+function AppShell({
+  children,
+  className,
+  mainLabel,
+  mobileHeader,
+  ref,
+  renderFrame,
+  routeHeader,
+  ...props
+}) {
+  const frame = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "app-shell-frame",
+      className: cn(
+        "relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame border border-border1 bg-surface2 shadow-main-frame lg:m-2 lg:ml-0",
+        routeHeader ? "grid-rows-[auto_1fr]" : "grid-rows-[1fr]"
+      ),
+      children: [
+        routeHeader,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "app-shell-main",
+            "aria-label": mainLabel,
+            role: "group",
+            tabIndex: 0,
+            className: "min-h-0 overflow-y-auto",
+            children
+          }
+        )
+      ]
+    }
+  );
+  const frameProps = {
+    children: frame,
+    className: "flex min-h-0 flex-1 flex-col"
+  };
+  return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "app-shell", className: cn("flex h-full min-h-0 flex-col", className), ...props, children: [
+    mobileHeader,
+    renderFrame ? renderFrame(frameProps) : /* @__PURE__ */ jsx("div", { className: frameProps.className, children: frame })
+  ] });
+}
+
+export { AppShell };
+//# sourceMappingURL=app-shell.es.js.map

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

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

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

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

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

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

package/dist/{page-header-ComQfwIQ.js → page-header-CGRV1f_f.js}

@@ -6,7 +6,7 @@ function PageHeaderAction({ className, ...props }) {
     "div",
     {
       "data-slot": "page-header-action",
-      className: cn("col-start-3 row-start-1 justify-self-end", className),
+      className: cn("col-start-[action] row-start-1 justify-self-end", className),
       ...props
     }
   );
@@ -18,7 +18,7 @@ function PageHeaderDescription({ children, className, isLoading, ...props }) {
     {
       "data-slot": "page-header-description",
       className: cn(
-        "max-w-140 col-span-3 col-start-1 flex flex-wrap gap-x-4 gap-y-1 text-ui-sm text-neutral2",
+        "max-w-140 col-[title/end] flex flex-wrap gap-x-4 gap-y-1 text-ui-sm text-neutral3",
         isLoading && "w-160 max-w-[80%] animate-pulse rounded-md bg-surface4",
         className
       ),
@@ -34,7 +34,7 @@ function PageHeaderIcon({ className, ...props }) {
     {
       "data-slot": "page-header-icon",
       className: cn(
-        "absolute top-1/2 right-full col-start-1 row-start-1 row-end-2 mr-2 flex -translate-y-1/2 items-center text-neutral3 [&>svg]:size-6",
+        "col-start-[icon] row-start-1 flex items-center self-center text-neutral3 [&>svg]:size-6",
         className
       ),
       ...props
@@ -50,7 +50,7 @@ function PageHeaderMeta({ beside = false, className, ...props }) {
       "data-placement": beside ? "beside" : "below",
       className: cn(
         "flex min-w-0 flex-wrap items-center gap-2",
-        beside ? "col-start-2 row-start-1 self-center justify-self-start" : "col-span-3 col-start-1",
+        beside ? "col-start-[meta] row-start-1 self-center justify-self-start" : "col-[title/end]",
         className
       ),
       ...props
@@ -72,7 +72,7 @@ function PageHeaderTitle({ children, className, isLoading, size = "md", ...props
     {
       "data-slot": "page-header-title",
       className: cn(
-        "col-start-1 row-start-1 flex min-w-0 items-center gap-2 font-medium text-neutral4 [&>svg]:size-[1.25em] [&>svg]:opacity-50",
+        "col-start-[title] row-start-1 flex min-w-0 items-center gap-2 font-medium text-neutral4 [&>svg]:size-[1.25em] [&>svg]:opacity-50",
         titleSizeClasses[size],
         isLoading && "w-60 max-w-[50%] animate-pulse rounded-md bg-surface4",
         className
@@ -96,7 +96,11 @@ function PageHeaderRoot({
   return /* @__PURE__ */ jsx(
     "header",
     {
-      className: cn("relative grid w-full grid-cols-[auto_minmax(0,1fr)_auto] gap-x-3 gap-y-1", className),
+      className: cn(
+        "relative grid w-full grid-cols-[[title]_auto_[meta]_minmax(0,1fr)_[action]_auto_[end]] gap-x-3 gap-y-1",
+        "has-[>[data-slot=page-header-icon]]:grid-cols-[[icon]_auto_[title]_auto_[meta]_minmax(0,1fr)_[action]_auto_[end]]",
+        className
+      ),
       ...props,
       children: useLegacyApi ? /* @__PURE__ */ jsxs(Fragment, { children: [
         !isLoading && icon !== void 0 && /* @__PURE__ */ jsx(PageHeaderIcon, { children: icon }),
@@ -116,4 +120,4 @@ const PageHeader = Object.assign(PageHeaderRoot, {
 });
 
 export { PageHeader as P };
-//# sourceMappingURL=page-header-ComQfwIQ.js.map
+//# sourceMappingURL=page-header-CGRV1f_f.js.map

package/dist/page-header-CGRV1f_f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-CGRV1f_f.js","sources":["../src/ds/new/layout/page-header/page-header-action.tsx","../src/ds/new/layout/page-header/page-header-description.tsx","../src/ds/new/layout/page-header/page-header-icon.tsx","../src/ds/new/layout/page-header/page-header-meta.tsx","../src/ds/new/layout/page-header/page-header-title.tsx","../src/ds/new/layout/page-header/page-header-root.tsx","../src/ds/new/layout/page-header/page-header.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderActionProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderAction({ className, ...props }: PageHeaderActionProps) {\n  return (\n    <div\n      data-slot=\"page-header-action\"\n      className={cn('col-start-[action] row-start-1 justify-self-end', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderDescriptionProps extends ComponentPropsWithoutRef<'p'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderDescription({ children, className, isLoading, ...props }: PageHeaderDescriptionProps) {\n  return (\n    <p\n      data-slot=\"page-header-description\"\n      className={cn(\n        'max-w-140 col-[title/end] flex flex-wrap gap-x-4 gap-y-1 text-ui-sm text-neutral3',\n        isLoading && 'w-160 max-w-[80%] animate-pulse rounded-md bg-surface4',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </p>\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderIconProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderIcon({ className, ...props }: PageHeaderIconProps) {\n  return (\n    <div\n      data-slot=\"page-header-icon\"\n      className={cn(\n        'col-start-[icon] row-start-1 flex items-center self-center text-neutral3 [&>svg]:size-6',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderMetaProps extends ComponentPropsWithoutRef<'div'> {\n  beside?: boolean;\n}\n\nexport function PageHeaderMeta({ beside = false, className, ...props }: PageHeaderMetaProps) {\n  return (\n    <div\n      data-slot=\"page-header-meta\"\n      data-placement={beside ? 'beside' : 'below'}\n      className={cn(\n        'flex min-w-0 flex-wrap items-center gap-2',\n        beside ? 'col-start-[meta] row-start-1 self-center justify-self-start' : 'col-[title/end]',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderTitleSize = 'sm' | 'md' | 'lg' | 'xl' | 'smaller' | 'default';\n\nexport interface PageHeaderTitleProps extends ComponentPropsWithoutRef<'h1'> {\n  isLoading?: boolean;\n  size?: PageHeaderTitleSize;\n}\n\nconst titleSizeClasses: Record<PageHeaderTitleSize, string> = {\n  sm: 'text-header-sm',\n  md: 'text-header-md',\n  lg: 'text-header-lg',\n  xl: 'text-header-xl',\n  smaller: 'text-header-sm',\n  default: 'text-header-md',\n};\n\nexport function PageHeaderTitle({ children, className, isLoading, size = 'md', ...props }: PageHeaderTitleProps) {\n  return (\n    <h1\n      data-slot=\"page-header-title\"\n      className={cn(\n        'col-start-[title] row-start-1 flex min-w-0 items-center gap-2 font-medium text-neutral4 [&>svg]:size-[1.25em] [&>svg]:opacity-50',\n        titleSizeClasses[size],\n        isLoading && 'w-60 max-w-[50%] animate-pulse rounded-md bg-surface4',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </h1>\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderTitle } from './page-header-title';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderRootProps extends Omit<ComponentPropsWithoutRef<'header'>, 'title'> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  isLoading?: boolean;\n}\n\nexport function PageHeaderRoot({\n  children,\n  className,\n  title,\n  description,\n  icon,\n  isLoading,\n  ...props\n}: PageHeaderRootProps) {\n  const useLegacyApi = children === undefined && title !== undefined;\n\n  return (\n    <header\n      className={cn(\n        'relative grid w-full grid-cols-[[title]_auto_[meta]_minmax(0,1fr)_[action]_auto_[end]] gap-x-3 gap-y-1',\n        'has-[>[data-slot=page-header-icon]]:grid-cols-[[icon]_auto_[title]_auto_[meta]_minmax(0,1fr)_[action]_auto_[end]]',\n        className,\n      )}\n      {...props}\n    >\n      {useLegacyApi ? (\n        <>\n          {!isLoading && icon !== undefined && <PageHeaderIcon>{icon}</PageHeaderIcon>}\n          <PageHeaderTitle isLoading={isLoading}>{title}</PageHeaderTitle>\n          {description !== undefined && (\n            <PageHeaderDescription isLoading={isLoading}>{description}</PageHeaderDescription>\n          )}\n        </>\n      ) : (\n        children\n      )}\n    </header>\n  );\n}\n","import { PageHeaderAction } from './page-header-action';\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport { PageHeaderRoot } from './page-header-root';\nimport { PageHeaderTitle } from './page-header-title';\n\nexport type { PageHeaderActionProps } from './page-header-action';\nexport type { PageHeaderDescriptionProps } from './page-header-description';\nexport type { PageHeaderIconProps } from './page-header-icon';\nexport type { PageHeaderMetaProps } from './page-header-meta';\nexport type { PageHeaderRootProps } from './page-header-root';\nexport type { PageHeaderTitleProps, PageHeaderTitleSize } from './page-header-title';\n\nexport const PageHeader = Object.assign(PageHeaderRoot, {\n  Icon: PageHeaderIcon,\n  Title: PageHeaderTitle,\n  Meta: PageHeaderMeta,\n  Description: PageHeaderDescription,\n  Action: PageHeaderAction,\n});\n"],"names":[],"mappings":"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"}

package/dist/{page-header-hRxyKAlN.cjs → page-header-CTdBcOWK.cjs}

@@ -8,7 +8,7 @@ function PageHeaderAction({ className, ...props }) {
     "div",
     {
       "data-slot": "page-header-action",
-      className: utils_cn.cn("col-start-3 row-start-1 justify-self-end", className),
+      className: utils_cn.cn("col-start-[action] row-start-1 justify-self-end", className),
       ...props
     }
   );
@@ -20,7 +20,7 @@ function PageHeaderDescription({ children, className, isLoading, ...props }) {
     {
       "data-slot": "page-header-description",
       className: utils_cn.cn(
-        "max-w-140 col-span-3 col-start-1 flex flex-wrap gap-x-4 gap-y-1 text-ui-sm text-neutral2",
+        "max-w-140 col-[title/end] flex flex-wrap gap-x-4 gap-y-1 text-ui-sm text-neutral3",
         isLoading && "w-160 max-w-[80%] animate-pulse rounded-md bg-surface4",
         className
       ),
@@ -36,7 +36,7 @@ function PageHeaderIcon({ className, ...props }) {
     {
       "data-slot": "page-header-icon",
       className: utils_cn.cn(
-        "absolute top-1/2 right-full col-start-1 row-start-1 row-end-2 mr-2 flex -translate-y-1/2 items-center text-neutral3 [&>svg]:size-6",
+        "col-start-[icon] row-start-1 flex items-center self-center text-neutral3 [&>svg]:size-6",
         className
       ),
       ...props
@@ -52,7 +52,7 @@ function PageHeaderMeta({ beside = false, className, ...props }) {
       "data-placement": beside ? "beside" : "below",
       className: utils_cn.cn(
         "flex min-w-0 flex-wrap items-center gap-2",
-        beside ? "col-start-2 row-start-1 self-center justify-self-start" : "col-span-3 col-start-1",
+        beside ? "col-start-[meta] row-start-1 self-center justify-self-start" : "col-[title/end]",
         className
       ),
       ...props
@@ -74,7 +74,7 @@ function PageHeaderTitle({ children, className, isLoading, size = "md", ...props
     {
       "data-slot": "page-header-title",
       className: utils_cn.cn(
-        "col-start-1 row-start-1 flex min-w-0 items-center gap-2 font-medium text-neutral4 [&>svg]:size-[1.25em] [&>svg]:opacity-50",
+        "col-start-[title] row-start-1 flex min-w-0 items-center gap-2 font-medium text-neutral4 [&>svg]:size-[1.25em] [&>svg]:opacity-50",
         titleSizeClasses[size],
         isLoading && "w-60 max-w-[50%] animate-pulse rounded-md bg-surface4",
         className
@@ -98,7 +98,11 @@ function PageHeaderRoot({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "header",
     {
-      className: utils_cn.cn("relative grid w-full grid-cols-[auto_minmax(0,1fr)_auto] gap-x-3 gap-y-1", className),
+      className: utils_cn.cn(
+        "relative grid w-full grid-cols-[[title]_auto_[meta]_minmax(0,1fr)_[action]_auto_[end]] gap-x-3 gap-y-1",
+        "has-[>[data-slot=page-header-icon]]:grid-cols-[[icon]_auto_[title]_auto_[meta]_minmax(0,1fr)_[action]_auto_[end]]",
+        className
+      ),
       ...props,
       children: useLegacyApi ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         !isLoading && icon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(PageHeaderIcon, { children: icon }),
@@ -118,4 +122,4 @@ const PageHeader = Object.assign(PageHeaderRoot, {
 });
 
 exports.PageHeader = PageHeader;
-//# sourceMappingURL=page-header-hRxyKAlN.cjs.map
+//# sourceMappingURL=page-header-CTdBcOWK.cjs.map

package/dist/page-header-CTdBcOWK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-CTdBcOWK.cjs","sources":["../src/ds/new/layout/page-header/page-header-action.tsx","../src/ds/new/layout/page-header/page-header-description.tsx","../src/ds/new/layout/page-header/page-header-icon.tsx","../src/ds/new/layout/page-header/page-header-meta.tsx","../src/ds/new/layout/page-header/page-header-title.tsx","../src/ds/new/layout/page-header/page-header-root.tsx","../src/ds/new/layout/page-header/page-header.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderActionProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderAction({ className, ...props }: PageHeaderActionProps) {\n  return (\n    <div\n      data-slot=\"page-header-action\"\n      className={cn('col-start-[action] row-start-1 justify-self-end', className)}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderDescriptionProps extends ComponentPropsWithoutRef<'p'> {\n  isLoading?: boolean;\n}\n\nexport function PageHeaderDescription({ children, className, isLoading, ...props }: PageHeaderDescriptionProps) {\n  return (\n    <p\n      data-slot=\"page-header-description\"\n      className={cn(\n        'max-w-140 col-[title/end] flex flex-wrap gap-x-4 gap-y-1 text-ui-sm text-neutral3',\n        isLoading && 'w-160 max-w-[80%] animate-pulse rounded-md bg-surface4',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </p>\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderIconProps = ComponentPropsWithoutRef<'div'>;\n\nexport function PageHeaderIcon({ className, ...props }: PageHeaderIconProps) {\n  return (\n    <div\n      data-slot=\"page-header-icon\"\n      className={cn(\n        'col-start-[icon] row-start-1 flex items-center self-center text-neutral3 [&>svg]:size-6',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderMetaProps extends ComponentPropsWithoutRef<'div'> {\n  beside?: boolean;\n}\n\nexport function PageHeaderMeta({ beside = false, className, ...props }: PageHeaderMetaProps) {\n  return (\n    <div\n      data-slot=\"page-header-meta\"\n      data-placement={beside ? 'beside' : 'below'}\n      className={cn(\n        'flex min-w-0 flex-wrap items-center gap-2',\n        beside ? 'col-start-[meta] row-start-1 self-center justify-self-start' : 'col-[title/end]',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type PageHeaderTitleSize = 'sm' | 'md' | 'lg' | 'xl' | 'smaller' | 'default';\n\nexport interface PageHeaderTitleProps extends ComponentPropsWithoutRef<'h1'> {\n  isLoading?: boolean;\n  size?: PageHeaderTitleSize;\n}\n\nconst titleSizeClasses: Record<PageHeaderTitleSize, string> = {\n  sm: 'text-header-sm',\n  md: 'text-header-md',\n  lg: 'text-header-lg',\n  xl: 'text-header-xl',\n  smaller: 'text-header-sm',\n  default: 'text-header-md',\n};\n\nexport function PageHeaderTitle({ children, className, isLoading, size = 'md', ...props }: PageHeaderTitleProps) {\n  return (\n    <h1\n      data-slot=\"page-header-title\"\n      className={cn(\n        'col-start-[title] row-start-1 flex min-w-0 items-center gap-2 font-medium text-neutral4 [&>svg]:size-[1.25em] [&>svg]:opacity-50',\n        titleSizeClasses[size],\n        isLoading && 'w-60 max-w-[50%] animate-pulse rounded-md bg-surface4',\n        className,\n      )}\n      {...props}\n    >\n      {isLoading ? <>&nbsp;</> : children}\n    </h1>\n  );\n}\n","import type { ComponentPropsWithoutRef } from 'react';\n\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderTitle } from './page-header-title';\nimport { cn } from '@/lib/utils';\n\nexport interface PageHeaderRootProps extends Omit<ComponentPropsWithoutRef<'header'>, 'title'> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  isLoading?: boolean;\n}\n\nexport function PageHeaderRoot({\n  children,\n  className,\n  title,\n  description,\n  icon,\n  isLoading,\n  ...props\n}: PageHeaderRootProps) {\n  const useLegacyApi = children === undefined && title !== undefined;\n\n  return (\n    <header\n      className={cn(\n        'relative grid w-full grid-cols-[[title]_auto_[meta]_minmax(0,1fr)_[action]_auto_[end]] gap-x-3 gap-y-1',\n        'has-[>[data-slot=page-header-icon]]:grid-cols-[[icon]_auto_[title]_auto_[meta]_minmax(0,1fr)_[action]_auto_[end]]',\n        className,\n      )}\n      {...props}\n    >\n      {useLegacyApi ? (\n        <>\n          {!isLoading && icon !== undefined && <PageHeaderIcon>{icon}</PageHeaderIcon>}\n          <PageHeaderTitle isLoading={isLoading}>{title}</PageHeaderTitle>\n          {description !== undefined && (\n            <PageHeaderDescription isLoading={isLoading}>{description}</PageHeaderDescription>\n          )}\n        </>\n      ) : (\n        children\n      )}\n    </header>\n  );\n}\n","import { PageHeaderAction } from './page-header-action';\nimport { PageHeaderDescription } from './page-header-description';\nimport { PageHeaderIcon } from './page-header-icon';\nimport { PageHeaderMeta } from './page-header-meta';\nimport { PageHeaderRoot } from './page-header-root';\nimport { PageHeaderTitle } from './page-header-title';\n\nexport type { PageHeaderActionProps } from './page-header-action';\nexport type { PageHeaderDescriptionProps } from './page-header-description';\nexport type { PageHeaderIconProps } from './page-header-icon';\nexport type { PageHeaderMetaProps } from './page-header-meta';\nexport type { PageHeaderRootProps } from './page-header-root';\nexport type { PageHeaderTitleProps, PageHeaderTitleSize } from './page-header-title';\n\nexport const PageHeader = Object.assign(PageHeaderRoot, {\n  Icon: PageHeaderIcon,\n  Title: PageHeaderTitle,\n  Meta: PageHeaderMeta,\n  Description: PageHeaderDescription,\n  Action: PageHeaderAction,\n});\n"],"names":["jsx","cn","Fragment","jsxs"],"mappings":"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"}

package/dist/primitives/control-size.cjs.js

@@ -15,7 +15,7 @@ const controlSizeClasses = {
   lg: "h-form-lg text-ui-md"
 };
 const controlTriggerOpenState = {
-  default: "data-[popup-open]:bg-surface5 data-[popup-open]:text-neutral6",
+  default: "data-[popup-open]:bg-button-default-bg-hover data-[popup-open]:text-neutral6",
   outline: "data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2",
   ghost: "data-[popup-open]:bg-neutral6/5 data-[popup-open]:text-neutral6"
 };

package/dist/primitives/control-size.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-size.cjs.js","sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'xs' | 'sm' | 'md' | 'lg';\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  xs: 'h-form-xs',\n  sm: 'h-form-sm',\n  md: 'h-form-md',\n  lg: 'h-form-lg',\n};\n\n// Height + matching text size — the common pairing for text-bearing controls.\n// Heights: xs 20px / sm 24px / md 28px / lg 28px; text 10/12/13/14px.\n// `md` and `lg` share a height on purpose: `lg` only bumps the text size and\n// per-component padding, so a large button and a large input still align.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  xs: 'h-form-xs text-ui-xs',\n  sm: 'h-form-sm text-ui-sm',\n  md: 'h-form-md text-ui-smd',\n  lg: 'h-form-lg text-ui-md',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';\n\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:bg-surface5 data-[popup-open]:text-neutral6',\n  outline: 'data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2',\n  ghost: 'data-[popup-open]:bg-neutral6/5 data-[popup-open]:text-neutral6',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'outline' || variant === 'ghost'\n    ? controlTriggerOpenState[variant]\n    : undefined;\n}\n"],"names":[],"mappings":";;;;AAWO,MAAM,aAAA,GAA6C;AAAA,EACxD,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAMO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,uBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAIO,MAAM,uBAAA,GAAuE;AAAA,EAClF,OAAA,EAAS,+DAAA;AAAA,EACT,OAAA,EAAS,gGAAA;AAAA,EACT,KAAA,EAAO;AACT;AAIO,SAAS,2BAA2B,OAAA,EAAwD;AACjG,EAAA,OAAO,OAAA,KAAY,aAAa,OAAA,KAAY,SAAA,IAAa,YAAY,OAAA,GACjE,uBAAA,CAAwB,OAAO,CAAA,GAC/B,MAAA;AACN;;;;;;;"}
+{"version":3,"file":"control-size.cjs.js","sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'xs' | 'sm' | 'md' | 'lg';\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  xs: 'h-form-xs',\n  sm: 'h-form-sm',\n  md: 'h-form-md',\n  lg: 'h-form-lg',\n};\n\n// Height + matching text size — the common pairing for text-bearing controls.\n// Heights: xs 20px / sm 24px / md 28px / lg 28px; text 10/12/13/14px.\n// `md` and `lg` share a height on purpose: `lg` only bumps the text size and\n// per-component padding, so a large button and a large input still align.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  xs: 'h-form-xs text-ui-xs',\n  sm: 'h-form-sm text-ui-sm',\n  md: 'h-form-md text-ui-smd',\n  lg: 'h-form-lg text-ui-md',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';\n\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:bg-button-default-bg-hover data-[popup-open]:text-neutral6',\n  outline: 'data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2',\n  ghost: 'data-[popup-open]:bg-neutral6/5 data-[popup-open]:text-neutral6',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'outline' || variant === 'ghost'\n    ? controlTriggerOpenState[variant]\n    : undefined;\n}\n"],"names":[],"mappings":";;;;AAWO,MAAM,aAAA,GAA6C;AAAA,EACxD,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAMO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,uBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAIO,MAAM,uBAAA,GAAuE;AAAA,EAClF,OAAA,EAAS,8EAAA;AAAA,EACT,OAAA,EAAS,gGAAA;AAAA,EACT,KAAA,EAAO;AACT;AAIO,SAAS,2BAA2B,OAAA,EAAwD;AACjG,EAAA,OAAO,OAAA,KAAY,aAAa,OAAA,KAAY,SAAA,IAAa,YAAY,OAAA,GACjE,uBAAA,CAAwB,OAAO,CAAA,GAC/B,MAAA;AACN;;;;;;;"}

package/dist/primitives/control-size.es.js

@@ -11,7 +11,7 @@ const controlSizeClasses = {
   lg: "h-form-lg text-ui-md"
 };
 const controlTriggerOpenState = {
-  default: "data-[popup-open]:bg-surface5 data-[popup-open]:text-neutral6",
+  default: "data-[popup-open]:bg-button-default-bg-hover data-[popup-open]:text-neutral6",
   outline: "data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2",
   ghost: "data-[popup-open]:bg-neutral6/5 data-[popup-open]:text-neutral6"
 };

package/dist/primitives/control-size.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-size.es.js","sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'xs' | 'sm' | 'md' | 'lg';\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  xs: 'h-form-xs',\n  sm: 'h-form-sm',\n  md: 'h-form-md',\n  lg: 'h-form-lg',\n};\n\n// Height + matching text size — the common pairing for text-bearing controls.\n// Heights: xs 20px / sm 24px / md 28px / lg 28px; text 10/12/13/14px.\n// `md` and `lg` share a height on purpose: `lg` only bumps the text size and\n// per-component padding, so a large button and a large input still align.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  xs: 'h-form-xs text-ui-xs',\n  sm: 'h-form-sm text-ui-sm',\n  md: 'h-form-md text-ui-smd',\n  lg: 'h-form-lg text-ui-md',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';\n\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:bg-surface5 data-[popup-open]:text-neutral6',\n  outline: 'data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2',\n  ghost: 'data-[popup-open]:bg-neutral6/5 data-[popup-open]:text-neutral6',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'outline' || variant === 'ghost'\n    ? controlTriggerOpenState[variant]\n    : undefined;\n}\n"],"names":[],"mappings":"AAWO,MAAM,aAAA,GAA6C;AAAA,EACxD,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAMO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,uBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAIO,MAAM,uBAAA,GAAuE;AAAA,EAClF,OAAA,EAAS,+DAAA;AAAA,EACT,OAAA,EAAS,gGAAA;AAAA,EACT,KAAA,EAAO;AACT;AAIO,SAAS,2BAA2B,OAAA,EAAwD;AACjG,EAAA,OAAO,OAAA,KAAY,aAAa,OAAA,KAAY,SAAA,IAAa,YAAY,OAAA,GACjE,uBAAA,CAAwB,OAAO,CAAA,GAC/B,MAAA;AACN;;;;"}
+{"version":3,"file":"control-size.es.js","sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'xs' | 'sm' | 'md' | 'lg';\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  xs: 'h-form-xs',\n  sm: 'h-form-sm',\n  md: 'h-form-md',\n  lg: 'h-form-lg',\n};\n\n// Height + matching text size — the common pairing for text-bearing controls.\n// Heights: xs 20px / sm 24px / md 28px / lg 28px; text 10/12/13/14px.\n// `md` and `lg` share a height on purpose: `lg` only bumps the text size and\n// per-component padding, so a large button and a large input still align.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  xs: 'h-form-xs text-ui-xs',\n  sm: 'h-form-sm text-ui-sm',\n  md: 'h-form-md text-ui-smd',\n  lg: 'h-form-lg text-ui-md',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'outline' | 'ghost';\n\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:bg-button-default-bg-hover data-[popup-open]:text-neutral6',\n  outline: 'data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2',\n  ghost: 'data-[popup-open]:bg-neutral6/5 data-[popup-open]:text-neutral6',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'outline' || variant === 'ghost'\n    ? controlTriggerOpenState[variant]\n    : undefined;\n}\n"],"names":[],"mappings":"AAWO,MAAM,aAAA,GAA6C;AAAA,EACxD,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAMO,MAAM,kBAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,sBAAA;AAAA,EACJ,EAAA,EAAI,uBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAIO,MAAM,uBAAA,GAAuE;AAAA,EAClF,OAAA,EAAS,8EAAA;AAAA,EACT,OAAA,EAAS,gGAAA;AAAA,EACT,KAAA,EAAO;AACT;AAIO,SAAS,2BAA2B,OAAA,EAAwD;AACjG,EAAA,OAAO,OAAA,KAAY,aAAa,OAAA,KAAY,SAAA,IAAa,YAAY,OAAA,GACjE,uBAAA,CAAwB,OAAO,CAAA,GAC/B,MAAA;AACN;;;;"}

package/dist/primitives/form-element.cjs.js

@@ -2,30 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-require('../focus.css');const utils_cn = require('../cn-DnbTIGXa.cjs');
-;/* empty css                  */
-
 const sharedFormElementDisabledStyle = "disabled:opacity-50 disabled:cursor-not-allowed";
 const inputFocusBorderVisible = "focus-visible:border-neutral5/50";
-const inputFocusBorderWithin = "has-[:focus-visible]:not-has-[[aria-invalid=true]]:border-neutral5/50";
-const controlFocusStyle = "ds-focus ds-focus-line";
-const inputHoverBorderVisible = "hover:not-focus-visible:not-aria-invalid:border-border2";
-const inputHoverBorderWithin = "hover:not-has-[:focus-visible]:not-has-[[aria-invalid=true]]:border-border2";
-const inputSurfaceAndFocusStyle = utils_cn.cn(
-  "ds-focus border border-border1 bg-surface-overlay-soft text-neutral5",
-  "hover:bg-surface-overlay-strong hover:text-neutral6 focus-visible:bg-surface-overlay-strong",
-  inputHoverBorderVisible,
-  inputFocusBorderVisible
-);
-const inputOutlineAndFocusStyle = utils_cn.cn(
-  "ds-focus border border-border1 bg-transparent text-neutral5 hover:text-neutral6",
-  inputHoverBorderVisible,
-  inputFocusBorderVisible
-);
-const unstyledFormElementStyle = "ds-focus border-0 bg-transparent";
+const inputFocusBorderWithin = "focus-within:border-neutral5/50";
+const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;
+const inputHoverBorderVisible = "[&:hover:not(:focus-visible)]:border-border2";
+const inputHoverBorderWithin = "[&:hover:not(:focus-within)]:border-border2";
+const inputSurfaceAndFocusStyle = "bg-surface-overlay-soft border border-border1 text-neutral5 hover:text-neutral6 hover:bg-surface-overlay-strong " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong " + inputFocusBorderVisible;
+const inputOutlineAndFocusStyle = "bg-transparent border border-border1 text-neutral5 hover:text-neutral6 " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden " + inputFocusBorderVisible;
+const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
 
-exports.controlFocusBorderVisible = controlFocusStyle;
-exports.controlFocusStyle = controlFocusStyle;
+exports.controlFocusBorderVisible = controlFocusBorderVisible;
 exports.inputFocusBorderVisible = inputFocusBorderVisible;
 exports.inputFocusBorderWithin = inputFocusBorderWithin;
 exports.inputHoverBorderVisible = inputHoverBorderVisible;

package/dist/primitives/form-element.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-element.cjs.js","sources":["../../src/ds/primitives/form-element.ts"],"sourcesContent":["import { cn } from '@/lib/utils';\nimport './focus.css';\n\nexport const sharedFormElementDisabledStyle = 'disabled:opacity-50 disabled:cursor-not-allowed';\n\nexport const inputFocusBorderVisible = 'focus-visible:border-neutral5/50';\nexport const inputFocusBorderWithin = 'has-[:focus-visible]:not-has-[[aria-invalid=true]]:border-neutral5/50';\n\nexport const controlFocusStyle = 'ds-focus ds-focus-line';\nexport { controlFocusStyle as controlFocusBorderVisible };\n\n// Hover must preserve focused and invalid borders when those states overlap.\nexport const inputHoverBorderVisible = 'hover:not-focus-visible:not-aria-invalid:border-border2';\nexport const inputHoverBorderWithin = 'hover:not-has-[:focus-visible]:not-has-[[aria-invalid=true]]:border-border2';\n\nexport const inputSurfaceAndFocusStyle = cn(\n  'ds-focus border border-border1 bg-surface-overlay-soft text-neutral5',\n  'hover:bg-surface-overlay-strong hover:text-neutral6 focus-visible:bg-surface-overlay-strong',\n  inputHoverBorderVisible,\n  inputFocusBorderVisible,\n);\n\nexport const inputOutlineAndFocusStyle = cn(\n  'ds-focus border border-border1 bg-transparent text-neutral5 hover:text-neutral6',\n  inputHoverBorderVisible,\n  inputFocusBorderVisible,\n);\n\nexport const unstyledFormElementStyle = 'ds-focus border-0 bg-transparent';\n"],"names":["cn"],"mappings":";;;;;;;AAGO,MAAM,8BAAA,GAAiC;AAEvC,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAE/B,MAAM,iBAAA,GAAoB;AAI1B,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAE/B,MAAM,yBAAA,GAA4BA,WAAA;AAAA,EACvC,sEAAA;AAAA,EACA,6FAAA;AAAA,EACA,uBAAA;AAAA,EACA;AACF;AAEO,MAAM,yBAAA,GAA4BA,WAAA;AAAA,EACvC,iFAAA;AAAA,EACA,uBAAA;AAAA,EACA;AACF;AAEO,MAAM,wBAAA,GAA2B;;;;;;;;;;;;;"}
+{"version":3,"file":"form-element.cjs.js","sources":["../../src/ds/primitives/form-element.ts"],"sourcesContent":["export const sharedFormElementDisabledStyle = 'disabled:opacity-50 disabled:cursor-not-allowed';\n\n// Focus indicator for the (green-less) input family. Instead of a heavy ring we\n// reinforce the existing 1px border: on focus it brightens to a translucent neutral\n// (theme-aware neutral5 — light on dark surfaces, dark on light) that clears WCAG\n// 1.4.11 non-text contrast (3:1) on any surface, where the border1→border2 shift\n// alone (white/7%→11%) does not. `focus-visible` for the bare control,\n// `focus-within` for wrapper variants (InputGroup) whose focus lives on\n// a nested input.\nexport const inputFocusBorderVisible = 'focus-visible:border-neutral5/50';\nexport const inputFocusBorderWithin = 'focus-within:border-neutral5/50';\n\n// Canonical focus indicator for a bare interactive control (Button, etc.) in the\n// non-accent input/border language: suppress the browser outline and let the 1px\n// border brighten to the same translucent neutral the input family uses. This is\n// what unifies button focus with input focus (no green accent ring). Wrappers\n// whose focus lives on a nested control use `inputFocusBorderWithin` instead.\nexport const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;\n\n// Hover borders are guarded so they can never clobber the focus border. Tailwind\n// can emit focus variants before hover variants, so an unguarded `hover:border-*`\n// of equal specificity may win on a field that is focused AND hovered.\nexport const inputHoverBorderVisible = '[&:hover:not(:focus-visible)]:border-border2';\nexport const inputHoverBorderWithin = '[&:hover:not(:focus-within)]:border-border2';\n\n// Background-agnostic surface + focus recipe shared by Input and Textarea.\n// Uses theme-aware opacity overlays so it reads on any underlying surface, with\n// no accent (green) on focus — caller appends a radius (`rounded-full` for\n// single-line inputs, `rounded-xl` for textareas).\nexport const inputSurfaceAndFocusStyle =\n  'bg-surface-overlay-soft border border-border1 text-neutral5 ' +\n  'hover:text-neutral6 hover:bg-surface-overlay-strong ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong ' +\n  inputFocusBorderVisible;\n\nexport const inputOutlineAndFocusStyle =\n  'bg-transparent border border-border1 text-neutral5 ' +\n  'hover:text-neutral6 ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden ' +\n  inputFocusBorderVisible;\n\n// Unstyled variant baseline — strips all chrome but still suppresses the\n// browser default focus ring so the field sits cleanly inside a styled parent.\nexport const unstyledFormElementStyle = 'border-0 bg-transparent outline-hidden focus-visible:outline-hidden';\n"],"names":[],"mappings":";;;;AAAO,MAAM,8BAAA,GAAiC;AASvC,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAO/B,MAAM,yBAAA,GAA4B,+CAA+C,uBAAuB,CAAA;AAKxG,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAM/B,MAAM,yBAAA,GACX,kHAAA,GAEA,uBAAA,GACA,uFAAA,GAEA;AAEK,MAAM,yBAAA,GACX,yEAAA,GAEA,uBAAA,GACA,+CAAA,GAEA;AAIK,MAAM,wBAAA,GAA2B;;;;;;;;;;;;"}

package/dist/primitives/form-element.es.js

@@ -1,24 +1,12 @@
-import { c as cn } from '../cn-ByEbywDh.js';
-import '../focus.css';/* empty css                */
-
 const sharedFormElementDisabledStyle = "disabled:opacity-50 disabled:cursor-not-allowed";
 const inputFocusBorderVisible = "focus-visible:border-neutral5/50";
-const inputFocusBorderWithin = "has-[:focus-visible]:not-has-[[aria-invalid=true]]:border-neutral5/50";
-const controlFocusStyle = "ds-focus ds-focus-line";
-const inputHoverBorderVisible = "hover:not-focus-visible:not-aria-invalid:border-border2";
-const inputHoverBorderWithin = "hover:not-has-[:focus-visible]:not-has-[[aria-invalid=true]]:border-border2";
-const inputSurfaceAndFocusStyle = cn(
-  "ds-focus border border-border1 bg-surface-overlay-soft text-neutral5",
-  "hover:bg-surface-overlay-strong hover:text-neutral6 focus-visible:bg-surface-overlay-strong",
-  inputHoverBorderVisible,
-  inputFocusBorderVisible
-);
-const inputOutlineAndFocusStyle = cn(
-  "ds-focus border border-border1 bg-transparent text-neutral5 hover:text-neutral6",
-  inputHoverBorderVisible,
-  inputFocusBorderVisible
-);
-const unstyledFormElementStyle = "ds-focus border-0 bg-transparent";
+const inputFocusBorderWithin = "focus-within:border-neutral5/50";
+const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;
+const inputHoverBorderVisible = "[&:hover:not(:focus-visible)]:border-border2";
+const inputHoverBorderWithin = "[&:hover:not(:focus-within)]:border-border2";
+const inputSurfaceAndFocusStyle = "bg-surface-overlay-soft border border-border1 text-neutral5 hover:text-neutral6 hover:bg-surface-overlay-strong " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong " + inputFocusBorderVisible;
+const inputOutlineAndFocusStyle = "bg-transparent border border-border1 text-neutral5 hover:text-neutral6 " + inputHoverBorderVisible + " outline-hidden focus-visible:outline-hidden " + inputFocusBorderVisible;
+const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
 
-export { controlFocusStyle as controlFocusBorderVisible, controlFocusStyle, inputFocusBorderVisible, inputFocusBorderWithin, inputHoverBorderVisible, inputHoverBorderWithin, inputOutlineAndFocusStyle, inputSurfaceAndFocusStyle, sharedFormElementDisabledStyle, unstyledFormElementStyle };
+export { controlFocusBorderVisible, inputFocusBorderVisible, inputFocusBorderWithin, inputHoverBorderVisible, inputHoverBorderWithin, inputOutlineAndFocusStyle, inputSurfaceAndFocusStyle, sharedFormElementDisabledStyle, unstyledFormElementStyle };
 //# sourceMappingURL=form-element.es.js.map

package/dist/primitives/form-element.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-element.es.js","sources":["../../src/ds/primitives/form-element.ts"],"sourcesContent":["import { cn } from '@/lib/utils';\nimport './focus.css';\n\nexport const sharedFormElementDisabledStyle = 'disabled:opacity-50 disabled:cursor-not-allowed';\n\nexport const inputFocusBorderVisible = 'focus-visible:border-neutral5/50';\nexport const inputFocusBorderWithin = 'has-[:focus-visible]:not-has-[[aria-invalid=true]]:border-neutral5/50';\n\nexport const controlFocusStyle = 'ds-focus ds-focus-line';\nexport { controlFocusStyle as controlFocusBorderVisible };\n\n// Hover must preserve focused and invalid borders when those states overlap.\nexport const inputHoverBorderVisible = 'hover:not-focus-visible:not-aria-invalid:border-border2';\nexport const inputHoverBorderWithin = 'hover:not-has-[:focus-visible]:not-has-[[aria-invalid=true]]:border-border2';\n\nexport const inputSurfaceAndFocusStyle = cn(\n  'ds-focus border border-border1 bg-surface-overlay-soft text-neutral5',\n  'hover:bg-surface-overlay-strong hover:text-neutral6 focus-visible:bg-surface-overlay-strong',\n  inputHoverBorderVisible,\n  inputFocusBorderVisible,\n);\n\nexport const inputOutlineAndFocusStyle = cn(\n  'ds-focus border border-border1 bg-transparent text-neutral5 hover:text-neutral6',\n  inputHoverBorderVisible,\n  inputFocusBorderVisible,\n);\n\nexport const unstyledFormElementStyle = 'ds-focus border-0 bg-transparent';\n"],"names":[],"mappings":";;;AAGO,MAAM,8BAAA,GAAiC;AAEvC,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAE/B,MAAM,iBAAA,GAAoB;AAI1B,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAE/B,MAAM,yBAAA,GAA4B,EAAA;AAAA,EACvC,sEAAA;AAAA,EACA,6FAAA;AAAA,EACA,uBAAA;AAAA,EACA;AACF;AAEO,MAAM,yBAAA,GAA4B,EAAA;AAAA,EACvC,iFAAA;AAAA,EACA,uBAAA;AAAA,EACA;AACF;AAEO,MAAM,wBAAA,GAA2B;;;;"}
+{"version":3,"file":"form-element.es.js","sources":["../../src/ds/primitives/form-element.ts"],"sourcesContent":["export const sharedFormElementDisabledStyle = 'disabled:opacity-50 disabled:cursor-not-allowed';\n\n// Focus indicator for the (green-less) input family. Instead of a heavy ring we\n// reinforce the existing 1px border: on focus it brightens to a translucent neutral\n// (theme-aware neutral5 — light on dark surfaces, dark on light) that clears WCAG\n// 1.4.11 non-text contrast (3:1) on any surface, where the border1→border2 shift\n// alone (white/7%→11%) does not. `focus-visible` for the bare control,\n// `focus-within` for wrapper variants (InputGroup) whose focus lives on\n// a nested input.\nexport const inputFocusBorderVisible = 'focus-visible:border-neutral5/50';\nexport const inputFocusBorderWithin = 'focus-within:border-neutral5/50';\n\n// Canonical focus indicator for a bare interactive control (Button, etc.) in the\n// non-accent input/border language: suppress the browser outline and let the 1px\n// border brighten to the same translucent neutral the input family uses. This is\n// what unifies button focus with input focus (no green accent ring). Wrappers\n// whose focus lives on a nested control use `inputFocusBorderWithin` instead.\nexport const controlFocusBorderVisible = `outline-hidden focus-visible:outline-hidden ${inputFocusBorderVisible}`;\n\n// Hover borders are guarded so they can never clobber the focus border. Tailwind\n// can emit focus variants before hover variants, so an unguarded `hover:border-*`\n// of equal specificity may win on a field that is focused AND hovered.\nexport const inputHoverBorderVisible = '[&:hover:not(:focus-visible)]:border-border2';\nexport const inputHoverBorderWithin = '[&:hover:not(:focus-within)]:border-border2';\n\n// Background-agnostic surface + focus recipe shared by Input and Textarea.\n// Uses theme-aware opacity overlays so it reads on any underlying surface, with\n// no accent (green) on focus — caller appends a radius (`rounded-full` for\n// single-line inputs, `rounded-xl` for textareas).\nexport const inputSurfaceAndFocusStyle =\n  'bg-surface-overlay-soft border border-border1 text-neutral5 ' +\n  'hover:text-neutral6 hover:bg-surface-overlay-strong ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong ' +\n  inputFocusBorderVisible;\n\nexport const inputOutlineAndFocusStyle =\n  'bg-transparent border border-border1 text-neutral5 ' +\n  'hover:text-neutral6 ' +\n  inputHoverBorderVisible +\n  ' ' +\n  'outline-hidden focus-visible:outline-hidden ' +\n  inputFocusBorderVisible;\n\n// Unstyled variant baseline — strips all chrome but still suppresses the\n// browser default focus ring so the field sits cleanly inside a styled parent.\nexport const unstyledFormElementStyle = 'border-0 bg-transparent outline-hidden focus-visible:outline-hidden';\n"],"names":[],"mappings":"AAAO,MAAM,8BAAA,GAAiC;AASvC,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAO/B,MAAM,yBAAA,GAA4B,+CAA+C,uBAAuB,CAAA;AAKxG,MAAM,uBAAA,GAA0B;AAChC,MAAM,sBAAA,GAAyB;AAM/B,MAAM,yBAAA,GACX,kHAAA,GAEA,uBAAA,GACA,uFAAA,GAEA;AAEK,MAAM,yBAAA,GACX,yEAAA,GAEA,uBAAA,GACA,+CAAA,GAEA;AAIK,MAAM,wBAAA,GAA2B;;;;"}