@ciridae/ui 0.16.1 → 1.0.1

package/dist/components/environment-frame.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cx } from "#primitives/css";
+import { useCiridaeLocale } from "./locale.js";
+import { SiteBanner } from "./site-banner.js";
+const frame = css({
+    display: "flex",
+    flexDirection: "column",
+    height: "100dvh",
+    width: "100%",
+});
+const environmentBanner = css({
+    // Align with the outer edges of the sidebar controls, not their inset labels.
+    paddingInlineStart: "calc(token(spacing.panel.compact) + token(spacing.panel.default))",
+    _phone: { paddingInlineStart: "panel.default" },
+});
+const viewport = css({
+    flex: "1",
+    minHeight: "0",
+    overflow: "hidden",
+    background: "bg.canvas",
+    // Only under the environment strip does the app read as inset below it.
+    "&[data-under-banner]": {
+        borderTopRadius: "field",
+        boxShadow: "inset 0 2px 4px rgba(0, 0, 0, 0.18)",
+    },
+    // Keep the shell and its phone layout within the space below the site banner.
+    "& > [data-ciridae-ui]": { height: "100%", background: "transparent" },
+    "& > [data-ciridae-ui] > main": {
+        height: "100%",
+        borderRadius: "inset",
+        _phone: { borderRadius: "0" },
+    },
+    "& > [data-ciridae-ui] > main > header": {
+        paddingInlineStart: "page.inline",
+        _phone: { paddingInlineStart: "panel.default" },
+    },
+});
+/** A persistent environment strip and an inset AppShell viewport. */
+export function EnvironmentFrame({ label, tone = "info", children, className, ...props }) {
+    const { labels } = useCiridaeLocale();
+    return (_jsxs("div", { ...props, className: cx(frame, className), children: [label !== undefined && (_jsx(SiteBanner, { className: environmentBanner, tone: tone, children: typeof label === "string" ? labels.shell.environment(label) : label })), _jsx("div", { className: viewport, "data-under-banner": label !== undefined || undefined, children: children })] }));
+}

