@crewlethq/ui 0.24.0 → 0.25.0

package/dist/VersionCompare/index.js

@@ -1,9 +1,9 @@
-export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-APS747CR.js';
-import '../chunk-M54K52ZU.js';
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-EHQTPVV4.js';
+import '../chunk-FQCLKD7U.js';
 import '../chunk-BVWSLXTY.js';
-import '../chunk-7QL2OFP6.js';
-import '../chunk-XJFOOXCF.js';
-import '../chunk-CBOICT64.js';
+import '../chunk-RCQXUT5K.js';
+import '../chunk-HJEVSQN6.js';
+import '../chunk-RKKO7QHH.js';
 import '../chunk-RA2ULG6H.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';

package/dist/VersionTimeline/index.js

@@ -1,4 +1,4 @@
-export { VersionTimeline } from '../chunk-UNZ7TVV5.js';
+export { VersionTimeline } from '../chunk-W4XYY73O.js';
 import '../chunk-AUQPBL4O.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';

package/dist/{VersionTimeline-EBJ6MIPJ.css → VersionTimeline-6KRXEEOO.css}

@@ -32,11 +32,11 @@
   background: var(--color-surface-hover);
 }
 
-/* The version on show. The accent means "where the reader is", which is
-   exactly what this row is. */
+/* The version on show, as a FILL only: the timeline's rail is the row's one
+   vertical line, and an accent bar beside it drew two. The accent means
+   "where the reader is", which is exactly what this row is. */
 .crewlet-version-timeline__select[aria-current='true'] {
   background: var(--color-brand-accent-soft);
-  box-shadow: inset 2px 0 0 var(--color-brand-accent);
 }
 
 .crewlet-version-timeline__head {
@@ -91,11 +91,11 @@
   padding-inline: var(--spacing-1);
 }
 
-/* The version compared against carries the same edge in the strong neutral:
-   it is the other side of the comparison, not where the reader is, so it does
-   not take the accent. */
+/* The version compared against is ringed in the strong neutral: it is the
+   other side of the comparison, not where the reader is, so it takes neither
+   the accent nor a second vertical bar beside the rail. */
 .is-compared > .crewlet-timeline__body > .crewlet-version-timeline__select {
-  box-shadow: inset 2px 0 0 var(--color-border-strong);
+  box-shadow: inset 0 0 0 1px var(--color-border-strong);
 }
 
 .crewlet-version-timeline__gap {

package/dist/WidgetFrame/WidgetFrame.d.ts

@@ -0,0 +1,73 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type TimeValue } from '../RelativeTime/index.js';
+/**
+ * Where a figure's data stands.
+ *
+ * - `loading`: not read yet.
+ * - `live`: kept current as it changes (a datastore collection on the socket).
+ * - `ready`: read, and true as of `asOf`.
+ * - `stale`: read, and older than its source promises; still drawn, and marked.
+ * - `refused`: the reader may not read the data behind it. The figure is not
+ *   drawn at all, and `detail` says why.
+ * - `failed`: the read did not complete. The figure is not drawn, and `detail`
+ *   says what happened.
+ */
+export type DatasetStatus = 'loading' | 'live' | 'ready' | 'stale' | 'refused' | 'failed';
+/** What a widget's figure is drawn from, and when it was true. */
+export interface WidgetSource {
+    /** The dataset's title: what the figure cites. */
+    label: string;
+    /** When the figure was true. Unset for a live source or one not read yet. */
+    asOf?: TimeValue | undefined;
+    status: DatasetStatus;
+    /** The refusal or failure sentence, for `refused` and `failed`. */
+    detail?: string | undefined;
+}
+export interface WidgetFrameLabels {
+    live: string;
+    asOf: string;
+    stale: string;
+    loading: (title: string) => string;
+    /** The sentence drawn for `refused` or `failed` when the host gave no detail. */
+    refused: string;
+    failed: string;
+    /** Said before the citation to a screen reader: "Source: Open tasks, as of 2m ago". */
+    cite: string;
+}
+export interface WidgetFrameProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    title: string;
+    source: WidgetSource;
+    /**
+     * Opens the host's Sources rail at this figure's dataset. Given, the
+     * citation is a button; without it, plain text.
+     */
+    onCite?: (() => void) | undefined;
+    /** The host's controls for this figure, such as a menu offering CSV and PNG. */
+    actions?: ReactNode;
+    /** The heading level of the title. Default 3, under a board's own heading. */
+    headingLevel?: 2 | 3 | 4 | undefined;
+    /** Overrides the shared clock, for a story or a suite. */
+    now?: number | undefined;
+    labels?: Partial<WidgetFrameLabels> | undefined;
+    children: ReactNode;
+}
+/**
+ * One figure on a dashboard: its title, the figure, and the line that says
+ * what it is drawn from and when that was true.
+ *
+ * EVERY FIGURE CITES ITS SOURCE. A number with no provenance is a number
+ * nobody can check, so the citation is part of the frame rather than
+ * something a host may forget: the dataset's title, then "live" or "as of" a
+ * relative time (the exact instant on hover). With `onCite` the citation is a
+ * button that opens the host's Sources rail at that dataset.
+ *
+ * A REFUSAL IS NOT AN ALARM. A reader who may not read the tracker opening a
+ * dashboard that cites it is an ordinary state, so `refused` draws a calm
+ * sentence in place of the figure, never an error colour, and draws nothing
+ * of the figure itself: a host that passed rows by mistake still shows none.
+ * `failed` reads the same way with its own sentence.
+ *
+ * Sits inside the host's `ArrangeFrame`, which owns the grid, the drag and
+ * the resize; this owns what is inside the card.
+ */
+export declare function WidgetFrame({ title, source, onCite, actions, headingLevel, now, labels, className, children, ...rest }: WidgetFrameProps): import("react").JSX.Element;

