@crewlethq/ui 0.18.0 → 0.19.0

package/dist/ArrangeList-NNRTDFI5.css

@@ -0,0 +1,94 @@
+/*
+ * ArrangeList: rows a reader puts in order and switches on and off.
+ *
+ * The row is a quiet inset band rather than a card: a panel holding eight of
+ * them is a list, and eight bordered boxes read as eight separate objects.
+ */
+
+.crewlet-arrange-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-arrange-list__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-row-lg);
+  padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-1);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-arrange-list__item:hover {
+  border-color: var(--color-border-default);
+}
+
+/* The row being carried is a gap in the list, outlined where it will land. */
+.crewlet-arrange-list__item[data-reorder='dragging'] {
+  border-style: dashed;
+  border-color: var(--color-border-strong);
+  background: transparent;
+}
+.crewlet-arrange-list__item[data-reorder='dragging'] > * {
+  opacity: 0.4;
+}
+
+.crewlet-arrange-list__handle {
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--color-text-tertiary);
+}
+.crewlet-arrange-list__handle:active {
+  cursor: grabbing;
+}
+
+.crewlet-arrange-list__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-arrange-list__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+
+/* The toggle takes the row's width, so its label is the row's target. */
+.crewlet-arrange-list__toggle {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Off, the words step back; the switch itself already says off. */
+.crewlet-arrange-list__item.is-off .crewlet-arrange-list__icon,
+.crewlet-arrange-list__item.is-off .crewlet-switch__label,
+.crewlet-arrange-list__item.is-off .crewlet-checkbox__label {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-arrange-list__trailing {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.crewlet-arrange-list__moves {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-arrange-list__item {
+    transition: none;
+  }
+}

package/dist/ArtifactCard/index.js

@@ -1,10 +1,10 @@
-export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from '../chunk-4U3GQ7D2.js';
+export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from '../chunk-TODND5AD.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
-import '../chunk-EG6NYWVK.js';
+import '../chunk-YZCJ63JF.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';

package/dist/AuthLayout/index.js

@@ -1,6 +1,6 @@
-export { AuthLayout } from '../chunk-7QFAORCY.js';
+export { AuthLayout } from '../chunk-WHZFDS62.js';
 import '../chunk-7KBNFFM3.js';
-import '../chunk-EG6NYWVK.js';
+import '../chunk-YZCJ63JF.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';

package/dist/AvatarPicker/index.js

@@ -1,14 +1,14 @@
-export { AvatarPicker } from '../chunk-BOW2VUCH.js';
-import '../chunk-PA4CYTBY.js';
+export { AvatarPicker } from '../chunk-T7ICFXEC.js';
+import '../chunk-XU4ZUGLE.js';
 import '../chunk-26PEPONN.js';
 import '../chunk-4LDTQWS7.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-5PSXBL73.js';
 import '../chunk-CBOICT64.js';
-import '../chunk-HMPFGIWM.js';
-import '../chunk-R25RGPUB.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Canvas/index.js

@@ -1,8 +1,8 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-AMH67MLM.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-TXAFKH2A.js';
 import '../chunk-VYOKRN2I.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Card/index.js

@@ -1,4 +1,4 @@
-export { Card } from '../chunk-EG6NYWVK.js';
+export { Card } from '../chunk-YZCJ63JF.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';

package/dist/Checkbox/index.js

@@ -1,6 +1,6 @@
-export { Checkbox, CheckboxGroup } from '../chunk-75CLJNDQ.js';
-import '../chunk-4GB57WIT.js';
-import '../chunk-4FQT6ZAY.js';
+export { Checkbox, CheckboxGroup } from '../chunk-I6NZKJGK.js';
+import '../chunk-Q55TXPA3.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Combobox/index.js

@@ -1,8 +1,8 @@
-export { Combobox } from '../chunk-ZFH7H7GS.js';
+export { Combobox } from '../chunk-LOLELDBW.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-4GB57WIT.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-Q55TXPA3.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette/index.js

@@ -1,13 +1,13 @@
-export { CommandPalette } from '../chunk-IFKBDRNJ.js';
-import '../chunk-2TZATTIU.js';
+export { CommandPalette } from '../chunk-UXELEORU.js';
+import '../chunk-7IJARUIF.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-4GB57WIT.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-HMPFGIWM.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-Q55TXPA3.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Composer/index.js

@@ -1,7 +1,7 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-6NIMZ5XC.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-VJLYGPPE.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-4GB57WIT.js';
-import '../chunk-4FQT6ZAY.js';
+import '../chunk-Q55TXPA3.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ConfirmField/index.js

@@ -1,7 +1,7 @@
-export { ConfirmField, confirmMatches } from '../chunk-CXBAIVYZ.js';
+export { ConfirmField, confirmMatches } from '../chunk-YSY6UJ4F.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-4GB57WIT.js';
-import '../chunk-4FQT6ZAY.js';
+import '../chunk-Q55TXPA3.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataTable/index.js

@@ -1,16 +1,16 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-76FXDZAZ.js';
-import '../chunk-NS7BVLL3.js';
-import '../chunk-2TZATTIU.js';
-import '../chunk-75CLJNDQ.js';
-import '../chunk-4GB57WIT.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-AJESMWJS.js';
+import '../chunk-JULMZNGT.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
+import '../chunk-7IJARUIF.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-HMPFGIWM.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-I6NZKJGK.js';
+import '../chunk-Q55TXPA3.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataView/index.js

@@ -1,26 +1,26 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-KVT3TJVG.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-OIMAK5AE.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-76FXDZAZ.js';
-import '../chunk-NS7BVLL3.js';
-import '../chunk-5NVKTB6E.js';
-import '../chunk-2TZATTIU.js';
-import '../chunk-F73MC7EZ.js';
-import '../chunk-SMBKXWML.js';
-import '../chunk-75CLJNDQ.js';
-import '../chunk-4GB57WIT.js';
+import '../chunk-AJESMWJS.js';
+import '../chunk-JULMZNGT.js';
+import '../chunk-L4H7SSWF.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-BWRGFKJP.js';
+import '../chunk-7IJARUIF.js';
+import '../chunk-F73MC7EZ.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-HMPFGIWM.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-I6NZKJGK.js';
+import '../chunk-Q55TXPA3.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
+import '../chunk-BWRGFKJP.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DateTimePicker/index.js

@@ -1,9 +1,9 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-5NVKTB6E.js';
-import '../chunk-BWRGFKJP.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-L4H7SSWF.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
+import '../chunk-BWRGFKJP.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Divider/Divider.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Words on the rule, for a divider that names what follows: "History". */
+    label?: string | undefined;
+    /** Where the words sit: at the start, as a section's name, or centred. */
+    align?: 'start' | 'center' | undefined;
+}
+/**
+ * A rule between parts of a page, with or without a name.
+ *
+ * A SEPARATOR TO A SCREEN READER, and a named one says its name, so a reader
+ * moving through the page hears where one part ends and "History" begins
+ * rather than nothing at all.
+ */
+export declare function Divider({ label, align, className, ...rest }: DividerProps): import("react").JSX.Element;

package/dist/Divider/index.d.ts

@@ -0,0 +1,3 @@
+import './Divider.css';
+export { Divider } from './Divider.js';
+export type { DividerProps } from './Divider.js';

package/dist/Divider/index.js

@@ -0,0 +1,2 @@
+export { Divider } from '../chunk-6KWNXIDE.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Divider-3Z77ZAJH.css

@@ -0,0 +1,37 @@
+/* Divider: a rule across its space, with its name at its start or in its middle. */
+
+.crewlet-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-height: var(--size-row-sm);
+  min-width: 0;
+}
+.crewlet-divider::before,
+.crewlet-divider::after {
+  content: '';
+  flex: 1 1 auto;
+  border-top: 1px solid var(--color-border-strong);
+}
+/* One rule unless the words sit in the middle of it. */
+.crewlet-divider:not(.crewlet-divider--center)::before {
+  display: none;
+}
+.crewlet-divider:not(.crewlet-divider--labelled)::before {
+  display: block;
+}
+.crewlet-divider:not(.crewlet-divider--labelled)::after {
+  display: none;
+}
+
+.crewlet-divider__label {
+  flex: 0 1 auto;
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/HuePicker/HuePicker.d.ts

@@ -1,15 +1,26 @@
 import { type SegmentedSize } from '../SegmentedControl/SegmentedControl.js';
 import { type NodeHue } from '../utils/nodeHue.js';
-export interface HuePickerProps {
+interface HuePickerBase {
     /** The group's name, said on entering it: "Color". */
     label: string;
-    value: NodeHue;
-    onValueChange: (hue: NodeHue) => void;
     size?: SegmentedSize | undefined;
     /** Nothing can be chosen, and the row says so. */
     disabled?: boolean | undefined;
     className?: string | undefined;
 }
+/**
+ * The six hues, or the six and NO HUE first, named by `none` ("Plain"): a
+ * surface that may carry a colour (a group's band, a note) but need not.
+ */
+export type HuePickerProps = HuePickerBase & ({
+    none?: undefined;
+    value: NodeHue;
+    onValueChange: (hue: NodeHue) => void;
+} | {
+    none: string;
+    value: NodeHue | 'none';
+    onValueChange: (hue: NodeHue | 'none') => void;
+});
 /**
  * The choice of an entity's hue: the six node hues as a row of chips, each a
  * swatch and the hue's name.
@@ -23,4 +34,5 @@ export interface HuePickerProps {
  * row is still read and the chosen hue still shown, and nothing in it takes
  * focus or a press.
  */
-export declare function HuePicker({ label, value, onValueChange, size, disabled, className }: HuePickerProps): import("react").JSX.Element;
+export declare function HuePicker(props: HuePickerProps): import("react").JSX.Element;
+export {};

package/dist/HuePicker/index.js

@@ -1,5 +1,5 @@
-import '../chunk-EXHQ2QVW.js';
-export { HuePicker } from '../chunk-PA4CYTBY.js';
+import '../chunk-FFMCMSJB.js';
+export { HuePicker } from '../chunk-XU4ZUGLE.js';
 import '../chunk-26PEPONN.js';
 import '../chunk-4LDTQWS7.js';
 import '../chunk-AYKXMIOR.js';

package/dist/{HuePicker-5QIUR6L7.css → HuePicker-PAIGH6LR.css}

@@ -16,3 +16,9 @@
 .crewlet-hue-picker__swatch--amber { background: var(--color-node-amber); }
 .crewlet-hue-picker__swatch--rose { background: var(--color-node-rose); }
 .crewlet-hue-picker__swatch--blue { background: var(--color-node-blue); }
+
+/* No hue: a ring in the hairline, so the row still reads as swatches. */
+.crewlet-hue-picker__swatch--none {
+  box-sizing: border-box;
+  border: 1px solid var(--color-border-strong);
+}

package/dist/IconTile/IconTile.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { NodeHue } from '../utils/nodeHue.js';
+export interface IconTileProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The glyph, at the size the tile is drawn at: `sm` in a `sm` or `md` tile, `md` in a `lg` one. */
+    children: ReactNode;
+    /** The hue it is tinted in. Left out, the brand accent's soft fill and ink. */
+    hue?: NodeHue | undefined;
+    /** One of the row heights: `sm` 28px, `md` 36px, `lg` 48px. */
+    size?: 'sm' | 'md' | 'lg' | undefined;
+}
+/**
+ * A glyph on a tinted square: what a choice in a library or a catalog is
+ * told apart by before its name is read. The widget tray draws one per widget
+ * it offers.
+ *
+ * A HUE PER KIND, NOT PER STATE. The tint is decorative and picked for the
+ * thing it marks (`NodeHue`), so a tile in rose says nothing is wrong; a state
+ * is a `StatusDot` or a `Tag`.
+ *
+ * DECORATION. The tile is hidden from assistive technology: the name beside it
+ * is what is read.
+ */
+export declare function IconTile({ children, hue, size, className, ...rest }: IconTileProps): import("react").JSX.Element;

package/dist/IconTile/index.d.ts

@@ -0,0 +1,3 @@
+import './IconTile.css';
+export { IconTile } from './IconTile.js';
+export type { IconTileProps } from './IconTile.js';

package/dist/IconTile/index.js

@@ -0,0 +1,2 @@
+export { IconTile } from '../chunk-IXJHTFXG.js';
+import '../chunk-ODEQTPFM.js';

package/dist/IconTile-4GNWTLAW.css

@@ -0,0 +1,30 @@
+/*
+ * IconTile: a glyph on a tinted square. Each hue pairs its fill and its ink
+ * from one measured family (`--color-node-*`); left out, the brand accent's
+ * soft fill and ink. No edge: the tile sits inside a card that has one.
+ */
+.crewlet-icon-tile {
+  --crewlet-icon-tile-fill: var(--color-brand-accent-soft);
+  --crewlet-icon-tile-ink: var(--color-brand-accent-ink);
+  --crewlet-icon-tile-size: var(--size-row-md);
+
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--crewlet-icon-tile-size);
+  height: var(--crewlet-icon-tile-size);
+  border-radius: var(--radius-md);
+  background: var(--crewlet-icon-tile-fill);
+  color: var(--crewlet-icon-tile-ink);
+}
+
+.crewlet-icon-tile--sm { --crewlet-icon-tile-size: var(--size-row-sm); }
+.crewlet-icon-tile--lg { --crewlet-icon-tile-size: var(--size-row-lg); border-radius: var(--radius-lg); }
+
+.crewlet-icon-tile--purple { --crewlet-icon-tile-fill: var(--color-node-purple-fill); --crewlet-icon-tile-ink: var(--color-node-purple-ink); }
+.crewlet-icon-tile--cyan { --crewlet-icon-tile-fill: var(--color-node-cyan-fill); --crewlet-icon-tile-ink: var(--color-node-cyan-ink); }
+.crewlet-icon-tile--green { --crewlet-icon-tile-fill: var(--color-node-green-fill); --crewlet-icon-tile-ink: var(--color-node-green-ink); }
+.crewlet-icon-tile--amber { --crewlet-icon-tile-fill: var(--color-node-amber-fill); --crewlet-icon-tile-ink: var(--color-node-amber-ink); }
+.crewlet-icon-tile--rose { --crewlet-icon-tile-fill: var(--color-node-rose-fill); --crewlet-icon-tile-ink: var(--color-node-rose-ink); }
+.crewlet-icon-tile--blue { --crewlet-icon-tile-fill: var(--color-node-blue-fill); --crewlet-icon-tile-ink: var(--color-node-blue-ink); }

package/dist/Input/index.js

@@ -1,5 +1,5 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-4GB57WIT.js';
-import '../chunk-4FQT6ZAY.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-Q55TXPA3.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/LinkInterstitial/index.js

@@ -1,11 +1,11 @@
-export { LinkInterstitial, openExternal } from '../chunk-A7EBCHEG.js';
-import '../chunk-2TZATTIU.js';
+export { LinkInterstitial, openExternal } from '../chunk-RT323I4I.js';
+import '../chunk-7IJARUIF.js';
 import '../chunk-5CLW2CXT.js';
 import '../chunk-SVSCLHHI.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ListInput/index.js

@@ -1,10 +1,10 @@
-export { ListInput } from '../chunk-T3ZWBZ65.js';
+export { ListInput } from '../chunk-YSJYWQSP.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-4GB57WIT.js';
-import '../chunk-RSAQOKH3.js';
-import '../chunk-4FQT6ZAY.js';
+import '../chunk-Q55TXPA3.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/MarkdownEditor/index.js

@@ -4,9 +4,9 @@ import '../chunk-PGRPNDWM.js';
 import '../chunk-26PEPONN.js';
 import '../chunk-4LDTQWS7.js';
 import '../chunk-CBOICT64.js';
-import '../chunk-4FQT6ZAY.js';
+import '../chunk-BHHIIK3M.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-BHHIIK3M.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Menu/index.js

@@ -1,7 +1,7 @@
-export { Menu } from '../chunk-NS7BVLL3.js';
+export { Menu } from '../chunk-JULMZNGT.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Modal/Modal.d.ts

@@ -85,6 +85,18 @@ export interface ModalProps extends FrameAttributes {
      * one glance keeps its actions in the foot, where the eye ends up.
      */
     headerActions?: ReactNode;
+    /**
+     * A step back, drawn first in the head, before the title.
+     *
+     * For a surface reached FROM another one that stays the reader's place: a
+     * widget's options opened from a library of widgets, a record opened from a
+     * list in the same sheet. The way back belongs where the reader looks to
+     * learn where they are, beside the title, and not in a foot they have to
+     * scroll to. Closing is still the close control; this only goes back.
+     */
+    onBack?: (() => void) | undefined;
+    /** The back control's name, saying where it goes: "Back to widgets". */
+    backLabel?: string | undefined;
     children?: ReactNode;
     size?: ModalSize | undefined;
     variant?: ModalVariant | undefined;
@@ -99,6 +111,14 @@ export interface ModalProps extends FrameAttributes {
     dismissable?: boolean | undefined;
     /** A veil-only switch: the surface still closes on Escape and on its close control. */
     closeOnBackdrop?: boolean | undefined;
+    /**
+     * What the page behind looks like. `veil` dims and softens it, which is what
+     * a surface asking for the reader's whole attention wants. `clear` leaves it
+     * as it is, for a sheet whose changes ARE the page behind it (a page's
+     * customize sheet): a preview under a veil is a preview nobody can read. The
+     * surface is still modal; only the paint changes.
+     */
+    backdrop?: 'veil' | 'clear' | undefined;
     showCloseButton?: boolean | undefined;
     /** Stacks the body's children in a column with a gap, which most forms want. */
     stackBody?: boolean | undefined;

package/dist/Modal/index.js

@@ -1,8 +1,8 @@
-export { ConfirmModal, Modal } from '../chunk-2TZATTIU.js';
+export { ConfirmModal, Modal } from '../chunk-7IJARUIF.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Modal-RQAYGG4L.css → Modal-XOSV6FAH.css}

@@ -57,6 +57,12 @@
 }
 
 /* Inside a LayerHost the overlay covers the host, not the window. */
+/* The page behind stays as it is: see `backdrop` in Modal.tsx. */
+.crewlet-modal-overlay--clear {
+  background: transparent;
+  backdrop-filter: none;
+}
+
 .crewlet-modal-overlay--in-host {
   position: absolute;
 }
@@ -376,6 +382,14 @@
   margin: calc(var(--spacing-1) * -1);
 }
 
+/* The step back leads the head, its glyph on the title's inline start, as
+   the close control's sits on the head's end. */
+.crewlet-modal__back {
+  flex-shrink: 0;
+  margin-inline-start: calc(var(--spacing-2) * -1);
+  margin-block: calc(var(--spacing-1) * -1);
+}
+
 .crewlet-modal__body {
   flex: 1 1 auto;
   min-height: 0;