@ciridae/ui 0.16.1 → 1.0.1

package/dist/components/locale.js

@@ -0,0 +1,501 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/*
+ * The kit's locale: one place for every user-facing word the components draw and every date,
+ * time, number, amount and size they format. `CiridaeLocaleProvider` sets the locale, the text
+ * direction and any labels the product rewords; `useCiridaeLocale` reads them. Without a provider
+ * the kit reads in English, formatting for the browser's language.
+ */
+import { DirectionProvider } from "@base-ui/react/direction-provider";
+import { createContext, Fragment, useContext, useMemo } from "react";
+/**
+ * Every word the kit draws, in English. A string is used as is; a function builds a parametric
+ * string, or, where a sentence mixes a name with what it did, orders the parts it is given.
+ */
+export const englishLabels = {
+    common: {
+        close: "Close",
+        cancel: "Cancel",
+        done: "Done",
+        dismiss: "Dismiss",
+        loading: "Loading",
+        clear: "Clear",
+        search: "Search",
+        searchPlaceholder: "Search…",
+        noResults: "No results",
+        noMatches: "No matches",
+        retry: "Retry",
+        tryAgain: "Try again",
+        working: "Working…",
+        progress: "Progress",
+        expand: "Expand",
+        collapse: "Collapse",
+        remove: (name) => `Remove ${name}`,
+        copy: (what) => `Copy ${what}`,
+        copyValue: (what, value) => `Copy ${what} ${value}`,
+        copied: "Copied",
+        copyAction: "Copy",
+        moreActions: "More actions",
+        moreTabs: "More tabs",
+        dismissNotification: "Dismiss notification",
+        moreCount: (count) => `+${count}`,
+        /** A control's name with the count its badge shows, such as a bell's unread count. */
+        withCount: (label, count) => `${label}, ${count}`,
+        /** Between the items of a list, such as the actions one update line joins. */
+        listSeparator: ", ",
+    },
+    shell: {
+        menu: "Menu",
+        breadcrumb: "Breadcrumb",
+        parentPages: "Parent pages",
+        environment: (label) => `${label} environment`,
+    },
+    pagination: { label: "Pagination", previous: "Previous", next: "Next" },
+    calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
+    select: {
+        placeholder: "Select…",
+        label: "Select option",
+        searchLabel: "Search options",
+        filters: "Filters",
+    },
+    commandMenu: { title: "Command menu" },
+    keyboard: {
+        shortcuts: "Keyboard shortcuts",
+        /** The group of a shortcut registered without one. */
+        general: "General",
+        openCommandMenu: "Open command menu",
+        openChat: "Open chat",
+        list: "List",
+        nextRow: "Next row",
+        previousRow: "Previous row",
+        selectRow: "Select row",
+        selectRange: "Select rows up to here",
+        clearSelection: "Clear selection",
+        panel: "Panel",
+        previousItem: "Previous item",
+        nextItem: "Next item",
+        closePanel: "Close panel",
+        record: "Record",
+        editField: "Edit field",
+        /** `KeyboardShortcutSettings`. */
+        change: "Change",
+        reset: "Reset",
+        unassigned: "Unassigned",
+        pressKeys: "Press keys…",
+        usedBy: (name) => `Used by ${name}`,
+    },
+    dates: { today: "Today", yesterday: "Yesterday", earlier: "Earlier" },
+    dropzone: {
+        dropToAttach: "Drop to attach",
+        /** "Drop files or [browse]": the browse button is a slot. */
+        dropOrBrowse: (browse) => _jsxs(_Fragment, { children: ["Drop files or ", browse] }),
+        browse: "browse",
+        uploading: (name) => `Uploading ${name}`,
+        attachFiles: "Attach files",
+    },
+    userChip: { copyEmail: "Copy email" },
+    activity: {
+        show: "Show",
+        all: "All",
+        comments: "Comments",
+        updates: "Updates",
+        noActivity: "No activity",
+        noComments: "No comments",
+        noUpdates: "No updates",
+        comment: "Comment",
+        postComment: "Post comment",
+        tag: "Tag",
+        tags: "Tags",
+        updateCount: (count) => (count === 1 ? "1 update" : `${count} updates`),
+        /** The actors a folded run names, then how many more acted. */
+        runActors: (names, more) => (more > 0 ? `${names} +${more}` : names),
+        updateLine: ({ actor, actions, time }) => (_jsxs(_Fragment, { children: [actor, " ", actions, " \u00B7 ", time] })),
+    },
+    notifications: {
+        title: "Notifications",
+        markAllRead: "Mark all read",
+        allCaughtUp: "All caught up",
+        show: "Show",
+        all: "All",
+        mentions: "Mentions",
+        assigned: "Assigned",
+        noNotifications: "No notifications",
+        noMentions: "No mentions",
+        nothingAssigned: "Nothing assigned",
+        today: "Today",
+        earlier: "Earlier",
+        sentence: ({ actor, action }) => (_jsxs(_Fragment, { children: [actor, " ", action] })),
+        meta: ({ record, time }) => (_jsxs(_Fragment, { children: [record, " \u00B7 ", time] })),
+        /** The row's accessible name. */
+        rowLabel: (actor, action, record) => `${actor} ${action}, ${record}`,
+    },
+    feedback: {
+        sendTitle: "Send feedback",
+        sentTitle: "Sent feedback",
+        newTab: "New",
+        sentTab: "Sent",
+        type: "Type",
+        where: "Where",
+        whatHappened: "What happened?",
+        whatHappenedPlaceholder: "Tell us what happened",
+        includeScreenshot: "Include a screenshot",
+        preview: "Preview",
+        attachments: "Attachments",
+        kindWrong: "Something is wrong",
+        kindIdea: "An idea",
+        kindQuestion: "A question",
+        typeBug: "Bug",
+        typeFeature: "Feature",
+        typeGeneral: "General",
+        statusReceived: "Received",
+        statusInProgress: "In progress",
+        statusNeedsReply: "Needs reply",
+        statusDone: "Done",
+        statusClosed: "Closed",
+        statusWithdrawn: "Withdrawn",
+        needsWords: "Add a few words so we know what to look at.",
+        fileTooLarge: (name, limit) => `${name} is over ${limit}`,
+        fileEmpty: (name) => `${name} is empty`,
+        tooManyFiles: (count) => `Attach up to ${count} files`,
+        sent: "Sent",
+        sendAnother: "Send another",
+        sending: "Sending…",
+        send: "Send feedback",
+        sendFailed: "Couldn't send your feedback",
+        loadListFailed: "Couldn't load your feedback",
+        loadItemFailed: "Couldn't load this feedback",
+        replyFailed: "Couldn't send your reply",
+        withdrawFailed: "Couldn't withdraw this feedback",
+        noneSent: "No feedback sent",
+        back: "Back to sent feedback",
+        copyId: "Copy ID",
+        withdraw: "Withdraw",
+        withdrawing: "Withdrawing",
+        actions: "Feedback actions",
+        reply: "Reply",
+        sendReply: "Send reply",
+        annotate: "Annotate",
+        annotateCount: (count) => `Annotate, ${count} pointers`,
+        addPointer: "Add pointer",
+        screenshot: "Screenshot",
+        pointerNote: (index) => `Pointer ${index} note`,
+        removePointer: (index) => `Remove pointer ${index}`,
+    },
+    lightbox: {
+        previous: "Previous file",
+        next: "Next file",
+        openInNewTab: "Open in new tab",
+        download: "Download",
+        position: (index, total) => `${index} of ${total}`,
+        preview: (name) => `Preview ${name}`,
+    },
+    chat: {
+        message: "Message",
+        sendMessage: "Send message",
+        stopped: "Stopped",
+        failed: "Failed",
+        notSent: "Not sent",
+        typing: "Typing",
+        resize: "Resize",
+        openFullPage: "Open full page",
+        dock: "Dock",
+        undock: "Undock",
+        attachFile: "Attach a file",
+        mentions: "Mentions",
+        assistantName: "Agent",
+        answered: (answers) => `Answered ${answers}`,
+        allow: "Allow",
+        deny: "Deny",
+        conversations: "Conversations",
+        searchConversations: "Search conversations",
+        newChat: "New chat",
+        running: "Running",
+        previousWeek: "Previous 7 days",
+        approve: "Approve",
+        waitingOnYou: "Waiting on you",
+    },
+    projectCard: {
+        default: "Default",
+        dedicated: "Dedicated",
+        archived: "Archived",
+        created: (when) => _jsxs(_Fragment, { children: ["Created: ", when] }),
+        lastEdited: (when) => _jsxs(_Fragment, { children: ["Last edited: ", when] }),
+    },
+    table: {
+        nothingToShow: "Nothing to show.",
+        noResults: "No results",
+        selectAll: "Select all",
+        selectRow: (name) => `Select ${name}`,
+        actions: "Actions",
+        sortAscending: "Sort ascending",
+        sortDescending: "Sort descending",
+        filterBy: (column) => `Filter by ${column}`,
+        hideColumn: "Hide column",
+        columns: "Columns",
+        reset: "Reset",
+        alwaysShown: "Always shown",
+        reorderHint: "Drag, or Alt+Arrow, to reorder.",
+        density: "Density",
+        densityDefault: "Comfortable",
+        densityCompact: "Compact",
+        selectedCount: (count) => `${count} selected`,
+        selectAllCount: (total) => `Select all ${total}`,
+        clearSelection: "Clear",
+        selectedItems: "Selected items",
+    },
+    sidePanel: { previous: "Previous", next: "Next" },
+    checklist: {
+        search: "Search",
+        selectAll: "Select all",
+        selectMatches: "Select matches",
+        clear: "Clear",
+        clearMatches: "Clear matches",
+        /** The bulk actions' group, which acts on the items shown. */
+        bulkActions: "Select or clear the shown items",
+        selectedCount: (selected, total) => `${selected} of ${total} selected`,
+        noMatches: (search) => `No matches for “${search}”`,
+    },
+    filters: {
+        addFilter: "Add filter",
+        clearAll: "Clear all",
+        filterBy: "Filter by…",
+        noFields: "No fields",
+        backToFields: "Back to fields",
+        searchValues: (field) => `Search ${field.toLowerCase()}`,
+        noValues: "No values",
+        value: "Value",
+        from: "From",
+        to: "To",
+        selectedCount: (count) => `${count} selected`,
+        updatesAsYouPick: "Updates as you pick",
+        remove: (field) => `Remove ${field} filter`,
+        /** The operator as the builder offers it. */
+        operators: {
+            is: "is",
+            is_not: "is not",
+            is_any_of: "is any of",
+            is_none_of: "is none of",
+            contains: "contains",
+            does_not_contain: "doesn't contain",
+            equals: "is",
+            greater_than: "is over",
+            less_than: "is under",
+            between: "is between",
+            before: "is before",
+            after: "is after",
+        },
+        /** The operator as a chip reads it, before the values. */
+        chipOperators: {
+            is: "is",
+            is_not: "is not",
+            is_any_of: "is",
+            is_none_of: "is not",
+            contains: "contains",
+            does_not_contain: "doesn't contain",
+            equals: "is",
+            greater_than: "is over",
+            less_than: "is under",
+            between: "is between",
+            before: "is before",
+            after: "is after",
+        },
+        betweenValues: (from, to) => `${from} and ${to}`,
+    },
+    dateRange: {
+        label: "Date range",
+        today: "Today",
+        yesterday: "Yesterday",
+        last7Days: "Last 7 days",
+        last30Days: "Last 30 days",
+        thisMonth: "This month",
+        lastMonth: "Last month",
+        pickDates: "Pick dates…",
+        range: (start, end) => `${start} - ${end}`,
+    },
+    secret: { title: "Secret", titleFor: (name) => `Secret for ${name}` },
+    record: {
+        /** A stacked record page's tabs: the work, and the side column of details and activity. */
+        mainTab: "Overview",
+        asideTab: "Activity",
+        stages: "Stages",
+        notSure: "Not sure?",
+        undo: "Undo",
+        /** A folded run of stages on the strip: its short word, and its name for assistive tech. */
+        runDone: "Done",
+        runToGo: "To go",
+        runDoneLabel: (count) => `${count} stages done`,
+        runToGoLabel: (count) => `${count} stages to go`,
+        checklistProgress: (done, total) => `${done} of ${total}`,
+    },
+    settings: { navigation: "Settings" },
+    navigation: { navigation: "Main", more: "More", less: "Less" },
+    documentViewer: {
+        document: "Document",
+        pages: "Pages",
+        page: (number) => `Page ${number}`,
+        pageOf: (number, total) => `Page ${number} of ${total}`,
+        previousPage: "Previous page",
+        nextPage: "Next page",
+        zoomIn: "Zoom in",
+        zoomOut: "Zoom out",
+        /** The fit menu's face while the zoom is a step of its own. */
+        fit: "Fit",
+        fitPage: "Fit page",
+        fitWidth: "Fit width",
+        actualSize: "Actual size",
+        rotate: "Rotate",
+        fullScreen: "Full screen",
+        exitFullScreen: "Exit full screen",
+    },
+    themeCustomizer: {
+        palette: "Palette",
+        paletteName: (name) => name.charAt(0).toUpperCase() + name.slice(1),
+        colorTheme: "Color theme",
+        system: "System",
+        light: "Light",
+        dark: "Dark",
+        displayFont: "Display font",
+        sansFont: "Body font",
+        monoFont: "Mono font",
+    },
+    profileHeader: { email: "email" },
+    editableField: {
+        edit: (label) => `Change ${label}`,
+        saving: "Saving",
+        saved: "Saved",
+        saveHint: "Enter to save · Esc to cancel",
+        pickHint: "Type to search · Enter to pick · Esc to cancel",
+        undo: "Undo",
+        effectiveValue: "Effective value",
+    },
+};
+/** Epoch milliseconds, a Date, or an ISO string; a string without a zone is UTC. */
+export function toDate(value) {
+    if (value instanceof Date)
+        return value;
+    if (typeof value === "number")
+        return new Date(value);
+    return new Date(/(?:Z|[+-]\d{2}:?\d{2})$/.test(value) ? value : `${value}Z`);
+}
+function cached(create) {
+    const formatters = new Map();
+    return (options) => {
+        const key = JSON.stringify(options ?? null);
+        let formatter = formatters.get(key);
+        if (!formatter) {
+            formatter = create(options);
+            formatters.set(key, formatter);
+        }
+        return formatter;
+    };
+}
+const relativeSteps = [
+    [45, "second", 1],
+    [45 * 60, "minute", 60],
+    [22 * 3600, "hour", 3600],
+    [6.5 * 86400, "day", 86400],
+    [26 * 86400, "week", 7 * 86400],
+    [320 * 86400, "month", 30 * 86400],
+    [Infinity, "year", 365 * 86400],
+];
+const fileUnits = ["kilobyte", "megabyte", "gigabyte", "terabyte"];
+function mergeLabels(overrides) {
+    if (!overrides)
+        return englishLabels;
+    return {
+        common: { ...englishLabels.common, ...overrides.common },
+        shell: { ...englishLabels.shell, ...overrides.shell },
+        pagination: { ...englishLabels.pagination, ...overrides.pagination },
+        calendar: { ...englishLabels.calendar, ...overrides.calendar },
+        select: { ...englishLabels.select, ...overrides.select },
+        commandMenu: { ...englishLabels.commandMenu, ...overrides.commandMenu },
+        keyboard: { ...englishLabels.keyboard, ...overrides.keyboard },
+        dates: { ...englishLabels.dates, ...overrides.dates },
+        dropzone: { ...englishLabels.dropzone, ...overrides.dropzone },
+        userChip: { ...englishLabels.userChip, ...overrides.userChip },
+        activity: { ...englishLabels.activity, ...overrides.activity },
+        notifications: { ...englishLabels.notifications, ...overrides.notifications },
+        feedback: { ...englishLabels.feedback, ...overrides.feedback },
+        chat: { ...englishLabels.chat, ...overrides.chat },
+        lightbox: { ...englishLabels.lightbox, ...overrides.lightbox },
+        projectCard: { ...englishLabels.projectCard, ...overrides.projectCard },
+        table: { ...englishLabels.table, ...overrides.table },
+        sidePanel: { ...englishLabels.sidePanel, ...overrides.sidePanel },
+        checklist: { ...englishLabels.checklist, ...overrides.checklist },
+        filters: { ...englishLabels.filters, ...overrides.filters },
+        dateRange: { ...englishLabels.dateRange, ...overrides.dateRange },
+        secret: { ...englishLabels.secret, ...overrides.secret },
+        record: { ...englishLabels.record, ...overrides.record },
+        editableField: { ...englishLabels.editableField, ...overrides.editableField },
+        settings: { ...englishLabels.settings, ...overrides.settings },
+        navigation: { ...englishLabels.navigation, ...overrides.navigation },
+        documentViewer: { ...englishLabels.documentViewer, ...overrides.documentViewer },
+        themeCustomizer: { ...englishLabels.themeCustomizer, ...overrides.themeCustomizer },
+        profileHeader: { ...englishLabels.profileHeader, ...overrides.profileHeader },
+    };
+}
+/** The locale value `useCiridaeLocale` returns, for use outside React or in tests. */
+export function createCiridaeLocale(locale, { labels, dir = "ltr" } = {}) {
+    const dateFormat = cached((options) => new Intl.DateTimeFormat(locale, options));
+    const numberFormat = cached((options) => new Intl.NumberFormat(locale, options));
+    const relativeFormat = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+    const pluralRules = new Intl.PluralRules(locale);
+    const mergedLabels = mergeLabels(labels);
+    const formatNumber = (value, options) => numberFormat(options).format(value);
+    return {
+        locale,
+        dir,
+        labels: mergedLabels,
+        formatDate: (value, options = { dateStyle: "medium" }) => dateFormat(options).format(toDate(value)),
+        formatTime: (value, options = { timeStyle: "short" }) => dateFormat(options).format(toDate(value)),
+        formatDateTime: (value, options = { dateStyle: "medium", timeStyle: "short" }) => dateFormat(options).format(toDate(value)),
+        formatRelative: (value, now = Date.now()) => {
+            const seconds = (toDate(value).getTime() - now) / 1000;
+            const step = relativeSteps.find(([limit]) => Math.abs(seconds) < limit) ?? relativeSteps[6];
+            const [, unit, size] = step;
+            return relativeFormat.format(unit === "second" ? 0 : Math.round(seconds / size), unit);
+        },
+        formatNumber,
+        formatMoney: (amount, { currency = "USD", compact = false, cents = !compact } = {}) => formatNumber(amount, {
+            style: "currency",
+            currency,
+            ...(compact
+                ? { notation: "compact", compactDisplay: "short", maximumFractionDigits: 1 }
+                : cents
+                    ? {}
+                    : { maximumFractionDigits: 0 }),
+        }),
+        formatFileSize: (bytes) => {
+            if (bytes < 1024)
+                return formatNumber(bytes, { style: "unit", unit: "byte", unitDisplay: "short" });
+            let value = bytes / 1024;
+            let unit = 0;
+            while (value >= 1024 && unit < fileUnits.length - 1) {
+                value /= 1024;
+                unit += 1;
+            }
+            return formatNumber(value, {
+                style: "unit",
+                unit: fileUnits[unit],
+                unitDisplay: "short",
+                maximumFractionDigits: value < 10 ? 1 : 0,
+            });
+        },
+        formatList: (items) => items.map((item, index) => (_jsxs(Fragment, { children: [index > 0 && mergedLabels.common.listSeparator, item] }, index))),
+        plural: (count, forms) => (forms[pluralRules.select(count)] ?? forms.other).replace(/#/g, formatNumber(count)),
+    };
+}
+let browserLocale = null;
+/** English labels, formatted for the browser's language. */
+function defaultLocale() {
+    browserLocale ?? (browserLocale = createCiridaeLocale(globalThis.navigator?.language || "en-US"));
+    return browserLocale;
+}
+const LocaleContext = createContext(null);
+export function CiridaeLocaleProvider({ locale, labels, dir = "ltr", children, }) {
+    const value = useMemo(() => createCiridaeLocale(locale ?? (globalThis.navigator?.language || "en-US"), { labels, dir }), [locale, labels, dir]);
+    return (_jsx(LocaleContext, { value: value, children: _jsx(DirectionProvider, { direction: dir, children: children }) }));
+}
+/** The locale's labels and formatters; English for the browser's language outside a provider. */
+export function useCiridaeLocale() {
+    return useContext(LocaleContext) ?? defaultLocale();
+}

package/dist/components/log-list.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps, Ref } from "react";
+/**
+ * Scroll frame holding a deployment's log rows. `fill` grows it to the rest of a flex column, such
+ * as an overlay, instead of a fixed height.
+ */
+export declare function LogList({ fill, className, ref, ...props }: ComponentProps<"div"> & {
+    fill?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}): import("@types/react").JSX.Element;
+/**
+ * Monospace block of raw log text. `framed` gives it the log list's own scroll frame, for output
+ * that is the whole list rather than one entry's detail.
+ */
+export declare function LogOutput({ tone, framed, className, ref, ...props }: ComponentProps<"pre"> & {
+    tone?: "error";
+    framed?: boolean;
+    ref?: Ref<HTMLPreElement>;
+}): import("@types/react").JSX.Element;
+/** Placeholder for plain monospace output such as Docker Compose logs. */
+export declare function LogOutputSkeleton(): import("@types/react").JSX.Element;

package/dist/components/log-list.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css, cx } from "#primitives/css";
+import { Skeleton } from "./skeleton.js";
+// The frame below is repeated per composition rather than layered with `cx`, so that each
+// variant's own `overflow` wins regardless of the order Panda emits its utilities in.
+const list = css({
+    containerType: "inline-size",
+    height: "table.scroll",
+    minHeight: "log.minimum",
+    overflowY: "auto",
+    overflowX: "hidden",
+    border: "1px solid token(colors.border.subtle)",
+    background: "bg.panel",
+    _focusVisible: { focusRing: "inset" },
+});
+const filledList = css({
+    containerType: "inline-size",
+    flex: "1",
+    minHeight: "log.minimum",
+    overflowY: "auto",
+    overflowX: "hidden",
+    border: "1px solid token(colors.border.subtle)",
+    background: "bg.panel",
+    _focusVisible: { outline: "2px solid token(colors.border.focus)", outlineOffset: "2px" },
+});
+const output = css({
+    margin: "none",
+    padding: "panel.default",
+    overflow: "auto",
+    whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere",
+    fontFamily: "numeric",
+    fontSize: "log.body",
+    lineHeight: "body",
+});
+const framedOutput = css({
+    containerType: "inline-size",
+    height: "table.scroll",
+    minHeight: "log.minimum",
+    margin: "none",
+    padding: "panel.default",
+    overflow: "auto",
+    whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere",
+    border: "1px solid token(colors.border.subtle)",
+    background: "bg.panel",
+    fontFamily: "numeric",
+    fontSize: "log.body",
+    lineHeight: "body",
+    _focusVisible: { focusRing: "inset" },
+});
+const errorTone = css({
+    maxHeight: "log.rawMaximum",
+    border: "1px solid token(colors.accent.red)",
+    borderRadius: "inset",
+    color: "accent.red",
+});
+const skeletonOutput = css({
+    containerType: "inline-size",
+    height: "table.scroll",
+    minHeight: "log.minimum",
+    margin: "none",
+    padding: "panel.default",
+    overflow: "hidden",
+    whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere",
+    border: "1px solid token(colors.border.subtle)",
+    background: "bg.panel",
+    fontFamily: "numeric",
+    fontSize: "log.body",
+    lineHeight: "body",
+});
+/**
+ * Scroll frame holding a deployment's log rows. `fill` grows it to the rest of a flex column, such
+ * as an overlay, instead of a fixed height.
+ */
+export function LogList({ fill = false, className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cx(fill ? filledList : list, className) });
+}
+/**
+ * Monospace block of raw log text. `framed` gives it the log list's own scroll frame, for output
+ * that is the whole list rather than one entry's detail.
+ */
+export function LogOutput({ tone, framed = false, className, ref, ...props }) {
+    return (_jsx("pre", { ...props, ref: ref, className: cx(framed ? framedOutput : output, tone === "error" && errorTone, className) }));
+}
+const rows = Array.from({ length: 40 }, (_, index) => index);
+const messageWidths = ["82%", "64%", "91%", "48%", "73%", "57%"];
+/** Placeholder for plain monospace output such as Docker Compose logs. */
+export function LogOutputSkeleton() {
+    return (_jsx("div", { className: skeletonOutput, children: rows.map((index) => (_jsx(Skeleton, { shape: "text", style: { width: messageWidths[index % messageWidths.length] } }, index))) }));
+}

