@signalcore/ui 0.1.0 → 1.0.0-beta.0

package/dist/kit/Inputs.js

@@ -0,0 +1,205 @@
+import { stepped } from "./numbers.js";
+import { useKit, useParts } from "./context.js";
+import { Box, ariaOf } from "./Field.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { CheckIcon, EnvelopeSimpleIcon, EyeIcon, EyeSlashIcon, GlobeSimpleIcon, LockSimpleIcon, MinusIcon, PhoneIcon, PlusIcon } from "@phosphor-icons/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/Inputs.tsx
+const SHAPES = {
+	text: {
+		type: "text",
+		inputMode: "text",
+		autoComplete: void 0,
+		icon: void 0
+	},
+	email: {
+		type: "email",
+		inputMode: "email",
+		autoComplete: "email",
+		icon: EnvelopeSimpleIcon
+	},
+	phone: {
+		type: "tel",
+		inputMode: "tel",
+		autoComplete: "tel",
+		icon: PhoneIcon
+	},
+	url: {
+		type: "url",
+		inputMode: "url",
+		autoComplete: "url",
+		icon: GlobeSimpleIcon
+	}
+};
+/** Words on one line; an email, a phone or an address with its icon and the right keyboard. */
+function TextInput({ kind = "text", value, onChange, placeholder, ...control }) {
+	const part = useParts();
+	const shape = SHAPES[kind];
+	return /* @__PURE__ */ jsx(Box, {
+		icon: shape.icon,
+		invalid: control.invalid,
+		children: /* @__PURE__ */ jsx("input", {
+			id: control.id,
+			type: shape.type,
+			inputMode: shape.inputMode,
+			autoComplete: shape.autoComplete,
+			spellCheck: kind === "text" ? void 0 : false,
+			placeholder,
+			value,
+			disabled: control.disabled,
+			onChange: (event) => onChange(event.target.value),
+			className: part("sc-control__input"),
+			...ariaOf(control)
+		})
+	});
+}
+/** Words over a few lines: the box grows with them up to a height, then scrolls. */
+function TextArea({ value, onChange, placeholder, ...control }) {
+	const part = useParts();
+	const box = useRef(null);
+	useLayoutEffect(() => {
+		const element = box.current;
+		if (!element) return;
+		element.style.height = "auto";
+		element.style.height = `${element.scrollHeight}px`;
+	}, [value]);
+	return /* @__PURE__ */ jsx(Box, {
+		invalid: control.invalid,
+		children: /* @__PURE__ */ jsx("textarea", {
+			ref: box,
+			id: control.id,
+			rows: 3,
+			placeholder,
+			value,
+			disabled: control.disabled,
+			onChange: (event) => onChange(event.target.value),
+			className: part("sc-control__input"),
+			...ariaOf(control)
+		})
+	});
+}
+/** A number: typed, or a step at a time with − and + (or the arrows), its unit after it. */
+function NumberInput({ value, onChange, placeholder, min, max, step, unit, ...control }) {
+	const { messages } = useKit();
+	const part = useParts();
+	const move = (direction) => onChange(stepped({
+		min,
+		max,
+		step
+	}, value, direction));
+	const atLeast = value !== null && min !== void 0 && value <= min;
+	const atMost = value !== null && max !== void 0 && value >= max;
+	return /* @__PURE__ */ jsx(Box, {
+		invalid: control.invalid,
+		end: /* @__PURE__ */ jsxs(Fragment$1, { children: [unit !== void 0 && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: part("sc-control__unit"),
+			children: unit
+		}), /* @__PURE__ */ jsxs("span", {
+			className: part("sc-control__steppers"),
+			children: [/* @__PURE__ */ jsx(Stepper, {
+				label: messages.decrease,
+				off: control.disabled || atLeast,
+				onPress: () => move(-1),
+				children: /* @__PURE__ */ jsx(MinusIcon, { "aria-hidden": true })
+			}), /* @__PURE__ */ jsx(Stepper, {
+				label: messages.increase,
+				off: control.disabled || atMost,
+				onPress: () => move(1),
+				children: /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": true })
+			})]
+		})] }),
+		children: /* @__PURE__ */ jsx("input", {
+			id: control.id,
+			type: "number",
+			inputMode: "decimal",
+			min,
+			max,
+			step: step ?? "any",
+			placeholder,
+			value: value ?? "",
+			disabled: control.disabled,
+			onChange: (event) => {
+				const typed = event.target.value;
+				onChange(typed === "" ? null : Number(typed));
+			},
+			onKeyDown: (event) => {
+				if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+				event.preventDefault();
+				move(event.key === "ArrowUp" ? 1 : -1);
+			},
+			className: part("sc-control__input"),
+			...ariaOf(control)
+		})
+	});
+}
+/** A stepper is for the pointer; the keyboard has the arrows, so it takes no tab stop. */
+function Stepper({ label, off, onPress, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		tabIndex: -1,
+		"aria-label": label,
+		disabled: off,
+		onClick: onPress,
+		children
+	});
+}
+/** A value typed once and never shown again: hidden as it is typed, unless the person asks. */
+function SecretInput({ value, onChange, placeholder, ...control }) {
+	const { messages } = useKit();
+	const part = useParts();
+	const [shown, setShown] = useState(false);
+	return /* @__PURE__ */ jsx(Box, {
+		icon: LockSimpleIcon,
+		invalid: control.invalid,
+		end: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": shown ? messages.hide : messages.show,
+			"aria-pressed": shown,
+			"aria-controls": control.id,
+			disabled: control.disabled,
+			onClick: () => setShown((now) => !now),
+			className: part("sc-control__reveal"),
+			children: shown ? /* @__PURE__ */ jsx(EyeSlashIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsx(EyeIcon, { "aria-hidden": true })
+		}),
+		children: /* @__PURE__ */ jsx("input", {
+			id: control.id,
+			type: shown ? "text" : "password",
+			autoComplete: "off",
+			autoCapitalize: "off",
+			spellCheck: false,
+			placeholder,
+			value,
+			disabled: control.disabled,
+			onChange: (event) => onChange(event.target.value),
+			className: part("sc-control__input"),
+			...ariaOf(control)
+		})
+	});
+}
+/** A box to tick, the sentence beside it its label; drawn in the accent once ticked. */
+function Checkbox({ value, onChange, children, ...control }) {
+	const part = useParts();
+	return /* @__PURE__ */ jsxs("label", {
+		className: part("sc-check"),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				id: control.id,
+				type: "checkbox",
+				checked: value,
+				disabled: control.disabled,
+				onChange: (event) => onChange(event.target.checked),
+				...ariaOf(control)
+			}),
+			/* @__PURE__ */ jsx(CheckIcon, {
+				"aria-hidden": true,
+				weight: "bold"
+			}),
+			/* @__PURE__ */ jsx("span", { children })
+		]
+	});
+}
+//#endregion
+export { Checkbox, NumberInput, SecretInput, TextArea, TextInput };
+
+//# sourceMappingURL=Inputs.js.map

