@mindlogic-ai/logician-ui 5.0.0-alpha.3 → 5.0.0-alpha.30

package/src/theme/paletteSwatches.test.ts

@@ -32,7 +32,7 @@ describe('Setup/Theme → Default swatches', () => {
   });
 
   it('follows semantic → semantic references per mode', () => {
-    // fg.default → neutral.11 (light) / cream-ish (dark): two different hexes.
+    // fg.default → neutral.11 (light) / off-white (dark): two different hexes.
     const light = resolveColor('{colors.fg.default}', 'light');
     const dark = resolveColor('{colors.fg.default}', 'dark');
     expect(light).toMatch(/^#[0-9a-f]{6}$/i);

package/src/theme/paletteSwatches.ts

@@ -48,6 +48,41 @@ export const resolveColor = (value: unknown, mode: Mode, depth = 0): string => {
 
 export type Swatch = { path: string; light: string; dark: string };
 
+/** In-cell label colour on a data-viz fill: `ink.11` (#252525), white, or none. */
+export type DataVizLabel = 'ink' | 'white' | null;
+
+/** Raw token each label resolves to, in either mode. */
+export const DATA_VIZ_LABEL_TOKEN = { ink: 'ink.11', white: 'white' } as const;
+
+/**
+ * Data-visualisation fills (`data.*`, `diverging.*`, by flat key) and the label
+ * a chart may print inside each one, per mode — the tables in
+ * SemanticTokens.mdx. Picked per step by measured contrast (≥ 4.5:1), not by
+ * step number; `null` means neither label clears it, so the value goes outside
+ * the mark. `contrast.test.ts` audits every entry; the BAZE Palette Data Viz
+ * story renders from it.
+ */
+export type DataVizKey =
+  | `data-${1 | 2 | 3 | 4}`
+  | `diverging-${'pos' | 'neg'}-${1 | 2 | 3}`
+  | 'diverging-mid';
+
+export const DATA_VIZ_LABELS: Readonly<
+  Record<DataVizKey, { light: DataVizLabel; dark: DataVizLabel }>
+> = {
+  'data-1': { light: 'ink', dark: 'white' },
+  'data-2': { light: 'ink', dark: 'white' },
+  'data-3': { light: 'ink', dark: 'ink' },
+  'data-4': { light: 'white', dark: 'ink' },
+  'diverging-pos-1': { light: 'ink', dark: 'white' },
+  'diverging-pos-2': { light: 'ink', dark: 'ink' },
+  'diverging-pos-3': { light: 'white', dark: 'ink' },
+  'diverging-neg-1': { light: 'ink', dark: 'white' },
+  'diverging-neg-2': { light: null, dark: null },
+  'diverging-neg-3': { light: 'white', dark: 'ink' },
+  'diverging-mid': { light: 'ink', dark: 'white' },
+};
+
 /**
  * 5.0 semantic colours grouped by their first segment. Deprecated 4.x aliases
  * (including the whole 4.x `slate.*` step scale) and the internal high-contrast

package/src/theme/recipes/avatar.ts

@@ -0,0 +1,92 @@
+import { defineSlotRecipe } from '@chakra-ui/react';
+
+/**
+ * Logician overrides for Chakra's `avatar` slot recipe (merged over it, so
+ * Chakra's `size` and `shape` variants and `--avatar-size` stay as they are).
+ *
+ * **The root owns the circle.** Chakra sizes only the root (`--avatar-size`)
+ * and gives `fallback` no width or height, so a fill painted on the fallback
+ * covers just the glyph box — a dark disc with a small light pill around the
+ * initial. Here the root carries the fill, the text colour, the hairline
+ * border and `overflow: hidden`, and the fallback fills the root and centres
+ * its content, so `Avatar.Root` + `Avatar.Fallback` render correctly with no
+ * styling at the call site.
+ *
+ * **Colour comes from `colorPalette`.** The default (`subtle`) variant reads
+ * `colorPalette.surface` / `colorPalette.fg`, and a `category.{hue}` palette
+ * resolves those to the `category.{hue}.surface` / `.fg` pair (Chakra derives
+ * a palette from every token-path prefix, so `colorPalette="category.blue"`
+ * is a real palette). `Avatar` passes `category.<hueForName(name)>`; with no
+ * name the palette is `category.neutral` (`bg.muted` / `secondary.fgStrong`),
+ * which is also this recipe's own default, so a bare `Avatar.Root` never
+ * inherits an ancestor's palette and never turns red.
+ *
+ * `variant="logo"` is the light tile for model, chatbot and brand marks:
+ * `bg.logo` in both modes, `fg.onLogo` for any initials, the fallback icon
+ * centred. Chakra's `solid` / `outline` keep working on a category palette
+ * by falling back onto the same `surface` / `fg` pair.
+ */
+/**
+ * `colorPalette.<key>`, falling back to `colorPalette.<fallback>` when the
+ * active palette has no `<key>` (Chakra sets a palette's vars only for the
+ * keys it defines). Raw vars because Chakra's token syntax has no fallback.
+ */
+const palette = (key: string, fallback: string) =>
+  `var(--chakra-colors-color-palette-${key}, var(--chakra-colors-color-palette-${fallback}))`;
+
+export const avatarSlotRecipe = defineSlotRecipe({
+  slots: ['root', 'image', 'fallback'],
+  base: {
+    root: {
+      // The no-name palette, as a style rather than `defaultVariants`: Chakra
+      // feeds a default `colorPalette` only to the recipe function, never to
+      // the element, so it would not reach `colorPalette.*` here. A caller's
+      // `colorPalette` prop is a style prop and overrides this (style props
+      // land outside the `recipes` layer).
+      colorPalette: 'category.neutral',
+      borderWidth: '1px',
+      borderColor: 'border.subtle',
+      overflow: 'hidden',
+    },
+    fallback: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 'inherit',
+    },
+  },
+  variants: {
+    variant: {
+      // Chakra's default variant; Chakra paints it `colorPalette.muted`, which
+      // a category palette does not have — so `surface` first, `muted` for a
+      // Chakra palette a caller passes (`colorPalette="blue"`).
+      subtle: {
+        root: {
+          bg: palette('surface', 'muted'),
+          color: 'colorPalette.fg',
+        },
+      },
+      // Chakra's `solid` / `outline` read `solid` / `contrast` / `border`; a
+      // category palette has only `surface` / `fg`, so each falls back onto the
+      // pair (solid = the pair inverted, still ≥ 4.5:1).
+      solid: {
+        root: {
+          bg: palette('solid', 'fg'),
+          color: palette('contrast', 'surface'),
+        },
+      },
+      outline: {
+        root: {
+          bg: 'transparent',
+          color: 'colorPalette.fg',
+          borderColor: palette('border', 'fg'),
+        },
+      },
+      logo: {
+        root: { bg: 'bg.logo', color: 'fg.onLogo' },
+      },
+    },
+  },
+});

package/src/theme/recipes/controls.ts

@@ -0,0 +1,171 @@
+import { defineRecipe, defineSlotRecipe } from '@chakra-ui/react';
+import {
+  checkboxAnatomy,
+  comboboxAnatomy,
+  radioGroupAnatomy,
+  selectAnatomy,
+  switchAnatomy,
+  tabsAnatomy,
+} from '@chakra-ui/react/anatomy';
+
+import {
+  CONTROL_RADIUS,
+  CONTROL_SIZES,
+  controlHeightToken,
+  type ControlSize,
+  controlSizes,
+  CORE_CONTROL_SIZES,
+} from '../controlSizes';
+
+/**
+ * Chakra recipe overrides that put every control's `size` variant on the
+ * shared scale in `../controlSizes`. Chakra deep-merges these into its own
+ * recipes, so only the keys written here change.
+ *
+ * Nothing here holds a literal: every height, textStyle, padding and icon size
+ * comes from `controlSizes`, so a change to the scale lands everywhere at once
+ * and `controlSizes.test.ts` can check the resolved recipes against it.
+ *
+ * **Slot recipes pass Chakra's full anatomy, never a partial `slots` list.**
+ * Chakra merges configs array-by-index, so `slots: ['label']` does not add
+ * to the default list — it overwrites its first entry. For Checkbox that
+ * dropped the `root` slot (the label lost its line box); the old
+ * `['root', 'trigger', 'content']` Select override had been overwriting
+ * Select's `label` and `positioner` slots the same way.
+ */
+
+const bySize = <T>(
+  sizes: readonly ControlSize[],
+  build: (size: ControlSize) => T
+): Record<string, T> =>
+  Object.fromEntries(sizes.map((size) => [size, build(size)]));
+
+/**
+ * Button (and IconButton, which uses the same recipe). These are Chakra's own
+ * values — Button is the reference — restated from the scale so the scale is
+ * the single source and the test can prove nothing else drifted from it.
+ */
+export const buttonRecipe = defineRecipe({
+  variants: {
+    size: bySize(CONTROL_SIZES, (size) => {
+      const s = controlSizes[size];
+      return {
+        h: s.height,
+        minW: s.height,
+        textStyle: s.textStyle,
+        px: s.actionPaddingX,
+        gap: s.gap,
+        _icon: { width: s.iconSize, height: s.iconSize },
+      };
+    }),
+  },
+});
+
+/**
+ * Field sizes, xs–xl. `2xs` is left on Chakra's own value (a 24.5px field):
+ * no field ships a 2xs today and shrinking it to Button's 21px would put a text
+ * box under the 24px target.
+ */
+const FIELD_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+
+export const inputRecipe = defineRecipe({
+  base: { borderRadius: CONTROL_RADIUS },
+  variants: {
+    size: bySize(FIELD_SIZES, (size) => ({
+      textStyle: controlSizes[size].textStyle,
+      px: controlSizes[size].fieldPaddingX,
+      '--input-height': controlHeightToken(size),
+    })),
+  },
+});
+
+/** Textarea: same type and inline padding as Input; its height is its rows. */
+export const textareaRecipe = defineRecipe({
+  base: { borderRadius: CONTROL_RADIUS },
+  variants: {
+    size: bySize(FIELD_SIZES, (size) => ({
+      textStyle: controlSizes[size].textStyle,
+      px: controlSizes[size].fieldPaddingX,
+    })),
+  },
+});
+
+export const selectSlotRecipe = defineSlotRecipe({
+  slots: selectAnatomy.keys(),
+  base: { trigger: { borderRadius: CONTROL_RADIUS } },
+  variants: {
+    size: bySize(CORE_CONTROL_SIZES, (size) => ({
+      root: {
+        '--select-trigger-height': controlHeightToken(size),
+        '--select-trigger-padding-x': `spacing.${controlSizes[size].fieldPaddingX}`,
+      },
+      trigger: {
+        textStyle: controlSizes[size].textStyle,
+        // Chakra's lg `py: 3` is em-based and alone pushes the trigger past
+        // the height token; let the token decide (637d0fe).
+        ...(size === 'lg' && { py: '1.5' }),
+      },
+      content: { textStyle: controlSizes[size].textStyle },
+    })),
+  },
+});
+
+export const comboboxSlotRecipe = defineSlotRecipe({
+  slots: comboboxAnatomy.keys(),
+  base: { input: { borderRadius: CONTROL_RADIUS } },
+  variants: {
+    size: bySize(CORE_CONTROL_SIZES, (size) => ({
+      root: {
+        '--combobox-input-height': controlHeightToken(size),
+        '--combobox-input-padding-x': `spacing.${controlSizes[size].fieldPaddingX}`,
+      },
+      input: { textStyle: controlSizes[size].textStyle },
+      content: { textStyle: controlSizes[size].textStyle },
+    })),
+  },
+});
+
+/**
+ * Tabs: the trigger height is the tab list's `--tabs-height`, set by the
+ * `Tabs` root's `size` (sm / md / lg — Chakra's tabs have no xs). A `size` on
+ * a single `Tab` does not reach it.
+ */
+const TAB_SIZES = ['sm', 'md', 'lg'] as const;
+
+export const tabsSlotRecipe = defineSlotRecipe({
+  slots: tabsAnatomy.keys(),
+  variants: {
+    size: bySize(TAB_SIZES, (size) => ({
+      root: { '--tabs-height': controlHeightToken(size) },
+      trigger: { textStyle: controlSizes[size].textStyle },
+    })),
+  },
+});
+
+/** Checkbox / Radio / Switch: the label takes the control type per size. */
+export const checkboxSlotRecipe = defineSlotRecipe({
+  slots: checkboxAnatomy.keys(),
+  variants: {
+    size: bySize(CORE_CONTROL_SIZES, (size) => ({
+      label: { textStyle: controlSizes[size].textStyle },
+    })),
+  },
+});
+
+export const radioGroupSlotRecipe = defineSlotRecipe({
+  slots: radioGroupAnatomy.keys(),
+  variants: {
+    size: bySize(CORE_CONTROL_SIZES, (size) => ({
+      item: { textStyle: controlSizes[size].textStyle },
+    })),
+  },
+});
+
+export const switchSlotRecipe = defineSlotRecipe({
+  slots: switchAnatomy.keys(),
+  variants: {
+    size: bySize(CORE_CONTROL_SIZES, (size) => ({
+      label: { textStyle: controlSizes[size].textStyle },
+    })),
+  },
+});

package/src/translations/Defaults.translations.json

@@ -223,6 +223,13 @@
     "ja": "ダウンロード中",
     "es": "Descargando"
   },
+  "processing": {
+    "ko": "처리 중",
+    "en": "Processing",
+    "zh": "处理中",
+    "ja": "処理中",
+    "es": "Procesando"
+  },
   "deleting": {
     "ko": "삭제 중",
     "en": "Deleting",
@@ -236,5 +243,12 @@
     "zh": "关闭",
     "ja": "閉じる",
     "es": "Cerrar"
+  },
+  "clear_selection": {
+    "ko": "선택 지우기",
+    "en": "Clear selection",
+    "zh": "清除选择",
+    "ja": "選択をクリア",
+    "es": "Borrar selección"
   }
 }

package/src/utils/disabledControl.ts

@@ -18,9 +18,16 @@ export const disabledControl = {
   boxShadow: 'none',
 } as const;
 
+/**
+ * Disabled look for fill-less (ghost) buttons — ghost Button, ghost
+ * IconButton. With no `disabled.bg` behind it the colour is the only cue, and
+ * `disabled.fg` sat ~1.4:1 from the resting ghost glyph (`fg.icon`), so the
+ * two read as the same state. `disabled.fgGhost` is a lighter grey (~2.7:1
+ * from `fg.icon` in light and dark).
+ */
 export const disabledText = {
   bg: 'transparent',
-  color: 'disabled.fg',
+  color: 'disabled.fgGhost',
   borderColor: 'transparent',
   opacity: 1,
   boxShadow: 'none',

package/src/utils/focusRing.ts

@@ -25,3 +25,26 @@ export const focusRing = {
     boxShadow: FOCUS_RING_SHADOW,
   },
 } as const;
+
+/**
+ * The same two bands as {@link FOCUS_RING_SHADOW}, drawn INSIDE the element's
+ * edge: the outer 2px in `focus.ring`, then the 2px `bg.canvas` band that keeps
+ * the ring legible against whatever fill the element has.
+ *
+ * {@link focusRing} needs 4px of clear space on every side, because both bands
+ * paint outside the box. Rows packed into a list cannot give it that — the band
+ * lands on the neighbouring row, which paints its own background back over
+ * half of it — and a list that scrolls (`overflow-x: auto`) clips it outright.
+ * Same colour and weight, inside the box instead.
+ */
+export const FOCUS_RING_INSET_SHADOW =
+  'inset 0 0 0 2px var(--chakra-colors-focus-ring), inset 0 0 0 4px var(--chakra-colors-bg-canvas)';
+
+/** {@link focusRing}'s inset counterpart, for rows in a dense or scrolling list. */
+export const focusRingInset = {
+  _focus: { outline: 'none' },
+  _focusVisible: {
+    outline: 'none',
+    boxShadow: FOCUS_RING_INSET_SHADOW,
+  },
+} as const;