@burtson-labs/ui 0.14.0 → 0.15.0

package/dist/components/kbd.js

@@ -1,22 +1,24 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/kbd.tsx
-function Kbd({ className, ...props }) {
+var Kbd = React.forwardRef(function Kbd({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("kbd", {
+		ref,
 		"data-slot": "kbd",
 		className: cn("pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-xs border border-border-strong border-b-2 bg-surface-muted px-1 font-mono text-[11px] font-medium text-muted-foreground select-none [&_svg]:size-3", className),
 		...props
 	});
-}
-function KbdGroup({ className, ...props }) {
+});
+var KbdGroup = React.forwardRef(function KbdGroup({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("span", {
+		ref,
 		"data-slot": "kbd-group",
 		className: cn("inline-flex items-center gap-1", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Kbd, KbdGroup };
 

package/dist/components/kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"kbd.js","names":[],"sources":["../../src/components/kbd.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        'pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-xs border border-border-strong border-b-2 bg-surface-muted px-1 font-mono text-[11px] font-medium text-muted-foreground select-none [&_svg]:size-3',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"kbd-group\"\n      className={cn('inline-flex items-center gap-1', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Kbd, KbdGroup };\n"],"mappings":";;;;;AAIA,SAAS,IAAI,EAAE,WAAW,GAAG,SAAsC;CACjE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAuC;CACvE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"kbd.js","names":[],"sources":["../../src/components/kbd.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst Kbd = React.forwardRef<HTMLElement, React.ComponentProps<'kbd'>>(function Kbd(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <kbd\n      ref={ref}\n      data-slot=\"kbd\"\n      className={cn(\n        'pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-xs border border-border-strong border-b-2 bg-surface-muted px-1 font-mono text-[11px] font-medium text-muted-foreground select-none [&_svg]:size-3',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst KbdGroup = React.forwardRef<HTMLSpanElement, React.ComponentProps<'span'>>(function KbdGroup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      data-slot=\"kbd-group\"\n      className={cn('inline-flex items-center gap-1', className)}\n      {...props}\n    />\n  );\n});\n\nexport { Kbd, KbdGroup };\n"],"mappings":";;;;;AAIA,IAAM,MAAM,MAAM,WAAqD,SAAS,IAC9E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,4OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,IAAM,WAAW,MAAM,WAA0D,SAAS,SACxF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,QAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL,CAAC"}

package/dist/components/label.d.ts

@@ -1,4 +1,9 @@
 import * as React from 'react';
 import * as LabelPrimitive from '../primitives/vendor/radix/react-label';
-declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
+/**
+ * A caption for a control. Wrap a Checkbox, Switch or RadioGroupItem in it
+ * and the whole caption toggles the control; at least 44px tall on touch
+ * screens when it does.
+ */
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
 export { Label };

package/dist/components/label.js

@@ -1,16 +1,22 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { Root } from "../primitives/vendor/radix/react-label/label.js";
-import "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/label.tsx
-function Label({ className, ...props }) {
+/**
+* A caption for a control. Wrap a Checkbox, Switch or RadioGroupItem in it
+* and the whole caption toggles the control; at least 44px tall on touch
+* screens when it does.
+*/
+var Label = React.forwardRef(function Label({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Root, {
+		ref,
 		"data-slot": "label",
-		className: cn("flex items-center gap-2 text-[13px] leading-none font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		className: cn("flex items-center gap-2 text-[13px] leading-none font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 has-[[data-slot=checkbox],[data-slot=switch],[data-slot=radio-group-item]]:cursor-pointer has-[[data-slot=checkbox],[data-slot=switch],[data-slot=radio-group-item]]:pointer-coarse:min-h-11", className),
 		...props
 	});
-}
+});
 //#endregion
 export { Label };
 

package/dist/components/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","names":["LabelPrimitive.Root"],"sources":["../../src/components/label.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as LabelPrimitive from '../primitives/vendor/radix/react-label';\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        'flex items-center gap-2 text-[13px] leading-none font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n"],"mappings":";;;;;;AAKA,SAAS,MAAM,EAAE,WAAW,GAAG,SAA2D;CACxF,OACE,oBAACA,MAAD;EACE,aAAU;EACV,WAAW,GACT,6NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"label.js","names":["LabelPrimitive.Root"],"sources":["../../src/components/label.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as LabelPrimitive from '../primitives/vendor/radix/react-label';\n\n/**\n * A caption for a control. Wrap a Checkbox, Switch or RadioGroupItem in it\n * and the whole caption toggles the control; at least 44px tall on touch\n * screens when it does.\n */\nconst Label = React.forwardRef<HTMLLabelElement, React.ComponentProps<typeof LabelPrimitive.Root>>(\n  function Label({ className, ...props }, ref) {\n    return (\n      <LabelPrimitive.Root\n        ref={ref}\n        data-slot=\"label\"\n        className={cn(\n          'flex items-center gap-2 text-[13px] leading-none font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 has-[[data-slot=checkbox],[data-slot=switch],[data-slot=radio-group-item]]:cursor-pointer has-[[data-slot=checkbox],[data-slot=switch],[data-slot=radio-group-item]]:pointer-coarse:min-h-11',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nexport { Label };\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,QAAQ,MAAM,WAClB,SAAS,MAAM,EAAE,WAAW,GAAG,SAAS,KAAK;CAC3C,OACE,oBAACA,MAAD;EACO;EACL,aAAU;EACV,WAAW,GACT,0ZACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF"}

package/dist/components/markdown.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 /** A fenced code block with a language label and a copy button. */
-declare function CodeBlock({ code, lang, className }: {
+export interface CodeBlockProps {
     code: string;
     lang?: string;
     className?: string;
-}): React.JSX.Element;
+}
+declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>>;
 type Block = {
     type: 'p';
     text: string;
@@ -29,5 +30,5 @@ export interface MarkdownProps extends Omit<React.ComponentProps<'div'>, 'childr
     children: string;
 }
 /** Renders a Markdown string safely, for assistant messages. */
-declare function Markdown({ children, className, ...props }: MarkdownProps): React.JSX.Element;
+declare const Markdown: React.ForwardRefExoticComponent<Omit<MarkdownProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { CodeBlock, Markdown };

package/dist/components/markdown.js

@@ -36,13 +36,13 @@ function inline(text, key) {
 	if (last < text.length) out.push(text.slice(last));
 	return out;
 }
-/** A fenced code block with a language label and a copy button. */
-function CodeBlock({ code, lang, className }) {
+var CodeBlock = React.forwardRef(function CodeBlock({ code, lang, className }, ref) {
 	return /* @__PURE__ */ jsxs("div", {
+		ref,
 		"data-slot": "code-block",
 		className: cn("overflow-hidden rounded-md border bg-code text-code-foreground", className),
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex h-8 items-center justify-between border-b border-white/10 px-3 text-[11px] text-code-foreground/60",
+			className: "flex min-h-8 items-center justify-between border-b border-white/10 px-3 text-[11px] text-code-foreground/70",
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "font-mono",
 				children: lang || "text"
@@ -56,7 +56,7 @@ function CodeBlock({ code, lang, className }) {
 			children: /* @__PURE__ */ jsx("code", { children: code })
 		})]
 	});
-}
+});
 /** Split Markdown into blocks. Exported for tests. */
 function parseMarkdown(source) {
 	const lines = source.replace(/\r\n?/g, "\n").split("\n");
@@ -122,9 +122,10 @@ function parseMarkdown(source) {
 	return blocks;
 }
 /** Renders a Markdown string safely, for assistant messages. */
-function Markdown({ children, className, ...props }) {
+var Markdown = React.forwardRef(function Markdown({ children, className, ...props }, ref) {
 	const blocks = React.useMemo(() => parseMarkdown(children), [children]);
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "markdown",
 		className: cn("grid gap-3 text-sm leading-6 [&_li]:leading-6", className),
 		...props,
@@ -162,7 +163,7 @@ function Markdown({ children, className, ...props }) {
 			}
 		})
 	});
-}
+});
 //#endregion
 export { CodeBlock, Markdown, parseMarkdown };
 

package/dist/components/markdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.js","names":[],"sources":["../../src/components/markdown.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { CopyButton } from './copy-button';\n\n/*\n * A small, safe Markdown renderer for chat: paragraphs, headings, bullet and\n * numbered lists, block quotes, fenced code, inline code, bold, italic and\n * links. Everything becomes React elements (never HTML strings), and links\n * only keep http(s) and mailto targets, so model output cannot inject markup\n * or script.\n */\n\nconst SAFE_HREF = /^(https?:\\/\\/|mailto:)/i;\n\nfunction inline(text: string, key: string): React.ReactNode[] {\n  const out: React.ReactNode[] = [];\n  const pattern =\n    /(`[^`]+`)|(\\*\\*[^*]+\\*\\*|__[^_]+__)|(\\*[^*\\s][^*]*\\*|_[^_\\s][^_]*_)|(\\[[^\\]]+\\]\\([^)\\s]+\\))/g;\n  let last = 0;\n  let n = 0;\n  for (const m of text.matchAll(pattern)) {\n    const i = m.index;\n    if (i > last) out.push(text.slice(last, i));\n    const token = m[0];\n    const k = `${key}-${n++}`;\n    if (m[1]) {\n      out.push(\n        <code key={k} className=\"rounded-xs bg-muted px-1 py-0.5 font-mono text-[0.85em]\">\n          {token.slice(1, -1)}\n        </code>,\n      );\n    } else if (m[2]) {\n      out.push(<strong key={k}>{inline(token.slice(2, -2), k)}</strong>);\n    } else if (m[3]) {\n      out.push(<em key={k}>{inline(token.slice(1, -1), k)}</em>);\n    } else {\n      const [, label = '', href = ''] = /^\\[([^\\]]+)\\]\\(([^)\\s]+)\\)$/.exec(token) ?? [];\n      out.push(\n        SAFE_HREF.test(href) ? (\n          <a\n            key={k}\n            href={href}\n            target=\"_blank\"\n            rel=\"noreferrer noopener\"\n            className=\"text-brand underline underline-offset-2 hover:text-brand-hover\"\n          >\n            {label}\n          </a>\n        ) : (\n          label\n        ),\n      );\n    }\n    last = i + token.length;\n  }\n  if (last < text.length) out.push(text.slice(last));\n  return out;\n}\n\n/** A fenced code block with a language label and a copy button. */\nfunction CodeBlock({ code, lang, className }: { code: string; lang?: string; className?: string }) {\n  return (\n    <div\n      data-slot=\"code-block\"\n      className={cn('overflow-hidden rounded-md border bg-code text-code-foreground', className)}\n    >\n      <div className=\"flex h-8 items-center justify-between border-b border-white/10 px-3 text-[11px] text-code-foreground/60\">\n        <span className=\"font-mono\">{lang || 'text'}</span>\n        <CopyButton\n          value={code}\n          label=\"Copy code\"\n          className=\"size-7 text-code-foreground hover:bg-white/10 hover:text-code-foreground\"\n        />\n      </div>\n      <pre className=\"overflow-x-auto p-3 font-mono text-[12.5px] leading-5\">\n        <code>{code}</code>\n      </pre>\n    </div>\n  );\n}\n\ntype Block =\n  | { type: 'p'; text: string }\n  | { type: 'h'; level: 1 | 2 | 3; text: string }\n  | { type: 'ul' | 'ol'; items: string[] }\n  | { type: 'quote'; text: string }\n  | { type: 'code'; lang: string; code: string };\n\n/** Split Markdown into blocks. Exported for tests. */\nexport function parseMarkdown(source: string): Block[] {\n  const lines = source.replace(/\\r\\n?/g, '\\n').split('\\n');\n  const blocks: Block[] = [];\n  let para: string[] = [];\n  const flush = () => {\n    if (para.length) blocks.push({ type: 'p', text: para.join(' ') });\n    para = [];\n  };\n  for (let i = 0; i < lines.length; i++) {\n    const line = lines[i] ?? '';\n    const fence = /^```\\s*([\\w+-]*)\\s*$/.exec(line);\n    if (fence) {\n      flush();\n      const code: string[] = [];\n      i++;\n      while (i < lines.length && !/^```\\s*$/.test(lines[i] ?? '')) code.push(lines[i++] ?? '');\n      blocks.push({ type: 'code', lang: fence[1] ?? '', code: code.join('\\n') });\n      continue;\n    }\n    const heading = /^(#{1,3})\\s+(.*)$/.exec(line);\n    if (heading) {\n      flush();\n      blocks.push({\n        type: 'h',\n        level: (heading[1]?.length ?? 1) as 1 | 2 | 3,\n        text: heading[2] ?? '',\n      });\n      continue;\n    }\n    const list = /^\\s*([-*]|\\d+[.)])\\s+(.*)$/.exec(line);\n    if (list) {\n      flush();\n      const type = /\\d/.test(list[1] ?? '') ? 'ol' : 'ul';\n      const prev = blocks.at(-1);\n      if (prev && prev.type === type) prev.items.push(list[2] ?? '');\n      else blocks.push({ type, items: [list[2] ?? ''] });\n      continue;\n    }\n    const quote = /^>\\s?(.*)$/.exec(line);\n    if (quote) {\n      flush();\n      blocks.push({ type: 'quote', text: quote[1] ?? '' });\n      continue;\n    }\n    if (!line.trim()) flush();\n    else para.push(line.trim());\n  }\n  flush();\n  return blocks;\n}\n\nexport interface MarkdownProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  children: string;\n}\n\n/** Renders a Markdown string safely, for assistant messages. */\nfunction Markdown({ children, className, ...props }: MarkdownProps) {\n  const blocks = React.useMemo(() => parseMarkdown(children), [children]);\n  return (\n    <div\n      data-slot=\"markdown\"\n      className={cn('grid gap-3 text-sm leading-6 [&_li]:leading-6', className)}\n      {...props}\n    >\n      {blocks.map((b, i) => {\n        const k = `b${i}`;\n        switch (b.type) {\n          case 'h': {\n            const Tag = (['h3', 'h4', 'h5'] as const)[b.level - 1] ?? 'h5';\n            return (\n              <Tag key={k} className=\"font-semibold tracking-[-0.01em]\">\n                {inline(b.text, k)}\n              </Tag>\n            );\n          }\n          case 'ul':\n          case 'ol': {\n            const Tag = b.type;\n            return (\n              <Tag\n                key={k}\n                className={cn('grid gap-1 pl-5', b.type === 'ul' ? 'list-disc' : 'list-decimal')}\n              >\n                {b.items.map((item, j) => (\n                  <li key={`${k}-${j}`}>{inline(item, `${k}-${j}`)}</li>\n                ))}\n              </Tag>\n            );\n          }\n          case 'quote':\n            return (\n              <blockquote\n                key={k}\n                className=\"border-l-2 border-border-strong pl-3 text-muted-foreground\"\n              >\n                {inline(b.text, k)}\n              </blockquote>\n            );\n          case 'code':\n            return <CodeBlock key={k} code={b.code} lang={b.lang} />;\n          default:\n            return <p key={k}>{inline(b.text, k)}</p>;\n        }\n      })}\n    </div>\n  );\n}\n\nexport { CodeBlock, Markdown };\n"],"mappings":"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"}
+{"version":3,"file":"markdown.js","names":[],"sources":["../../src/components/markdown.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { CopyButton } from './copy-button';\n\n/*\n * A small, safe Markdown renderer for chat: paragraphs, headings, bullet and\n * numbered lists, block quotes, fenced code, inline code, bold, italic and\n * links. Everything becomes React elements (never HTML strings), and links\n * only keep http(s) and mailto targets, so model output cannot inject markup\n * or script.\n */\n\nconst SAFE_HREF = /^(https?:\\/\\/|mailto:)/i;\n\nfunction inline(text: string, key: string): React.ReactNode[] {\n  const out: React.ReactNode[] = [];\n  const pattern =\n    /(`[^`]+`)|(\\*\\*[^*]+\\*\\*|__[^_]+__)|(\\*[^*\\s][^*]*\\*|_[^_\\s][^_]*_)|(\\[[^\\]]+\\]\\([^)\\s]+\\))/g;\n  let last = 0;\n  let n = 0;\n  for (const m of text.matchAll(pattern)) {\n    const i = m.index;\n    if (i > last) out.push(text.slice(last, i));\n    const token = m[0];\n    const k = `${key}-${n++}`;\n    if (m[1]) {\n      out.push(\n        <code key={k} className=\"rounded-xs bg-muted px-1 py-0.5 font-mono text-[0.85em]\">\n          {token.slice(1, -1)}\n        </code>,\n      );\n    } else if (m[2]) {\n      out.push(<strong key={k}>{inline(token.slice(2, -2), k)}</strong>);\n    } else if (m[3]) {\n      out.push(<em key={k}>{inline(token.slice(1, -1), k)}</em>);\n    } else {\n      const [, label = '', href = ''] = /^\\[([^\\]]+)\\]\\(([^)\\s]+)\\)$/.exec(token) ?? [];\n      out.push(\n        SAFE_HREF.test(href) ? (\n          <a\n            key={k}\n            href={href}\n            target=\"_blank\"\n            rel=\"noreferrer noopener\"\n            className=\"text-brand underline underline-offset-2 hover:text-brand-hover\"\n          >\n            {label}\n          </a>\n        ) : (\n          label\n        ),\n      );\n    }\n    last = i + token.length;\n  }\n  if (last < text.length) out.push(text.slice(last));\n  return out;\n}\n\n/** A fenced code block with a language label and a copy button. */\nexport interface CodeBlockProps {\n  code: string;\n  lang?: string;\n  className?: string;\n}\n\nconst CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(function CodeBlock(\n  { code, lang, className },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"code-block\"\n      className={cn('overflow-hidden rounded-md border bg-code text-code-foreground', className)}\n    >\n      <div className=\"flex min-h-8 items-center justify-between border-b border-white/10 px-3 text-[11px] text-code-foreground/70\">\n        <span className=\"font-mono\">{lang || 'text'}</span>\n        <CopyButton\n          value={code}\n          label=\"Copy code\"\n          className=\"size-7 text-code-foreground hover:bg-white/10 hover:text-code-foreground\"\n        />\n      </div>\n      <pre className=\"overflow-x-auto p-3 font-mono text-[12.5px] leading-5\">\n        <code>{code}</code>\n      </pre>\n    </div>\n  );\n});\n\ntype Block =\n  | { type: 'p'; text: string }\n  | { type: 'h'; level: 1 | 2 | 3; text: string }\n  | { type: 'ul' | 'ol'; items: string[] }\n  | { type: 'quote'; text: string }\n  | { type: 'code'; lang: string; code: string };\n\n/** Split Markdown into blocks. Exported for tests. */\nexport function parseMarkdown(source: string): Block[] {\n  const lines = source.replace(/\\r\\n?/g, '\\n').split('\\n');\n  const blocks: Block[] = [];\n  let para: string[] = [];\n  const flush = () => {\n    if (para.length) blocks.push({ type: 'p', text: para.join(' ') });\n    para = [];\n  };\n  for (let i = 0; i < lines.length; i++) {\n    const line = lines[i] ?? '';\n    const fence = /^```\\s*([\\w+-]*)\\s*$/.exec(line);\n    if (fence) {\n      flush();\n      const code: string[] = [];\n      i++;\n      while (i < lines.length && !/^```\\s*$/.test(lines[i] ?? '')) code.push(lines[i++] ?? '');\n      blocks.push({ type: 'code', lang: fence[1] ?? '', code: code.join('\\n') });\n      continue;\n    }\n    const heading = /^(#{1,3})\\s+(.*)$/.exec(line);\n    if (heading) {\n      flush();\n      blocks.push({\n        type: 'h',\n        level: (heading[1]?.length ?? 1) as 1 | 2 | 3,\n        text: heading[2] ?? '',\n      });\n      continue;\n    }\n    const list = /^\\s*([-*]|\\d+[.)])\\s+(.*)$/.exec(line);\n    if (list) {\n      flush();\n      const type = /\\d/.test(list[1] ?? '') ? 'ol' : 'ul';\n      const prev = blocks.at(-1);\n      if (prev && prev.type === type) prev.items.push(list[2] ?? '');\n      else blocks.push({ type, items: [list[2] ?? ''] });\n      continue;\n    }\n    const quote = /^>\\s?(.*)$/.exec(line);\n    if (quote) {\n      flush();\n      blocks.push({ type: 'quote', text: quote[1] ?? '' });\n      continue;\n    }\n    if (!line.trim()) flush();\n    else para.push(line.trim());\n  }\n  flush();\n  return blocks;\n}\n\nexport interface MarkdownProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  children: string;\n}\n\n/** Renders a Markdown string safely, for assistant messages. */\nconst Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>(function Markdown(\n  { children, className, ...props },\n  ref,\n) {\n  const blocks = React.useMemo(() => parseMarkdown(children), [children]);\n  return (\n    <div\n      ref={ref}\n      data-slot=\"markdown\"\n      className={cn('grid gap-3 text-sm leading-6 [&_li]:leading-6', className)}\n      {...props}\n    >\n      {blocks.map((b, i) => {\n        const k = `b${i}`;\n        switch (b.type) {\n          case 'h': {\n            const Tag = (['h3', 'h4', 'h5'] as const)[b.level - 1] ?? 'h5';\n            return (\n              <Tag key={k} className=\"font-semibold tracking-[-0.01em]\">\n                {inline(b.text, k)}\n              </Tag>\n            );\n          }\n          case 'ul':\n          case 'ol': {\n            const Tag = b.type;\n            return (\n              <Tag\n                key={k}\n                className={cn('grid gap-1 pl-5', b.type === 'ul' ? 'list-disc' : 'list-decimal')}\n              >\n                {b.items.map((item, j) => (\n                  <li key={`${k}-${j}`}>{inline(item, `${k}-${j}`)}</li>\n                ))}\n              </Tag>\n            );\n          }\n          case 'quote':\n            return (\n              <blockquote\n                key={k}\n                className=\"border-l-2 border-border-strong pl-3 text-muted-foreground\"\n              >\n                {inline(b.text, k)}\n              </blockquote>\n            );\n          case 'code':\n            return <CodeBlock key={k} code={b.code} lang={b.lang} />;\n          default:\n            return <p key={k}>{inline(b.text, k)}</p>;\n        }\n      })}\n    </div>\n  );\n});\n\nexport { CodeBlock, Markdown };\n"],"mappings":"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"}

package/dist/components/menubar.d.ts

@@ -5,26 +5,28 @@ import * as MenubarPrimitive from '../primitives/vendor/radix/react-menubar';
  * Down opens one, and an open menu follows the pointer across triggers. Rows
  * match DropdownMenu and ContextMenu.
  */
-declare function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>): React.JSX.Element;
+declare const Menubar: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function MenubarMenu(props: React.ComponentProps<typeof MenubarPrimitive.Menu>): React.JSX.Element;
-declare function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>): React.JSX.Element;
+/** A 28px trigger with a 6px radius (the bar's 10px less its 2px inset); 44px tall to a touch. */
+declare const MenubarTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare function MenubarGroup(props: React.ComponentProps<typeof MenubarPrimitive.Group>): React.JSX.Element;
-declare function MenubarContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Content>): React.JSX.Element;
-declare function MenubarItem({ className, inset, variant, ...props }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+declare const MenubarContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface MenubarItemProps extends React.ComponentProps<typeof MenubarPrimitive.Item> {
     inset?: boolean;
     variant?: 'default' | 'destructive';
-}): React.JSX.Element;
-declare function MenubarCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>): React.JSX.Element;
+}
+declare const MenubarItem: React.ForwardRefExoticComponent<Omit<MenubarItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenubarCheckboxItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function MenubarRadioGroup(props: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>): React.JSX.Element;
-declare function MenubarRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>): React.JSX.Element;
-declare function MenubarLabel({ className, inset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+declare const MenubarRadioItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenubarLabel: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarLabelProps & React.RefAttributes<HTMLDivElement> & {
     inset?: boolean;
-}): React.JSX.Element;
-declare function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>): React.JSX.Element;
-declare function MenubarShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenubarSeparator: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenubarShortcut: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 declare function MenubarSub(props: React.ComponentProps<typeof MenubarPrimitive.Sub>): React.JSX.Element;
-declare function MenubarSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+declare const MenubarSubTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubTriggerProps & React.RefAttributes<HTMLDivElement> & {
     inset?: boolean;
-}): React.JSX.Element;
-declare function MenubarSubContent({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubContent>): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenubarSubContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Menubar, MenubarMenu, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, };