package/dist/kit/Inputs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inputs.js","names":[],"sources":["../../src/kit/Inputs.tsx"],"sourcesContent":["import {\n  CheckIcon,\n  EnvelopeSimpleIcon,\n  EyeIcon,\n  EyeSlashIcon,\n  GlobeSimpleIcon,\n  LockSimpleIcon,\n  MinusIcon,\n  PhoneIcon,\n  PlusIcon,\n} from \"@phosphor-icons/react\";\nimport { useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\n\nimport { useKit, useParts } from \"./context\";\nimport { ariaOf, Box, type ControlBase } from \"./Field\";\nimport { stepped, type NumberBounds } from \"./numbers\";\n\ninterface WordsProps extends ControlBase {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string | undefined;\n}\n\nconst SHAPES = {\n  text: { type: \"text\", inputMode: \"text\", autoComplete: undefined, icon: undefined },\n  email: { type: \"email\", inputMode: \"email\", autoComplete: \"email\", icon: EnvelopeSimpleIcon },\n  phone: { type: \"tel\", inputMode: \"tel\", autoComplete: \"tel\", icon: PhoneIcon },\n  url: { type: \"url\", inputMode: \"url\", autoComplete: \"url\", icon: GlobeSimpleIcon },\n} as const;\n\n/** Words on one line; an email, a phone or an address with its icon and the right keyboard. */\nexport function TextInput({\n  kind = \"text\",\n  value,\n  onChange,\n  placeholder,\n  ...control\n}: WordsProps & { kind?: keyof typeof SHAPES | undefined }) {\n  const part = useParts();\n  const shape = SHAPES[kind];\n  return (\n    <Box icon={shape.icon} invalid={control.invalid}>\n      <input\n        id={control.id}\n        type={shape.type}\n        inputMode={shape.inputMode}\n        autoComplete={shape.autoComplete}\n        spellCheck={kind === \"text\" ? undefined : false}\n        placeholder={placeholder}\n        value={value}\n        disabled={control.disabled}\n        onChange={(event) => onChange(event.target.value)}\n        className={part(\"sc-control__input\")}\n        {...ariaOf(control)}\n      />\n    </Box>\n  );\n}\n\n/** Words over a few lines: the box grows with them up to a height, then scrolls. */\nexport function TextArea({ value, onChange, placeholder, ...control }: WordsProps) {\n  const part = useParts();\n  const box = useRef<HTMLTextAreaElement>(null);\n  useLayoutEffect(() => {\n    const element = box.current;\n    if (!element) return;\n    element.style.height = \"auto\";\n    element.style.height = `${element.scrollHeight}px`;\n  }, [value]);\n  return (\n    <Box invalid={control.invalid}>\n      <textarea\n        ref={box}\n        id={control.id}\n        rows={3}\n        placeholder={placeholder}\n        value={value}\n        disabled={control.disabled}\n        onChange={(event) => onChange(event.target.value)}\n        className={part(\"sc-control__input\")}\n        {...ariaOf(control)}\n      />\n    </Box>\n  );\n}\n\n/** A number: typed, or a step at a time with − and + (or the arrows), its unit after it. */\nexport function NumberInput({\n  value,\n  onChange,\n  placeholder,\n  min,\n  max,\n  step,\n  unit,\n  ...control\n}: ControlBase &\n  NumberBounds & {\n    value: number | null;\n    onChange: (value: number | null) => void;\n    placeholder?: string | undefined;\n    unit?: string | undefined;\n  }) {\n  const { messages } = useKit();\n  const part = useParts();\n  const move = (direction: 1 | -1) => onChange(stepped({ min, max, step }, value, direction));\n  const atLeast = value !== null && min !== undefined && value <= min;\n  const atMost = value !== null && max !== undefined && value >= max;\n  return (\n    <Box\n      invalid={control.invalid}\n      end={\n        <>\n          {unit !== undefined && (\n            <span aria-hidden className={part(\"sc-control__unit\")}>\n              {unit}\n            </span>\n          )}\n          <span className={part(\"sc-control__steppers\")}>\n            <Stepper\n              label={messages.decrease}\n              off={control.disabled || atLeast}\n              onPress={() => move(-1)}\n            >\n              <MinusIcon aria-hidden />\n            </Stepper>\n            <Stepper\n              label={messages.increase}\n              off={control.disabled || atMost}\n              onPress={() => move(1)}\n            >\n              <PlusIcon aria-hidden />\n            </Stepper>\n          </span>\n        </>\n      }\n    >\n      <input\n        id={control.id}\n        type=\"number\"\n        inputMode=\"decimal\"\n        min={min}\n        max={max}\n        step={step ?? \"any\"}\n        placeholder={placeholder}\n        value={value ?? \"\"}\n        disabled={control.disabled}\n        onChange={(event) => {\n          const typed = event.target.value;\n          onChange(typed === \"\" ? null : Number(typed));\n        }}\n        onKeyDown={(event) => {\n          // The arrows step as the buttons do: within the bounds, on the step's decimals.\n          if (event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\") return;\n          event.preventDefault();\n          move(event.key === \"ArrowUp\" ? 1 : -1);\n        }}\n        className={part(\"sc-control__input\")}\n        {...ariaOf(control)}\n      />\n    </Box>\n  );\n}\n\n/** A stepper is for the pointer; the keyboard has the arrows, so it takes no tab stop. */\nfunction Stepper({\n  label,\n  off,\n  onPress,\n  children,\n}: {\n  label: string;\n  off: boolean | undefined;\n  onPress: () => void;\n  children: ReactNode;\n}) {\n  return (\n    <button type=\"button\" tabIndex={-1} aria-label={label} disabled={off} onClick={onPress}>\n      {children}\n    </button>\n  );\n}\n\n/** A value typed once and never shown again: hidden as it is typed, unless the person asks. */\nexport function SecretInput({ value, onChange, placeholder, ...control }: WordsProps) {\n  const { messages } = useKit();\n  const part = useParts();\n  const [shown, setShown] = useState(false);\n  return (\n    <Box\n      icon={LockSimpleIcon}\n      invalid={control.invalid}\n      end={\n        <button\n          type=\"button\"\n          aria-label={shown ? messages.hide : messages.show}\n          aria-pressed={shown}\n          aria-controls={control.id}\n          disabled={control.disabled}\n          onClick={() => setShown((now) => !now)}\n          className={part(\"sc-control__reveal\")}\n        >\n          {shown ? <EyeSlashIcon aria-hidden /> : <EyeIcon aria-hidden />}\n        </button>\n      }\n    >\n      <input\n        id={control.id}\n        type={shown ? \"text\" : \"password\"}\n        autoComplete=\"off\"\n        autoCapitalize=\"off\"\n        spellCheck={false}\n        placeholder={placeholder}\n        value={value}\n        disabled={control.disabled}\n        onChange={(event) => onChange(event.target.value)}\n        className={part(\"sc-control__input\")}\n        {...ariaOf(control)}\n      />\n    </Box>\n  );\n}\n\n/** A box to tick, the sentence beside it its label; drawn in the accent once ticked. */\nexport function Checkbox({\n  value,\n  onChange,\n  children,\n  ...control\n}: Omit<ControlBase, \"labelledBy\" | \"label\"> & {\n  value: boolean;\n  onChange: (value: boolean) => void;\n  children: ReactNode;\n}) {\n  const part = useParts();\n  return (\n    <label className={part(\"sc-check\")}>\n      <input\n        id={control.id}\n        type=\"checkbox\"\n        checked={value}\n        disabled={control.disabled}\n        onChange={(event) => onChange(event.target.checked)}\n        {...ariaOf(control)}\n      />\n      <CheckIcon aria-hidden weight=\"bold\" />\n      <span>{children}</span>\n    </label>\n  );\n}\n"],"mappings":"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"}

