@mario_hahn/jumpy-ui 0.9.0 → 0.10.0

package/README.md

@@ -1,5 +1,42 @@
 # @mario_hahn/jumpy-ui
 
+## Button loading (0.10.0)
+
+`<JumpButton isLoading>Speichern</JumpButton>` keeps “Speichern” visible and adds a
+spinner before the text. If `leadingIcon` or `slots.leading` is present, the spinner
+replaces that icon; `trailingIcon`/`slots.trailing` stays visible. The leading slot
+keeps its dimensions when replacing an icon; adding a new slot may widen a button
+that had none. Loading disables activation and sets `aria-busy`. The SVG animation
+works without a Tailwind source scan in the consumer.
+
+## Preset migration (0.10.0)
+
+Available presets are now `default-light`, `default-dark`, `jumpy-light` and
+`jumpy-dark`. Snow, Night and Berry presets and their generated Web/iOS/Android
+artifacts are removed. Replace retired preset names and imports with one of the
+remaining families; retired names fail with explicit migration guidance.
+
+`default` is renamed to `default-light`; migrate explicit preset names and static
+`tokens/web/*/default/` imports. The no-argument factory still selects the light
+appearance. `default-dark` uses the same green accent (#128A42, hover #0B6F33)
+and white primary foreground as Light. iOS keeps a single `JumpyTokensDefault`
+module with universal Light and Dark luminosity assets, just like `JumpyTokensJumpy`.
+Android's light preset package is now `defaultLight`.
+
+The redundant `jumpy` preset is removed. Choose `jumpy-light` or `jumpy-dark`
+explicitly and migrate static imports from `tokens/web/*/jumpy/` to the matching
+appearance. Calling `createJumpyThemeFromPreset('jumpy')` fails with migration
+guidance instead of silently switching colors. The shared Jumpy token namespace
+and the iOS Jumpy Light/Dark asset family are retained.
+
+## Card press feedback
+
+Interactive cards keep a uniform press scale, capped so the longest side shrinks
+by at most `JumpySpacing.small3XS` (4px in standard themes). Small cards retain the
+existing soft-press scale limit; wide/tall cards receive a gentler factor. The
+measurement follows layout/content resizes without measuring transformed bounds.
+Reduced-motion preferences disable scaling while preserving pressed colors.
+
 ## Text with inline tokens
 
 `JumpTokenInput` shares the normal field shell, labels, hints, focus and alarm
@@ -33,7 +70,7 @@ function MessageEditor() {
 - Each token instance needs a unique `id`; `value` is its business identifier and
   may repeat. `label` is display text. `insertToken` generates an ID when omitted.
 - Ref methods: `focus()`, `insertToken({ id?, value, label })`, `insertText(text)`,
-  and `removeToken(id)`. Insertion replaces the current/last selection, or appends
+  `removeToken(id)` and `clear()`. Insertion replaces the current/last selection, or appends
   if there is none. Opening an external toolbar does not lose the insertion point.
 - Backspace **after** a token or Delete **before** it removes the whole token.
   Backspace before a token deletes the preceding character. Tokens also have a
@@ -42,13 +79,35 @@ function MessageEditor() {
 - Undo/redo uses Lexical history. External value replacement resets that history.
 - Internal copy/paste preserves tokens and assigns fresh IDs to pasted instances.
   Other applications receive plain labels/text. Plain-text paste is supported;
-  arbitrary HTML is not inserted. The field is single-line: pasted line breaks
-  become spaces and Enter does not insert a paragraph.
+  arbitrary HTML is not inserted. By default the field is single-line: pasted line
+  breaks become spaces and Enter does not insert a paragraph.
 - `disabled`, `readOnly`, `error`, `status`, `label`, `hint`, `placeholder` and ARIA
   props are supported. Read-only tokens cannot be removed. The ref is an editor
   handle, not an `HTMLInputElement`. Submit the structured value through your form
   state; this is not a native input's string-valued form serialization.
 
+### Multiline and clear
+
+```tsx
+<JumpTokenInput label="Translation" value={value} onChange={setValue}
+  multiline minRows={3} maxRows={8} hideClearIcon={false} onClear={onClear} />
+```
+
+`multiline` defaults to false. With it enabled, text segments preserve LF, empty
+lines and leading/trailing breaks. CRLF/lone CR normalize to LF. Enter and
+Shift+Enter insert one break; Cmd/Ctrl+Enter remains available to your `onKeyDown`
+handler without inserting text. Tokens keep their exact business values.
+
+`minRows` defaults to 3; omit `maxRows` for unlimited growth. With maxRows, the
+editor scrolls after reaching that height. Row limits must be positive integers,
+with maxRows at least minRows; they apply only in multiline mode.
+
+The whole-field clear button is shown when content exists, unless `hideClearIcon`
+is true, disabled or readOnly. It calls `onChange([])` and `onClear`, retains focus,
+and supports undo. `ref.clear()` has the same behavior. Empty/disabled/read-only
+clears are no-ops. `onClear` is not fired by undo or external value replacement.
+Individual token remove buttons are independent of `hideClearIcon`.
+
 Playground: `/?component=token-input`. The component uses Lexical with atomic token
 nodes; there is no manual HTML-to-value parsing and no consumer Tailwind dependency.
 
@@ -152,7 +211,7 @@ Jumpy Components als ein gemeinsames UI-Paket.
 Starting with 0.5.0, Jumpy UI uses the public npmjs registry. No package token is required to install:
 
 ```bash
-npm install @mario_hahn/jumpy-ui@^0.9.0
+npm install @mario_hahn/jumpy-ui@^0.10.0
 ```
 
 The public npm package uses the `@mario_hahn` scope. Older GitHub Packages releases
@@ -179,7 +238,7 @@ import {
   JumpInput,
 } from '@mario_hahn/jumpy-ui'
 
-const theme = createJumpyThemeFromPreset('jumpy')
+const theme = createJumpyThemeFromPreset('jumpy-light')
 
 export function App() {
   return (
@@ -231,6 +290,46 @@ export function App() {
 
 For collapsed rails, set `collapsed` on `JumpSideMenu` and drive the host width, for example `style={{ width: 96 }}`. Bottom-sticky footer content is composed outside the menu with a surrounding layout container; it is not a `JumpSideMenu` prop.
 
+## App Shell (0.10.0)
+
+`JumpAppShell` is the responsive app frame: a sticky desktop sidebar, a sticky
+`JumpTopBar` and, below `breakpoint` (default 1024px), either a full-screen
+navigation drawer opened by the menu button on the left, a `JumpTabBar`, or both.
+
+```tsx
+import Link from 'next/link'
+import { JumpAppShell, JumpSideMenu, JumpSideMenuItem, JumpTabBar, JumpTabBarItem } from '@mario_hahn/jumpy-ui'
+
+<JumpAppShell
+  brand={<BrandMark />}
+  navigation={<JumpSideMenu aria-label="Main navigation" selected={[path]} onChange={([href]) => router.push(String(href))}>…</JumpSideMenu>}
+  sidebarFooter={<JumpButton variant="borderless">Sign out</JumpButton>}
+  topBar={{ title: 'Orders', trailing: <NewOrderButton />, leading: canGoBack ? 'back' : 'menu', onBack: router.back }}
+  tabBar={
+    <JumpTabBar aria-label="Main navigation">
+      <JumpTabBarItem as={Link} href="/orders" icon={<OrdersIcon />} selected>Orders</JumpTabBarItem>
+      <JumpTabBarItem as={Link} href="/messages" icon={<ChatIcon />} badge={3}>Messages</JumpTabBarItem>
+    </JumpTabBar>
+  }
+  hideTabBar={immersive}
+>
+  {children}
+</JumpAppShell>
+```
+
+- Layout switches in CSS, so server-rendered markup is already correct. Do not
+  re-implement focus traps or scroll locking: the drawer uses the modal layer, closes
+  on Escape, destination selection, left swipe and when the viewport reaches the
+  breakpoint, then returns focus to the menu button.
+- `topBar.leading` defaults to `'menu'` when `navigation` exists; `'back'` calls
+  `onBack`. `topBar.title` falls back to `brand`. `topBar.desktop` keeps the bar on
+  desktop (without the menu button). `topBar={null}` removes it.
+- `JumpTopBar` and `JumpTabBar` also work standalone. Both are sticky and include
+  safe-area insets. `JumpTabBarItem` accepts `as` (e.g. Next `Link`), `href`, `icon`,
+  numeric or custom `badge` and `selected` (`aria-current="page"`).
+- `navigation` renders in the sidebar and, while open, in the drawer. Avoid fixed
+  `id`s inside it.
+
 ## Token Packages
 
 Jumpy UI ships generated token artifacts under `tokens/`:
@@ -244,7 +343,7 @@ Swift build caches under `tokens/ios/.build` are intentionally excluded from the
 Web token artifacts can be imported through the package subpath exports, for example:
 
 ```ts
-import jumpyTokens from '@mario_hahn/jumpy-ui/tokens/web/json/jumpy/flat-variables.json'
+import jumpyTokens from '@mario_hahn/jumpy-ui/tokens/web/json/jumpy-light/flat-variables.json'
 ```
 
 Regenerate them from the theme source with: