@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 4.0.0

package/src/components/Pulse/Pulse.remount.test.tsx

@@ -0,0 +1,179 @@
+import { useState } from 'react';
+import { ChakraProvider } from '@chakra-ui/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { Pulse } from '../Pulse';
+import { Shake } from '../Shake';
+
+/**
+ * `Pulse` and `Shake` replay **without remounting**, and these hold that down.
+ *
+ * The first version restarted the animation by changing the React `key`, which
+ * is the cheapest way to replay a CSS animation and also throws away the whole
+ * subtree. Measured cost: focus landed on `<body>`, uncontrolled inputs reset,
+ * and any child animation mid-flight started over. `Shake` made it worst — it
+ * fires on a refusal, so it took the keyboard away from the person who had just
+ * been told no.
+ *
+ * Now the *name* changes instead: two byte-identical keyframes, alternating by
+ * play count. CSS restarts an animation whose name changed, and the DOM is left
+ * alone.
+ */
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+describe('trigger-driven replay and child state', () => {
+  it('keeps a controlled child intact across a replay', () => {
+    // The ordinary case: the value lives above the wrapper, so a remount below
+    // it cannot lose anything.
+    const Harness = () => {
+      const [count, setCount] = useState(0);
+      const [value, setValue] = useState('');
+      return (
+        <>
+          <button onClick={() => setCount((c) => c + 1)}>bump</button>
+          <Pulse trigger={count}>
+            <input
+              aria-label="controlled"
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+            />
+          </Pulse>
+        </>
+      );
+    };
+
+    wrap(<Harness />);
+    const input = screen.getByLabelText('controlled');
+    fireEvent.change(input, { target: { value: 'typed' } });
+    expect(input).toHaveValue('typed');
+
+    fireEvent.click(screen.getByRole('button', { name: 'bump' }));
+
+    expect(screen.getByLabelText('controlled')).toHaveValue('typed');
+  });
+
+  it('keeps an uncontrolled child intact across a replay', () => {
+    // The regression this replaced: a `key`-driven replay reset it.
+    const Harness = () => {
+      const [count, setCount] = useState(0);
+      return (
+        <>
+          <button onClick={() => setCount((c) => c + 1)}>bump</button>
+          <Pulse trigger={count}>
+            <input aria-label="uncontrolled" defaultValue="" />
+          </Pulse>
+        </>
+      );
+    };
+
+    wrap(<Harness />);
+    fireEvent.change(screen.getByLabelText('uncontrolled'), {
+      target: { value: 'typed' },
+    });
+    expect(screen.getByLabelText('uncontrolled')).toHaveValue('typed');
+
+    fireEvent.click(screen.getByRole('button', { name: 'bump' }));
+
+    expect(screen.getByLabelText('uncontrolled')).toHaveValue('typed');
+  });
+
+  it('keeps keyboard focus inside the subtree across a replay', () => {
+    // The sharpest form of the same regression, and the reason it is a defect
+    // rather than a documented cost: `Shake` fires on a rejected answer, so a
+    // remount here moves the keyboard out from under someone mid-interaction.
+    // Their next Tab would start from the top of the page.
+    const Harness = () => {
+      const [n, setN] = useState(0);
+      return (
+        <>
+          <button onClick={() => setN((c) => c + 1)}>reject</button>
+          <Shake trigger={n}>
+            <input aria-label="answer" />
+          </Shake>
+        </>
+      );
+    };
+
+    wrap(<Harness />);
+    const input = screen.getByLabelText('answer');
+    input.focus();
+
+    fireEvent.click(screen.getByRole('button', { name: 'reject' }));
+
+    expect(document.activeElement).toBe(screen.getByLabelText('answer'));
+  });
+
+  it('replays by changing the animation name, not by remounting', () => {
+    // The mechanism itself, so a later "simplification" back to a key fails.
+    const Harness = ({ n }: { n: number }) => (
+      <Pulse trigger={n}>
+        <span>value</span>
+      </Pulse>
+    );
+
+    const { container, rerender } = wrap(<Harness n={0} />);
+    const node = container.firstElementChild;
+
+    const names: string[] = [];
+    for (const n of [1, 2, 3]) {
+      rerender(
+        <ChakraProvider value={system}>
+          <Harness n={n} />
+        </ChakraProvider>
+      );
+      names.push(getComputedStyle(container.firstElementChild!).animationName);
+    }
+
+    // Same DOM node throughout — nothing was thrown away.
+    expect(container.firstElementChild).toBe(node);
+    // And a different name each time, which is what restarts it.
+    expect(names[0]).not.toBe(names[1]);
+    expect(names[1]).not.toBe(names[2]);
+  });
+
+  it('does not remount before the first trigger change', () => {
+    // The first-render latch: a value already set on mount is not an event, so
+    // nothing replays and nothing is discarded.
+    const Harness = ({ trigger }: { trigger: number }) => (
+      <Shake trigger={trigger}>
+        <input aria-label="stable" defaultValue="" />
+      </Shake>
+    );
+
+    const { rerender } = wrap(<Harness trigger={7} />);
+    fireEvent.change(screen.getByLabelText('stable'), {
+      target: { value: 'kept' },
+    });
+
+    // Same trigger, ordinary re-render — must not disturb the subtree.
+    rerender(
+      <ChakraProvider value={system}>
+        <Harness trigger={7} />
+      </ChakraProvider>
+    );
+
+    expect(screen.getByLabelText('stable')).toHaveValue('kept');
+  });
+
+  it('renders children that change without a new trigger', () => {
+    // The failure mode `SwapTransition` had. These two hold no copy of the
+    // subtree, so they never had it — pinned so a future "optimisation" that
+    // caches children cannot introduce it here.
+    const Harness = () => {
+      const [picked, setPicked] = useState<string | null>(null);
+      return (
+        <Shake trigger={0}>
+          <button onClick={() => setPicked('b')}>{picked ?? 'nothing'}</button>
+        </Shake>
+      );
+    };
+
+    wrap(<Harness />);
+    fireEvent.click(screen.getByRole('button', { name: 'nothing' }));
+
+    expect(screen.getByRole('button', { name: 'b' })).toBeInTheDocument();
+  });
+});