package/dist/kit/List.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from "react";
+//#region src/kit/List.d.ts
+/**
+ * Rows in one hairline box, a hairline between each, like a group of settings: a list of
+ * things, of automations, of an agent's files.
+ */
+export declare function List({ label, className, children }: {
+  /** The list's name, for screen readers, when no heading above it says it. */
+  label?: string | undefined;
+  className?: string | undefined;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export interface RowProps {
+  /** At its start, usually a `Mark`: what kind of thing it is. */
+  mark?: ReactNode;
+  /** What it is, up to two lines. */
+  title: ReactNode;
+  /** A quieter line under it: when it runs, a detail. */
+  subtitle?: ReactNode;
+  /** What went wrong with it, under the rest in the danger tone: why a run failed. */
+  error?: ReactNode;
+  /** At its right, quiet, in figures that line up: a price, a time, a count. */
+  meta?: ReactNode;
+  /** The host's controls at its end, apart from the row's own press: a switch, a ⋯ menu. */
+  trailing?: ReactNode;
+  /** Pressing the row: it lights under the pointer and carries a caret. */
+  onPress?: (() => void) | undefined;
+  /**
+   * Where the row goes: it is a link to that page, which can be opened apart too. With
+   * `onPress`, a plain click calls it instead, so the host's router takes it there.
+   */
+  href?: string | undefined;
+  /** It is the one picked: a check in the caret's place, on a breath of the accent. */
+  pressed?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** Kept in its place, quieter: something paused. */
+  quiet?: boolean | undefined;
+  className?: string | undefined;
+}
+/**
+ * One row of a `List`: its mark, its title over a quieter line (and what went wrong, when
+ * something did), a detail at the right, the host's controls at its end. With `href` the row
+ * (but not its controls) is a link; with only `onPress`, a button.
+ */
+export declare function Row({ mark, title, subtitle, error, meta, trailing, onPress, href, pressed, disabled, quiet, className }: RowProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=List.d.ts.map

package/dist/kit/List.js

@@ -0,0 +1,85 @@
+import { joined, useParts } from "./context.js";
+import { CaretRightIcon, CheckIcon } from "@phosphor-icons/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/List.tsx
+/**
+* Rows in one hairline box, a hairline between each, like a group of settings: a list of
+* things, of automations, of an agent's files.
+*/
+function List({ label, className, children }) {
+	const part = useParts();
+	return /* @__PURE__ */ jsx("ul", {
+		"aria-label": label,
+		part: "list",
+		className: joined(part("sc-list"), className),
+		children
+	});
+}
+/** A click that means "go here", not "open it apart" (a modifier, another button). */
+const plain = (event) => !event.defaultPrevented && event.button === 0 && !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);
+/**
+* One row of a `List`: its mark, its title over a quieter line (and what went wrong, when
+* something did), a detail at the right, the host's controls at its end. With `href` the row
+* (but not its controls) is a link; with only `onPress`, a button.
+*/
+function Row({ mark, title, subtitle, error, meta, trailing, onPress, href, pressed, disabled, quiet, className }) {
+	const part = useParts();
+	const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+		mark,
+		/* @__PURE__ */ jsxs("span", {
+			className: part("sc-row__text"),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: part("sc-row__title"),
+					children: title
+				}),
+				subtitle !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: part("sc-row__subtitle"),
+					children: subtitle
+				}),
+				error !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: part("sc-row__error"),
+					children: error
+				})
+			]
+		}),
+		meta !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: part("sc-row__meta"),
+			children: meta
+		})
+	] });
+	return /* @__PURE__ */ jsxs("li", {
+		part: "row",
+		className: joined(part("sc-row", ...quiet ? ["sc-row--quiet"] : [], ...pressed ? ["sc-row--pressed"] : []), className),
+		children: [href !== void 0 ? /* @__PURE__ */ jsxs("a", {
+			href,
+			onClick: (event) => {
+				if (!onPress || !plain(event)) return;
+				event.preventDefault();
+				onPress();
+			},
+			className: part("sc-row__main"),
+			children: [body, /* @__PURE__ */ jsx(CaretRightIcon, { "aria-hidden": true })]
+		}) : onPress ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			disabled,
+			"aria-pressed": pressed || void 0,
+			onClick: onPress,
+			className: part("sc-row__main"),
+			children: [body, pressed ? /* @__PURE__ */ jsx(CheckIcon, {
+				"aria-hidden": true,
+				weight: "bold"
+			}) : /* @__PURE__ */ jsx(CaretRightIcon, { "aria-hidden": true })]
+		}) : /* @__PURE__ */ jsx("div", {
+			className: part("sc-row__main"),
+			children: body
+		}), trailing !== void 0 && /* @__PURE__ */ jsx("div", {
+			className: part("sc-row__trailing"),
+			children: trailing
+		})]
+	});
+}
+//#endregion
+export { List, Row };
+
+//# sourceMappingURL=List.js.map

