@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/user-chip.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
+import { cloneElement } from "react";
+import { css, cx } from "#primitives/css";
+import { IconButton } from "./button.js";
+import { useCopy } from "./copyable-id.js";
+import { Avatar } from "./data-display.js";
+import { icon as iconStyle } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Popover } from "./overlays.js";
+/*
+ * Someone in a line of text, a person or an agent persona: their avatar, name and what they are
+ * doing, with an optional action at the end, such as a nudge. Agents take their own mark in place
+ * of initials. With a `profile`, the name opens a card on hover, click or keyboard: who they are,
+ * their email to copy, and what you can do with them.
+ */
+const chip = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    maxWidth: "100%",
+    minWidth: "0",
+    height: "workspace.avatar",
+    color: "fg.primary",
+    fontFamily: "sans",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    whiteSpace: "nowrap",
+    // A table cell's chip: a row's height, a smaller avatar.
+    "&[data-size=compact]": {
+        gap: "control.iconGap",
+        height: "avatar.row",
+        fontSize: "caption",
+    },
+});
+const person = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "inherit",
+    minWidth: "0",
+    maxWidth: "100%",
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    color: "inherit",
+    font: "inherit",
+    letterSpacing: "inherit",
+    textDecoration: "none",
+    "&:is(button, a)": {
+        cursor: "pointer",
+        _hover: { "& > [data-name], &[data-name]": { textDecoration: "underline" } },
+    },
+    _focusVisible: { focusRing: "outer" },
+});
+// The detail gives way first, then the name truncates.
+const nameText = css({ minWidth: "0", overflow: "hidden", textOverflow: "ellipsis" });
+const detailText = css({
+    flexShrink: "2",
+    minWidth: "0",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    color: "fg.muted",
+    fontSize: "code",
+});
+const actionButton = css({
+    flexShrink: "0",
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    color: "accent.brand",
+    font: "inherit",
+    cursor: "pointer",
+    _hover: { textDecoration: "underline" },
+    _focusVisible: { focusRing: "outer" },
+    _disabled: { cursor: "default", opacity: "disabled", textDecoration: "none" },
+});
+/* The card: flush sections like a menu's, its actions as rows under a hairline. */
+const card = css({
+    display: "grid",
+    minWidth: "overlay.menu",
+    maxWidth: "min(token(sizes.overlay.tooltip), calc(100vw - token(spacing.layout.pageGap) * 2))",
+    color: "fg.primary",
+    fontSize: "caption",
+    fontWeight: "regular",
+    lineHeight: "compact",
+    letterSpacing: "compact",
+    whiteSpace: "normal",
+});
+// The avatar's column, then everything about them in one column beside it.
+const cardHeader = css({
+    display: "grid",
+    gridTemplateColumns: "auto minmax(0, 1fr)",
+    alignItems: "center",
+    columnGap: "layout.controlGap",
+    rowGap: "control.compactBlock",
+    paddingInline: "control.compactInline",
+    paddingBlock: "control.compactInline",
+});
+const cardName = css({
+    display: "grid",
+    minWidth: "0",
+    fontSize: "body",
+    fontWeight: "medium",
+    "& > *": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+});
+const cardMuted = css({ color: "fg.muted", fontSize: "caption", fontWeight: "regular" });
+const emailRow = css({
+    gridColumn: "2",
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    marginBlock: "calc(token(spacing.layout.tightGap) * -1)",
+    color: "fg.secondary",
+    "& > span": { flex: "1", minWidth: "0", overflow: "hidden", textOverflow: "ellipsis" },
+});
+const cardActions = css({
+    display: "grid",
+    paddingBlock: "menu.inset",
+    borderTop: "1px solid token(colors.border.subtle)",
+});
+const cardAction = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    minHeight: "menu.item",
+    paddingInline: "control.compactInline",
+    border: "0",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
+    textAlign: "start",
+    cursor: "pointer",
+    outline: "none",
+    "& > svg": { color: "fg.muted" },
+    "&:hover, &:focus-visible": { background: "bg.rowHover" },
+    _disabled: { opacity: "disabled", cursor: "not-allowed" },
+});
+/** The name's element: a link where it leads somewhere, a button where it only opens the card. */
+function nameElement({ href, renderLink }, props, opensCard) {
+    const shared = { ...props, "data-profile-trigger": opensCard ? "" : undefined };
+    if (renderLink)
+        return cloneElement(renderLink, shared);
+    if (href !== undefined)
+        return _jsx("a", { href: href, ...shared });
+    return opensCard ? _jsx("button", { type: "button", ...shared }) : _jsx("span", { ...shared });
+}
+export function UserChip({ name, kind = "user", src, icon, detail, action, profile, size = "regular", href, renderLink, className, ...props }) {
+    const who = (_jsxs(_Fragment, { children: [_jsx(Avatar, { label: name, kind: kind, src: src, icon: icon, size: size === "compact" ? "small" : "row", "aria-hidden": "true" }), _jsx("span", { className: nameText, "data-name": "", children: name }), detail && _jsx("span", { className: detailText, children: detail })] }));
+    return (_jsxs("span", { ...props, className: cx(chip, className), "data-size": size, "data-ciridae-ui": "", children: [profile ? (_jsx(ProfilePopover, { who: { name, kind, src, icon }, profile: profile, trigger: nameElement({ href, renderLink }, { className: person, children: who }, true) })) : (nameElement({ href, renderLink }, { className: person, children: who }, false)), action && (_jsx("button", { type: "button", className: actionButton, disabled: action.disabled, onClick: action.onClick, children: action.label }))] }));
+}
+/** Just the name, opening the same profile card when there is one: an author under a message. */
+export function UserName({ profile, href, renderLink, ...who }) {
+    const name = nameElement({ href, renderLink }, { className: person, children: who.name, "data-name": "" }, profile !== undefined);
+    if (!profile)
+        return name;
+    return _jsx(ProfilePopover, { who: who, profile: profile, trigger: name });
+}
+function ProfilePopover({ who, profile, trigger, }) {
+    return (_jsx(Popover, { trigger: trigger, openOnHover: true, density: "flush", children: _jsxs("div", { className: card, children: [_jsxs("div", { className: cardHeader, children: [_jsx(Avatar, { label: who.name, kind: who.kind, src: who.src, icon: who.icon, size: "medium", "aria-hidden": "true" }), _jsxs("span", { className: cardName, children: [_jsx("span", { children: who.name }), profile.title && _jsx("span", { className: cardMuted, children: profile.title })] }), profile.email && _jsx(EmailRow, { email: profile.email })] }), profile.actions && profile.actions.length > 0 && (_jsx("div", { className: cardActions, children: profile.actions.map((action) => (_jsxs("button", { type: "button", className: cardAction, disabled: action.disabled, onClick: action.onClick, children: [action.icon, action.label] }, action.label))) }))] }) }));
+}
+function EmailRow({ email }) {
+    const { copied, copy } = useCopy(email);
+    const { labels } = useCiridaeLocale();
+    const Mark = copied ? CheckIcon : CopyIcon;
+    return (_jsxs("div", { className: emailRow, children: [_jsx("span", { title: email, children: email }), _jsx(IconButton, { "aria-label": labels.userChip.copyEmail, variant: "ghost", size: "compact", onClick: copy, children: _jsx(Mark, { className: iconStyle({ size: "small" }) }) })] }));
+}
+/**
+ * A participant as a `UserChip` whose name opens their profile card: their title and email, and
+ * `actions`. `href` or `renderLink` makes the name lead to their page as well.
+ */
+export function ParticipantChip({ participant, actions, ...chipProps }) {
+    return (_jsx(UserChip, { ...chipProps, name: participant.name, kind: participant.kind, src: participant.src, profile: { title: participant.title, email: participant.email || undefined, actions } }));
+}

