@ctrl-ui/react 0.8.18 → 0.8.20

package/dist/markdown-editor.js

@@ -0,0 +1,202 @@
+"use client";
+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 { useImageUploads } from "./markdown-editor/use-image-uploads.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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 }) {
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const markdown = value ?? internalValue;
+	const [sourceMode, setSourceMode] = useState(false);
+	const [contentAttributes, setContentAttributes] = useState({
+		role: "textbox",
+		"aria-multiline": "true"
+	});
+	const [codec] = useState(createMarkdownCodec);
+	const sourceRequired = useMemo(() => requiresMarkdownSource(markdown, codec), [markdown, codec]);
+	const source = sourceMode || sourceRequired;
+	const lastValue = useRef(markdown);
+	const [extensions] = useState(markdownExtensions);
+	const handlers = useRef(null);
+	function setMarkdown(next) {
+		lastValue.current = next;
+		setInternalValue(next);
+		onValueChange?.(next);
+	}
+	const editor = useEditor({
+		extensions,
+		immediatelyRender: false,
+		shouldRerenderOnTransaction: false,
+		content: sourceRequired ? "" : markdown,
+		contentType: "markdown",
+		editable: !disabled,
+		onUpdate: ({ editor: currentEditor }) => setMarkdown(currentEditor.getMarkdown()),
+		editorProps: {
+			attributes: contentAttributes,
+			handlePaste: (view, event) => {
+				if (disabled) return false;
+				const files = Array.from(event.clipboardData?.files ?? []);
+				if (onUploadImage && files.length > 0) {
+					event.preventDefault();
+					handlers.current?.upload(files);
+					return true;
+				}
+				const text = event.clipboardData?.getData("text/plain");
+				if (!text || event.clipboardData?.getData("text/html") || requiresMarkdownSource(text, codec)) return false;
+				const document = view.state.schema.nodeFromJSON(codec.parse(text));
+				event.preventDefault();
+				view.dispatch(view.state.tr.replaceSelection(Slice.maxOpen(document.content)).scrollIntoView());
+				return true;
+			},
+			handleDrop: (view, event, _slice, moved) => {
+				const files = Array.from(event.dataTransfer?.files ?? []);
+				if (moved || !onUploadImage || disabled || files.length === 0) return false;
+				event.preventDefault();
+				const position = view.posAtCoords({
+					left: event.clientX,
+					top: event.clientY
+				})?.pos;
+				handlers.current?.upload(files, position);
+				return true;
+			}
+		}
+	});
+	const imageUploads = useImageUploads(editor, onUploadImage, maxImageBytes);
+	useEffect(() => {
+		handlers.current = imageUploads;
+	});
+	useEffect(() => {
+		if (!editor) return;
+		editor.setEditable(!disabled, false);
+	}, [editor, disabled]);
+	useEffect(() => {
+		if (!editor) return;
+		const externalReset = lastValue.current !== markdown;
+		if (externalReset) handlers.current?.cancelAll();
+		if (source) {
+			lastValue.current = markdown;
+			return;
+		}
+		if (editor.getMarkdown() !== markdown) {
+			editor.commands.setContent(markdown, {
+				contentType: "markdown",
+				emitUpdate: false
+			});
+			if (externalReset) {
+				editor.view.updateState(EditorState.create({
+					schema: editor.schema,
+					doc: editor.state.doc,
+					plugins: editor.state.plugins
+				}));
+				editor.view.dispatch(editor.state.tr);
+			}
+		}
+		lastValue.current = markdown;
+	}, [
+		editor,
+		markdown,
+		source
+	]);
+	const isEmpty = source ? markdown.trim() === "" : !hasMarkdownContent(codec.parse(markdown));
+	const hasPendingUploads = imageUploads.uploads.length > 0;
+	useEffect(() => {
+		onStatusChange?.({
+			isEmpty,
+			hasPendingUploads
+		});
+	}, [
+		onStatusChange,
+		isEmpty,
+		hasPendingUploads
+	]);
+	return /* @__PURE__ */ jsx(MarkdownEditorContext, {
+		value: {
+			editor,
+			disabled,
+			source,
+			markdown,
+			sourceRequired,
+			setSource: setSourceMode,
+			setMarkdown,
+			setContentAttributes,
+			canUpload: Boolean(onUploadImage),
+			...imageUploads
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "markdown-editor",
+			"data-control-family": "markdown-editor",
+			"data-slot": "root",
+			"data-disabled": disabled ? "" : void 0,
+			className: cn("min-w-0", className),
+			...props,
+			children
+		})
+	});
+}
+function MarkdownEditorContent({ label, placeholder, autoFocus = false, className }) {
+	const container = useRef(null);
+	const { editor, disabled, source, sourceRequired, markdown, setMarkdown, setContentAttributes } = useMarkdownEditor();
+	useEffect(() => {
+		setContentAttributes({
+			role: "textbox",
+			"aria-multiline": "true",
+			"aria-label": label,
+			"aria-disabled": String(disabled),
+			"data-placeholder": placeholder ?? ""
+		});
+	}, [
+		setContentAttributes,
+		label,
+		disabled,
+		placeholder
+	]);
+	useEffect(() => {
+		if (editor && autoFocus && !source && !disabled) editor.commands.focus("end");
+	}, [
+		editor,
+		autoFocus,
+		source,
+		disabled
+	]);
+	if (source || !editor) return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "markdown-editor",
+		"data-control-family": "markdown-editor",
+		"data-slot": "source",
+		className,
+		children: [sourceRequired ? /* @__PURE__ */ jsx("p", {
+			role: "status",
+			children: "This content uses Markdown that is only available in source mode. Its source is preserved."
+		}) : null, /* @__PURE__ */ jsx(Textarea, {
+			"aria-label": label,
+			placeholder,
+			value: markdown,
+			disabled: disabled || !editor,
+			onChange: (event) => setMarkdown(event.target.value),
+			rows: 5,
+			autoFocus,
+			style: {
+				"--cui-field-background": "transparent",
+				"--cui-field-border-width": "0px",
+				"--cui-field-radius": "0px",
+				"--cui-field-shadow": "none"
+			}
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: container,
+		"data-control-ui": "markdown-editor",
+		"data-control-family": "markdown-editor",
+		"data-slot": "content",
+		className,
+		children: [/* @__PURE__ */ jsx(EditorContent, { editor }), /* @__PURE__ */ jsx(MarkdownEditorDragHandle, { container })]
+	});
+}
+//#endregion
+export { MarkdownEditor, MarkdownEditorContent };

package/dist/styles/index.css

@@ -14,13 +14,16 @@
 @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/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";
@@ -31,6 +34,7 @@
 @import "./recipes/calendar.css";
 @import "./recipes/card.css";
 @import "./recipes/chat-message.css";
+@import "./recipes/chat-message-edit.css";
 @import "./recipes/chat-message-social.css";
 @import "./recipes/chat-layout.css";
 @import "./recipes/spinner.css";
@@ -46,12 +50,14 @@
 @import "./recipes/color-picker-values.css";
 @import "./recipes/empty.css";
 @import "./recipes/context.css";
-@import "./recipes/popup-drawer.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";
+@import "./recipes/markdown-editor.css";
 @import "./recipes/dockable-panel.css";
 @import "./recipes/item.css";
 @import "./recipes/dropzone.css";
@@ -62,18 +68,18 @@
 @import "./recipes/icon-picker.css";
 @import "./recipes/tabs.css";
 @import "./recipes/tabs-motion.css";
-@import "./recipes/environment-variables.css";
 @import "./recipes/filter-bar.css";
+@import "./recipes/flow.css";
 @import "./recipes/gradient-editor.css";
 @import "./recipes/inline-attachment.css";
 @import "./recipes/source-badge.css";
 @import "./recipes/inline-citation.css";
-@import "./recipes/markdown.css";
 @import "./recipes/markdown-block.css";
 @import "./recipes/range.css";
 @import "./recipes/morphing-panel.css";
 @import "./recipes/pagination.css";
 @import "./recipes/phone-input.css";
+@import "./recipes/resize-handle.css";
 @import "./recipes/rich-tooltip.css";
 @import "./recipes/skeleton.css";
 @import "./recipes/stepper.css";
@@ -86,6 +92,5 @@
 @import "./recipes/popup-toast.css";
 @import "./recipes/transcript-divider.css";
 @import "./recipes/tree.css";
-@import "./type-scale.css";
 @import "./recipes/user-ask.css";
 @import "./recipes/user-ask-details.css";

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

@@ -0,0 +1,105 @@
+@layer components {
+  :where([data-control-family="chat-message"][data-slot="editable"]) {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="content"][data-editable]) {
+    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"])) {
+    grid-area: 1 / 1;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    min-inline-size: 0;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-sizer"]) {
+    visibility: hidden;
+    contain: inline-size;
+    min-inline-size: 100%;
+    inline-size: 0;
+    block-size: 0;
+    max-block-size: 40dvh;
+    overflow: hidden;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"][data-editing] [data-slot="edit-sizer"]) {
+    block-size: auto;
+  }
+
+  @supports (interpolate-size: allow-keywords) {
+    :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-sizer"]) {
+      interpolate-size: allow-keywords;
+      transition: block-size var(--duration-fast) var(--ease-standard);
+    }
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-input"]) {
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    border: 0;
+    padding: inherit;
+    resize: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    text-align: inherit;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    scrollbar-width: thin;
+    outline: none;
+    visibility: hidden;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"][data-editing] [data-slot="edit-input"]) {
+    visibility: visible;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"][data-editing] [data-slot="edit-value"]) {
+    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"] [data-slot="edit-toolbar"][data-active]) {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-error"]) {
+    display: block;
+    margin-block-start: calc(var(--spacing) * 1);
+    color: var(--destructive);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="editable"] [data-slot="edit-error"][hidden]) {
+    display: none;
+  }
+}

