@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/assistant-ui/elements/command-palette.js

@@ -0,0 +1,129 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, floating, mono } from "./surfaces.js";
+import { useEffect, useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/command-palette.tsx
+var command_palette_exports = /* @__PURE__ */ __exportAll({ CommandPalette: () => CommandPalette });
+function CommandPalette({ commands, query, activeId, onQueryChange, onActiveChange, onRun, className, ...props }) {
+	const listId = useId();
+	const optionId = (id) => `${listId}-${id}`;
+	const matches = commands.filter((command) => command.label.toLowerCase().includes(query.toLowerCase()));
+	const groups = [...new Set(matches.map((command) => command.group))];
+	const ordered = groups.flatMap((group) => matches.filter((command) => command.group === group));
+	const move = (delta) => {
+		if (ordered.length === 0) return;
+		const at = ordered.findIndex((command) => command.id === activeId);
+		const next = ordered[((at === -1 ? delta > 0 ? -1 : 0 : at) + delta + ordered.length) % ordered.length];
+		if (next && onActiveChange) onActiveChange(next.id);
+	};
+	useEffect(() => {
+		document.getElementById(optionId(activeId))?.scrollIntoView({ block: "nearest" });
+	}, [activeId, listId]);
+	const onKeyDown = (event) => {
+		if (event.nativeEvent.isComposing) return;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			move(1);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			move(-1);
+		} else if (event.key === "Enter") {
+			event.preventDefault();
+			const active = ordered.find((command) => command.id === activeId);
+			if (active && onRun) onRun(active.id);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "command-palette",
+		className: cn(floating, "flex w-full max-w-sm flex-col overflow-hidden rounded-[20px]", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2.5 px-3.5 py-3",
+				children: [
+					/* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground size-3.5 shrink-0" }),
+					/* @__PURE__ */ jsx("input", {
+						value: query,
+						onChange: (event) => onQueryChange?.(event.target.value),
+						onKeyDown,
+						readOnly: !onRun,
+						placeholder: "Type a command",
+						"aria-label": "Type a command",
+						role: "combobox",
+						"aria-expanded": ordered.length > 0,
+						"aria-controls": listId,
+						"aria-autocomplete": "list",
+						"aria-readonly": !onRun || void 0,
+						"aria-activedescendant": ordered.some((command) => command.id === activeId) ? optionId(activeId) : void 0,
+						className: cn("text-foreground/85 placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-[13.5px] outline-none", !onRun && "text-muted-foreground")
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(field, mono, "text-muted-foreground rounded px-1.5 py-0.5"),
+						children: "esc"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: listId,
+				role: "listbox",
+				"aria-label": "Commands",
+				className: cn("border-foreground/[0.07] flex max-h-72 flex-col overflow-y-auto border-t p-1.5", ordered.length === 0 && "hidden"),
+				children: groups.map((group) => /* @__PURE__ */ jsxs("div", {
+					role: "group",
+					"aria-label": group,
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn(mono, "text-muted-foreground px-2 pt-2 pb-1"),
+						children: group
+					}), matches.filter((command) => command.group === group).map((command) => {
+						const className = cn("flex items-center gap-2 rounded-xl px-2 py-1.5 text-start transition-colors", onRun && command.id === activeId ? "bg-foreground/[0.06]" : onRun ? "hover:bg-foreground/[0.03]" : "text-muted-foreground");
+						const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate text-[13px]",
+							children: command.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "flex shrink-0 gap-1",
+							children: command.keys.map((key) => /* @__PURE__ */ jsx("span", {
+								className: cn(field, mono, "text-muted-foreground rounded px-1.5 py-0.5"),
+								children: key
+							}, key))
+						})] });
+						return onRun ? /* @__PURE__ */ jsx("button", {
+							id: optionId(command.id),
+							type: "button",
+							role: "option",
+							tabIndex: -1,
+							"aria-selected": command.id === activeId,
+							onMouseDown: (event) => event.preventDefault(),
+							onClick: () => onRun(command.id),
+							className,
+							children: content
+						}, command.id) : /* @__PURE__ */ jsx("div", {
+							id: optionId(command.id),
+							role: "option",
+							"aria-selected": command.id === activeId,
+							className,
+							children: content
+						}, command.id);
+					})]
+				}, group))
+			}),
+			matches.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "border-foreground/[0.07] border-t p-1.5",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground block px-2 py-4 text-center text-xs break-words",
+					children: [
+						"No command matches “",
+						query,
+						"”"
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { CommandPalette, command_palette_exports };

package/dist/components/assistant-ui/elements/comparison-card.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from "react";
+declare namespace comparison_card_d_exports {
+  export { ComparisonCard, ComparisonOption };
+}
+export interface ComparisonOption {
+  id: string;
+  name: string;
+  headline: string;
+  traits: readonly (string | false)[];
+}
+export declare function ComparisonCard({ traitLabels, options, recommendedId, reason, className, ...props }: Omit<ComponentProps<"div">, "children" | "traitLabels" | "options" | "recommendedId" | "reason"> & {
+  traitLabels: readonly string[];
+  options: readonly ComparisonOption[];
+  recommendedId: string;
+  reason: string;
+}): import("react").JSX.Element;
+//#endregion
+export { comparison_card_d_exports };

package/dist/components/assistant-ui/elements/comparison-card.js

@@ -0,0 +1,58 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, MinusIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/comparison-card.tsx
+var comparison_card_exports = /* @__PURE__ */ __exportAll({ ComparisonCard: () => ComparisonCard });
+function ComparisonCard({ traitLabels, options, recommendedId, reason, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "comparison-card",
+		className: cn(paper, "flex w-full max-w-md flex-col gap-3 rounded-2xl p-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex gap-2",
+			children: options.map((option) => {
+				const recommended = option.id === recommendedId;
+				return /* @__PURE__ */ jsxs("div", {
+					className: cn("flex min-w-0 flex-1 flex-col gap-2 rounded-xl p-3 transition-colors", recommended ? "bg-info/[0.07] dark:bg-info/10" : field),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-0.5",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "flex items-baseline gap-1.5",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate text-[13px] font-medium",
+								children: option.name
+							}), recommended && /* @__PURE__ */ jsx("span", {
+								className: cn("font-mono text-[11px] tracking-tight", "shrink-0 text-info dark:text-info"),
+								children: "pick"
+							})]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground truncate text-xs",
+							children: option.headline
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-1",
+						children: traitLabels.map((label, i) => {
+							const trait = option.traits[i];
+							const absent = !trait;
+							return /* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-1.5 text-xs",
+								children: [absent ? /* @__PURE__ */ jsx(MinusIcon, { className: "text-muted-foreground size-3 shrink-0" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3 shrink-0 text-success" }), /* @__PURE__ */ jsx("span", {
+									className: cn("min-w-0 truncate", absent ? "text-muted-foreground" : "text-muted-foreground"),
+									children: absent ? label : trait
+								})]
+							}, `${i}-${label}`);
+						})
+					})]
+				}, option.id);
+			})
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-xs leading-relaxed",
+			children: reason
+		})]
+	});
+}
+//#endregion
+export { ComparisonCard, comparison_card_exports };

