@mario_hahn/jumpy-ui 0.12.0 → 0.13.0

package/README.md

@@ -211,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.12.0
+npm install @mario_hahn/jumpy-ui@^0.13.0
 ```
 
 The public npm package uses the `@mario_hahn` scope. Older GitHub Packages releases
@@ -333,6 +333,11 @@ import { JumpAppShell, JumpSideMenu, JumpSideMenuItem, JumpTabBar, JumpTabBarIte
   stays visible and the rest go into a "More actions" menu. Desktop shows labelled
   buttons beside the large title, otherwise in the top bar. Prefer it over `trailing`
   for ordinary actions; keep `trailing` for custom content such as an avatar.
+- `topBar.back` (0.13.0+): `{ label, href, as: Link }` for detail pages ("up" to the
+  parent). Mobile: "‹ label" replaces the menu button; desktop: link above the large
+  title or in the top bar. Returns through history when the previous entry is that
+  parent, otherwise follows `href` (deep links stay in the app). Keep the browser's own
+  back (button, Safari edge swipe) working: every page change needs a history entry.
 - `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"`).

package/dist/{chunk-3PHOJLCH.js → chunk-2I6OOQNV.js}

@@ -11904,6 +11904,25 @@ var providerStyles = `
   backdrop-filter: none;
 }
 
+[data-jumpy-theme='true'] [data-jumpy-slot='app-shell-back'] {
+  display: inline-flex;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Only the label truncates; the chevron keeps its size. */
+[data-jumpy-theme='true'] [data-jumpy-slot='app-shell-back'] > svg {
+  flex: none;
+}
+
+[data-jumpy-theme='true'] [data-jumpy-slot='app-shell-back']:hover {
+  color: var(--jumpy-interactive-active-regular-hover-text);
+}
+
+[data-jumpy-theme='true'] [data-jumpy-slot='app-shell-back']:focus-visible {
+  outline: var(--jumpy-spacing-outline-medium) solid var(--jumpy-interactive-inactive-regular-focus-focus-ring);
+  outline-offset: var(--jumpy-spacing-outline-small);
+}
+
 [data-jumpy-theme='true'] [data-jumpy-component='tab-bar-item'] {
   transition: background-color var(--jumpy-animation-duration-xsmall) var(--jumpy-animation-easing-drift), color var(--jumpy-animation-duration-xsmall) var(--jumpy-animation-easing-drift);
   -webkit-tap-highlight-color: transparent;

package/dist/index.js

@@ -28,7 +28,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-3PHOJLCH.js";
+} from "./chunk-2I6OOQNV.js";
 import {
   cn
 } from "./chunk-3DBKYKP2.js";
@@ -2408,14 +2408,14 @@ 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 }) {
+function JumpyNavigationIcon({ type, size: size2 = 24 }) {
   const paths = {
     menu: "M4 6h16M4 12h16M4 18h16",
     close: "M6 6l12 12M18 6 6 18",
     back: "M15 18l-6-6 6-6",
     more: "M5 12h.01M12 12h.01M19 12h.01"
   };
-  return /* @__PURE__ */ jsx2("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: type === "more" ? 3 : 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] }) });
+  return /* @__PURE__ */ jsx2("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: type === "more" ? 3 : 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, titleAlign = "start", titleHidden = false, ariaLabels = {}, className = "", ...props }) {
   const theme = useJumpyTheme();
@@ -2455,7 +2455,7 @@ function JumpTopBar({ leading, onMenu, onBack, menuOpen = false, title, subtitle
         ...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,
+        leadingNode ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "top-bar-leading", "data-leading": leadingType, style: { minWidth: 0, maxWidth: "100%", marginLeft: -spacingValue(theme, JumpySpacing.smallXS) }, children: leadingNode }) : null,
         /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "top-bar-title", "aria-hidden": titleHidden || void 0, style: titleAlign === "center" ? {
           display: "flex",
           flexDirection: "column",
@@ -2558,6 +2558,71 @@ function JumpTabBarItem({ as, icon, badge, selected = false, children, className
     }
   );
 }
+var jumpyLocations = { current: null, previous: null };
+function jumpyNormalizeUrl(url) {
+  const resolved = new URL(url, window.location.href);
+  const path = resolved.pathname.length > 1 ? resolved.pathname.replace(/\/+$/, "") : resolved.pathname;
+  return `${resolved.origin}${path}${resolved.search === "?" ? "" : resolved.search}`;
+}
+function jumpyPreviousEntryIs(href) {
+  const target = jumpyNormalizeUrl(href);
+  const navigation = window.navigation;
+  if (navigation && typeof navigation.entries === "function" && navigation.currentEntry) {
+    if (!navigation.canGoBack) return false;
+    const previous = navigation.entries()[navigation.currentEntry.index - 1];
+    return Boolean(previous?.url) && jumpyNormalizeUrl(previous.url) === target;
+  }
+  return Boolean(jumpyLocations.previous) && jumpyNormalizeUrl(jumpyLocations.previous) === target && window.history.length > 1;
+}
+function JumpyAppShellBack({ back, variant, ariaLabels }) {
+  const theme = useJumpyTheme();
+  const Component = back.as || (back.href ? "a" : "button");
+  const textStyle = textStyleValue(theme, variant === "inline" ? JumpyTextStyle.bodySmallEmphasized : JumpyTextStyle.bodyMedium);
+  const accessibleName = ariaLabels.backTo ? ariaLabels.backTo(back.label) : `Back to ${back.label}`;
+  function handleClick(event) {
+    back.onClick?.(event);
+    if (event.defaultPrevented || !back.href || back.history === false) return;
+    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    if (!jumpyPreviousEntryIs(back.href)) return;
+    event.preventDefault();
+    window.history.back();
+  }
+  return /* @__PURE__ */ jsxs2(
+    Component,
+    {
+      href: back.href,
+      type: Component === "button" ? "button" : void 0,
+      "aria-label": accessibleName,
+      "data-jumpy-slot": "app-shell-back",
+      "data-variant": variant,
+      onClick: handleClick,
+      style: {
+        boxSizing: "border-box",
+        alignItems: "center",
+        gap: spacingValue(theme, JumpySpacing.small4XS),
+        maxWidth: "100%",
+        minWidth: 0,
+        minHeight: variant === "inline" ? void 0 : sizeValue(theme, JumpySize.largeXL),
+        margin: variant === "inline" ? `0 0 ${spacingValue(theme, JumpySpacing.small3XS)}px ${-spacingValue(theme, JumpySpacing.small3XS)}px` : 0,
+        padding: variant === "inline" ? 0 : `0 ${spacingValue(theme, JumpySpacing.smallXS)}px 0 0`,
+        border: 0,
+        borderRadius: radiusValue(theme, JumpyRadius.small),
+        background: "transparent",
+        color: "var(--jumpy-interactive-active-regular-default-text)",
+        textDecoration: "none",
+        cursor: "pointer",
+        fontFamily: theme.fontFamily.familyBase,
+        fontSize: textStyle.fontSize,
+        lineHeight: textStyle.lineHeight,
+        fontWeight: textStyle.fontWeight
+      },
+      children: [
+        /* @__PURE__ */ jsx2(JumpyNavigationIcon, { type: "back", size: variant === "inline" ? 18 : 24 }),
+        /* @__PURE__ */ jsx2("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: back.label })
+      ]
+    }
+  );
+}
 function JumpyAppShellActions({ actions, variant, ariaLabels }) {
   const theme = useJumpyTheme();
   if (!actions.length) return null;
@@ -2591,12 +2656,19 @@ function JumpAppShell({ brand, navigation, sidebarFooter, topBar, tabBar, hideTa
   const showDrawer = isOpen || drawerMounted;
   const closing = drawerMounted && !isOpen;
   const wasShown = useRef2(showDrawer);
-  const { desktop: topBarDesktop = false, leading, largeTitle = false, actions = [], ...topBarProps } = topBar || {};
+  const { desktop: topBarDesktop = false, leading, largeTitle = false, actions = [], back, ...topBarProps } = topBar || {};
   const showLargeTitle = largeTitle && Boolean(topBarProps.title);
-  const topBarOnDesktop = topBarDesktop || actions.length > 0 && !showLargeTitle;
+  const hasBack = Boolean(back?.label);
+  const topBarOnDesktop = topBarDesktop || !showLargeTitle && (actions.length > 0 || hasBack);
   const largeTitleRef = useRef2(null);
   const [largeTitleCovered, setLargeTitleCovered] = useState2(false);
-  const resolvedLeading = leading ?? (navigation ? "menu" : void 0);
+  const resolvedLeading = hasBack ? /* @__PURE__ */ jsx2(JumpyAppShellBack, { back, variant: "bar", ariaLabels }) : leading ?? (navigation ? "menu" : void 0);
+  useEffect2(() => {
+    const href = window.location.href;
+    if (jumpyLocations.current === href) return;
+    jumpyLocations.previous = jumpyLocations.current;
+    jumpyLocations.current = href;
+  });
   const shell = `[data-jumpy-app-shell="${shellId}"]`;
   const width = typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth;
   function setOpen(next) {
@@ -2655,11 +2727,13 @@ ${shell} { grid-template-columns: minmax(0, 1fr); }
 ${shell} > [data-jumpy-slot='app-shell-sidebar'] { display: none; }
 ${shell} [data-jumpy-slot='app-shell-actions'][data-variant='compact'] { display: inline-flex; }
 ${shell} [data-jumpy-slot='app-shell-actions'][data-variant='full'] { display: none; }
+${shell} [data-jumpy-slot='app-shell-back'][data-variant='inline'] { 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-actions'][data-variant='compact'] { display: none; }
   ${shell} [data-jumpy-slot='app-shell-actions'][data-variant='full'] { display: inline-flex; }
+  ${shell} [data-jumpy-slot='app-shell-back'][data-variant='inline'] { display: flex; width: fit-content; }
   ${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; }
@@ -2674,7 +2748,7 @@ ${shell} [data-jumpy-slot='app-shell-actions'][data-variant='full'] { display: n
       onMenu: () => setOpen(true),
       title: topBarProps.title ?? brand,
       subtitle: showLargeTitle ? void 0 : topBarProps.subtitle,
-      titleAlign: showLargeTitle ? "center" : topBarProps.titleAlign,
+      titleAlign: showLargeTitle || hasBack ? "center" : topBarProps.titleAlign,
       titleHidden: showLargeTitle ? !largeTitleCovered : topBarProps.titleHidden,
       "data-large-title": showLargeTitle ? "true" : void 0,
       trailing: actions.length || topBarProps.trailing ? /* @__PURE__ */ jsxs2(Fragment, { children: [
@@ -2731,6 +2805,7 @@ ${shell} [data-jumpy-slot='app-shell-actions'][data-variant='full'] { display: n
           /* @__PURE__ */ jsxs2("main", { "data-jumpy-slot": "app-shell-content", style: { flex: 1, minWidth: 0 }, children: [
             showLargeTitle ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-large-title", style: { padding: `${spacingValue(theme, JumpySpacing.smallXS)}px calc(var(--jumpy-app-shell-gutter, ${spacingValue(theme, JumpySpacing.large)}px) + env(safe-area-inset-right, 0px)) 0 calc(var(--jumpy-app-shell-gutter, ${spacingValue(theme, JumpySpacing.large)}px) + env(safe-area-inset-left, 0px))` }, children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: spacingValue(theme, JumpySpacing.large), flexWrap: "wrap" }, children: [
               /* @__PURE__ */ jsxs2("div", { style: { minWidth: 0 }, children: [
+                hasBack ? /* @__PURE__ */ jsx2(JumpyAppShellBack, { back, variant: "inline", ariaLabels }) : null,
                 /* @__PURE__ */ jsx2("h1", { ref: largeTitleRef, style: { margin: 0, ...textStyleValue(theme, JumpyTextStyle.displaySmallEmphasized), overflowWrap: "anywhere" }, children: topBarProps.title }),
                 topBarProps.subtitle ? /* @__PURE__ */ jsx2("p", { style: { margin: `${spacingValue(theme, JumpySpacing.small4XS)}px 0 0`, color: "var(--jumpy-color-text-secondary)", ...textStyleValue(theme, JumpyTextStyle.bodyMedium) }, children: topBarProps.subtitle }) : null
               ] }),

package/dist/theme.js

@@ -28,7 +28,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-3PHOJLCH.js";
+} from "./chunk-2I6OOQNV.js";
 export {
   JumpyAnimation,
   JumpyAnimationDelay,

package/index.d.ts

@@ -117,8 +117,9 @@ export declare function JumpTabBar(props: HTMLAttributes<HTMLElement> & { childr
 export type JumpTabBarItemProps = { as?: ElementType; href?: string; icon?: ReactNode; badge?: ReactNode | number; selected?: boolean; children: ReactNode; className?: string; style?: CSSProperties } & Record<string, unknown>
 export declare function JumpTabBarItem(props: JumpTabBarItemProps): ReactNode
 export type JumpAppShellAction = { id?: string; label: string; icon: ReactNode; onClick?: (event: import('react').MouseEvent<HTMLElement>) => void; href?: string; variant?: 'primary' | 'secondary' | 'tertiary' | 'borderless'; disabled?: boolean }
-export type JumpAppShellTopBar = Omit<JumpTopBarProps, 'onMenu' | 'menuOpen'> & { desktop?: boolean; largeTitle?: boolean; actions?: JumpAppShellAction[] }
-export declare function JumpAppShell(props: HTMLAttributes<HTMLDivElement> & { brand?: ReactNode; navigation?: ReactNode; sidebarFooter?: ReactNode; topBar?: JumpAppShellTopBar | null; tabBar?: ReactNode; hideTabBar?: boolean; breakpoint?: number; sidebarWidth?: number | string; navigationOpen?: boolean; defaultNavigationOpen?: boolean; onNavigationOpenChange?: (open: boolean) => void; ariaLabels?: { navigation?: string; openNavigation?: string; closeNavigation?: string; back?: string; moreActions?: string }; children?: ReactNode }): ReactNode
+export type JumpAppShellBack = { label: string; href?: string; as?: ElementType; onClick?: (event: import('react').MouseEvent<HTMLElement>) => void; history?: boolean }
+export type JumpAppShellTopBar = Omit<JumpTopBarProps, 'onMenu' | 'menuOpen'> & { desktop?: boolean; largeTitle?: boolean; actions?: JumpAppShellAction[]; back?: JumpAppShellBack }
+export declare function JumpAppShell(props: HTMLAttributes<HTMLDivElement> & { brand?: ReactNode; navigation?: ReactNode; sidebarFooter?: ReactNode; topBar?: JumpAppShellTopBar | null; tabBar?: ReactNode; hideTabBar?: boolean; breakpoint?: number; sidebarWidth?: number | string; navigationOpen?: boolean; defaultNavigationOpen?: boolean; onNavigationOpenChange?: (open: boolean) => void; ariaLabels?: { navigation?: string; openNavigation?: string; closeNavigation?: string; back?: string; backTo?: (label: string) => string; moreActions?: string }; children?: ReactNode }): ReactNode
 export declare function JumpSectionHeader(props: HTMLAttributes<HTMLElement> & { as?: ElementTag; variant?: 'regular' | 'prominent'; description?: ReactNode; children: ReactNode }): ReactNode
 export declare function JumpSectionFooter(props: HTMLAttributes<HTMLElement> & { as?: ElementTag; children: ReactNode }): ReactNode
 export declare function JumpTag(props: HTMLAttributes<HTMLSpanElement> & { size?: 'small' | 'medium'; status?: 'regular' | 'positive' | 'warning' | 'alarm'; disabled?: boolean; children: ReactNode }): ReactNode

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mario_hahn/jumpy-ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "license": "MIT",
   "type": "module",
   "scripts": {