package/dist/components/wizard.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentProps, type ReactNode } from "react";
+/**
+ * A multi-step flow shown one step at a time. Each step slides in from the right as the flow
+ * advances and from the left as it goes back; the direction comes from comparing `step` with the
+ * step shown before it. `steps` labels each step for the progress bar and assistive technology.
+ */
+export declare function Wizard({ step, steps, progress, showProgress, state, children, className, ...props }: ComponentProps<"div"> & {
+    /** Index of the step on screen. */
+    step: number;
+    steps: readonly string[];
+    /**
+     * Which of `steps` the progress bar shows as reached, when it differs from `step`: a detour,
+     * such as a guide opened from one step, slides like a step but does not advance the flow.
+     */
+    progress?: number;
+    /** Hide the stepper without losing step transitions. Results always hide it. */
+    showProgress?: boolean;
+    /** Results skip the step slide and center in a Dialog body, without inheriting earlier steps' height. */
+    state?: "step" | "result";
+    /** The current step's content. */
+    children: ReactNode;
+}): import("@types/react").JSX.Element;
+/** The end of a wizard: what happened, and what the reader can do next. */
+export declare function WizardResult({ variant, icon: mark, title, description, children, }: {
+    /** `progress` is the wait before an outcome, such as a sign-in still open in another tab. */
+    variant: "success" | "failure" | "progress";
+    /** The entity involved; the outcome remains visible as a status badge. */
+    icon?: ReactNode;
+    title: string;
+    description?: string;
+    /** Actions, such as opening what was made or trying again. */
+    children?: ReactNode;
+}): import("@types/react").JSX.Element;

