@ctrl-ui/react 0.9.16 → 0.9.18

package/dist/action-bar.d.ts

@@ -41,10 +41,10 @@ export type ActionBarCopyProps = ActionBarItemBaseProps & {
   copyFailedLabel?: string;
   resetDelay?: number;
 };
-export declare function ActionBarCopy({ value, children, copiedChildren, copiedAriaLabel, copyFailedLabel, resetDelay, disabled, onClick, ...props }: ActionBarCopyProps): import("react").JSX.Element;
+export declare function ActionBarCopy({ value, children, copiedChildren, copiedAriaLabel, copyFailedLabel, resetDelay, disabled, onClick, "aria-label": ariaLabel, ...props }: ActionBarCopyProps): import("react").JSX.Element;
 export type ActionBarEditProps = ActionBarItemBaseProps & {
   value?: ActionBarCopyValue;
   children?: NonNullable<ReactNode>;
 };
-export declare function ActionBarEdit({ value, children, disabled, onClick, ...props }: ActionBarEditProps): import("react").JSX.Element;
+export declare function ActionBarEdit({ value, children, disabled, onClick, "aria-label": ariaLabel, ...props }: ActionBarEditProps): import("react").JSX.Element;
 //#endregion

package/dist/action-bar.js

@@ -5,6 +5,7 @@ import { Button } from "./ui/button.js";
 import { LiveStatus } from "./ui/live-status.js";
 import { Swap, SwapItem } from "./ui/swap.js";
 import { Toolbar } from "@base-ui/react/toolbar";
+import { CheckIcon, CopyIcon, PencilIcon } from "lucide-react";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/action-bar.tsx
@@ -48,7 +49,7 @@ function ActionBarItem({ icon, children, active, disabled, ...props }) {
 		})
 	});
 }
