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

package/src/components/Menu/MenuList.tsx

@@ -59,9 +59,9 @@ export const MenuList = forwardRef<HTMLDivElement, MenuListProps>(
           p="1.5"
           // Chakra's recipe opens the menu in 150ms and closes it in 100 —
           // nearly symmetric, and shorter than everything else that appears
-          // over the page. `presence` puts it on the house enter/exit ratio;
+          // over the page. `presence-anchored` puts it on the house enter/exit ratio;
           // the slide-from-the-trigger movement is the recipe's and stays.
-          animationStyle="presence"
+          animationStyle="presence-anchored"
           {...rest}
         >
           <ScaledContext fontSize={baseFontSize}>{rows}</ScaledContext>

package/src/components/Popover/PopoverContent.tsx

@@ -18,8 +18,8 @@ export const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(
           borderWidth="1px"
           borderColor="border.subtle"
           // Scales from its arrow's origin on the recipe's keyframes, on our
-          // clock — see `presence`.
-          animationStyle="presence"
+          // clock — see `presence-anchored`.
+          animationStyle="presence-anchored"
           {...props}
         >
           <ScaledContext fontSize={baseFontSize}>{children}</ScaledContext>

package/src/components/Select/Combobox.tsx

@@ -27,7 +27,7 @@ const Content = forwardRef<HTMLDivElement, ChakraCombobox.ContentProps>(
         ref={ref}
         // Chakra gives this one `animationDuration: 0s` on close — the list
         // vanishes mid-keystroke with no exit at all. Same policy as Select.
-        animationStyle="presence"
+        animationStyle="presence-anchored"
         {...props}
         css={mergeCss(contentStyles, css)}
       />

package/src/components/Select/Select.tsx

@@ -29,7 +29,7 @@ const Content = forwardRef<HTMLDivElement, ChakraSelect.ContentProps>(
         ref={ref}
         // Chakra closes this one over `fastest` (50ms), which is fast enough to
         // read as the list being cut off rather than dismissed.
-        animationStyle="presence"
+        animationStyle="presence-anchored"
         {...props}
         css={mergeCss(contentStyles, css)}
       />

package/src/components/Tooltip/Tooltip.instant.test.tsx

@@ -0,0 +1,43 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { Tooltip } from './Tooltip';
+
+/**
+ * zag marks a tooltip `data-instant` when the pointer moves to it from another
+ * open one. It skips the open delay there by itself; the animation is ours to
+ * skip. The rule has to outrank the presence clock's `:is([data-state=open])`,
+ * so this checks the emitted selector rather than trusting the cascade.
+ */
+describe('Tooltip instant mode', () => {
+  it('drops the enter/exit animation when zag marks the content instant', () => {
+    const { getByRole } = render(
+      <ChakraProvider value={system}>
+        <Tooltip content="hint" open>
+          <button type="button">trigger</button>
+        </Tooltip>
+      </ChakraProvider>
+    );
+    const content = getByRole('tooltip');
+    const css = Array.from(document.querySelectorAll('style'))
+      .map((s) => s.textContent ?? '')
+      .join('\n');
+    const classes = content.className
+      .split(' ')
+      .filter((c) => c.startsWith('css-'));
+    const rule = classes
+      .flatMap((c) => [
+        ...css.matchAll(
+          new RegExp(
+            `\\.${c}\\[data-instant\\]\\[data-state\\]\\{([^}]*)\\}`,
+            'g'
+          )
+        ),
+      ])
+      .map((m) => m[1])
+      .join(';');
+    expect(rule).toContain('animation-duration:0ms');
+  });
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -53,10 +53,19 @@ export const Tooltip = forwardRef(
               // ways — which is why a tooltip used to feel like it was being
               // peeled off the trigger. It has the shortest dwell of anything
               // here, so the exit being half the enter matters most.
-              animationStyle="presence"
+              animationStyle="presence-anchored"
               {...contentProps}
               css={mergeCss(
-                { '--tooltip-bg': 'var(--chakra-colors-gray-1200)' },
+                {
+                  '--tooltip-bg': 'var(--chakra-colors-gray-1200)',
+                  // zag sets `data-instant` when the pointer moves from one
+                  // open tooltip to the next. It already skips the delay
+                  // there; skip the enter/exit too, so sweeping a toolbar
+                  // doesn't replay the animation on every button. The extra
+                  // `[data-state]` outranks the presence clock's
+                  // `:is([data-state=open])`.
+                  '&[data-instant][data-state]': { animationDuration: '0ms' },
+                },
                 contentProps?.css
               )}
             >

package/src/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.tsx

@@ -201,7 +201,8 @@ export function GraphErrorBanner({
         border="none"
         cursor="pointer"
         opacity={showValidating ? 0.6 : 1}
-        transition="opacity 0.15s"
+        animationStyle="feedback"
+        transitionProperty="opacity"
         onClick={() => setOpen((o) => !o)}
       >
         <Text fontSize="sm" fontWeight="semibold" color="slate.1300">
@@ -211,7 +212,8 @@ export function GraphErrorBanner({
           boxSize="xs"
           color="slate.900"
           transform={open ? 'rotate(180deg)' : 'none'}
-          transition="transform 0.15s"
+          animationStyle="feedback"
+          transitionProperty="transform"
         />
       </Box>
       {open ? (
@@ -221,7 +223,8 @@ export function GraphErrorBanner({
           maxH="80"
           overflowY="auto"
           opacity={showValidating ? 0.6 : 1}
-          transition="opacity 0.15s"
+          animationStyle="feedback"
+          transitionProperty="opacity"
           borderTopWidth="1px"
           borderColor="slate.200"
         >

package/src/theme/Motion.stories.tsx

@@ -178,6 +178,11 @@ const VOCAB = [
     name: 'presence',
     line: 'animationStyle="presence"',
   },
+  {
+    when: '트리거에 붙은 팝업이 열리고 닫힌다',
+    name: 'presence-anchored',
+    line: 'animationStyle="presence-anchored"',
+  },
   {
     when: '목록이 차례로 도착한다',
     name: 'stagger',
@@ -733,7 +738,7 @@ export const Choose: Story = {
 
         <Preset
           name="press"
-          timing="120ms · standard"
+          timing="120ms · emphasized"
           lead="포인터가 눌리는 순간의 접촉감. 유일하게 property를 안 적어도 되는 프리셋입니다 — 프레스는 언제나 scale이라 기본값이 들어 있습니다."
           code={`<Box
   scale="1"
@@ -805,7 +810,7 @@ export const Choose: Story = {
         <Preset
           name="presence"
           timing="진입 300ms · emphasized / 퇴장 150ms · standard"
-          lead="열리고 닫히는 모든 것. 진입은 읽혀야 하고 퇴장은 이미 결정된 일이라 절반입니다. Menu · Popover · Tooltip · Select · Collapsible · Modal 여섯이 이 하나를 나눠 씁니다."
+          lead="열리고 닫히는 모든 것. 진입은 읽혀야 하고 퇴장은 이미 결정된 일이라 절반입니다. Modal · BottomSheet · Collapsible 은 300 / 150, 트리거에 붙은 Menu · Select · Combobox · Popover · Tooltip 은 presence-anchored 로 200 / 100 입니다."
           code={`<Menu.List animationStyle="presence" />
 
 // 무엇이 움직이는지는 각 recipe의 것이고, presence는 시계만 바꿉니다 —
@@ -819,10 +824,10 @@ export const Choose: Story = {
             <Stack gap={4}>
               <Stack gap={1}>
                 {[
-                  ['Menu', '150 / 100 → 300 / 150'],
-                  ['Popover', '150 / 100 → 300 / 150'],
-                  ['Tooltip', '150 / 150 → 300 / 150'],
-                  ['Select', '150 / 50 → 300 / 150'],
+                  ['Menu', '150 / 100 → 200 / 100 (anchored)'],
+                  ['Popover', '150 / 100 → 200 / 100 (anchored)'],
+                  ['Tooltip', '150 / 150 → 200 / 100 (anchored)'],
+                  ['Select', '150 / 50 → 200 / 100 (anchored)'],
                   ['Collapsible', '200 / 200 → 300 / 150'],
                   ['Modal', '자체 keyframe + presence 시계'],
                 ].map(([name, change]) => (
@@ -956,7 +961,7 @@ export const Choose: Story = {
           lead="한 요소 안에서 속성마다 다른 속도가 필요할 때만. Button은 프레스가 120ms인데 색은 150ms라 duration 하나로 표현이 안 됩니다. composite가 주는 것은 동작 줄이기 가드 하나뿐이고, 값은 반드시 토큰 var()로 적으세요."
           code={`// Button.styles.ts
 export const buttonTransition = [
-  'scale            var(--chakra-durations-motion-press) var(--chakra-easings-standard)',
+  'scale            var(--chakra-durations-motion-press) var(--chakra-easings-emphasized)',
   'background-color var(--chakra-durations-fast)         var(--chakra-easings-standard)',
 ].join(', ');
 
@@ -1087,7 +1092,8 @@ const OURS = [
 
 const CHAKRAS = [
   { name: 'fast', ms: 150, use: 'feedback 프리셋 · presence 퇴장' },
-  { name: 'moderate', ms: 200, use: '200ms가 필요하면 이걸 쓰세요' },
+  { name: 'faster', ms: 100, use: 'presence-anchored 퇴장' },
+  { name: 'moderate', ms: 200, use: 'presence-anchored 진입' },
   { name: 'slow', ms: 300, use: '⚠️ 우리 motion.slow(500ms)와 다른 값' },
   { name: 'slower', ms: 400, use: '⚠️ 우리 motion.slower(700ms)와 다른 값' },
 ];
@@ -1097,13 +1103,13 @@ const CURVES = [
     name: 'standard',
     d: 'M0,100 C40,100 20,0 100,0',
     half: '50%',
-    use: 'press · feedback · presence 퇴장',
+    use: 'feedback',
   },
   {
     name: 'emphasized',
     d: 'M0,100 C22,0 36,0 100,0',
     half: '96%',
-    use: 'travel · presence 진입',
+    use: 'press · travel · presence 진입·퇴장',
   },
   {
     name: 'overshoot',

package/src/theme/animationStyles.test.ts

@@ -106,7 +106,7 @@ describe('motion vocabulary', () => {
     const d = (n: string) => `var(--chakra-durations-${n})`;
     const e = (n: string) => `var(--chakra-easings-${n})`;
 
-    expect(timing('press')).toEqual([d('motion-press'), e('standard')]);
+    expect(timing('press')).toEqual([d('motion-press'), e('emphasized')]);
     expect(timing('feedback')).toEqual([d('fast'), e('standard')]);
     expect(timing('travel')).toEqual([d('motion-base'), e('emphasized')]);
     expect(timing('spring')).toEqual([d('motion-base'), e('overshoot')]);
@@ -133,11 +133,12 @@ describe('the enter/exit policy', () => {
     // A guard on the guard: if the condition Chakra emits for `_open` ever
     // changes spelling, `withOpen` silently empties and every assertion below
     // passes over nothing.
-    // `presence` is the only global preset with an open state — the Modal now
-    // carries its own two keyframe names and borrows this clock. The walk stays
-    // a walk rather than an assertion about `presence` alone, so the next
-    // preset with an `_open` branch is covered the day it is written.
-    expect(withOpen).toEqual(['presence']);
+    // `presence` and its shorter anchored twin are the only global presets
+    // with an open state — the Modal carries its own two keyframe names and
+    // borrows the `presence` clock. The walk stays a walk rather than an
+    // assertion about these two alone, so the next preset with an `_open`
+    // branch is covered the day it is written.
+    expect(withOpen).toEqual(['presence', 'presence-anchored']);
   });
 
   it('never declares an enter without the matching exit', () => {
@@ -162,8 +163,23 @@ describe('the enter/exit policy', () => {
     // The reason one preset can sit on a menu that slides, a popover that
     // scales and a collapsible that interpolates a measured height. A name here
     // would flatten all three into whatever it named.
-    const presence = applied('presence') as Css;
-    expect(presence[OPEN].animationName).toBeUndefined();
-    expect(presence[CLOSED].animationName).toBeUndefined();
+    withOpen.forEach((name) => {
+      const css = applied(name) as Css;
+      expect(css[OPEN].animationName, name).toBeUndefined();
+      expect(css[CLOSED].animationName, name).toBeUndefined();
+    });
+  });
+
+  it('opens anchored popups faster than dialogs, on the same curves', () => {
+    const full = applied('presence') as Css;
+    const anchored = applied('presence-anchored') as Css;
+    expect(DURATION_MS[anchored[OPEN].animationDuration]).toBe(200);
+    expect(DURATION_MS[anchored[CLOSED].animationDuration]).toBe(100);
+    expect(anchored[OPEN].animationTimingFunction).toBe(
+      full[OPEN].animationTimingFunction
+    );
+    expect(anchored[CLOSED].animationTimingFunction).toBe(
+      full[CLOSED].animationTimingFunction
+    );
   });
 });

package/src/theme/claude.md

@@ -54,10 +54,11 @@ it never knows *what* moves, so `transitionProperty` stays at the call site.
 | `travel` | Something moving to a new position or size |
 | `spring` | A physical flip, or two things crossing |
 | `presence` | A part with **both** an open and a closed state |
+| `presence-anchored` | The same, for a popup anchored to a trigger (Menu, Select, Combobox, Popover, Tooltip) |
 | `stagger` | Siblings arriving in sequence (with `staggerProps(index)`) |
 | `composite` | Escape hatch — one element needing two different clocks |
 
-**Seven is the whole list and that is policy.** A motion with one caller belongs
+**Eight is the whole list and that is policy.** A motion with one caller belongs
 next to that caller, not here (see `Spinner.styles.ts`, `Checkbox.styles.ts`).
 Adding an eighth needs two real call sites that the existing seven cannot
 express.
@@ -71,7 +72,8 @@ them:
   default fails invisibly.
 - **`prefers-reduced-motion`** is handled. Loops are the exception and slow down
   rather than stopping — a frozen spinner reads as a dead request.
-- **Enter is 300ms, exit is 150ms** for `presence`, enforced by a test.
+- **Enter is 300ms, exit is 150ms** for `presence` (Modal, BottomSheet,
+  Collapsible) and **200ms / 100ms** for `presence-anchored`, enforced by a test.
 
 Three things `animationStyle` accepts and should never be given — all three
 compile, and all three are caught by lint instead of by types, because Chakra

package/src/theme/index.ts

@@ -9,6 +9,7 @@ import {
 import { colors, semanticTokens } from './colors';
 import { globalCss } from './global';
 import { animationStyles, durations, easings, keyframes } from './motion';
+import { accordionSlotRecipe } from './recipes/accordion';
 import { tableSlotRecipe } from './recipes/table';
 
 /**
@@ -333,6 +334,7 @@ const config = defineConfig({
       textarea: formControlLgOverride,
     },
     slotRecipes: {
+      accordion: accordionSlotRecipe,
       table: tableSlotRecipe,
       select: selectSlotRecipe,
     },

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;