package/dist/components/wizard.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon, SpinnerGapIcon, WarningCircleIcon } from "@phosphor-icons/react";
+import { useContext, useLayoutEffect, useState } from "react";
+import { css, cx } from "#primitives/css";
+import { DialogHeightResetContext } from "./dialog-height-context.js";
+import { icon, spinning } from "./icon.js";
+import { Heading } from "./layout.js";
+const wizard = css({ display: "grid", gap: "layout.contentGap", minWidth: "0" });
+const progressBar = css({ display: "flex", gap: "layout.tightGap" });
+const segment = css({
+    flex: "1",
+    height: "progress.segment",
+    borderRadius: "round",
+    background: "border.subtle",
+    transitionProperty: "background",
+    transitionDuration: "default",
+    "&[data-reached]": { background: "fg.primary" },
+});
+// Clips the sliding steps, with room for a field's focus ring.
+const viewport = css({ overflow: "hidden", minWidth: "0", ringRoom: true });
+const panel = css({
+    display: "grid",
+    gap: "layout.contentGap",
+    minWidth: "0",
+    animationDuration: "fast",
+    animationTimingFunction: "ease-out",
+    animationFillMode: "both",
+    "&[data-direction=forward]": { animationName: "wizardEnterForward" },
+    "&[data-direction=back]": { animationName: "wizardEnterBack" },
+    _motionReduce: { animationName: "none!" },
+});
+const result = css({
+    display: "grid",
+    justifyItems: "center",
+    gap: "layout.controlGap",
+    paddingBlock: "layout.sectionGap",
+    textAlign: "center",
+    animationName: "wizardResultIn",
+    animationDuration: "fast",
+    animationTimingFunction: "ease-out",
+    _motionReduce: { animation: "none" },
+});
+const resultIcon = css({
+    "&[data-variant=success]": { color: "accent.green" },
+    "&[data-variant=failure]": { color: "accent.red" },
+    "&[data-variant=progress]": { color: "accent.blue" },
+});
+// An entity mark remains the focus; the smaller badge still communicates the outcome.
+const resultMark = css({ display: "inline-flex", position: "relative" });
+const resultBadge = css({
+    position: "absolute",
+    insetInlineEnd: "calc(token(spacing.layout.tightGap) * -1)",
+    bottom: "calc(token(spacing.layout.tightGap) * -1)",
+    background: "bg.card",
+    borderRadius: "round",
+});
+const resultDescription = css({ margin: "none", color: "fg.muted", fontSize: "caption" });
+const resultActions = css({
+    display: "flex",
+    gap: "layout.controlGap",
+    marginTop: "layout.tightGap",
+});
+/**
+ * A multi-step flow shown one step at a time. Each step slides in from the right as the flow
+ * advances and from the left as it goes back; the direction comes from comparing `step` with the
+ * step shown before it. `steps` labels each step for the progress bar and assistive technology.
+ */
+export function Wizard({ step, steps, progress = step, showProgress = true, state = "step", children, className, ...props }) {
+    const resetDialogHeight = useContext(DialogHeightResetContext);
+    useLayoutEffect(() => {
+        resetDialogHeight?.();
+    }, [step, state, resetDialogHeight]);
+    // The step shown on the previous render, so a change of `step` knows which way it went.
+    const [previousStep, setPreviousStep] = useState(step);
+    const [direction, setDirection] = useState("none");
+    if (previousStep !== step) {
+        setPreviousStep(step);
+        setDirection(step > previousStep ? "forward" : "back");
+    }
+    return (_jsxs("div", { ...props, className: cx(wizard, className), "data-ciridae-ui": "", "data-wizard-state": state, children: [showProgress && state !== "result" && steps.length > 1 && (_jsx("div", { className: progressBar, role: "progressbar", "aria-valuemin": 1, "aria-valuemax": steps.length, "aria-valuenow": Math.min(progress + 1, steps.length), "aria-valuetext": steps[progress], children: steps.map((_label, index) => (_jsx("span", { className: segment, "data-reached": index <= progress ? "" : undefined }, index))) })), _jsx("div", { className: viewport, children: _jsx("div", { className: panel, "data-direction": state === "result" ? undefined : direction, children: children }, step) })] }));
+}
+/** The end of a wizard: what happened, and what the reader can do next. */
+export function WizardResult({ variant, icon: mark, title, description, children, }) {
+    const Icon = variant === "success"
+        ? CheckCircleIcon
+        : variant === "failure"
+            ? WarningCircleIcon
+            : SpinnerGapIcon;
+    const statusIcon = (_jsx(Icon, { className: cx(resultIcon, icon({ size: mark ? "medium" : "large" }), mark ? resultBadge : undefined, variant === "progress" && spinning), "data-variant": variant, weight: variant === "progress" ? "bold" : "fill", "aria-hidden": "true" }));
+    return (_jsxs("div", { className: result, role: variant === "failure" ? "alert" : "status", children: [mark ? (_jsxs("span", { className: resultMark, "aria-hidden": "true", children: [mark, statusIcon] })) : (statusIcon), _jsx(Heading, { level: 3, children: title }), description && _jsx("p", { className: resultDescription, children: description }), children && _jsx("div", { className: resultActions, children: children })] }));
+}

