@ctrl-ui/react 0.9.5 → 0.9.6

package/dist/markdown-editor/toolbar.js

@@ -17,80 +17,110 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { BoldIcon, ChevronDownIcon, CodeIcon, ImageIcon, ItalicIcon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, QuoteIcon, RedoIcon, SquareCodeIcon, StrikethroughIcon, UndoIcon } from "lucide-react";
 import { useEditorState } from "@tiptap/react";
 //#region src/markdown-editor/toolbar.tsx
+function useMarkdownEditorFormatActions() {
+	const { editor } = useMarkdownEditor();
+	const state = useEditorState({
+		editor,
+		selector: ({ editor: current }) => ({
+			bold: Boolean(current?.isActive("bold")),
+			italic: Boolean(current?.isActive("italic")),
+			strike: Boolean(current?.isActive("strike")),
+			code: Boolean(current?.isActive("code")),
+			bulletList: Boolean(current?.isActive("bulletList")),
+			orderedList: Boolean(current?.isActive("orderedList")),
+			taskList: Boolean(current?.isActive("taskList")),
+			blockquote: Boolean(current?.isActive("blockquote")),
+			codeBlock: Boolean(current?.isActive("codeBlock"))
+		})
+	});
+	const focused = () => editor?.chain().focus();
+	return {
+		marks: [
+			{
+				label: "Bold",
+				Icon: BoldIcon,
+				active: Boolean(state?.bold),
+				run: () => focused()?.toggleBold().run()
+			},
+			{
+				label: "Italic",
+				Icon: ItalicIcon,
+				active: Boolean(state?.italic),
+				run: () => focused()?.toggleItalic().run()
+			},
+			{
+				label: "Strikethrough",
+				Icon: StrikethroughIcon,
+				active: Boolean(state?.strike),
+				run: () => focused()?.toggleStrike().run()
+			},
+			{
+				label: "Inline code",
+				Icon: CodeIcon,
+				active: Boolean(state?.code),
+				run: () => focused()?.toggleCode().run()
+			}
+		],
+		blocks: [
+			{
+				label: "Bullet list",
+				Icon: ListIcon,
+				active: Boolean(state?.bulletList),
+				run: () => focused()?.toggleBulletList().run()
+			},
+			{
+				label: "Numbered list",
+				Icon: ListOrderedIcon,
+				active: Boolean(state?.orderedList),
+				run: () => focused()?.toggleOrderedList().run()
+			},
+			{
+				label: "Task list",
+				Icon: ListChecksIcon,
+				active: Boolean(state?.taskList),
+				run: () => focused()?.toggleTaskList().run()
+			},
+			{
+				label: "Quote",
+				Icon: QuoteIcon,
+				active: Boolean(state?.blockquote),
+				run: () => focused()?.toggleBlockquote().run()
+			},
+			{
+				label: "Code block",
+				Icon: SquareCodeIcon,
+				active: Boolean(state?.codeBlock),
+				run: () => focused()?.toggleCodeBlock().run()
+			}
+		]
+	};
+}
+function MarkdownEditorFormatButton({ action, onMouseDown }) {
+	const { editor, disabled, source } = useMarkdownEditor();
+	const { label, Icon, active, run } = action;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx(ToolbarButton, {
+			type: "button",
+			iconOnly: true,
+			"aria-label": label,
+			"aria-pressed": active,
+			disabled: disabled || source || !editor,
+			onMouseDown,
+			onClick: run
+		}),
+		children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" })
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: label })] });
+}
 function MarkdownEditorToolbar({ children }) {
 	const { editor, disabled, source, sourceRequired, setSource, uploads } = useMarkdownEditor();
-	const state = useEditorState({
+	const { marks, blocks } = useMarkdownEditorFormatActions();
+	const history = useEditorState({
 		editor,
 		selector: ({ editor: current }) => ({
-			bold: current?.isActive("bold"),
-			italic: current?.isActive("italic"),
-			strike: current?.isActive("strike"),
-			code: current?.isActive("code"),
-			bulletList: current?.isActive("bulletList"),
-			orderedList: current?.isActive("orderedList"),
-			taskList: current?.isActive("taskList"),
-			blockquote: current?.isActive("blockquote"),
-			codeBlock: current?.isActive("codeBlock"),
 			undo: current?.can().undo(),
 			redo: current?.can().redo()
 		})
 	});
-	const actions = [
-		{
-			label: "Bold",
-			Icon: BoldIcon,
-			active: state?.bold,
-			run: () => editor?.chain().focus().toggleBold().run()
-		},
-		{
-			label: "Italic",
-			Icon: ItalicIcon,
-			active: state?.italic,
-			run: () => editor?.chain().focus().toggleItalic().run()
-		},
-		{
-			label: "Strikethrough",
-			Icon: StrikethroughIcon,
-			active: state?.strike,
-			run: () => editor?.chain().focus().toggleStrike().run()
-		},
-		{
-			label: "Inline code",
-			Icon: CodeIcon,
-			active: state?.code,
-			run: () => editor?.chain().focus().toggleCode().run()
-		},
-		{
-			label: "Bullet list",
-			Icon: ListIcon,
-			active: state?.bulletList,
-			run: () => editor?.chain().focus().toggleBulletList().run()
-		},
-		{
-			label: "Numbered list",
-			Icon: ListOrderedIcon,
-			active: state?.orderedList,
-			run: () => editor?.chain().focus().toggleOrderedList().run()
-		},
-		{
-			label: "Task list",
-			Icon: ListChecksIcon,
-			active: state?.taskList,
-			run: () => editor?.chain().focus().toggleTaskList().run()
-		},
-		{
-			label: "Quote",
-			Icon: QuoteIcon,
-			active: state?.blockquote,
-			run: () => editor?.chain().focus().toggleBlockquote().run()
-		},
-		{
-			label: "Code block",
-			Icon: SquareCodeIcon,
-			active: state?.codeBlock,
-			run: () => editor?.chain().focus().toggleCodeBlock().run()
-		}
-	];
 	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "markdown-editor",
 		"data-control-family": "markdown-editor",
@@ -106,18 +136,10 @@ function MarkdownEditorToolbar({ children }) {
 				children: [
 					/* @__PURE__ */ jsx(MarkdownEditorHeading, {}),
 					/* @__PURE__ */ jsx(ToolbarSeparator, {}),
-					actions.map(({ label, Icon, active, run }) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-						render: /* @__PURE__ */ jsx(ToolbarButton, {
-							type: "button",
-							iconOnly: true,
-							"aria-label": label,
-							"aria-pressed": Boolean(active),
-							disabled: disabled || source || !editor,
-							onMouseDown: (event) => event.preventDefault(),
-							onClick: run
-						}),
-						children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" })
-					}), /* @__PURE__ */ jsx(TooltipContent, { children: label })] }, label)),
+					[...marks, ...blocks].map((action) => /* @__PURE__ */ jsx(MarkdownEditorFormatButton, {
+						action,
+						onMouseDown: (event) => event.preventDefault()
+					}, action.label)),
 					/* @__PURE__ */ jsx(MarkdownEditorLink, {}),
 					/* @__PURE__ */ jsx(MarkdownEditorImage, {}),
 					/* @__PURE__ */ jsx(ToolbarSeparator, {}),
