@tangle-network/ui 11.9.0 → 11.11.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @tangle-network/ui
 
+## 11.11.0
+
+### Minor Changes
+
+- dc84d1c: Update every dependency to its latest release and build with tsdown on TypeScript 7.
+  `@tangle-network/ui` now accepts `@nanostores/react` 2 as a peer, moves to lucide-react 1 and marked 18, and drops the unused `react-pdf` and `@radix-ui/react-toast` dependencies.
+  Export paths are unchanged; internal chunk file names differ.
+
+## 11.10.0
+
+### Minor Changes
+
+- 4649d22: Replace the hard 2px indigo focus ring with one soft focus treatment for every control.
+  
+  brand adds `--focus-border`, `--focus-halo`, `--focus-border-danger`, `--focus-halo-danger` and `--border-strong`. Each derives from the ring, danger-ink, border and foreground tokens, so every theme, named theme and light island resolves its own values. The focus border clears 3:1 against the field in every theme, which `focus.test.ts` enforces.
+  
+  brand's `globals.css` also gives any control that styles no focus of its own (a hand-rolled button, link, radio card or tab) the same keyboard focus line and halo in the base layer, in place of the browser's blue outline. Component utilities still override it.
+  
+  ui exports `focusField`, `focusFieldWithin`, `focusFieldInvalid`, `focusRing` and `focusRingInset` from `utils`, and the primitives use them:
+  
+  - `Input`, `Textarea`, `SelectTrigger` and `TerminalInput` rest on the neutral `border-border` hairline instead of the muted-text `border-input`, darken slightly on hover, and on focus shift the border to `--focus-border` with a 3px `--focus-halo` ring. The `default` and `sandbox` variants now render the same field.
+  - `Button`, `Tabs`, `Switch`, `Badge`, `SegmentedControl`, the dialog and toast close buttons, the auth menu trigger, and the chat and file controls show a 1px focus line with the same halo on `:focus-visible` only. A mouse click no longer draws a ring.
+  - Interactive `Card`, tool-preview and code-block hovers darken the border instead of tinting it indigo.
+  
+  A consumer that removed the old ring with `focus-visible:ring-0` on a field should pass `focus:ring-0` instead, because the field ring now keys off `:focus`.
+
+### Patch Changes
+
+- 53add99: `focusFieldWithin` lights the container only while a field inside it has focus: a text input, textarea, select or contenteditable editor. It used `:focus-within`, so clicking a composer's send button drew the field ring around the whole composer, and tabbing to that button showed two indicators. A focused button, checkbox or button-type input inside the container now shows only its own ring. Because the rule keys off `:has()`, a consumer's `focus-within:*` class does not override it; compose your own classes for a different container focus.
+
 ## 11.9.0
 
 ### Minor Changes

package/README.md