package/dist/components/assistant-ui/elements/composer-trigger-popover.aui.d.ts

@@ -0,0 +1,51 @@
+import { ComponentPropsWithoutRef, FC } from "react";
+import { ComposerPrimitive, Unstable_DirectiveFormatter, Unstable_TriggerItem } from "@assistant-ui/react";
+declare namespace composer_trigger_popover_aui_d_exports {
+  export { ComposerTriggerPopover };
+}
+type IconComponent = FC<{
+  className?: string;
+}>;
+type DirectiveBehaviorProps = {
+  /** Formatter used to serialize the selected item into composer text. */
+  formatter?: Unstable_DirectiveFormatter | undefined;
+  /** Called after the directive text has been inserted into the composer. */
+  onInserted?: ((item: Unstable_TriggerItem) => void) | undefined;
+};
+type ActionBehaviorProps = {
+  /** Formatter used to serialize the audit-trail chip (when `removeOnExecute` is false). */
+  formatter?: Unstable_DirectiveFormatter | undefined;
+  /** Invoked with the selected item at the moment of selection. */
+  onExecute: (item: Unstable_TriggerItem) => void;
+  /** If `true`, strip the trigger text from the composer after executing. @default false */
+  removeOnExecute?: boolean | undefined;
+};
+type ComposerTriggerPopoverBaseProps = Omit<ComponentPropsWithoutRef<typeof ComposerPrimitive.Unstable_TriggerPopover>, "children"> & {
+  /**
+   * Maps icon keys to components. Items look up via `item.metadata?.icon`
+   * (string); categories look up via their `id`.
+   */
+  iconMap?: Record<string, IconComponent>;
+  /** Fallback icon when no entry in `iconMap` matches. */
+  fallbackIcon?: IconComponent;
+  /** Label shown on the back button. @default "Back" */
+  backLabel?: string;
+  /** Label shown when no categories are available. @default "No items available" */
+  emptyCategoriesLabel?: string;
+  /** Label shown when no items match. @default "No matching items" */
+  emptyItemsLabel?: string;
+  /** Label shown while an async adapter is resolving items. @default "Loading…" */
+  loadingLabel?: string;
+};
+type ComposerTriggerPopoverProps = ComposerTriggerPopoverBaseProps & ({
+  /** Insert-directive behavior. */
+  directive: DirectiveBehaviorProps;
+  action?: never;
+} | {
+  /** Action behavior. */
+  action: ActionBehaviorProps;
+  directive?: never;
+});
+export declare const ComposerTriggerPopover: FC<ComposerTriggerPopoverProps>;
+//#endregion
+export { composer_trigger_popover_aui_d_exports };