@@ -125,7 +147,7 @@ function MarkdownEditorToolbar({ children }) {
 						type: "button",
 						iconOnly: true,
 						"aria-label": "Undo",
-						disabled: disabled || source || !state?.undo,
+						disabled: disabled || source || !history?.undo,
 						onClick: () => editor?.chain().focus().undo().run(),
 						children: /* @__PURE__ */ jsx(UndoIcon, { "aria-hidden": "true" })
 					}),
@@ -133,7 +155,7 @@ function MarkdownEditorToolbar({ children }) {
 						type: "button",
 						iconOnly: true,
 						"aria-label": "Redo",
-						disabled: disabled || source || !state?.redo,
+						disabled: disabled || source || !history?.redo,
 						onClick: () => editor?.chain().focus().redo().run(),
 						children: /* @__PURE__ */ jsx(RedoIcon, { "aria-hidden": "true" })
 					}),
@@ -395,4 +417,4 @@ function MarkdownEditorUploads() {
 	}) : null] });
 }
 //#endregion
-export { MarkdownEditorImage, MarkdownEditorLink, MarkdownEditorToolbar, MarkdownEditorUploads };
+export { MarkdownEditorFormatButton, MarkdownEditorHeading, MarkdownEditorImage, MarkdownEditorLink, MarkdownEditorToolbar, MarkdownEditorUploads, useMarkdownEditorFormatActions };

