fix: a card's one-line name centred on its actions; numbers with templates shown as used; operands named — 0.10.65

.claude/CLAUDE.md

@@ -82,7 +82,7 @@ Two classes work together:
 
 **Pooling:** By default (`pooled` not set to `false`), sockets with the same URL share one underlying `WebSocket`. Use `pooled: false` for dedicated connections. The pool key becomes `${url}::${nanoid()}` for non-pooled.
 
-**Reconnect:** Triggered on close (unless code `4999` = intentional). Immediate first try, then `reconnectInterval` (default 5s) up to `maxReconnectTries` (default 10).
+**Reconnect:** Triggered on close (unless code `4999` = intentional, or the caller closed it: a socket closed while still connecting reports 1006) and when a handshake has not opened after `handshakeTimeout` (default 15s, `REQRAFT_WS_HANDSHAKE_TIMEOUT_MS`): a hung handshake sends no event at all, and Chromium queues every other socket to the same host and port behind it, so the socket is closed, its users get error + close 1006, and it is replaced. Immediate first try, then `reconnectInterval` (default 5s) up to `maxReconnectTries` (default 10). Each try first probes `system/pid`, aborted after `probeTimeout` (default 10s); the probe never gates the try. `remove()`/`close()` call off a pending try and its probe.
 
 **Heartbeat:** Sends `"ping"` every 3s; ignores `"pong"` in message handlers.
 
@@ -127,7 +127,7 @@ Shared form field components built on ReQore, exported from `src/components/form
 | Component     | Field Type                        |
 |---------------|-----------------------------------|
 | `Boolean`     | Toggle/checkbox                   |
-| `Color`       | Color picker (`react-color`)      |
+| `Color`       | Colour picker (`@uiw/react-color-saturation`, `-hue`, `-alpha`) with a preview, validated hex/RGB/opacity inputs, help and swatches |
 | `Cron`        | Cron expression editor            |
 | `File`        | File upload (`react-dropzone`)    |
 | `LongString`  | Multi-line text                   |
@@ -196,6 +196,14 @@ yarn build:test         # Type-check without emit
 - Wrap unit tests with `ReqraftProvider` (or at minimum `QueryClientProvider`)
 - Use `mock-socket` for WebSocket testing
 - Run: `yarn test` (unit) · `yarn test:stories [file-substring]` (stories) · `yarn precheck` (lint + unit + `build:test:prod`)
+- **The type catalogue comes from the server.** A data type's names (its display name, a label, and its
+  sentence form, its name inside a sentence), descriptions and conversions (`types_accepted`, `exact_match`) are
+  the Qorus server's (`QorusDataTypeCatalogue::Info`, served at `/system/qorus-type-info`): `defaultQorusTypes`
+  (`src/helpers/qorusTypeCatalogue.ts`) is reqraft's copy until the server's list arrives, and the condition and
+  type messages are worded with it. `__tests__/qorusTypeCatalogue.test.ts` compares it, field for field, with
+  `__tests__/fixtures/qorusTypeInfo.json`, a recorded answer of the server. When the server's catalogue changes,
+  record its answer again and fix the copy until the test passes:
+  `qrest -j system/qorus-type-info | yarn -s record:type-info`
 
 ### Storybook Stories & visual testing
 
@@ -222,6 +230,45 @@ yarn build:test         # Type-check without emit
   - CI reaches the live hq instance with a valid token, so a story that leaks a real
     request can pass in CI and hang locally. When a story passes in CI but times out on
     your machine, look for an unmocked request before anything else.
+  - The guard (`src/stories/realNetworkGuard.ts`) covers what an element loads as well:
+    an `<img>`, `<source>` or `srcset`, a frame, a script, a stylesheet, a medium. Anything
+    else loaded from another origin, such as a CSS `url()` or a font, is caught from the
+    browser's resource timing. A story image is a local asset or a `data:` URI, never a
+    server's URL. The template fixtures keep the URL the server gives an app's logo
+    (`<instance>/api/public/apps/<app>/logo`) and swap in a local copy
+    (`__fixtures__/templateFixtures.ts`, `src/stories/Data/qorusAppLogo.svg`), so import
+    the fixtures from there, not from the JSON.
+- **Touch stories carry `tags: ['touch']`.** A story whose play calls `withTouchScreen`
+  (`src/stories/touchScreen.ts`), directly or through a helper such as
+  `playTapIsDrawnOnAPhone`, is tagged `touch`. `yarn test:stories` runs those stories in their
+  own Vitest project (`storybook-touch`), whose browser context is a phone from the start
+  (Playwright's `isMobile` and `hasTouch`, 390×844), and before the others; an untagged one fails
+  with the reason. Never turn Chromium's touch emulation on or off over the DevTools protocol:
+  turning it off leaves the page with the machine's hover and pointer, not the mouse Playwright
+  launched it with, and a Linux CI runner has none, so every later story in the page finds
+  `(hover: none)` (it never shows on a Mac, which always reports a mouse).
+  `.storybook/vitest.setup.ts` checks every story's browser is its project's:
+  `(hover: hover) and (pointer: fine)`, or on the phone `(hover: none) and (pointer: coarse)`.
+- **Story clock — every story starts at the same instant.** Components write dates
+  relative to the clock ("3 hours ago"), so a story dated against the real clock captured
+  "1 month ago" in one build and "3 months ago" a few weeks later.
+  - `.storybook/preview.tsx` starts every story at `STORY_NOW` (30 June 2026, 12:00 UTC,
+    `src/stories/storyClock.ts`). Date story data from it with `storyMinutesAgo(n)`,
+    never with `Date.now()`, `new Date()` or a literal date of its own.
+  - The clock runs on in real time from `STORY_NOW`, because a stopped clock stops lodash's
+    `debounce` and `throttle` (ControlGroup's resize, Slate's selection sync). A story is
+    captured well inside the minute the shortest "… ago" takes to change.
+  - `parameters.mockdate` stops the clock at an instant, for a story whose every reading
+    must be the same (log lines stamped to the millisecond). `parameters.live` stories keep
+    the real clock.
+  - Every story also starts with an empty `ReqraftQueryClient`, as every unit test does: a
+    story must pass when it is opened on its own, not only after an earlier story fetched
+    what it needs. With the clock it is required too: an answer carries the time it was
+    fetched, and the clock takes each story back to `STORY_NOW`, so the previous story's
+    answers would read as fetched in the future and be served instead of its own mocks.
+    Anything else a page keeps from story to story with a timestamp needs the same reset.
+  - The capture browser runs in UTC and US English (`vitest.config.ts`), as CI does, so a
+    date written in the viewer's zone or language captures the same on every machine.
 - **Visual regression via Qlip** (not Chromatic): the story run captures snapshots through the `qlip` Vitest plugin. Upload is gated on `QLIP_UPLOAD_TOKEN` (`vitest.config.ts`), so **local runs capture but never upload** — PNGs land in `qlip/screenshots/<ts>/stories/auto/<StoryId>.png` (gitignored); read the PNG to verify a visual change. CI (`.github/workflows/tests.yml`) sets the token and uploads a build for dashboard review. The full visual-change flow + the `qlip` MCP review skill live in the imported `stacks/frontend/FRONTEND.md`.
 
 ## Code Patterns & Conventions

.github/consumer-imports.txt

@@ -0,0 +1,39 @@
+# The reqraft modules its consumers import. check-packed-files.mjs fails CI when one of them is not in the
+# npm package (package.json `files`), so a deep import cannot break in a consumer after a release.
+#
+# qorus-ide (wip/646-phase-b, 2026-10-10). Regenerate from a qorus-ide checkout with:
+#   grep -rhoE "['\"]@qoretechnologies/reqraft(/[^'\"]*)?['\"]" src __tests__ .storybook | tr -d "'\"" | sort -u
+@qoretechnologies/reqraft
+@qoretechnologies/reqraft/dist/components/Description/markdownRendererContext
+@qoretechnologies/reqraft/dist/components/form/engine/FormEngine
+@qoretechnologies/reqraft/dist/components/form/engine/FormFieldsSkeleton
+@qoretechnologies/reqraft/dist/components/form/engine/_structuredData/structuredData
+@qoretechnologies/reqraft/dist/components/form/engine/optionActions
+@qoretechnologies/reqraft/dist/components/form/engine/rendererTypes
+@qoretechnologies/reqraft/dist/components/form/engine/rowMenuContext
+@qoretechnologies/reqraft/dist/components/form/expressions/useRenderExpression
+@qoretechnologies/reqraft/dist/components/form/fields/allowed-values/AllowedValues
+@qoretechnologies/reqraft/dist/components/form/fields/binary/Binary
+@qoretechnologies/reqraft/dist/components/form/fields/emittedValues
+@qoretechnologies/reqraft/dist/components/form/fields/file/File
+@qoretechnologies/reqraft/dist/components/form/fields/object/Object
+@qoretechnologies/reqraft/dist/components/form/fields/select/SelectCollection
+@qoretechnologies/reqraft/dist/components/form/fields/template/TemplateField
+@qoretechnologies/reqraft/dist/contexts/FetchContext
+@qoretechnologies/reqraft/dist/contexts/StorageContext
+@qoretechnologies/reqraft/dist/helpers/allowedValues
+@qoretechnologies/reqraft/dist/helpers/common
+@qoretechnologies/reqraft/dist/helpers/optionUiTypes
+@qoretechnologies/reqraft/dist/helpers/options
+@qoretechnologies/reqraft/dist/helpers/providerValue
+@qoretechnologies/reqraft/dist/helpers/singleLineString
+@qoretechnologies/reqraft/dist/helpers/templateItems
+@qoretechnologies/reqraft/dist/helpers/templateText
+@qoretechnologies/reqraft/dist/helpers/templates
+@qoretechnologies/reqraft/dist/helpers/validations
+@qoretechnologies/reqraft/dist/hooks/useQorusTypes
+@qoretechnologies/reqraft/dist/hooks/useTemplates
+@qoretechnologies/reqraft/dist/providers/ReqraftProvider
+@qoretechnologies/reqraft/dist/stores/currentUser/currentUser
+@qoretechnologies/reqraft/dist/utils/fetch
+@qoretechnologies/reqraft/dist/utils/lspClient

.github/scripts/check-packed-files.mjs

@@ -0,0 +1,110 @@
+#!/usr/bin/env node
+// Checks that the npm package ships what its consumers load: run from the package root after `yarn build`.
+//
+// usage: node .github/scripts/check-packed-files.mjs [consumer imports file]
+//
+// The package's contents are package.json's `files` allowlist; before it, everything not in .npmignore was
+// published, agent notes and design docs included. An allowlist can just as easily leave something out, and a
+// consumer's deep import (qorus-ide imports `@qoretechnologies/reqraft/dist/components/...` directly) would then
+// fail only in the consumer. So the packed file list (`npm pack --dry-run`) must hold:
+// - every entry point package.json names (main, types, module, exports, bin);
+// - every file the build wrote to dist/;
+// - for each import in the consumer imports file, the module (`.js`) and its types (`.d.ts`).
+import { execFileSync } from 'node:child_process';
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join, posix } from 'node:path';
+
+const normalize = (path) => posix.normalize(path.replace(/^\.\//, ''));
+
+const targetsOf = (field) => {
+  if (!field) return [];
+  if (typeof field === 'string') return [field];
+  return Object.values(field).flatMap(targetsOf);
+};
+
+const builtFiles = (dir) => {
+  let entries;
+  try {
+    entries = readdirSync(dir);
+  } catch {
+    return [];
+  }
+  return entries.flatMap((name) => {
+    const path = join(dir, name);
+    return statSync(path).isDirectory() ?
+        builtFiles(path)
+      : [normalize(path.split('\\').join('/'))];
+  });
+};
+
+const pkg = JSON.parse(readFileSync('package.json', 'utf8'));
+const [pack] = JSON.parse(
+  execFileSync('npm', ['pack', '--dry-run', '--json', '--ignore-scripts'], {
+    encoding: 'utf8',
+    stdio: ['ignore', 'pipe', 'ignore'],
+  })
+);
+const packed = new Set(pack.files.map(({ path }) => normalize(path)));
+const problems = [];
+
+for (const entry of [
+  pkg.main,
+  pkg.types,
+  pkg.typings,
+  pkg.module,
+  ...targetsOf(pkg.exports),
+  ...targetsOf(pkg.bin),
+]) {
+  if (entry && !packed.has(normalize(entry))) {
+    problems.push(`${entry}: an entry point in package.json, not in the package`);
+  }
+}
+
+const built = builtFiles('dist');
+if (!built.length) {
+  problems.push('dist/ is empty: run `yarn build` first');
+}
+for (const file of built) {
+  if (!packed.has(file)) {
+    problems.push(`${file}: built, not in the package`);
+  }
+}
+
+const importsFile = process.argv[2];
+const imports =
+  importsFile ?
+    readFileSync(importsFile, 'utf8')
+      .split('\n')
+      .map((line) => line.trim())
+      .filter((line) => line && !line.startsWith('#'))
+  : [];
+for (const specifier of imports) {
+  if (specifier === pkg.name) {
+    continue; // the package root: main and types, checked above
+  }
+  if (!specifier.startsWith(`${pkg.name}/`)) {
+    problems.push(`${specifier}: not an import of ${pkg.name}`);
+    continue;
+  }
+  const path = normalize(specifier.slice(pkg.name.length + 1));
+  const has = (...candidates) => candidates.some((candidate) => packed.has(candidate));
+  if (!has(path, `${path}.js`, `${path}/index.js`)) {
+    problems.push(`${specifier}: imported by a consumer, no module for it in the package`);
+  }
+  if (
+    !has(`${path}.d.ts`, `${path}/index.d.ts`) &&
+    !path.endsWith('.js') &&
+    !path.endsWith('.json')
+  ) {
+    problems.push(`${specifier}: imported by a consumer, no types for it in the package`);
+  }
+}
+
+console.log(
+  `${pkg.name}@${pkg.version}: ${pack.entryCount} files, ${pack.size} bytes packed, ${pack.unpackedSize} unpacked; ` +
+    `${built.length} built files and ${imports.length} consumer imports checked`
+);
+if (problems.length) {
+  console.error(problems.map((problem) => `- ${problem}`).join('\n'));
+  process.exit(1);
+}

.github/scripts/published-version.sh

@@ -0,0 +1,44 @@
+#!/bin/sh
+# What a tests run may tell people to install: the version this commit published, and only once npm has it.
+#
+# publish.yml publishes in parallel with the tests, and it may publish nothing (package.json's version is
+# already on npm), be superseded by a newer push, or fail. So the version is worked out by the script
+# publish.yml uses (release-version.sh), then named only if npm answers with it. Run #482 told people to
+# `yarn add @qoretechnologies/reqraft@v0.10.63-canary.…`, a version the tests job made up and never published.
+#
+# usage (from the repository root):
+#   published-version.sh push <publish runs url>
+#   published-version.sh pull_request <PR number> <head sha> <publish runs url>
+#
+# Prints GITHUB_OUTPUT lines:
+#   version=<the published version>     (only when npm has it)
+#   field=<what the Discord embed's Version field says>
+#   note=<the end of the PR success message: how to install it, or why there is nothing to install>
+set -eu
+
+here=$(dirname "$0")
+event=${1:?usage: published-version.sh push <url> | pull_request <PR number> <head sha> <url>}
+if [ "$event" = pull_request ]; then
+    computed=$("$here/release-version.sh" pull_request "${2:?}" "${3:?}")
+    runs=${4:?the publish runs url is required}
+else
+    computed=$("$here/release-version.sh" "$event")
+    runs=${2:?the publish runs url is required}
+fi
+value() { printf '%s\n' "$computed" | sed -n "s/^$1=//p"; }
+name=$(value name)
+base=$(value base)
+publish=$(value publish)
+version=$(value version)
+
+if [ "$publish" = true ] && [ "$(npm view "$name@$version" version 2>/dev/null || true)" = "$version" ]; then
+    echo "version=$version"
+    echo "field=$version"
+    echo "note=, install the prerelease via \`yarn add $name@$version\`."
+elif [ "$publish" = true ]; then
+    echo "field=none on npm yet"
+    echo "note=. No prerelease is on npm for this commit yet: see the [Publish run]($runs)."
+else
+    echo "field=none ($base is already on npm)"
+    echo "note=. No prerelease was cut: package.json is at $base, which is already on npm."
+fi

.github/scripts/qlip-build-link.sh

@@ -0,0 +1,29 @@
+#!/bin/sh
+# The qlip build a story run uploaded, for the Discord message's "Qlip visual tests" link.
+#
+# usage: qlip-build-link.sh <story run log>
+#
+# qlip prints one line after uploading, e.g.
+#   [qlip] uploaded build 20261010-104435: 635 entries from 54 contexts (…) → https://qlip.qoretechnologies.com
+# (older qlip: `uploaded build 20260629-123456 (12 fragments, …) → …`). The id is server-assigned, so it is read
+# from that line. It ends at the first space or colon: taking everything up to the space kept the colon, and the
+# link went to build `20261010-104435:`, which does not exist.
+#
+# Prints GITHUB_OUTPUT lines `build_id=` and `url=` (the dashboard's builds are global: /builds/<id>), or nothing
+# when no build was uploaded.
+set -eu
+
+log=${1:?usage: qlip-build-link.sh <story run log>}
+# ANSI colours are stripped first: one between `[qlip]` and `uploaded` would hide the line
+line=""
+if [ -f "$log" ]; then
+    line=$(sed -E 's/\x1b\[[0-9;]*m//g' "$log" | grep -aE '\[qlip\] uploaded build ' | tail -1 || true)
+fi
+build_id=$(printf '%s' "$line" | sed -nE 's/.*uploaded build ([^ :]+).*/\1/p')
+server=$(printf '%s' "$line" | sed -nE 's/.* → (https?:[^ ]+).*/\1/p')
+server=${server:-https://qlip.qoretechnologies.com}
+echo "Resolved qlip build='${build_id:-<none>}' server='${server}'" >&2
+if [ -n "$build_id" ]; then
+    echo "build_id=$build_id"
+    echo "url=$server/builds/$build_id"
+fi

.github/scripts/release-version.sh

@@ -0,0 +1,57 @@
+#!/bin/sh
+# The version a workflow run publishes, worked out in ONE place: publish.yml publishes it, and tests.yml names
+# it in Discord. Two copies of this logic drifted once already: tests.yml made up a canary that nothing
+# published and told people to install it.
+#
+# usage (from the repository root):
+#   release-version.sh push
+#   release-version.sh pull_request <PR number> <head sha>
+#
+# Prints GITHUB_OUTPUT lines:
+#   name=<the package's name>
+#   base=<package.json's version, without any prerelease part>
+#   publish=true|false
+#   version=<the version this run publishes>     (only when publish=true)
+#
+# push (develop): package.json's version as it is, which publish.yml's Publish-and-release releases under `beta`.
+#
+# pull_request: a prerelease OF THE VERSION THIS PR IS RELEASING, the one already in package.json (every PR is
+# required to bump it), under the `pr` dist-tag: <base>-pr.<PR>.g<sha7>.
+# - Not the next patch: a prerelease of 0.10.35 for a PR releasing 0.10.34 previews a version nobody is merging,
+#   and sorts ABOVE the real 0.10.34, so a consumer pinned to the preview never moves forward on upgrade.
+#   Semver puts a prerelease below its release and above the previous one:
+#     0.10.33  <  0.10.34-pr.92.gabc123  <  0.10.34
+# - The sha is prefixed with `g` (git-describe style) so an all-digit short sha can never become an invalid
+#   leading-zero numeric identifier.
+# - None when <base> is already on npm: this PR has not bumped, because it need not (a CI-, docs- or test-only
+#   change) or because it forgot. A prerelease of a released version sorts BELOW that release and would hand
+#   consumers something older than they have. Skipped, not failed: a PR that forgot its bump is caught at merge,
+#   where the release cannot publish over an existing version.
+set -eu
+
+event=${1:?usage: release-version.sh push | pull_request <PR number> <head sha>}
+name=$(node -p "require('./package.json').name")
+base=$(node -p "require('./package.json').version.split('-')[0]")
+echo "name=$name"
+echo "base=$base"
+
+case "$event" in
+push)
+    echo "publish=true"
+    echo "version=$(node -p "require('./package.json').version")"
+    ;;
+pull_request)
+    pr=${2:?the PR number is required}
+    sha=$(printf '%s' "${3:?the head sha is required}" | cut -c1-7)
+    if npm view "$name@$base" version >/dev/null 2>&1; then
+        echo "publish=false"
+    else
+        echo "publish=true"
+        echo "version=$base-pr.$pr.g$sha"
+    fi
+    ;;
+*)
+    echo "release-version.sh: unknown event '$event'" >&2
+    exit 2
+    ;;
+esac