@mario_hahn/jumpy-ui 0.9.0 → 0.10.0

package/dist/index.js

@@ -28,7 +28,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-3QWVEQL3.js";
+} from "./chunk-LORNGSIB.js";
 import {
   cn
 } from "./chunk-3DBKYKP2.js";
@@ -42,7 +42,7 @@ import { Children, cloneElement, createContext, forwardRef, isValidElement, useC
 
 // token-input.js
 import { useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { $addUpdateTag, $createParagraphNode, $createTextNode, $getNodeByKey, $getRoot, $getSelection, $isElementNode, $isNodeSelection, $isRangeSelection, $isTextNode, $setSelection, CLEAR_HISTORY_COMMAND, COMMAND_PRIORITY_HIGH, COPY_COMMAND, CUT_COMMAND, DELETE_CHARACTER_COMMAND, DecoratorNode, HISTORY_PUSH_TAG, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, PASTE_COMMAND } from "lexical";
+import { $addUpdateTag, $createLineBreakNode, $createParagraphNode, $createTextNode, $getNodeByKey, $getRoot, $getSelection, $isElementNode, $isLineBreakNode, $isNodeSelection, $isRangeSelection, $isTextNode, $setSelection, CLEAR_HISTORY_COMMAND, COMMAND_PRIORITY_HIGH, COPY_COMMAND, CUT_COMMAND, DELETE_CHARACTER_COMMAND, DecoratorNode, HISTORY_PUSH_TAG, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, PASTE_COMMAND } from "lexical";
 import { $generateJSONFromSelectedNodes } from "@lexical/clipboard";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
@@ -52,12 +52,12 @@ import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { jsx, jsxs } from "react/jsx-runtime";
 var clipboardType = "application/x-jumpy-token-input";
-function normalizeTokenInputValue(value) {
+function normalizeTokenInputValue(value, multiline = false) {
   const result = [];
   const ids = /* @__PURE__ */ new Set();
   for (const part of value) {
     if (part.type === "text") {
-      const text = part.text.replace(/[\r\n]+/g, " ");
+      const text = multiline ? part.text.replace(/\r\n?/g, "\n") : part.text.replace(/[\r\n]+/g, " ");
       if (!text) continue;
       const previous = result[result.length - 1];
       if (previous?.type === "text") previous.text += text;
@@ -117,8 +117,8 @@ function TokenChip({ editor, nodeKey, token }) {
   const theme = useJumpyTheme();
   const [editable, setEditable] = useState(editor.isEditable());
   useEffect(() => editor.registerEditableListener(setEditable), [editor]);
-  return /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "input-token", style: { display: "inline-flex", alignItems: "center", verticalAlign: "baseline", borderRadius: theme.radius.small, border: `${theme.borderWidth.small}px solid var(--jumpy-color-feedback-info-border)`, paddingInline: theme.spacing.small3XS, gap: theme.spacing.small3XS, background: "var(--jumpy-color-feedback-info-surface)", color: "var(--jumpy-color-text-primary)", fontSize: theme.fontFamily.bodySmall.fontSize, lineHeight: "inherit", whiteSpace: "nowrap" }, children: [
-    /* @__PURE__ */ jsx("span", { children: token.label }),
+  return /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "input-token", style: { display: "inline-flex", maxWidth: "100%", boxSizing: "border-box", alignItems: "center", verticalAlign: "baseline", borderRadius: theme.radius.small, border: `${theme.borderWidth.small}px solid var(--jumpy-color-feedback-info-border)`, paddingInline: theme.spacing.small3XS, gap: theme.spacing.small3XS, background: "var(--jumpy-color-feedback-info-surface)", color: "var(--jumpy-color-text-primary)", fontSize: theme.fontFamily.bodySmall.fontSize, lineHeight: "inherit", whiteSpace: "inherit" }, children: [
+    /* @__PURE__ */ jsx("span", { style: { minWidth: 0 }, children: token.label }),
     editable && /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, "aria-label": `Remove ${token.label}`, onMouseDown: (event) => event.preventDefault(), onClick: (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -134,18 +134,25 @@ function TokenChip({ editor, nodeKey, token }) {
     }, style: { display: "inline-flex", alignItems: "center", appearance: "none", border: 0, padding: 0, background: "transparent", color: "inherit", font: "inherit", cursor: "pointer" }, children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", width: theme.fontFamily.bodySmall.fontSize, height: theme.fontFamily.bodySmall.fontSize, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "m4 4 8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5" }) }) })
   ] });
 }
-function $readValue() {
+function $readValue(multiline = false) {
   const parts = [];
   function visit(node) {
     if (node instanceof JumpyTokenNode) parts.push({ ...node.__token });
     else if ($isTextNode(node)) parts.push({ type: "text", text: node.getTextContent() });
+    else if ($isLineBreakNode(node)) parts.push({ type: "text", text: "\n" });
     else if ($isElementNode(node)) node.getChildren().forEach(visit);
   }
-  visit($getRoot());
-  return normalizeTokenInputValue(parts);
+  $getRoot().getChildren().forEach((node, index) => {
+    if (index > 0) parts.push({ type: "text", text: "\n" });
+    visit(node);
+  });
+  return normalizeTokenInputValue(parts, multiline);
 }
 function $nodes(parts) {
-  return parts.map((part) => part.type === "token" ? new JumpyTokenNode(part) : $createTextNode(part.text));
+  return parts.flatMap((part) => part.type === "token" ? [new JumpyTokenNode(part)] : part.text.split("\n").flatMap((text, index) => [
+    ...index > 0 ? [$createLineBreakNode()] : [],
+    ...text ? [$createTextNode(text)] : []
+  ]));
 }
 function $replaceValue(parts) {
   $getRoot().clear().append($createParagraphNode().append(...$nodes(parts)));
@@ -159,17 +166,18 @@ function $adjacentToken(backward) {
   if ($isTextNode(node) && (backward ? offset2 === 0 : offset2 === node.getTextContentSize())) return backward ? node.getPreviousSibling() : node.getNextSibling();
   return null;
 }
-function EditorBehavior({ model, editable, editorRef, onValueChange, onChange }) {
+function EditorBehavior({ model, multiline, editable, editorRef, onValueChange, onChange, onClear }) {
   const [editor] = useLexicalComposerContext();
   const savedSelection = useRef(null);
-  const callbacks = useRef({ onValueChange, onChange });
-  callbacks.current = { onValueChange, onChange };
+  const callbacks = useRef({ onValueChange, onChange, onClear });
+  callbacks.current = { onValueChange, onChange, onClear };
+  const previousMode = useRef(multiline);
   useLayoutEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
   useLayoutEffect(() => {
-    const current = editor.getEditorState().read($readValue);
-    if (JSON.stringify(current) !== JSON.stringify(model)) {
+    const current = editor.getEditorState().read(() => $readValue(multiline));
+    if (previousMode.current !== multiline || JSON.stringify(current) !== JSON.stringify(model)) {
       savedSelection.current = null;
       editor.update(() => {
         $replaceValue(model);
@@ -177,7 +185,8 @@ function EditorBehavior({ model, editable, editorRef, onValueChange, onChange })
       }, { tag: "jumpy-external-value" });
       editor.dispatchCommand(CLEAR_HISTORY_COMMAND, void 0);
     }
-  }, [editor, model]);
+    previousMode.current = multiline;
+  }, [editor, model, multiline]);
   function insert(parts) {
     if (!editor.isEditable()) return;
     editor.update(() => {
@@ -190,39 +199,52 @@ function EditorBehavior({ model, editable, editorRef, onValueChange, onChange })
   }
   useImperativeHandle(editorRef, () => ({
     focus: () => editor.focus(),
-    insertText: (text) => insert(normalizeTokenInputValue([{ type: "text", text }])),
+    insertText: (text) => insert(normalizeTokenInputValue([{ type: "text", text }], multiline)),
     insertToken: (token) => {
       const part = { ...token, type: "token", id: token.id || crypto.randomUUID() };
-      const current = editor.getEditorState().read($readValue);
-      normalizeTokenInputValue([...current, part]);
+      const current = editor.getEditorState().read(() => $readValue(multiline));
+      normalizeTokenInputValue([...current, part], multiline);
       insert([part]);
     },
     removeToken: (id) => {
       if (!editor.isEditable()) return;
       editor.update(() => {
-        const paragraph = $getRoot().getFirstChild();
-        if ($isElementNode(paragraph)) for (const node of paragraph.getChildren()) {
+        function remove(node) {
           if (node instanceof JumpyTokenNode && node.__token.id === id) {
             node.selectPrevious();
             node.remove();
-          }
+          } else if ($isElementNode(node)) node.getChildren().forEach(remove);
         }
+        remove($getRoot());
       }, { tag: HISTORY_PUSH_TAG });
+    },
+    clear: () => {
+      if (!editor.isEditable()) return;
+      if (editor.getEditorState().read(() => $readValue(multiline).length) === 0) return;
+      editor.update(() => {
+        if (!$getSelection()) $getRoot().selectEnd();
+      }, { discrete: true });
+      editor.update(() => {
+        $replaceValue([]);
+        $getRoot().selectStart();
+      }, { tag: [HISTORY_PUSH_TAG, "jumpy-clear"] });
+      editor.focus();
     }
   }));
   useEffect(() => {
-    let previous = JSON.stringify(editor.getEditorState().read($readValue));
+    let previous = JSON.stringify(editor.getEditorState().read(() => $readValue(multiline)));
     const unregisterUpdate = editor.registerUpdateListener(({ editorState, tags }) => {
       editorState.read(() => {
         const selection = $getSelection();
         if (selection) savedSelection.current = selection.clone();
-        const next = $readValue();
+        const next = $readValue(multiline);
         const json = JSON.stringify(next);
         if (json === previous) return;
         previous = json;
         if (tags.has("jumpy-external-value")) return;
         callbacks.current.onChange?.({ target: { value: tokenInputText(next) }, currentTarget: { value: tokenInputText(next) } });
         callbacks.current.onValueChange(next);
+        if (tags.has("jumpy-clear")) callbacks.current.onClear?.();
       });
     });
     const deleteToken = (event, backward) => {
@@ -254,11 +276,15 @@ function EditorBehavior({ model, editable, editorRef, onValueChange, onChange })
       const visit = (node) => {
         if (node.type === "jumpy-token") parts.push(node.token);
         else if (node.type === "text") parts.push({ type: "text", text: node.text });
+        else if (node.type === "linebreak") parts.push({ type: "text", text: "\n" });
         else node.children?.forEach(visit);
       };
-      nodes.forEach(visit);
+      nodes.forEach((node, index) => {
+        if (index > 0 && node.type === "paragraph") parts.push({ type: "text", text: "\n" });
+        visit(node);
+      });
       event.preventDefault();
-      event.clipboardData.setData("text/plain", selection.getTextContent());
+      event.clipboardData.setData("text/plain", tokenInputText(parts));
       event.clipboardData.setData(clipboardType, JSON.stringify(parts));
       if (cut) {
         $addUpdateTag(HISTORY_PUSH_TAG);
@@ -274,6 +300,13 @@ function EditorBehavior({ model, editable, editorRef, onValueChange, onChange })
       editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
         if (editor.isComposing()) return false;
         event?.preventDefault();
+        if (editable && multiline && !event?.metaKey && !event?.ctrlKey) {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            $addUpdateTag(HISTORY_PUSH_TAG);
+            selection.insertLineBreak();
+          }
+        }
         return true;
       }, COMMAND_PRIORITY_HIGH),
       editor.registerCommand(COPY_COMMAND, (event) => copy(event, false), COMMAND_PRIORITY_HIGH),
@@ -284,9 +317,9 @@ function EditorBehavior({ model, editable, editorRef, onValueChange, onChange })
         $addUpdateTag(HISTORY_PUSH_TAG);
         let parts;
         try {
-          parts = normalizeTokenInputValue(JSON.parse(event.clipboardData.getData(clipboardType)).map((part) => part.type === "token" ? { ...part, id: crypto.randomUUID() } : part));
+          parts = normalizeTokenInputValue(JSON.parse(event.clipboardData.getData(clipboardType)).map((part) => part.type === "token" ? { ...part, id: crypto.randomUUID() } : part), multiline);
         } catch {
-          parts = normalizeTokenInputValue([{ type: "text", text: event.clipboardData.getData("text/plain") }]);
+          parts = normalizeTokenInputValue([{ type: "text", text: event.clipboardData.getData("text/plain") }], multiline);
         }
         $getSelection()?.insertNodes($nodes(parts));
         return true;
@@ -296,27 +329,34 @@ function EditorBehavior({ model, editable, editorRef, onValueChange, onChange })
       unregisterUpdate();
       commands.forEach((unregister) => unregister());
     };
-  }, [editor]);
+  }, [editor, multiline, editable]);
   return null;
 }
-function TokenEditor({ model, editorRef, onValueChange, onChange, fieldContext, value: _value, placeholder, disabled, readOnly, style, ...props }) {
+function TokenEditor({ model, multiline = false, minRows = 3, maxRows, editorRef, onValueChange, onChange, onClear, onFocus, onBlur, fieldContext, value: _value, placeholder, disabled, readOnly, style, ...props }) {
   const theme = useJumpyTheme();
   const initialConfig = useMemo(() => ({ namespace: "JumpyTokenInput", nodes: [JumpyTokenNode], editable: !disabled && !readOnly, onError: (error) => {
     throw error;
   }, editorState: () => $replaceValue(model) }), []);
   const offset2 = fieldContext?.hasLabel ? spacingValue(theme, JumpySpacing.large) : 0;
+  const lineHeight = theme.fontFamily.bodyMedium.fontSize * theme.fontFamily.bodyMedium.lineHeight;
   return /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", minWidth: 0, marginTop: offset2 }, children: [
     /* @__PURE__ */ jsx(
       PlainTextPlugin,
       {
-        contentEditable: /* @__PURE__ */ jsx(ContentEditable, { ...props, "data-jumpy-component": "token-input", role: "textbox", "aria-multiline": false, "aria-readonly": readOnly || void 0, "aria-disabled": disabled || void 0, tabIndex: disabled ? -1 : 0, style: { width: "100%", minHeight: theme.fontFamily.bodyMedium.fontSize * theme.fontFamily.bodyMedium.lineHeight, padding: 0, outline: 0, overflowX: "auto", whiteSpace: "pre", color: "var(--jumpy-cmp-base-input-value-color)", fontFamily: theme.fontFamily.familyBase, fontSize: theme.fontFamily.bodyMedium.fontSize, lineHeight: theme.fontFamily.bodyMedium.lineHeight, ...style } }),
+        contentEditable: /* @__PURE__ */ jsx(ContentEditable, { ...props, onFocusCapture: (event) => {
+          props.onFocusCapture?.(event);
+          onFocus?.(event);
+        }, onBlurCapture: (event) => {
+          props.onBlurCapture?.(event);
+          onBlur?.(event);
+        }, "data-jumpy-component": "token-input", role: "textbox", "aria-multiline": multiline, "aria-readonly": readOnly || void 0, "aria-disabled": disabled || void 0, tabIndex: disabled ? -1 : 0, style: { width: "100%", minHeight: lineHeight * (multiline ? minRows : 1), maxHeight: multiline && maxRows !== void 0 ? lineHeight * maxRows : void 0, padding: 0, outline: 0, overflowX: "auto", overflowY: multiline ? "auto" : void 0, whiteSpace: multiline ? "pre-wrap" : "pre", overflowWrap: multiline ? "anywhere" : void 0, color: "var(--jumpy-cmp-base-input-value-color)", fontFamily: theme.fontFamily.familyBase, fontSize: theme.fontFamily.bodyMedium.fontSize, lineHeight: theme.fontFamily.bodyMedium.lineHeight, ...style } }),
         placeholder: null,
         ErrorBoundary: LexicalErrorBoundary
       }
     ),
     model.length === 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { position: "absolute", top: 0, left: 0, pointerEvents: "none", color: "var(--jumpy-cmp-base-input-placeholder-color)", fontSize: theme.fontFamily.bodyMedium.fontSize, lineHeight: theme.fontFamily.bodyMedium.lineHeight }, children: placeholder }),
     /* @__PURE__ */ jsx(HistoryPlugin, {}),
-    /* @__PURE__ */ jsx(EditorBehavior, { model, editable: !disabled && !readOnly, editorRef, onValueChange, onChange })
+    /* @__PURE__ */ jsx(EditorBehavior, { model, multiline, editable: !disabled && !readOnly, editorRef, onValueChange, onChange, onClear })
   ] }) });
 }
 