package/dist/styles/index.css

@@ -2,37 +2,39 @@
 @import "./recipes/accordion.css";
 @import "./recipes/button.css";
 @import "./recipes/button-states.css";
+@import "./recipes/swap.css";
 @import "./recipes/action-bar.css";
 @import "./recipes/collapsible.css";
 @import "./effects.css";
 @import "./recipes/progressive-blur.css";
 @import "./recipes/scroll-area.css";
 @import "./recipes/activity.css";
-@import "./recipes/alert.css";
+@import "./recipes/badge.css";
+@import "./recipes/card.css";
 @import "./recipes/popup.css";
 @import "./recipes/popup-controls.css";
+@import "./recipes/popup-drawer.css";
 @import "./recipes/popup-lists.css";
 @import "./recipes/popup-motion.css";
-@import "./recipes/page-layout.css";
-@import "./recipes/popup-drawer.css";
 @import "./recipes/track-highlight.css";
 @import "./recipes/sidebar.css";
 @import "./recipes/sidebar-menu.css";
 @import "./recipes/sidebar-mobile.css";
 @import "./recipes/sidebar-parts.css";
+@import "./recipes/timeline.css";
+@import "./type-scale.css";
+@import "./recipes/alert.css";
+@import "./recipes/page-layout.css";
 @import "./recipes/app-shell-header.css";
 @import "./recipes/field.css";
 @import "./recipes/field-parts.css";
-@import "./type-scale.css";
 @import "./recipes/audio-device-select.css";
 @import "./recipes/audio-visualizer.css";
 @import "./recipes/audio-recorder.css";
 @import "./recipes/avatar.css";
-@import "./recipes/badge.css";
 @import "./recipes/breadcrumb.css";
 @import "./recipes/button-group.css";
 @import "./recipes/calendar.css";
-@import "./recipes/card.css";
 @import "./recipes/channel-strip.css";
 @import "./recipes/chart.css";
 @import "./recipes/chat-message.css";
@@ -53,10 +55,10 @@
 @import "./recipes/gradient-editor.css";
 @import "./recipes/empty.css";
 @import "./recipes/context.css";
+@import "./recipes/toolbar.css";
 @import "./recipes/infinite-canvas.css";
 @import "./recipes/resizable.css";
 @import "./recipes/separator.css";
-@import "./recipes/toolbar.css";
 @import "./recipes/kbd.css";
 @import "./recipes/markdown.css";
 @import "./recipes/label.css";
@@ -91,8 +93,8 @@
 @import "./recipes/table-of-contents.css";
 @import "./recipes/task-list.css";
 @import "./recipes/thread-rail.css";
-@import "./recipes/timeline.css";
 @import "./recipes/popup-toast.css";
+@import "./recipes/tool-approval.css";
 @import "./recipes/transcript-divider.css";
 @import "./recipes/tree.css";
 @import "./recipes/user-ask.css";

package/dist/styles/recipes/activity.css

