@crewlethq/ui 0.34.1 → 0.35.0

package/dist/SourceEditor-G2C3STPX.css

@@ -0,0 +1,160 @@
+/*
+ * Source text written in place: a gutter of line numbers beside a real
+ * textarea, and the marks a checker placed drawn behind the text. The gutter,
+ * the marks and the field share one font, one line height and one top inset,
+ * so a number and a mark always sit on the line they name; the layers follow
+ * the field's scroll by a transform.
+ *
+ * The BOX takes the focus ring, as the Composer's does.
+ */
+.crewlet-source-editor {
+  --crewlet-source-inset: var(--spacing-2);
+
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-source-editor:hover {
+  border-color: var(--color-border-strong-hover);
+}
+
+.crewlet-source-editor:focus-within {
+  border-color: var(--color-brand-accent);
+  box-shadow: 0 0 0 2px var(--color-brand-accent-soft);
+}
+
+.crewlet-source-editor.is-fill {
+  height: 100%;
+}
+
+.crewlet-source-editor__gutter {
+  position: relative;
+  overflow: hidden;
+  border-right: 1px solid var(--color-border-default);
+  background: var(--color-surface-subtle);
+  user-select: none;
+}
+
+.crewlet-source-editor__numbers {
+  display: grid;
+  padding: var(--crewlet-source-inset) 0;
+  will-change: transform;
+}
+
+.crewlet-source-editor__number {
+  /* Wide enough for the longest number, so the text never shifts as lines are added. */
+  min-width: calc(var(--crewlet-source-digits, 2) * 1ch + var(--spacing-2) * 2);
+  padding: 0 var(--spacing-2);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-source-editor__number.is-danger {
+  color: var(--color-feedback-danger-ink);
+  font-weight: var(--font-weight-semibold);
+  box-shadow: inset 2px 0 0 var(--color-feedback-danger-ink);
+}
+
+.crewlet-source-editor__number.is-warning {
+  color: var(--color-feedback-warning-ink);
+  font-weight: var(--font-weight-semibold);
+  box-shadow: inset 2px 0 0 var(--color-feedback-warning-ink);
+}
+
+.crewlet-source-editor__body {
+  position: relative;
+  display: grid;
+  min-width: 0;
+}
+
+.crewlet-source-editor__marks {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.crewlet-source-editor__marks > div {
+  position: relative;
+  will-change: transform;
+}
+
+.crewlet-source-editor__mark {
+  position: absolute;
+  top: calc(var(--crewlet-source-inset) + var(--crewlet-source-line) * 1lh);
+  left: 0;
+  right: 0;
+  height: 1lh;
+}
+
+.crewlet-source-editor__mark.is-danger {
+  background: var(--color-feedback-danger-soft);
+}
+
+.crewlet-source-editor__mark.is-warning {
+  background: var(--color-feedback-warning-soft);
+}
+
+.crewlet-source-editor .crewlet-source-editor__field {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-height: 0;
+  margin: 0;
+  padding: var(--crewlet-source-inset) var(--spacing-3);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+  white-space: pre;
+  overflow: auto;
+  resize: none;
+  tab-size: 2;
+  caret-color: var(--color-brand-accent);
+}
+
+.crewlet-source-editor.is-fill .crewlet-source-editor__field {
+  height: 100%;
+}
+
+.crewlet-source-editor .crewlet-source-editor__field::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+/* The ring is the box's, above. A transparent outline stays, because forced
+   colors drops the box's shadow and paints an outline in its place. */
+.crewlet-source-editor .crewlet-source-editor__field:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.crewlet-source-editor .crewlet-source-editor__field[readonly] {
+  color: var(--color-text-secondary);
+}
+
+@media (forced-colors: active) {
+  .crewlet-source-editor__mark {
+    background: Highlight;
+    opacity: 0.25;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-source-editor {
+    transition: none;
+  }
+}

package/dist/ThemeGallery/ThemeGallery.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 import { type ThemeId } from '@crewlethq/tokens';
 import { type ThemeSwatchPair } from '../ThemeSwatch/index.js';
 /** A theme as the gallery offers it: the fields of a `themeRegistry` entry it reads. */
@@ -9,7 +9,8 @@ export interface ThemeGalleryTheme<T extends string = string> {
     tag: string;
     /** The id of the group it is listed under. */
     group: string;
-    swatch: ThemeSwatchPair;
+    /** Its two palettes, drawn as the card's thumbnail unless `renderPreview` draws one. */
+    swatch?: ThemeSwatchPair | undefined;
 }
 /** A heading the themes are listed under, as `themeGroups` carries it. */
 export interface ThemeGalleryGroup {
@@ -38,6 +39,12 @@ export interface ThemeGalleryProps<T extends string = ThemeId> extends Omit<HTML
     columns?: number | undefined;
     /** Nothing can be chosen, and the gallery says so. */
     disabled?: boolean | undefined;
+    /**
+     * Draws a card's thumbnail in place of its swatch: a theme of something
+     * other than the product's chrome, such as a slide deck's, shown as what it
+     * themes. Decoration, as the swatch is: the card is named by its theme.
+     */
+    renderPreview?: ((theme: ThemeGalleryTheme<T>) => ReactNode) | undefined;
 }
 /**
  * The choice of a theme: every theme, each drawn as its two palettes, listed
@@ -62,4 +69,4 @@ export interface ThemeGalleryProps<T extends string = ThemeId> extends Omit<HTML
  * and described by its group's heading; the drawing is decoration, because
  * the name is printed under it.
  */
-export declare function ThemeGallery<T extends string = ThemeId>({ label, value, onValueChange, onPreview, themes, groups, columns, disabled, className, style, ...rest }: ThemeGalleryProps<T>): import("react").JSX.Element;
+export declare function ThemeGallery<T extends string = ThemeId>({ label, value, onValueChange, onPreview, themes, groups, columns, disabled, renderPreview, className, style, ...rest }: ThemeGalleryProps<T>): import("react").JSX.Element;

package/dist/ThemeGallery/index.js

@@ -1,4 +1,4 @@
-export { ThemeGallery } from '../chunk-C2FRTWKO.js';
+export { ThemeGallery } from '../chunk-W3UVOZKL.js';
 import '../chunk-MNFU2RNT.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-RKKO7QHH.js';

package/dist/{ThemeGallery-NITASULQ.css → ThemeGallery-HSUKBDWY.css}

@@ -91,3 +91,12 @@
     border-width: 2px;
   }
 }
+
+/* A THUMBNAIL THE CALLER DRAWS (`renderPreview`) fills the card's width, as
+   the swatch does, and is clipped to the card's inner corner. */
+.crewlet-theme-gallery__preview {
+  display: block;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+  pointer-events: none;
+}

package/dist/TimeWindowPicker/index.js

@@ -1,8 +1,8 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-AORVEG5V.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-F2KY4RLI.js';
 import '../chunk-BQ7AKL2N.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-K3IJQNB7.js';
 import '../chunk-GXQ3B46I.js';
+import '../chunk-K3IJQNB7.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';

package/dist/{chunk-UXXJDIYE.js → chunk-22CQQDFW.js}

@@ -3,7 +3,7 @@ import { Modal } from './chunk-XEGZHHRH.js';
 import { Checkbox } from './chunk-CPEPST4S.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Menu } from './chunk-3EB2AV3H.js';
+import { Menu } from './chunk-BUVCV3WI.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-E4NNGC6X.js → chunk-3VD3G3IL.js}

@@ -1,4 +1,4 @@
-import { richEditorLabels } from './chunk-4B6LSFDS.js';
+import { richEditorLabels } from './chunk-CSQTDGTS.js';
 import { Callout } from './chunk-SZZRIHGT.js';
 import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { Button } from './chunk-OG6CL3EB.js';
@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-UUZ7XKCU.js').then(
+  loading ??= import('./Editor-BVQHBF7L.js').then(
     (module) => {
       engine = module.Editor;
       return engine;