@tangle-network/ui 11.11.8 → 11.13.0

package/dist/lib/focus.d.ts

@@ -0,0 +1,55 @@
+//#region src/lib/focus.d.ts
+/**
+ * The focus treatment every control shares, in two shapes over one palette
+ * (`--focus-border`, `--focus-halo` and `--border-strong` from
+ * `@tangle-network/brand`'s tokens.css).
+ *
+ * A FIELD — input, textarea, select trigger, composer — shows focus on its own
+ * border: the hairline shifts to `--focus-border` and a 3px `--focus-halo` ring
+ * spreads outside it. It keys off `:focus`, because a caret in a field needs the
+ * cue whether the field was clicked or tabbed into.
+ *
+ * A CONTROL — button, tab, switch, link, card — has no border to shift, so it
+ * draws a 1px `--focus-border` outline with the same 3px halo beyond it. It keys
+ * off `:focus-visible`, so a mouse click leaves no ring.
+ *
+ * The halo is a Tailwind ring, which renders as box-shadow: it follows
+ * border-radius and never moves layout, and a consumer removes it with
+ * `focus:ring-0` / `focus-visible:ring-0`, which tailwind-merge resolves against
+ * these classes. The control's line is an outline so that forced-colors mode,
+ * which drops box-shadows, still paints it. A field has its border for that, so
+ * it hides the outline with `outline-hidden`, which stays transparent-but-present
+ * in forced-colors mode.
+ */
+/**
+ * Resting hairline, neutral hover, and `:focus` border plus halo for a text
+ * field. The hover is a plain `hover:` class so a consumer's `hover:border-*`
+ * replaces it through tailwind-merge; the focus border outranks it because
+ * Tailwind emits `focus:` after `hover:`.
+ */
+export declare const focusField = "border-border transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--border-strong)] focus:outline-hidden focus:border-[var(--focus-border)] focus:ring-3 focus:ring-[var(--focus-halo)]";
+/**
+ * The field treatment for a container that wraps a borderless field, such as a
+ * composer around a textarea and its buttons. It lights while a FIELD inside
+ * has focus: a text input, textarea, native select or contenteditable editor. A
+ * focused button, checkbox or button-type input inside the container shows only
+ * its own ring, so a click on the send button does not read as field focus and
+ * a tab to it does not stack two indicators. `:focus-within` cannot tell the
+ * two apart, so the rule keys off `:has()`; a consumer's `focus-within:*` class
+ * therefore does not replace it. To style that container's focus differently,
+ * compose your own classes instead of this helper. The field selector is
+ * written out in full because Tailwind reads class names statically.
+ * Base styles use its marker class to clear the inner editor fallback outline.
+ */
+export declare const focusFieldWithin = "focus-field-within border-border transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--border-strong)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:border-[var(--focus-border)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-3 has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-[var(--focus-halo)]";
+/** Error state for a field: a danger hairline and the same focus shape in danger. Compose after `focusField`. */
+export declare const focusFieldInvalid = "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]";
+/** Keyboard-only focus for a control: a 1px focus line with the halo beyond it. */
+export declare const focusRing = "focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0";
+/**
+ * `focusRing` drawn inside the box, for a control flush against a scroll
+ * container or its neighbours (a tab strip, a list row), where an outer ring
+ * would be clipped or would overlap them.
+ */
+export declare const focusRingInset = "focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:-outline-offset-1 focus-visible:ring-inset";
+//#endregion

package/dist/{focus-BcE_SHqz.js → lib/focus.js}

@@ -54,4 +54,4 @@ const focusRing = `${focusRingBase} focus-visible:outline-offset-0`;
 */
 const focusRingInset = `${focusRingBase} focus-visible:-outline-offset-1 focus-visible:ring-inset`;
 //#endregion
-export { focusRingInset as a, focusRing as i, focusFieldInvalid as n, focusFieldWithin as r, focusField as t };
+export { focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset };

package/dist/lib/utils.d.ts

@@ -0,0 +1,4 @@
+import { ClassValue } from "clsx";
+//#region src/lib/utils.d.ts
+export declare function cn(...inputs: ClassValue[]): string;
+//#endregion

package/dist/{utils-C_uf36nf.js → lib/utils.js}

@@ -5,4 +5,4 @@ function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
 //#endregion
-export { cn as t };
+export { cn };