package/dist/components/menubar.js

@@ -1,8 +1,8 @@
 "use client";
-import { cn } from "../lib/utils.js";
-import { menuItemClasses, surfaceClasses } from "./popover.js";
+import { cn, focusRingClasses, touchTargetRowClasses } from "../lib/utils.js";
+import { menuItemClasses, menuLabelClasses, surfaceClasses } from "./popover.js";
 import { CheckboxItem, Content, Group, Item, ItemIndicator, Label, Menu, Portal, RadioGroup, RadioItem, Root, Separator, Sub, SubContent, SubTrigger, Trigger } from "../primitives/vendor/radix/react-menubar/menubar.js";
-import "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import ChevronRight from "@burtson-labs/icons/react/chevron-right";
 import Check from "@burtson-labs/icons/react/check";
@@ -12,52 +12,58 @@ import Check from "@burtson-labs/icons/react/check";
 * Down opens one, and an open menu follows the pointer across triggers. Rows
 * match DropdownMenu and ContextMenu.
 */
-function Menubar({ className, ...props }) {
+var Menubar = React.forwardRef(function Menubar({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Root, {
+		ref,
 		"data-slot": "menubar",
 		className: cn("flex h-8 items-center gap-0.5 rounded-md border bg-surface p-0.5", className),
 		...props
 	});
-}
+});
 function MenubarMenu(props) {
 	return /* @__PURE__ */ jsx(Menu, {
 		"data-slot": "menubar-menu",
 		...props
 	});
 }