@@ -568,17 +608,18 @@ function renderBannerSlot(slot, fallbackTag = "span", className, style) {
   return slot;
 }
 function getBadgeStatusStyles(theme, status) {
+  const alwaysLight = "var(--jumpy-color-non-color-always-ultralight, #FFFFFF)";
   switch (status) {
     case "positive":
-      return { backgroundColor: theme.color.positiveBase, color: theme.color.nonColorContrastUltralight };
+      return { backgroundColor: theme.color.positiveBase, color: alwaysLight };
     case "warning":
       return { backgroundColor: theme.color.warningBase, color: theme.color.nonColorAlwaysUltradark };
     case "alarm":
-      return { backgroundColor: theme.color.alarmBase, color: theme.color.nonColorContrastUltralight };
+      return { backgroundColor: theme.color.alarmBase, color: alwaysLight };
     case "active":
-      return { backgroundColor: "var(--jumpy-color-primary-base)", color: theme.color.nonColorContrastUltralight };
+      return { backgroundColor: "var(--jumpy-color-primary-base)", color: theme.color.textOnPrimary };
     default:
-      return { backgroundColor: theme.color.neutralBase, color: theme.color.nonColorContrastUltralight };
+      return { backgroundColor: theme.color.neutralBase, color: alwaysLight };
   }
 }
 function getBadgeSizeStyles(theme, size2) {
@@ -601,7 +642,8 @@ function getBadgeSizeStyles(theme, size2) {
         padding: `${spacingValue(theme, JumpySpacing.small3XS)}px ${spacingValue(theme, JumpySpacing.smallXS)}px`,
         fontFamily: theme.fontFamily.familyBase,
         fontSize: labelMedium.fontSize,
-        lineHeight: labelMedium.lineHeight,
+        // A line box filling the whole-pixel content height keeps the baseline from rounding the digits upward.
+        lineHeight: `${sizeValue(theme, JumpySize.small) - spacingValue(theme, JumpySpacing.small3XS) * 2}px`,
         fontWeight: labelMedium.fontWeight
       };
     default:
@@ -611,7 +653,7 @@ function getBadgeSizeStyles(theme, size2) {
         padding: `${spacingValue(theme, JumpySpacing.zero)}px ${spacingValue(theme, JumpySpacing.small3XS)}px`,
         fontFamily: theme.fontFamily.familyBase,
         fontSize: labelSmall.fontSize,
-        lineHeight: labelSmall.lineHeight,
+        lineHeight: `${sizeValue(theme, JumpySize.small2XS)}px`,
         fontWeight: labelSmall.fontWeight
       };
   }
