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

package/src/components/componentMotion.test.ts

@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest';
+
+import { checkmarkDraw } from './Checkbox/Checkbox.styles';
+import { modalAnimation } from './Modal/Modal.styles';
+import { indeterminateSweep } from './ProgressBar/ProgressBar.styles';
+import { dotPop } from './Radio/Radio.styles';
+import { indicatorTravel } from './SegmentedControl/SegmentedControl.styles';
+import { spinAnimation } from './Spinner/Spinner.styles';
+
+/**
+ * The six motions that are one component's own business rather than shared
+ * vocabulary. They left `theme/animationStyles` because nothing else picks
+ * them, but the guarantees that made the vocabulary trustworthy have to travel
+ * with them — otherwise "move it into the component" quietly means "stop
+ * checking it".
+ *
+ * These assert on the style objects rather than on rendered CSS: what moved is
+ * the *composition*, and the composition is what can rot. The rendered-output
+ * checks that prove a preset actually reaches its element still live next to
+ * the components that own them.
+ */
+const REDUCE = '_motionReduce';
+
+/** Every local motion, and whether it is a loop (which turns off differently). */
+const LOCAL = [
+  { name: 'spinAnimation', style: spinAnimation, loop: true },
+  { name: 'indeterminateSweep', style: indeterminateSweep, loop: true },
+  { name: 'checkmarkDraw', style: checkmarkDraw, loop: false },
+  { name: 'dotPop', style: dotPop, loop: false },
+  { name: 'indicatorTravel', style: indicatorTravel, loop: false },
+] as const;
+
+describe('component-local motion', () => {
+  it('every one of them still answers reduced motion', () => {
+    // The policy that was structural in the theme stays structural here: a
+    // component that animates and forgets the guard fails on the day it is
+    // written, not the day someone reports the dizziness.
+    LOCAL.forEach(({ name, style }) => {
+      expect(style, name).toHaveProperty(REDUCE);
+    });
+  });
+
+  it('no loop turns itself off by zeroing its duration', () => {
+    // A finite transition can be zeroed because its end state survives. A loop
+    // has no end state: zeroing parks the element at an arbitrary frame — a
+    // spinner stuck at some angle reads as a hung request, not a working one.
+    LOCAL.filter((l) => l.loop).forEach(({ name, style }) => {
+      const reduced = style[REDUCE] as Record<string, unknown>;
+      expect(reduced.animationDuration, name).not.toBe('motion.instant');
+    });
+  });
+
+  it('keeps the spinner turning, slower, because it is the signal', () => {
+    const reduced = spinAnimation[REDUCE] as Record<string, unknown>;
+    // Still an animation, still infinite — only the rate changed.
+    expect(reduced.animationName).toBeUndefined();
+    expect(reduced.animationDuration).toBe('motion.loop.sweep');
+    expect(spinAnimation.animationDuration).toBe('motion.loop.turn');
+  });
+
+  it('stops the indeterminate bar, whose signal lives in the surrounding UI', () => {
+    expect(
+      (indeterminateSweep[REDUCE] as Record<string, unknown>).animationName
+    ).toBe('none');
+  });
+
+  it('turns both seamless loops at a constant rate', () => {
+    // A rotation and a track crossing both return to their own start. Easing
+    // decelerates into the last frame and accelerates out of the first, which
+    // are the same position — so the eye catches a stutter once per cycle.
+    [spinAnimation, indeterminateSweep].forEach((style) =>
+      expect(style.animationTimingFunction).toBe('linear')
+    );
+  });
+
+  it('names Chakra keyframes rather than redefining them', () => {
+    // Redefining a keyframe we did not author replaces it for every Chakra
+    // component that reads it by name.
+    expect(spinAnimation.animationName).toBe('spin');
+  });
+
+  it('leaves the Modal owning its movement and nothing else', () => {
+    // The clock comes from `presence`; only the two names are local. A
+    // duration here would be the asymmetry policy drifting out of reach of the
+    // test that enforces it.
+    expect(modalAnimation).toEqual({
+      _open: { animationName: 'modal-in' },
+      _closed: { animationName: 'modal-out' },
+    });
+  });
+
+  it('reaches the Ark indicator through custom properties, not style props', () => {
+    // Ark inlines this part's `transition-*`, and an inline declaration beats
+    // any class — the two custom properties are the only seam left.
+    expect(indicatorTravel).toHaveProperty('--transition-duration');
+    expect(indicatorTravel).toHaveProperty('--transition-timing-function');
+    expect(indicatorTravel).not.toHaveProperty('transitionDuration');
+  });
+
+  it('restores what the checkmark draw presupposes', () => {
+    // The dash pattern is what hides the tick before it is stroked; leaving it
+    // on under reduced motion would leave a dashed checkmark.
+    const reduced = checkmarkDraw[REDUCE] as Record<
+      string,
+      Record<string, unknown>
+    >;
+    expect(reduced['& polyline, & path'].strokeDasharray).toBe('none');
+    expect(reduced['& polyline, & path'].animation).toBe('none');
+  });
+});

package/src/guidelines/FeedbackActions.mdx