package/dist/components/assistant-ui/elements/composer-trigger-popover.aui.js

@@ -0,0 +1,104 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { memo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, SparklesIcon } from "lucide-react";
+import { ComposerPrimitive, unstable_defaultDirectiveFormatter, unstable_useTriggerPopoverScopeContext } from "@assistant-ui/react";
+//#region src/components/assistant-ui/elements/composer-trigger-popover.aui.tsx
+var composer_trigger_popover_aui_exports = /* @__PURE__ */ __exportAll({ ComposerTriggerPopover: () => ComposerTriggerPopover });
+function resolveIcon(iconKey, iconMap, fallback) {
+	if (iconKey && iconMap?.[iconKey]) return iconMap[iconKey];
+	return fallback;
+}
+const Categories = ({ iconMap, fallbackIcon, emptyLabel }) => /* @__PURE__ */ jsx(ComposerPrimitive.Unstable_TriggerPopoverCategories, { children: (categories) => /* @__PURE__ */ jsxs("div", {
+	"data-slot": "composer-trigger-popover-categories",
+	className: "flex flex-col py-1",
+	children: [categories.map((cat) => {
+		const Icon = resolveIcon(cat.id, iconMap, fallbackIcon);
+		return /* @__PURE__ */ jsxs(ComposerPrimitive.Unstable_TriggerPopoverCategoryItem, {
+			categoryId: cat.id,
+			className: "hover:bg-accent focus:bg-accent data-[highlighted]:bg-accent flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm transition-colors outline-none",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Icon, { className: "text-muted-foreground size-4" }), cat.label]
+			}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "text-muted-foreground size-4" })]
+		}, cat.id);
+	}), categories.length === 0 && /* @__PURE__ */ jsx("div", {
+		className: "text-muted-foreground px-3 py-2 text-sm",
+		children: emptyLabel
+	})]
+}) });
+const Items = ({ iconMap, fallbackIcon, backLabel, emptyLabel, loadingLabel }) => {
+	const { isLoading } = unstable_useTriggerPopoverScopeContext();
+	return /* @__PURE__ */ jsx(ComposerPrimitive.Unstable_TriggerPopoverItems, { children: (items) => /* @__PURE__ */ jsxs("div", {
+		"data-slot": "composer-trigger-popover-items",
+		className: "flex flex-col",
+		children: [/* @__PURE__ */ jsxs(ComposerPrimitive.Unstable_TriggerPopoverBack, {
+			className: "text-muted-foreground hover:bg-accent flex cursor-pointer items-center gap-1.5 border-b px-3 py-2 text-xs tracking-wide uppercase transition-colors",
+			children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-3.5" }), backLabel]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "py-1",
+			children: [items.map((item, index) => {
+				const Icon = resolveIcon(typeof item.metadata?.icon === "string" ? item.metadata.icon : void 0, iconMap, fallbackIcon);
+				return /* @__PURE__ */ jsxs(ComposerPrimitive.Unstable_TriggerPopoverItem, {
+					item,
+					index,
+					className: "hover:bg-accent focus:bg-accent data-[highlighted]:bg-accent flex w-full cursor-pointer flex-col items-start gap-0.5 px-3 py-2 text-start transition-colors outline-none",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-2 text-sm font-medium",
+						children: [/* @__PURE__ */ jsx(Icon, { className: "text-primary size-3.5" }), item.label]
+					}), item.description && /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground ms-5.5 text-xs leading-tight",
+						children: item.description
+					})]
+				}, item.id);
+			}), items.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground px-3 py-2 text-sm",
+				children: isLoading ? loadingLabel : emptyLabel
+			})]
+		})]
+	}) });
+};
+/**
+* Pre-built popover UI for a trigger-driven picker (mentions, slash commands, etc).
+* Pass exactly one of `directive` (inserts a chip) or `action` (fires a handler).
+*/
+const ComposerTriggerPopoverImpl = ({ iconMap, fallbackIcon = SparklesIcon, backLabel = "Back", emptyCategoriesLabel = "No items available", emptyItemsLabel = "No matching items", loadingLabel = "Loading…", className, directive, action, ...props }) => {
+	const warnedRef = useRef(false);
+	if (process.env.NODE_ENV !== "production" && !warnedRef.current && Boolean(directive) === Boolean(action)) {
+		warnedRef.current = true;
+		console.warn("[assistant-ui] ComposerTriggerPopover requires exactly one of `directive` or `action` props.");
+	}
+	return /* @__PURE__ */ jsxs(ComposerPrimitive.Unstable_TriggerPopover, {
+		"data-slot": "composer-trigger-popover",
+		className: cn("aui-composer-trigger-popover bg-popover text-popover-foreground absolute start-0 bottom-full z-50 mb-2 w-64 overflow-hidden rounded-xl border", className),
+		...props,
+		children: [
+			directive ? /* @__PURE__ */ jsx(ComposerPrimitive.Unstable_TriggerPopover.Directive, {
+				formatter: directive.formatter ?? unstable_defaultDirectiveFormatter,
+				onInserted: directive.onInserted
+			}) : action ? /* @__PURE__ */ jsx(ComposerPrimitive.Unstable_TriggerPopover.Action, {
+				formatter: action.formatter ?? unstable_defaultDirectiveFormatter,
+				onExecute: action.onExecute,
+				removeOnExecute: action.removeOnExecute
+			}) : null,
+			/* @__PURE__ */ jsx(Categories, {
+				iconMap,
+				fallbackIcon,
+				emptyLabel: emptyCategoriesLabel
+			}),
+			/* @__PURE__ */ jsx(Items, {
+				iconMap,
+				fallbackIcon,
+				backLabel,
+				emptyLabel: emptyItemsLabel,
+				loadingLabel
+			})
+		]
+	});
+};
+ComposerTriggerPopoverImpl.displayName = "ComposerTriggerPopover";
+const ComposerTriggerPopover = memo(ComposerTriggerPopoverImpl);
+//#endregion
+export { ComposerTriggerPopover, composer_trigger_popover_aui_exports };

