@ctrl-ui/react 0.9.16 → 0.9.18

package/dist/markdown-editor/toolbar.js

@@ -6,15 +6,14 @@ import { ChatComposerAttachment, ChatComposerAttachments } from "../chat-compose
 import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "../ui/popover.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
 import { useMarkdownEditor } from "./context.js";
-import { isEditorUrl } from "./extensions.js";
 import { markdownImageTypes } from "./uploads.js";
 import { Input } from "../ui/input.js";
 import { Toolbar, ToolbarButton, ToolbarSeparator } from "../ui/toolbar.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { Label } from "../ui/label.js";
+import { BoldIcon, ChevronDownIcon, CodeIcon, ImageIcon, ItalicIcon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, QuoteIcon, RedoIcon, SquareCodeIcon, StrikethroughIcon, UndoIcon } from "lucide-react";
 import { useId, useRef, useState } from "react";
 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() {
@@ -221,11 +220,11 @@ function MarkdownEditorHeading() {
 	})] });
 }
 function MarkdownEditorLink() {
-	const { editor, disabled, source } = useMarkdownEditor();
+	const { editor, disabled, source, isUrlAllowed } = useMarkdownEditor();
 	const [open, setOpen] = useState(false);
 	const [url, setUrl] = useState("");
 	const inputId = useId();
-	const valid = isEditorUrl(url.trim());
+	const valid = isUrlAllowed(url.trim(), "link");
 	function apply() {
 		if (!valid || disabled || source) return;
 		editor?.chain().focus().extendMarkRange("link").setLink({ href: url.trim() }).run();
@@ -291,14 +290,14 @@ function MarkdownEditorLink() {
 	});
 }
 function MarkdownEditorImage() {
-	const { editor, disabled, source, canUpload, upload } = useMarkdownEditor();
+	const { editor, disabled, source, canUpload, upload, isUrlAllowed } = useMarkdownEditor();
 	const [open, setOpen] = useState(false);
 	const [url, setUrl] = useState("");
 	const [alt, setAlt] = useState("");
 	const inputId = useId();
 	const altId = useId();
 	const fileInput = useRef(null);
-	const valid = isEditorUrl(url.trim(), true);
+	const valid = isUrlAllowed(url.trim(), "image");
 	function insert() {
 		if (!valid || disabled || source) return;
 		editor?.chain().focus().setImage({

package/dist/markdown-editor.d.ts

@@ -1,6 +1,8 @@
 import { MarkdownEditorKnobStyle } from "./knob-contracts/markdown-editor-knobs.js";
+import { MarkdownUrlPolicy } from "./markdown-editor/extensions.js";
 import { MarkdownImageUploader } from "./markdown-editor/uploads.js";
 import { CSSProperties, ComponentProps } from "react";
+import { Extensions } from "@tiptap/core";
 //#region src/markdown-editor.d.ts
 export type MarkdownEditorStatus = {
   isEmpty: boolean;
@@ -14,9 +16,13 @@ export type MarkdownEditorProps = Omit<ComponentProps<"div">, "defaultValue" | "
   onUploadImage?: MarkdownImageUploader;
   maxImageBytes?: number;
   onStatusChange?: (status: MarkdownEditorStatus) => void;
+  /** Extra TipTap extensions, applied after the built-in Markdown set. Read once, when the editor mounts. */
+  extensions?: Extensions;
+  /** Which link and image URLs the editor keeps; defaults to URLs that survive a reload. Read once, when the editor mounts. */
+  isUrlAllowed?: MarkdownUrlPolicy;
   style?: CSSProperties & MarkdownEditorKnobStyle;
 };
-export declare function MarkdownEditor({ value, defaultValue, onValueChange, disabled, onUploadImage, maxImageBytes, onStatusChange, children, className, ...props }: MarkdownEditorProps): import("react").JSX.Element;
+export declare function MarkdownEditor({ value, defaultValue, onValueChange, disabled, onUploadImage, maxImageBytes, onStatusChange, extensions: extraExtensions, isUrlAllowed: urlPolicy, children, className, ...props }: MarkdownEditorProps): import("react").JSX.Element;
 export type MarkdownEditorContentProps = {
   label: string;
   placeholder?: string;

package/dist/markdown-editor.js

@@ -3,7 +3,7 @@ import { cn } from "./lib/cn.js";
 import { Textarea } from "./ui/textarea.js";
 import { MarkdownEditorContext, useMarkdownEditor } from "./markdown-editor/context.js";
 import { MarkdownEditorDragHandle } from "./markdown-editor/drag-handle.js";
-import { createMarkdownCodec, hasMarkdownContent, markdownExtensions, requiresMarkdownSource } from "./markdown-editor/extensions.js";
+import { createMarkdownCodec, hasMarkdownContent, markdownExtensions, persistentUrlPolicy, requiresMarkdownSource } from "./markdown-editor/extensions.js";
 import { useImageUploads } from "./markdown-editor/use-image-uploads.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,7 +11,7 @@ import { Slice } from "@tiptap/pm/model";
 import { EditorState } from "@tiptap/pm/state";
 import { EditorContent, useEditor } from "@tiptap/react";
 //#region src/markdown-editor.tsx
-function MarkdownEditor({ value, defaultValue = "", onValueChange, disabled = false, onUploadImage, maxImageBytes = 10485760, onStatusChange, children, className, ...props }) {
+function MarkdownEditor({ value, defaultValue = "", onValueChange, disabled = false, onUploadImage, maxImageBytes = 10485760, onStatusChange, extensions: extraExtensions, isUrlAllowed: urlPolicy = persistentUrlPolicy, children, className, ...props }) {
 	const [internalValue, setInternalValue] = useState(defaultValue);
 	const markdown = value ?? internalValue;
 	const [sourceMode, setSourceMode] = useState(false);
@@ -19,11 +19,20 @@ function MarkdownEditor({ value, defaultValue = "", onValueChange, disabled = fa
 		role: "textbox",
 		"aria-multiline": "true"
 	});
-	const [codec] = useState(createMarkdownCodec);
-	const sourceRequired = useMemo(() => requiresMarkdownSource(markdown, codec), [markdown, codec]);
+	const [isUrlAllowed] = useState(() => urlPolicy);
+	const [extensionOptions] = useState(() => ({
+		extensions: extraExtensions,
+		isUrlAllowed
+	}));
+	const [codec] = useState(() => createMarkdownCodec(extensionOptions));
+	const sourceRequired = useMemo(() => requiresMarkdownSource(markdown, codec, isUrlAllowed), [
+		markdown,
+		codec,
+		isUrlAllowed
+	]);
 	const source = sourceMode || sourceRequired;
 	const lastValue = useRef(markdown);
-	const [extensions] = useState(markdownExtensions);
+	const [extensions] = useState(() => markdownExtensions(extensionOptions));
 	const handlers = useRef(null);
 	function setMarkdown(next) {
 		lastValue.current = next;
@@ -49,7 +58,7 @@ function MarkdownEditor({ value, defaultValue = "", onValueChange, disabled = fa
 					return true;
 				}
 				const text = event.clipboardData?.getData("text/plain");
-				if (!text || event.clipboardData?.getData("text/html") || requiresMarkdownSource(text, codec)) return false;
+				if (!text || event.clipboardData?.getData("text/html") || requiresMarkdownSource(text, codec, isUrlAllowed)) return false;
 				const document = view.state.schema.nodeFromJSON(codec.parse(text));
 				event.preventDefault();
 				view.dispatch(view.state.tr.replaceSelection(Slice.maxOpen(document.content)).scrollIntoView());
@@ -127,6 +136,7 @@ function MarkdownEditor({ value, defaultValue = "", onValueChange, disabled = fa
 			setMarkdown,
 			setContentAttributes,
 			canUpload: Boolean(onUploadImage),
+			isUrlAllowed,
 			...imageUploads
 		},
 		children: /* @__PURE__ */ jsx("div", {

package/dist/source-badge.js

@@ -2,8 +2,8 @@
 import { cn } from "./lib/cn.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar.js";
 import { Badge } from "./ui/badge.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Globe } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/source-badge.tsx
 function sourceHostname(href) {
 	try {

package/dist/styles/index.css

@@ -20,6 +20,7 @@
 @import "./recipes/sidebar.css";
 @import "./recipes/sidebar-menu.css";
 @import "./recipes/sidebar-mobile.css";
+@import "./recipes/sidebar-panes.css";
 @import "./recipes/sidebar-parts.css";
 @import "./recipes/timeline.css";
 @import "./recipes/alert.css";

package/dist/styles/recipes/action-bar.css

@@ -12,16 +12,25 @@
   }
 
   @media (hover: hover) and (pointer: fine) {
-    :where([data-control-family="chat-layout"][data-slot="turn"] [data-control-family="action-bar"][data-slot="root"]) {
+    :where(
+        :is([data-control-family="chat-layout"][data-slot="turn"], [data-control-family="chat-message"][data-slot="editable"])
+          [data-control-family="action-bar"][data-slot="root"]
+      ) {
       opacity: var(--cui-action-bar-hidden-opacity);
     }
 
-    :where([data-control-family="chat-layout"][data-slot="turn"]:hover [data-control-family="action-bar"][data-slot="root"]) {
+    :where(
+        :is([data-control-family="chat-layout"][data-slot="turn"], [data-control-family="chat-message"][data-slot="editable"]):hover
+          [data-control-family="action-bar"][data-slot="root"]
+      ) {
       opacity: var(--cui-action-bar-visible-opacity);
     }
   }
 
-  :where([data-control-family="chat-layout"][data-slot="turn"]:focus-within [data-control-family="action-bar"][data-slot="root"]) {
+  :where(
+    :is([data-control-family="chat-layout"][data-slot="turn"], [data-control-family="chat-message"][data-slot="editable"]):focus-within
+      [data-control-family="action-bar"][data-slot="root"]
+  ) {
     opacity: var(--cui-action-bar-visible-opacity);
   }
 }

package/dist/styles/recipes/popup-controls.css

@@ -166,7 +166,7 @@
     border-block-end: 1px solid var(--cui-popup-separator-color);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="hover-card"][data-slot="trigger"]:is(a)) {
+  :where([data-popup-kind="hover-card"][data-slot="trigger"]:is(a)) {
     border-radius: var(--radius-sm);
     color: var(--foreground);
     font-weight: var(--font-weight-medium);
@@ -178,12 +178,12 @@
     transition: text-decoration-color var(--duration-fast) var(--ease-standard);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="hover-card"][data-slot="trigger"]:is(a)[data-popup-open]) {
+  :where([data-popup-kind="hover-card"][data-slot="trigger"]:is(a)[data-popup-open]) {
     text-decoration-color: var(--foreground);
   }
 
   @media (hover: hover) {
-    :where([data-control-family="popup"][data-popup-kind="hover-card"][data-slot="trigger"]:is(a):hover) {
+    :where([data-popup-kind="hover-card"][data-slot="trigger"]:is(a):hover) {
       text-decoration-color: var(--foreground);
     }
   }

package/dist/styles/recipes/resizable.css

@@ -25,6 +25,21 @@
     --cui-resizable-group-radius: 0px;
   }
 
+  /* biome-ignore-start lint/complexity/noImportantStyles: react-resizable-panels sets inline display on the group and panels. */
+  :where([data-control-family="resizable"][data-slot="panel-group"][data-layout="contents"]) {
+    display: contents !important;
+  }
+
+  :where([data-control-family="resizable"][data-slot="panel-group"]:not([data-layout="resizable"]) > [data-slot="panel"]),
+  :where([data-control-family="resizable"][data-slot="panel-group"]:not([data-layout="resizable"]) > [data-slot="panel"] > div) {
+    display: contents !important;
+  }
+
+  :where([data-control-family="resizable"][data-slot="panel-group"]:not([data-layout="resizable"]) > [data-slot="handle"]) {
+    display: none !important;
+  }
+  /* biome-ignore-end lint/complexity/noImportantStyles: react-resizable-panels sets inline display on the group and panels. */
+
   :where([data-control-family="resizable"][data-slot="handle"]) {
     --_resizable-gradient-color: var(--cui-resizable-handle-hover-background);
     background-color: var(--cui-resizable-handle-background);

package/dist/styles/recipes/sidebar-panes.css

@@ -0,0 +1,192 @@
+@layer components {
+  :where([data-control-family="sidebar"][data-slot="root"]) {
+    --cui-sidebar-icon-rail-border-width: 1px;
+    --cui-sidebar-icon-rail-border-color: var(--sidebar-border);
+    --cui-sidebar-raised-background: var(--cui-sidebar-inset-background);
+    --cui-sidebar-raised-border-width: var(--cui-sidebar-inset-border-width);
+    --cui-sidebar-raised-border-color: var(--cui-sidebar-inset-border-color);
+    --cui-sidebar-raised-radius: var(--cui-sidebar-inset-radius);
+    --cui-sidebar-raised-shadow: var(--cui-sidebar-inset-shadow);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="root"]:is([data-variant="page"], [data-variant="inset"])[data-state]),
+  :where([data-control-family="sidebar"][data-slot="root"][data-state="collapsed"]) {
+    --cui-sidebar-icon-rail-border-width: 0px;
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-slot="root"][data-variant="sidebar"][data-state="expanded"]:has(
+      [data-control-family="sidebar"][data-slot="panel"][data-layer="content"]
+    )
+  ) {
+    --cui-sidebar-container-border-width: 0px;
+  }
+
+  :where([data-control-family="sidebar"]:is([data-slot="root"], [data-slot="inner"])) {
+    flex-direction: column;
+  }
+
+  :where([data-control-family="sidebar"]:is([data-slot="root"], [data-slot="inner"]):has(> [data-slot="panel"])) {
+    flex-direction: row;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="root"][data-side="right"]:has(> [data-slot="panel"])),
+  :where(
+    [data-control-family="sidebar"][data-slot="root"][data-side="right"]
+      [data-control-family="sidebar"][data-slot="inner"]:has(> [data-slot="panel"])
+  ) {
+    flex-direction: row-reverse;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="icon-rail"]) {
+    flex: none;
+    inline-size: var(--sidebar-width-icon);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="root"][data-side="left"] [data-control-family="sidebar"][data-slot="icon-rail"]) {
+    border-inline-end: var(--cui-sidebar-icon-rail-border-width) solid var(--cui-sidebar-icon-rail-border-color);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="root"][data-side="right"] [data-control-family="sidebar"][data-slot="icon-rail"]) {
+    border-inline-start: var(--cui-sidebar-icon-rail-border-width) solid var(--cui-sidebar-icon-rail-border-color);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="panel"]) {
+    flex: 1 1 0;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="root"][data-collapsible="icon"] [data-control-family="sidebar"][data-slot="panel"]) {
+    visibility: hidden;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="icon-rail"][data-layer="raised"]),
+  :where([data-control-family="sidebar"][data-slot="panel"][data-layer="raised"]) {
+    background-color: var(--cui-sidebar-raised-background);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="panel"][data-layer="content"]) {
+    background-color: var(--cui-sidebar-inset-background);
+    background-image: var(--cui-sidebar-inset-background-image);
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-slot="root"][data-variant="floating"][data-state]
+      [data-control-family="sidebar"][data-slot="inner"]:has(> [data-slot="panel"])
+  ) {
+    overflow: clip;
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"]
+      [data-control-family="sidebar"][data-slot="inner"]:has(> [data-layer="raised"])
+  ) {
+    column-gap: var(--cui-sidebar-inset-inset);
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state]
+      [data-control-family="sidebar"][data-slot="icon-rail"][data-layer="raised"]
+  ),
+  :where(
+    [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state]
+      [data-control-family="sidebar"][data-slot="panel"][data-layer="raised"]
+  ) {
+    margin-block: calc(var(--cui-sidebar-inset-inset) - var(--spacing) * 2);
+    border: var(--cui-sidebar-raised-border-width) solid var(--cui-sidebar-raised-border-color);
+    border-radius: var(--cui-sidebar-raised-radius);
+    box-shadow: var(--cui-sidebar-raised-shadow);
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"]
+      [data-control-family="sidebar"][data-slot="panel"][data-layer="content"]
+  ) {
+    margin-block: calc(var(--cui-sidebar-inset-inset) - var(--spacing) * 2);
+    border: var(--cui-sidebar-inset-border-width) solid var(--cui-sidebar-inset-border-color);
+    border-radius: var(--cui-sidebar-inset-radius);
+    box-shadow: var(--cui-sidebar-inset-shadow);
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"][data-side="left"]
+      [data-control-family="sidebar"][data-slot="panel"][data-layer="content"]
+  ) {
+    margin-inline-end: calc(var(--spacing) * -2 - var(--control-rim-width) * 2);
+    border-inline-end-width: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"][data-side="right"]
+      [data-control-family="sidebar"][data-slot="panel"][data-layer="content"]
+  ) {
+    margin-inline-start: calc(var(--spacing) * -2 - var(--control-rim-width) * 2);
+    border-inline-start-width: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"][data-side="left"]:dir(ltr)
+      [data-control-family="sidebar"][data-slot="panel"][data-layer="content"]
+  ),
+  :where(
+    [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"][data-side="right"]:dir(rtl)
+      [data-control-family="sidebar"][data-slot="panel"][data-layer="content"]
+  ) {
+    clip-path: inset(-100vmax var(--control-rim-width) -100vmax -100vmax);
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"][data-side="left"]:dir(rtl)
+      [data-control-family="sidebar"][data-slot="panel"][data-layer="content"]
+  ),
+  :where(
+    [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"][data-side="right"]:dir(ltr)
+      [data-control-family="sidebar"][data-slot="panel"][data-layer="content"]
+  ) {
+    clip-path: inset(-100vmax -100vmax -100vmax var(--control-rim-width));
+  }
+}
+
+@property --cui-sidebar-icon-rail-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-icon-rail-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-raised-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-raised-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-raised-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-sidebar-raised-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-raised-shadow {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/sidebar-parts.css

@@ -100,17 +100,75 @@
           ~ [data-control-family="sidebar"][data-slot="inset"]
       ) {
       margin: var(--cui-sidebar-inset-inset);
-      margin-inline-start: 0;
       border: var(--cui-sidebar-inset-border-width) solid var(--cui-sidebar-inset-border-color);
       border-radius: var(--cui-sidebar-inset-radius);
       box-shadow: var(--cui-sidebar-inset-shadow);
     }
 
     :where(
-        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="collapsed"]
+        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"][data-side="left"]
+          ~ [data-control-family="sidebar"][data-slot="inset"]
+      ) {
+      margin-inline-start: 0;
+    }
+
+    :where(
+        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"][data-side="right"]
+          ~ [data-control-family="sidebar"][data-slot="inset"]
+      ) {
+      margin-inline-end: 0;
+    }
+
+    :where(
+        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"][data-side="left"]:has(
+            [data-slot="panel"][data-layer="content"]
+          )
+          ~ [data-control-family="sidebar"][data-slot="inset"]
+      ) {
+      border-inline-start-width: 0;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+
+    :where(
+        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"][data-side="right"]:has(
+            [data-slot="panel"][data-layer="content"]
+          )
+          ~ [data-control-family="sidebar"][data-slot="inset"]
+      ) {
+      border-inline-end-width: 0;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    :where(
+        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"][data-side="left"]:dir(ltr):has(
+            [data-slot="panel"][data-layer="content"]
+          )
+          ~ [data-control-family="sidebar"][data-slot="inset"]
+      ),
+    :where(
+        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"][data-side="right"]:dir(rtl):has(
+            [data-slot="panel"][data-layer="content"]
+          )
+          ~ [data-control-family="sidebar"][data-slot="inset"]
+      ) {
+      clip-path: inset(-100vmax -100vmax -100vmax 0);
+    }
+
+    :where(
+        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"][data-side="left"]:dir(rtl):has(
+            [data-slot="panel"][data-layer="content"]
+          )
+          ~ [data-control-family="sidebar"][data-slot="inset"]
+      ),
+    :where(
+        [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state="expanded"][data-side="right"]:dir(ltr):has(
+            [data-slot="panel"][data-layer="content"]
+          )
           ~ [data-control-family="sidebar"][data-slot="inset"]
       ) {
-      margin-inline-start: var(--cui-sidebar-inset-inset);
+      clip-path: inset(-100vmax 0 -100vmax -100vmax);
     }
   }
 

