@antscorp/ui 0.1.2 → 0.1.4

package/package.json

@@ -1,18 +1,24 @@
 {
   "name": "@antscorp/ui",
-  "version": "0.1.2",
-  "description": "Generic UI kit: atoms, molecules and organisms over Astryx, with no MarketingHub words.",
+  "version": "0.1.4",
+  "description": "Generic UI kit: atoms, molecules and organisms over Astryx.",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://bitbucket.org/git-vn/at.antsomi-ui.git",
     "directory": "packages/ui"
   },
+  "bin": {
+    "antscorp-ui": "./dist/cli.js"
+  },
   "files": [
     "dist",
     "src",
+    "!src/cli/**",
     "!src/**/*.test.*",
     "!src/**/*.stories.*",
+    "!src/**/*.doc.ts",
+    "!dist/**/*.doc.*",
     "!src/**/__snapshots__/**",
     "!src/testing.tsx",
     "!src/story.tsx"
@@ -37,6 +43,11 @@
       "types": "./dist/astryx/*.d.ts",
       "default": "./dist/astryx/*.js"
     },
+    "./doc": {
+      "antscorp-source": "./src/doc/schema.ts",
+      "types": "./dist/doc/schema.d.ts",
+      "default": "./dist/doc/schema.js"
+    },
     "./stylex": {
       "antscorp-source": "./src/stylex.ts",
       "types": "./dist/stylex.d.ts",
@@ -88,38 +99,44 @@
   "scripts": {
     "astryx:reexports": "bun scripts/astryx-reexports.ts",
     "test": "bun scripts/astryx-reexports.ts --check && vitest run && AUI_REACT_COMPILER=off vitest run --coverage",
+    "test:perf": "PERF=1 vitest run",
     "typecheck": "tsc -p .",
-    "build": "vite build --config vite.build.ts && tsc -p tsconfig.build.json && bun scripts/build-declarations.ts"
+    "build": "vite build --config vite.build.ts && tsc -p tsconfig.build.json && bun scripts/build-declarations.ts && node ../../tools/component-catalog/src/main.ts . && bun build src/cli/main.ts --target=node --outfile=dist/cli.js"
   },
   "dependencies": {
-    "@antscorp/astryx-theme-antsomi": "0.1.2",
-    "@antscorp/immutable": "0.1.0",
+    "@antscorp/astryx-theme-antsomi": "0.1.4",
+    "@antscorp/immutable": "0.1.1",
     "@astryxdesign/core": "0.7.4",
     "@codemirror/state": "6.7.6",
-    "@codemirror/view": "6.43.14",
+    "@codemirror/view": "6.43.15",
     "@stylexjs/stylex": "0.19.1",
-    "spin-delay": "2.0.1"
+    "spin-delay": "2.0.1",
+    "zod": "4.6.7"
   },
   "devDependencies": {
-    "@antscorp/vite-stylex": "0.1.2",
-    "@storybook/react-vite": "10.6.1",
+    "@antscorp/component-catalog": "0.1.0",
+    "@antscorp/vite-stylex": "0.1.4",
+    "@storybook/react-vite": "10.6.5",
     "@testing-library/dom": "10.4.2",
     "@testing-library/react": "16.3.3",
-    "@testing-library/user-event": "14.6.7",
+    "@testing-library/user-event": "14.6.8",
     "@types/bun": "1.4.4",
-    "@types/node": "24.19.1",
+    "@types/node": "24.19.2",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "@vitest/coverage-v8": "5.0.3",
+    "@vitest/coverage-v8": "5.0.5",
     "happy-dom": "20.14.5",
-    "react": "19.3.0",
-    "react-dom": "19.3.0",
-    "storybook": "10.6.1",
-    "vite": "8.3.3",
-    "vitest": "5.0.3"
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "storybook": "10.6.5",
+    "vite": "8.3.5",
+    "vitest": "5.0.5"
   },
   "peerDependencies": {
-    "react": ">=19",
-    "react-dom": ">=19"
+    "react": ">=19.2",
+    "react-dom": ">=19.2"
+  },
+  "engines": {
+    "node": ">=24"
   }
 }