package/src/components/Pulse/Pulse.stories.tsx

@@ -0,0 +1,74 @@
+import { HStack, Stack } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Badge } from '../Badge';
+import { Button } from '../Button';
+import { Tag } from '../Tag';
+import { Subtext } from '../Typography';
+import { Pulse } from '.';
+
+/**
+ * Pops once whenever `trigger` changes — for drawing the eye to a value that
+ * just updated. Pure CSS: a changed `key` is a new element, and a new element
+ * runs its animation from the top.
+ */
+const meta = {
+  title: 'Components/Motion/Pulse',
+  component: Pulse,
+  args: { trigger: 0 },
+} satisfies Meta<typeof Pulse>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** The first render never pops — a counter that mounts at 12 has not just become 12. */
+export const Default: Story = {
+  render: () => {
+    const [balance, setBalance] = useState(1250);
+
+    return (
+      <Stack gap={4} align="flex-start">
+        <Button size="sm" onClick={() => setBalance((b) => b + 50)}>
+          +50 크레딧
+        </Button>
+        <Pulse trigger={balance}>
+          <Tag colorPalette="primary" variant="soft">
+            {balance.toLocaleString()} 크레딧
+          </Tag>
+        </Pulse>
+        <Subtext color="fg.muted" mb={0}>
+          마운트할 때는 조용하고, 값이 바뀔 때만 튑니다.
+        </Subtext>
+      </Stack>
+    );
+  },
+};
+
+/** `peak` is amplitude. `overshoot` is what makes even 1.12 readable. */
+export const Peak: Story = {
+  render: () => {
+    const [run, setRun] = useState(0);
+
+    return (
+      <Stack gap={5} align="flex-start">
+        <Button size="sm" onClick={() => setRun((r) => r + 1)}>
+          셋 동시 재생
+        </Button>
+        <HStack gap={8}>
+          {[1.12, 1.3, 1.6].map((peak) => (
+            <Stack key={peak} gap={2} align="center">
+              <Pulse trigger={run} peak={peak}>
+                <Badge variant="success">완료</Badge>
+              </Pulse>
+              <Subtext fontFamily="mono" fontSize="2xs" color="fg.muted" mb={0}>
+                {peak}
+              </Subtext>
+            </Stack>
+          ))}
+        </HStack>
+      </Stack>
+    );
+  },
+};