package/dist/styles/recipes/code.css

@@ -59,6 +59,10 @@
     margin-inline-start: auto;
   }
 
+  :where([data-control-family="code"][data-slot="floating-frame"]) {
+    padding-block-start: calc(var(--spacing) * 9);
+  }
+
   :where([data-control-family="code"][data-slot="line"]) {
     min-block-size: calc(var(--spacing) * 5);
   }

package/dist/styles/recipes/field.css

@@ -187,7 +187,7 @@
   }
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="root"]) {
-    gap: calc(var(--spacing) * 3);
+    gap: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
   }
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="content"]) {

package/dist/styles/recipes/flow.css

@@ -0,0 +1,304 @@
+@layer components {
+  :where([data-control-family="flow"][data-slot="root"]) {
+    --cui-flow-background: var(--canvas);
+    --cui-flow-grid-dot-color: var(--canvas-grid-dot);
+    --cui-flow-edge-stroke: oklch(from var(--muted-foreground) l c h / 0.6);
+    --cui-flow-selected-edge-stroke: var(--primary);
+    --cui-flow-edge-size: 1.5px;
+    --cui-flow-node-background: var(--card);
+    --cui-flow-node-foreground: var(--card-foreground);
+    --cui-flow-node-border-color: var(--border);
+    --cui-flow-node-hover-border-color: oklch(from var(--foreground) l c h / 0.2);
+    --cui-flow-node-selected-border-color: var(--primary);
+    --cui-flow-node-border-width: var(--control-rim-width);
+    --cui-flow-node-radius: var(--radius-lg);
+    --cui-flow-node-shadow: var(--shadow-sm);
+    --cui-flow-handle-size: calc(var(--spacing) * 2);
+    --cui-flow-handle-background: var(--background);
+    --cui-flow-handle-border-color: var(--muted-foreground);
+    --cui-flow-handle-border-width: var(--control-rim-width);
+    --cui-flow-edge-label-background: var(--background);
+    --cui-flow-edge-label-foreground: var(--muted-foreground);
+    --cui-flow-edge-label-border-color: var(--border);
+    --cui-flow-edge-label-border-width: var(--control-rim-width);
+    --cui-flow-controls-item-radius: min(var(--radius-sm), calc(var(--control-h-sm) / 2));
+    --cui-flow-controls-padding: calc(var(--spacing) * 1);
+    --cui-flow-controls-radius: calc(
+      var(--cui-flow-controls-item-radius) +
+      clamp(0px, calc(var(--cui-flow-controls-item-radius) * 1000), var(--cui-flow-controls-padding))
+    );
+    --cui-flow-controls-background: var(--card);
+    --cui-flow-controls-border-color: var(--border);
+    --cui-flow-controls-shadow: var(--shadow-sm);
+    --xy-edge-stroke: var(--cui-flow-edge-stroke);
+    --xy-connectionline-stroke: var(--cui-flow-edge-stroke);
+    --xy-connectionline-stroke-width: var(--cui-flow-edge-size);
+    --xy-selection-background-color: oklch(from var(--primary) l c h / 0.08);
+    --xy-selection-border: var(--control-rim-width) solid oklch(from var(--primary) l c h / 0.4);
+    --xy-attribution-background-color: oklch(from var(--background) l c h / 0.5);
+    background-color: var(--cui-flow-background);
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="flow"][data-slot="root"] .react-flow__background-pattern) {
+    fill: var(--cui-flow-grid-dot-color);
+  }
+
+  :where([data-control-family="flow"][data-slot="root"] .react-flow__attribution a) {
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="flow"][data-slot="panel"]),
+  :where([data-control-family="flow"][data-slot="controls"]) {
+    margin: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="flow"][data-slot="controls"]) {
+    --nest-radius: var(--cui-flow-controls-item-radius);
+    gap: calc(var(--spacing) * 0.5);
+    padding: var(--cui-flow-controls-padding);
+    border-radius: var(--cui-flow-controls-radius);
+    background-color: var(--cui-flow-controls-background);
+    box-shadow:
+      var(--cui-flow-controls-shadow),
+      0 0 0 var(--control-rim-width) var(--cui-flow-controls-border-color);
+  }
+
+  :where([data-control-family="flow"][data-slot="node"]) {
+    overflow: hidden;
+    border: var(--cui-flow-node-border-width) solid var(--cui-flow-node-border-color);
+    border-radius: var(--cui-flow-node-radius);
+    background-color: var(--cui-flow-node-background);
+    color: var(--cui-flow-node-foreground);
+    box-shadow: var(--cui-flow-node-shadow);
+    transition-property: border-color, box-shadow;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="flow"][data-slot="node"]:hover) {
+      border-color: var(--cui-flow-node-hover-border-color);
+    }
+  }
+
+  :where([data-control-family="flow"][data-slot="node"][data-selected]) {
+    border-color: var(--cui-flow-node-selected-border-color);
+    box-shadow:
+      var(--cui-flow-node-shadow),
+      0 0 0 calc(var(--control-rim-width) * 3) oklch(from var(--cui-flow-node-selected-border-color) l c h / 0.15);
+  }
+
+  :where([data-control-family="flow"][data-slot="node-header"]) {
+    gap: calc(var(--spacing) * 2);
+    min-block-size: calc(var(--spacing) * 10);
+    padding-block: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3) calc(var(--spacing) * 1.5);
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="flow"][data-slot="node-body"]) {
+    gap: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block-end: calc(var(--spacing) * 3);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="flow"][data-slot="handle"]) {
+    inline-size: var(--cui-flow-handle-size);
+    block-size: var(--cui-flow-handle-size);
+    border: var(--cui-flow-handle-border-width) solid var(--cui-flow-handle-border-color);
+    border-radius: 9999px;
+    background-color: var(--cui-flow-handle-background);
+  }
+
+  :where([data-control-family="flow"][data-slot="edge"]) {
+    stroke: var(--cui-flow-edge-stroke);
+    stroke-width: var(--cui-flow-edge-size);
+    transition: stroke var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="flow"][data-slot="edge"][data-dashed]) {
+    stroke-dasharray: 5 5;
+  }
+
+  :where(.react-flow__edge.selected [data-control-family="flow"][data-slot="edge"]) {
+    stroke: var(--cui-flow-selected-edge-stroke);
+  }
+
+  :where([data-control-family="flow"][data-slot="edge-label"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="flow"][data-slot="edge-label-chip"]) {
+    padding-block: calc(var(--spacing) * 0.5);
+    padding-inline: calc(var(--spacing) * 2);
+    border: var(--cui-flow-edge-label-border-width) solid var(--cui-flow-edge-label-border-color);
+    border-radius: 9999px;
+    background-color: var(--cui-flow-edge-label-background);
+    color: var(--cui-flow-edge-label-foreground);
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+@property --cui-flow-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-grid-dot-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-edge-stroke {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-selected-edge-stroke {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-edge-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-node-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-node-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-node-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-node-hover-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-node-selected-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-node-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-node-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-node-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-flow-handle-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-handle-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-handle-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-handle-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-edge-label-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-edge-label-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-edge-label-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-edge-label-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-controls-item-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-controls-padding {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-controls-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-flow-controls-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-controls-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-flow-controls-shadow {
+  syntax: "*";
+  inherits: true;
+}