@@ -72,6 +72,10 @@
     color: var(--destructive-text);
   }
 
+  :where([data-control-family="activity"][data-slot="root"][data-activity-state="waiting"] [data-slot="icon"]) {
+    color: var(--warning-text);
+  }
+
   :where([data-control-family="activity"][data-slot="title"]) {
     color: currentColor;
     font-size: var(--text-label);
@@ -87,6 +91,10 @@
     color: var(--destructive-text);
   }
 
+  :where([data-control-family="activity"][data-slot="status"][data-status="waiting"]) {
+    color: var(--warning-text);
+  }
+
   :where([data-control-family="activity"][data-slot="detail-label"]) {
     color: var(--muted-foreground);
     font-size: var(--text-micro);

package/dist/styles/recipes/button-group.css

@@ -44,30 +44,36 @@
 
   :where(
     [data-control-family="button-group"][data-orientation="horizontal"]
-      > :not([data-control-family="track-highlight"])
-      + :not([data-control-family="track-highlight"])
+      > :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns])
+      ~ :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns])
   ) {
     margin-inline-start: -1px;
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
 
-  :where([data-control-family="button-group"][data-orientation="horizontal"] > :has(~ :not([data-control-family="track-highlight"]))) {
+  :where(
+    [data-control-family="button-group"][data-orientation="horizontal"]
+      > :has(~ :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns]))
+  ) {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
   }
 
   :where(
     [data-control-family="button-group"][data-orientation="vertical"]
-      > :not([data-control-family="track-highlight"])
-      + :not([data-control-family="track-highlight"])
+      > :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns])
+      ~ :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns])
   ) {
     margin-block-start: -1px;
     border-start-start-radius: 0;
     border-start-end-radius: 0;
   }
 
-  :where([data-control-family="button-group"][data-orientation="vertical"] > :has(~ :not([data-control-family="track-highlight"]))) {
+  :where(
+    [data-control-family="button-group"][data-orientation="vertical"]
+      > :has(~ :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns]))
+  ) {
     border-end-start-radius: 0;
     border-end-end-radius: 0;
   }

package/dist/styles/recipes/button.css

@@ -95,7 +95,12 @@
   :where(
     [data-control-family="button"][data-control="true"][data-size]:not([data-icon-only="true"]):has(
       > :is(svg, [data-slot="icon"]):first-child:not(:only-child),
-      > [data-slot="content"] > :is(svg, [data-slot="icon"]):first-child:not(:only-child)
+      > [data-slot="content"] > :is(svg, [data-slot="icon"]):first-child:not(:only-child),
+      > [data-control-family="swap"]:first-child > [data-state="active"] > :is(svg, [data-slot="icon"]):first-child:not(:only-child),
+      > [data-slot="content"]
+        > [data-control-family="swap"]:first-child
+        > [data-state="active"]
+        > :is(svg, [data-slot="icon"]):first-child:not(:only-child)
     )
   ) {
     padding-inline-start: var(--cui-button-icon-padding-inline);
@@ -104,7 +109,12 @@
   :where(
     [data-control-family="button"][data-control="true"][data-size]:not([data-icon-only="true"]):has(
       > :is(svg, [data-slot="icon"]):last-child:not(:only-child),
-      > [data-slot="content"] > :is(svg, [data-slot="icon"]):last-child:not(:only-child)
+      > [data-slot="content"] > :is(svg, [data-slot="icon"]):last-child:not(:only-child),
+      > [data-control-family="swap"]:last-child > [data-state="active"] > :is(svg, [data-slot="icon"]):last-child:not(:only-child),
+      > [data-slot="content"]
+        > [data-control-family="swap"]:last-child
+        > [data-state="active"]
+        > :is(svg, [data-slot="icon"]):last-child:not(:only-child)
     )
   ) {
     padding-inline-end: var(--cui-button-icon-padding-inline);

package/dist/styles/recipes/chat-message-edit.css

@@ -5,15 +5,9 @@
   }
 
   :where([data-control-family="chat-message"][data-slot="content"][data-editable]) {
+    --focus-ring-offset: calc(var(--focus-ring-width) * -1);
     position: relative;
     display: grid;
-    outline: var(--focus-ring-width) var(--focus-ring-style) transparent;
-    outline-offset: calc(var(--focus-ring-width) * -1);
-    transition: outline-color var(--duration-fast) var(--ease-standard);
-  }
-
-  :where([data-control-family="chat-message"][data-slot="content"][data-editable]:focus-within) {
-    outline-color: var(--focus-ring);
   }
 
   :where([data-control-family="chat-message"][data-slot="editable"] :is([data-slot="edit-value"], [data-slot="edit-sizer"])) {
@@ -63,7 +57,6 @@
     white-space: pre-wrap;
     overflow-wrap: anywhere;
     scrollbar-width: thin;
-    outline: none;
     visibility: hidden;
   }
 
@@ -75,21 +68,13 @@
     visibility: hidden;
   }
 
