@mindlogic-ai/logician-ui 4.0.0-alpha.42 → 4.0.0-alpha.44

package/src/theme/motion.ts

@@ -175,7 +175,8 @@ const REDUCED = { _motionReduce: { transitionDuration: 'motion.instant' } };
  * most of the distance early and settles. An exit has already been decided:
  * the reader dismissed the thing and is looking at what is behind it, so every
  * millisecond the leaving element still owns the screen is a millisecond of
- * waiting. Half the time, on the neutral curve.
+ * waiting. Half the time, on the same ease-out — a symmetric curve would
+ * start the exit slowly, which is the one place a dismissal must not lag.
  *
  * Only the *clock* is here, never `animation-name`. Each Chakra recipe already
  * names the right movement for its part — the menu slides from its trigger,
@@ -192,14 +193,14 @@ const REDUCED = { _motionReduce: { transitionDuration: 'motion.instant' } };
  * at all reads as a page swap. The movement is what has to go, not the fact
  * that something changed.
  */
-const PRESENCE_TIMING = {
+export const PRESENCE_TIMING = {
   _open: {
     animationDuration: 'motion.base',
     animationTimingFunction: 'emphasized',
   },
   _closed: {
     animationDuration: 'fast',
-    animationTimingFunction: 'standard',
+    animationTimingFunction: 'emphasized',
   },
   _motionReduce: {
     _open: { animationName: 'fade-in' },
@@ -207,6 +208,27 @@ const PRESENCE_TIMING = {
   },
 } as const;
 
+/**
+ * The same policy, on a shorter clock, for parts anchored to a trigger —
+ * Menu, Select, Combobox, Popover, Tooltip.
+ *
+ * These open tens of times a day, under a pointer that is already on its way
+ * to the first item, so the enter has much less to be read than a dialog does:
+ * the reader asked for it and knows where it will appear. 300ms there is twice
+ * Chakra's stock 150ms and feels like waiting; 200ms keeps a visible slide from
+ * the trigger and finishes before the pointer arrives. The exit keeps the
+ * half-the-enter ratio. Curves and the reduced-motion fade come from
+ * {@link PRESENCE_TIMING}, so the two cannot drift apart.
+ *
+ * Modal, BottomSheet and Collapsible stay on the full `presence` clock — they
+ * move more of the screen and are not anchored to anything.
+ */
+const ANCHORED_PRESENCE_TIMING = {
+  ...PRESENCE_TIMING,
+  _open: { ...PRESENCE_TIMING._open, animationDuration: 'moderate' },
+  _closed: { ...PRESENCE_TIMING._closed, animationDuration: 'faster' },
+} as const;
+
 /**
  * Dash length for the `checkmark-draw` keyframe. Declared once so the pattern
  * the tick is hidden behind and the offset the keyframe animates away are the
@@ -239,7 +261,9 @@ export const animationStyles = {
       // The one preset with a real default: a press is a scale, always.
       transitionProperty: 'scale',
       transitionDuration: 'motion.press',
-      transitionTimingFunction: 'standard',
+      // Ease-out, not `standard`: `standard` starts slowly, so the first frames
+      // of the press lag behind the finger.
+      transitionTimingFunction: 'emphasized',
       ...REDUCED,
     },
   },
@@ -300,6 +324,15 @@ export const animationStyles = {
     value: { ...PRESENCE_TIMING },
   },
 
+  /**
+   * `presence` for a part anchored to its trigger — menu, select, combobox,
+   * popover and tooltip content. 200ms in, 100ms out; see
+   * {@link ANCHORED_PRESENCE_TIMING}.
+   */
+  'presence-anchored': {
+    value: { ...ANCHORED_PRESENCE_TIMING },
+  },
+
   /**
    * List items arriving one after another instead of all at once.
    *
@@ -365,12 +398,13 @@ export const keyframes = {
     from: { opacity: '1', scale: '1' },
     to: { opacity: '0', scale: '0.97' },
   },
-  // The dot only mounts on check, so it grows from nothing. `0.4` is where
-  // Chakra's radiomark recipe rests it; ending anywhere else would make the dot
-  // jump the moment the animation hands back.
+  // The dot only mounts on check. It starts small and transparent rather than
+  // at `scale: 0` — nothing real appears from nothing, and a dot growing from a
+  // point reads as a glitch. `0.4` is where Chakra's radiomark recipe rests it;
+  // ending anywhere else would make the dot jump when the animation hands back.
   'dot-pop': {
-    from: { scale: '0' },
-    to: { scale: '0.4' },
+    from: { scale: '0.25', opacity: '0' },
+    to: { scale: '0.4', opacity: '1' },
   },
   'checkmark-draw': {
     // Negative, not positive. Chakra's polyline runs `20 6 → 9 17 → 4 12`, so

package/src/theme/motionGuards.test.ts

@@ -37,6 +37,7 @@ const CASES = {
   // The two presets that carry their own scope and must not be asked for one.
   pressNeedsNoScope: `<div animationStyle="press" />`,
   presenceNeedsNoScope: `<div animationStyle="presence" />`,
+  anchoredNeedsNoScope: `<div animationStyle="presence-anchored" />`,
 };
 
 type Case = keyof typeof CASES;
@@ -126,6 +127,7 @@ describe('the scope guard', () => {
   it.each([
     ['press', 'pressNeedsNoScope'],
     ['presence', 'presenceNeedsNoScope'],
+    ['presence-anchored', 'anchoredNeedsNoScope'],
   ] as const)('leaves %s alone, since it carries its own scope', (_n, key) => {
     // press defaults to `scale`; presence is an `animation-*` preset and its
     // keyframe already names what moves. Asking either for a property would

package/src/theme/recipes/accordion.ts

@@ -0,0 +1,20 @@
+import { defineSlotRecipe } from '@chakra-ui/react';
+
+import { PRESENCE_TIMING } from '../motion';
+
+/**
+ * Logician overrides for Chakra's `accordion` slot recipe.
+ *
+ * Only the clock. Chakra opens and closes the item content over a symmetric
+ * 200 / 200, while `Collapsible` — the same height animation — already runs on
+ * the house `presence` policy (300 in, 150 out). Consumers render
+ * `Accordion.ItemContent` straight from Chakra, so a component prop cannot
+ * reach it; the recipe can. The recipe's own `expand-height` /
+ * `collapse-height` names are untouched and still decide what moves.
+ */
+export const accordionSlotRecipe = defineSlotRecipe({
+  slots: ['itemContent'],
+  base: {
+    itemContent: { ...PRESENCE_TIMING },
+  },
+});

package/src/utils/focusRing.ts

@@ -2,8 +2,13 @@
  * Standard focus ring styles for interactive components.
  *
  * - _focus: suppresses the browser's default outline on all focus events (including mouse)
- * - _focusVisible: shows the ring only on keyboard focus (CSS :focus-visible),
- *   with a 0.15s ease-out transition on box-shadow
+ * - _focusVisible: shows the ring only on keyboard focus (CSS :focus-visible)
+ *
+ * No transition, on purpose. The ring answers a key press, and keyboard
+ * actions should land instantly — Tab is pressed hundreds of times a day. It
+ * also used to be a `transition` *shorthand* under `:focus-visible`, which
+ * replaced the element's whole transition list while focused, so a
+ * keyboard-focused Switch or Checkbox snapped its fill instead of fading it.
  */
 export const focusRing = {
   _focus: { outline: 'none' },
@@ -11,7 +16,5 @@ export const focusRing = {
     outline: 'none',
     boxShadow:
       'rgb(255, 255, 255) 0px 0px 0px 2px, var(--chakra-colors-primary-main) 0px 0px 0px 4px',
-    transition: 'box-shadow 0.15s ease-out',
-    _motionReduce: { transition: 'none' },
   },
 } as const;