package/dist/kit/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","names":[],"sources":["../../src/kit/List.tsx"],"sourcesContent":["import { CaretRightIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport type { MouseEvent, ReactNode } from \"react\";\n\nimport { joined, useParts } from \"./context\";\n\n/**\n * Rows in one hairline box, a hairline between each, like a group of settings: a list of\n * things, of automations, of an agent's files.\n */\nexport function List({\n  label,\n  className,\n  children,\n}: {\n  /** The list's name, for screen readers, when no heading above it says it. */\n  label?: string | undefined;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  const part = useParts();\n  return (\n    <ul aria-label={label} part=\"list\" className={joined(part(\"sc-list\"), className)}>\n      {children}\n    </ul>\n  );\n}\n\nexport interface RowProps {\n  /** At its start, usually a `Mark`: what kind of thing it is. */\n  mark?: ReactNode;\n  /** What it is, up to two lines. */\n  title: ReactNode;\n  /** A quieter line under it: when it runs, a detail. */\n  subtitle?: ReactNode;\n  /** What went wrong with it, under the rest in the danger tone: why a run failed. */\n  error?: ReactNode;\n  /** At its right, quiet, in figures that line up: a price, a time, a count. */\n  meta?: ReactNode;\n  /** The host's controls at its end, apart from the row's own press: a switch, a ⋯ menu. */\n  trailing?: ReactNode;\n  /** Pressing the row: it lights under the pointer and carries a caret. */\n  onPress?: (() => void) | undefined;\n  /**\n   * Where the row goes: it is a link to that page, which can be opened apart too. With\n   * `onPress`, a plain click calls it instead, so the host's router takes it there.\n   */\n  href?: string | undefined;\n  /** It is the one picked: a check in the caret's place, on a breath of the accent. */\n  pressed?: boolean | undefined;\n  disabled?: boolean | undefined;\n  /** Kept in its place, quieter: something paused. */\n  quiet?: boolean | undefined;\n  className?: string | undefined;\n}\n\n/** A click that means \"go here\", not \"open it apart\" (a modifier, another button). */\nconst plain = (event: MouseEvent): boolean =>\n  !event.defaultPrevented &&\n  event.button === 0 &&\n  !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);\n\n/**\n * One row of a `List`: its mark, its title over a quieter line (and what went wrong, when\n * something did), a detail at the right, the host's controls at its end. With `href` the row\n * (but not its controls) is a link; with only `onPress`, a button.\n */\nexport function Row({\n  mark,\n  title,\n  subtitle,\n  error,\n  meta,\n  trailing,\n  onPress,\n  href,\n  pressed,\n  disabled,\n  quiet,\n  className,\n}: RowProps) {\n  const part = useParts();\n  const body = (\n    <>\n      {mark}\n      <span className={part(\"sc-row__text\")}>\n        <span className={part(\"sc-row__title\")}>{title}</span>\n        {subtitle !== undefined && <span className={part(\"sc-row__subtitle\")}>{subtitle}</span>}\n        {error !== undefined && <span className={part(\"sc-row__error\")}>{error}</span>}\n      </span>\n      {meta !== undefined && <span className={part(\"sc-row__meta\")}>{meta}</span>}\n    </>\n  );\n  return (\n    <li\n      part=\"row\"\n      className={joined(\n        part(\n          \"sc-row\",\n          ...(quiet ? ([\"sc-row--quiet\"] as const) : []),\n          ...(pressed ? ([\"sc-row--pressed\"] as const) : []),\n        ),\n        className,\n      )}\n    >\n      {href !== undefined ? (\n        <a\n          href={href}\n          onClick={(event) => {\n            if (!onPress || !plain(event)) return;\n            event.preventDefault();\n            onPress();\n          }}\n          className={part(\"sc-row__main\")}\n        >\n          {body}\n          <CaretRightIcon aria-hidden />\n        </a>\n      ) : onPress ? (\n        <button\n          type=\"button\"\n          disabled={disabled}\n          aria-pressed={pressed || undefined}\n          onClick={onPress}\n          className={part(\"sc-row__main\")}\n        >\n          {body}\n          {pressed ? <CheckIcon aria-hidden weight=\"bold\" /> : <CaretRightIcon aria-hidden />}\n        </button>\n      ) : (\n        <div className={part(\"sc-row__main\")}>{body}</div>\n      )}\n      {trailing !== undefined && <div className={part(\"sc-row__trailing\")}>{trailing}</div>}\n    </li>\n  );\n}\n"],"mappings":";;;;;;;;AASA,SAAgB,KAAK,EACnB,OACA,WACA,YAMC;CACD,MAAM,OAAO,SAAS;CACtB,OACE,oBAAC,MAAD;EAAI,cAAY;EAAO,MAAK;EAAO,WAAW,OAAO,KAAK,SAAS,GAAG,SAAS;EAC5E;CACC,CAAA;AAER;;AA+BA,MAAM,SAAS,UACb,CAAC,MAAM,oBACP,MAAM,WAAW,KACjB,EAAE,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM;;;;;;AAO9D,SAAgB,IAAI,EAClB,MACA,OACA,UACA,OACA,MACA,UACA,SACA,MACA,SACA,UACA,OACA,aACW;CACX,MAAM,OAAO,SAAS;CACtB,MAAM,OACJ,qBAAA,UAAA,EAAA,UAAA;EACG;EACD,qBAAC,QAAD;GAAM,WAAW,KAAK,cAAc;GAApC,UAAA;IACE,oBAAC,QAAD;KAAM,WAAW,KAAK,eAAe;KAAI,UAAA;IAAY,CAAA;IACpD,aAAa,KAAA,KAAa,oBAAC,QAAD;KAAM,WAAW,KAAK,kBAAkB;KAAI,UAAA;IAAe,CAAA;IACrF,UAAU,KAAA,KAAa,oBAAC,QAAD;KAAM,WAAW,KAAK,eAAe;KAAI,UAAA;IAAY,CAAA;GACzE;;EACL,SAAS,KAAA,KAAa,oBAAC,QAAD;GAAM,WAAW,KAAK,cAAc;GAAI,UAAA;EAAW,CAAA;CAC1E,EAAA,CAAA;CAEJ,OACE,qBAAC,MAAD;EACE,MAAK;EACL,WAAW,OACT,KACE,UACA,GAAI,QAAS,CAAC,eAAe,IAAc,CAAC,GAC5C,GAAI,UAAW,CAAC,iBAAiB,IAAc,CAAC,CAClD,GACA,SACF;EATF,UAAA,CAWG,SAAS,KAAA,IACR,qBAAC,KAAD;GACQ;GACN,UAAU,UAAU;IAClB,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,GAAG;IAC/B,MAAM,eAAe;IACrB,QAAQ;GACV;GACA,WAAW,KAAK,cAAc;GAPhC,UAAA,CASG,MACD,oBAAC,gBAAD,EAAgB,eAAA,KAAa,CAAA,CAC5B;EACD,CAAA,IAAA,UACF,qBAAC,UAAD;GACE,MAAK;GACK;GACV,gBAAc,WAAW,KAAA;GACzB,SAAS;GACT,WAAW,KAAK,cAAc;GALhC,UAAA,CAOG,MACA,UAAU,oBAAC,WAAD;IAAW,eAAA;IAAY,QAAO;GAAQ,CAAA,IAAI,oBAAC,gBAAD,EAAgB,eAAA,KAAa,CAAA,CAC5E;EAER,CAAA,IAAA,oBAAC,OAAD;GAAK,WAAW,KAAK,cAAc;GAAI,UAAA;EAAU,CAAA,GAElD,aAAa,KAAA,KAAa,oBAAC,OAAD;GAAK,WAAW,KAAK,kBAAkB;GAAI,UAAA;EAAc,CAAA,CAClF;;AAER"}

