@crewlethq/ui 0.2.0 → 0.4.0

package/dist/CalendarGrid-V6TQ5QKS.css

@@ -0,0 +1,128 @@
+/*
+ * The month grid, shared by every picker.
+ *
+ * Seven equal columns, drawn as a grid rather than a wrapped row of buttons,
+ * so a week is a row a reader can move along and a day sits in one. The cells
+ * are spans with grid roles rather than buttons: a button inside a gridcell
+ * is two focusable things where the pattern has one, and the roving tabindex
+ * is what makes the month a single tab stop.
+ */
+
+.crewlet-calendar {
+  display: grid;
+  gap: 1px;
+  user-select: none;
+}
+
+.crewlet-calendar__weekdays,
+.crewlet-calendar__week {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1px;
+}
+
+.crewlet-calendar__weekday {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--size-row-sm);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-calendar__day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Never under the 24px target floor, at any density. */
+  min-width: var(--size-control-sm);
+  height: var(--size-control-sm);
+  /* The corner every small row in the package wears: a menu item, a
+     completion, a day. */
+  border-radius: var(--radius-xs);
+  font-size: var(--font-size-compact);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-calendar__day:hover:not(.is-disabled):not(.is-selected):not(.is-blank) {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-calendar__day.is-outside {
+  color: var(--color-text-tertiary);
+}
+
+/* A padding cell holds the column open and nothing else: no day, no tint, and
+   no cursor promising that a press does something. */
+.crewlet-calendar__day.is-blank {
+  cursor: default;
+}
+
+.crewlet-calendar__day.is-disabled {
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+}
+
+/*
+ * TODAY IS A RING, not a fill: the fill means "chosen", and the two are
+ * different facts that are often true of different days.
+ */
+.crewlet-calendar__day.is-today {
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+}
+
+/*
+ * A RANGE IS ONE BAND. The cells sit 1px apart, so a tint on each of them
+ * alone reads as a row of separate squares with the ground showing between.
+ * An OUTLINE in the band's own colour closes that gap on every side, which is
+ * what joins the weeks a multi-week range runs through as well as the days.
+ *
+ * An outline rather than a box-shadow because today's ring is a box-shadow: a
+ * second one on the same element replaces it, and a day that is both today and
+ * inside the chosen range would lose the ring that says which day it is. The
+ * focus ring is an outline too and is declared after this, so it still wins on
+ * the day the keyboard is on.
+ */
+.crewlet-calendar__day.is-in-range {
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+  border-radius: 0;
+  outline: 1px solid var(--color-brand-accent-soft);
+}
+
+.crewlet-calendar__day.is-selected {
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+}
+
+/*
+ * The ends of the band: the chosen day keeps its own fill and its own corner,
+ * and carries the band's colour around it so the chip reads as joined to the
+ * run beside it rather than floating one gap away from it.
+ */
+.crewlet-calendar__day.is-range-start,
+.crewlet-calendar__day.is-range-end {
+  outline: 1px solid var(--color-brand-accent-soft);
+}
+
+/*
+ * The ring is an OUTLINE, drawn INSIDE the cell: the grid is a clipping box
+ * at its edges, so an outset ring on the first or last column is cut off by
+ * it and painted over by the row beneath.
+ */
+.crewlet-calendar__day:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-calendar__day {
+    transition: none;
+  }
+}