package/dist/feedback/client.d.ts

@@ -0,0 +1,37 @@
+import { type FeedbackCreateInput, type FeedbackErrorCode, type FeedbackItem, type FeedbackMessage, type FeedbackSummary, type FeedbackUpdateInput } from "./contract.js";
+type FeedbackClientConfig = {
+    baseUrl: string;
+    getBearerToken: () => Promise<string>;
+};
+type FeedbackClientErrorCode = FeedbackErrorCode | "feedback_invalid_response" | "feedback_request_failed";
+type FeedbackCreateOptions = {
+    idempotencyKey?: string;
+    files?: File[];
+};
+type FeedbackReadOptions = {
+    signal?: AbortSignal;
+};
+declare class FeedbackApiError extends Error {
+    readonly code: FeedbackClientErrorCode;
+    readonly status: number;
+    readonly errorId: string | null;
+    constructor(message: string, options: {
+        code: FeedbackClientErrorCode;
+        status: number;
+        errorId?: string | null;
+    });
+}
+declare class FeedbackClient {
+    #private;
+    readonly baseUrl: string;
+    constructor(config: FeedbackClientConfig);
+    create(input: FeedbackCreateInput, options?: FeedbackCreateOptions): Promise<FeedbackItem>;
+    getAttachmentUrl(feedbackId: string, attachmentId: string): Promise<string>;
+    list(options?: FeedbackReadOptions): Promise<FeedbackSummary[]>;
+    get(feedbackId: string, options?: FeedbackReadOptions): Promise<FeedbackItem>;
+    update(feedbackId: string, input: FeedbackUpdateInput): Promise<FeedbackItem>;
+    withdraw(feedbackId: string): Promise<FeedbackItem>;
+    createMessage(feedbackId: string, body: string): Promise<FeedbackMessage>;
+}
+declare function createFeedbackClient(config: FeedbackClientConfig): FeedbackClient;
+export { createFeedbackClient, FeedbackApiError, FeedbackClient, type FeedbackClientConfig, type FeedbackClientErrorCode, type FeedbackCreateOptions, type FeedbackReadOptions, };

package/dist/feedback/client.js