package/dist/kit/Mark.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import { Icon } from "@phosphor-icons/react";
+//#region src/kit/Mark.d.ts
+export interface MarkProps {
+  /** A glyph, alone, in the muted ink: what kind of thing it is. */
+  icon?: Icon | undefined;
+  /** A picture instead: an app's logo, as it comes (a square one with its own ground, its corners
+   * softened). */
+  src?: string | undefined;
+  /** The picture is a photo that fills the mark, not a logo inside it. */
+  photo?: boolean | undefined;
+  /** What it holds is a logo (drawn by the host, as `children`): a picture in it is sized and
+   * cornered as `src`'s. */
+  logo?: boolean | undefined;
+  /** It stands for a person: their photo round, where a thing's is square. */
+  round?: boolean | undefined;
+  /** The host's own drawing, in place of `icon` or `src`: a glyph, a logo, an initial. */
+  children?: ReactNode;
+  /** The side it keeps in its row, in pixels: 28 by default. */
+  size?: number | undefined;
+  className?: string | undefined;
+}
+/**
+ * What kind of thing a row is, at its start, bare: a glyph in the muted ink, an app's logo as it
+ * comes, an initial, or a photo (round for a person). Nothing is drawn behind it; it keeps its
+ * square so rows line up. It only shows, so it is hidden from screen readers.
+ */
+export declare function Mark({ icon: Glyph, src, photo, logo, round, size, className, children }: MarkProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Mark.d.ts.map

package/dist/kit/Mark.js

@@ -0,0 +1,27 @@
+import { joined, useParts } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/kit/Mark.tsx
+/**
+* What kind of thing a row is, at its start, bare: a glyph in the muted ink, an app's logo as it
+* comes, an initial, or a photo (round for a person). Nothing is drawn behind it; it keeps its
+* square so rows line up. It only shows, so it is hidden from screen readers.
+*/
+function Mark({ icon: Glyph, src, photo, logo, round, size = 28, className, children }) {
+	const part = useParts();
+	const kind = [...src === void 0 && !logo ? [] : photo ? ["sc-mark--photo"] : ["sc-mark--logo"], ...round ? ["sc-mark--round"] : []];
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		style: { "--_mark": `${size}px` },
+		className: joined(part("sc-mark", ...kind), className),
+		children: children ?? (src !== void 0 ? /* @__PURE__ */ jsx("img", {
+			src,
+			alt: "",
+			loading: "lazy",
+			referrerPolicy: "no-referrer"
+		}) : Glyph && /* @__PURE__ */ jsx(Glyph, { weight: "regular" }))
+	});
+}
+//#endregion
+export { Mark };
+
+//# sourceMappingURL=Mark.js.map