-function MenubarTrigger({ className, ...props }) {
+/** A 28px trigger with a 6px radius (the bar's 10px less its 2px inset); 44px tall to a touch. */
+var MenubarTrigger = React.forwardRef(function MenubarTrigger({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Trigger, {
+		ref,
 		"data-slot": "menubar-trigger",
-		className: cn("flex h-7 items-center rounded-sm px-2.5 text-[13px] font-medium outline-none select-none hover:bg-muted focus-visible:shadow-[inset_0_0_0_1px_var(--ring)] data-[state=open]:bg-muted", className),
+		className: cn("flex h-7 items-center rounded-xs px-2.5 text-[13px] font-medium select-none hover:bg-muted data-[state=open]:bg-muted", focusRingClasses, "focus-visible:outline-offset-[-2px]", touchTargetRowClasses, className),
 		...props
 	});
-}
+});
 function MenubarGroup(props) {
 	return /* @__PURE__ */ jsx(Group, {
 		"data-slot": "menubar-group",
 		...props
 	});
 }
-function MenubarContent({ className, align = "start", sideOffset = 4, ...props }) {
+var MenubarContent = React.forwardRef(function MenubarContent({ className, align = "start", sideOffset = 4, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
+		ref,
 		"data-slot": "menubar-content",
 		align,
 		sideOffset,
 		className: cn(surfaceClasses, "max-h-(--radix-menubar-content-available-height) min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-x-hidden overflow-y-auto p-1", className),
 		...props
 	}) });
