@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/FileUpload/iconForFile.ts

@@ -0,0 +1,40 @@
+import { File as FileIcon, FileImage, FileText, type LucideIcon } from 'lucide-react';
+
+/**
+ * Choose a lucide file-type icon component based on a File's MIME type and
+ * extension fallback. Returns the icon COMPONENT (not an element instance)
+ * so callers can decide on size / aria-label / className at the render site.
+ *
+ * Mapping:
+ * - `image/*` MIME → `FileImage`
+ * - `text/*` MIME → `FileText`
+ * - `application/pdf` → `FileText`
+ * - extension fallback for `.csv`, `.txt`, `.md`, `.json` → `FileText`
+ * - extension fallback for `.png`, `.jpg`, `.jpeg`, `.gif`, `.webp`, `.svg` → `FileImage`
+ * - everything else → `File` (generic)
+ *
+ * Private to the FileUpload directory — not re-exported from the package.
+ */
+export function iconForFile(file: File): LucideIcon {
+  const mime = file.type;
+  if (mime.startsWith('image/')) return FileImage;
+  if (mime.startsWith('text/')) return FileText;
+  if (mime === 'application/pdf') return FileText;
+
+  // Extension fallback for files where the browser didn't fill in `type`
+  // (rare but happens — empty MIME on .csv from some OSes).
+  const ext = file.name.slice(file.name.lastIndexOf('.')).toLowerCase();
+  if (ext === '.csv' || ext === '.txt' || ext === '.md' || ext === '.json') return FileText;
+  if (
+    ext === '.png' ||
+    ext === '.jpg' ||
+    ext === '.jpeg' ||
+    ext === '.gif' ||
+    ext === '.webp' ||
+    ext === '.svg'
+  ) {
+    return FileImage;
+  }
+
+  return FileIcon;
+}

package/src/components/FileUpload/index.ts

@@ -0,0 +1,2 @@
+export { FileUpload } from './FileUpload';
+export type { FileUploadProps, FileEntry, FileUploadStatus, FileRejectReason } from './FileUpload';

package/src/components/FilterChip/FilterChip.module.scss

@@ -0,0 +1,61 @@
+@use '../../styles/mixins' as *;
+@use './FilterChip.tokens';
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--filter-chip-gap);
+  padding: var(--filter-chip-padding-y) var(--filter-chip-padding-x);
+  border: var(--border-width) solid var(--filter-chip-border-color);
+  border-radius: var(--filter-chip-radius);
+  background: var(--filter-chip-bg);
+}
+
+.body {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--filter-chip-gap);
+  padding: 0;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--filter-chip-radius);
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+}
+
+.value {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--filter-chip-value-gap);
+}
+
+.dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--filter-chip-dismiss-padding);
+  border: none;
+  background: transparent;
+  border-radius: var(--filter-chip-dismiss-radius);
+  cursor: pointer;
+  color: var(--filter-chip-dismiss-fg);
+
+  &:hover {
+    background: var(--filter-chip-dismiss-bg-hover);
+    color: var(--filter-chip-dismiss-fg-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}

package/src/components/FilterChip/FilterChip.tokens.scss

@@ -0,0 +1,25 @@
+// FilterChip.tokens.scss — Component-scoped tokens for <FilterChip>. The
+// pill chrome (bg/border/radius/padding) plus the dismiss-button hover state
+// are tokenized here. The per-tone value-dot colors are driven by a
+// [data-tone] attribute selector in FilterChip.module.scss and intentionally
+// stay on palette tokens — overriding the dot color is not a chip-level
+// concern.
+:root {
+  // Chip pill
+  --filter-chip-gap: var(--space-2);
+  --filter-chip-padding-y: var(--space-1);
+  --filter-chip-padding-x: var(--space-2);
+  --filter-chip-border-color: var(--color-border);
+  --filter-chip-radius: var(--radius-sm);
+  --filter-chip-bg: var(--color-bg);
+
+  // Value cluster (label + dot + value text)
+  --filter-chip-value-gap: var(--space-2);
+
+  // Dismiss button
+  --filter-chip-dismiss-padding: var(--space-05);
+  --filter-chip-dismiss-radius: var(--radius-sm);
+  --filter-chip-dismiss-fg: var(--color-fg-subtle);
+  --filter-chip-dismiss-bg-hover: var(--color-bg-muted);
+  --filter-chip-dismiss-fg-hover: var(--color-fg);
+}

package/src/components/FilterChip/FilterChip.tsx

@@ -0,0 +1,208 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import clsx from 'clsx';
+import { X } from 'lucide-react';
+import { Text } from '../Text';
+import { type BadgeTone } from '../Badge';
+import { Dot } from '../Dot';
+import { type PaletteColor } from '../../palette';
+import { useTranslation } from '../../i18n/useTranslation';
+import styles from './FilterChip.module.scss';
+
+// ----------------------------------------------------------------------------
+// Public types
+// ----------------------------------------------------------------------------
+
+export interface FilterChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+  /**
+   * Dismiss callback. When provided, the chip renders a trailing `×`
+   * button wired to this handler; the chip itself does NOT animate or
+   * unmount — the consumer's state update must remove the chip. Omit
+   * the prop to render a read-only chip with no dismiss button.
+   */
+  onDismiss?: () => void;
+
+  /**
+   * Override the dismiss button's `aria-label`. Defaults to the i18n value
+   * at `filterChip.dismiss` (`'Remove filter'` in English) when omitted OR
+   * empty — an empty string is not an explicit name, so it takes the default
+   * too. Pass a
+   * contextual label (e.g., `'Remove Event: auth.* filter'`) when the
+   * chip's filter category isn't obvious from the surrounding
+   * screen-reader context.
+   */
+  dismissLabel?: string;
+
+  /**
+   * Makes the chip BODY interactive: when provided, the Label/Value content is
+   * wrapped in a `<button>` that fires `onActivate` on click and Enter/Space
+   * (native button keyboard). Use for *editable* filters — e.g. a date-range
+   * chip whose body re-opens its range-picker. Wire it to a controlled
+   * `<Popover open onOpenChange>` to open an editor popover.
+   *
+   * The dismiss ✕ stays a separate button whose click stops propagation, so
+   * removing the filter never fires `onActivate` (and never bubbles to an
+   * ancestor click handler). Omit for a read-only chip (current behavior).
+   *
+   * Controlled-only: FilterChip does NOT consume `Popover.Trigger`'s injected
+   * ref/ARIA, so wrapping it in `<Popover.Trigger>` won't auto-wire it — drive
+   * the popover's `open` yourself from this callback (see the example above).
+   */
+  onActivate?: () => void;
+
+  /**
+   * Open state of the disclosure the body opens (e.g. the editor popover),
+   * surfaced as `aria-expanded` on the body button (which also carries
+   * `aria-haspopup="dialog"`). Only meaningful with
+   * `onActivate`. Omit if the body doesn't toggle a disclosure.
+   */
+  expanded?: boolean;
+
+  /**
+   * One or two `FilterChip.Label` / `FilterChip.Value` subcomponents.
+   * Use both for `Label: Value` chips; pass just a Value for chips
+   * where the category is implicit (e.g., a tenant slug).
+   */
+  children: ReactNode;
+}
+
+export interface FilterChipLabelProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * The category text — typically a noun describing the filter
+   * dimension (`Event`, `Tenant`, `Stage`, `Owner`). Rendered muted so
+   * the Value is the visual anchor.
+   */
+  children: ReactNode;
+}
+
+export interface FilterChipValueProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Optional full `PaletteColor` (one of the 30 named categorical colors)
+   * for the leading dot. Use when the 6 semantic tones aren't enough to
+   * distinguish filter categories (e.g., per-tenant or per-tag color
+   * coding that matches an `OptionsPicker` group). Takes precedence over
+   * `tone` when both are set. Renders a bare `<Dot>` in that color.
+   */
+  color?: PaletteColor;
+
+  /**
+   * Optional dot tone. When set, prefixes a 6px colored circle before
+   * the value text — use to distinguish filter categories that share
+   * a screen (e.g., event filters get a tone-matched dot, tenant
+   * filters get no dot). Reuses Badge's tone palette: `neutral`,
+   * `info`, `success`, `warning`, `danger`, `purple`. Omit for plain
+   * text values. For a richer categorical color, use `color` instead.
+   */
+  tone?: BadgeTone;
+
+  /**
+   * The value text — what the filter is actually filtering by
+   * (`auth.*`, `beta`, `Won`). Pair with an optional `tone` / `color`
+   * dot to categorize.
+   */
+  children: ReactNode;
+}
+
+// ----------------------------------------------------------------------------
+// Root
+// ----------------------------------------------------------------------------
+
+/**
+ * Dismissible "active filter" pill with optional `Label` and `Value` children.
+ * @see docs/components/FilterChip.md
+ */
+const FilterChipRoot = forwardRef<HTMLDivElement, FilterChipProps>(function FilterChipRoot(
+  { onDismiss, dismissLabel, onActivate, expanded, className, children, ...rest },
+  ref,
+) {
+  const t = useTranslation();
+  return (
+    <div
+      ref={ref}
+      className={clsx(styles.chip, className)}
+      // {...rest} first so role="group" wins — locked semantics per Hard rule 6 pattern B.
+      {...rest}
+      role="group"
+    >
+      {onActivate ? (
+        <button
+          type="button"
+          className={styles.body}
+          onClick={onActivate}
+          aria-haspopup="dialog"
+          aria-expanded={expanded}
+        >
+          {children}
+        </button>
+      ) : (
+        children
+      )}
+      {onDismiss && (
+        <button
+          type="button"
+          className={styles.dismiss}
+          // stopPropagation: removing the filter must not fire the body activate
+          // OR bubble to a wrapping Popover.Trigger / ancestor click handler.
+          onClick={(e) => {
+            e.stopPropagation();
+            onDismiss();
+          }}
+          aria-label={dismissLabel || t('filterChip.dismiss')}
+        >
+          <X size={12} aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  );
+});
+
+// ----------------------------------------------------------------------------
+// Label
+// ----------------------------------------------------------------------------
+
+/**
+ * Label slot for the chip's filter category.
+ * @see docs/components/FilterChip.md
+ */
+const FilterChipLabel = forwardRef<HTMLSpanElement, FilterChipLabelProps>(function FilterChipLabel(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <span ref={ref} className={clsx(styles.label, className)} {...rest}>
+      <Text as="span" size="sm" tone="muted">
+        {children}
+      </Text>
+    </span>
+  );
+});
+
+// ----------------------------------------------------------------------------
+// Value
+// ----------------------------------------------------------------------------
+
+/**
+ * Value slot for the chip's filter value, with an optional tone or palette-color dot.
+ * @see docs/components/FilterChip.md
+ */
+const FilterChipValue = forwardRef<HTMLSpanElement, FilterChipValueProps>(function FilterChipValue(
+  { color, tone, className, children, ...rest },
+  ref,
+) {
+  return (
+    <span ref={ref} className={clsx(styles.value, className)} {...rest}>
+      {(color || tone) && <Dot color={color} tone={tone} />}
+      <Text as="span" size="sm">
+        {children}
+      </Text>
+    </span>
+  );
+});
+
+// ----------------------------------------------------------------------------
+// Compound export
+// ----------------------------------------------------------------------------
+
+export const FilterChip = Object.assign(FilterChipRoot, {
+  Label: FilterChipLabel,
+  Value: FilterChipValue,
+});

package/src/components/FilterChip/index.ts

@@ -0,0 +1,5 @@
+export { FilterChip } from './FilterChip';
+export type { FilterChipProps, FilterChipLabelProps, FilterChipValueProps } from './FilterChip';
+// Re-export the tone type so consumers using FilterChip.Value tone={...}
+// can import the union from the same module rather than reaching into Badge.
+export type { BadgeTone } from '../Badge';

package/src/components/FlowCanvas/FlowCanvas.module.scss

@@ -0,0 +1,329 @@
+@use './FlowCanvas.tokens';
+@use '../../styles/mixins' as *;
+
+.root {
+  // `relative` is allowed by Rule 4 as an internal child anchor: nodes are
+  // absolutely positioned over an SVG edge underlay inside the stage.
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--flow-canvas-bg);
+  background-image: radial-gradient(var(--flow-canvas-grid-dot) 1px, transparent 1px);
+  background-size: var(--flow-canvas-grid-size) var(--flow-canvas-grid-size);
+  border-radius: var(--flow-node-radius);
+  touch-action: none; // claim touch drags so the page doesn't scroll instead
+  cursor: grab;
+
+  // Never paint the UA focus outline — our indicator is the box-shadow ring
+  // below. A `:focus-visible` reset misses a plain MOUSE `:focus` (e.g. clicking
+  // empty canvas), where Chrome on Windows paints `outline: auto` around the
+  // whole role=application canvas. Suppress it in every focus state.
+  outline: none;
+
+  // Canvas keyboard-focus ring. Since #505 the mixin PAINTS an outline rather
+  // than suppressing one — the raw UA outline is killed by the unconditional
+  // `outline: none` above instead, which applies in every focus state.
+  &:focus-visible {
+    @include focus-ring;
+  }
+
+  // Keyboard roving moves real DOM focus onto the child node/edge (which then
+  // shows its own ring/recolor), but selecting an edge by CLICK leaves focus on
+  // this root (SVG paths don't take reliable click-focus), so the ring above
+  // would wrap the WHOLE canvas in a loose rounded box that reads as a giant
+  // selection frame around the selected item. That item already shows its own
+  // highlight (node accent border / edge recolor), so drop the redundant ring
+  // whenever a selection is present. The attribute is gated on the selection
+  // resolving to a rendered item (see FlowCanvas.tsx), so a dangling selection
+  // keeps the ring — the focused-but-empty state stays visible for keyboard
+  // users (WCAG 2.4.7).
+  // `outline: none`, not `box-shadow: none`: the focus-ring mixin paints an
+  // outline since #505, so cancelling box-shadow cancels nothing and the whole
+  // canvas got its giant frame back. This also suppresses the UA outline, which
+  // the old wording credited to the mixin.
+  &[data-flow-has-selection]:focus-visible {
+    outline: none;
+  }
+}
+
+.rootPanning {
+  cursor: grabbing;
+}
+
+.rootMaximized {
+  // stylelint-disable-next-line declaration-property-value-disallowed-list -- must be fixed to fill the viewport
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  width: 100dvw;
+  height: 100vh;
+  height: 100dvh;
+  z-index: var(--flow-canvas-maximized-z);
+  border-radius: 0;
+}
+
+.stage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+}
+
+.edges {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: visible;
+  pointer-events: none;
+
+  // The global reset clamps `svg { max-width: 100% }` — and this svg's
+  // containing block (.stage) is a zero-width absolute anchor, so the clamp
+  // resolves to 0. A zero-width SVG viewport DISABLES RENDERING per spec:
+  // without this override no edge ever paints in a real browser (jsdom
+  // applies no CSS, so unit tests cannot catch it).
+  max-width: none;
+}
+
+.edgePath {
+  fill: none;
+  pointer-events: none;
+  stroke: var(--flow-edge-stroke);
+  stroke-width: var(--flow-edge-width);
+}
+
+.edgePath[data-active='true'] {
+  stroke: var(--flow-edge-stroke-active);
+}
+
+.edgeHit {
+  fill: none;
+  cursor: pointer;
+  pointer-events: stroke;
+  stroke: transparent;
+  stroke-width: var(--flow-edge-hit-width);
+
+  // Keep the 24px corridor in SCREEN pixels regardless of stage zoom —
+  // without this, fit-zoom < 1 shrinks the only pointer target of an
+  // unlabeled edge below the WCAG 2.5.8 minimum.
+  vector-effect: non-scaling-stroke;
+
+  // Never paint the UA focus outline. This corridor is a WIDE invisible stroke,
+  // so an `outline: auto` traces a big rounded box around the edge's bounding
+  // area. A `:focus-visible`-scoped reset is NOT enough: a MOUSE click gives
+  // plain `:focus` (not `-visible`), and Chrome on Windows paints `outline:
+  // auto` in that state (macOS Chromium doesn't — hence it only reproduces on
+  // Windows). Focus/selection is shown by recoloring the visible .edgePath
+  // (below / [data-active]), so suppress the outline outright.
+  outline: none;
+}
+
+// Keyboard focus (E-key edge cycling) must stay visible even when the
+// consumer controls `selection` and pins it elsewhere — selection-follows-
+// focus cannot flip `data-active` then. Paint the sibling visible path
+// instead of the hit path itself: with `pointer-events: stroke` the hit
+// corridor IS the stroke, so restyling .edgeHit's stroke-width on focus
+// would collapse the clickable target from the wide hit width down to the
+// visible edge width (WCAG 2.5.8 target size).
+g:has(> .edgeHit:focus-visible) > .edgePath {
+  stroke: var(--flow-edge-stroke-active);
+}
+
+.markerFill {
+  fill: var(--flow-edge-stroke);
+}
+
+.markerFillActive {
+  fill: var(--flow-edge-stroke-active);
+}
+
+.ghostEdge {
+  fill: none;
+  pointer-events: none;
+  stroke: var(--flow-edge-stroke-active);
+  stroke-dasharray: var(--space-1) var(--space-1);
+  stroke-width: var(--flow-edge-width);
+}
+
+// Edge rewire endpoint handles — an HTML overlay ABOVE the nodes (see
+// FlowCanvas.tsx), not SVG inside the edge layer, so a node <div> can't occlude
+// the grab target. Positioned in screen px, so the hit size and dot stay
+// constant regardless of stage zoom.
+.endpointHandle {
+  position: absolute;
+
+  // Screen-constant hit target (WCAG 2.5.8) larger than the visible dot.
+  width: var(--flow-handle-hit-size);
+  height: var(--flow-handle-hit-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(-50%, -50%); // center on the endpoint's screen point
+  cursor: grab;
+  z-index: 1; // above the nodes within the canvas
+}
+
+.endpointDot {
+  width: var(--flow-endpoint-size);
+  height: var(--flow-endpoint-size);
+  background: var(--flow-endpoint-bg);
+  border: var(--border-width-emphasis) solid var(--flow-endpoint-ring);
+  border-radius: var(--radius-full);
+}
+
+.node {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  width: max-content;
+  gap: var(--flow-node-gap);
+  padding: var(--flow-node-padding-y) var(--flow-node-padding-x);
+  background: var(--flow-node-bg);
+  border: var(--border-width) solid var(--flow-node-border);
+  border-left: var(--flow-node-accent-width) solid var(--flow-node-color);
+  border-radius: var(--flow-node-radius);
+  box-shadow: var(--flow-node-shadow);
+  color: var(--color-fg);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+
+  // Never paint the UA focus outline — selection is the accent border
+  // ([data-selected]) and keyboard focus is the glow ring (:focus-visible). A
+  // `:focus-visible` reset misses a plain MOUSE `:focus`, where Chrome on
+  // Windows paints `outline: auto` around this role=button node.
+  outline: none;
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+.node[data-selected='true'] {
+  // Four-value form: highlight three sides but keep the left accent stripe on
+  // the node's own color — selection must not erase per-node identity.
+  // Deliberately NO ring here: the glow ring is reserved for keyboard focus
+  // (:focus-visible above), so mouse clicks don't read as focus outlines —
+  // the accent border alone marks the selection.
+  border-color: var(--color-accent) var(--color-accent) var(--color-accent) var(--flow-node-color);
+}
+
+.node[data-dragging='true'] {
+  cursor: grabbing;
+  box-shadow: var(--shadow-lg);
+}
+
+// Decorative — marks a valid connection drop target, not focus. Stays a
+// box-shadow so it cannot suppress a real focus indicator (#505).
+.node[data-connect-target='true'] {
+  box-shadow: 0 0 0 var(--ring-width) var(--ring-success);
+}
+
+.nodeLabel {
+  white-space: nowrap;
+}
+
+.handle {
+  // The span is the (invisible) 24px pointer target — WCAG 2.5.8: this is
+  // the only pointer path that creates an edge, and a missed press starts a
+  // node drag instead. The visible dot is the ::after.
+  position: absolute;
+  top: 50%;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--flow-handle-hit-size);
+  height: var(--flow-handle-hit-size);
+  cursor: crosshair;
+  opacity: var(--opacity-hidden);
+  transform: translate(50%, -50%);
+  transition: opacity var(--transition-fast);
+}
+
+.handle::after {
+  content: '';
+  width: var(--flow-handle-size);
+  height: var(--flow-handle-size);
+  background: var(--flow-handle-bg);
+  border-radius: var(--radius-full);
+}
+
+.node:hover .handle,
+.node:focus-visible .handle {
+  opacity: var(--opacity-visible);
+}
+
+.chip {
+  position: absolute;
+  width: max-content;
+  padding: var(--flow-chip-padding-y) var(--flow-chip-padding-x);
+  background: var(--flow-chip-bg);
+  border: var(--border-width) solid var(--flow-chip-border);
+  border-radius: var(--flow-chip-radius);
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+  cursor: pointer;
+  transform: translate(-50%, -50%);
+  user-select: none;
+}
+
+.controls {
+  position: absolute;
+  bottom: var(--space-3);
+  left: var(--space-3);
+  display: flex;
+  gap: var(--space-1);
+}
+
+.controlsTopLeft {
+  position: absolute;
+  top: var(--space-3);
+  left: var(--space-3);
+  display: flex;
+  gap: var(--space-1);
+}
+
+.controlsTopRight {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  display: flex;
+  gap: var(--space-1);
+}
+
+.selectionActions {
+  position: absolute;
+  z-index: var(--flow-selection-actions-z);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+
+  // Node anchor = the node's top-right corner; nudge the toolbar just outside
+  // it (up-right) so it doesn't sit on top of the node.
+  transform: translate(
+    var(--flow-selection-actions-offset-x),
+    var(--flow-selection-actions-offset-y)
+  );
+}
+
+// Edge anchor = the edge's MIDPOINT. Center the toolbar horizontally on it and
+// lift the whole bar above the edge by a small gap, so it floats "by the
+// middle" of the edge without covering the line itself.
+.selectionActions[data-flow-selection-edge] {
+  transform: translate(-50%, calc(-100% - var(--space-2)));
+}
+
+.srOnly {
+  @include visually-hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .handle {
+    transition: none;
+  }
+}