package/src/components/Pulse/Pulse.styles.ts

@@ -0,0 +1,42 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+
+/**
+ * The one-shot "look here" pop.
+ *
+ * Lives here rather than in the shared vocabulary because a there-and-back is
+ * not a transition at all — a transition interpolates A to B, and this ends
+ * where it started. It needs the midpoint that only a keyframe has, so the
+ * `pulse-pop` keyframe is global (all `@keyframes` are) and this composition
+ * is local.
+ *
+ * `motion.slow` and `overshoot`: the same pair FactChat's framer-motion `Pulse`
+ * used, which is the point — the port changes the *mechanism*, not the feel.
+ * Overshoot is what makes a 12% scale readable at all; on `standard` the same
+ * amplitude reads as a rendering hiccup.
+ *
+ * Reduced motion removes it outright rather than shortening it. A pop exists to
+ * be noticed, and there is nothing left of one that is not; the value it draws
+ * the eye to has already changed by the time this plays, so nothing is lost but
+ * the emphasis.
+ */
+/**
+ * A function of the play count, because the *name* is what restarts it.
+ *
+ * A CSS animation replays when `animation-name` changes, so alternating between
+ * two byte-identical keyframes restarts the pop on every trigger without
+ * touching the DOM. The earlier version restarted it by changing the React
+ * `key`, which remounts the subtree — and a remount throws away whatever was
+ * inside it: the user's focus (measured: it lands on `<body>`), any uncontrolled
+ * input state, and any child animation mid-flight. A pop that draws the eye to a
+ * changed value must not also move the keyboard out from under someone, and
+ * `Shake` is worse on this axis than `Pulse` is: it fires on a rejected answer,
+ * which is exactly when a keyboard user is mid-interaction.
+ */
+export const pulsePop = (play: number): SystemStyleObject => ({
+  animationName: play % 2 === 0 ? 'pulse-pop-alt' : 'pulse-pop',
+  animationDuration: 'motion.slow',
+  animationTimingFunction: 'overshoot',
+  animationFillMode: 'both',
+  transformOrigin: 'center',
+  _motionReduce: { animationName: 'none' },
+});

package/src/components/Pulse/Pulse.tsx