package/dist/components/mention-input.d.ts

@@ -0,0 +1,50 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type Mention } from "../chat/contract.js";
+export type { Mention };
+/** A mention the picker offers; `detail` sits beside its label, such as a title or a record's type. */
+export type MentionOption = Mention & {
+    detail?: string;
+};
+/** A character that opens the picker at the caret, and what it offers for the query typed after it. */
+export type MentionTrigger = {
+    char: string;
+    options: (query: string) => readonly MentionOption[];
+};
+/** A mention's mark, such as an avatar or a record's icon, for a chip or a picker row. */
+export type MentionMark = (mention: Mention, place: "chip" | "option") => ReactNode;
+/** A value's text with each mention as its label, and the mentions in it in order. */
+export declare function readMentions(value: string): {
+    text: string;
+    mentions: Mention[];
+};
+/**
+ * Types a trigger at a `MentionInput`'s caret, after a space when it follows a word, so its
+ * picker opens there; for a toolbar button such as Tag. Keep the input focused by preventing
+ * the button's `mousedown`, or the trigger goes in at the end.
+ */
+export declare function openMentionPicker(input: HTMLElement | null, char: string): void;
+export declare const mentionChip: string;
+/** A mention as a chip outside the field, such as in a posted comment; a link with `href`. */
+export declare function MentionChip({ mention, mark, href, }: {
+    mention: Mention;
+    mark?: ReactNode;
+    href?: string;
+}): import("@types/react").JSX.Element;
+export type MentionInputProps = Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "onSubmit" | "placeholder"> & {
+    /** The text, each mention in it as `[@label](mention://kind/id)`. */
+    value: string;
+    onValueChange: (value: string) => void;
+    /** What `@`, `#` or another character offers when typed at the start of a word. */
+    triggers?: readonly MentionTrigger[];
+    /** What a chip and a picker row lead with, such as an avatar or a record's icon. */
+    mentionMark?: MentionMark;
+    placeholder?: string;
+    /** `enter` submits on Enter, Shift+Enter breaking the line; `mod+enter` on Cmd/Ctrl+Enter. */
+    submitOn?: "enter" | "mod+enter";
+    onSubmit?: () => void;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    /** Names the picker's list; the locale's "Mentions" by default. */
+    listLabel?: string;
+};
+export declare function MentionInput({ value, onValueChange, triggers, mentionMark, placeholder, submitOn, onSubmit, disabled, autoFocus, listLabel, ref, className, onKeyDown, onFocus, onBlur, onPointerDown, ...props }: MentionInputProps): import("@types/react").JSX.Element;