@@ -69,6 +69,20 @@ One consequence worth knowing. This is a scan, not a manifest, so a consumer emi
 
 See [`@tangle-network/brand`'s README](../brand/README.md) for the token-level breakdown, the finer-grained imports, and the fonts, which brand deliberately does not bundle.
 
+### Focus treatment
+
+Every control shares one focus treatment, exported from `utils` as class strings.
+Compose them with `cn` so tailwind-merge resolves any override.
+
+- `focusField` — a text field: neutral hairline, a slightly darker border on hover, and on `:focus` a `--focus-border` border with a 3px `--focus-halo` ring.
+- `focusFieldWithin` — the same, for a container that wraps a borderless field, such as a composer around a textarea. It lights while a text input, textarea, native `<select>` or contenteditable editor inside it has focus, not while a button inside it does. It keys off `:has()`, so a `focus-within:*` class does not override it.
+- `focusFieldInvalid` — the error state of a field. Compose it after `focusField`.
+- `focusRing` — keyboard focus on a button, tab, switch or link: a 1px `--focus-border` outline with the halo beyond it, on `:focus-visible` only.
+- `focusRingInset` — `focusRing` drawn inside the box, for a control in a scrolling strip.
+
+The colors come from the `--focus-*` tokens in `@tangle-network/brand`, so they need brand 1.6 or later.
+To remove the ring from a field nested in a focusable container, pass `focus:ring-0 border-0` and put `focusFieldWithin` on the container.
+
 ## Subpaths
 
 Sixteen named exports: `primitives`, `chat`, `run`, `openui`, `files`, `editor`, `markdown`, `auth`, `hooks`, `sdk-hooks`, `stores`, `types`, `utils`, `tool-previews`, `nav`, `redaction`.

package/dist/active-sessions-store-Gt1R0rFG.js

@@ -0,0 +1,262 @@
+import { useMemo } from "react";
+import { useStore } from "@nanostores/react";
+import { atom } from "nanostores";
+//#region src/stores/active-sessions-store.ts
+const INITIAL_STATE = {
+	sessions: {},
+	lastUpdatedAt: 0
+};
+const STATUS_PRIORITY = {
+	running: 0,
+	error: 1,
+	"attention-needed": 2,
+	idle: 3
+};
+const DEFAULT_RECORD = {
+	status: "idle",
+	isRunning: false,
+	isForeground: false,
+	needsAttention: false,
+	connectionState: "disconnected",
+	reconnectState: "idle",
+	transportMode: null,
+	lastError: null,
+	lastEventAt: null
+};
+const activeSessionsAtom = atom(INITIAL_STATE);
+let foregroundSessionId = null;
+function createRecord(options, now) {
+	return {
+		sessionId: options.sessionId,
+		projectId: options.projectId ?? null,
+		projectLabel: options.projectLabel,
+		title: options.title,
+		href: options.href,
+		registeredAt: now,
+		lastActivityAt: now,
+		metadata: options.metadata,
+		...DEFAULT_RECORD,
+		isForeground: options.sessionId === foregroundSessionId
+	};
+}
+function resolveStatus(session) {
+	if (session.isRunning) return "running";
+	if (session.lastError || session.reconnectState === "failed") return "error";
+	if (session.needsAttention) return "attention-needed";
+	return "idle";
+}
+function normalizeSession(session) {
+	return {
+		...session,
+		status: resolveStatus(session)
+	};
+}
+function updateSession(sessionId, updater) {
+	const current = activeSessionsAtom.get();
+	const existing = current.sessions[sessionId];
+	if (!existing) return;
+	const now = Date.now();
+	activeSessionsAtom.set({
+		sessions: {
+			...current.sessions,
+			[sessionId]: normalizeSession(updater(existing, now))
+		},
+		lastUpdatedAt: now
+	});
+}
+function registerActiveSession(options) {
+	const now = Date.now();
+	const current = activeSessionsAtom.get();
+	const existing = current.sessions[options.sessionId];
+	activeSessionsAtom.set({
+		sessions: {
+			...current.sessions,
+			[options.sessionId]: normalizeSession(existing ? {
+				...existing,
+				projectId: existing.projectId ?? options.projectId ?? null,
+				projectLabel: options.projectLabel ?? existing.projectLabel,
+				title: options.title ?? existing.title,
+				href: options.href ?? existing.href,
+				metadata: options.metadata ?? existing.metadata,
+				lastActivityAt: now,
+				isForeground: options.sessionId === foregroundSessionId || existing.isForeground
+			} : createRecord(options, now))
+		},
+		lastUpdatedAt: now
+	});
+}
+function unregisterActiveSession(sessionId) {
+	const current = activeSessionsAtom.get();
+	if (!current.sessions[sessionId]) return;
+	const { [sessionId]: _removed, ...remaining } = current.sessions;
+	if (foregroundSessionId === sessionId) foregroundSessionId = null;
+	activeSessionsAtom.set({
+		sessions: remaining,
+		lastUpdatedAt: Date.now()
+	});
+}
+function setForegroundActiveSession(sessionId) {
+	foregroundSessionId = sessionId;
+	const current = activeSessionsAtom.get();
+	const now = Date.now();
+	let changed = false;
+	const sessions = Object.fromEntries(Object.entries(current.sessions).map(([id, session]) => {
+		const isForeground = id === sessionId;
+		if (session.isForeground !== isForeground) changed = true;
+		return [id, {
+			...session,
+			isForeground,
+			lastActivityAt: isForeground ? now : session.lastActivityAt
+		}];
+	}));
+	if (!changed) return;
+	activeSessionsAtom.set({
+		sessions,
+		lastUpdatedAt: now
+	});
+}
+function updateActiveSessionMeta(sessionId, meta) {
+	updateSession(sessionId, (session, now) => ({
+		...session,
+		...meta,
+		lastActivityAt: now
+	}));
+}
+function setActiveSessionConnection(sessionId, options) {
+	updateSession(sessionId, (session, now) => ({
+		...session,
+		connectionState: options.connectionState,
+		reconnectState: options.reconnectState ?? session.reconnectState,
+		transportMode: options.transportMode ?? session.transportMode,
+		lastError: options.lastError === void 0 ? session.lastError : options.lastError,
+		lastEventAt: options.lastEventAt ?? session.lastEventAt,
+		lastActivityAt: now
+	}));
+}
+function setActiveSessionRunning(sessionId, isRunning, options) {
+	updateSession(sessionId, (session, now) => ({
+		...session,
+		isRunning,
+		needsAttention: isRunning ? false : session.needsAttention,
+		lastError: isRunning ? null : session.lastError,
+		lastEventAt: options?.lastEventAt ?? session.lastEventAt,
+		lastActivityAt: now
+	}));
+}
+function setActiveSessionAttention(sessionId, needsAttention, options) {
+	updateSession(sessionId, (session, now) => ({
+		...session,
+		needsAttention,
+		isRunning: needsAttention ? false : session.isRunning,
+		lastEventAt: options?.lastEventAt ?? session.lastEventAt,
+		lastActivityAt: now
+	}));
+}
+function setActiveSessionError(sessionId, error) {
+	updateSession(sessionId, (session, now) => ({
+		...session,
+		isRunning: false,
+		needsAttention: false,
+		lastError: error,
+		reconnectState: error ? "failed" : "idle",
+		connectionState: error ? "error" : session.connectionState,
+		lastEventAt: now,
+		lastActivityAt: now
+	}));
+}
+function bumpActiveSessionActivity(sessionId, options) {
+	updateSession(sessionId, (session, now) => ({
+		...session,
+		lastEventAt: options?.lastEventAt ?? session.lastEventAt ?? now,
+		lastActivityAt: now
+	}));
+}
+function resetActiveSessions() {
+	foregroundSessionId = null;
+	activeSessionsAtom.set(INITIAL_STATE);
+}
+function getAllActiveSessions(state) {
+	return Object.values(state.sessions);
+}
+function getActiveSession(state, sessionId) {
+	return state.sessions[sessionId] ?? null;
+}
+function getSessionsForProject(state, projectId) {
+	return Object.values(state.sessions).filter((session) => session.projectId === projectId);
+}
+function getSessionsForNavbar(state, projectId) {
+	return [...projectId == null ? Object.values(state.sessions) : getSessionsForProject(state, projectId)].sort((left, right) => {
+		if (left.isForeground !== right.isForeground) return Number(right.isForeground) - Number(left.isForeground);
+		const statusDiff = STATUS_PRIORITY[left.status] - STATUS_PRIORITY[right.status];
+		if (statusDiff !== 0) return statusDiff;
+		return right.lastActivityAt - left.lastActivityAt;
+	});
+}
+function getSessionsByActivity(state) {
+	return [...Object.values(state.sessions)].sort((left, right) => right.lastActivityAt - left.lastActivityAt);
+}
+function getTotalRunningSessionCount(state) {
+	return Object.values(state.sessions).filter((session) => session.isRunning).length;
+}
+function hasBackgroundRunningSessions(state) {
+	return Object.values(state.sessions).some((session) => session.isRunning && !session.isForeground);
+}
+function getAllProjectActivity(state) {
+	const grouped = /* @__PURE__ */ new Map();
+	for (const session of Object.values(state.sessions)) {
+		if (session.projectId == null) continue;
+		const existing = grouped.get(session.projectId);
+		if (existing) {
+			existing.activeSessionCount += 1;
+			existing.lastActivityAt = Math.max(existing.lastActivityAt, session.lastActivityAt);
+			if (session.isRunning) existing.runningSessionIds.push(session.sessionId);
+			if (!existing.projectLabel && session.projectLabel) existing.projectLabel = session.projectLabel;
+			continue;
+		}
+		grouped.set(session.projectId, {
+			projectId: session.projectId,
+			projectLabel: session.projectLabel,
+			activeSessionCount: 1,
+			runningSessionIds: session.isRunning ? [session.sessionId] : [],
+			lastActivityAt: session.lastActivityAt
+		});
+	}
+	return [...grouped.values()].sort((left, right) => right.lastActivityAt - left.lastActivityAt);
+}
+function useActiveSessionsState() {
+	return useStore(activeSessionsAtom);
+}
+function useActiveSessions() {
+	const state = useStore(activeSessionsAtom);
+	return useMemo(() => getAllActiveSessions(state), [state]);
+}
+function useActiveSession(sessionId) {
+	const state = useStore(activeSessionsAtom);
+	return useMemo(() => sessionId ? getActiveSession(state, sessionId) : null, [sessionId, state]);
+}
+function useProjectSessions(projectId) {
+	const state = useStore(activeSessionsAtom);
+	return useMemo(() => projectId == null ? [] : getSessionsForProject(state, projectId), [projectId, state]);
+}
+function useNavbarSessions(projectId) {
+	const state = useStore(activeSessionsAtom);
+	return useMemo(() => getSessionsForNavbar(state, projectId), [projectId, state]);
+}
+function useSessionsByActivity() {
+	const state = useStore(activeSessionsAtom);
+	return useMemo(() => getSessionsByActivity(state), [state]);
+}
+function useProjectActivity() {
+	const state = useStore(activeSessionsAtom);
+	return useMemo(() => getAllProjectActivity(state), [state]);
+}
+function useTotalRunningSessions() {
+	const state = useStore(activeSessionsAtom);
+	return useMemo(() => getTotalRunningSessionCount(state), [state]);
+}
+function useHasBackgroundRunningSessions() {
+	const state = useStore(activeSessionsAtom);
+	return useMemo(() => hasBackgroundRunningSessions(state), [state]);
+}
+//#endregion
+export { useHasBackgroundRunningSessions as C, useSessionsByActivity as D, useProjectSessions as E, useTotalRunningSessions as O, useActiveSessionsState as S, useProjectActivity as T, setForegroundActiveSession as _, getAllProjectActivity as a, useActiveSession as b, getSessionsForProject as c, registerActiveSession as d, resetActiveSessions as f, setActiveSessionRunning as g, setActiveSessionError as h, getAllActiveSessions as i, getTotalRunningSessionCount as l, setActiveSessionConnection as m, bumpActiveSessionActivity as n, getSessionsByActivity as o, setActiveSessionAttention as p, getActiveSession as r, getSessionsForNavbar as s, activeSessionsAtom as t, hasBackgroundRunningSessions as u, unregisterActiveSession as v, useNavbarSessions as w, useActiveSessions as x, updateActiveSessionMeta as y };

package/dist/{active-sessions-store-CeOmXgv5.d.ts → active-sessions-store-nl70ZnMC.d.ts}

@@ -1,59 +1,58 @@
-import * as nanostores from 'nanostores';
-
+//#region src/stores/active-sessions-store.d.ts
 type SessionProjectKey = string | number;
 type ActiveSessionStatus = "idle" | "running" | "attention-needed" | "error";
 type ActiveSessionReconnectState = "idle" | "reconnecting" | "failed";
 type ActiveSessionConnectionState = "disconnected" | "connecting" | "connected" | "reconnecting" | "error";
 type ActiveSessionTransportMode = "websocket" | "sse" | "polling" | "custom";
 interface ActiveSessionRecord {
-    sessionId: string;
-    projectId: SessionProjectKey | null;
-    projectLabel?: string;
-    title?: string;
-    href?: string;
-    registeredAt: number;
-    lastActivityAt: number;
-    lastEventAt: number | null;
-    status: ActiveSessionStatus;
-    isRunning: boolean;
-    isForeground: boolean;
-    needsAttention: boolean;
-    connectionState: ActiveSessionConnectionState;
-    reconnectState: ActiveSessionReconnectState;
-    transportMode: ActiveSessionTransportMode | null;
-    lastError: string | null;
-    metadata?: Record<string, unknown>;
+  sessionId: string;
+  projectId: SessionProjectKey | null;
+  projectLabel?: string;
+  title?: string;
+  href?: string;
+  registeredAt: number;
+  lastActivityAt: number;
+  lastEventAt: number | null;
+  status: ActiveSessionStatus;
+  isRunning: boolean;
+  isForeground: boolean;
+  needsAttention: boolean;
+  connectionState: ActiveSessionConnectionState;
+  reconnectState: ActiveSessionReconnectState;
+  transportMode: ActiveSessionTransportMode | null;
+  lastError: string | null;
+  metadata?: Record<string, unknown>;
 }
 interface ActiveSessionsState {
-    sessions: Record<string, ActiveSessionRecord>;
-    lastUpdatedAt: number;
+  sessions: Record<string, ActiveSessionRecord>;
+  lastUpdatedAt: number;
 }
 interface RegisterActiveSessionOptions {
-    sessionId: string;
-    projectId?: SessionProjectKey | null;
-    projectLabel?: string;
-    title?: string;
-    href?: string;
-    metadata?: Record<string, unknown>;
+  sessionId: string;
+  projectId?: SessionProjectKey | null;
+  projectLabel?: string;
+  title?: string;
+  href?: string;
+  metadata?: Record<string, unknown>;
 }
 interface ActiveSessionConnectionOptions {
-    connectionState: ActiveSessionConnectionState;
-    reconnectState?: ActiveSessionReconnectState;
-    transportMode?: ActiveSessionTransportMode | null;
-    lastError?: string | null;
-    lastEventAt?: number | null;
+  connectionState: ActiveSessionConnectionState;
+  reconnectState?: ActiveSessionReconnectState;
+  transportMode?: ActiveSessionTransportMode | null;
+  lastError?: string | null;
+  lastEventAt?: number | null;
 }
 interface ActiveSessionActivityOptions {
-    lastEventAt?: number | null;
+  lastEventAt?: number | null;
 }
 interface ActiveProjectActivity {
-    projectId: SessionProjectKey;
-    projectLabel?: string;
-    activeSessionCount: number;
-    runningSessionIds: string[];
-    lastActivityAt: number;
+  projectId: SessionProjectKey;
+  projectLabel?: string;
+  activeSessionCount: number;
+  runningSessionIds: string[];
+  lastActivityAt: number;
 }
-declare const activeSessionsAtom: nanostores.PreinitializedWritableAtom<ActiveSessionsState> & object;
+declare const activeSessionsAtom: import("nanostores").PreinitializedWritableAtom<ActiveSessionsState> & object;
 declare function registerActiveSession(options: RegisterActiveSessionOptions): void;
 declare function unregisterActiveSession(sessionId: string): void;
 declare function setForegroundActiveSession(sessionId: string | null): void;
@@ -81,5 +80,5 @@ declare function useSessionsByActivity(): ActiveSessionRecord[];
 declare function useProjectActivity(): ActiveProjectActivity[];
 declare function useTotalRunningSessions(): number;
 declare function useHasBackgroundRunningSessions(): boolean;
-
-export { type ActiveProjectActivity as A, updateActiveSessionMeta as B, useActiveSession as C, useActiveSessions as D, useActiveSessionsState as E, useHasBackgroundRunningSessions as F, useNavbarSessions as G, useProjectActivity as H, useProjectSessions as I, useSessionsByActivity as J, useTotalRunningSessions as K, type RegisterActiveSessionOptions as R, type SessionProjectKey as S, type ActiveSessionActivityOptions as a, type ActiveSessionConnectionOptions as b, type ActiveSessionConnectionState as c, type ActiveSessionReconnectState as d, type ActiveSessionRecord as e, type ActiveSessionStatus as f, type ActiveSessionTransportMode as g, type ActiveSessionsState as h, activeSessionsAtom as i, bumpActiveSessionActivity as j, getActiveSession as k, getAllActiveSessions as l, getAllProjectActivity as m, getSessionsByActivity as n, getSessionsForNavbar as o, getSessionsForProject as p, getTotalRunningSessionCount as q, hasBackgroundRunningSessions as r, registerActiveSession as s, resetActiveSessions as t, setActiveSessionAttention as u, setActiveSessionConnection as v, setActiveSessionError as w, setActiveSessionRunning as x, setForegroundActiveSession as y, unregisterActiveSession as z };
+//#endregion
+export { updateActiveSessionMeta as A, resetActiveSessions as C, setActiveSessionRunning as D, setActiveSessionError as E, useNavbarSessions as F, useProjectActivity as I, useProjectSessions as L, useActiveSessions as M, useActiveSessionsState as N, setForegroundActiveSession as O, useHasBackgroundRunningSessions as P, useSessionsByActivity as R, registerActiveSession as S, setActiveSessionConnection as T, getSessionsByActivity as _, ActiveSessionReconnectState as a, getTotalRunningSessionCount as b, ActiveSessionTransportMode as c, SessionProjectKey as d, activeSessionsAtom as f, getAllProjectActivity as g, getAllActiveSessions as h, ActiveSessionConnectionState as i, useActiveSession as j, unregisterActiveSession as k, ActiveSessionsState as l, getActiveSession as m, ActiveSessionActivityOptions as n, ActiveSessionRecord as o, bumpActiveSessionActivity as p, ActiveSessionConnectionOptions as r, ActiveSessionStatus as s, ActiveProjectActivity as t, RegisterActiveSessionOptions as u, getSessionsForNavbar as v, setActiveSessionAttention as w, hasBackgroundRunningSessions as x, getSessionsForProject as y, useTotalRunningSessions as z };

package/dist/artifact-pane-BL_DFWNl.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+//#region src/primitives/artifact-pane.d.ts
+interface ArtifactPaneProps {
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  subtitle?: ReactNode;
+  meta?: ReactNode;
+  headerActions?: ReactNode;
+  tabs?: ReactNode;
+  toolbar?: ReactNode;
+  footer?: ReactNode;
+  emptyState?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  /** Extra classes for the header band (e.g. to align its surface with the host chrome). */
+  headerClassName?: string;
+  /**
+   * Suppress the eyebrow/title/subtitle/meta block. Use when the host already
+   * shows the artifact's identity elsewhere (e.g. a surrounding path row), so the
+   * pane keeps only its tabs, toolbar, and header actions. The whole header row
+   * collapses when nothing else would render in it.
+   */
+  hideTitleBlock?: boolean;
+}
+/**
+ * ArtifactPane — shared frame for files, previews, documents, inspectors, and
+ * other artifact-like surfaces inside sandbox applications.
+ */
+declare function ArtifactPane({ eyebrow, title, subtitle, meta, headerActions, tabs, toolbar, footer, emptyState, children, className, contentClassName, headerClassName, hideTitleBlock }: ArtifactPaneProps): import("react").JSX.Element;
+//#endregion
+export { ArtifactPaneProps as n, ArtifactPane as t };

package/dist/artifact-pane-DMXT9a8U.js

@@ -0,0 +1,70 @@
+import { t as cn } from "./utils-C_uf36nf.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/artifact-pane.tsx
+/**
+* ArtifactPane — shared frame for files, previews, documents, inspectors, and
+* other artifact-like surfaces inside sandbox applications.
+*/
+function ArtifactPane({ eyebrow, title, subtitle, meta, headerActions, tabs, toolbar, footer, emptyState, children, className, contentClassName, headerClassName, hideTitleBlock = false }) {
+	const hasContent = children !== void 0 && children !== null;
+	const showTitleRow = !hideTitleBlock || Boolean(headerActions);
+	const hasHeader = showTitleRow || Boolean(tabs) || Boolean(toolbar);
+	const toolbarNeedsDivider = showTitleRow || Boolean(tabs);
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground", className),
+		children: [
+			hasHeader && /* @__PURE__ */ jsxs("header", {
+				className: cn("border-b border-border bg-muted/10", headerClassName),
+				children: [
+					showTitleRow && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-start justify-between gap-3 px-3 py-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "min-w-0 flex-1",
+							children: !hideTitleBlock && /* @__PURE__ */ jsxs(Fragment, { children: [
+								eyebrow && /* @__PURE__ */ jsx("div", {
+									className: "mb-1 inline-flex max-w-full items-center px-1 py-0.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground",
+									children: eyebrow
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "min-w-0 text-[13px] font-medium text-foreground",
+									children: title
+								}),
+								(subtitle || meta) && /* @__PURE__ */ jsxs("div", {
+									className: "mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-relaxed text-muted-foreground",
+									children: [subtitle && /* @__PURE__ */ jsx("span", {
+										className: "truncate",
+										children: subtitle
+									}), meta && /* @__PURE__ */ jsx("span", {
+										className: "flex items-center gap-2",
+										children: meta
+									})]
+								})
+							] })
+						}), headerActions && /* @__PURE__ */ jsx("div", {
+							className: "flex shrink-0 items-center gap-1.5",
+							children: headerActions
+						})]
+					}),
+					tabs,
+					toolbar && /* @__PURE__ */ jsx("div", {
+						className: cn("px-3 py-2", toolbarNeedsDivider && "border-t border-border"),
+						children: toolbar
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("min-h-0 flex-1 overflow-auto", contentClassName),
+				children: hasContent ? children : emptyState ? /* @__PURE__ */ jsx("div", {
+					className: "flex h-full items-center justify-center p-6",
+					children: emptyState
+				}) : null
+			}),
+			footer && /* @__PURE__ */ jsx("footer", {
+				className: "shrink-0 border-t border-border bg-card px-3 py-2",
+				children: footer
+			})
+		]
+	});
+}
+//#endregion
+export { ArtifactPane as t };