package/dist/{code-block-B9miUPht.d.ts → markdown/code-block.d.ts}

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/markdown/code-block.d.ts
-interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
+export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
   code: string;
   language?: string;
   /**
@@ -10,14 +10,13 @@ interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
    */
   label?: string;
   showLineNumbers?: boolean;
-  /** Force light theme; defaults to dark */
+  /** Force light (true) or dark (false); omitted inherits the nearest theme. */
   light?: boolean;
   children?: ReactNode;
 }
-declare const CodeBlock: import("react").MemoExoticComponent<({ code, language, label, showLineNumbers, light: lightProp, className, children, ...props }: CodeBlockProps) => import("react").JSX.Element>;
+export declare const CodeBlock: import("react").MemoExoticComponent<({ code, language, label, showLineNumbers, light, className, children, ...props }: CodeBlockProps) => import("react").JSX.Element>;
 /** Copy-to-clipboard button for use inside CodeBlock. */
-declare const CopyButton: import("react").MemoExoticComponent<({ text }: {
+export declare const CopyButton: import("react").MemoExoticComponent<({ text }: {
   text: string;
 }) => import("react").JSX.Element>;
-//#endregion
-export { CodeBlockProps as n, CopyButton as r, CodeBlock as t };
+//#endregion

package/dist/{code-block-B36KVUSN.js → markdown/code-block.js}

@@ -1,22 +1,19 @@
-import { i as focusRing } from "./focus-BcE_SHqz.js";
-import { t as cn } from "./utils-C_uf36nf.js";
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, Copy } from "lucide-react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 //#region src/markdown/code-block.tsx
-function getSyntaxTheme() {
-	const el = typeof document !== "undefined" ? document.documentElement : null;
-	const v = (name, fallback) => el ? getComputedStyle(el).getPropertyValue(name).trim() || fallback : fallback;
-	const comment = v("--syntax-comment", "#6B7094");
-	const keyword = v("--syntax-keyword", "#A78FFF");
-	const string = v("--syntax-string", "#10b981");
-	const fn = v("--syntax-function", "#6D9FFF");
-	const number = v("--syntax-number", "#FFB347");
-	const meta = v("--syntax-meta", "#8263FF");
-	const error = v("--syntax-error", "#FF4D6D");
-	const variable = v("--syntax-variable", "#C4C0D8");
-	const fg = v("--syntax-foreground", "#E8E6F6");
+const syntaxTheme = (() => {
+	const comment = "var(--syntax-comment, currentColor)";
+	const keyword = "var(--syntax-keyword, currentColor)";
+	const string = "var(--syntax-string, currentColor)";
+	const fn = "var(--syntax-function, currentColor)";
+	const number = "var(--syntax-number, currentColor)";
+	const meta = "var(--syntax-meta, currentColor)";
+	const error = "var(--syntax-error, currentColor)";
+	const variable = "var(--syntax-variable, currentColor)";
 	return {
 		"hljs-comment": {
 			color: comment,
@@ -63,45 +60,23 @@ function getSyntaxTheme() {
 		"hljs-strong": { fontWeight: "bold" },
 		"hljs-emphasis": { fontStyle: "italic" },
 		"hljs": {
-			color: fg,
+			color: "var(--syntax-foreground, currentColor)",
 			background: "transparent"
 		}
 	};
-}
-const LIGHT_THEMES = /* @__PURE__ */ new Set(["vault", "dawn"]);
-function detectLightTheme() {
-	return typeof document !== "undefined" && LIGHT_THEMES.has(document.documentElement.getAttribute("data-sandbox-theme") ?? "");
-}
-function useIsLightTheme() {
-	const [isLight, setIsLight] = useState(detectLightTheme);
-	useEffect(() => {
-		if (typeof document === "undefined") return;
-		setIsLight(detectLightTheme());
-		const observer = new MutationObserver(() => setIsLight(detectLightTheme()));
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: ["data-sandbox-theme"]
-		});
-		return () => observer.disconnect();
-	}, []);
-	return isLight;
-}
-const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light: lightProp, className, children, ...props }) => {
-	const isLight = useIsLightTheme();
-	const light = lightProp ?? isLight;
-	const theme = getSyntaxTheme();
-	const bg = "bg-card border-border";
-	const headerBg = light ? "bg-muted/50 border-border" : "bg-background border-border";
-	const langColor = "text-muted-foreground";
+})();
+const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light, className, children, ...props }) => {
 	const headerLabel = label ?? language;
+	const mode = light === void 0 ? {} : { "data-theme": light ? "light" : "dark" };
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("group relative overflow-hidden rounded-lg border font-mono", bg, className),
+		className: cn("group relative overflow-hidden rounded-lg border font-mono", "bg-card border-border", className),
 		...props,
+		...mode,
 		children: [
 			headerLabel && /* @__PURE__ */ jsxs("div", {
-				className: cn("flex items-center justify-between border-b px-3 py-1", headerBg),
+				className: "flex items-center justify-between border-b border-border px-3 py-1 bg-[var(--code-header-bg,hsl(var(--background)))]",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: cn("text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest", langColor),
+					className: "text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest text-muted-foreground",
 					children: headerLabel
 				}), children]
 			}),
@@ -111,10 +86,10 @@ const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light:
 			}),
 			/* @__PURE__ */ jsx(SyntaxHighlighter, {
 				language: language ?? "text",
-				style: theme,
+				style: syntaxTheme,
 				showLineNumbers,
 				lineNumberStyle: {
-					color: light ? "#8B92B8" : "#4A4D6A",
+					color: "var(--syntax-comment, currentColor)",
 					minWidth: "2.5em",
 					paddingRight: "1em"
 				},
@@ -162,4 +137,4 @@ const CopyButton = memo(({ text }) => {
 });
 CopyButton.displayName = "CopyButton";
 //#endregion
-export { CopyButton as n, CodeBlock as t };
+export { CodeBlock, CopyButton };

package/dist/{markdown-C0atSabr.d.ts → markdown/markdown.d.ts}

@@ -1,8 +1,8 @@
 import { UrlTransform } from "react-markdown";
 //#region src/markdown/markdown.d.ts
 /** Converts a raw Markdown fragment to the ID rehype-sanitize emits for its heading. */
-declare function getSanitizedMarkdownHeadingIdFromRawFragment(rawFragment: string): string;
-interface MarkdownProps {
+export declare function getSanitizedMarkdownHeadingIdFromRawFragment(rawFragment: string): string;
+export interface MarkdownProps {
   children: string;
   className?: string;
   /** Transform parsed link and image URLs while retaining protocol safety checks. */
@@ -12,6 +12,5 @@ interface MarkdownProps {
  * Renders Markdown content with GFM support, XSS sanitisation, and
  * custom code block rendering via our CodeBlock component.
  */
-declare const Markdown: import("react").MemoExoticComponent<({ children, className, urlTransform }: MarkdownProps) => import("react").JSX.Element>;
-//#endregion
-export { MarkdownProps as n, getSanitizedMarkdownHeadingIdFromRawFragment as r, Markdown as t };
+export declare const Markdown: import("react").MemoExoticComponent<({ children, className, urlTransform }: MarkdownProps) => import("react").JSX.Element>;
+//#endregion

package/dist/{markdown-Db08KAYF.js → markdown/markdown.js}

@@ -1,5 +1,5 @@
-import { t as cn } from "./utils-C_uf36nf.js";
-import { n as CopyButton, t as CodeBlock } from "./code-block-B36KVUSN.js";
+import { cn } from "../lib/utils.js";
+import { CodeBlock, CopyButton } from "./code-block.js";
 import { memo } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
@@ -63,4 +63,4 @@ const Markdown = memo(({ children, className, urlTransform }) => {
 });
 Markdown.displayName = "Markdown";
 //#endregion
-export { getSanitizedMarkdownHeadingIdFromRawFragment as n, Markdown as t };
+export { Markdown, getSanitizedMarkdownHeadingIdFromRawFragment };

package/dist/markdown.d.ts

@@ -1,3 +1,3 @@
-import { n as MarkdownProps, r as getSanitizedMarkdownHeadingIdFromRawFragment, t as Markdown } from "./markdown-C0atSabr.js";
-import { n as CodeBlockProps, r as CopyButton, t as CodeBlock } from "./code-block-B9miUPht.js";
+import { Markdown, MarkdownProps, getSanitizedMarkdownHeadingIdFromRawFragment } from "./markdown/markdown.js";
+import { CodeBlock, CodeBlockProps, CopyButton } from "./markdown/code-block.js";
 export { CodeBlock, type CodeBlockProps, CopyButton, Markdown, type MarkdownProps, getSanitizedMarkdownHeadingIdFromRawFragment };

package/dist/markdown.js

@@ -1,3 +1,3 @@
-import { n as CopyButton, t as CodeBlock } from "./code-block-B36KVUSN.js";
-import { n as getSanitizedMarkdownHeadingIdFromRawFragment, t as Markdown } from "./markdown-Db08KAYF.js";
+import { CodeBlock, CopyButton } from "./markdown/code-block.js";
+import { Markdown, getSanitizedMarkdownHeadingIdFromRawFragment } from "./markdown/markdown.js";
 export { CodeBlock, CopyButton, Markdown, getSanitizedMarkdownHeadingIdFromRawFragment };

package/dist/{openui-artifact-renderer-fkBQaoLO.d.ts → openui/openui-artifact-renderer.d.ts}

@@ -1,8 +1,8 @@
-import { n as MarkdownProps } from "./markdown-C0atSabr.js";
+import { MarkdownProps } from "../markdown/markdown.js";
 import { ReactNode } from "react";
 //#region src/openui/openui-artifact-renderer.d.ts
-type OpenUIPrimitive = string | number | boolean | null | undefined;
-interface OpenUIAction {
+export type OpenUIPrimitive = string | number | boolean | null | undefined;
+export interface OpenUIAction {
   id: string;
   label: string;
   tone?: "default" | "secondary" | "outline" | "ghost" | "destructive";
@@ -12,32 +12,32 @@ interface OpenUIAction {
 interface OpenUIBaseNode {
   id?: string;
 }
-interface OpenUIHeadingNode extends OpenUIBaseNode {
+export interface OpenUIHeadingNode extends OpenUIBaseNode {
   type: "heading";
   text: string;
   level?: 1 | 2 | 3 | 4;
   kicker?: string;
   meta?: string;
 }
-interface OpenUITextNode extends OpenUIBaseNode {
+export interface OpenUITextNode extends OpenUIBaseNode {
   type: "text";
   text: string;
   tone?: "default" | "muted" | "success" | "warning" | "error";
   mono?: boolean;
 }
-interface OpenUIBadgeNode extends OpenUIBaseNode {
+export interface OpenUIBadgeNode extends OpenUIBaseNode {
   type: "badge";
   label: string;
   tone?: "default" | "secondary" | "success" | "warning" | "error" | "info" | "sandbox";
 }
-interface OpenUIStatNode extends OpenUIBaseNode {
+export interface OpenUIStatNode extends OpenUIBaseNode {
   type: "stat";
   label: string;
   value: string;
   change?: string;
   tone?: "default" | "success" | "warning" | "error" | "info";
 }
-interface OpenUIKeyValueNode extends OpenUIBaseNode {
+export interface OpenUIKeyValueNode extends OpenUIBaseNode {
   type: "key_value";
   items: Array<{
     id?: string;
@@ -46,18 +46,18 @@ interface OpenUIKeyValueNode extends OpenUIBaseNode {
     tone?: "default" | "muted";
   }>;
 }
-interface OpenUICodeNode extends OpenUIBaseNode {
+export interface OpenUICodeNode extends OpenUIBaseNode {
   type: "code";
   code: string;
   language?: string;
   title?: string;
   showLineNumbers?: boolean;
 }
-interface OpenUIMarkdownNode extends OpenUIBaseNode {
+export interface OpenUIMarkdownNode extends OpenUIBaseNode {
   type: "markdown";
   content: string;
 }
-interface OpenUITableNode extends OpenUIBaseNode {
+export interface OpenUITableNode extends OpenUIBaseNode {
   type: "table";
   columns: Array<{
     key: string;
@@ -67,15 +67,15 @@ interface OpenUITableNode extends OpenUIBaseNode {
   rows: Array<Record<string, ReactNode | OpenUIPrimitive>>;
   caption?: string;
 }
-interface OpenUIActionsNode extends OpenUIBaseNode {
+export interface OpenUIActionsNode extends OpenUIBaseNode {
   type: "actions";
   actions: OpenUIAction[];
 }
-interface OpenUISeparatorNode extends OpenUIBaseNode {
+export interface OpenUISeparatorNode extends OpenUIBaseNode {
   type: "separator";
   label?: string;
 }
-interface OpenUIStackNode extends OpenUIBaseNode {
+export interface OpenUIStackNode extends OpenUIBaseNode {
   type: "stack";
   direction?: "row" | "column";
   gap?: "sm" | "md" | "lg";
@@ -83,13 +83,13 @@ interface OpenUIStackNode extends OpenUIBaseNode {
   wrap?: boolean;
   children: OpenUIComponentNode[];
 }
-interface OpenUIGridNode extends OpenUIBaseNode {
+export interface OpenUIGridNode extends OpenUIBaseNode {
   type: "grid";
   columns?: 1 | 2 | 3 | 4;
   gap?: "sm" | "md" | "lg";
   children: OpenUIComponentNode[];
 }
-interface OpenUICardNode extends OpenUIBaseNode {
+export interface OpenUICardNode extends OpenUIBaseNode {
   type: "card";
   title?: string;
   description?: string;
@@ -98,8 +98,8 @@ interface OpenUICardNode extends OpenUIBaseNode {
   actions?: OpenUIAction[];
   children?: OpenUIComponentNode[];
 }
-type OpenUIComponentNode = OpenUIActionsNode | OpenUIBadgeNode | OpenUICardNode | OpenUICodeNode | OpenUIGridNode | OpenUIHeadingNode | OpenUIKeyValueNode | OpenUIMarkdownNode | OpenUISeparatorNode | OpenUIStackNode | OpenUIStatNode | OpenUITableNode | OpenUITextNode;
-interface OpenUIArtifactRendererProps {
+export type OpenUIComponentNode = OpenUIActionsNode | OpenUIBadgeNode | OpenUICardNode | OpenUICodeNode | OpenUIGridNode | OpenUIHeadingNode | OpenUIKeyValueNode | OpenUIMarkdownNode | OpenUISeparatorNode | OpenUIStackNode | OpenUIStatNode | OpenUITableNode | OpenUITextNode;
+export interface OpenUIArtifactRendererProps {
   schema: OpenUIComponentNode | OpenUIComponentNode[];
   onAction?: (action: OpenUIAction) => void;
   className?: string;
@@ -111,6 +111,5 @@ interface OpenUIArtifactRendererProps {
  * extension surface for generated inspectors/results, not a replacement for
  * the sandbox shell.
  */
-declare function OpenUIArtifactRenderer({ schema, onAction, className, urlTransform }: OpenUIArtifactRendererProps): import("react").JSX.Element;
-//#endregion
-export { OpenUITableNode as _, OpenUIBadgeNode as a, OpenUIComponentNode as c, OpenUIKeyValueNode as d, OpenUIMarkdownNode as f, OpenUIStatNode as g, OpenUIStackNode as h, OpenUIArtifactRendererProps as i, OpenUIGridNode as l, OpenUISeparatorNode as m, OpenUIActionsNode as n, OpenUICardNode as o, OpenUIPrimitive as p, OpenUIArtifactRenderer as r, OpenUICodeNode as s, OpenUIAction as t, OpenUIHeadingNode as u, OpenUITextNode as v };
+export declare function OpenUIArtifactRenderer({ schema, onAction, className, urlTransform }: OpenUIArtifactRendererProps): import("react").JSX.Element;
+//#endregion

package/dist/{openui-artifact-renderer-DG_i2lOR.js → openui/openui-artifact-renderer.js}

@@ -1,9 +1,11 @@
-import { t as findUnsupportedOpenUINode } from "./schema-BpW9rSSG.js";
-import { t as cn } from "./utils-C_uf36nf.js";
-import { t as Button } from "./button-C87nEe2R.js";
-import { c as TableRow, d as Card, f as CardContent, g as CardTitle, h as CardHeader, i as TableCell, l as Badge, n as TableBody, o as TableHead, p as CardDescription, s as TableHeader, t as Table } from "./table-Bss73DhB.js";
-import { t as CodeBlock } from "./code-block-B36KVUSN.js";
-import { t as Markdown } from "./markdown-Db08KAYF.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "../primitives/button.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../primitives/card.js";
+import { Badge } from "../primitives/badge.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/table.js";
+import { CodeBlock } from "../markdown/code-block.js";
+import { Markdown } from "../markdown/markdown.js";
+import { findUnsupportedOpenUINode } from "../openui-schema.js";
 import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Minus } from "lucide-react";
@@ -259,4 +261,4 @@ function OpenUIArtifactRenderer({ schema, onAction, className, urlTransform }) {
 	});
 }
 //#endregion
-export { OpenUIArtifactRenderer as t };
+export { OpenUIArtifactRenderer };