@@ -0,0 +1,125 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _FeedbackClient_instances, _FeedbackClient_basePath, _FeedbackClient_getBearerToken, _FeedbackClient_request;
+import { feedbackErrorResponseSchema, feedbackItemSchema, feedbackListResponseSchema, feedbackMessageSchema, } from "./contract.js";
+import { getResponseErrorId } from "./get-response-error-id.js";
+import { requireConfig } from "./require-config.js";
+class FeedbackApiError extends Error {
+    constructor(message, options) {
+        super(message);
+        this.name = "FeedbackApiError";
+        this.code = options.code;
+        this.status = options.status;
+        this.errorId = options.errorId ?? null;
+    }
+}
+class FeedbackClient {
+    constructor(config) {
+        _FeedbackClient_instances.add(this);
+        _FeedbackClient_basePath.set(this, void 0);
+        _FeedbackClient_getBearerToken.set(this, void 0);
+        this.baseUrl = requireConfig(config.baseUrl, "baseUrl").replace(/\/$/, "");
+        __classPrivateFieldSet(this, _FeedbackClient_basePath, `${this.baseUrl}/feedback`, "f");
+        __classPrivateFieldSet(this, _FeedbackClient_getBearerToken, config.getBearerToken, "f");
+    }
+    async create(input, options) {
+        let form;
+        if (options?.files?.length) {
+            form = new FormData();
+            form.append("feedback", JSON.stringify(input));
+            for (const file of options.files)
+                form.append("files", file);
+        }
+        return __classPrivateFieldGet(this, _FeedbackClient_instances, "m", _FeedbackClient_request).call(this, "/", feedbackItemSchema, {
+            body: form ? undefined : input,
+            form,
+            headers: { "Idempotency-Key": options?.idempotencyKey ?? crypto.randomUUID() },
+            method: "POST",
+        });
+    }
+    async getAttachmentUrl(feedbackId, attachmentId) {
+        const item = await this.get(feedbackId);
+        const url = item.attachments?.find((file) => file.id === attachmentId)?.url;
+        if (!url)
+            throw new Error("File download is unavailable.");
+        return url;
+    }
+    async list(options) {
+        const response = await __classPrivateFieldGet(this, _FeedbackClient_instances, "m", _FeedbackClient_request).call(this, "/", feedbackListResponseSchema, options);
+        return response.items;
+    }
+    async get(feedbackId, options) {
+        return __classPrivateFieldGet(this, _FeedbackClient_instances, "m", _FeedbackClient_request).call(this, `/${encodeURIComponent(feedbackId)}`, feedbackItemSchema, options);
+    }
+    async update(feedbackId, input) {
+        return __classPrivateFieldGet(this, _FeedbackClient_instances, "m", _FeedbackClient_request).call(this, `/${encodeURIComponent(feedbackId)}`, feedbackItemSchema, {
+            body: input,
+            method: "PATCH",
+        });
+    }
+    async withdraw(feedbackId) {
+        return __classPrivateFieldGet(this, _FeedbackClient_instances, "m", _FeedbackClient_request).call(this, `/${encodeURIComponent(feedbackId)}/withdraw`, feedbackItemSchema, {
+            method: "POST",
+        });
+    }
+    async createMessage(feedbackId, body) {
+        return __classPrivateFieldGet(this, _FeedbackClient_instances, "m", _FeedbackClient_request).call(this, `/${encodeURIComponent(feedbackId)}/messages`, feedbackMessageSchema, {
+            body: { body },
+            method: "POST",
+        });
+    }
+}
+_FeedbackClient_basePath = new WeakMap(), _FeedbackClient_getBearerToken = new WeakMap(), _FeedbackClient_instances = new WeakSet(), _FeedbackClient_request = async function _FeedbackClient_request(path, schema, options) {
+    const bearer = await __classPrivateFieldGet(this, _FeedbackClient_getBearerToken, "f").call(this);
+    const response = await fetch(`${__classPrivateFieldGet(this, _FeedbackClient_basePath, "f")}${path}`, {
+        body: options?.form ?? (options?.body ? JSON.stringify(options.body) : undefined),
+        headers: {
+            Authorization: `Bearer ${bearer}`,
+            ...(options?.body ? { "Content-Type": "application/json" } : {}),
+            ...options?.headers,
+        },
+        method: options?.method ?? "GET",
+        signal: options?.signal,
+    });
+    const payload = await response.json().catch(() => undefined);
+    if (!response.ok)
+        throw parseFeedbackApiError(response, payload);
+    const parsed = schema.safeParse(payload);
+    if (!parsed.success) {
+        throw new FeedbackApiError("Feedback returned an invalid response.", {
+            code: "feedback_invalid_response",
+            status: response.status,
+            errorId: getResponseErrorId(response),
+        });
+    }
+    return parsed.data;
+};
+function createFeedbackClient(config) {
+    return new FeedbackClient(config);
+}
+function parseFeedbackApiError(response, payload) {
+    const errorId = getResponseErrorId(response);
+    const parsed = feedbackErrorResponseSchema.safeParse(payload);
+    if (parsed.success) {
+        return new FeedbackApiError(parsed.data.detail.detail, {
+            code: parsed.data.detail.code,
+            status: response.status,
+            errorId,
+        });
+    }
+    return new FeedbackApiError("Feedback request failed.", {
+        code: "feedback_request_failed",
+        status: response.status,
+        errorId,
+    });
+}
+export { createFeedbackClient, FeedbackApiError, FeedbackClient, };

package/dist/feedback/comment-types.d.ts

@@ -0,0 +1,17 @@
+type CommentAuthor = {
+    avatarUrl?: string;
+    email?: string;
+    id: string;
+    name: string;
+};
+type CommentStatus = "sent" | "sending" | "failed";
+/** A feedback thread message in the shape a comment list renders. */
+type CommentItemData = {
+    author: CommentAuthor;
+    body: string;
+    createdAt: string;
+    id: string;
+    status?: CommentStatus;
+    updatedAt?: string;
+};
+export type { CommentAuthor, CommentItemData, CommentStatus };