package/dist/components/expandable-text.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+/**
+ * Text held to two lines, with "Expand" to open it when it does not fit and "Collapse" to close
+ * it again. Shorter text shows as is.
+ */
+export declare function ExpandableText({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("@types/react").JSX.Element;

package/dist/components/expandable-text.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { css, cx } from "#primitives/css";
+import { useCiridaeLocale } from "./locale.js";
+// Collapsed, "Expand" sits at the end of the last line; open, "Collapse" follows the text.
+const collapsedWrapper = css({
+    display: "flex",
+    alignItems: "flex-end",
+    gap: "layout.tightGap",
+    minWidth: "0",
+});
+const expandedWrapper = css({ display: "grid", justifyItems: "start", minWidth: "0" });
+const clamped = css({ lineClamp: "2", minWidth: "0" });
+const toggle = css({
+    padding: "0",
+    border: "0",
+    background: "transparent",
+    color: "inherit",
+    font: "inherit",
+    textDecoration: "underline",
+    whiteSpace: "nowrap",
+    flexShrink: "0",
+    cursor: "pointer",
+    _hover: { color: "fg.primary" },
+});
+/**
+ * Text held to two lines, with "Expand" to open it when it does not fit and "Collapse" to close
+ * it again. Shorter text shows as is.
+ */
+export function ExpandableText({ children, className, }) {
+    const textRef = useRef(null);
+    const [expanded, setExpanded] = useState(false);
+    const [overflowing, setOverflowing] = useState(false);
+    const { labels } = useCiridaeLocale();
+    useLayoutEffect(() => {
+        const text = textRef.current;
+        if (!text || expanded)
+            return;
+        // Tight line heights let glyphs spill a pixel or two past the clamp, so only a hidden line
+        // (at least half of one) counts as overflow.
+        const measure = () => setOverflowing(text.scrollHeight - text.clientHeight > parseFloat(getComputedStyle(text).lineHeight) / 2);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(text);
+        return () => observer.disconnect();
+    }, [children, expanded]);
+    return (_jsxs("span", { className: cx(expanded ? expandedWrapper : collapsedWrapper, className), children: [_jsx("span", { ref: textRef, className: expanded ? undefined : clamped, children: children }), (overflowing || expanded) && (_jsx("button", { type: "button", className: toggle, onClick: () => setExpanded(!expanded), children: expanded ? labels.common.collapse : labels.common.expand }))] }));
+}

package/dist/components/feedback-screenshot.d.ts

@@ -0,0 +1,19 @@
+/** A spot on the screenshot, as fractions of its width and height, and what it points at. */
+export type FeedbackScreenshotPointer = {
+    x: number;
+    y: number;
+    note: string;
+};
+/** A pointer while the form holds it; `id` keeps its note field across removals. */
+export type PlacedScreenshotPointer = FeedbackScreenshotPointer & {
+    id: string;
+};
+/** The most pointers one screenshot takes. */
+export declare const MAX_SCREENSHOT_POINTERS = 7;
+/** The thumbnail beside "Include a screenshot", and the dialog it opens to annotate it. */
+export declare function FeedbackScreenshot({ src, pointers, onPointersChange, disabled, }: {
+    src: string;
+    pointers: readonly PlacedScreenshotPointer[];
+    onPointersChange: (pointers: readonly PlacedScreenshotPointer[]) => void;
+    disabled?: boolean;
+}): import("@types/react").JSX.Element;

package/dist/components/feedback-screenshot.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * The feedback form's screenshot: a thumbnail that opens a dialog where clicking the image drops a
+ * numbered pointer, each with a note. Pointers sit at fractions of the image's width and height,
+ * so they land on the same spot at any size.
+ */
+import { XIcon } from "@phosphor-icons/react";
+import { useRef, useState } from "react";
+import { css } from "#primitives/css";
+import { Button, IconButton } from "./button.js";
+import { icon } from "./icon.js";
+import { Input } from "./input.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Dialog } from "./overlays.js";
+/** The most pointers one screenshot takes. */
+export const MAX_SCREENSHOT_POINTERS = 7;
+/* The image and its pointers share one box, so a pointer's percentages are the image's. */
+const stage = css({
+    position: "relative",
+    justifySelf: "center",
+    width: "fit-content",
+    maxWidth: "100%",
+    overflow: "hidden",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "control",
+    background: "bg.field",
+});
+const stageButton = css({
+    display: "block",
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    cursor: "crosshair",
+    "&[data-full]": { cursor: "default" },
+    _focusVisible: { focusRing: "inset" },
+    "& img": { display: "block", maxWidth: "100%", maxHeight: "56dvh" },
+});
+/* A pointer's number: on the image, and again before its note. */
+const pointerNumber = css.raw({
+    display: "grid",
+    placeItems: "center",
+    width: "control.mark",
+    height: "control.mark",
+    borderRadius: "round",
+    background: "accent.brand",
+    color: "fg.onAccent",
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    fontVariantNumeric: "tabular-nums",
+});
+const pointerMark = css(pointerNumber, {
+    position: "absolute",
+    transform: "translate(-50%, -50%)",
+    cursor: "grab",
+    touchAction: "none",
+    userSelect: "none",
+    "&:active": { cursor: "grabbing" },
+});
+const pointerBadge = css(pointerNumber);
+const pointerList = css({
+    display: "grid",
+    gap: "layout.controlGap",
+    margin: "none",
+    padding: "none",
+    listStyle: "none",
+});
+const pointerRow = css({
+    display: "grid",
+    gridTemplateColumns: "auto minmax(0, 1fr) auto",
+    alignItems: "center",
+    gap: "layout.controlGap",
+});
+const thumbnail = css({
+    position: "relative",
+    flexShrink: "0",
+    width: "96px",
+    padding: "none",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "keycap",
+    background: "bg.field",
+    cursor: "pointer",
+    _focusVisible: { focusRing: "outer" },
+    _disabled: { opacity: "disabled", cursor: "not-allowed" },
+    "& img": { display: "block", width: "100%", height: "auto", borderRadius: "keycap" },
+});
+const thumbnailDot = css({
+    position: "absolute",
+    width: "indicator.live",
+    height: "indicator.live",
+    borderRadius: "round",
+    background: "accent.brand",
+    transform: "translate(-50%, -50%)",
+});
+const thumbnailCount = css({
+    position: "absolute",
+    top: "calc(token(spacing.layout.tightGap) * -1)",
+    insetInlineEnd: "calc(token(spacing.layout.tightGap) * -1)",
+    display: "grid",
+    placeItems: "center",
+    minWidth: "indicator.count",
+    height: "indicator.count",
+    paddingInline: "layout.tightGap",
+    borderRadius: "round",
+    background: "accent.brand",
+    color: "fg.onAccent",
+    fontSize: "avatar.small",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    fontVariantNumeric: "tabular-nums",
+});
+function placeAt(pointer) {
+    return { left: `${pointer.x * 100}%`, top: `${pointer.y * 100}%` };
+}
+/** The thumbnail beside "Include a screenshot", and the dialog it opens to annotate it. */
+export function FeedbackScreenshot({ src, pointers, onPointersChange, disabled, }) {
+    const { labels: allLabels } = useCiridaeLocale();
+    const labels = allLabels.feedback;
+    const common = allLabels.common;
+    const [open, setOpen] = useState(false);
+    const focusPointerId = useRef(null);
+    const image = useRef(null);
+    const full = pointers.length >= MAX_SCREENSHOT_POINTERS;
+    /** Where a client point sits on the image, as fractions kept inside it. */
+    const pointAt = ({ clientX, clientY }) => {
+        const box = image.current?.getBoundingClientRect();
+        if (!box)
+            return { x: 0.5, y: 0.5 };
+        const fraction = (offset, length) => Math.min(1, Math.max(0, offset / length));
+        return {
+            x: fraction(clientX - box.left, box.width),
+            y: fraction(clientY - box.top, box.height),
+        };
+    };
+    const drop = (event) => {
+        // A keyboard press has no position, so its pointer starts at the center.
+        const at = event.detail === 0 ? { x: 0.5, y: 0.5 } : pointAt(event);
+        // A pointer with no note yet moves to the click rather than leaving a blank one behind.
+        const empty = [...pointers].reverse().find((pointer) => !pointer.note.trim());
+        if (!empty && full)
+            return;
+        focusPointerId.current = empty?.id ?? crypto.randomUUID();
+        onPointersChange(empty
+            ? pointers.map((pointer) => (pointer === empty ? { ...pointer, ...at } : pointer))
+            : [...pointers, { id: focusPointerId.current, ...at, note: "" }]);
+    };
+    const change = (id, note) => onPointersChange(pointers.map((pointer) => (pointer.id === id ? { ...pointer, note } : pointer)));
+    // Dragging a pointer on the image moves it; the capture keeps it following off the image.
+    const drag = (id, event) => {
+        if (!event.currentTarget.hasPointerCapture(event.pointerId))
+            return;
+        const at = pointAt(event);
+        onPointersChange(pointers.map((pointer) => (pointer.id === id ? { ...pointer, ...at } : pointer)));
+    };
+    const remove = (id) => onPointersChange(pointers.filter((pointer) => pointer.id !== id));
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: thumbnail, "aria-label": pointers.length ? labels.annotateCount(pointers.length) : labels.annotate, disabled: disabled, onClick: () => setOpen(true), children: [_jsx("img", { src: src, alt: "" }), pointers.map((pointer) => (_jsx("span", { className: thumbnailDot, style: placeAt(pointer) }, pointer.id))), pointers.length > 0 && _jsx("span", { className: thumbnailCount, children: pointers.length })] }), _jsxs(Dialog, { open: open, onOpenChange: setOpen, title: labels.annotate, kind: "info", size: "wide", actions: _jsx(Button, { onClick: () => setOpen(false), children: common.done }), children: [_jsxs("div", { className: stage, children: [_jsx("button", { type: "button", ref: image, className: stageButton, "aria-label": labels.addPointer, "data-full": (full && pointers.every((pointer) => pointer.note.trim())) || undefined, onClick: drop, children: _jsx("img", { src: src, alt: labels.screenshot }) }), pointers.map((pointer, index) => (_jsx("span", { className: pointerMark, style: placeAt(pointer), "aria-hidden": "true", onPointerDown: (event) => event.currentTarget.setPointerCapture(event.pointerId), onPointerMove: (event) => drag(pointer.id, event), children: index + 1 }, pointer.id)))] }), pointers.length > 0 && (_jsx("ol", { className: pointerList, children: pointers.map((pointer, index) => (_jsxs("li", { className: pointerRow, children: [_jsx("span", { className: pointerBadge, "aria-hidden": "true", children: index + 1 }), _jsx(Input, { ref: (element) => {
+                                        if (element && focusPointerId.current === pointer.id) {
+                                            element.focus();
+                                            focusPointerId.current = null;
+                                        }
+                                    }, "aria-label": labels.pointerNote(index + 1), value: pointer.note, onChange: (event) => change(pointer.id, event.target.value) }), _jsx(IconButton, { "aria-label": labels.removePointer(index + 1), variant: "ghost", size: "small", onClick: () => remove(pointer.id), children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] }, pointer.id))) }))] })] }));
+}