@@ -0,0 +1,82 @@
+import { ForwardedRef, forwardRef, useRef } from 'react';
+import { Box } from '@chakra-ui/react';
+
+import { mergeCss } from '@/utils/mergeCss';
+
+import { pulsePop } from './Pulse.styles';
+import { PulseProps } from './Pulse.types';
+
+/**
+ * Pops once, whenever `trigger` changes — for drawing the eye to a value that
+ * just updated: a balance that grew, a badge that landed, a step that filled.
+ *
+ * Pure CSS. The obvious implementation reaches for an animation library, since
+ * "replay this on demand" is what their imperative controls are for, but CSS
+ * already has the mechanism: an animation restarts when its **name** changes, so
+ * this alternates between two byte-identical keyframes. No dependency, no ref
+ * plumbing, no effect.
+ *
+ * Not a changed React `key`, which also restarts it and was how this shipped
+ * first. A new key is a new element, so the whole subtree is thrown away and
+ * rebuilt — measured cost: keyboard focus lands on `<body>`, uncontrolled inputs
+ * reset, child animations restart. A pop that draws the eye to a value must not
+ * also move the keyboard out from under someone.
+ *
+ * The first render never pops. A counter that mounts already at 12 has not just
+ * become 12, and an interface that celebrates its own initial paint is noise.
+ *
+ * Not a `Shake`. Both replay on a trigger, and the pair has to stay apart: a
+ * pulse draws the eye to something *good* that landed, a shake refuses. Swapped,
+ * a refusal reads as congratulation and emphasis reads as an error the reader
+ * then goes looking for.
+ *
+ * **Adds one `div` around `children`**, and layout props land on that wrapper
+ * rather than on the child. Usually the same result — but the child is no longer
+ * a *direct* child of what surrounds it, so animate the inner element instead of
+ * wrapping when the parent needs its children directly: a `<tr>` needs `<td>`s,
+ * and Ark parts (`Menu.List`, `Tree`) walk their own children for focus and
+ * typeahead.
+ *
+ * ```tsx
+ * <Pulse trigger={balance}>
+ *   <Text textStyle="h2">{balance}</Text>
+ * </Pulse>
+ * ```
+ */
+export const Pulse = forwardRef(
+  (
+    { trigger, peak, children, css, ...rest }: PulseProps,
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => {
+    // A render counter rather than the trigger itself, so a value that returns
+    // to one it held before still pops — `0 → 1 → 0` is two events, and keying
+    // on the value would swallow the second.
+    const plays = useRef(0);
+    const previous = useRef(trigger);
+    if (previous.current !== trigger) {
+      previous.current = trigger;
+      plays.current += 1;
+    }
+
+    return (
+      <Box
+        ref={ref}
+        display="inline-flex"
+        {...rest}
+        css={
+          plays.current === 0
+            ? css
+            : mergeCss(
+                pulsePop(plays.current),
+                peak === undefined ? undefined : { '--pulse-peak': peak },
+                css
+              )
+        }
+      >
+        {children}
+      </Box>
+    );
+  }
+);
+
+Pulse.displayName = 'Pulse';

package/src/components/Pulse/Pulse.types.ts

@@ -0,0 +1,12 @@
+import type { BoxProps } from '@chakra-ui/react';
+
+export interface PulseProps extends Omit<BoxProps, 'scale'> {
+  /**
+   * Change this to fire one pop. Any changing value works — a counter, an id, a
+   * timestamp. The first render never pops, so a value that is already set on
+   * mount stays still.
+   */
+  trigger: string | number;
+  /** Peak scale at the top of the pop. Defaults to `1.12`. */
+  peak?: number;
+}

package/src/components/Pulse/index.ts

@@ -0,0 +1,2 @@
+export { Pulse } from './Pulse';
+export type { PulseProps } from './Pulse.types';

package/src/components/Radio/Radio.stories.tsx

@@ -34,7 +34,7 @@ export default meta;
 type Story = StoryObj<typeof Radio>;
 
 export const Default: Story = {
-  render: args => (
+  render: (args) => (
     <RadioGroup defaultValue="option1">
       <Radio {...args}>
         <Radio.Control />
@@ -45,7 +45,7 @@ export const Default: Story = {
 };
 
 export const Checked: Story = {
-  render: args => (
+  render: (args) => (
     <RadioGroup defaultValue="option1">
       <Radio {...args} value="option1">
         <Radio.Control />
@@ -56,7 +56,7 @@ export const Checked: Story = {
 };
 
 export const Disabled: Story = {
-  render: args => (
+  render: (args) => (
     <RadioGroup defaultValue="disabled-checked">
       <Stack gap={3}>
         <Radio {...args} value="disabled-unchecked" disabled>
@@ -73,9 +73,9 @@ export const Disabled: Story = {
 };
 
 export const Sizes: Story = {
-  render: args => (
+  render: (args) => (
     <Stack gap={4}>
-      {(['sm', 'md', 'lg'] as const).map(size => (
+      {(['sm', 'md', 'lg'] as const).map((size) => (
         <RadioGroup key={size} size={size} defaultValue={size}>
           <Radio {...args} value={size}>
             <Radio.Control />
@@ -88,14 +88,18 @@ export const Sizes: Story = {
 };
 
 export const States: Story = {
-  render: args => (
+  render: (args) => (
     <RadioGroup defaultValue="checked">
       <Stack gap={3}>
         {[
           { value: 'default', label: 'Default state' },
           { value: 'checked', label: 'Checked state' },
           { value: 'disabled', label: 'Disabled state', disabled: true },
-          { value: 'disabled-checked', label: 'Disabled checked state', disabled: true },
+          {
+            value: 'disabled-checked',
+            label: 'Disabled checked state',
+            disabled: true,
+          },
         ].map(({ value, label, disabled }) => (
           <Radio key={value} {...args} value={value} disabled={disabled}>
             <Radio.Control />
@@ -116,14 +120,16 @@ export const BasicGroup: RadioGroupStory = {
     return (
       <VStack align="flex-start" gap={4}>
         <Box>Selected value: {value}</Box>
-        <RadioGroup value={value} onValueChange={e => setValue(e.value)}>
+        <RadioGroup value={value} onValueChange={(e) => setValue(e.value)}>
           <Stack gap={3}>
-            {['First option', 'Second option', 'Third option'].map((label, i) => (
-              <Radio key={`option${i + 1}`} value={`option${i + 1}`}>
-                <Radio.Control />
-                <Radio.Text>{label}</Radio.Text>
-              </Radio>
-            ))}
+            {['First option', 'Second option', 'Third option'].map(
+              (label, i) => (
+                <Radio key={`option${i + 1}`} value={`option${i + 1}`}>
+                  <Radio.Control />
+                  <Radio.Text>{label}</Radio.Text>
+                </Radio>
+              )
+            )}
           </Stack>
         </RadioGroup>
       </VStack>
@@ -138,7 +144,7 @@ export const HorizontalGroup: RadioGroupStory = {
     return (
       <VStack align="flex-start" gap={4}>
         <Box>Preferred contact method: {value}</Box>
-        <RadioGroup value={value} onValueChange={e => setValue(e.value)}>
+        <RadioGroup value={value} onValueChange={(e) => setValue(e.value)}>
           <HStack gap={6}>
             {[
               { value: 'email', label: 'Email' },
@@ -163,24 +169,27 @@ export const WithLongLabels: RadioGroupStory = {
 
     return (
       <Box maxW="400px">
-        <RadioGroup value={value} onValueChange={e => setValue(e.value)}>
+        <RadioGroup value={value} onValueChange={(e) => setValue(e.value)}>
           <Stack gap={4}>
             <Radio value="option1">
               <Radio.Control />
               <Radio.Text>
-                This is a very long label that demonstrates how radio buttons handle longer
-                text content
+                This is a very long label that demonstrates how radio buttons
+                handle longer text content
               </Radio.Text>
             </Radio>
             <Radio value="option2">
               <Radio.Control />
               <Radio.Text>
-                Another option with extended descriptive text that might wrap to multiple lines
+                Another option with extended descriptive text that might wrap to
+                multiple lines
               </Radio.Text>
             </Radio>
             <Radio value="option3">
               <Radio.Control />
-              <Radio.Text>A third choice with substantial explanatory content</Radio.Text>
+              <Radio.Text>
+                A third choice with substantial explanatory content
+              </Radio.Text>
             </Radio>
           </Stack>
         </RadioGroup>
@@ -200,7 +209,10 @@ export const FormExample: RadioGroupStory = {
           <Box fontWeight="semibold" mb={2}>
             Notification Preferences
           </Box>
-          <RadioGroup value={notifications} onValueChange={e => setNotifications(e.value)}>
+          <RadioGroup
+            value={notifications}
+            onValueChange={(e) => setNotifications(e.value)}
+          >
             <Stack gap={3}>
               {[
                 { value: 'all', label: 'All notifications' },
@@ -220,7 +232,7 @@ export const FormExample: RadioGroupStory = {
           <Box fontWeight="semibold" mb={2}>
             Theme Preference
           </Box>
-          <RadioGroup value={theme} onValueChange={e => setTheme(e.value)}>
+          <RadioGroup value={theme} onValueChange={(e) => setTheme(e.value)}>
             <HStack gap={4}>
               {[
                 { value: 'light', label: 'Light theme' },

package/src/components/Radio/Radio.styles.ts

@@ -0,0 +1,24 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+
+/**
+ * The radio's mark: the ring fills, then the dot springs in one `motion.beat`
+ * later — the same two beats as the checkbox, "pressed" then "confirmed".
+ *
+ * Local rather than shared: `.dot` is this component's own inner part, so the
+ * selector only means anything here.
+ *
+ * An animation rather than a transition because the dot mounts on check, and a
+ * transition has no previous value to run from at mount.
+ */
+export const dotPop: SystemStyleObject = {
+  transitionProperty: 'background-color, border-color',
+  transitionDuration: 'fast',
+  transitionTimingFunction: 'standard',
+  '& .dot': {
+    animation: `dot-pop var(--chakra-durations-motion-base) var(--chakra-easings-overshoot) var(--chakra-durations-motion-beat) both`,
+  },
+  _motionReduce: {
+    transitionDuration: 'motion.instant',
+    '& .dot': { animation: 'none' },
+  },
+};

package/src/components/Radio/RadioControl.tsx

@@ -1,14 +1,41 @@
-import { forwardRef } from 'react';
+import { forwardRef, useId } from 'react';
 import { RadioGroup, RadioGroupItemControlProps } from '@chakra-ui/react';
 
 import { focusRing } from '@/utils/focusRing';
 
+import { dotPop } from './Radio.styles';
+
 export const RadioControl = forwardRef<
   HTMLDivElement,
   RadioGroupItemControlProps
->((props, ref) => (
-  <RadioGroup.ItemControl ref={ref} {...focusRing} {...props}>
-    <RadioGroup.ItemIndicator />
-  </RadioGroup.ItemControl>
-));
+>((props, ref) => {
+  // Chakra derives the indicator's id from the same `ids.itemControl` it gives
+  // the control it sits inside, so every radio on the page shipped TWO elements
+  // with one id — a markup error under KWCAG 2.1 5.4.1.1 마크업 오류 방지, which
+  // Korean evaluators still count even though WCAG 2.2 dropped SC 4.1.1. It also
+  // breaks anything that resolves the control by id, since `getElementById`
+  // returns whichever came first.
+  //
+  // Nothing references the indicator — it is the dot inside the control — so any
+  // unique value fixes it, and `useId` is the one that stays stable across
+  // server and client render.
+  const indicatorId = useId();
+
+  return (
+    <RadioGroup.ItemControl
+      ref={ref}
+      // The outer ring is fully covered by the indicator below, but it carries
+      // the same checked fill — left untimed it would snap behind the one that
+      // eases.
+      animationStyle="feedback"
+      transitionProperty="background-color, border-color"
+      {...focusRing}
+      {...props}
+    >
+      {/* `ItemIndicator` is the mark that actually holds `.dot`; it renders its
+          own `ItemControl` internally, which is why this is nested. */}
+      <RadioGroup.ItemIndicator id={indicatorId} css={dotPop} />
+    </RadioGroup.ItemControl>
+  );
+});
 RadioControl.displayName = 'Radio.Control';

package/src/components/Reveal/Reveal.stories.tsx

@@ -0,0 +1,61 @@
+import { Box, Stack } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Button } from '../Button';
+import { Card } from '../Card';
+import { Subtext, Text } from '../Typography';
+import { Reveal } from '.';
+
+/**
+ * Opens a block out of zero height instead of inserting it — for content that
+ * arrives *underneath* something the reader is already looking at.
+ *
+ * Opens through `grid-template-rows: 0fr → 1fr`, not through `height`.
+ * `height: auto` is not interpolable, which is the only reason this needed
+ * JavaScript before.
+ */
+const meta = {
+  title: 'Components/Motion/Reveal',
+  component: Reveal,
+} satisfies Meta<typeof Reveal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [shown, setShown] = useState(false);
+
+    return (
+      <Stack gap={3} align="flex-start" maxW="440px">
+        <Card p={4} w="100%">
+          <Text fontWeight="600" mb={0}>
+            지구의 대기는 78%가 질소다
+          </Text>
+        </Card>
+
+        <Button size="xs" variant="outline" onClick={() => setShown((v) => !v)}>
+          {shown ? '숨기기' : '근거 보기'}
+        </Button>
+
+        {shown && (
+          <Reveal>
+            <Card p={4} variant="default">
+              <Subtext mb={0}>
+                건조 공기 기준 질소 78.08%, 산소 20.95%, 아르곤 0.93%입니다.
+                수증기를 포함하면 비율이 달라집니다.
+              </Subtext>
+            </Card>
+          </Reveal>
+        )}
+
+        <Subtext color="fg.muted" mb={0}>
+          바로 렌더하면 아래 내용이 한 프레임에 밀립니다. 읽던 자리에서 그
+          프레임은 「도착」이 아니라 「페이지가 깨졌다」로 읽힙니다.
+        </Subtext>
+      </Stack>
+    );
+  },
+};