-}
-function MenubarItem({ className, inset, variant = "default", ...props }) {
+});
+var MenubarItem = React.forwardRef(function MenubarItem({ className, inset, variant = "default", ...props }, ref) {
 	return /* @__PURE__ */ jsx(Item, {
+		ref,
 		"data-slot": "menubar-item",
 		"data-inset": inset || void 0,
 		"data-variant": variant,
 		className: cn(menuItemClasses, "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:*:[svg]:!text-destructive", className),
 		...props
 	});
-}
-function MenubarCheckboxItem({ className, children, checked, ...props }) {
+});
+var MenubarCheckboxItem = React.forwardRef(function MenubarCheckboxItem({ className, children, checked, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(CheckboxItem, {
+		ref,
 		"data-slot": "menubar-checkbox-item",
 		className: cn(menuItemClasses, "pl-8", className),
 		checked,
@@ -70,15 +76,16 @@ function MenubarCheckboxItem({ className, children, checked, ...props }) {
 			}) })
 		}), children]
 	});
-}
+});
 function MenubarRadioGroup(props) {
 	return /* @__PURE__ */ jsx(RadioGroup, {
 		"data-slot": "menubar-radio-group",
 		...props
 	});
 }
-function MenubarRadioItem({ className, children, ...props }) {
+var MenubarRadioItem = React.forwardRef(function MenubarRadioItem({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(RadioItem, {
+		ref,
 		"data-slot": "menubar-radio-item",
 		className: cn(menuItemClasses, "pl-8", className),
 		...props,
@@ -87,37 +94,41 @@ function MenubarRadioItem({ className, children, ...props }) {
 			children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "block size-2 rounded-full bg-foreground" }) })
 		}), children]
 	});