package/dist/task-list.js

@@ -2,9 +2,9 @@
 import { cn } from "./lib/cn.js";
 import { LiveStatus } from "./ui/live-status.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
+import { ChevronRight, CircleCheck, CircleDashed, Loader2 } from "lucide-react";
 import { createContext, useContext, useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, CircleCheck, CircleDashed, Loader2 } from "lucide-react";
 //#region src/task-list.tsx
 const taskStatusLabels = {
 	pending: "Pending",

package/dist/tool-approval.js

@@ -4,10 +4,10 @@ import { Button } from "./ui/button.js";
 import { LiveStatus } from "./ui/live-status.js";
 import { Badge } from "./ui/badge.js";
 import { Kbd } from "./ui/kbd.js";
+import { Check, ShieldAlert, X } from "lucide-react";
 import { createContext, useContext, useEffect, useId, useRef } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Check, ShieldAlert, X } from "lucide-react";
 //#region src/tool-approval.tsx
 const ToolApprovalContext = createContext(null);
 function useToolApprovalContext() {

package/dist/ui/accordion.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 //#region src/ui/accordion.tsx
 function Accordion({ className, ...props }) {

package/dist/ui/breadcrumb.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
 //#region src/ui/breadcrumb.tsx
 function Breadcrumb({ className, ...props }) {
 	return /* @__PURE__ */ jsx("nav", {

package/dist/ui/code.js

@@ -7,9 +7,9 @@ import { Swap, SwapItem } from "./swap.js";
 import { ScrollArea } from "./scroll-area.js";
 import { highlightToTokens } from "../lib/code-tokens.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import { Children, createContext, isValidElement, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon, CopyIcon } from "lucide-react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/ui/code.tsx
 const MAX_STATIC_CODE_LINES = 1e3;

package/dist/ui/dropzone.js

@@ -4,9 +4,9 @@ import { Button } from "./button.js";
 import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "./item.js";
 import { DropzoneErrorCode, formatDropzoneFileSize } from "../lib/dropzone-validation.js";
 import { useDropzone } from "../hooks/use-dropzone.js";
+import { CircleAlertIcon, CloudUpload, FileIcon, LoaderCircle, Search, XIcon } from "lucide-react";
 import { createContext, useContext, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CircleAlertIcon, CloudUpload, FileIcon, LoaderCircle, Search, XIcon } from "lucide-react";
 //#region src/ui/dropzone.tsx
 const DropzoneContext = createContext(null);
 const DropzoneFocusContext = createContext(null);

package/dist/ui/emoji-picker.js

@@ -6,9 +6,9 @@ import { PopoverViewport } from "./popover.js";
 import { IconPicker } from "./icon-picker.js";
 import { Tabs, TabsList, TabsPanel, TabsTab } from "./tabs.js";
 import { Toolbar } from "@base-ui/react/toolbar";
+import { FlagIcon, HandIcon, HashIcon, HeartIcon, LeafIcon, LightbulbIcon, PizzaIcon, PlaneIcon, SearchIcon, SmileIcon, VolleyballIcon } from "lucide-react";
 import { createContext, useContext, useImperativeHandle, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { FlagIcon, HandIcon, HashIcon, HeartIcon, LeafIcon, LightbulbIcon, PizzaIcon, PlaneIcon, SearchIcon, SmileIcon, VolleyballIcon } from "lucide-react";
 import { EmojiPicker as EmojiPicker$1, defaultEmojiDataResolver } from "frimousse";
 //#region src/ui/emoji-picker.tsx
 const EmojiPickerContext = createContext(null);

package/dist/ui/flow.js

@@ -3,8 +3,8 @@ import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
 import { prefersReducedMotion, readDurationMs } from "../lib/motion.js";
 import "../lib/canvas-grid.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { MaximizeIcon, MinusIcon, PlusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Background, BackgroundVariant, BaseEdge, EdgeLabelRenderer, Handle, Panel, ReactFlow, useReactFlow, useStore } from "@xyflow/react";
 //#region src/ui/flow.tsx
 function viewportTransitionMs(element) {

package/dist/ui/hover-card.d.ts

@@ -13,6 +13,8 @@ export type HoverCardContentProps = Omit<ComponentProps<"div"> & {
   side?: "top" | "bottom" | "left" | "right";
   align?: "start" | "center" | "end";
   sideOffset?: number;
+  /** Positions the card against this element instead of the trigger, for hover targets React does not render. */
+  anchor?: ComponentProps<typeof PreviewCard.Positioner>["anchor"];
 }, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
@@ -20,5 +22,5 @@ export declare function HoverCard(props: HoverCardProps): import("react").JSX.El
 export declare function HoverCardTrigger({ className, ...props }: ComponentProps<typeof PreviewCard.Trigger> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-export declare function HoverCardContent({ className, children, side, align, sideOffset, ...props }: HoverCardContentProps): import("react").JSX.Element;
+export declare function HoverCardContent({ className, children, side, align, sideOffset, anchor, ...props }: HoverCardContentProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/hover-card.js

@@ -11,14 +11,13 @@ function HoverCard(props) {
 function HoverCardTrigger({ className, ...props }) {
 	return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
 		"data-control-ui": "hover-card",
-		"data-control-family": "popup",
 		"data-popup-kind": "hover-card",
 		"data-slot": "trigger",
 		className,
 		...props
 	});
 }
-function HoverCardContent({ className, children, side = "bottom", align = "center", sideOffset = 8, ...props }) {
+function HoverCardContent({ className, children, side = "bottom", align = "center", sideOffset = 8, anchor, ...props }) {
 	const skin = useSkin();
 	return /* @__PURE__ */ jsx(PreviewCard.Portal, { children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
 		"data-control-ui": "hover-card",
@@ -30,6 +29,7 @@ function HoverCardContent({ className, children, side = "bottom", align = "cente
 		side,
 		align,
 		sideOffset,
+		anchor,
 		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
 			"data-control-ui": "hover-card",

package/dist/ui/infinite-canvas.js

@@ -4,10 +4,10 @@ import { Button } from "./button.js";
 import { createInfiniteCanvasCamera, infiniteCanvasGridStyle, infiniteCanvasTransformCss } from "../lib/infinite-canvas-camera-store.js";
 import { ARROW_KEY_DIRECTIONS, INFINITE_CANVAS_KEY_SHORTCUTS, attachInfiniteCanvasNavigation, keyboardStep, runInfiniteCanvasKeyCommand } from "../lib/infinite-canvas-navigation.js";
 import { Toolbar, ToolbarButton, ToolbarSeparator } from "./toolbar.js";
+import { GripVerticalIcon, MaximizeIcon, MinusIcon, PlusIcon } from "lucide-react";
 import { createContext, use, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { GripVerticalIcon, MaximizeIcon, MinusIcon, PlusIcon } from "lucide-react";
 //#region src/ui/infinite-canvas.tsx
 const DEFAULT_TRANSFORM = {
 	x: 0,