package/src/atoms/AddButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@astryxdesign/core/Button";
+import { Button, type ButtonProps } from "@astryxdesign/core/Button";
 import { radiusVars } from "@astryxdesign/core/theme/tokens.stylex";
 import * as stylex from "@stylexjs/stylex";
 import type { ReactNode } from "react";
@@ -6,19 +6,15 @@ import type { ReactNode } from "react";
 import { AddGlyph } from "./AddGlyph";
 
 /** What `AddButton` takes. */
-export type AddButtonProps = {
-  /** What it adds, such as "Add row"; the host translates it. */
-  readonly label: string;
+export type AddButtonProps = Pick<ButtonProps, "label" | "isDisabled"> & {
   /** `ghost` by default; `secondary` for an add that needs more weight. */
   readonly variant?: "ghost" | "secondary" | undefined;
   /** The button's height, `md` by default; its plus follows it. */
   readonly size?: "sm" | "md" | undefined;
   /** `default` keeps the button's own corners; `pill` rounds them fully; the theme colours its outline. */
   readonly shape?: "default" | "pill" | undefined;
-  /** `sentence` (default) shows the label as given; `upper` in capitals, as fe-app's "+ AND". */
+  /** `sentence` (default) shows the label as given; `upper` in capitals, such as "+ AND". */
   readonly case?: "sentence" | "upper" | undefined;
-  /** Dimmed and not pressable, e.g. when a limit is reached. */
-  readonly isDisabled?: boolean | undefined;
   /** Read-only: an add is an editing affordance, so nothing is drawn. */
   readonly isReadOnly?: boolean | undefined;
   /** Called when the button is pressed. */

package/src/atoms/Chip.tsx

@@ -1,3 +1,4 @@
+import type { AccentRole } from "@antscorp/astryx-theme-antsomi/palette";
 import { HStack } from "@astryxdesign/core/HStack";
 import { Icon } from "@astryxdesign/core/Icon";
 import { IconButton } from "@astryxdesign/core/IconButton";
@@ -9,7 +10,7 @@ import {
   spacingVars,
   typeScaleVars,
 } from "@astryxdesign/core/theme/tokens.stylex";
-import { Token } from "@astryxdesign/core/Token";
+import { Token, type TokenProps } from "@astryxdesign/core/Token";
 import { Tooltip } from "@astryxdesign/core/Tooltip";
 import * as stylex from "@stylexjs/stylex";
 import type { ReactNode } from "react";
@@ -17,9 +18,7 @@ import type { ReactNode } from "react";
 import { RemoveButton } from "./RemoveButton";
 
 /** What `Chip` takes. */
-export type ChipProps = {
-  /** The chip's text; cut short with an ellipsis past `maxWidth`, and shown whole in a tooltip. */
-  readonly label: string;
+export type ChipProps = Pick<TokenProps, "label" | "isDisabled"> & {
   /** `neutral` (default) is the plain grey chip; `accent` the pale accent one; `danger` a value no longer valid. */
   readonly tone?: "neutral" | "accent" | "danger" | undefined;
   /** The chip's height, `sm` or `md` (default), as the controls beside it. */
@@ -40,8 +39,6 @@ export type ChipProps = {
    * button over its end; it stays in the tab order. Without it the button always shows after the text.
    */
   readonly isRemoveOnHover?: boolean | undefined;
-  /** Dims the chip and blocks its remove button. */
-  readonly isDisabled?: boolean | undefined;
   /** Read-only: no remove button. */
   readonly isReadOnly?: boolean | undefined;
 };
@@ -102,8 +99,9 @@ export function Chip(props: ChipProps): ReactNode {
 // The remove button shows while the chip is hovered or has focus inside it.
 const marker = stylex.defaultMarker();
 
+const accentFill: AccentRole = "var(--ants-accent-fill)";
 const styles = stylex.create({
-  // fe-app's chip (ItemPreviewSource): a pill as high as the controls, 10px either side (no
+  // A pill as high as the controls, 10px either side (no
   // spacing step is 10px), in 12px body text of the normal weight. An xstyle, not a `token` theme entry: Token is also
   // drawn by ChipListAddPopover's unframed list in Astryx's own look, which a theme entry would change.
   chip: {
@@ -117,10 +115,10 @@ const styles = stylex.create({
   md: { height: sizeVars["--size-element-md"] },
   // Not `color="blue"` with a theme entry, for the same reason.
   accent: {
-    backgroundColor: "var(--ants-mh-blue-200)",
+    backgroundColor: accentFill,
     color: colorVars["--color-text-primary"],
   },
-  // fe-app's: a 16px white circle over the chip's end (Token's own remove button is 16px too).
+  // A 16px white circle over the chip's end (Token's own remove button is 16px too).
   hoverRemove: {
     position: "absolute",
     insetInlineEnd: spacingVars["--spacing-1"],

package/src/atoms/InfoTip.tsx

@@ -16,8 +16,8 @@ export type InfoTipProps = {
 export function InfoTip({ label, tone = "info" }: InfoTipProps): ReactNode {
   const isError = tone === "error";
   return (
-    <Tooltip content={label}>
-      <Text as="span" color="accent" aria-label={label} xstyle={styles.info}>
+    <Tooltip content={label} focusTrigger="always">
+      <Text as="span" tabIndex={0} color="accent" aria-label={label} xstyle={styles.info}>
         <Icon icon={isError ? "warning" : "info"} size="xsm" {...(isError && { color: "error" })} />
       </Text>
     </Tooltip>

package/src/atoms/LabeledDivider.tsx

@@ -7,7 +7,7 @@ import type { ReactNode } from "react";
 export type LabeledDividerProps = {
   /** The short word on the rule, such as "or"; it also names the separator. */
   readonly label: string;
-  /** `sentence` (default) shows the word as given; `upper` in capitals, as fe-app's "OR". */
+  /** `sentence` (default) shows the word as given; `upper` in capitals, such as "OR". */
   readonly case?: "sentence" | "upper" | undefined;
 };
 

package/src/atoms/PanelSearchInput.tsx

@@ -28,7 +28,7 @@ export type PanelSearchInputProps = {
     /** The clear button's name, such as "Clear search"; it shows only an icon. */
     readonly clear: string;
   };
-  /** Where the magnifier sits: `start` (default) or `end`, after the clear button, as fe-app's search. */
+  /** Where the magnifier sits: `start` (default) or `end`, after the clear button. */
   readonly iconPosition?: "start" | "end" | undefined;
   /** The input element, to focus it (with `useFocusLater` in a pop-over, say). */
   readonly ref?: Ref<HTMLInputElement> | undefined;

package/src/atoms/RemoveButton.tsx

@@ -1,15 +1,11 @@
 import { Icon } from "@astryxdesign/core/Icon";
-import { IconButton } from "@astryxdesign/core/IconButton";
+import { IconButton, type IconButtonProps } from "@astryxdesign/core/IconButton";
 import type { ReactNode } from "react";
 
 /** What `RemoveButton` takes. */
-export type RemoveButtonProps = {
-  /** What goes, such as "Remove row"; the button shows only an icon, so this is its name. */
-  readonly label: string;
+export type RemoveButtonProps = Pick<IconButtonProps, "label" | "isDisabled"> & {
   /** The button's height, `md` by default. */
   readonly size?: "sm" | "md" | undefined;
-  /** Dimmed and not pressable. */
-  readonly isDisabled?: boolean | undefined;
   /** Read-only: a remove is an editing affordance, so nothing is drawn. */
   readonly isReadOnly?: boolean | undefined;
   /** Called when the button is pressed. */

package/src/atoms/TextAction.tsx

@@ -1,16 +1,16 @@
 import { Icon } from "@astryxdesign/core/Icon";
-import { Link } from "@astryxdesign/core/Link";
+import { Link, type LinkProps } from "@astryxdesign/core/Link";
 import { spacingVars } from "@astryxdesign/core/theme/tokens.stylex";
 import * as stylex from "@stylexjs/stylex";
 import type { ReactNode } from "react";
 
 /** What `TextAction` takes. */
-export type TextActionProps = {
+export type TextActionProps = Pick<LinkProps, "isDisabled"> & {
   /** What it does, such as "Remove all"; shown in capitals by default, so pass it in normal case. */
   readonly label: string;
   /** A glyph before the text, in the text's colour, such as an Astryx `Icon` of a bin for a removal. */
   readonly icon?: ReactNode;
-  /** `upper` (default) shows the label in capitals, as fe-app's "REMOVE ALL"; `sentence` as given, as fe-app's text buttons. */
+  /** `upper` (default) shows the label in capitals, such as "REMOVE ALL"; `sentence` as given. */
   readonly case?: "upper" | "sentence" | undefined;
   /**
    * Called when it is pressed. Leave it out when a wrapper handles the presses, such as an Astryx
@@ -19,13 +19,11 @@ export type TextActionProps = {
   readonly onClick?: (() => void) | undefined;
   /** A down chevron after the text, for an action that opens a menu. */
   readonly hasChevron?: boolean | undefined;
-  /** Dimmed and not pressable. */
-  readonly isDisabled?: boolean | undefined;
 };
 
 /**
- * An action drawn as text alone: bold capitals in the accent, no frame, as fe-app's "REMOVE ALL"
- * and "CREATE NEW … ▾", or in sentence case with a glyph before it, as fe-app's text buttons
+ * An action drawn as text alone: bold capitals in the accent, no frame, such as "REMOVE ALL"
+ * and "CREATE NEW … ▾", or in sentence case with a glyph before it
  * (a bin, then "Remove"). An Astryx `Link` without an `href`, so a `<button>` in a link's look, with
  * a down chevron after the text when it opens a menu; still a button without `onClick`, so it can
  * be a `Popover`'s trigger. It holds no state.
@@ -54,7 +52,7 @@ export function TextAction({
 }
 
 const styles = stylex.create({
-  // Capitals are a look, not text, so translations stay in normal case. fe-app's text actions have
+  // Capitals are a look, not text, so translations stay in normal case. Text actions have
   // no underline, not even on hover (Astryx's Link adds one). The theme styles no link, so this
   // sets what nothing else does.
   action: { whiteSpace: "nowrap", textDecoration: "none" },

package/src/atoms/TruncatedOption.tsx

@@ -11,7 +11,7 @@ export type TruncatedOptionProps = {
 
 /**
  * A Selector option whose label ends in an ellipsis when it is wider than the pop-up, with the
- * whole label in a tooltip on hover, as antd's Select. Its icon and description show as the
+ * whole label in a tooltip on hover. Its icon and description show as the
  * Selector's own option's. It holds no state.
  */
 export function TruncatedOption({ option }: TruncatedOptionProps): ReactNode {

package/src/doc/schema.ts

@@ -0,0 +1,67 @@
+import { z } from "zod";
+
+const text = z.string().trim().min(1);
+
+/** Structured guidance beside a view; its props and examples come from TypeScript and stories. */
+export const componentDocSchema = z.object({
+  category: z
+    .enum(["Inputs", "Selection", "Feedback", "Layout", "Data display", "Overlays", "Theme"])
+    .describe(
+      "The view's purpose: Inputs edits values; Selection chooses options; Feedback communicates status; Layout arranges content; Data display presents values; Overlays shows dialogs or panels; Theme provides visual tokens and icons.",
+    ),
+  keywords: z.array(text).min(3).describe("At least three search terms for the view."),
+  related: z
+    .array(
+      z.object({
+        name: text.describe("A kit view or Astryx facade module, such as astryx/Badge."),
+        when: text.describe("When to choose this alternative."),
+      }),
+    )
+    .min(1)
+    .optional()
+    .describe(
+      "Alternatives, validated against public views and facade modules during docs generation.",
+    ),
+  example: text
+    .optional()
+    .describe("The existing story export shown first, validated during docs generation."),
+  usage: z
+    .object({
+      description: text.describe("When and how to use the view."),
+      bestPractices: z
+        .array(
+          z.object({
+            guidance: z
+              .boolean()
+              .describe("True for a recommended practice; false for a practice to avoid."),
+            description: text.describe("The practice and its reason."),
+          }),
+        )
+        .min(2)
+        .refine(
+          (items) => items.some((item) => item.guidance) && items.some((item) => !item.guidance),
+          "Include a recommended practice and a practice to avoid.",
+        )
+        .describe("Recommended practices and practices to avoid."),
+      anatomy: z
+        .array(
+          z.object({
+            name: text.describe("The part's name."),
+            required: z.boolean().describe("Whether this part is always present."),
+            description: text.describe("The part's purpose and the condition when it appears."),
+          }),
+        )
+        .min(1)
+        .optional()
+        .describe("The view's visible and interactive parts."),
+    })
+    .describe("Usage, best practices and optional anatomy."),
+  accessibility: z
+    .array(text)
+    .min(1)
+    .optional()
+    .describe("Accessible naming and interaction guidance."),
+});
+
+/** Authoring contract for a view's `<View>.doc.ts` export. */
+export type ComponentDoc = z.input<typeof componentDocSchema>;

package/src/index.ts

@@ -15,6 +15,7 @@ export { PathMark, type PathMarkProps, useEnclosingPath } from "./atoms/PathMark
 export { RowSkeletons, type RowSkeletonsProps } from "./atoms/RowSkeletons";
 export { TextAction, type TextActionProps } from "./atoms/TextAction";
 export { TruncatedText, type TruncatedTextProps } from "./atoms/TruncatedText";
+export { TruncatedOption, type TruncatedOptionProps } from "./atoms/TruncatedOption";
 export { AccentCard, type AccentCardProps } from "./molecules/AccentCard";
 export { ChoiceDialog, type ChoiceDialogProps } from "./molecules/ChoiceDialog";
 export { type ChoiceTile, ChoiceTiles, type ChoiceTilesProps } from "./molecules/ChoiceTiles";
@@ -117,3 +118,4 @@ export { HourOfDayRow, type HourOfDayRowProps } from "./organisms/HourOfDayRow";
 export { HourOfWeekGrid, type HourOfWeekGridProps } from "./organisms/HourOfWeekGrid";
 export { ResizableDrawer, type ResizableDrawerProps } from "./organisms/ResizableDrawer";
 export { TreeSelect, type TreeSelectItem, type TreeSelectProps } from "./organisms/TreeSelect";
+export { TreeSearchPanel, type TreeSearchPanelProps } from "./organisms/TreeSearchPanel";

package/src/lib/iso.ts

@@ -2,6 +2,7 @@ import {
   createISOTimeString,
   type ISODateString,
   type ISOTimeString,
+  parseISO,
 } from "@astryxdesign/core/utils";
 
 // Astryx date and time inputs take a value only when it is a valid one; a draft's empty or broken
@@ -13,14 +14,25 @@ export function timeValue(time: string): { readonly value?: ISOTimeString } {
   return value === null ? {} : { value };
 }
 
-const isISODate = (value: string): value is ISODateString => /^\d{4}-\d{2}-\d{2}$/u.test(value);
+const hasISODateShape = (value: string): value is ISODateString =>
+  /^\d{4}-\d{2}-\d{2}$/u.test(value);
 
-/** Spread into a date input: `{ value }` when `date` is `YYYY-MM-DD`, `{}` otherwise. */
+function isISODate(value: string): value is ISODateString {
+  if (!hasISODateShape(value)) return false;
+  try {
+    parseISO(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/** Spread into a date input: `{ value }` for a valid calendar date in `YYYY-MM-DD`, `{}` otherwise. */
 export function dateValue(date: string): { readonly value?: ISODateString } {
   return isISODate(date) ? { value: date } : {};
 }
 
-/** Spread into a date input: `{ min }` when `min` is `YYYY-MM-DD`, `{}` otherwise. */
+/** Spread into a date input: `{ min }` for a valid calendar date in `YYYY-MM-DD`, `{}` otherwise. */
 export function minDate(min: string | undefined): { readonly min?: ISODateString } {
   return min !== undefined && isISODate(min) ? { min } : {};
 }

package/src/lib/tokenEditorExtensions.ts

@@ -255,7 +255,7 @@ const theme = EditorView.theme({
     font: "inherit",
     fontSize: "12px",
     borderRadius: "50%",
-    color: "var(--ants-mh-blue-700)",
+    color: "var(--color-icon-accent)",
     cursor: "pointer",
   },
   ".cm-token:hover .cm-token-remove, .cm-token:focus-within .cm-token-remove": { opacity: "1" },

package/src/lib/useLoadMore.ts

@@ -14,8 +14,7 @@ export type LoadMoreOptions = {
   readonly itemCount: number;
 };
 
-// fe-app loads the next page when its list is scrolled this close to the end
-// (UITargetUpdateSegment `index.jsx:719-728`).
+// Load the next page 20px before the list's end so scrolling can continue without a pause.
 const NEAR_END = "0px 0px 20px 0px";
 
 /**

package/src/lib/useLoadingShown.ts

@@ -1,7 +1,7 @@
 import { useSpinDelay } from "spin-delay";
 
 /**
- * When a loading state shows, for every view of the kit (marketinghub ADR 0080): only after the load has
+ * When a loading state shows, for every view of the kit: only after the load has
  * lasted `delay` ms, then for at least `minDuration` ms, so a fast load shows nothing and a slow
  * one never flashes. `delay` matches the antsomi theme's skeleton `animationDelay`.
  */

package/src/molecules/AccentCard.tsx

@@ -1,3 +1,4 @@
+import type { AccentRole } from "@antscorp/astryx-theme-antsomi/palette";
 import { Card } from "@astryxdesign/core/Card";
 import { HStack } from "@astryxdesign/core/HStack";
 import { Icon } from "@astryxdesign/core/Icon";
@@ -39,9 +40,8 @@ export type AccentCardProps = {
   readonly isDisabled?: boolean | undefined;
   /**
    * `stripe` (default): a grey border with an accent stripe down the start edge and a light
-   * header bar, as fe-app's Perform event card. `banner`: no border nor stripe but a soft shadow,
-   * under a dark blue header bar with the title in white capitals and a white close cross, as
-   * fe-app's audience picker.
+   * header bar. `banner`: no border nor stripe but a soft shadow,
+   * under a dark blue header bar with the title in white capitals and a white close cross.
    */
   readonly variant?: "stripe" | "banner" | undefined;
 };
@@ -87,7 +87,7 @@ export function AccentCard(props: AccentCardProps): ReactNode {
             <RemoveButton
               label={close}
               size="sm"
-              isDisabled={props.isDisabled}
+              isDisabled={props.isDisabled ?? false}
               onClick={props.onClose}
             />
           ))}
@@ -102,8 +102,9 @@ export function AccentCard(props: AccentCardProps): ReactNode {
   );
 }
 
+const accentBanner: AccentRole = "var(--ants-accent-banner)";
 const styles = stylex.create({
-  // fe-app's Perform event card (UIPerformEventV2 GeneralContainerCondition): a grey border and a
+  // A grey border and a
   // 4px accent stripe at the start (no border token is 4px). A look of this card only, which no
   // Card prop nor theme entry (it would paint every card) can express; `padding={0}` clears the rest.
   card: {
@@ -111,19 +112,19 @@ const styles = stylex.create({
     borderInlineStartWidth: 4,
     borderInlineStartColor: colorVars["--color-accent"],
   },
-  // fe-app's header bar: 10px above and below, between the spacing steps of 8px and 12px, and as
+  // The header bar: 10px above and below, between the spacing steps of 8px and 12px, and as
   // high with the close button (sm) as without it.
   header: {
     paddingBlock: 10,
     minHeight: `calc(${sizeVars["--size-element-sm"]} + ${spacingVars["--spacing-5"]})`,
     backgroundColor: "var(--ants-mh-gray-75)",
   },
-  // fe-app's audience picker (UITargetSelection ContainerTargetAudience): no border, square
-  // corners and a soft shadow (Astryx's low elevation, near fe-app's 0 1px 4px grey).
+  // The banner card: no border, square
+  // corners and a soft shadow (Astryx's low elevation, near a 0 1px 4px grey shadow).
   bannerCard: { borderStyle: "none", borderRadius: 0 },
-  // fe-app's HeaderTargetAudience: white semibold capitals on its header blue, 10px 20px around.
+  // White semibold capitals on the header blue, 10px 20px around.
   banner: {
-    backgroundColor: "var(--ants-mh-blue-750)",
+    backgroundColor: accentBanner,
     color: colorVars["--color-on-accent"],
     textTransform: "uppercase",
   },

package/src/molecules/CheckRow.tsx

@@ -1,4 +1,4 @@
-import { CheckboxInput } from "@astryxdesign/core/CheckboxInput";
+import { CheckboxInput, type CheckboxInputProps } from "@astryxdesign/core/CheckboxInput";
 import { HStack } from "@astryxdesign/core/HStack";
 import { Text } from "@astryxdesign/core/Text";
 import { sizeVars } from "@astryxdesign/core/theme/tokens.stylex";
@@ -10,9 +10,7 @@ import { HoverSwap } from "../atoms/HoverSwap";
 import { TruncatedText } from "../atoms/TruncatedText";
 
 /** What `CheckRow` takes. */
-export type CheckRowProps = {
-  /** The row's text and the checkbox's name; one line, the whole text in a tooltip when cut. */
-  readonly label: string;
+export type CheckRowProps = Pick<CheckboxInputProps, "label" | "isDisabled" | "isReadOnly"> & {
   /** A second line under the text, such as an id under a name; one line too. */
   readonly description?: string | undefined;
   /** Whether the box is ticked. */
@@ -26,17 +24,13 @@ export type CheckRowProps = {
    * link to the item; the two share one place, so nothing moves. None without it.
    */
   readonly hoverContent?: ReactNode;
-  /** Dims the box and blocks it; nothing is hidden. */
-  readonly isDisabled?: boolean | undefined;
-  /** Shows the box's state, not dimmed, and blocks it. */
-  readonly isReadOnly?: boolean | undefined;
 };
 
 /**
  * One row of a list to tick: a checkbox (md, as every checkbox), the row's text on one line (and
  * an optional second line), and content at its end that `hoverContent` replaces while the row is
  * hovered or focused. The box is the control and is named by the text; the text itself is not a
- * click target, as in fe-app. As high as a small control, so `RowSkeletons variant="check"`
+ * click target. As high as a small control, so `RowSkeletons variant="check"`
  * stands in for it without a shift. It holds no state.
  */
 export function CheckRow(props: CheckRowProps): ReactNode {

package/src/molecules/ChoiceTiles.tsx

@@ -1,3 +1,4 @@
+import type { AccentRole } from "@antscorp/astryx-theme-antsomi/palette";
 import { Center } from "@astryxdesign/core/Center";
 import { ClickableCard } from "@astryxdesign/core/ClickableCard";
 import { HStack } from "@astryxdesign/core/HStack";
@@ -32,7 +33,7 @@ export type ChoiceTilesProps<V extends string> = {
 };
 
 /**
- * A choice among a few ways to go on, as antsomi-ui's tiles: a wrapping row of 180×170 cards, each
+ * A choice among a few ways to go on: a wrapping row of 180×170 cards, each
  * a button with its glyph in a soft accent circle, a bold title and a description under it. A pick
  * is an action, not a selected state: the host shows what follows instead. It holds no state.
  */
@@ -64,19 +65,20 @@ export function ChoiceTiles<V extends string>(props: ChoiceTilesProps<V>): React
   );
 }
 
-// fe-app's tiles are 150×130 at its 12px text; ours is larger, so a two-line description fits here.
+// A 150×130 tile at 12px text is too tight; 180×170 leaves room for a two-line description.
 const TILE = { width: 180, height: 170 } as const;
 
+const accentHover: AccentRole = "var(--ants-accent-hover)";
 const styles = stylex.create({
   // Text has no alignment prop: its lines centre under the glyph from here.
   fill: { height: "100%", textAlign: "center" },
-  // antsomi-ui's tile glyph: a 50px circle in the accent's lightest tint, the glyph in the accent.
+  // A 50px circle in the accent's lightest tint, the glyph in the accent.
   circle: {
     flexShrink: 0,
     width: 50,
     height: 50,
     borderRadius: "50%",
-    backgroundColor: "var(--ants-mh-blue-50)",
+    backgroundColor: accentHover,
     color: colorVars["--color-accent"],
   },
 });