package/dist/Callout/Callout.d.ts

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { Tone } from '../utils/tone.js';
+/**
+ * The tones a callout speaks in.
+ *
+ * `brand` is deliberately not one of them. The accent means "where the reader
+ * is", and a banner is never that: an accented strip across a screen claims
+ * the reader's own position for a sentence about the system.
+ */
+export type CalloutVariant = Exclude<Tone, 'brand'>;
+/**
+ * A card in the content flow, or a strip across the surface it heads.
+ *
+ * `banner` is full bleed with no radius and only a bottom border, for the
+ * place a shell puts one: above a screen's content, against the edges, where a
+ * rounded card would leave a gutter of page colour down both sides.
+ */
+export type CalloutLayout = 'card' | 'banner';
+export interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    variant?: CalloutVariant | undefined;
+    /** A bold lead-in before the message. */
+    title?: ReactNode;
+    /** A glyph replacing the variant's own. A component, not a name. */
+    icon?: ReactNode;
+    layout?: CalloutLayout | undefined;
+    /** A control at the trailing edge: "Reconnect", "Open the log", "Dismiss". */
+    action?: ReactNode;
+    /**
+     * Announce this when it appears. OFF by default, which is the change from
+     * 0.2.0: every static banner on a screen was a live region, so a screen
+     * reader arriving at a page read out each of them in turn, and one that had
+     * been on the page for an hour was announced as news. Set it on a callout
+     * that appears IN RESPONSE to something, and use `role="alert"` for the one
+     * that must interrupt.
+     */
+    live?: 'polite' | 'assertive' | undefined;
+}
+/**
+ * A status in the content flow: an unreachable backend, a permission gate, a
+ * destructive action about to happen.
+ *
+ * It stays until the condition clears, which is what separates it from a
+ * toast. Anything a reader would want to find again must not be a toast; and
+ * anything that is the OUTCOME of a press they just made should not be a
+ * callout they have to go looking for.
+ */
+export declare const Callout: ({ variant, title, icon, layout, action, live, className, children, ...rest }: CalloutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Callout/index.d.ts

@@ -0,0 +1,3 @@
+import './Callout.css';
+export { Callout } from './Callout.js';
+export type { CalloutLayout, CalloutProps, CalloutVariant } from './Callout.js';

package/dist/Callout/index.js

@@ -0,0 +1,2 @@
+export { Callout } from '../chunk-3ZP55QZE.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Callout-S7QDWHDL.css

@@ -0,0 +1,111 @@
+/*
+ * The callout: a status that stays in the content flow.
+ *
+ * ITS INK IS THE TONE'S OWN `-ink` STEP, not a mix. 0.2.0 built every one of
+ * these with `color-mix(in srgb, <fill> 55%, var(--color-text-primary))`,
+ * which produces a colour nobody measured: the light warning reached 4.41:1
+ * against its own tint. The ink, the soft fill and the line are three declared
+ * steps the palette suite measures against each other, so the pair a reader
+ * sees is the pair that was checked.
+ */
+
+.crewlet-callout {
+  --crewlet-callout-fill: var(--color-surface-inset);
+  --crewlet-callout-ink: var(--color-text-secondary);
+  /*
+   * TRANSPARENT, because the tint is the boundary. The engine's banner is a
+   * block of the tone's soft step with no rule around it: a 1px line in the
+   * same hue as the fill behind it adds a second edge a reader reads as a
+   * card, and the thing this component IS is a sentence the screen is saying
+   * rather than a card the screen contains. The pixel is still spent, so a
+   * consumer that overrides the line gets it back without the box moving.
+   */
+  --crewlet-callout-line: transparent;
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  /* The engine's own: a tight strip rather than a padded card. This sits
+     above a screen or between two sections and takes a line or two of text,
+     and the card's 16px made a one-line banner 48px tall. */
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 1px solid var(--crewlet-callout-line);
+  border-radius: var(--radius-md);
+  background: var(--crewlet-callout-fill);
+  color: var(--crewlet-callout-ink);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-callout__icon {
+  display: inline-flex;
+  flex: none;
+  /* On the first line's optical centre rather than its box top, which a 16px
+     glyph beside a 13px line sits two pixels above. */
+  margin-top: 2px;
+}
+
+.crewlet-callout__content {
+  min-width: 0;
+  flex: 1;
+}
+
+.crewlet-callout__title {
+  font-weight: var(--font-weight-semibold);
+  margin-right: var(--spacing-2);
+}
+
+.crewlet-callout__action {
+  flex: none;
+  align-self: center;
+}
+
+/*
+ * Inline code inside a callout takes the callout's ink. A mono chip that kept
+ * its own neutral ink inside a danger banner read as the one part of the
+ * sentence that was fine.
+ */
+.crewlet-callout code,
+.crewlet-callout .crewlet-inline-code {
+  color: inherit;
+}
+
+/* ── tones ─────────────────────────────────────────────────────────────── */
+
+.crewlet-callout--info {
+  --crewlet-callout-fill: var(--color-feedback-info-soft);
+  --crewlet-callout-ink: var(--color-feedback-info-ink);
+}
+
+.crewlet-callout--success {
+  --crewlet-callout-fill: var(--color-feedback-success-soft);
+  --crewlet-callout-ink: var(--color-feedback-success-ink);
+}
+
+.crewlet-callout--warning {
+  --crewlet-callout-fill: var(--color-feedback-warning-soft);
+  --crewlet-callout-ink: var(--color-feedback-warning-ink);
+}
+
+.crewlet-callout--danger {
+  --crewlet-callout-fill: var(--color-feedback-danger-soft);
+  --crewlet-callout-ink: var(--color-feedback-danger-ink);
+}
+
+/* ── layouts ───────────────────────────────────────────────────────────── */
+
+/*
+ * The banner is what a shell puts above a screen: against both edges, with no
+ * radius and no side borders, because a rounded card there leaves a gutter of
+ * page colour down each side and reads as content rather than as chrome.
+ */
+.crewlet-callout--banner {
+  border-radius: var(--radius-none);
+  /* The one layout that keeps a visible rule, on the edge it meets the screen
+     at: full bleed, there is no tint boundary at the sides for the eye to
+     stop on, so the bottom line is what says the strip has ended. */
+  border-width: 0 0 1px;
+  border-bottom-color: var(--color-border-default);
+  padding: var(--spacing-2) var(--spacing-4);
+}

package/dist/Canvas/Canvas.d.ts

@@ -0,0 +1,234 @@
+/**
+ * A bounded, pannable and zoomable viewport over positioned content.
+ *
+ * WHY IT EXISTS. A hierarchy drawn as a chart grows wider than any screen, and
+ * the page's own scroller is the wrong instrument for it: an application shell
+ * usually has exactly one element allowed to scroll, and a chart that scrolled
+ * it sideways would fight the router's scroll memory and every other screen's
+ * layout. So the chart lives in its own viewport, the geometry of moving
+ * around it is `geometry.ts`, and this component is the wiring from pointers,
+ * wheels and keys to that geometry.
+ *
+ * THE RULES IT KEEPS.
+ *
+ * - IT FILLS THE HEIGHT ITS CONTAINER GIVES IT and never grows the page. A
+ *   screen that wants a full height canvas gives it a full height box.
+ * - THE PAGE STILL SCROLLS. A plain wheel pans the canvas only while focus is
+ *   inside it; otherwise the wheel belongs to the page, so a reader scrolling
+ *   down is never caught by a chart passing under the pointer. Ctrl or Command
+ *   with the wheel zooms toward the cursor wherever the pointer is, which is
+ *   also what a trackpad pinch sends.
+ * - TOUCH IS OPT IN. Until the canvas is tapped, one finger scrolls the page
+ *   (`touch-action: pan-y`); a tap activates it, one finger then pans, and a
+ *   visible Done control hands the finger back to the page. Two fingers pinch
+ *   toward their midpoint at any time, because two fingers are never a scroll.
+ * - THE ZOOM KEYS ARE THE CANVAS'S, WHEREVER FOCUS IS INSIDE IT: `+`, `-` and
+ *   `0` (and Ctrl or Command with `=`, `-` and `0`) work on an item as well as
+ *   on the viewport, because the tab stop a chart hands out is an ITEM and a
+ *   reader who has navigated the content is exactly the reader who wants to
+ *   zoom it. They are in no other keyboard pattern here, so there is nothing
+ *   for them to collide with. The PAN keys are the viewport's own: the arrows
+ *   belong to whatever holds focus, so a tree's navigation and a listbox's
+ *   selection are never eaten. A text field inside keeps every key it is sent.
+ * - HOW FAR IT ZOOMS IS THE CONTENT'S ANSWER: out as far as the fit, because
+ *   there is nothing beyond the whole chart to see, and in until the largest
+ *   item fills the pane, because that is what a reader pressing Zoom in is
+ *   asking for. See `zoomLimits`.
+ * - THE ZOOM SAYS WHAT IT IS, between the two steppers, and a reader can type
+ *   one. A zoom has a value as well as a direction, and two chevrons say only
+ *   the direction: without the readout, getting back to actual size from a
+ *   stray pinch is pressing a chevron until it looks right. What is typed goes
+ *   through the same clamp as every other zoom.
+ * - A FOCUSED ITEM IS NEVER SCROLLED INTO VIEW BEHIND THE TRANSFORM'S BACK.
+ *   The viewport clips rather than scrolls, but a browser still scrolls a
+ *   clipping box to show a focused descendant; that scroll is converted into a
+ *   pan and reset, so the transform stays the one source of truth.
+ * - ITS CHROME IS ONE GROUP IN ONE CORNER: the zoom bar, whatever the caller
+ *   adds to the end of it, and whatever bars it stacks under it. Everything in
+ *   that group acts on the canvas, so it is drawn beside the canvas rather
+ *   than in the page's own toolbar.
+ * - ITS OVERLAY IS A LayerHost. The untransformed layer over the viewport is
+ *   the portal target for every menu, popover and picker opened from an item
+ *   inside, so each is placed from its anchor's viewport rectangle rather than
+ *   scaled by the zoom or clipped inside a card. The host receives
+ *   `LAYER_REPOSITION_EVENT` whenever the content moves beneath it, which is
+ *   how an open surface follows its anchor through a pan or a zoom.
+ * - FIT HAPPENS ONCE, on the first layout that has both a measured viewport
+ *   and content bounds, and again only on request. A data push that changes
+ *   the content never moves the operator's view, and nothing is shown before
+ *   that first fit.
+ * - MOTION ONLY ON REQUEST. A fit, a zoom button or a reveal eases; a drag, a
+ *   pinch, a wheel and a relayout anchor never do, and under reduced motion
+ *   nothing does. An easing lasts as long as its transition: a clamp that
+ *   arrives while one runs (a data push) rides along with it, and one that
+ *   arrives after it has settled moves at once, as any move nobody asked for
+ *   must. A request that moves nothing starts no easing.
+ *
+ * Pointer capture is used where the browser has it and the drag is tracked on
+ * the window either way, so a drag that leaves the viewport keeps panning.
+ * Fullscreen is not this component's concern: a surface that goes fullscreen
+ * must take its dialogs and toasts with it, so the screen that owns those
+ * decides.
+ *
+ * Ported from the engine dashboard's `ui/Canvas.tsx`, with its suite.
+ */
+import { type ReactNode, type Ref } from 'react';
+import { type CanvasPoint, type CanvasRect } from './geometry.js';
+/**
+ * How a view change moves: a correction to where the reader already is, or the
+ * chart travelling somewhere else. See the state that holds it, below.
+ */
+export type CanvasEase = 'near' | 'travel';
+/** What a screen can ask of a canvas it holds a ref to. */
+export interface CanvasHandle {
+    /** Show all of the content. Eases, unless reduced motion is set. */
+    fit(): void;
+    /** Zoom about the viewport centre. */
+    zoomBy(factor: number): void;
+    /** Pan the least distance that brings a world rectangle into view. */
+    reveal(target: CanvasRect): void;
+    /** Keep a node still on screen across a relayout: see `anchorView`. */
+    anchor(before: CanvasPoint, after: CanvasPoint): void;
+    /**
+     * Ease onto one world rectangle, remembering the view it left.
+     *
+     * For a surface that is about one item and has to say WHERE that item is:
+     * the chart moves to it, leaves room around it (`regionView`), and gives the
+     * reader their own view back on [restoreView]. Calling it twice remembers
+     * only the first view, so a second region is still left by one restore.
+     *
+     * `context` is how many times the region's own width the visible width comes
+     * to: [CANVAS_FOCUS_CONTEXT] unless it is named, and
+     * [CANVAS_COMPOSE_CONTEXT] for a region a reader has to type into rather
+     * than merely look at. `ceiling` is how far in the ease may zoom, for a
+     * region with a size of its own to respect: see [regionView].
+     */
+    focusRegion(target: CanvasRect, context?: number, ceiling?: number): void;
+    /**
+     * Remember the view the reader is on NOW, as the one [restoreView] gives
+     * back, without moving anything.
+     *
+     * FOR A REGION THAT DOES NOT EXIST YET. [focusRegion] remembers the view it
+     * leaves, which is the right moment whenever the thing being eased onto was
+     * already on the chart. A node being COMPOSED is not: its card has to be
+     * added to the content and measured before there is a rectangle to ease
+     * onto, and the content growing is itself a change the canvas answers by
+     * keeping what it holds reachable. So by the time `focusRegion` could be
+     * called, the view is no longer the one the reader was on, and what came
+     * back afterwards was the chart as the GHOST had left it. Measured on the
+     * engine's own builder: 198px sideways, every time an add was cancelled.
+     *
+     * Calling it twice keeps the first view, as [focusRegion] does.
+     */
+    rememberView(): void;
+    /** Ease back to the view [focusRegion] left, if it has not been given back already. */
+    restoreView(): void;
+    /** A world rectangle in viewport coordinates, for positioning an overlay. */
+    screenRect(target: CanvasRect): CanvasRect;
+}
+/** Every string the canvas renders on its own. */
+export interface CanvasLabels {
+    zoomIn: string;
+    zoomOut: string;
+    fit: string;
+    /**
+     * The zoom readout, given the zoom as a whole percentage. It is also what
+     * opens the box a reader types one into, so it says both.
+     */
+    zoom: (percent: number) => string;
+    /** The box a reader types a zoom into. */
+    zoomLevel: string;
+    /** The control that hands one finger back to the page. */
+    done: string;
+    /** Read after the canvas's name, so a keyboard reader learns its keys. */
+    keys: string;
+}
+export interface CanvasProps {
+    /** The accessible name of the viewport, such as "Organization chart". */
+    label: string;
+    /** The laid out content's bounds in world units, or null until it has been measured. */
+    content: CanvasRect | null;
+    /** The positioned content: the layer that is panned and zoomed. */
+    children: ReactNode;
+    /**
+     * Anything drawn over the viewport without the transform, such as a note
+     * about what the chart is showing.
+     *
+     * THE LAYER IS INERT AND ITS CHILDREN ARE NOT. Empty space passes a press
+     * through to the viewport beneath, but each child takes its own presses
+     * back, because a control drawn here has to be pressable. So a note that
+     * must not swallow the drag that pans the chart sets `pointer-events: none`
+     * on itself.
+     */
+    overlay?: ReactNode;
+    /** The zoom out, zoom in and fit controls. */
+    controls?: boolean | undefined;
+    /**
+     * Which corner the controls sit in.
+     *
+     * `top-right` is where a chart's own toolbar belongs, and where the console
+     * org chart puts it: out of the way of the content, which a tree grows
+     * DOWNWARD from its root, and beside the first place a reader looks after
+     * the root itself.
+     */
+    controlsPlacement?: 'top-right' | 'bottom-right' | undefined;
+    /**
+     * Anything else in the control bar, drawn after the zoom controls: a
+     * fullscreen toggle, a print, a download. It is in the bar rather than in
+     * the page's own toolbar because it acts on the CANVAS, and a control that
+     * acts on the canvas from 800px away is a control nobody finds.
+     */
+    controlsExtra?: ReactNode | undefined;
+    /**
+     * Bars of the caller's own, stacked under the control bar in the same
+     * corner: a switch between two drawings of the content, a note about a key.
+     * Each is a surface of its own, as the bar is.
+     */
+    controlsBelow?: ReactNode | undefined;
+    /**
+     * A note under the controls, about a key or a state: "Press Esc to leave
+     * fullscreen".
+     *
+     * DECORATION, AND AN ANNOUNCEMENT. It takes no press and no tab stop, so it
+     * never comes between a reader and the chart; it is a `status` region, so a
+     * canvas that puts one up when it enters a state a reader cannot see out of
+     * says so to a reader who cannot see it either. Give it a node whose content
+     * comes and goes rather than the node itself: the region stays in the
+     * document while it is empty, and a live region that was already there when
+     * its message arrives is a message a screen reader announces.
+     */
+    hint?: ReactNode | undefined;
+    /**
+     * The width, in world units, of the largest single item the content draws.
+     *
+     * It is what the largest zoom is derived from ([zoomLimits]): a reader who
+     * keeps pressing Zoom in is asking to look at one item, so the ceiling is
+     * the zoom that gives them one. Unset, the fixed ceiling stands.
+     */
+    largestItemWidth?: number | undefined;
+    /**
+     * Pushes the content back, for a surface opened OVER the canvas that is
+     * about one part of it.
+     *
+     * The content is blurred and faded rather than covered, so the chart is
+     * still there behind the decision being made about it, which is what the
+     * console chart does while a node is being added. It is a state rather than
+     * an entrance, so a reader who asked for less motion simply gets it.
+     */
+    dimmed?: boolean | undefined;
+    /**
+     * Whether one finger can pan the canvas at all.
+     *
+     * On by default, behind the tap that activates it. Turned off, one finger
+     * always belongs to the page and only a two finger pinch reaches the canvas,
+     * which is what a chart embedded in a long scrolling page wants.
+     */
+    touch?: boolean | undefined;
+    /** Every string the canvas renders itself, for another language. */
+    labels?: Partial<CanvasLabels> | undefined;
+    /** Called once, when the first measured layout has been fitted. */
+    onReady?: (() => void) | undefined;
+    ref?: Ref<CanvasHandle> | undefined;
+    className?: string | undefined;
+}
+export declare function Canvas({ label, content, children, overlay, controls, controlsPlacement, controlsExtra, controlsBelow, hint, largestItemWidth, dimmed, touch, labels, onReady, ref, className, }: CanvasProps): import("react/jsx-runtime").JSX.Element;