package/dist/kit/Mark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mark.js","names":[],"sources":["../../src/kit/Mark.tsx"],"sourcesContent":["import type { Icon } from \"@phosphor-icons/react\";\nimport type { CSSProperties, ReactNode } from \"react\";\n\nimport { joined, useParts } from \"./context\";\n\nexport interface MarkProps {\n  /** A glyph, alone, in the muted ink: what kind of thing it is. */\n  icon?: Icon | undefined;\n  /** A picture instead: an app's logo, as it comes (a square one with its own ground, its corners\n   * softened). */\n  src?: string | undefined;\n  /** The picture is a photo that fills the mark, not a logo inside it. */\n  photo?: boolean | undefined;\n  /** What it holds is a logo (drawn by the host, as `children`): a picture in it is sized and\n   * cornered as `src`'s. */\n  logo?: boolean | undefined;\n  /** It stands for a person: their photo round, where a thing's is square. */\n  round?: boolean | undefined;\n  /** The host's own drawing, in place of `icon` or `src`: a glyph, a logo, an initial. */\n  children?: ReactNode;\n  /** The side it keeps in its row, in pixels: 28 by default. */\n  size?: number | undefined;\n  className?: string | undefined;\n}\n\n/**\n * What kind of thing a row is, at its start, bare: a glyph in the muted ink, an app's logo as it\n * comes, an initial, or a photo (round for a person). Nothing is drawn behind it; it keeps its\n * square so rows line up. It only shows, so it is hidden from screen readers.\n */\nexport function Mark({\n  icon: Glyph,\n  src,\n  photo,\n  logo,\n  round,\n  size = 28,\n  className,\n  children,\n}: MarkProps) {\n  const part = useParts();\n  const kind = [\n    ...(src === undefined && !logo\n      ? []\n      : photo\n        ? ([\"sc-mark--photo\"] as const)\n        : ([\"sc-mark--logo\"] as const)),\n    ...(round ? ([\"sc-mark--round\"] as const) : []),\n  ];\n  return (\n    <span\n      aria-hidden\n      style={{ \"--_mark\": `${size}px` } as CSSProperties}\n      className={joined(part(\"sc-mark\", ...kind), className)}\n    >\n      {children ??\n        (src !== undefined ? (\n          <img src={src} alt=\"\" loading=\"lazy\" referrerPolicy=\"no-referrer\" />\n        ) : (\n          Glyph && <Glyph weight=\"regular\" />\n        ))}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;AA8BA,SAAgB,KAAK,EACnB,MAAM,OACN,KACA,OACA,MACA,OACA,OAAO,IACP,WACA,YACY;CACZ,MAAM,OAAO,SAAS;CACtB,MAAM,OAAO,CACX,GAAI,QAAQ,KAAA,KAAa,CAAC,OACtB,CAAC,IACD,QACG,CAAC,gBAAgB,IACjB,CAAC,eAAe,GACvB,GAAI,QAAS,CAAC,gBAAgB,IAAc,CAAC,CAC/C;CACA,OACE,oBAAC,QAAD;EACE,eAAA;EACA,OAAO,EAAE,WAAW,GAAG,KAAK,IAAI;EAChC,WAAW,OAAO,KAAK,WAAW,GAAG,IAAI,GAAG,SAAS;EAEpD,UAAA,aACE,QAAQ,KAAA,IACP,oBAAC,OAAD;GAAU;GAAK,KAAI;GAAG,SAAQ;GAAO,gBAAe;EAAe,CAAA,IAEnE,SAAS,oBAAC,OAAD,EAAO,QAAO,UAAW,CAAA;CAElC,CAAA;AAEV"}

package/dist/kit/MarkStack.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+//#region src/kit/MarkStack.d.ts
+/**
+ * A few marks side by side, a little apart, and how many more after them: an agent's apps, its
+ * channels' kinds. Like a mark, it only shows, so screen readers skip it.
+ */
+export declare function MarkStack({ more, className, children }: {
+  /** How many are not drawn: "+3" after the last. */
+  more?: number | undefined;
+  className?: string | undefined;
+  /** The marks, usually small `Mark`s or a host's logos. */
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=MarkStack.d.ts.map

package/dist/kit/MarkStack.js

@@ -0,0 +1,26 @@
+import { joined, useParts } from "./context.js";
+import { Children } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/MarkStack.tsx
+/**
+* A few marks side by side, a little apart, and how many more after them: an agent's apps, its
+* channels' kinds. Like a mark, it only shows, so screen readers skip it.
+*/
+function MarkStack({ more = 0, className, children }) {
+	const part = useParts();
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		className: joined(part("sc-stack"), className),
+		children: [Children.map(children, (mark) => /* @__PURE__ */ jsx("span", {
+			className: part("sc-stack__item"),
+			children: mark
+		})), more > 0 && /* @__PURE__ */ jsxs("span", {
+			className: part("sc-stack__more"),
+			children: ["+", more]
+		})]
+	});
+}
+//#endregion
+export { MarkStack };
+
+//# sourceMappingURL=MarkStack.js.map

package/dist/kit/MarkStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkStack.js","names":[],"sources":["../../src/kit/MarkStack.tsx"],"sourcesContent":["import { Children, type ReactNode } from \"react\";\n\nimport { joined, useParts } from \"./context\";\n\n/**\n * A few marks side by side, a little apart, and how many more after them: an agent's apps, its\n * channels' kinds. Like a mark, it only shows, so screen readers skip it.\n */\nexport function MarkStack({\n  more = 0,\n  className,\n  children,\n}: {\n  /** How many are not drawn: \"+3\" after the last. */\n  more?: number | undefined;\n  className?: string | undefined;\n  /** The marks, usually small `Mark`s or a host's logos. */\n  children: ReactNode;\n}) {\n  const part = useParts();\n  return (\n    <span aria-hidden className={joined(part(\"sc-stack\"), className)}>\n      {Children.map(children, (mark) => (\n        <span className={part(\"sc-stack__item\")}>{mark}</span>\n      ))}\n      {more > 0 && <span className={part(\"sc-stack__more\")}>+{more}</span>}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,UAAU,EACxB,OAAO,GACP,WACA,YAOC;CACD,MAAM,OAAO,SAAS;CACtB,OACE,qBAAC,QAAD;EAAM,eAAA;EAAY,WAAW,OAAO,KAAK,UAAU,GAAG,SAAS;EAA/D,UAAA,CACG,SAAS,IAAI,WAAW,SACvB,oBAAC,QAAD;GAAM,WAAW,KAAK,gBAAgB;GAAI,UAAA;EAAW,CAAA,CACtD,GACA,OAAO,KAAK,qBAAC,QAAD;GAAM,WAAW,KAAK,gBAAgB;GAAtC,UAAA,CAAyC,KAAE,IAAW;EAC/D,CAAA,CAAA;;AAEV"}

package/dist/kit/Note.d.ts

