@agent-native/core 0.124.0 → 0.124.1

package/corpus/templates/crm/app/components/crm/shared/attribute-value.ts

@@ -423,6 +423,57 @@ export function valueSpecFor(attribute: CrmValueShape): CrmValueSpec {
   return ATTRIBUTE_VALUE_SPECS[attribute.attributeType];
 }
 
+/**
+ * The `<input>` type an inline text editor must use, for every surface.
+ *
+ * A numeric attribute deliberately gets `text`, not `number`. `<input
+ * type="number">` reports `value === ""` for anything the control cannot parse
+ * — a half-typed "91e", "1,2", a lone "-" — while `validity.badInput` is true.
+ * That empty string reaches `parse` as "the user cleared the field" and is
+ * stored as null, so a typed amount silently becomes NULL. Keeping the raw text
+ * lets `parse` fail loudly with `not-a-number` instead. `inputMode` keeps the
+ * numeric keypad on touch.
+ */
+export function editorInputType(attribute: CrmValueShape): {
+  type: CrmValueSpec["inputType"];
+  inputMode?: "decimal";
+} {
+  // A multi value is a comma-separated list, which no typed input accepts.
+  if (attribute.multi) return { type: "text" };
+  const spec = valueSpecFor(attribute);
+  if (spec.inputType === "number") {
+    return { type: "text", inputMode: "decimal" };
+  }
+  return { type: spec.inputType };
+}
+
+const REFERENCE_OBJECT_KINDS: Record<string, string> = {
+  accounts: "account",
+  people: "person",
+  opportunities: "opportunity",
+};
+
+/**
+ * The record kind a reference picker may narrow its search to, read from
+ * `config.reference.allowedObjectTypes`.
+ *
+ * `null` means "do not narrow": either the attribute declares no scope, or it
+ * declares several object types, which `list-crm-records` takes one `kind` at a
+ * time and cannot express. Picking one of several would hide exactly the record
+ * the user is looking for, so an unexpressible scope stays open and the picker
+ * says which types the attribute accepts.
+ */
+export function referenceSearchKind(attribute: CrmValueShape): string | null {
+  const reference = attribute.config?.reference;
+  if (!reference || typeof reference !== "object") return null;
+  const allowed = (reference as { allowedObjectTypes?: unknown })
+    .allowedObjectTypes;
+  if (!Array.isArray(allowed) || allowed.length !== 1) return null;
+  const objectType = allowed[0];
+  if (typeof objectType !== "string") return null;
+  return REFERENCE_OBJECT_KINDS[objectType] ?? null;
+}
+
 /** Every type has a spec and no system-only type is editable anywhere. */
 export function assertValueRegistryComplete(): void {
   for (const type of CRM_ATTRIBUTE_TYPES) {
@@ -566,6 +617,39 @@ export function editorDraftFor(
   return state.seed === seed ? state : { draft: seed, seed };
 }
 
+// ---------------------------------------------------------------------------
+// Reference values
+// ---------------------------------------------------------------------------
+
+/** The individual records a reference value names, in stored order. */
+export function referenceMembers(
+  value: CrmAttributeValue | undefined,
+): string[] {
+  if (value === undefined || value === null) return [];
+  return (Array.isArray(value) ? value : [value])
+    .filter((entry): entry is string => typeof entry === "string")
+    .filter((entry) => entry !== "");
+}
+
+/**
+ * The value a reference picker produces for `pick`. A single reference is
+ * replaced outright; a multi reference toggles membership and collapses to
+ * `null` — not `[]` — when the last member goes, because an empty array and no
+ * value must not read as two different states downstream.
+ */
+export function toggleReferenceValue(
+  value: CrmAttributeValue | undefined,
+  pick: string,
+  multi: boolean,
+): CrmEditableValue {
+  if (!multi) return pick;
+  const members = referenceMembers(value);
+  const next = members.includes(pick)
+    ? members.filter((entry) => entry !== pick)
+    : [...members, pick];
+  return next.length ? next : null;
+}
+
 /**
  * Days a value has sat past its status option's `targetDays`. `null` when the
  * attribute is not a status, has no SLA, or has no known `activeFrom` — an

package/corpus/templates/crm/app/components/crm/shared/ui-tokens.ts

@@ -0,0 +1,89 @@
+/**
+ * The TS half of the CRM surface token layer. Everything expressible as CSS
+ * lives in `app/global.css`; this file exists only for the values that must be
+ * *numbers* in JS — virtualizer row math, board layout, resizable panel
+ * clamps, timers — plus the two bits of shared geometry logic.
+ *
+ * Read `README-tokens.md` in this directory before styling a surface.
+ */
+
+/** Fixed. There is no density toggle; every consumer must agree on 36. */
+export const ROW_HEIGHT = 36;
+export const HEADER_HEIGHT = 40;
+
+export const BOARD_CARD_WIDTH = 246;
+export const BOARD_COLUMN_WIDTH = 268;
+export const BOARD_CARD_GAP = 8;
+export const BOARD_COLUMN_HEADER_HEIGHT = 36;
+
+/** Record page is two panes: a resizable left panel plus main content. */
+export const RECORD_PANEL_MIN_WIDTH = 320;
+export const RECORD_MAIN_MIN_WIDTH = 350;
+
+/** Milliseconds, mirroring --motion-* in global.css. Use these only for JS
+ *  timers; anything CSS can express should use the vars instead. */
+export const MOTION = {
+  fast: 80,
+  comfortable: 140,
+  breezy: 200,
+  sluggish: 300,
+  sloth: 400,
+} as const;
+
+/** Cell selection ring geometry. The ring overlaps the shared 1px divider on
+ *  three sides so a range reads as one outline rather than a double line. */
+export const SELECTION_RING_INSET = "-1px -1px -1px 0";
+
+export interface OverlayOptions {
+  selected?: boolean;
+  /** Cells: select with the content color at 8% instead of the accent at 10%,
+   *  because the row underneath already carries the accent tint. */
+  soft?: boolean;
+  className?: string;
+}
+
+/**
+ * The one hover/selection implementation. Returns the overlay class plus the
+ * state attribute it keys off; spread it onto the row, cell, or card.
+ */
+export function overlayProps(options: OverlayOptions = {}): {
+  className: string;
+  "data-selected"?: "true";
+} {
+  return {
+    className: [
+      "crm-overlay",
+      options.soft && "crm-overlay-soft",
+      options.className,
+    ]
+      .filter(Boolean)
+      .join(" "),
+    ...(options.selected ? { "data-selected": "true" as const } : {}),
+  };
+}
+
+export interface SelectionEdges {
+  top: boolean;
+  right: boolean;
+  bottom: boolean;
+  left: boolean;
+}
+
+/**
+ * A selected range is drawn per cell, so a corner may only round where the two
+ * border segments that form it are both present. Rounding by cell position
+ * instead of by edge pair is the usual bug: it rounds interior corners that
+ * have no visible border and the range reads as loose tiles.
+ */
+export function selectionCornerRadius(
+  edges: SelectionEdges,
+  radius = 4,
+): string {
+  const corner = (a: boolean, b: boolean) => (a && b ? `${radius}px` : "0");
+  return [
+    corner(edges.top, edges.left),
+    corner(edges.top, edges.right),
+    corner(edges.bottom, edges.right),
+    corner(edges.bottom, edges.left),
+  ].join(" ");
+}

package/corpus/templates/crm/app/global.css

@@ -40,6 +40,55 @@
   --sidebar-accent-foreground: 0 0% 15%;
   --sidebar-border: 0 0% 90%;
   --sidebar-ring: 0 0% 40%;
+
+  /* --- CRM surface tokens -------------------------------------------------
+     Geometry for the grid/record/board surfaces. Utilities generated from
+     these live in the `@theme inline` block below; the raw vars here exist for
+     `calc()`, virtualizer math, and arbitrary values. */
+
+  /* Fixed grid metrics. There is no density toggle: rows are always 36px. */
+  --crm-row-h: 36px;
+  --crm-header-h: 40px;
+  --crm-cell-px: 12px;
+  --crm-cell-pt: 8px;
+
+  /* Hairline used on BOTH grid axes. Near-invisible by design — a divider you
+     can read at a glance is already too dark. */
+  --crm-hairline: hsl(var(--foreground) / 0.07);
+
+  /* Overlay alphas. Hover and selection animate this OPACITY on a dedicated
+     layer; they never swap background-color (see `.crm-overlay`). */
+  --crm-overlay-hover: 0.04;
+  --crm-overlay-hover-strong: 0.08;
+  --crm-overlay-selected: 0.1;
+
+  /* The single knob for "selected/active" tint. Our skin has no brand hue, so
+     selection derives from --primary; repoint this one var if that changes. */
+  --crm-accent: var(--primary);
+
+  /* Shadows are blue-black, never neutral grey, and always carry a hairline
+     ring in the same stack so elevation and outline can never disagree. */
+  --crm-shadow: 219 39% 18%;
+  --crm-shadow-sticky: 6px 0 16px 4px hsl(var(--crm-shadow) / 0.12);
+  --crm-elevation-1:
+    0 0 0 1px hsl(var(--crm-shadow) / 0.06),
+    0 1px 2px -1px hsl(var(--crm-shadow) / 0.1);
+  --crm-elevation-2:
+    0 0 0 1px hsl(var(--crm-shadow) / 0.06),
+    0 4px 12px -2px hsl(var(--crm-shadow) / 0.12),
+    0 2px 4px -2px hsl(var(--crm-shadow) / 0.08);
+  --crm-elevation-3:
+    0 0 0 1px hsl(var(--crm-shadow) / 0.05),
+    0 16px 40px -8px hsl(var(--crm-shadow) / 0.2),
+    0 4px 10px -4px hsl(var(--crm-shadow) / 0.1);
+
+  /* Motion scale. --motion-comfortable is the app default (see
+     --default-transition-duration). Zeroed under prefers-reduced-motion. */
+  --motion-fast: 80ms;
+  --motion-comfortable: 140ms;
+  --motion-breezy: 200ms;
+  --motion-sluggish: 300ms;
+  --motion-sloth: 400ms;
 }
 
 .dark {
@@ -76,6 +125,61 @@
   --sidebar-accent-foreground: 0 0% 90%;
   --sidebar-border: 0 0% 20%;
   --sidebar-ring: 0 0% 60%;
+
+  /* Dark dividers stay subtractive — a line darker than the surface, not a
+     lighter one. An alpha-white hairline here reads as a seam, not a grid. */
+  --crm-hairline: hsl(0 0% 0% / 0.16);
+  --crm-shadow: 219 45% 6%;
+  --crm-shadow-sticky: 6px 0 16px 4px hsl(var(--crm-shadow) / 0.4);
+  --crm-elevation-1:
+    0 0 0 1px hsl(0 0% 100% / 0.06), 0 1px 2px -1px hsl(var(--crm-shadow) / 0.5);
+  --crm-elevation-2:
+    0 0 0 1px hsl(0 0% 100% / 0.06),
+    0 4px 12px -2px hsl(var(--crm-shadow) / 0.55),
+    0 2px 4px -2px hsl(var(--crm-shadow) / 0.4);
+  --crm-elevation-3:
+    0 0 0 1px hsl(0 0% 100% / 0.05),
+    0 16px 40px -8px hsl(var(--crm-shadow) / 0.65),
+    0 4px 10px -4px hsl(var(--crm-shadow) / 0.45);
+}
+
+/* `inline` so every value resolves against the element's own cascade — that is
+   what lets one utility follow --foreground/--crm-shadow across light/dark. */
+@theme inline {
+  /* Radii, by the thing they wrap. `rounded-lg` (8px) already covers buttons
+     and menu items, so it is not restated here. */
+  --radius-badge: 4px;
+  --radius-chip: 10px;
+  --radius-row: 11px;
+  --radius-card: 12px;
+  --radius-column: 16px;
+  --radius-panel: 20px;
+  --radius-avatar-company: 30%;
+
+  /* Content ramp: alpha over the surface, never solid greys, so text
+     composites correctly on tinted cells and hover overlays. */
+  --color-content-secondary: hsl(var(--foreground) / 0.63);
+  --color-content-tertiary: hsl(var(--foreground) / 0.5);
+  --color-content-ghost: hsl(var(--foreground) / 0.38);
+  --color-hairline: var(--crm-hairline);
+
+  --shadow-e1: var(--crm-elevation-1);
+  --shadow-e2: var(--crm-elevation-2);
+  --shadow-e3: var(--crm-elevation-3);
+
+  --tracking-ui: -0.02em;
+  --tracking-body: -0.01em;
+
+  /* 400/500/600 only. Capping the weight namespace means a stray `font-bold`
+     anywhere in the app renders 600 instead of shipping a heavier voice. */
+  --font-weight-bold: 600;
+  --font-weight-extrabold: 600;
+  --font-weight-black: 600;
+
+  /* Makes every bare `transition-*` in the app 140ms without touching a
+     component. Named steps stay available as duration-[var(--motion-*)]. */
+  --default-transition-duration: var(--motion-comfortable);
+  --ease-drop: cubic-bezier(0.45, 0, 0.2, 1);
 }
 
 @layer base {
@@ -87,6 +191,72 @@
     @apply bg-background text-foreground;
     font-family: "Inter Variable", Inter, sans-serif;
     font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+    letter-spacing: var(--tracking-ui);
+  }
+  /* Body and caption sizes ride a touch looser than the -0.02em UI default.
+     Zero specificity, so any `tracking-*` utility still wins. */
+  :where(p, small, figcaption, .text-sm, .text-xs) {
+    letter-spacing: var(--tracking-body);
+  }
+  :where(b, strong) {
+    font-weight: 600;
+  }
+}
+
+@layer components {
+  /* Hover/selection primitive. The overlay is a real layer whose OPACITY
+     animates; swapping background-color instead loses the composite over
+     tinted cells and cannot cross-fade. Host may be static or positioned —
+     Tailwind's position utilities sit in a later layer and still win. */
+  .crm-overlay {
+    position: relative;
+    isolation: isolate;
+  }
+  .crm-overlay::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    pointer-events: none;
+    background: hsl(var(--foreground));
+    opacity: 0;
+    transition:
+      opacity var(--motion-comfortable) ease-in-out,
+      background-color var(--motion-comfortable) ease-in-out;
+  }
+  .crm-overlay:hover::before,
+  .crm-overlay[data-hovered="true"]::before {
+    opacity: var(--crm-overlay-hover);
+  }
+  .crm-overlay[data-selected="true"]::before {
+    background: hsl(var(--crm-accent));
+    opacity: var(--crm-overlay-selected);
+  }
+  /* Cells select without the accent tint — the row already carries it. */
+  .crm-overlay-soft[data-selected="true"]::before {
+    background: hsl(var(--foreground));
+    opacity: var(--crm-overlay-hover-strong);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-fast: 0ms;
+    --motion-comfortable: 0ms;
+    --motion-breezy: 0ms;
+    --motion-sluggish: 0ms;
+    --motion-sloth: 0ms;
+  }
+  /* Zeroing the vars only covers what opts into them. 0.01ms rather than 0 so
+     transitionend/animationend still fire for components that unmount on them. */
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
   }
 }
 