@@ -0,0 +1,133 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Guidelines/Actions in feedback surfaces" />
+
+# Actions in feedback surfaces
+
+Toasts, inline banners, panes and dialogs often need a control: "buy credits",
+"undo", "open file". This page covers which control goes where and how it
+should look.
+
+The test for every case: **does the control look like it belongs to the
+container it sits in?**
+
+> Visual prototype with before/after and a playground:
+> [feedback-actions-proto.apps.mindlogic.tools](https://feedback-actions-proto.apps.mindlogic.tools/)
+> (company login).
+
+---
+
+## Why this exists
+
+Until `Toast` had an `action` prop, callers who wanted a button in a toast put
+a `<Button>` inside `description` and styled it themselves. On the credit-402
+toast in FactChat that produced a neutral outline button (`#494949` text, ink
+hairline) on a rose toast (`#FFE6E8` background, `#69000A` text). It carried
+none of the toast's colors, so it read as a separate card dropped on top.
+
+The fix is one recipe for every toast: the action uses the toast's own text
+color, the same treatment as the close ×.
+
+---
+
+## Rules
+
+### 1. Match the container's weight
+
+Toasts and inline banners carry **text actions**. Buttons belong to surfaces
+that own the space: a pane, a dialog, an empty state.
+
+### 2. The action takes the status color
+
+Inside a tinted container the action uses **that container's text color**
+(`danger.dark` on an error toast, `primary.dark` on an info toast). Never a
+neutral control.
+
+### 3. One action per toast; dismiss is ×
+
+No 「닫기」 or 「취소」 button in a toast; the × already does that. If a
+message needs two actions, it is not a toast; use a dialog or a pane.
+
+### 4. Don't repeat the action in the copy
+
+If the action says 「크레딧 구매」, the message doesn't also say "purchase
+credits to continue". Toast copy stays **within 2 lines**.
+
+### 5. In a pane, the fix is the primary
+
+In a pane or empty state, the action that fixes the problem is the primary
+(ink solid, `colorPalette="neutral" variant="solid"`). Dismiss is outline
+neutral (`colorPalette="neutral" variant="outline"`).
+
+### 6. Toasts with an action stay longer
+
+The reader has to read the message and then decide to act. A toast with an
+action defaults to **8s** instead of 5s. `useToast` does this for you when
+`duration` is not given.
+
+---
+
+## Which control goes where
+
+| Surface            | Primary action                                     | Secondary / dismiss              | Max actions | Copy                                       |
+| ------------------ | -------------------------------------------------- | -------------------------------- | ----------- | ------------------------------------------ |
+| Toast              | Text action in status color, via the `action` prop | × only                           | 1           | ≤ 2 lines, no hint that repeats the action |
+| Inline banner      | Trailing text action in status color               | × if dismissible                 | 1           | 1 line, wraps on mobile                    |
+| Pane / empty state | Ink solid (`neutral` `solid`)                      | Outline neutral                  | 2           | Title + reason + optional hint             |
+| Dialog             | Ink solid, right                                   | Outline neutral, left of primary | 2           | Title + body                               |
+
+---
+
+## Usage
+
+```tsx
+import { useToast } from '@mindlogic-ai/logician-ui';
+
+const showToast = useToast();
+
+showToast({
+  status: 'error',
+  description: '크레딧이 부족해 응답을 생성하지 못했습니다.',
+  action: {
+    label: '크레딧 구매',
+    onClick: openCreditPurchaseModal,
+  },
+  // duration defaults to 8000 because an action is set
+});
+```
+
+- The action renders under the description, aligned with the text column, in
+  the toast's status color with the same hover tint as the ×.
+- Clicking it calls `onClick` and dismisses the toast.
+- `label` accepts any `ReactNode`, but keep it a short verb phrase.
+- An explicit `duration` (including `null` for a persistent toast) always wins.
+- Chakra's own `toaster.create({ action: { label, onClick } })` renders the
+  same way; with that route the label must be a string and the duration
+  default is Chakra's, not 8s.
+
+### Don't: a button inside `description`
+
+```tsx
+// ✗ A neutral control dropped onto a tinted toast; it carries none of the
+//   toast's colors, adds a third line, and dismissal is left to the caller.
+showToast({
+  status: 'error',
+  description: (
+    <>
+      크레딧이 부족합니다. 크레딧을 구매하면 계속 사용할 수 있습니다.
+      <Button colorPalette="neutral" variant="outline" onClick={buy}>
+        크레딧 구매
+      </Button>
+    </>
+  ),
+});
+
+// ✓ One action, in the toast's color, and the copy doesn't repeat it.
+showToast({
+  status: 'error',
+  description: '크레딧이 부족합니다.',
+  action: { label: '크레딧 구매', onClick: buy },
+});
+```
+
+See **Components/Toast → Action / …** for each status and a short-message case.

package/src/index.ts

@@ -1,8 +1,10 @@
 // Core Components
 export * from './components/Accordion';
+export * from './components/Appear';
 export * from './components/Avatar';
 export * from './components/Badge';
 export * from './components/Banner';
+export * from './components/BottomSheet';
 export * from './components/Breadcrumb';
 export * from './components/Button';
 export * from './components/Card';
@@ -12,11 +14,14 @@ export * from './components/Code';
 export * from './components/CodeTabs';
 export * from './components/Collapsible';
 export * from './components/ColorMode';
+export * from './components/Confetti';
 export * from './components/Container';
 export * from './components/CopyableCode';
+export * from './components/CountUp';
 export * from './components/DatePicker';
 export * from './components/ErrorFallback';
 export * from './components/ExpandableText';
+export * from './components/FlyTo';
 
 // File Components
 export * from './components/FileInput';
@@ -24,6 +29,7 @@ export * from './components/FileItem';
 export * from './components/FileList';
 
 // Form Components
+export * from './components/Form';
 export * from './components/FormControl';
 export * from './components/FormLabel';
 
@@ -70,14 +76,18 @@ export * from './components/ProgressBar';
 export * from './components/RadialProgress';
 
 // Interactive Components
+export * from './components/Pulse';
 export * from './components/Radio';
+export * from './components/Reveal';
 export * from './components/ScaledContext';
 export * from './components/SeeMoreButton';
 export * from './components/SegmentedControl';
 export * from './components/SegmentedProgressBar';
 export * from './components/Select';
+export * from './components/Shake';
 export * from './components/Slider';
 export * from './components/Spinner';
+export * from './components/SwapTransition';
 export * from './components/Switch';
 
 // Layout Components
@@ -91,17 +101,39 @@ export * from './components/Tree';
 export * from './components/Workflow';
 // Typography Components (excluding Link to avoid conflict with Link component)
 export {
+  Caption,
   H1,
   H2,
   H3,
   H4,
   H5,
   Link,
+  LINK_RAMP,
   Overline,
   Subtext,
   Subtitle,
   Text,
 } from './components/Typography';
+// …and their prop types, which the block above never exported — so a consumer
+// could not type a wrapper over `H3`/`Text` at all. `LinkProps` is deliberately
+// left out: the root already exports a `Link` component from elsewhere and the
+// name would collide.
+export type {
+  CaptionProps,
+  H1Props,
+  H2Props,
+  H3Props,
+  H4Props,
+  H5Props,
+  HeadingOwnProps,
+  HeadingProps,
+  OverlineProps,
+  SubtextProps,
+  SubtitleProps,
+  TextProps,
+  TypographyOwnProps,
+  TypographyProps,
+} from './components/Typography';
 
 // Hooks
 export { useHasHover } from './hooks/useHasHover';
@@ -115,3 +147,31 @@ export {
   type SemanticColorToken,
   semanticTokens,
 } from './theme/colors';
+export { noZoomOnFocus } from './theme/formControls';
+export {
+  animationStyles,
+  durations,
+  easings,
+  MOTION_DURATION_MS,
+  MOTION_DURATION_S,
+  MOTION_EASE,
+  MOTION_EASE_CSS,
+  MOTION_STAGGER_MAX,
+  type MotionDurationToken,
+  type MotionEaseToken,
+  type MotionStyleToken,
+} from './theme/motion';
+export { cubicBezier } from './utils/cubicBezier';
+export {
+  staggerDelayMs,
+  type StaggerProps,
+  staggerProps,
+} from './utils/staggerProps';
+
+// Shared Types
+export type {
+  PolymorphicComponent,
+  PolymorphicProps,
+  PolymorphicRef,
+} from './types/polymorphic';
+export { polymorphic } from './types/polymorphic';

package/src/styles.ts

@@ -0,0 +1,20 @@
+/**
+ * Pure style objects, importable without the component barrel.
+ *
+ * The root entry (`@mindlogic-ai/logician-ui`) pulls in every component, and
+ * with them side-effect CSS imports such as `katex/dist/katex.min.css`. A
+ * bundler handles that; a plain Node loader does not, so a consumer's unit test
+ * that imports a style constant from the root fails to load the module at all
+ * (`Unknown file extension ".css"`). Importing a style object should not cost
+ * the whole design system.
+ *
+ * Everything re-exported here must stay free of runtime imports — types only —
+ * so this entry brings in nothing but the objects themselves.
+ *
+ * ```ts
+ * import { noZoomOnFocus } from '@mindlogic-ai/logician-ui/styles';
+ * ```
+ *
+ * These names are also on the root entry, so existing imports keep working.
+ */
+export { noZoomOnFocus } from './theme/formControls';

package/src/test-support/setup.ts

@@ -9,3 +9,16 @@ import '@testing-library/jest-dom/vitest';
 if (!Element.prototype.scrollTo) {
   Element.prototype.scrollTo = () => {};
 }
+
+// jsdom has no ResizeObserver, and several Ark-backed parts construct one to
+// track their own geometry — SegmentGroup measures the checked item to place its
+// indicator. Without this the constructor throws *after* the test body has
+// finished, so every assertion passes and the run still exits non-zero with an
+// unhandled error, which is a confusing way to fail CI.
+if (!('ResizeObserver' in globalThis)) {
+  globalThis.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+}