-}
-function MenubarLabel({ className, inset, ...props }) {
+});
+var MenubarLabel = React.forwardRef(function MenubarLabel({ className, inset, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Label, {
+		ref,
 		"data-slot": "menubar-label",
 		"data-inset": inset || void 0,
-		className: cn("px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase data-[inset]:pl-8", className),
+		className: cn(menuLabelClasses, "data-[inset]:pl-8", className),
 		...props
 	});
-}
-function MenubarSeparator({ className, ...props }) {
+});
+var MenubarSeparator = React.forwardRef(function MenubarSeparator({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Separator, {
+		ref,
 		"data-slot": "menubar-separator",
 		className: cn("-mx-1 my-1 h-px bg-border", className),
 		...props
 	});
-}
-function MenubarShortcut({ className, ...props }) {
+});
+var MenubarShortcut = React.forwardRef(function MenubarShortcut({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("span", {
+		ref,
 		"data-slot": "menubar-shortcut",
 		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
 		...props
 	});
-}
+});
 function MenubarSub(props) {
 	return /* @__PURE__ */ jsx(Sub, {
 		"data-slot": "menubar-sub",
 		...props
 	});
 }
-function MenubarSubTrigger({ className, inset, children, ...props }) {
+var MenubarSubTrigger = React.forwardRef(function MenubarSubTrigger({ className, inset, children, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(SubTrigger, {
+		ref,
 		"data-slot": "menubar-sub-trigger",
 		"data-inset": inset || void 0,
 		className: cn(menuItemClasses, "data-[state=open]:bg-secondary", className),
@@ -127,14 +138,15 @@ function MenubarSubTrigger({ className, inset, children, ...props }) {
 			"aria-hidden": true
 		})]
 	});
-}
-function MenubarSubContent({ className, ...props }) {
+});
+var MenubarSubContent = React.forwardRef(function MenubarSubContent({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(SubContent, {
+		ref,
 		"data-slot": "menubar-sub-content",
 		className: cn(surfaceClasses, "min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden p-1", className),
 		...props
 	}) });
-}
+});
 //#endregion
 export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };
 