package/dist/WidgetFrame/index.d.ts

@@ -0,0 +1,3 @@
+import './WidgetFrame.css';
+export { WidgetFrame } from './WidgetFrame.js';
+export type { DatasetStatus, WidgetFrameLabels, WidgetFrameProps, WidgetSource } from './WidgetFrame.js';

package/dist/WidgetFrame/index.js

@@ -0,0 +1,6 @@
+export { WidgetFrame } from '../chunk-BQYQWJPK.js';
+import '../chunk-W5J7R5EB.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/WidgetFrame-4EFJOJMW.css

@@ -0,0 +1,127 @@
+/*
+ * WidgetFrame: one figure on a dashboard. A title row, the figure filling the
+ * height the host's frame gives it, and the citation line at the foot.
+ */
+
+.crewlet-widget-frame {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  padding: var(--spacing-3) var(--spacing-4);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-widget-frame__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-widget-frame__title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-widget-frame__actions {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-widget-frame__body {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.crewlet-widget-frame__blocked {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-widget-frame__blocked-glyph {
+  display: inline-flex;
+  flex: none;
+  padding-top: 2px;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-widget-frame__cite {
+  display: flex;
+  min-width: 0;
+}
+
+.crewlet-widget-frame__cite-text,
+.crewlet-widget-frame__cite-button {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0 var(--spacing-1);
+  min-width: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-widget-frame__cite-button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  font: inherit;
+  font-size: var(--font-size-xs);
+  text-align: start;
+  cursor: pointer;
+}
+
+.crewlet-widget-frame__cite-button:hover .crewlet-widget-frame__source {
+  color: var(--color-text-primary);
+  text-decoration: underline;
+}
+
+.crewlet-widget-frame__cite-button:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-widget-frame__source {
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The separator is drawn, not typed, so a screen reader hears the facts alone. */
+.crewlet-widget-frame__when::before {
+  content: '\00b7' / '';
+  margin-inline-end: var(--spacing-1);
+}
+
+.crewlet-widget-frame__stale {
+  display: inline-flex;
+  color: var(--color-feedback-warning-ink);
+}