-function ActionBarCopy({ value, children = "Copy", copiedChildren = "Copied", copiedAriaLabel = "Copied to clipboard", copyFailedLabel = "Couldn't copy. Select the text and copy it manually.", resetDelay = 1200, disabled, onClick, ...props }) {
+function ActionBarCopy({ value, children, copiedChildren, copiedAriaLabel = "Copied to clipboard", copyFailedLabel = "Couldn't copy. Select the text and copy it manually.", resetDelay = 1200, disabled, onClick, "aria-label": ariaLabel, ...props }) {
 	const { copyValue: contextCopyValue, onCopy, onCopyError } = useContext(ActionBarContext);
 	const copyValue = value ?? contextCopyValue;
 	const { status, copyToClipboard } = useCopyToClipboard({
@@ -71,27 +72,36 @@ function ActionBarCopy({ value, children = "Copy", copiedChildren = "Copied", co
 	let copyStatus = "";
 	if (copied) copyStatus = copiedAriaLabel;
 	else if (status === "failed") copyStatus = copyFailedLabel;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(ActionBarItem, {
+	const isIconOnly = children === void 0;
+	const swap = /* @__PURE__ */ jsxs(Swap, {
+		value: copied ? "copied" : "idle",
+		children: [/* @__PURE__ */ jsx(SwapItem, {
+			value: "idle",
+			children: children ?? /* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": "true" })
+		}), /* @__PURE__ */ jsx(SwapItem, {
+			value: "copied",
+			"aria-hidden": "true",
+			children: copiedChildren ?? (isIconOnly ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : "Copied")
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [isIconOnly ? /* @__PURE__ */ jsx(ActionBarItem, {
+		"aria-label": ariaLabel ?? "Copy",
+		icon: swap,
+		disabled: disabled ?? !copyValue,
+		onClick: handleClick,
+		...props
+	}) : /* @__PURE__ */ jsxs(ActionBarItem, {
+		"aria-label": ariaLabel,
 		disabled: disabled ?? !copyValue,
 		onClick: handleClick,
 		...props,
-		children: [/* @__PURE__ */ jsxs(Swap, {
-			value: copied ? "copied" : "idle",
-			children: [/* @__PURE__ */ jsx(SwapItem, {
-				value: "idle",
-				children
-			}), /* @__PURE__ */ jsx(SwapItem, {
-				value: "copied",
-				"aria-hidden": "true",
-				children: copiedChildren
-			})]
-		}), copied ? /* @__PURE__ */ jsx("span", {
+		children: [swap, copied ? /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children
 		}) : null]
 	}), /* @__PURE__ */ jsx(LiveStatus, { message: copyStatus })] });
 }
-function ActionBarEdit({ value, children = "Edit", disabled, onClick, ...props }) {
+function ActionBarEdit({ value, children, disabled, onClick, "aria-label": ariaLabel, ...props }) {
 	const { copyValue, editValue: contextEditValue, onEdit, onEditError } = useContext(ActionBarContext);
 	const editValue = value ?? contextEditValue ?? copyValue;
 	async function handleClick(event) {
@@ -105,8 +115,17 @@ function ActionBarEdit({ value, children = "Edit", disabled, onClick, ...props }
 			onEditError?.(error);
 		}
 	}
+	const itemDisabled = disabled ?? (editValue === void 0 || !onEdit);
+	if (children === void 0) return /* @__PURE__ */ jsx(ActionBarItem, {
+		"aria-label": ariaLabel ?? "Edit",
+		icon: /* @__PURE__ */ jsx(PencilIcon, { "aria-hidden": "true" }),
+		disabled: itemDisabled,
+		onClick: handleClick,
+		...props
+	});
 	return /* @__PURE__ */ jsx(ActionBarItem, {
-		disabled: disabled ?? (editValue === void 0 || !onEdit),
+		"aria-label": ariaLabel,
+		disabled: itemDisabled,
 		onClick: handleClick,
 		...props,
 		children

package/dist/activity.d.ts

@@ -1,8 +1,8 @@
 import { ActivityKnobStyle } from "./knob-contracts/activity-knobs.js";
 import { CollapsibleContent, CollapsibleProps, CollapsibleTrigger } from "./ui/collapsible.js";
 import { ScrollAreaProps } from "./ui/scroll-area.js";
-import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { ChevronRight } from "lucide-react";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/activity.d.ts
 export type ActivityState = "pending" | "running" | "waiting" | "success" | "error";
 export type ActivityKind = "default" | "tool" | "reasoning" | "signal";

package/dist/activity.js

@@ -3,9 +3,9 @@ import { cn } from "./lib/cn.js";
 import { LiveStatus } from "./ui/live-status.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
 import { ScrollArea } from "./ui/scroll-area.js";
+import { Check, ChevronRight, CircleAlert, CircleDashed, CirclePause, LoaderCircle } from "lucide-react";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, ChevronRight, CircleAlert, CircleDashed, CirclePause, LoaderCircle } from "lucide-react";
 //#region src/activity.tsx
 const activityStatusLabels = {
 	pending: "Pending",

package/dist/audio-device-select.js

@@ -3,9 +3,9 @@ import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select.js";
 import { Text } from "./ui/typography.js";
+import { MicIcon, Volume2Icon } from "lucide-react";
 import { createContext, use, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { MicIcon, Volume2Icon } from "lucide-react";
 //#region src/audio-device-select.tsx
 const AUDIO_DEVICE_COPY = {
 	input: {

package/dist/audio-recorder.js

@@ -5,9 +5,9 @@ import { LiveStatus } from "./ui/live-status.js";
 import { AudioVisualizer } from "./audio-visualizer.js";
 import { useAudioRecorder } from "./hooks/use-audio-recorder.js";
 import { formatAudioRecorderDuration } from "./lib/format-audio-recorder-duration.js";
+import { CheckIcon, MicIcon, XIcon } from "lucide-react";
 import { createContext, use, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon, MicIcon, XIcon } from "lucide-react";
 //#region src/audio-recorder.tsx
 const AudioRecorderContext = createContext(null);
 const AudioRecorderTriggerRefContext = createContext(null);

package/dist/blocks/agent-run-sidebar.js

@@ -4,8 +4,8 @@ import { useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from "../ui/sidebar.js";
 import { agentRunStatusLabels } from "./agent-run-status.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { BotIcon, CheckIcon, CircleAlertIcon, CircleDashedIcon, CirclePauseIcon, CircleSlashIcon, LoaderCircleIcon, PlusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/agent-run-sidebar.tsx
 const runStatusIcons = {
 	running: /* @__PURE__ */ jsx(LoaderCircleIcon, {

package/dist/blocks/agent-run.js

@@ -11,9 +11,9 @@ import { agentRunStatusColors, agentRunStatusLabels, agentRunStepLabels } from "
 import { AgentRunSidebar } from "./agent-run-sidebar.js";
 import { Card, CardAction, CardContent, CardHeader } from "../ui/card.js";
 import { Timeline, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineMeta, TimelineSeparator, TimelineTitle } from "../ui/timeline.js";
+import { Check, Circle, CircleAlert, CircleDashed, CirclePause, LoaderCircle } from "lucide-react";
 import { createContext, useContext, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, Circle, CircleAlert, CircleDashed, CirclePause, LoaderCircle } from "lucide-react";
 //#region src/blocks/agent-run.tsx
 const AgentRunLayoutContext = createContext("viewport");
 function useHeadingLevels() {

package/dist/blocks/coding-agent.js

@@ -8,8 +8,8 @@ import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarRail, SidebarTrigger } from "../ui/sidebar.js";
 import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "../ui/item.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { BotIcon, ChevronRightIcon, CircleIcon, FolderIcon, PlusIcon, SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/coding-agent.tsx
 function CodingAgentBlock({ appName = "Agent", brand, sidebarTop, navigation = [], projects, activeTaskId, activeTaskTitle = "New task", onNavigationSelect, onTaskSelect, onNewTask, onSearch, headerActions, sidebarFooter, children, layout = "viewport", className, style, ...props }) {
 	const providerStyle = {

package/dist/blocks/design-canvas-inspector.js

@@ -11,9 +11,9 @@ import { ColorPickerEyeDropper, ColorPickerInput } from "../ui/color-picker-valu
 import { ColorPicker, ColorPickerContent, ColorPickerTrigger } from "../ui/color-picker.js";
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../ui/empty.js";
 import { Toggle } from "../ui/toggle.js";
+import { BlendIcon, EyeIcon, EyeOffIcon, Link2Icon, MinusIcon, PlusIcon, RotateCwIcon, SquareRoundCornerIcon, Unlink2Icon } from "lucide-react";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { BlendIcon, EyeIcon, EyeOffIcon, Link2Icon, MinusIcon, PlusIcon, RotateCwIcon, SquareRoundCornerIcon, Unlink2Icon } from "lucide-react";
 //#region src/blocks/design-canvas-inspector.tsx
 const WHOLE_NUMBER_FORMAT = {
 	useGrouping: false,

package/dist/blocks/design-canvas.js

@@ -10,9 +10,9 @@ import { DesignCanvasInspector } from "./design-canvas-inspector.js";
 import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "../ui/toolbar.js";
 import { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem } from "../ui/infinite-canvas.js";
 import { ResizableFloatingPanel } from "../ui/resizable.js";
+import { CircleIcon, FrameIcon, HandIcon, LayersIcon, MousePointer2Icon, SlidersHorizontalIcon, SquareIcon, TypeIcon } from "lucide-react";
 import { useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { CircleIcon, FrameIcon, HandIcon, LayersIcon, MousePointer2Icon, SlidersHorizontalIcon, SquareIcon, TypeIcon } from "lucide-react";
 //#region src/blocks/design-canvas.tsx
 const TOOLS = [
 	{

package/dist/blocks/discussion.js

@@ -6,9 +6,9 @@ import { ChatMessageReplies } from "../chat-message/social.js";
 import { ChatMessage, ChatMessageActions, ChatMessageAuthor, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageFooter, ChatMessageHeader, ChatMessageRow, ChatMessageTime } from "../chat-message.js";
 import { Markdown } from "../ui/markdown.js";
 import { Kbd, KbdGroup } from "../ui/kbd.js";
+import { CornerDownRightIcon } from "lucide-react";
 import { Suspense, lazy, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { CornerDownRightIcon } from "lucide-react";
 //#region src/blocks/discussion.tsx
 const DiscussionMarkdownInput = lazy(() => import("./discussion-markdown-input.js"));
 function DiscussionComposer({ label, placeholder, submitLabel = "Post", secondaryAction, hint = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(KbdGroup, { children: [/* @__PURE__ */ jsx(Kbd, { children: "⌘" }), /* @__PURE__ */ jsx(Kbd, { children: "Enter" })] }), /* @__PURE__ */ jsx("span", { children: "to post" })] }), autoFocus, format = "plain", onUploadImage, mentions, onSubmit, ...props }) {

package/dist/blocks/file-explorer.js

@@ -15,9 +15,9 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resi
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { groupFileExplorerItems, orderFileExplorerEntries, resolveFileExplorer, searchFileExplorer } from "./file-explorer-data.js";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../ui/breadcrumb.js";
+import { ChevronLeftIcon, ChevronRightIcon, FileIcon, FolderIcon, MoreHorizontalIcon, SearchIcon, XIcon } from "lucide-react";
 import { Fragment, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronLeftIcon, ChevronRightIcon, FileIcon, FolderIcon, MoreHorizontalIcon, SearchIcon, XIcon } from "lucide-react";
 //#region src/blocks/file-explorer.tsx
 function defaultSearchStatusLabel(count, query) {
 	if (count === 0) return `No results for “${query}”`;

package/dist/blocks/settings.js

@@ -13,9 +13,9 @@ import { Input } from "../ui/input.js";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { searchSettings } from "./settings-data.js";
 import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet } from "../ui/field.js";
+import { ArrowLeftIcon, SearchIcon, XIcon } from "lucide-react";
 import { useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowLeftIcon, SearchIcon, XIcon } from "lucide-react";
 //#region src/blocks/settings.tsx
 function SettingsBlock({ pages, activePageId, defaultActivePageId, onActivePageChange, backAction, searchPlaceholder = "Search settings", searchLabel = "Search settings", layout = "viewport", className, style, ...props }) {
 	const [internalPageId, setInternalPageId] = useState(defaultActivePageId ?? pages[0]?.id);

package/dist/blocks/theme-toggle.js

@@ -3,9 +3,9 @@ import { Button } from "../ui/button.js";
 import { Text } from "../ui/typography.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { Switch } from "../ui/switch.js";
+import { ChevronDownIcon, MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDownIcon, MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
 //#region src/blocks/theme-toggle.tsx
 const systemThemeOption = {
 	value: "system",

package/dist/chat-composer-attachment.js

@@ -4,9 +4,9 @@ import { Button } from "./ui/button.js";
 import { LiveStatus } from "./ui/live-status.js";
 import { ScrollArea } from "./ui/scroll-area.js";
 import { Spinner } from "./ui/spinner.js";
+import { XIcon } from "lucide-react";
 import { createContext, useContext, useLayoutEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { XIcon } from "lucide-react";
 //#region src/chat-composer-attachment.tsx
 const ChatComposerAttachmentContext = createContext(null);
 function useChatComposerAttachmentContext() {

package/dist/chat-composer.js

@@ -5,9 +5,9 @@ import { useSkin } from "./skin-provider.js";
 import { Button } from "./ui/button.js";
 import { Spinner } from "./ui/spinner.js";
 import { useChatComposer } from "./hooks/use-chat-composer.js";
+import { Square } from "lucide-react";
 import { createContext, useContext, useEffect, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Square } from "lucide-react";
 //#region src/chat-composer.tsx
 const ChatComposerContext = createContext(null);
 function useChatComposerContext() {

package/dist/chat-layout.js

@@ -6,10 +6,10 @@ import { LiveStatus } from "./ui/live-status.js";
 import { ScrollArea } from "./ui/scroll-area.js";
 import { ChatThreadAnnounceContext } from "./hooks/use-chat-message.js";
 import { useChatThreadScroll } from "./hooks/use-chat-thread-scroll.js";
+import { ArrowDown } from "lucide-react";
 import { createContext, useContext, useState } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDown } from "lucide-react";
 //#region src/chat-layout.tsx
 const chromeSizing = {
 	panel: "mx-auto min-h-[640px] max-w-3xl",

package/dist/context.js

@@ -4,9 +4,9 @@ import { Button } from "./ui/button.js";
 import { ScrollArea } from "./ui/scroll-area.js";
 import { deriveContextModel } from "./context-model.js";
 import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./ui/popover.js";
+import { X } from "lucide-react";
 import { createContext, useContext, useId, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { X } from "lucide-react";
 //#region src/context.tsx
 const ContextValueContext = createContext(null);
 function useContextValue() {

package/dist/filter-bar/parts.js

@@ -4,10 +4,10 @@ import { Button } from "../ui/button.js";
 import { useFilterBarContext } from "./context.js";
 import { describeFilter, formatFilterValue } from "./model.js";
 import { FilterBarEditor, FilterBarInlineInput } from "./editor.js";
+import { PlusIcon, XIcon } from "lucide-react";
 import { 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 { PlusIcon, XIcon } from "lucide-react";
 //#region src/filter-bar/parts.tsx
 function chipSegments(item, field, operator, draft) {
 	const segments = [{

package/dist/inline-citation.js

@@ -4,9 +4,9 @@ import { Button } from "./ui/button.js";
 import { LiveStatus } from "./ui/live-status.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
 import { SourceFavicon, sourceHostname } from "./source-badge.js";
+import { ArrowLeft, ArrowRight, ExternalLink } from "lucide-react";
 import { createContext, useContext, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowLeft, ArrowRight, ExternalLink } from "lucide-react";
 //#region src/inline-citation.tsx
 const defaultViewSourcesLabel = (count) => count === 1 ? "view 1 source" : `view ${count} sources`;
 const defaultPositionLabel = (position, count) => `Source ${position} of ${count}`;

package/dist/knob-contracts/sidebar-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/sidebar-knobs.d.ts
-export declare const sidebarKnobs: readonly ["--cui-sidebar-nav-height", "--cui-sidebar-nav-background", "--cui-sidebar-nav-foreground", "--cui-sidebar-nav-border-color", "--cui-sidebar-nav-border-width", "--cui-sidebar-nav-shadow", "--cui-sidebar-nav-item-radius", "--cui-sidebar-nav-item-active-background", "--cui-sidebar-nav-item-active-foreground", "--cui-sidebar-nav-gap", "--cui-sidebar-menu-badge-height", "--cui-sidebar-menu-badge-background", "--cui-sidebar-menu-badge-foreground", "--cui-sidebar-header-border-width", "--cui-sidebar-header-border-color", "--cui-sidebar-rail-divider-background", "--cui-sidebar-wrapper-background", "--cui-sidebar-wrapper-background-image", "--cui-sidebar-inner-background", "--cui-sidebar-inner-border-color", "--cui-sidebar-inner-background-image", "--cui-sidebar-inner-backdrop-filter", "--cui-sidebar-container-border-width", "--cui-sidebar-inner-border-width", "--cui-sidebar-inner-radius", "--cui-sidebar-inner-shadow", "--cui-sidebar-header-background", "--cui-sidebar-header-shadow", "--cui-sidebar-inset-background", "--cui-sidebar-inset-background-image", "--cui-sidebar-inset-shadow", "--cui-sidebar-inset-border-color", "--cui-sidebar-inset-border-width", "--cui-sidebar-inset-radius", "--cui-sidebar-inset-inset", "--cui-sidebar-menu-button-radius", "--cui-sidebar-group-label-foreground", "--cui-sidebar-menu-button-foreground", "--cui-sidebar-menu-button-hover-background", "--cui-sidebar-menu-button-hover-foreground", "--cui-sidebar-menu-button-hover-shadow", "--cui-sidebar-menu-button-active-background", "--cui-sidebar-menu-button-active-foreground", "--cui-sidebar-menu-button-active-shadow", "--cui-sidebar-menu-button-track-active-foreground", "--cui-sidebar-menu-button-height", "--cui-sidebar-menu-button-padding-block", "--cui-sidebar-menu-button-padding-inline", "--cui-sidebar-menu-button-font-size", "--cui-sidebar-menu-button-font-weight", "--cui-sidebar-menu-button-active-font-weight", "--cui-sidebar-group-label-font-size", "--cui-sidebar-group-label-font-weight", "--cui-sidebar-group-label-letter-spacing", "--cui-sidebar-group-label-text-transform", "--cui-sidebar-group-label-padding", "--cui-sidebar-skip-link-background", "--cui-sidebar-skip-link-foreground", "--cui-sidebar-skip-link-radius", "--cui-sidebar-skip-link-shadow", "--cui-sidebar-menu-button-background", "--cui-sidebar-menu-button-shadow"];
+export declare const sidebarKnobs: readonly ["--cui-sidebar-nav-height", "--cui-sidebar-nav-background", "--cui-sidebar-nav-foreground", "--cui-sidebar-nav-border-color", "--cui-sidebar-nav-border-width", "--cui-sidebar-nav-shadow", "--cui-sidebar-nav-item-radius", "--cui-sidebar-nav-item-active-background", "--cui-sidebar-nav-item-active-foreground", "--cui-sidebar-nav-gap", "--cui-sidebar-icon-rail-border-width", "--cui-sidebar-icon-rail-border-color", "--cui-sidebar-raised-background", "--cui-sidebar-raised-border-width", "--cui-sidebar-raised-border-color", "--cui-sidebar-raised-radius", "--cui-sidebar-raised-shadow", "--cui-sidebar-menu-badge-height", "--cui-sidebar-menu-badge-background", "--cui-sidebar-menu-badge-foreground", "--cui-sidebar-header-border-width", "--cui-sidebar-header-border-color", "--cui-sidebar-rail-divider-background", "--cui-sidebar-wrapper-background", "--cui-sidebar-wrapper-background-image", "--cui-sidebar-inner-background", "--cui-sidebar-inner-border-color", "--cui-sidebar-inner-background-image", "--cui-sidebar-inner-backdrop-filter", "--cui-sidebar-container-border-width", "--cui-sidebar-inner-border-width", "--cui-sidebar-inner-radius", "--cui-sidebar-inner-shadow", "--cui-sidebar-header-background", "--cui-sidebar-header-shadow", "--cui-sidebar-inset-background", "--cui-sidebar-inset-background-image", "--cui-sidebar-inset-shadow", "--cui-sidebar-inset-border-color", "--cui-sidebar-inset-border-width", "--cui-sidebar-inset-radius", "--cui-sidebar-inset-inset", "--cui-sidebar-menu-button-radius", "--cui-sidebar-group-label-foreground", "--cui-sidebar-menu-button-foreground", "--cui-sidebar-menu-button-hover-background", "--cui-sidebar-menu-button-hover-foreground", "--cui-sidebar-menu-button-hover-shadow", "--cui-sidebar-menu-button-active-background", "--cui-sidebar-menu-button-active-foreground", "--cui-sidebar-menu-button-active-shadow", "--cui-sidebar-menu-button-track-active-foreground", "--cui-sidebar-menu-button-height", "--cui-sidebar-menu-button-padding-block", "--cui-sidebar-menu-button-padding-inline", "--cui-sidebar-menu-button-font-size", "--cui-sidebar-menu-button-font-weight", "--cui-sidebar-menu-button-active-font-weight", "--cui-sidebar-group-label-font-size", "--cui-sidebar-group-label-font-weight", "--cui-sidebar-group-label-letter-spacing", "--cui-sidebar-group-label-text-transform", "--cui-sidebar-group-label-padding", "--cui-sidebar-skip-link-background", "--cui-sidebar-skip-link-foreground", "--cui-sidebar-skip-link-radius", "--cui-sidebar-skip-link-shadow", "--cui-sidebar-menu-button-background", "--cui-sidebar-menu-button-shadow"];
 export type SidebarKnobStyle = Partial<Record<(typeof sidebarKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/sidebar-knobs.js

@@ -10,6 +10,13 @@ const sidebarKnobs = [
 	"--cui-sidebar-nav-item-active-background",
 	"--cui-sidebar-nav-item-active-foreground",
 	"--cui-sidebar-nav-gap",
+	"--cui-sidebar-icon-rail-border-width",
+	"--cui-sidebar-icon-rail-border-color",
+	"--cui-sidebar-raised-background",
+	"--cui-sidebar-raised-border-width",
+	"--cui-sidebar-raised-border-color",
+	"--cui-sidebar-raised-radius",
+	"--cui-sidebar-raised-shadow",
 	"--cui-sidebar-menu-badge-height",
 	"--cui-sidebar-menu-badge-background",
 	"--cui-sidebar-menu-badge-foreground",

package/dist/markdown-editor/context.d.ts

@@ -1,3 +1,4 @@
+import { MarkdownUrlPolicy } from "./extensions.js";
 import { MarkdownImageUpload } from "./uploads.js";
 import { Editor } from "@tiptap/core";
 //#region src/markdown-editor/context.d.ts
@@ -7,6 +8,7 @@ export type MarkdownEditorContextValue = {
   source: boolean;
   markdown: string;
   sourceRequired: boolean;
+  isUrlAllowed: MarkdownUrlPolicy;
   setSource: (source: boolean) => void;
   setMarkdown: (value: string) => void;
   setContentAttributes: (attributes: Record<string, string>) => void;

package/dist/markdown-editor/drag-handle.js

@@ -3,9 +3,9 @@ import { Button } from "../ui/button.js";
 import { LiveStatus } from "../ui/live-status.js";
 import { useMarkdownEditor } from "./context.js";
 import { createDragPreview } from "./drag-preview.js";
+import { GripVerticalIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { GripVerticalIcon } from "lucide-react";
 import { NodeSelection } from "@tiptap/pm/state";
 import { closeHistory } from "@tiptap/pm/history";
 //#region src/markdown-editor/drag-handle.tsx

package/dist/markdown-editor/extensions.d.ts

@@ -1,10 +1,20 @@
-import { Extension, JSONContent, Node } from "@tiptap/core";
+import { Extension, Extensions, JSONContent, Node } from "@tiptap/core";
 import { MarkdownManager } from "@tiptap/markdown";
 //#region src/markdown-editor/extensions.d.ts
 export declare function isEditorUrl(value: string, image?: boolean): boolean;
+export type MarkdownUrlKind = "link" | "image";
+/** Decides which URLs the editor keeps. Content with a refused URL stays in source mode, so nothing is dropped. */
+export type MarkdownUrlPolicy = (url: string, kind: MarkdownUrlKind) => boolean;
+/** Web apps only keep URLs that still resolve after a reload: HTTP(S), mailto, root-relative paths and anchors. */
+export declare const persistentUrlPolicy: MarkdownUrlPolicy;
+export type MarkdownExtensionOptions = {
+  /** Extra TipTap extensions, applied after the built-in Markdown set. */
+  extensions?: Extensions;
+  isUrlAllowed?: MarkdownUrlPolicy;
+};
 export declare const ImageUpload: Node<any, any>;
-export declare function markdownExtensions(): (Extension<any, any> | Extension<import("@tiptap/markdown").MarkdownExtensionOptions, import("@tiptap/markdown").MarkdownExtensionStorage> | Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | Extension<import("@tiptap/extension-table").TableKitOptions, any> | Node<any, any> | Node<import("@tiptap/extension-image").ImageOptions, any> | Node<import("@tiptap/extension-paragraph").ParagraphOptions, any> | Node<import("@tiptap/extension-list").TaskItemOptions, any> | Node<import("@tiptap/extension-list").TaskListOptions, any>)[];
-export declare function createMarkdownCodec(): MarkdownManager;
-export declare function requiresMarkdownSource(markdown: string, codec: MarkdownManager): boolean;
+export declare function markdownExtensions({ extensions, isUrlAllowed }?: MarkdownExtensionOptions): (import("@tiptap/core").AnyExtension | Extension<import("@tiptap/markdown").MarkdownExtensionOptions, import("@tiptap/markdown").MarkdownExtensionStorage> | Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | Extension<import("@tiptap/extension-table").TableKitOptions, any> | Node<any, any> | Node<import("@tiptap/extension-image").ImageOptions, any> | Node<import("@tiptap/extension-paragraph").ParagraphOptions, any> | Node<import("@tiptap/extension-list").TaskItemOptions, any> | Node<import("@tiptap/extension-list").TaskListOptions, any>)[];
+export declare function createMarkdownCodec(options?: MarkdownExtensionOptions): MarkdownManager;
+export declare function requiresMarkdownSource(markdown: string, codec: MarkdownManager, isUrlAllowed?: MarkdownUrlPolicy): boolean;
 export declare function hasMarkdownContent(document: JSONContent): boolean;
 //#endregion

package/dist/markdown-editor/extensions.js

@@ -42,27 +42,31 @@ function isEditorUrl(value, image = false) {
 		return false;
 	}
 }
-const SafeImage = Image.extend({
-	renderMarkdown: (node) => {
-		const src = String(node.attrs?.src ?? "").replace(/[()]/g, (character) => `\\${character}`);
-		const alt = String(node.attrs?.alt ?? "").replace(/[\\[\]]/g, (character) => `\\${character}`);
-		const title = String(node.attrs?.title ?? "").replace(/[\\"]/g, (character) => `\\${character}`);
-		return title ? `![${alt}](${src} "${title}")` : `![${alt}](${src})`;
-	},
-	addAttributes() {
-		return {
-			...this.parent?.(),
-			src: {
-				default: null,
-				parseHTML: (element) => {
-					const src = element.getAttribute("src") ?? "";
-					return isEditorUrl(src, true) ? src : null;
-				},
-				renderHTML: (attributes) => ({ src: isEditorUrl(attributes.src ?? "", true) ? attributes.src : void 0 })
-			}
-		};
-	}
-});
+/** Web apps only keep URLs that still resolve after a reload: HTTP(S), mailto, root-relative paths and anchors. */
+const persistentUrlPolicy = (url, kind) => isEditorUrl(url, kind === "image");
+function safeImage(isUrlAllowed) {
+	return Image.extend({
+		renderMarkdown: (node) => {
+			const src = String(node.attrs?.src ?? "").replace(/[()]/g, (character) => `\\${character}`);
+			const alt = String(node.attrs?.alt ?? "").replace(/[\\[\]]/g, (character) => `\\${character}`);
+			const title = String(node.attrs?.title ?? "").replace(/[\\"]/g, (character) => `\\${character}`);
+			return title ? `![${alt}](${src} "${title}")` : `![${alt}](${src})`;
+		},
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				src: {
+					default: null,
+					parseHTML: (element) => {
+						const src = element.getAttribute("src") ?? "";
+						return isUrlAllowed(src, "image") ? src : null;
+					},
+					renderHTML: (attributes) => ({ src: isUrlAllowed(attributes.src ?? "", "image") ? attributes.src : void 0 })
+				}
+			};
+		}
+	});
+}
 const MarkdownParagraph = Paragraph.extend({ parseMarkdown: (token, helpers) => {
 	const content = helpers.parseInline(token.tokens ?? []);
 	const first = content[0];
@@ -88,19 +92,19 @@ const ImageUpload = Node.create({
 	],
 	renderMarkdown: () => ""
 });
-function markdownExtensions() {
+function markdownExtensions({ extensions = [], isUrlAllowed = persistentUrlPolicy } = {}) {
 	return [
 		StarterKit.configure({
 			underline: false,
 			paragraph: false,
 			link: {
 				openOnClick: false,
-				isAllowedUri: (url) => isEditorUrl(url)
+				isAllowedUri: (url) => isUrlAllowed(url, "link")
 			}
 		}),
 		MarkdownParagraph,
 		MarkdownHeadings,
-		SafeImage.configure({
+		safeImage(isUrlAllowed).configure({
 			allowBase64: false,
 			inline: true
 		}),
@@ -111,11 +115,12 @@ function markdownExtensions() {
 		}),
 		TableKit.configure({ table: { resizable: false } }),
 		ImageUpload,
-		Markdown
+		Markdown,
+		...extensions
 	];
 }
-function createMarkdownCodec() {
-	return new MarkdownManager({ extensions: markdownExtensions() });
+function createMarkdownCodec(options) {
+	return new MarkdownManager({ extensions: markdownExtensions(options) });
 }
 const supportedTokens = /* @__PURE__ */ new Set([
 	"space",
@@ -140,17 +145,17 @@ const supportedTokens = /* @__PURE__ */ new Set([
 	"taskList",
 	"taskItem"
 ]);
-function unsupportedToken(value) {
-	if (Array.isArray(value)) return value.some(unsupportedToken);
+function unsupportedToken(value, isUrlAllowed) {
+	if (Array.isArray(value)) return value.some((item) => unsupportedToken(item, isUrlAllowed));
 	if (typeof value !== "object" || value === null) return false;
 	if ("type" in value && typeof value.type === "string") {
 		if (!supportedTokens.has(value.type)) return true;
-		if ((value.type === "image" || value.type === "link") && "href" in value && typeof value.href === "string" && !isEditorUrl(value.href, value.type === "image")) return true;
+		if ((value.type === "image" || value.type === "link") && "href" in value && typeof value.href === "string" && !isUrlAllowed(value.href, value.type)) return true;
 	}
-	return Object.values(value).some(unsupportedToken);
+	return Object.values(value).some((item) => unsupportedToken(item, isUrlAllowed));
 }
-function requiresMarkdownSource(markdown, codec) {
-	return unsupportedToken(codec.instance.lexer(markdown));
+function requiresMarkdownSource(markdown, codec, isUrlAllowed = persistentUrlPolicy) {
+	return unsupportedToken(codec.instance.lexer(markdown), isUrlAllowed);
 }
 function hasMarkdownContent(document) {
 	if (document.type === "image") return true;
@@ -158,4 +163,4 @@ function hasMarkdownContent(document) {
 	return document.content?.some(hasMarkdownContent) ?? false;
 }
 //#endregion
-export { ImageUpload, createMarkdownCodec, hasMarkdownContent, isEditorUrl, markdownExtensions, requiresMarkdownSource };
+export { ImageUpload, createMarkdownCodec, hasMarkdownContent, isEditorUrl, markdownExtensions, persistentUrlPolicy, requiresMarkdownSource };

package/dist/markdown-editor/suggestions.js

@@ -2,12 +2,11 @@
 import { LiveStatus } from "../ui/live-status.js";
 import { isComposingKey, useTriggerMenu } from "../hooks/use-trigger-menu.js";
 import { useMarkdownEditor } from "./context.js";
-import { isEditorUrl } from "./extensions.js";
 import { detectTrigger } from "../lib/trigger-detect.js";
 import { TriggerMenu, TriggerMenuEmpty, TriggerMenuIcon, TriggerMenuItem, TriggerMenuList } from "../ui/trigger-menu.js";
+import { Heading1Icon, Heading2Icon, Heading3Icon, ListChecksIcon, ListIcon, ListOrderedIcon, MinusIcon, QuoteIcon, SquareCodeIcon, TextIcon, UserIcon } from "lucide-react";
 import { useEffect, useEffectEvent, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Heading1Icon, Heading2Icon, Heading3Icon, ListChecksIcon, ListIcon, ListOrderedIcon, MinusIcon, QuoteIcon, SquareCodeIcon, TextIcon, UserIcon } from "lucide-react";
 //#region src/markdown-editor/suggestions.tsx
 const blockCommands = [
 	{
@@ -94,7 +93,7 @@ function readTrigger(editor) {
 }
 function MarkdownEditorSuggestions({ mentions = [], onMentionSelect }) {
 	const activeItem = useRef(null);
-	const { editor, disabled, source } = useMarkdownEditor();
+	const { editor, disabled, source, isUrlAllowed } = useMarkdownEditor();
 	const enabled = Boolean(editor) && !disabled && !source;
 	const controller = useTriggerMenu({
 		triggers: [{
@@ -113,7 +112,7 @@ function MarkdownEditorSuggestions({ mentions = [], onMentionSelect }) {
 				to: match.end
 			};
 			if (match.char === "/" && item.command) item.command(editor.chain().focus().deleteRange(range)).run();
-			if (match.char === "@" && item.href && isEditorUrl(item.href)) {
+			if (match.char === "@" && item.href && isUrlAllowed(item.href, "link")) {
 				editor.chain().focus().insertContentAt(range, [{
 					type: "text",
 					text: `@${item.label}`,
@@ -212,7 +211,7 @@ function MarkdownEditorSuggestions({ mentions = [], onMentionSelect }) {
 			children: controller.items.map((item, index) => /* @__PURE__ */ jsxs(TriggerMenuItem, {
 				id: controller.optionId(index),
 				active: index === controller.activeIndex,
-				disabled: item.disabled || item.href !== void 0 && !isEditorUrl(item.href),
+				disabled: item.disabled || item.href !== void 0 && !isUrlAllowed(item.href, "link"),
 				ref: index === controller.activeIndex ? activeItem : void 0,
 				onPointerMove: () => controller.setActiveIndex(index),
 				onClick: () => controller.select(item),

package/dist/markdown-editor/toolbar.d.ts

@@ -1,5 +1,5 @@
-import { MouseEventHandler, ReactNode } from "react";
 import { BoldIcon } from "lucide-react";
+import { MouseEventHandler, ReactNode } from "react";
 //#region src/markdown-editor/toolbar.d.ts
 type MarkdownEditorFormatAction = {
   label: string;