@@ -802,6 +844,10 @@ function JumpBadge({ as, size: size2 = "medium", status = "regular", hidden = fa
       "aria-hidden": hidden || void 0,
       className: cn("inline-flex items-center justify-center box-border", className),
       style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxSizing: "border-box",
         ...getBadgeSizeStyles(theme, size2),
         ...getBadgeStatusStyles(theme, status),
         borderRadius: radiusValue(theme, JumpyRadius.full),
@@ -812,7 +858,7 @@ function JumpBadge({ as, size: size2 = "medium", status = "regular", hidden = fa
         transition: `width ${animationDurationValue(theme, JumpyAnimationDuration.medium)}s ${theme.animation.timeEasingDrift}, opacity ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${visible ? theme.animation.timeEasingImpulse : theme.animation.timeEasingRelease}, scale ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${visible ? theme.animation.timeEasingImpulse : theme.animation.timeEasingRelease}`,
         ...props.style || {}
       },
-      children: size2 === "xSmall" ? null : /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "badge-content", style: { display: "inline-block", lineHeight: "inherit", transform: "translateY(1px)", fontVariantNumeric: "tabular-nums" }, children })
+      children: size2 === "xSmall" ? null : /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "badge-content", style: { display: "inline-block", lineHeight: "inherit", fontVariantNumeric: "tabular-nums" }, children })
     }
   );
 }
@@ -823,9 +869,24 @@ function BrandMark({ compact = false, label = "Jumpy UI" }) {
     /* @__PURE__ */ jsx2("span", { className: "block text-lg font-extrabold tracking-tight", style: { color: theme.color.textPrimary, fontFamily: theme.typography.fontFamily }, children: label })
   ] });
 }