package/dist/components/assistant-ui/elements/composer.d.ts

@@ -0,0 +1,91 @@
+import { ComponentProps } from "react";
+import { LucideIcon } from "lucide-react";
+declare namespace composer_d_exports {
+  export { Composer, ComposerActions, ComposerAttachButton, ComposerAttachment, ComposerAttachmentChip, ComposerAttachments, ComposerBar, ComposerCommand, ComposerCommandItem, ComposerContext, ComposerInput, ComposerMenu, ComposerMenuItem, ComposerModel, ComposerModelItem, ComposerModelTrigger, ComposerPerson, ComposerPersonItem, ComposerSend, ComposerToolbar, ComposerUsage, ComposerVoice, ComposerVoiceButton, applyMention, useMentionMatches, useSlashMatches };
+}
+export interface ComposerAttachment {
+  name: string;
+  meta: string;
+  state: "uploading" | "done" | "error";
+  progress?: number;
+  kind?: "image" | "text" | "archive";
+}
+export interface ComposerCommand {
+  name: string;
+  description: string;
+  icon: LucideIcon;
+}
+export interface ComposerPerson {
+  name: string;
+  role: "agent" | "human";
+}
+export interface ComposerModel {
+  name: string;
+  meta: string;
+}
+export interface ComposerUsage {
+  system: number;
+  tools: number;
+  messages: number;
+  total: number;
+}
+/** Commands whose name starts with the slash query, or none when not typing one. */
+export declare function useSlashMatches(value: string, commands: readonly ComposerCommand[] | undefined): ComposerCommand[];
+/** People matching a trailing @mention, or none when the caret is not in one. */
+export declare function useMentionMatches(value: string, people: readonly ComposerPerson[] | undefined): ComposerPerson[];
+/** Replaces the trailing @mention with the chosen name. */
+export declare function applyMention(value: string, name: string): string;
+export declare function Composer({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function ComposerBar({ dragActive, className, ...props }: ComponentProps<"div"> & {
+  dragActive?: boolean;
+}): import("react").JSX.Element;
+export declare function ComposerMenu({ open, align, className, ...props }: ComponentProps<"div"> & {
+  open: boolean;
+  align?: "start" | "end";
+}): import("react").JSX.Element;
+export declare function ComposerMenuItem({ active, className, ...props }: ComponentProps<"button"> & {
+  active?: boolean;
+}): import("react").JSX.Element;
+export declare function ComposerCommandItem({ command, active, ...props }: Omit<ComponentProps<"button">, "children"> & {
+  command: ComposerCommand;
+  active: boolean;
+}): import("react").JSX.Element;
+export declare function ComposerPersonItem({ person, active, ...props }: Omit<ComponentProps<"button">, "children"> & {
+  person: ComposerPerson;
+  active: boolean;
+}): import("react").JSX.Element;
+export declare function ComposerAttachments({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function ComposerAttachmentChip({ attachment, onRemove, className, ...props }: Omit<ComponentProps<"div">, "children"> & {
+  attachment: ComposerAttachment;
+  onRemove?: (name: string) => void;
+}): import("react").JSX.Element;
+export declare function ComposerInput({ onSubmit, onKeyDown, className, ...props }: Omit<ComponentProps<"input">, "onSubmit"> & {
+  onSubmit?: () => void;
+}): import("react").JSX.Element;
+export declare function ComposerVoice({ recording, seconds, className, ...props }: Omit<ComponentProps<"div">, "children"> & {
+  recording: boolean;
+  seconds: number;
+}): import("react").JSX.Element;
+export declare function ComposerToolbar({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function ComposerActions({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function ComposerAttachButton({ className, ...props }: Omit<ComponentProps<"button">, "children">): import("react").JSX.Element;
+export declare function ComposerModelTrigger({ model, open, className, ...props }: Omit<ComponentProps<"button">, "children"> & {
+  model: string;
+  open: boolean;
+}): import("react").JSX.Element;
+export declare function ComposerModelItem({ entry, selected, ...props }: Omit<ComponentProps<"button">, "children"> & {
+  entry: ComposerModel;
+  selected: boolean;
+}): import("react").JSX.Element;
+export declare function ComposerContext({ usage, className, ...props }: Omit<ComponentProps<"div">, "children"> & {
+  usage: ComposerUsage;
+}): import("react").JSX.Element;
+export declare function ComposerVoiceButton({ active, className, ...props }: Omit<ComponentProps<"button">, "children"> & {
+  active: boolean;
+}): import("react").JSX.Element;
+export declare function ComposerSend({ streaming, idle, className, ...props }: Omit<ComponentProps<"button">, "children"> & {
+  streaming: boolean;
+  idle: boolean;
+}): import("react").JSX.Element;
+//#endregion
+export { composer_d_exports };