-  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-toolbars"]) {
-    display: grid;
-  }
-
-  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-toolbar"]) {
-    grid-area: 1 / 1;
-    min-inline-size: 0;
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity var(--duration-fast) var(--ease-standard);
+  :where([data-control-family="chat-message"][data-slot="editable"] :is([data-slot="read-actions"], [data-slot="edit-actions"])) {
+    contain: inline-size;
   }
 
-  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-toolbar"][data-active]) {
-    visibility: visible;
-    opacity: 1;
+  :where([data-control-family="chat-message"][data-slot="editable"][data-editing] [data-slot="read-actions"]),
+  :where([data-control-family="chat-message"][data-slot="editable"]:not([data-editing]) [data-slot="edit-actions"]) {
+    display: none;
   }
 
   :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-error"]) {

package/dist/styles/recipes/infinite-canvas.css

@@ -1,34 +1,31 @@
 @layer components {
   :where([data-control-family="infinite-canvas"][data-slot="root"]) {
+    --_infinite-canvas-controls-item-radius: min(var(--radius-sm), calc(var(--control-h-sm) / 2));
+    --_infinite-canvas-controls-radius: calc(
+      var(--_infinite-canvas-controls-item-radius) +
+      clamp(0px, calc(var(--_infinite-canvas-controls-item-radius) * 1000), var(--spacing))
+    );
     --cui-infinite-canvas-background: var(--canvas);
     --cui-infinite-canvas-grid-dot-color: var(--canvas-grid-dot);
     --cui-infinite-canvas-border-color: var(--border);
-    --cui-infinite-canvas-controls-item-radius: min(var(--radius-sm), calc(var(--control-h-sm) / 2));
-    --cui-infinite-canvas-controls-padding: calc(var(--spacing) * 1);
-    --cui-infinite-canvas-controls-radius: calc(
-      var(--cui-infinite-canvas-controls-item-radius) +
-      clamp(0px, calc(var(--cui-infinite-canvas-controls-item-radius) * 1000), var(--cui-infinite-canvas-controls-padding))
-    );
     --cui-infinite-canvas-radius: max(
       var(--radius-panel),
-      calc(
-        var(--cui-infinite-canvas-controls-radius) +
-        clamp(0px, calc(var(--cui-infinite-canvas-controls-radius) * 1000), var(--spacing) * 2)
-      )
+      calc(var(--_infinite-canvas-controls-radius) + clamp(0px, calc(var(--_infinite-canvas-controls-radius) * 1000), var(--spacing) * 2))
     );
     --cui-infinite-canvas-padding: max(
       calc(var(--spacing) * 2),
-      calc(var(--cui-infinite-canvas-radius) - var(--cui-infinite-canvas-controls-radius))
+      calc(var(--cui-infinite-canvas-radius) - var(--_infinite-canvas-controls-radius))
     );
-    --cui-infinite-canvas-controls-background: var(--card);
-    --cui-infinite-canvas-controls-border-color: var(--border);
-    --cui-infinite-canvas-controls-shadow: var(--shadow-sm);
     border-radius: var(--cui-infinite-canvas-radius);
     background-color: var(--cui-infinite-canvas-background);
     background-image: radial-gradient(circle at center, var(--cui-infinite-canvas-grid-dot-color) 1px, transparent 1px);
     box-shadow: 0 0 0 1px var(--cui-infinite-canvas-border-color);
   }
 
+  :where([data-control-family="infinite-canvas"][data-slot="root"]:focus-visible) {
+    --focus-ring-offset: calc(var(--focus-ring-width) * -1);
+  }
+
   :where([data-control-family="infinite-canvas"][data-slot="root"][data-easing]) {
     transition-property: background-position, background-size;
     transition-duration: var(--duration-base);
@@ -41,17 +38,15 @@
     transition: transform var(--duration-base) var(--ease-standard);
   }
 
+  :where(
+    [data-control-family="infinite-canvas"][data-slot="root"][data-moving] [data-control-family="infinite-canvas"][data-slot="content"]
+  ) {
+    will-change: transform;
+  }
+
   :where([data-control-family="infinite-canvas"][data-slot="controls"]) {
-    --nest-radius: var(--cui-infinite-canvas-controls-item-radius);
     inset-inline-end: var(--cui-infinite-canvas-padding);
     inset-block-end: var(--cui-infinite-canvas-padding);
-    gap: calc(var(--spacing) * 0.5);
-    padding: var(--cui-infinite-canvas-controls-padding);
-    border-radius: var(--cui-infinite-canvas-controls-radius);
-    background-color: var(--cui-infinite-canvas-controls-background);
-    box-shadow:
-      var(--cui-infinite-canvas-controls-shadow),
-      0 0 0 1px var(--cui-infinite-canvas-controls-border-color);
   }
 
   :where([data-control-family="infinite-canvas"][data-slot="content"]) {
@@ -88,38 +83,3 @@
   inherits: true;
   initial-value: 0px;
 }
-
-@property --cui-infinite-canvas-controls-item-radius {
-  syntax: "<length-percentage>";
-  inherits: true;
-  initial-value: 0px;
-}
-
-@property --cui-infinite-canvas-controls-padding {
-  syntax: "<length-percentage>";
-  inherits: true;
-  initial-value: 0px;
-}
-
-@property --cui-infinite-canvas-controls-radius {
-  syntax: "<length-percentage>";
-  inherits: true;
-  initial-value: 0px;
-}
-
-@property --cui-infinite-canvas-controls-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-infinite-canvas-controls-border-color {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-infinite-canvas-controls-shadow {
-  syntax: "*";
-  inherits: true;
-}

package/dist/styles/recipes/markdown-editor.css

@@ -41,6 +41,12 @@
     padding-inline: var(--cui-markdown-editor-padding);
     white-space: nowrap;
   }
+  :where([data-control-family="markdown-editor"][data-slot="bubble-menu"]) {
+    z-index: 1;
+    white-space: nowrap;
+    transform-origin: bottom center;
+    animation: cui-markdown-editor-bubble-enter var(--duration-fast) var(--ease-emphasized);
+  }
   :where([data-control-family="markdown-editor"] [data-markdown-drag-handle]) {
     position: absolute;
     inset-inline-start: calc(var(--cui-markdown-editor-padding) / 2);
@@ -170,6 +176,12 @@
     border: var(--cui-markdown-editor-border-width) solid var(--cui-markdown-editor-border-color);
     padding: var(--cui-markdown-editor-padding);
   }
+  @keyframes cui-markdown-editor-bubble-enter {
+    from {
+      opacity: 0;
+      scale: 0.96;
+    }
+  }
 }
 
 @property --cui-markdown-editor-background {