@@ -0,0 +1,11 @@
+import { Tone } from "./Stat.js";
+import { ReactNode } from "react";
+//#region src/kit/Note.d.ts
+/** A line that stands out: its tone's mark and the words on a wash of it, edged by it. */
+export declare function Note({ tone, className, children }: {
+  tone: Tone;
+  className?: string | undefined;
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Note.d.ts.map

package/dist/kit/Note.js

@@ -0,0 +1,31 @@
+import { joined, useParts } from "./context.js";
+import { CheckCircleIcon, InfoIcon, WarningCircleIcon, WarningIcon } from "@phosphor-icons/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/Note.tsx
+const MARKS = {
+	info: InfoIcon,
+	success: CheckCircleIcon,
+	warning: WarningIcon,
+	danger: WarningCircleIcon
+};
+/** A line that stands out: its tone's mark and the words on a wash of it, edged by it. */
+function Note({ tone, className, children }) {
+	const part = useParts();
+	const Mark = MARKS[tone];
+	return /* @__PURE__ */ jsxs("div", {
+		role: "note",
+		part: `note note-${tone}`,
+		className: joined(part("sc-note", `sc-note--${tone}`), className),
+		children: [/* @__PURE__ */ jsx(Mark, {
+			"aria-hidden": true,
+			weight: "fill"
+		}), /* @__PURE__ */ jsx("div", {
+			className: part("sc-note__body"),
+			children
+		})]
+	});
+}
+//#endregion
+export { Note };
+
+//# sourceMappingURL=Note.js.map

package/dist/kit/Note.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note.js","names":[],"sources":["../../src/kit/Note.tsx"],"sourcesContent":["import {\n  CheckCircleIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  WarningIcon,\n  type Icon,\n} from \"@phosphor-icons/react\";\nimport type { ReactNode } from \"react\";\n\nimport { joined, useParts } from \"./context\";\nimport type { Tone } from \"./Stat\";\n\nconst MARKS: Readonly<Record<Tone, Icon>> = {\n  info: InfoIcon,\n  success: CheckCircleIcon,\n  warning: WarningIcon,\n  danger: WarningCircleIcon,\n};\n\n/** A line that stands out: its tone's mark and the words on a wash of it, edged by it. */\nexport function Note({\n  tone,\n  className,\n  children,\n}: {\n  tone: Tone;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  const part = useParts();\n  const Mark = MARKS[tone];\n  return (\n    <div\n      role=\"note\"\n      part={`note note-${tone}`}\n      className={joined(part(\"sc-note\", `sc-note--${tone}`), className)}\n    >\n      <Mark aria-hidden weight=\"fill\" />\n      <div className={part(\"sc-note__body\")}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAYA,MAAM,QAAsC;CAC1C,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;AACV;;AAGA,SAAgB,KAAK,EACnB,MACA,WACA,YAKC;CACD,MAAM,OAAO,SAAS;CACtB,MAAM,OAAO,MAAM;CACnB,OACE,qBAAC,OAAD;EACE,MAAK;EACL,MAAM,aAAa;EACnB,WAAW,OAAO,KAAK,WAAW,YAAY,MAAM,GAAG,SAAS;EAHlE,UAAA,CAKE,oBAAC,MAAD;GAAM,eAAA;GAAY,QAAO;EAAQ,CAAA,GACjC,oBAAC,OAAD;GAAK,WAAW,KAAK,eAAe;GAAI;EAAc,CAAA,CACnD;;AAET"}

package/dist/kit/Popover.js

@@ -0,0 +1,90 @@
+import { useParts } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, offset, shift, size, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+//#region src/kit/Popover.tsx
+/** The least height a panel keeps, flipping above its trigger before it shrinks under this. */
+const LEAST = 180;
+/**
+* A panel that floats by its trigger: under it, flipped above when there is no room, kept in the
+* window, as tall as fits; Escape or a press outside closes it. `width` "trigger" makes it as
+* wide as its trigger (a list), "own" leaves it its own (a calendar). `role` is the panel's for
+* a dialog; a combobox words its own.
+*/
+function usePopover(open, setOpen, { width, role }) {
+	const floating = useFloating({
+		open,
+		onOpenChange: setOpen,
+		placement: "bottom-start",
+		transform: false,
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			offset(6),
+			flip({
+				padding: 8,
+				fallbackStrategy: "initialPlacement"
+			}),
+			shift({ padding: 8 }),
+			size({
+				padding: 8,
+				apply({ rects, availableHeight, elements }) {
+					elements.floating.style.maxHeight = `${Math.max(LEAST, availableHeight)}px`;
+					if (width === "trigger") elements.floating.style.width = `${rects.reference.width}px`;
+				}
+			})
+		]
+	});
+	const dismiss = useDismiss(floating.context);
+	const dialog = useRole(floating.context, {
+		role: "dialog",
+		enabled: role === "dialog"
+	});
+	const interactions = useInteractions([dismiss, dialog]);
+	return {
+		...floating,
+		...interactions
+	};
+}
+/**
+* Where the panel goes instead of the page's end: the host's dialog the trigger sits in (a modal
+* one keeps the pointer and the focus inside itself), or the element the host marked
+* `data-sc-portal` around it (a shadow root's, whose styles stop at its edge: the widget's).
+* None is `undefined`, the page's end: floating-ui reads a `null` root as one still to come, and
+* draws nothing until it does.
+*/
+const layerOf = (trigger) => trigger?.closest("[role=\"dialog\"], [role=\"alertdialog\"], dialog, [data-sc-portal]") ?? void 0;
+/**
+* The panel itself, in a portal at the page's end so nothing clips it (inside the host's dialog
+* or `data-sc-portal`, when the trigger is in one); it carries `sc`, so the host's tokens reach
+* it there. With `focus` it takes the focus while open (a calendar, which puts it on a day) and
+* gives it back to the trigger on close; tabbing out closes it. Without, focus stays where it is
+* (a combobox's box).
+*/
+function Popover({ popover, focus, label, children }) {
+	const part = useParts();
+	const panel = /* @__PURE__ */ jsx("div", {
+		ref: popover.refs.setFloating,
+		style: popover.floatingStyles,
+		"aria-label": label,
+		...popover.getFloatingProps({ onKeyDown: (event) => {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopPropagation();
+			popover.context.onOpenChange(false);
+		} }),
+		className: `sc ${part("sc-popover")}`,
+		children
+	});
+	return /* @__PURE__ */ jsx(FloatingPortal, {
+		root: layerOf(popover.refs.domReference.current),
+		children: focus ? /* @__PURE__ */ jsx(FloatingFocusManager, {
+			context: popover.context,
+			initialFocus: -1,
+			modal: false,
+			children: panel
+		}) : panel
+	});
+}
+//#endregion
+export { Popover, usePopover };
+
+//# sourceMappingURL=Popover.js.map