package/dist/components/feedback-sheet.d.ts

@@ -0,0 +1,80 @@
+import { type ReactNode } from "react";
+import { type FeedbackItem, type FeedbackSummary } from "../feedback/contract.js";
+import { type FeedbackScreenshotPointer } from "./feedback-screenshot.js";
+import { type CiridaeLabels } from "./locale.js";
+export type FeedbackKind = "wrong" | "idea" | "question";
+export type FeedbackSheetValues = {
+    kind: FeedbackKind;
+    whatHappened: string;
+    includeScreenshot: boolean;
+    /** Pointers on the screenshot, in order; empty when it is not included. */
+    annotations: FeedbackScreenshotPointer[];
+    /** Files to upload with the feedback, within `feedbackAttachmentLimits`. */
+    attachments: File[];
+};
+export type { FeedbackScreenshotPointer };
+/** The record or page the feedback is about, filled into "Where". */
+export type FeedbackWhere = {
+    label: string;
+    detail?: string;
+    /** The page's address, shown under the label so the team knows exactly where it was sent from. */
+    href?: string;
+    /** Before the label; a page icon when omitted. */
+    icon?: ReactNode;
+};
+export type FeedbackLabels = CiridaeLabels["feedback"];
+/**
+ * The description to file: what happened, then each screenshot pointer's note, numbered, with
+ * where it sits on the image, for a backend that takes no annotations of its own.
+ */
+export declare function formatFeedbackDescription({ whatHappened, annotations }: FeedbackSheetValues): string;
+export type FeedbackFormProps = {
+    where: FeedbackWhere;
+    /** The page as the person sees it, as an image or data URL, to include and annotate. */
+    screenshot?: string;
+    /** Sends the feedback; rejecting shows the failed state with the message kept for a retry. */
+    onSubmit: (values: FeedbackSheetValues) => Promise<{
+        reference: string;
+    }>;
+    /** Under a failed notice's copy, such as the request's error ID. */
+    errorDetail?: (error: unknown) => ReactNode;
+    /** Cancel and Done. */
+    onClose: () => void;
+};
+/** The sheet's form, body and footer, for a `Drawer` that holds more than the form. */
+export declare function FeedbackForm({ where: about, screenshot, onSubmit, errorDetail, onClose, }: FeedbackFormProps): import("@types/react").JSX.Element;
+/** Something the caller loads for the sheet: in flight, failed with a way to try again, or here. */
+export type FeedbackLoadState<Data> = {
+    status: "loading";
+} | {
+    status: "error";
+    error: unknown;
+    retry: () => void;
+} | {
+    status: "loaded";
+    data: Data;
+};
+export type FeedbackSentProps = {
+    /** Everything the person filed, newest first. */
+    items: FeedbackLoadState<readonly FeedbackSummary[]>;
+    /** Loads the item into `item`; the sheet shows it once the ids match. */
+    onOpenItem: (feedbackId: string) => void;
+    /** The detail of the item last opened. */
+    item?: FeedbackLoadState<FeedbackItem>;
+    /** Resolves once `item` carries the reply; rejecting keeps the reply in the composer. */
+    onReply: (feedbackId: string, body: string) => Promise<void>;
+    /** Resolves once `item` is withdrawn. */
+    onWithdraw: (feedbackId: string) => Promise<void>;
+};
+export type FeedbackSheetProps = Omit<FeedbackFormProps, "onClose"> & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Controls in the sheet's header, before the close button. */
+    actions?: ReactNode;
+    /** The Sent tab; without it the sheet is the form alone. */
+    sent?: FeedbackSentProps;
+    /** Rewords the sheet's labels over the locale's. */
+    labels?: Partial<FeedbackLabels>;
+};
+/** The floating feedback sheet. Closing it drops the draft and the open item. */
+export declare function FeedbackSheet({ labels, ...props }: FeedbackSheetProps): import("@types/react").JSX.Element;