Memory Drawer

Written for the variant you picked above: Paper

Build a panel for what an assistant remembers about the user. Props: initial [{id, topic, text, source, pinned, fresh}], topics [{id, label}], name ("Your assistant"), onChange(items, enabled), theme and className. State (a pure reducer): edit (trimmed; empty edits are ignored), pin toggle, forget (removing the memory and keeping it with its index for undo), undo (putting it back where it was), and toggle memory on or off. A list helper shows one topic (or all) with pinned memories first and the rest in their original order — nothing re-sorts while you're pointing at it. Layout: a 440px card — the title "Memory" and "Your assistant remembers 7 things about you", and a switch (role switch, aria-checked) reading On or Paused. When paused, a status banner explains that new chats won't use or add memories, every card fades to grey and pin and edit are disabled (forget still works). A radiogroup of topic chips with counts. Then the memories as cards in a scrolling list: the text, a muted source line ("From a chat · 3 Oct"), and three icon buttons that brighten on hover or focus — pin (aria-pressed, a filled pin and an accent rule down the card's left edge when pinned), edit and forget. New memories carry a green "Added from this chat" chip with a pulsing dot. Editing swaps the text for a textarea with Save and Cancel; Enter saves, Shift+Enter breaks a line, Escape cancels. Forgetting shreds the card: nine copies, each clipped to a vertical strip, drop and fall away with alternating twists, 18ms apart (620ms), then it's removed and a toast slides up — "Forgotten. Undo" — for 6 seconds. Reduced motion removes it at once with no shredding. Two themes, paper and night. Selected variant — Paper (paper): Palette for this theme (Paper): --md-accent #b8572f; --md-accent-ink #ffffff; --md-bg #fbf9f4; --md-card #ffffff; --md-danger #b3321f; --md-fresh #2f7a5a; --md-ink #1d1a16; --md-line rgba(29, 26, 22, 0.1); --md-muted #625b51; --md-toast #1d1a16; --md-toast-ink #fbf9f4; --md-toast-link #f3b591. Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "paper". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Pick a topic; pin, edit (Enter saves, Escape cancels) or forget a memory, with Undo; switch memory off and on. Motion: Forgetting shreds the card into nine falling strips over 620ms; the toast slides up in 240ms; the switch knob springs. Reduced motion removes without the shredder. Accessibility: Real buttons with labels and states (switch, radiogroup, aria-pressed pins); the paused banner and the undo toast are status regions; the edit field is labelled. Responsive behavior: Up to 440px wide and shrinks to its container; the list scrolls inside the card. Touch: The card tools are always visible at a lower opacity, so nothing depends on hover. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Pick a topic; pin, edit (Enter saves, Escape cancels) or forget a memory, with Undo; switch memory off and on.

Motion

Forgetting shreds the card into nine falling strips over 620ms; the toast slides up in 240ms; the switch knob springs. Reduced motion removes without the shredder.

Accessibility

Real buttons with labels and states (switch, radiogroup, aria-pressed pins); the paused banner and the undo toast are status regions; the edit field is labelled.

Responsive

Up to 440px wide and shrinks to its container; the list scrolls inside the card.

On touch

The card tools are always visible at a lower opacity, so nothing depends on hover.