package/dist/kit/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":[],"sources":["../../src/kit/Popover.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  size,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport type { ReactNode } from \"react\";\n\nimport { useParts } from \"./context\";\n\n/** The least height a panel keeps, flipping above its trigger before it shrinks under this. */\nconst LEAST = 180;\n\n/**\n * A panel that floats by its trigger: under it, flipped above when there is no room, kept in the\n * window, as tall as fits; Escape or a press outside closes it. `width` \"trigger\" makes it as\n * wide as its trigger (a list), \"own\" leaves it its own (a calendar). `role` is the panel's for\n * a dialog; a combobox words its own.\n */\nexport function usePopover(\n  open: boolean,\n  setOpen: (open: boolean) => void,\n  { width, role }: { width: \"trigger\" | \"own\"; role?: \"dialog\" },\n) {\n  const floating = useFloating({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    // Placed by its offsets, so its opening can move it with a transform of its own.\n    transform: false,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(6),\n      flip({ padding: 8, fallbackStrategy: \"initialPlacement\" }),\n      shift({ padding: 8 }),\n      size({\n        padding: 8,\n        apply({ rects, availableHeight, elements }) {\n          elements.floating.style.maxHeight = `${Math.max(LEAST, availableHeight)}px`;\n          if (width === \"trigger\") elements.floating.style.width = `${rects.reference.width}px`;\n        },\n      }),\n    ],\n  });\n  const dismiss = useDismiss(floating.context);\n  const dialog = useRole(floating.context, { role: \"dialog\", enabled: role === \"dialog\" });\n  const interactions = useInteractions([dismiss, dialog]);\n  return { ...floating, ...interactions };\n}\n\nexport type PopoverState = ReturnType<typeof usePopover>;\n\n/**\n * Where the panel goes instead of the page's end: the host's dialog the trigger sits in (a modal\n * one keeps the pointer and the focus inside itself), or the element the host marked\n * `data-sc-portal` around it (a shadow root's, whose styles stop at its edge: the widget's).\n * None is `undefined`, the page's end: floating-ui reads a `null` root as one still to come, and\n * draws nothing until it does.\n */\nconst layerOf = (trigger: Element | null): HTMLElement | undefined =>\n  trigger?.closest<HTMLElement>(\n    '[role=\"dialog\"], [role=\"alertdialog\"], dialog, [data-sc-portal]',\n  ) ?? undefined;\n\n/**\n * The panel itself, in a portal at the page's end so nothing clips it (inside the host's dialog\n * or `data-sc-portal`, when the trigger is in one); it carries `sc`, so the host's tokens reach\n * it there. With `focus` it takes the focus while open (a calendar, which puts it on a day) and\n * gives it back to the trigger on close; tabbing out closes it. Without, focus stays where it is\n * (a combobox's box).\n */\nexport function Popover({\n  popover,\n  focus,\n  label,\n  children,\n}: {\n  popover: PopoverState;\n  focus: boolean;\n  label?: string | undefined;\n  children: ReactNode;\n}) {\n  const part = useParts();\n  const panel = (\n    <div\n      ref={popover.refs.setFloating}\n      style={popover.floatingStyles}\n      aria-label={label}\n      {...popover.getFloatingProps({\n        // Escape closes the panel and goes no further: not the page's own Escape, not the chat's.\n        onKeyDown: (event) => {\n          if (event.key !== \"Escape\") return;\n          event.preventDefault();\n          event.stopPropagation();\n          popover.context.onOpenChange(false);\n        },\n      })}\n      className={`sc ${part(\"sc-popover\")}`}\n    >\n      {children}\n    </div>\n  );\n  return (\n    <FloatingPortal root={layerOf(popover.refs.domReference.current)}>\n      {focus ? (\n        <FloatingFocusManager context={popover.context} initialFocus={-1} modal={false}>\n          {panel}\n        </FloatingFocusManager>\n      ) : (\n        panel\n      )}\n    </FloatingPortal>\n  );\n}\n"],"mappings":";;;;;AAkBA,MAAM,QAAQ;;;;;;;AAQd,SAAgB,WACd,MACA,SACA,EAAE,OAAO,QACT;CACA,MAAM,WAAW,YAAY;EAC3B;EACA,cAAc;EACd,WAAW;EAEX,WAAW;EACX,sBAAsB;EACtB,YAAY;GACV,OAAO,CAAC;GACR,KAAK;IAAE,SAAS;IAAG,kBAAkB;GAAmB,CAAC;GACzD,MAAM,EAAE,SAAS,EAAE,CAAC;GACpB,KAAK;IACH,SAAS;IACT,MAAM,EAAE,OAAO,iBAAiB,YAAY;KAC1C,SAAS,SAAS,MAAM,YAAY,GAAG,KAAK,IAAI,OAAO,eAAe,EAAE;KACxE,IAAI,UAAU,WAAW,SAAS,SAAS,MAAM,QAAQ,GAAG,MAAM,UAAU,MAAM;IACpF;GACF,CAAC;EACH;CACF,CAAC;CACD,MAAM,UAAU,WAAW,SAAS,OAAO;CAC3C,MAAM,SAAS,QAAQ,SAAS,SAAS;EAAE,MAAM;EAAU,SAAS,SAAS;CAAS,CAAC;CACvF,MAAM,eAAe,gBAAgB,CAAC,SAAS,MAAM,CAAC;CACtD,OAAO;EAAE,GAAG;EAAU,GAAG;CAAa;AACxC;;;;;;;;AAWA,MAAM,WAAW,YACf,SAAS,QACP,qEACF,KAAK,KAAA;;;;;;;;AASP,SAAgB,QAAQ,EACtB,SACA,OACA,OACA,YAMC;CACD,MAAM,OAAO,SAAS;CACtB,MAAM,QACJ,oBAAC,OAAD;EACE,KAAK,QAAQ,KAAK;EAClB,OAAO,QAAQ;EACf,cAAY;EACZ,GAAI,QAAQ,iBAAiB,EAE3B,YAAY,UAAU;GACpB,IAAI,MAAM,QAAQ,UAAU;GAC5B,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB,QAAQ,QAAQ,aAAa,KAAK;EACpC,EACF,CAAC;EACD,WAAW,MAAM,KAAK,YAAY;EAEjC;CACE,CAAA;CAEP,OACE,oBAAC,gBAAD;EAAgB,MAAM,QAAQ,QAAQ,KAAK,aAAa,OAAO;EAC5D,UAAA,QACC,oBAAC,sBAAD;GAAsB,SAAS,QAAQ;GAAS,cAAc;GAAI,OAAO;GACtE,UAAA;EACmB,CAAA,IAEtB;CAEY,CAAA;AAEpB"}