package/dist/components/menubar.js.map

@@ -1 +1 @@
-{"version":3,"file":"menubar.js","names":["MenubarPrimitive.Root","MenubarPrimitive.Menu","MenubarPrimitive.Trigger","MenubarPrimitive.Group","MenubarPrimitive.Portal","MenubarPrimitive.Content","MenubarPrimitive.Item","itemClasses","MenubarPrimitive.CheckboxItem","MenubarPrimitive.ItemIndicator","MenubarPrimitive.RadioGroup","MenubarPrimitive.RadioItem","MenubarPrimitive.Label","MenubarPrimitive.Separator","MenubarPrimitive.Sub","MenubarPrimitive.SubTrigger","MenubarPrimitive.SubContent"],"sources":["../../src/components/menubar.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\nimport * as MenubarPrimitive from '../primitives/vendor/radix/react-menubar';\n\nimport { menuItemClasses as itemClasses, surfaceClasses } from './popover';\n\n/**\n * An application menu bar (File, Edit, View). Left/Right move between menus,\n * Down opens one, and an open menu follows the pointer across triggers. Rows\n * match DropdownMenu and ContextMenu.\n */\nfunction Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn('flex h-8 items-center gap-0.5 rounded-md border bg-surface p-0.5', className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarMenu(props: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />;\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        'flex h-7 items-center rounded-sm px-2.5 text-[13px] font-medium outline-none select-none hover:bg-muted focus-visible:shadow-[inset_0_0_0_1px_var(--ring)] data-[state=open]:bg-muted',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarGroup(props: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\nfunction MenubarContent({\n  className,\n  align = 'start',\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          surfaceClasses,\n          'max-h-(--radix-menubar-content-available-height) min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-x-hidden overflow-y-auto p-1',\n          className,\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  );\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset || undefined}\n      data-variant={variant}\n      className={cn(\n        itemClasses,\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:*:[svg]:!text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-foreground\" aria-hidden />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  );\n}\n\nfunction MenubarRadioGroup(props: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <span className=\"block size-2 rounded-full bg-foreground\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  );\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & { inset?: boolean }) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset || undefined}\n      className={cn(\n        'px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarSub(props: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & { inset?: boolean }) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset || undefined}\n      className={cn(itemClasses, 'data-[state=open]:bg-secondary', className)}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" aria-hidden />\n    </MenubarPrimitive.SubTrigger>\n  );\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.SubContent\n        data-slot=\"menubar-sub-content\"\n        className={cn(\n          surfaceClasses,\n          'min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden p-1',\n          className,\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  );\n}\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n};\n"],"mappings":"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"}
+{"version":3,"file":"menubar.js","names":["MenubarPrimitive.Root","MenubarPrimitive.Menu","MenubarPrimitive.Trigger","MenubarPrimitive.Group","MenubarPrimitive.Portal","MenubarPrimitive.Content","MenubarPrimitive.Item","itemClasses","MenubarPrimitive.CheckboxItem","MenubarPrimitive.ItemIndicator","MenubarPrimitive.RadioGroup","MenubarPrimitive.RadioItem","MenubarPrimitive.Label","MenubarPrimitive.Separator","MenubarPrimitive.Sub","MenubarPrimitive.SubTrigger","MenubarPrimitive.SubContent"],"sources":["../../src/components/menubar.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport * as React from 'react';\n\nimport { cn, focusRingClasses, touchTargetRowClasses } from '../lib/utils';\nimport * as MenubarPrimitive from '../primitives/vendor/radix/react-menubar';\n\nimport { menuItemClasses as itemClasses, menuLabelClasses, surfaceClasses } from './popover';\n\n/**\n * An application menu bar (File, Edit, View). Left/Right move between menus,\n * Down opens one, and an open menu follows the pointer across triggers. Rows\n * match DropdownMenu and ContextMenu.\n */\nconst Menubar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof MenubarPrimitive.Root>\n>(function Menubar({ className, ...props }, ref) {\n  return (\n    <MenubarPrimitive.Root\n      ref={ref}\n      data-slot=\"menubar\"\n      className={cn('flex h-8 items-center gap-0.5 rounded-md border bg-surface p-0.5', className)}\n      {...props}\n    />\n  );\n});\n\nfunction MenubarMenu(props: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />;\n}\n\n/** A 28px trigger with a 6px radius (the bar's 10px less its 2px inset); 44px tall to a touch. */\nconst MenubarTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof MenubarPrimitive.Trigger>\n>(function MenubarTrigger({ className, ...props }, ref) {\n  return (\n    <MenubarPrimitive.Trigger\n      ref={ref}\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        'flex h-7 items-center rounded-xs px-2.5 text-[13px] font-medium select-none hover:bg-muted data-[state=open]:bg-muted',\n        focusRingClasses,\n        'focus-visible:outline-offset-[-2px]',\n        touchTargetRowClasses,\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nfunction MenubarGroup(props: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\nconst MenubarContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof MenubarPrimitive.Content>\n>(function MenubarContent({ className, align = 'start', sideOffset = 4, ...props }, ref) {\n  return (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        data-slot=\"menubar-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          surfaceClasses,\n          'max-h-(--radix-menubar-content-available-height) min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-x-hidden overflow-y-auto p-1',\n          className,\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  );\n});\n\nexport interface MenubarItemProps extends React.ComponentProps<typeof MenubarPrimitive.Item> {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}\n\nconst MenubarItem = React.forwardRef<HTMLDivElement, MenubarItemProps>(function MenubarItem(\n  { className, inset, variant = 'default', ...props },\n  ref,\n) {\n  return (\n    <MenubarPrimitive.Item\n      ref={ref}\n      data-slot=\"menubar-item\"\n      data-inset={inset || undefined}\n      data-variant={variant}\n      className={cn(\n        itemClasses,\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:*:[svg]:!text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst MenubarCheckboxItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>\n>(function MenubarCheckboxItem({ className, children, checked, ...props }, ref) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      ref={ref}\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-foreground\" aria-hidden />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  );\n});\n\nfunction MenubarRadioGroup(props: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\nconst MenubarRadioItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof MenubarPrimitive.RadioItem>\n>(function MenubarRadioItem({ className, children, ...props }, ref) {\n  return (\n    <MenubarPrimitive.RadioItem\n      ref={ref}\n      data-slot=\"menubar-radio-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <span className=\"block size-2 rounded-full bg-foreground\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  );\n});\n\nconst MenubarLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof MenubarPrimitive.Label> & { inset?: boolean }\n>(function MenubarLabel({ className, inset, ...props }, ref) {\n  return (\n    <MenubarPrimitive.Label\n      ref={ref}\n      data-slot=\"menubar-label\"\n      data-inset={inset || undefined}\n      className={cn(menuLabelClasses, 'data-[inset]:pl-8', className)}\n      {...props}\n    />\n  );\n});\n\nconst MenubarSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof MenubarPrimitive.Separator>\n>(function MenubarSeparator({ className, ...props }, ref) {\n  return (\n    <MenubarPrimitive.Separator\n      ref={ref}\n      data-slot=\"menubar-separator\"\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n});\n\nconst MenubarShortcut = React.forwardRef<HTMLSpanElement, React.ComponentProps<'span'>>(\n  function MenubarShortcut({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        data-slot=\"menubar-shortcut\"\n        className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}\n        {...props}\n      />\n    );\n  },\n);\n\nfunction MenubarSub(props: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\nconst MenubarSubTrigger = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & { inset?: boolean }\n>(function MenubarSubTrigger({ className, inset, children, ...props }, ref) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      ref={ref}\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset || undefined}\n      className={cn(itemClasses, 'data-[state=open]:bg-secondary', className)}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" aria-hidden />\n    </MenubarPrimitive.SubTrigger>\n  );\n});\n\nconst MenubarSubContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof MenubarPrimitive.SubContent>\n>(function MenubarSubContent({ className, ...props }, ref) {\n  return (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.SubContent\n        ref={ref}\n        data-slot=\"menubar-sub-content\"\n        className={cn(\n          surfaceClasses,\n          'min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden p-1',\n          className,\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  );\n});\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n};\n"],"mappings":"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"}

package/dist/components/message-actions.d.ts

@@ -16,7 +16,7 @@ export interface MessageActionsProps extends React.ComponentProps<'div'> {
  * small icon buttons. Pass it to Message's `actions`, which shows it on
  * hover and focus (always on touch screens).
  */
-declare function MessageActions({ copyText, onRegenerate, onEdit, feedback, onFeedback, className, ...props }: MessageActionsProps): React.JSX.Element;
+declare const MessageActions: React.ForwardRefExoticComponent<Omit<MessageActionsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MessageEditorProps extends Omit<React.ComponentProps<'form'>, 'onSubmit'> {
     /** The text being edited. */
     defaultValue: string;
@@ -29,7 +29,7 @@ export interface MessageEditorProps extends Omit<React.ComponentProps<'form'>, '
  * Edit-and-resend in place of a sent message. Enter sends (never mid-IME
  * composition), Shift+Enter adds a line, Escape cancels.
  */
-declare function MessageEditor({ defaultValue, onSubmit, onCancel, submitLabel, className, ...props }: MessageEditorProps): React.JSX.Element;
+declare const MessageEditor: React.ForwardRefExoticComponent<Omit<MessageEditorProps, "ref"> & React.RefAttributes<HTMLFormElement>>;
 export interface MessageFile {
     name: string;
     /** Bytes. */
@@ -52,5 +52,5 @@ export interface MessageAttachmentsProps extends React.ComponentProps<'div'> {
  * Files sent with a message: voice notes play inline, images show a
  * thumbnail, anything else is a named chip that opens the file.
  */
-declare function MessageAttachments({ files, className, ...props }: MessageAttachmentsProps): React.JSX.Element | null;
+declare const MessageAttachments: React.ForwardRefExoticComponent<Omit<MessageAttachmentsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { MessageActions, MessageAttachments, MessageEditor };

package/dist/components/message-actions.js

@@ -1,5 +1,5 @@
 "use client";
-import { cn } from "../lib/utils.js";
+import { cn, focusRingClasses, noOutlineClasses } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { formatBytes } from "./attachment.js";
 import { VoiceMessage } from "./audio-player.js";
@@ -18,9 +18,10 @@ import ThumbsUp from "@burtson-labs/icons/react/thumbs-up";
 * small icon buttons. Pass it to Message's `actions`, which shows it on
 * hover and focus (always on touch screens).
 */
-function MessageActions({ copyText, onRegenerate, onEdit, feedback = null, onFeedback, className, ...props }) {
-	const small = "size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-10";
+var MessageActions = React.forwardRef(function MessageActions({ copyText, onRegenerate, onEdit, feedback = null, onFeedback, className, ...props }, ref) {
+	const small = "size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-11";
 	return /* @__PURE__ */ jsxs("div", {
+		ref,
 		"data-slot": "message-actions",
 		role: "toolbar",
 		"aria-label": "Message actions",
@@ -67,17 +68,18 @@ function MessageActions({ copyText, onRegenerate, onEdit, feedback = null, onFee
 			})] })
 		]
 	});
-}
+});
 /**
 * Edit-and-resend in place of a sent message. Enter sends (never mid-IME
 * composition), Shift+Enter adds a line, Escape cancels.
 */
-function MessageEditor({ defaultValue, onSubmit, onCancel, submitLabel = "Send", className, ...props }) {
+var MessageEditor = React.forwardRef(function MessageEditor({ defaultValue, onSubmit, onCancel, submitLabel = "Send", className, ...props }, ref) {
 	const [value, setValue] = React.useState(defaultValue);
 	const send = () => {
 		if (value.trim()) onSubmit(value.trim());
 	};
 	return /* @__PURE__ */ jsxs("form", {
+		ref,
 		"data-slot": "message-editor",
 		onSubmit: (e) => {
 			e.preventDefault();
@@ -100,7 +102,7 @@ function MessageEditor({ defaultValue, onSubmit, onCancel, submitLabel = "Send",
 					send();
 				}
 			},
-			className: "field-sizing-content max-h-60 min-h-16 w-full resize-none rounded-lg border border-ring bg-surface px-3 py-2 text-base leading-6 inset-ring-1 inset-ring-ring outline-hidden! sm:text-sm"
+			className: cn("field-sizing-content max-h-60 min-h-16 w-full resize-none rounded-lg border border-ring bg-surface px-3 py-2 text-base leading-6 inset-ring-1 inset-ring-ring sm:text-sm", noOutlineClasses)
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex justify-end gap-2",
 			children: [/* @__PURE__ */ jsx(Button, {
@@ -117,14 +119,15 @@ function MessageEditor({ defaultValue, onSubmit, onCancel, submitLabel = "Send",
 			})]
 		})]
 	});
-}
+});
 /**
 * Files sent with a message: voice notes play inline, images show a
 * thumbnail, anything else is a named chip that opens the file.
 */
-function MessageAttachments({ files, className, ...props }) {
+var MessageAttachments = React.forwardRef(function MessageAttachments({ files, className, ...props }, ref) {
 	if (!files.length) return null;
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "message-attachments",
 		className: cn("flex flex-wrap gap-2", className),
 		...props,
@@ -141,7 +144,7 @@ function MessageAttachments({ files, className, ...props }) {
 				href: f.href,
 				target: "_blank",
 				rel: "noreferrer",
-				className: "block overflow-hidden rounded-lg border outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20",
+				className: cn("block overflow-hidden rounded-lg border", focusRingClasses),
 				children: /* @__PURE__ */ jsx("img", {
 					src: f.href,
 					alt: f.name,
@@ -162,12 +165,12 @@ function MessageAttachments({ files, className, ...props }) {
 					children: formatBytes(f.size)
 				})
 			] });
-			const chipClass = "inline-flex max-w-64 items-center gap-2 rounded-md border bg-surface px-2.5 py-1.5 text-sm";
+			const chipClass = "inline-flex max-w-64 items-center gap-2 rounded-md border bg-surface px-2.5 py-1.5 text-sm pointer-coarse:min-h-11";
 			return f.href ? /* @__PURE__ */ jsx("a", {
 				href: f.href,
 				target: "_blank",
 				rel: "noreferrer",
-				className: cn(chipClass, "outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20"),
+				className: cn(chipClass, "hover:bg-muted", focusRingClasses),
 				children: chip
 			}, `${f.name}-${i}`) : /* @__PURE__ */ jsx("span", {
 				className: chipClass,
@@ -175,7 +178,7 @@ function MessageAttachments({ files, className, ...props }) {
 			}, `${f.name}-${i}`);
 		})
 	});
-}
+});
 //#endregion
 export { MessageActions, MessageAttachments, MessageEditor };