-function JumpCard({ as, children, className = "", variant = "filled", interactive = false, selected = false, disabled = false, dragged = false, innerClasses = {}, ...props }) {
+function JumpCard({ as, ref, children, className = "", variant = "filled", interactive = false, selected = false, disabled = false, dragged = false, innerClasses = {}, ...props }) {
   const theme = useJumpyTheme();
   const Component = as || "div";
+  const cardRef = useRef2(null);
+  const [pressScaleLimit, setPressScaleLimit] = useState2(1);
+  const pressDistance = spacingValue(theme, JumpySpacing.small3XS);
+  useLayoutEffect2(() => {
+    const element = cardRef.current;
+    if (!element || !interactive || disabled) return;
+    const measure = () => {
+      const longestSide = Math.max(element.offsetWidth, element.offsetHeight);
+      setPressScaleLimit(longestSide > 0 ? Math.max(0, 1 - pressDistance / longestSide) : 1);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [Component, interactive, disabled, pressDistance]);
   const isButton = Component === "button";
   const activity = selected ? "active" : "inactive";
   const draggedStyles = dragged && !disabled ? {
@@ -837,6 +898,11 @@ function JumpCard({ as, children, className = "", variant = "filled", interactiv
     Component,
     {
       ...props,
+      ref: (node) => {
+        cardRef.current = node;
+        if (typeof ref === "function") return ref(node);
+        if (ref) ref.current = node;
+      },
       type: isButton ? props.type || "button" : props.type,
       disabled: isButton ? disabled : void 0,
       "data-jumpy-component": "card",
@@ -850,6 +916,7 @@ function JumpCard({ as, children, className = "", variant = "filled", interactiv
       className: cn(className),
       style: {
         ...getCardStateStyles(theme, selected),
+        "--jumpy-card-press-scale-limit": pressScaleLimit,
         display: "block",
         position: "relative",
         boxSizing: "border-box",
@@ -1029,7 +1096,7 @@ function JumpListItem({ as, children, className = "", selected = false, disabled
       },
       children: [
         resolvedSelector ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "selector", "aria-hidden": props.role === "option" || props.role === "treeitem" ? "true" : void 0, className: innerClasses.selector?.className, style: { display: "inline-flex", pointerEvents: "none", color: "var(--jumpy-list-item-icon-color, var(--jumpy-list-item-default-icon))", ...innerClasses.selector?.style || {} }, children: resolvedSelector }) : null,
-        resolvedLeading ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "leading", "aria-hidden": "true", className: innerClasses.leading?.className, style: { display: "inline-flex", width: iconSize, height: iconSize, color: "var(--jumpy-list-item-icon-color, var(--jumpy-list-item-default-icon))", ...innerClasses.leading?.style || {} }, children: resolvedLeading }) : null,
+        resolvedLeading ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "leading", "aria-hidden": "true", className: innerClasses.leading?.className, style: { display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, width: iconSize, height: iconSize, color: "var(--jumpy-list-item-icon-color, var(--jumpy-list-item-default-icon))", ...innerClasses.leading?.style || {} }, children: resolvedLeading }) : null,
         /* @__PURE__ */ jsxs2("span", { style: { display: "grid", minWidth: 0 }, children: [
           /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "label", "data-truncate": truncateTexts ? "true" : void 0, "data-text": typeof children === "string" ? children : void 0, className: innerClasses.label?.className, style: { minWidth: 0, maxWidth: "100%", overflowWrap: "anywhere", wordBreak: "break-word", fontWeight: bodyMedium.fontWeight, ...innerClasses.label?.style || {} }, children }),
           resolvedDescription ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "description", className: innerClasses.description?.className, style: { color: selected ? theme.listItem.active.default.subtext : theme.listItem.inactive.default.subtext, fontSize: bodySmall.fontSize, lineHeight: bodySmall.lineHeight, ...innerClasses.description?.style || {} }, children: resolvedDescription }) : null
@@ -2341,6 +2408,305 @@ function JumpSheet({ visible = false, onVisibleChange, position = "right", title
     footer ? /* @__PURE__ */ jsx2("div", { style: { padding: spacingValue(theme, JumpySpacing.large), borderTop: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid ${theme.color.borderSubtle}` }, children: footer }) : null
   ] }) });
 }
+function JumpyNavigationIcon({ type }) {
+  const paths = {
+    menu: "M4 6h16M4 12h16M4 18h16",
+    close: "M6 6l12 12M18 6 6 18",
+    back: "M15 18l-6-6 6-6"
+  };
+  return /* @__PURE__ */ jsx2("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", "data-jumpy-stroke-icon": "true", style: { display: "block" }, children: /* @__PURE__ */ jsx2("path", { d: paths[type] }) });
+}
+function JumpTopBar({ leading, onMenu, onBack, menuOpen = false, title, subtitle, trailing, sticky = true, ariaLabels = {}, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const [scrolled, setScrolled] = useState2(false);
+  const titleStyle = textStyleValue(theme, JumpyTextStyle.bodyLargeEmphasized);
+  const subtitleStyle = textStyleValue(theme, JumpyTextStyle.bodySmall);
+  useEffect2(() => {
+    if (!sticky) return void 0;
+    const update = () => setScrolled(window.scrollY > 0);
+    update();
+    window.addEventListener("scroll", update, { passive: true });
+    return () => window.removeEventListener("scroll", update);
+  }, [sticky]);
+  const leadingType = leading === "menu" || leading === "back" ? leading : void 0;
+  const leadingNode = leading === "menu" ? /* @__PURE__ */ jsx2(JumpIconButton, { variant: "borderless", "aria-label": ariaLabels.menu || "Open navigation", "aria-haspopup": "dialog", "aria-expanded": menuOpen, onClick: onMenu, children: /* @__PURE__ */ jsx2(JumpyNavigationIcon, { type: "menu" }) }) : leading === "back" ? /* @__PURE__ */ jsx2(JumpIconButton, { variant: "borderless", "aria-label": ariaLabels.back || "Back", onClick: onBack, children: /* @__PURE__ */ jsx2(JumpyNavigationIcon, { type: "back" }) }) : leading;
+  return /* @__PURE__ */ jsxs2(
+    "header",
+    {
+      ...props,
+      "data-jumpy-component": "top-bar",
+      "data-sticky": sticky ? "true" : "false",
+      "data-scrolled": scrolled ? "true" : "false",
+      className: cn(className),
+      style: {
+        boxSizing: "border-box",
+        position: sticky ? "sticky" : "relative",
+        top: 0,
+        zIndex: 40,
+        alignItems: "center",
+        gap: spacingValue(theme, JumpySpacing.medium),
+        minHeight: `calc(${sizeValue(theme, JumpySize.large2XL)}px + env(safe-area-inset-top, 0px))`,
+        padding: `calc(${spacingValue(theme, JumpySpacing.smallXS)}px + env(safe-area-inset-top, 0px)) calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-right, 0px)) ${spacingValue(theme, JumpySpacing.smallXS)}px calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-left, 0px))`,
+        color: "var(--jumpy-color-text-primary)",
+        fontFamily: theme.fontFamily.familyBase,
+        ...props.style || {}
+      },
+      children: [
+        leadingNode ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "top-bar-leading", "data-leading": leadingType, style: { marginLeft: -spacingValue(theme, JumpySpacing.smallXS) }, children: leadingNode }) : null,
+        /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "top-bar-title", style: { display: "flex", flexDirection: "column", flex: "1 1 auto", minWidth: 0 }, children: [
+          title ? /* @__PURE__ */ jsx2("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: titleStyle.fontSize, lineHeight: titleStyle.lineHeight, fontWeight: titleStyle.fontWeight }, children: title }) : null,
+          subtitle ? /* @__PURE__ */ jsx2("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--jumpy-color-text-secondary)", fontSize: subtitleStyle.fontSize, lineHeight: subtitleStyle.lineHeight }, children: subtitle }) : null
+        ] }),
+        trailing ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "top-bar-trailing", style: { display: "inline-flex", flex: "0 0 auto", alignItems: "center", gap: spacingValue(theme, JumpySpacing.smallXS) }, children: trailing }) : null
+      ]
+    }
+  );
+}
+function JumpTabBar({ children, className = "", "aria-label": ariaLabel = "Main navigation", ...props }) {
+  const theme = useJumpyTheme();
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-jumpy-component": "tab-bar",
+      className: cn(className),
+      style: {
+        boxSizing: "border-box",
+        position: "sticky",
+        bottom: 0,
+        zIndex: 40,
+        padding: `0 calc(${spacingValue(theme, JumpySpacing.medium)}px + env(safe-area-inset-right, 0px)) calc(${spacingValue(theme, JumpySpacing.medium)}px + env(safe-area-inset-bottom, 0px)) calc(${spacingValue(theme, JumpySpacing.medium)}px + env(safe-area-inset-left, 0px))`,
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ jsx2(
+        "nav",
+        {
+          ...props,
+          "aria-label": ariaLabel,
+          "data-jumpy-slot": "tab-bar-surface",
+          style: {
+            boxSizing: "border-box",
+            display: "flex",
+            gap: spacingValue(theme, JumpySpacing.small4XS),
+            padding: spacingValue(theme, JumpySpacing.small3XS),
+            borderRadius: radiusValue(theme, JumpyRadius.large2XL),
+            border: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)`,
+            boxShadow: theme.shadow.positiveMedium,
+            pointerEvents: "auto",
+            fontFamily: theme.fontFamily.familyBase,
+            ...props.style || {}
+          },
+          children
+        }
+      )
+    }
+  );
+}
+function JumpTabBarItem({ as, icon, badge, selected = false, children, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const Component = as || (props.href ? "a" : "button");
+  const labelStyle = textStyleValue(theme, JumpyTextStyle.labelSmallEmphasized);
+  const badgeNode = typeof badge === "number" ? badge > 0 ? /* @__PURE__ */ jsx2(JumpBadge, { size: "small", status: "active", "aria-label": void 0, role: "presentation", "aria-live": "off", children: badge > 99 ? "99+" : badge }) : null : badge;
+  return /* @__PURE__ */ jsxs2(
+    Component,
+    {
+      ...props,
+      type: Component === "button" ? props.type || "button" : props.type,
+      "aria-current": selected ? props["aria-current"] || "page" : props["aria-current"],
+      "data-jumpy-component": "tab-bar-item",
+      "data-selected": selected ? "true" : "false",
+      className: cn(className),
+      style: {
+        boxSizing: "border-box",
+        flex: "1 1 0",
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: spacingValue(theme, JumpySpacing.small4XS),
+        minHeight: sizeValue(theme, JumpySize.large2XL),
+        padding: `${spacingValue(theme, JumpySpacing.smallXS)}px ${spacingValue(theme, JumpySpacing.small3XS)}px`,
+        border: 0,
+        borderRadius: radiusValue(theme, JumpyRadius.largeXL),
+        backgroundColor: selected ? "var(--jumpy-interactive-active-regular-default-surface)" : "transparent",
+        color: selected ? "var(--jumpy-interactive-active-regular-default-text)" : "var(--jumpy-color-text-secondary)",
+        textDecoration: "none",
+        cursor: "pointer",
+        fontFamily: theme.fontFamily.familyBase,
+        fontSize: labelStyle.fontSize,
+        lineHeight: labelStyle.lineHeight,
+        fontWeight: labelStyle.fontWeight,
+        ...props.style || {}
+      },
+      children: [
+        icon ? /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "tab-bar-item-icon", "aria-hidden": "true", style: { position: "relative", display: "inline-flex", width: sizeValue(theme, JumpySize.small2XS), height: sizeValue(theme, JumpySize.small2XS) }, children: [
+          icon,
+          badgeNode ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "tab-bar-item-badge", style: { position: "absolute", top: -spacingValue(theme, JumpySpacing.smallXS), left: "50%", marginLeft: spacingValue(theme, JumpySpacing.small3XS), display: "inline-flex" }, children: badgeNode }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "tab-bar-item-label", style: { maxWidth: "100%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children })
+      ]
+    }
+  );
+}
+function JumpAppShell({ brand, navigation, sidebarFooter, topBar, tabBar, hideTabBar = false, breakpoint = 1024, sidebarWidth = 256, navigationOpen, defaultNavigationOpen = false, onNavigationOpenChange, ariaLabels = {}, children, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const shellId = useId();
+  const [internalOpen, setInternalOpen] = useState2(defaultNavigationOpen);
+  const isOpen = Boolean(navigation) && (navigationOpen ?? internalOpen);
+  const swipeStart = useRef2(null);
+  const rootRef = useRef2(null);
+  const wasOpen = useRef2(isOpen);
+  const { desktop: topBarOnDesktop = false, leading, ...topBarProps } = topBar || {};
+  const resolvedLeading = leading ?? (navigation ? "menu" : void 0);
+  const shell = `[data-jumpy-app-shell="${shellId}"]`;
+  const width = typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth;
+  function setOpen(next) {
+    if (navigationOpen === void 0) setInternalOpen(next);
+    onNavigationOpenChange?.(next);
+  }
+  useEffect2(() => {
+    if (!isOpen) return void 0;
+    const desktop = window.matchMedia(`(min-width: ${breakpoint}px)`);
+    const closeOnDesktop = () => {
+      if (desktop.matches) setOpen(false);
+    };
+    closeOnDesktop();
+    desktop.addEventListener("change", closeOnDesktop);
+    return () => desktop.removeEventListener("change", closeOnDesktop);
+  });
+  useEffect2(() => {
+    const closed = wasOpen.current && !isOpen;
+    wasOpen.current = isOpen;
+    if (!closed) return void 0;
+    const frame = window.requestAnimationFrame(() => {
+      if (document.activeElement && document.activeElement !== document.body) return;
+      rootRef.current?.querySelector(':scope > [data-jumpy-slot="app-shell-body"] > [data-jumpy-component="top-bar"] > [data-leading="menu"] button')?.focus();
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [isOpen]);
+  function closeOnNavigate(event) {
+    const item = event.target.closest?.('a[href], [data-jumpy-component="side-menu-item"]');
+    if (!item || item.hasAttribute("aria-expanded") || item.getAttribute("aria-disabled") === "true" || item.disabled) return;
+    setOpen(false);
+  }
+  const shellStyles = `
+${shell} { grid-template-columns: minmax(0, 1fr); }
+${shell} > [data-jumpy-slot='app-shell-sidebar'] { display: none; }
+@media (min-width: ${breakpoint}px) {
+  ${shell} { grid-template-columns: ${width} minmax(0, 1fr); }
+  ${shell} > [data-jumpy-slot='app-shell-sidebar'] { display: flex; }
+  ${shell} > [data-jumpy-slot='app-shell-body'] > [data-jumpy-component='tab-bar'] { display: none; }
+  ${shell} > [data-jumpy-slot='app-shell-body'] > [data-jumpy-component='top-bar'][data-mobile-only='true'] { display: none; }
+  ${shell} > [data-jumpy-slot='app-shell-body'] > [data-jumpy-component='top-bar'] > [data-leading='menu'] { display: none; }
+}`;
+  const topBarNode = /* @__PURE__ */ jsx2(
+    JumpTopBar,
+    {
+      ...topBarProps,
+      "data-mobile-only": topBarOnDesktop ? "false" : "true",
+      leading: resolvedLeading,
+      menuOpen: isOpen,
+      onMenu: () => setOpen(true),
+      title: topBarProps.title ?? brand,
+      ariaLabels: { menu: ariaLabels.openNavigation, back: ariaLabels.back, ...topBarProps.ariaLabels || {} }
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ...props,
+      ref: rootRef,
+      "data-jumpy-component": "app-shell",
+      "data-jumpy-app-shell": shellId,
+      "data-navigation-open": isOpen ? "true" : "false",
+      className: cn(className),
+      style: {
+        display: "grid",
+        minHeight: "100dvh",
+        backgroundColor: "var(--jumpy-color-surface-canvas)",
+        color: "var(--jumpy-color-text-primary)",
+        fontFamily: theme.fontFamily.familyBase,
+        ...props.style || {}
+      },
+      children: [
+        /* @__PURE__ */ jsx2("style", { children: shellStyles }),
+        /* @__PURE__ */ jsxs2(
+          "aside",
+          {
+            "data-jumpy-slot": "app-shell-sidebar",
+            "aria-label": ariaLabels.navigation || "Navigation",
+            style: {
+              boxSizing: "border-box",
+              position: "sticky",
+              top: 0,
+              height: "100dvh",
+              flexDirection: "column",
+              overflowY: "auto",
+              borderRight: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)`,
+              backgroundColor: "var(--jumpy-color-surface-card)"
+            },
+            children: [
+              brand ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-brand", style: { padding: spacingValue(theme, JumpySpacing.large2XL), borderBottom: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: brand }) : null,
+              navigation ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-navigation", style: { flex: 1, padding: spacingValue(theme, JumpySpacing.large) }, children: navigation }) : null,
+              sidebarFooter ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-sidebar-footer", style: { padding: spacingValue(theme, JumpySpacing.large), borderTop: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: sidebarFooter }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { "data-jumpy-slot": "app-shell-body", style: { display: "flex", flexDirection: "column", minWidth: 0, minHeight: "100dvh" }, children: [
+          topBar !== null ? topBarNode : null,
+          /* @__PURE__ */ jsx2("main", { "data-jumpy-slot": "app-shell-content", style: { flex: 1, minWidth: 0 }, children }),
+          tabBar && !hideTabBar ? tabBar : null
+        ] }),
+        isOpen ? /* @__PURE__ */ jsx2(JumpyModalLayer, { onVisibleChange: setOpen, "data-jumpy-component": "app-shell-drawer-overlay", style: { position: "fixed", inset: 0, zIndex: 60, backgroundColor: "var(--jumpy-color-surface-overlay)" }, children: /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": ariaLabels.navigation || "Navigation",
+            "data-jumpy-component": "app-shell-drawer",
+            onClick: closeOnNavigate,
+            onTouchStart: (event) => {
+              const touch = event.touches[0];
+              swipeStart.current = touch ? { x: touch.clientX, y: touch.clientY } : null;
+            },
+            onTouchEnd: (event) => {
+              const start = swipeStart.current;
+              const touch = event.changedTouches[0];
+              swipeStart.current = null;
+              if (!start || !touch) return;
+              const dx = touch.clientX - start.x;
+              const dy = touch.clientY - start.y;
+              if (dx < -spacingValue(theme, JumpySpacing.large4XL) && Math.abs(dx) > Math.abs(dy) * 1.5) setOpen(false);
+            },
+            style: {
+              boxSizing: "border-box",
+              position: "fixed",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              width: "100vw",
+              height: "100dvh",
+              overflowY: "auto",
+              outline: "none",
+              backgroundColor: "var(--jumpy-color-surface-card)",
+              color: "var(--jumpy-color-text-primary)",
+              fontFamily: theme.fontFamily.familyBase,
+              paddingBottom: "env(safe-area-inset-bottom, 0px)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs2("div", { "data-jumpy-slot": "app-shell-drawer-header", style: { boxSizing: "border-box", display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", alignItems: "center", gap: spacingValue(theme, JumpySpacing.medium), minHeight: `calc(${sizeValue(theme, JumpySize.large2XL)}px + env(safe-area-inset-top, 0px))`, padding: `calc(${spacingValue(theme, JumpySpacing.smallXS)}px + env(safe-area-inset-top, 0px)) calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-right, 0px)) ${spacingValue(theme, JumpySpacing.smallXS)}px calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-left, 0px))`, borderBottom: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: [
+                /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", marginLeft: -spacingValue(theme, JumpySpacing.smallXS) }, children: /* @__PURE__ */ jsx2(JumpIconButton, { variant: "borderless", "aria-label": ariaLabels.closeNavigation || "Close navigation", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx2(JumpyNavigationIcon, { type: "close" }) }) }),
+                /* @__PURE__ */ jsx2("span", { style: { minWidth: 0 }, children: brand })
+              ] }),
+              /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-drawer-navigation", style: { flex: 1, padding: spacingValue(theme, JumpySpacing.large) }, children: navigation }),
+              sidebarFooter ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-drawer-footer", style: { padding: spacingValue(theme, JumpySpacing.large), borderTop: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: sidebarFooter }) : null
+            ]
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
 function JumpSectionHeader({ as, variant = "regular", description, className = "", children, ...props }) {
   const theme = useJumpyTheme();
   const Component = as || "li";
@@ -2947,7 +3313,7 @@ function JumpTimePicker({ label = "Time", hint, value, defaultValue = null, onCh
       /* @__PURE__ */ jsxs2("div", { style: { display: "flex", position: "relative", justifyContent: "center", alignItems: "center", gap: spacingValue(theme, JumpySpacing.small), padding: `${spacingValue(theme, JumpySpacing.zero)}px ${spacingValue(theme, JumpySpacing.zero)}px`, overflow: "hidden" }, children: [
         /* @__PURE__ */ jsx2("div", { "aria-hidden": "true", style: { position: "absolute", left: 0, right: 0, top: "50%", height: sizeValue(theme, JumpySize.medium), transform: "translateY(-50%)", backgroundColor: "var(--jumpy-interactive-active-regular-default-surface)", pointerEvents: "none" } }),
         /* @__PURE__ */ jsx2(TimeColumn, { label: "Hour", values: hours, selected: String(displayHour).padStart(2, "0"), onSelect: (next) => commit("hour", next), theme }),
-        /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", style: { zIndex: 1, display: "flex", alignItems: "center", justifyContent: "center", width: sizeValue(theme, JumpySize.smallXS), height: sizeValue(theme, JumpySize.large), padding: `${spacingValue(theme, JumpySpacing.small3XS)}px 0`, color: "var(--jumpy-interactive-active-regular-default-text)", fontFamily: theme.fontFamily.familyBase, fontSize: textStyleValue(theme, JumpyTextStyle.bodyLargeEmphasized).fontSize, fontWeight: textStyleValue(theme, JumpyTextStyle.bodyLargeEmphasized).fontWeight }, children: ":" }),
+        /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", style: { zIndex: 1, display: "flex", alignItems: "center", justifyContent: "center", transform: "translateY(-0.1em)", width: sizeValue(theme, JumpySize.smallXS), height: sizeValue(theme, JumpySize.large), padding: `${spacingValue(theme, JumpySpacing.small3XS)}px 0`, color: "var(--jumpy-interactive-active-regular-default-text)", fontFamily: theme.fontFamily.familyBase, fontSize: textStyleValue(theme, JumpyTextStyle.bodyLargeEmphasized).fontSize, fontWeight: textStyleValue(theme, JumpyTextStyle.bodyLargeEmphasized).fontWeight }, children: ":" }),
         /* @__PURE__ */ jsx2(TimeColumn, { label: "Minute", values: minutes, selected: String(currentMinute).padStart(2, "0"), onSelect: (next) => commit("minute", next), theme }),
         !twentyFourHours ? /* @__PURE__ */ jsx2(TimeColumn, { label: "Period", values: ["AM", "PM"], selected: currentPeriod, onSelect: (next) => commit("period", next), theme }) : null
       ] }),
@@ -2960,15 +3326,19 @@ function JumpTimePicker({ label = "Time", hint, value, defaultValue = null, onCh
 }
 function TimeColumn({ label, values, selected, onSelect, theme }) {
   const selectedIndex = Math.max(0, values.indexOf(selected));
-  const visibleValues = Array.from({ length: Math.min(5, values.length) }, (_, offsetIndex) => {
-    const centeredOffset = offsetIndex - 2;
-    return values[(selectedIndex + centeredOffset + values.length) % values.length];
+  const wraps = values.length >= 5;
+  const visibleValues = Array.from({ length: 5 }, (_, offsetIndex) => {
+    const index = selectedIndex + offsetIndex - 2;
+    if (wraps) return values[(index + values.length) % values.length];
+    return index >= 0 && index < values.length ? values[index] : null;
   });
+  const rowHeight = sizeValue(theme, JumpySize.large) + spacingValue(theme, JumpySpacing.small3XS) * 2;
   const bodyMedium = textStyleValue(theme, JumpyTextStyle.bodyMedium);
   const bodyLargeEmphasized = textStyleValue(theme, JumpyTextStyle.bodyLargeEmphasized);
-  return /* @__PURE__ */ jsx2("div", { "aria-label": label, style: { position: "relative", zIndex: 1, display: "flex", flexDirection: "column", overflow: "hidden", padding: `0 ${spacingValue(theme, JumpySpacing.small3XS)}px`, margin: `0 ${-spacingValue(theme, JumpySpacing.small3XS)}px`, height: (sizeValue(theme, JumpySize.large) + spacingValue(theme, JumpySpacing.small3XS) * 2) * 5 }, children: /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column" }, children: visibleValues.map((value) => {
+  return /* @__PURE__ */ jsx2("div", { "aria-label": label, style: { position: "relative", zIndex: 1, display: "flex", flexDirection: "column", overflow: "hidden", padding: `0 ${spacingValue(theme, JumpySpacing.small3XS)}px`, margin: `0 ${-spacingValue(theme, JumpySpacing.small3XS)}px`, height: rowHeight * 5 }, children: /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column" }, children: visibleValues.map((value, offsetIndex) => {
+    if (value === null) return /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", style: { flex: `0 0 ${rowHeight}px` } }, `${label}-empty-${offsetIndex}`);
     const active = value === selected;
-    return /* @__PURE__ */ jsx2("button", { type: "button", "data-jumpy-component": "time-picker-wheel-button", onClick: () => onSelect(value), "data-selected": active ? "true" : "false", style: { border: 0, width: sizeValue(theme, JumpySize.large), height: sizeValue(theme, JumpySize.large), flex: `0 0 ${sizeValue(theme, JumpySize.large)}px`, backgroundColor: "transparent", color: active ? "var(--jumpy-interactive-active-regular-default-text, var(--jumpy-color-text-on-primary))" : "var(--jumpy-interactive-inactive-regular-default-text, var(--jumpy-color-text-primary))", padding: `${spacingValue(theme, JumpySpacing.small3XS)}px 0`, cursor: "pointer", fontFamily: theme.fontFamily.familyBase, fontSize: active ? bodyLargeEmphasized.fontSize : bodyMedium.fontSize, lineHeight: active ? bodyLargeEmphasized.lineHeight : bodyMedium.lineHeight, fontWeight: active ? bodyLargeEmphasized.fontWeight : bodyMedium.fontWeight }, children: value }, `${label}-${value}`);
+    return /* @__PURE__ */ jsx2("button", { type: "button", "data-jumpy-component": "time-picker-wheel-button", onClick: () => onSelect(value), "data-selected": active ? "true" : "false", style: { border: 0, width: sizeValue(theme, JumpySize.large), height: rowHeight, flex: `0 0 ${rowHeight}px`, backgroundColor: "transparent", color: active ? "var(--jumpy-interactive-active-regular-default-text, var(--jumpy-color-text-on-primary))" : "var(--jumpy-interactive-inactive-regular-default-text, var(--jumpy-color-text-primary))", padding: `${spacingValue(theme, JumpySpacing.small3XS)}px 0`, cursor: "pointer", fontFamily: theme.fontFamily.familyBase, fontSize: active ? bodyLargeEmphasized.fontSize : bodyMedium.fontSize, lineHeight: active ? bodyLargeEmphasized.lineHeight : bodyMedium.lineHeight, fontWeight: active ? bodyLargeEmphasized.fontWeight : bodyMedium.fontWeight }, children: value }, `${label}-${value}`);
   }) }) });
 }
 function flattenDropdownItems(items) {
@@ -3344,11 +3714,12 @@ function JumpButton({ as, size: size2, variant = "primary", status = "regular",
   const Component = as || "button";
   const isButton = Component === "button";
   const isDisabled = disabled || isLoading;
-  const spacing = getButtonSpacing(theme, variant, Boolean(leading), Boolean(trailing));
+  const displayedLeading = isLoading ? /* @__PURE__ */ jsx2(JumpSpinner, { size: "xSmall", showTrack: false, "aria-hidden": "true", style: { display: "block", width: iconSize, height: iconSize, color: "inherit" } }) : leading;
+  const spacing = getButtonSpacing(theme, variant, Boolean(displayedLeading), Boolean(trailing));
   const hasBorder = variant === "secondary" || variant === "tertiary";
   if (size2 !== void 0) {
     const border = hasBorder ? borderWidthValue(theme, JumpyBorderWidth.small) : 0;
-    const contentHeight = Math.max(textStyle.fontSize * textStyle.lineHeight, leading || trailing ? iconSize : 0);
+    const contentHeight = Math.max(textStyle.fontSize * textStyle.lineHeight, displayedLeading || trailing ? iconSize : 0);
     spacing.paddingTop = spacing.paddingBottom = Math.max(0, (height - contentHeight - border * 2) / 2);
     if (compact) {
       spacing.gap = spacingValue(theme, JumpySpacing.small3XS);
@@ -3356,9 +3727,9 @@ function JumpButton({ as, size: size2, variant = "primary", status = "regular",
     }
   }
   const content = /* @__PURE__ */ jsxs2("span", { style: { display: "inline-flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: spacing.gap, whiteSpace: "nowrap" }, children: [
-    leading ? /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: "inline-flex shrink-0 items-center justify-center", style: { width: iconSize, height: iconSize, lineHeight: 0, fontSize: iconSize }, children: leading }) : null,
-    /* @__PURE__ */ jsx2("span", { children }),
-    trailing ? /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: "inline-flex shrink-0 items-center justify-center", style: { width: iconSize, height: iconSize, lineHeight: 0, fontSize: iconSize }, children: trailing }) : null
+    displayedLeading ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "button-leading", "aria-hidden": "true", style: { display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, width: iconSize, height: iconSize, lineHeight: 0, fontSize: iconSize }, children: displayedLeading }) : null,
+    /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "button-label", children }),
+    trailing ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "button-trailing", "aria-hidden": "true", style: { display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, width: iconSize, height: iconSize, lineHeight: 0, fontSize: iconSize }, children: trailing }) : null
   ] });
   return /* @__PURE__ */ jsx2(
     Component,
@@ -3376,6 +3747,13 @@ function JumpButton({ as, size: size2, variant = "primary", status = "regular",
       "aria-disabled": !isButton && isDisabled ? true : props["aria-disabled"],
       tabIndex: !isButton && isDisabled ? -1 : props.tabIndex,
       disabled: isButton ? isDisabled : void 0,
+      onClick: (event) => {
+        if (isDisabled) {
+          event.preventDefault();
+          return;
+        }
+        props.onClick?.(event);
+      },
       onPointerDown: (event) => {
         setPressed(true);
         props.onPointerDown?.(event);
@@ -3418,13 +3796,7 @@ function JumpButton({ as, size: size2, variant = "primary", status = "regular",
         ...elevated && !isDisabled ? { "--jumpy-action-default-shadow": shadowValue(theme, JumpyShadowStyle.positiveMedium) } : {},
         ...props.style || {}
       },
-      children: /* @__PURE__ */ jsxs2("span", { style: { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", whiteSpace: "nowrap" }, children: [
-        /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", whiteSpace: "nowrap", opacity: isLoading ? 0 : 1 }, children: content }),
-        isLoading ? /* @__PURE__ */ jsxs2("span", { className: "absolute inset-0 inline-flex items-center justify-center gap-2 whitespace-nowrap", children: [
-          /* @__PURE__ */ jsx2("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx2("span", { className: "opacity-90", children: "Loading" })
-        ] }) : null
-      ] })
+      children: /* @__PURE__ */ jsx2("span", { style: { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", whiteSpace: "nowrap" }, children: content })
     }
   );
 }
@@ -3595,10 +3967,12 @@ function TokenEditorField(props) {
   const fieldContext = useContext(JumpyFieldContext);
   return /* @__PURE__ */ jsx2(TokenEditor, { ...props, fieldContext });
 }
-function JumpTokenInput({ ref, value, defaultValue = [], onChange, onTokenInsert, onTokenRemove, label, hint, status = "regular", error = false, disabled = false, readOnly = false, className = "", ...props }) {
-  const [internalValue, setInternalValue] = useState2(() => normalizeTokenInputValue(defaultValue));
+function JumpTokenInput({ ref, value, defaultValue = [], onChange, onTokenInsert, onTokenRemove, multiline = false, minRows = 3, maxRows, hideClearIcon = false, onClear, label, hint, status = "regular", error = false, disabled = false, readOnly = false, className = "", ...props }) {
+  const editorHandle = useRef2(null);
+  const [internalValue, setInternalValue] = useState2(() => normalizeTokenInputValue(defaultValue, multiline));
   const [, refresh] = useState2(0);
-  const model = normalizeTokenInputValue(value === void 0 ? internalValue : value);
+  if (multiline && (!Number.isInteger(minRows) || minRows < 1 || maxRows !== void 0 && (!Number.isInteger(maxRows) || maxRows < minRows))) throw new Error("JumpTokenInput requires minRows >= 1 and maxRows >= minRows");
+  const model = normalizeTokenInputValue(value === void 0 ? internalValue : value, multiline);
   const change = (next) => {
     if (disabled || readOnly) return;
     if (value === void 0) setInternalValue(next);
@@ -3609,7 +3983,11 @@ function JumpTokenInput({ ref, value, defaultValue = [], onChange, onTokenInsert
     for (const token of nextTokens) if (!previousTokens.some((previous) => previous.id === token.id)) onTokenInsert?.(token);
     for (const token of previousTokens) if (!nextTokens.some((current) => current.id === token.id)) onTokenRemove?.(token);
   };
-  return /* @__PURE__ */ jsx2(JumpField, { label, hint, status, error, hideClearIcon: true, className, children: /* @__PURE__ */ jsx2(TokenEditorField, { ...props, editorRef: ref, model, value: tokenInputText(model), "data-has-value": model.length > 0, disabled, readOnly, onValueChange: change }) });
+  return /* @__PURE__ */ jsx2(JumpField, { label, hint, status, error, hideClearIcon, onClear: () => editorHandle.current?.clear(), className, children: /* @__PURE__ */ jsx2(TokenEditorField, { ...props, editorRef: (handle) => {
+    editorHandle.current = handle;
+    if (typeof ref === "function") return ref(handle);
+    if (ref) ref.current = handle;
+  }, model, multiline, minRows, maxRows, value: tokenInputText(model), "data-has-value": model.length > 0, disabled, readOnly, onValueChange: change, onClear }) });
 }
 function JumpTextarea({ className = "", ...props }) {
   const theme = useJumpyTheme();
@@ -3664,7 +4042,7 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
   const isDropdownTrigger = child.props["data-jumpy-dropdown-trigger"] === true || child.props["data-jumpy-dropdown-trigger"] === "true";
   const readOnly = Boolean(child.props.readOnly) && !isDropdownTrigger;
   const floating = focused && !readOnly || hasValue || Boolean(props.slots?.content);
-  const isTextarea = child.type === JumpTextarea;
+  const isTextarea = child.type === JumpTextarea || child.type === TokenEditorField && child.props.multiline;
   const isDropdown = isDropdownTrigger || child.props["data-jumpy-component"] === "dropdown";
   const status = error ? "alarm" : props.status || "regular";
   const leading = props.slots?.leading ?? props.leading;
@@ -4036,6 +4414,7 @@ function JumpModal({ children }) {
 }
 export {
   BrandMark,
+  JumpAppShell,
   JumpAvatar,
   JumpBackground,
   JumpBadge,
@@ -4080,6 +4459,8 @@ export {
   JumpSnackbarProvider,
   JumpSpinner,
   JumpSwitch,
+  JumpTabBar,
+  JumpTabBarItem,
   JumpTable,
   JumpTableBody,
   JumpTableCell,
@@ -4095,6 +4476,7 @@ export {
   JumpToggleButtonGroup,
   JumpTokenInput,
   JumpTooltip,
+  JumpTopBar,
   JumpTypography,
   JumpyAnimation,
   JumpyAnimationDelay,