package/corpus/templates/crm/app/i18n/en-US.ts

@@ -358,6 +358,7 @@ const messages = {
     },
   },
   record: {
+    resizePanel: "Resize panel",
     loadFailedTitle: "This record could not be loaded",
     loadFailedDescription:
       "CRM could not read this record. It may be outside the records you can access.",

package/corpus/templates/crm/changelog/2026-07-26-a-half-typed-number-or-date-no-longer-saves-as-empty-the-fie.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-26
+---
+
+A half-typed number or date no longer saves as empty — the field says it cannot read the value and keeps what the record already had.

package/corpus/templates/crm/changelog/2026-07-26-a-new-pipeline-board-now-opens-with-stage-columns-a-summabl.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-26
+---
+
+A new pipeline board now opens with stage columns, a summable amount, and each card's values copied from the record it was added from

package/corpus/templates/crm/changelog/2026-07-26-record-reference-fields-like-account-can-now-be-linked-from-.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-26
+---
+
+Record reference fields like Account can now be linked from the record page: search records in a popover and see the link as a chip you can remove.

package/corpus/templates/crm/changelog/2026-07-26-retyping-a-record-field-now-replaces-the-old-value-instead-o.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-26
+---
+
+Retyping a record field now replaces the old value instead of appending to it, wherever the field is edited.

package/dist/collab/routes.d.ts

@@ -26,8 +26,8 @@ export declare const getCollabState: import("h3").EventHandlerWithFetch<import("
  * Body: { update: string (base64), requestSource?: string }
  */
 export declare const postCollabUpdate: import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
-    ok?: undefined;
     error: string;
+    ok?: undefined;
 } | {
     error?: undefined;
     ok: boolean;

package/dist/file-upload/actions/upload-image.d.ts

@@ -17,12 +17,12 @@ declare const _default: import("../../action.js").ActionDefinition<{
     id?: undefined;
     provider?: undefined;
 } | {
+    error?: undefined;
     configured?: undefined;
     connectPath?: undefined;
     url: string;
     id: string;
     provider: string;
-    error?: undefined;
 }>;
 export default _default;
 //# sourceMappingURL=upload-image.d.ts.map

package/dist/observability/routes.d.ts

@@ -62,7 +62,7 @@ export declare function createObservabilityHandler(): import("h3").EventHandlerW
     summary?: undefined;
     spans?: undefined;
     id?: undefined;
-    error?: undefined;
     ok: boolean;
+    error?: undefined;
 }>>;
 //# sourceMappingURL=routes.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.124.0",
+  "version": "0.124.1",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {