/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import { cn } from "../utils/cn.js";
import { ActionButton } from "../core/ActionButton/ActionButton.js";
import "../core/ActionButton/index.js";
import { Chip } from "../core/Chip/Chip2.js";
import "../core/Chip/index.js";
import { LiveIndicator } from "../core/LiveIndicator/LiveIndicator.js";
import "../core/LiveIndicator/index.js";
/* empty css        */
import React from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region src/console/Console.tsx
var ConsoleRoot = ({ theme = "light", children, className, testId, ...rest }) => /* @__PURE__ */ jsx("section", {
	...rest,
	className: cn("console", `--theme-${theme}`, className),
	"data-testid": testId,
	children
});
ConsoleRoot.displayName = "Console";
var TitleBar = ({ children, className }) => /* @__PURE__ */ jsx("div", {
	className: cn("console-titlebar", className),
	children
});
TitleBar.displayName = "Console.TitleBar";
var Title = ({ children, className }) => /* @__PURE__ */ jsx("h2", {
	className: cn("console-title", className),
	children
});
Title.displayName = "Console.Title";
/**
* Small environment/scope chip displayed next to the title (e.g. "prod").
* Renders as a {@link Chip}; the console theme overrides chip tokens so it
* reads correctly in dark / retro modes.
*/
var Tag = ({ children, className }) => /* @__PURE__ */ jsx(Chip, {
	className: cn("console-tag", className),
	children
});
Tag.displayName = "Console.Tag";
/** Trailing counter ("32 events · last 10 min"). Pushed right via margin-left:auto. */
var Counter = ({ children, className }) => /* @__PURE__ */ jsx("span", {
	className: cn("console-counter", className),
	children
});
Counter.displayName = "Console.Counter";
/**
* Scrollable container holding the rows. Forwarded ref lets consumers
* implement their own auto-scroll-to-bottom behavior.
*/
var Body = React.forwardRef(({ children, className }, ref) => /* @__PURE__ */ jsx("div", {
	ref,
	className: cn("console-body", className),
	role: "log",
	children
}));
Body.displayName = "Console.Body";
var Group = ({ label, count, countLabel, className }) => /* @__PURE__ */ jsxs("div", {
	className: cn("console-group", className),
	children: [/* @__PURE__ */ jsx("span", { children: label }), (countLabel !== void 0 || count !== void 0) && /* @__PURE__ */ jsxs("span", {
		className: "console-group-count",
		children: ["· ", countLabel ?? `${count} event${count === 1 ? "" : "s"}`]
	})]
});
Group.displayName = "Console.Group";
var LEVEL_LABELS = {
	debug: "debug",
	info: "info",
	success: "success",
	warning: "warn",
	error: "error"
};
var Entry = ({ timestamp, level, levelLabel, source, sourceColor, message, meta, children, expanded, onToggle, className, testId }) => {
	const interactive = children != null;
	const handleClick = () => {
		if (interactive) onToggle?.(!expanded);
	};
	const rowClassName = cn("console-entry", expanded && "--expanded", className);
	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
		/* @__PURE__ */ jsx("div", {
			className: "console-entry-time",
			children: timestamp
		}),
		/* @__PURE__ */ jsx(Chip, {
			variant: "outline",
			className: cn("console-entry-level", `--${level}`),
			children: levelLabel ?? LEVEL_LABELS[level]
		}),
		source !== void 0 ? /* @__PURE__ */ jsxs("div", {
			className: "console-entry-source",
			style: sourceColor ? { color: sourceColor } : void 0,
			children: [/* @__PURE__ */ jsx("span", {
				className: "console-entry-source-swatch",
				"aria-hidden": "true"
			}), source]
		}) : /* @__PURE__ */ jsx("div", {
			className: "console-entry-source",
			"aria-hidden": "true"
		}),
		/* @__PURE__ */ jsx("div", {
			className: "console-entry-msg",
			children: message
		}),
		/* @__PURE__ */ jsxs("div", {
			className: "console-entry-meta",
			children: [meta !== void 0 && /* @__PURE__ */ jsx("span", { children: meta }), interactive && /* @__PURE__ */ jsx("span", {
				className: "console-entry-chev",
				"aria-hidden": "true",
				children: /* @__PURE__ */ jsx(Chevron, {})
			})]
		})
	] });
	return /* @__PURE__ */ jsxs(Fragment, { children: [interactive ? /* @__PURE__ */ jsx("button", {
		type: "button",
		className: rowClassName,
		onClick: handleClick,
		"aria-expanded": !!expanded,
		"data-testid": testId,
		children: inner
	}) : /* @__PURE__ */ jsx("div", {
		className: rowClassName,
		"data-static": "true",
		"data-testid": testId,
		children: inner
	}), interactive && expanded && /* @__PURE__ */ jsx("div", {
		className: "console-entry-expand",
		children
	})] });
};
Entry.displayName = "Console.Entry";
/** Tabular time rendered with muted milliseconds — pass as `timestamp`. */
var Time = ({ hhmmss, ms, className }) => /* @__PURE__ */ jsxs("span", {
	className,
	children: [hhmmss, ms && /* @__PURE__ */ jsxs("span", {
		className: "console-entry-time-ms",
		children: [".", ms]
	})]
});
Time.displayName = "Console.Time";
/** Preformatted detail block (e.g. JSON dump) inside `Entry`'s expand area. */
var EntryDetail = ({ children, className }) => /* @__PURE__ */ jsx("pre", {
	className: cn("console-entry-expand-detail", className),
	children
});
EntryDetail.displayName = "Console.EntryDetail";
/** Blinking block cursor — for empty states or banners in `retro` theme. */
var RetroCursor = ({ className }) => /* @__PURE__ */ jsx("span", {
	className: cn("console-retro-cursor", className),
	"aria-hidden": "true"
});
RetroCursor.displayName = "Console.RetroCursor";
var Chevron = () => /* @__PURE__ */ jsx("svg", {
	width: "12",
	height: "12",
	xmlns: "http://www.w3.org/2000/svg",
	fill: "none",
	stroke: "currentColor",
	strokeWidth: "1.8",
	strokeLinecap: "round",
	strokeLinejoin: "round",
	viewBox: "0 0 24 24",
	children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
});
/**
* Themable, presentational log/event console. Compose with `TitleBar`,
* `LiveIndicator`, `Body`, `Group`, and `Entry`.
*
* @beta This component is experimental — prop shape and visual treatment
* may change before release.
*
* @example
* ```tsx
* <Console theme="dark" aria-label="System log">
*   <Console.TitleBar>
*     <Console.Title>System log</Console.Title>
*     <Console.Tag>prod</Console.Tag>
*     <Console.LiveIndicator status={paused ? 'paused' : 'live'} />
*     <Console.Counter><b>{events.length}</b> events · last 10 min</Console.Counter>
*   </Console.TitleBar>
*   <Console.Body ref={bodyRef}>
*     <Console.Group label="18:42" count={3} />
*     {events.map((ev) => (
*       <Console.Entry
*         key={ev.id}
*         timestamp={<Console.Time hhmmss={ev.hhmmss} ms={ev.ms} />}
*         level={ev.level}
*         source={ev.source}
*         message={ev.message}
*         meta={ev.meta}
*         expanded={expandedId === ev.id}
*         onToggle={(next) => setExpandedId(next ? ev.id : null)}
*       >
*         <Console.EntryDetail>{JSON.stringify(ev.payload, null, 2)}</Console.EntryDetail>
*       </Console.Entry>
*     ))}
*   </Console.Body>
* </Console>
* ```
*/
var Console = Object.assign(ConsoleRoot, {
	TitleBar,
	Title,
	Tag,
	LiveIndicator,
	Counter,
	ActionButton,
	Body,
	Group,
	Entry,
	Time,
	EntryDetail,
	RetroCursor
});
//#endregion
export { Console };

//# sourceMappingURL=Console2.js.map